/* Craft Innkeeper — supplements Bootstrap 5.3 (served from assets/vendor).
   Only what Bootstrap has no utility for lives here. Colours come from
   Bootstrap's own variables, so light and dark follow data-bs-theme.
   No CDN, no inline styles (CSP). */

/* Main navigation: labels never wrap mid-word; the site switcher stays compact. */
.app-nav .nav-link { white-space: nowrap; }
.app-nav .site-switcher { max-width: 16rem; }
@media (min-width: 1200px) { .app-nav .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; } }

/* Auth */
.auth-card { max-width: 26rem; }

/* Home action tiles */
.action-tile { text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.action-tile:hover, .action-tile:focus-visible { border-color: var(--bs-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }
.action-tile .bi { font-size: 1.75rem; }

/* <money-input>: a £ prefix inside a Bootstrap input group */
money-input { display: block; }
money-input > input[type="text"] { font-variant-numeric: tabular-nums; }

/* Count sheet */
.count-card .val { text-align: right; font-variant-numeric: tabular-nums; }
.count-card .qty { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .8rem; }
.count-card .qty-col { width: 5.5rem; }
.count-card .table { margin-bottom: 0; }
.count-card tbody th { font-weight: 500; }
.count-card tr.is-advisory > * { background-color: var(--bs-warning-bg-subtle); }
.count-card tr.has-error > * { background-color: var(--bs-danger-bg-subtle); }
.num, .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals-bar { position: sticky; bottom: 0; z-index: 10; }
/* The End of Day breakdown makes the bar tall: on a phone it scrolls with the page. */
@media (max-width: 767.98px) { .totals-bar { position: static; } }

/* Variance dialog (native <dialog>, styled like a Bootstrap modal) */
dialog.app-dialog {
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg); color: var(--bs-body-color);
    padding: 1.5rem; max-width: 32rem; width: calc(100% - 2rem);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25);
}
dialog.app-dialog::backdrop { background: rgba(0, 0, 0, .5); }

/* Fiscal calendar */
.fy-calendar { font-variant-numeric: tabular-nums; }
.fy-calendar th, .fy-calendar td { text-align: center; vertical-align: middle; white-space: nowrap; }
.fy-calendar .wk { text-align: left; font-weight: 600; }
.fy-calendar .month { font-size: .75rem; color: var(--bs-secondary-color); display: block; line-height: 1; }
.fy-calendar td.today { outline: 2px solid var(--bs-primary); outline-offset: -2px; font-weight: 700; }
/* Months alternate hue per day cell; weeks alternate shade as an overlay on
   top (Bootstrap's --bs-table-bg-type inset shadow), so both read in light
   and dark themes. Newest week is the top row; a month boundary sits under
   the week it starts in, hence border-bottom. */
.fy-calendar thead th { --bs-table-bg: var(--bs-tertiary-bg); }
.fy-calendar td.mo-a { --bs-table-bg: var(--bs-info-bg-subtle); }
.fy-calendar td.mo-b { --bs-table-bg: var(--bs-body-bg); }
.fy-calendar tr.wk-odd > * { --bs-table-bg-type: rgba(var(--bs-emphasis-color-rgb), .07); }
.fy-calendar tr.current > * { --bs-table-bg: var(--bs-primary-bg-subtle); --bs-table-bg-type: transparent; }
.fy-calendar tr.current > :first-child { box-shadow: inset 4px 0 0 var(--bs-primary); }
.fy-calendar tr.week-53 > * { --bs-table-bg: var(--bs-warning-bg-subtle); }
.fy-calendar tr.month-start > * { border-bottom: 2px solid var(--bs-secondary-color); }

/* Day tags: suggestion menu sized to its field */
.tag-suggest { position: relative; }
.tag-suggest .dropdown-menu { width: 100%; max-height: 16rem; overflow-y: auto; }
.tag-chip .btn-close { width: .5em; height: .5em; }

/* Inline style attributes are blocked by the CSP: layout helpers live here. */
.form-narrow { max-width: 44rem; }
.details-narrow { max-width: 32rem; }
.scroll-tall { max-height: 36rem; overflow-y: auto; }
.sales-bars { display: block; width: 100%; height: 10rem; }
.sales-bars rect { fill: var(--bs-primary); opacity: .75; }
.sales-bars rect:hover { opacity: 1; }
.chart-box { position: relative; height: 18rem; }

/* Scrolling history tables (machine page): the header stays in view */
.sticky-head > .table > thead > tr > th { position: sticky; top: 0; z-index: 2; }
.sticky-head tr.is-collection > * { background-color: var(--bs-info-bg-subtle); }
@media (max-width: 575.98px) { .scroll-tall.sticky-head { max-height: 65vh; } }