/* BagusBO theme: one look for every page, based on the Bug Desk design and the brand navy.
   Loaded after Bootstrap and site.css (see _Layout.cshtml). Colours, corners and spacing live here;
   page-specific layout stays in site.css / bugdesk.css. */
:root {
    --bo-navy: #203062;
    --bo-navy-deep: #172449;
    --bo-ink: #23324B;
    --bo-ink-2: #3A4963;
    --bo-muted: #647185;
    --bo-border: #DDE3EC;
    --bo-border-2: #CED7E3;
    --bo-blue-pale: #EAF1FA;
    --bo-row-hover: #F0F5FC;
    --bo-focus: #739BCB;
    --bo-radius: 12px;
    --bo-radius-sm: 7px;

    /* Bootstrap picks these up for links, focus rings and "primary" utilities */
    --bs-primary: #203062;
    --bs-primary-rgb: 32, 48, 98;
    --bs-link-color: #203062;
    --bs-link-color-rgb: 32, 48, 98;
    --bs-link-hover-color: #172449;
    --bs-border-color: #DDE3EC;
    --bs-body-color: #23324B;
}

#content { color: var(--bo-ink); }

/* ---------- Page header: title on the left, actions on the right ---------- */
.bo-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 6px 0 4px;
    margin-bottom: 0;
}
/* Same header as the Bug Desk: small section label, title, one-line description */
.bo-page-heading { min-width: 0; flex: 1 1 340px; }
.bo-eyebrow {
    font-size: 11px;
    letter-spacing: 1.4px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bo-muted);
    margin-bottom: 5px;
}
.bo-page-title {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--bo-navy);
    margin: 0;
}
.bo-page-title > i { color: #6F8FC0; font-size: .8em; }
.bo-page-desc { margin: 6px 0 0; color: var(--bo-muted); font-size: 13px; max-width: 78ch; }
.bo-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-self: flex-end; }

/* ---------- Text sizes: the Bug Desk scale (14px body, 13px controls) on every page ---------- */
#content main { font-size: 14px; line-height: 1.5; }
#content main .form-control, #content main .form-select, #content main .input-group-text { font-size: 13px; min-height: 38px; }
#content main .btn { font-size: 13px; }
#content main .btn-sm { font-size: 12px; }
#content main p, #content main li { font-size: inherit; }

/* Filter bar (was a "Filter Options" card): compact, like the Bug Desk's */
.card.bo-filter > .card-body { padding: 12px 14px; }
.card.bo-filter .form-label { font-size: 11.5px; color: var(--bo-muted); margin-bottom: 4px; }

/* Embedded Google Sheets */
.bo-embed {
    background: #fff;
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    overflow: hidden;
    /* Fills the rest of the screen below the header (the page is a flex column, see below) */
    flex: 1 1 auto;
    min-height: 420px;
}
.bo-embed iframe { width: 100%; height: 100%; min-height: 0 !important; display: block; }
#content:has(.bo-embed) { display: flex; flex-direction: column; }
#content:has(.bo-embed) > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Tasks: three panes in one card under the page header */
/* The card fills the rest of the screen below the header, whatever the header's height */
@media (min-width: 768px) {
    #content:has(.tk-dashboard) { display: flex; flex-direction: column; }
    #content:has(.tk-dashboard) > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
}
.bo-page-head + .tk-dashboard {
    flex: 1 1 auto;
    height: auto;
    min-height: 520px;
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    background: #fff;
}
/* Phones: the panes stack, so the card grows with them instead of clipping */
@media (max-width: 767px) {
    .bo-page-head + .tk-dashboard { height: auto; min-height: 0; }
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    box-shadow: none !important;
    background: #fff;
}
.card > .card-header {
    background: #FCFCFD !important;
    border-bottom: 1px solid var(--bo-border);
    border-radius: var(--bo-radius) var(--bo-radius) 0 0;
    padding: 12px 18px !important;
}
.card > .card-header h5, .card > .card-header h6, .card > .card-header .card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bo-ink);
    margin: 0;
}
.card > .card-header h6 > i, .card > .card-header h5 > i { color: #6F8FC0; }
.card-body { padding: 18px; }

/* Create / edit pages: the form sits in one card */
.bo-form-card {
    background: #fff;
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    padding: 20px 22px;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--bo-radius-sm);
    font-weight: 600;
}
.btn-sm { border-radius: 6px; }
.btn-primary {
    --bs-btn-bg: #203062;
    --bs-btn-border-color: #203062;
    --bs-btn-hover-bg: #172449;
    --bs-btn-hover-border-color: #172449;
    --bs-btn-active-bg: #172449;
    --bs-btn-active-border-color: #172449;
    --bs-btn-disabled-bg: #203062;
    --bs-btn-disabled-border-color: #203062;
    --bs-btn-focus-shadow-rgb: 115, 155, 203;
}
.btn-outline-primary {
    --bs-btn-color: #203062;
    --bs-btn-border-color: #9FB0C8;
    --bs-btn-hover-bg: #203062;
    --bs-btn-hover-border-color: #203062;
    --bs-btn-active-bg: #172449;
    --bs-btn-active-border-color: #172449;
}
.btn-outline-secondary {
    --bs-btn-color: #3A4963;
    --bs-btn-border-color: #CED7E3;
    --bs-btn-hover-color: #203062;
    --bs-btn-hover-bg: #EAF1FA;
    --bs-btn-hover-border-color: #9FB0C8;
    --bs-btn-active-color: #203062;
    --bs-btn-active-bg: #DCE7F5;
    --bs-btn-active-border-color: #9FB0C8;
}
.btn-secondary {
    --bs-btn-bg: #fff;
    --bs-btn-color: #3A4963;
    --bs-btn-border-color: #CED7E3;
    --bs-btn-hover-bg: #EAF1FA;
    --bs-btn-hover-color: #203062;
    --bs-btn-hover-border-color: #9FB0C8;
    --bs-btn-active-bg: #DCE7F5;
    --bs-btn-active-color: #203062;
}
.btn:focus-visible, .btn:active:focus {
    box-shadow: 0 0 0 3px rgba(115, 155, 203, .35) !important;
}

/* ---------- Forms ---------- */
.form-label, .control-label, label.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bo-ink-2);
    margin-bottom: 6px;
}
.form-control, .form-select {
    border: 1px solid var(--bo-border-2);
    border-radius: var(--bo-radius-sm);
    color: var(--bo-ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bo-focus);
    box-shadow: 0 0 0 3px rgba(115, 155, 203, .3) !important;
}
.form-control[readonly], .form-control:disabled { background-color: #F6F8FB; }
.input-group-text {
    border-color: var(--bo-border-2);
    border-radius: var(--bo-radius-sm);
    color: var(--bo-muted);
}
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.form-check-input:checked { background-color: var(--bo-navy); border-color: var(--bo-navy); }
.text-danger { color: #96333B !important; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: var(--bo-row-hover); color: var(--bo-ink); }
.table > :not(caption) > * > * { border-bottom-color: #E9EDF3; }
thead.table-light th, .table thead th {
    background: var(--bo-blue-pale) !important;
    color: var(--bo-navy) !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid #CEDAEC !important;
    white-space: nowrap;
}
.table tbody td { font-size: 13px; }
#content main .table tbody td { font-size: 13px; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--bo-row-hover); }

/* Same listing style as the Bug Desk table: left-aligned, roomy rows, light zebra, bold first column.
   site.css centres every th/td with !important, so these need it too. */
.table thead th {
    font-size: 11px;
    padding: 13px 10px !important;
    text-align: left !important;
}
/* DataTables puts its sort arrows on the right of sortable headers */
.table thead th.dt-orderable-asc, .table thead th.dt-orderable-desc,
.table thead th.dt-ordering-asc, .table thead th.dt-ordering-desc { padding-right: 28px !important; }
.table > tbody > tr > td {
    padding: 11px 10px;
    color: var(--bo-ink);
    text-align: left !important;
}
.table > tbody > tr:nth-child(even) > * { --bs-table-bg-type: #FAFBFD; }
.table > tbody > tr:hover > * { --bs-table-bg-state: var(--bo-row-hover); }
.table > tbody > tr:last-child > td { border-bottom-width: 0; }
.table > tbody > tr > td:first-child { font-weight: 600; }
/* Empty-state row: plain and left-aligned, so it stays in view when a wide table scrolls */
.table > tbody > tr > td.dt-empty { text-align: left !important; font-weight: 400; color: var(--bo-muted); }
/* Like the Bug Desk list: on narrow screens a listing scrolls sideways instead of squashing every cell */
table.dataTable.table { min-width: 860px; }
.table td .btn, .table td .badge { white-space: nowrap; }
/* Opt back into centring for a column, e.g. a checkbox or icon column */
.table th.text-center, .table td.text-center { text-align: center !important; }
.table-responsive { border-radius: 10px; }

/* DataTables 2: length / search / paging controls */
div.dt-container .dt-paging .dt-paging-button,
.dt-paging .page-link { border-radius: 6px !important; color: var(--bo-ink-2) !important; }
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-paging .page-item.active .page-link,
.page-item.active .page-link {
    background: var(--bo-navy) !important;
    border-color: var(--bo-navy) !important;
    color: #fff !important;
}
div.dt-container .dt-info, div.dt-container .dt-length label { color: var(--bo-muted); font-size: 12.5px; }
div.dt-container select.dt-input, div.dt-container .dt-input { border: 1px solid var(--bo-border-2); border-radius: 6px; }

/* ---------- Badges, alerts, modals ---------- */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .2px; padding: .4em .75em; }
.badge.bg-primary { background-color: var(--bo-navy) !important; }
.badge.bg-success { background-color: #EAF6EF !important; color: #1F6A49 !important; }
.badge.bg-danger { background-color: #FBEDEF !important; color: #96333B !important; }
.badge.bg-warning { background-color: #FBF5E9 !important; color: #8E5B17 !important; }
.badge.bg-secondary { background-color: #EEF1F5 !important; color: #5A677C !important; }
.badge.bg-light { background-color: #F3F5F8 !important; color: #3A4963 !important; }

.alert { border-radius: 10px; font-size: 13.5px; }

.modal-content { border: 0; border-radius: 14px; box-shadow: 0 24px 90px rgba(21, 39, 81, .25); }
.modal-header { border-bottom: 1px solid var(--bo-border); padding: 14px 20px; }
.modal-title { color: var(--bo-navy); font-weight: 700; font-size: 17px; }
.modal-footer { border-top: 1px solid var(--bo-border); background: #FBFAF8; border-radius: 0 0 14px 14px; }

/* ---------- Tasks & Calendar: same navy as everywhere else ---------- */
.tk-btn-compose, .tk-btn-primary { background-color: var(--bo-navy) !important; border-color: var(--bo-navy) !important; }
.tk-btn-compose:hover, .tk-btn-primary:hover { background-color: var(--bo-navy-deep) !important; }
.calendar-card { border: 1px solid var(--bo-border); border-radius: var(--bo-radius); box-shadow: none; }
.fc .fc-button-primary { background-color: var(--bo-navy); border-color: var(--bo-navy); }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:hover { background-color: var(--bo-navy-deep); border-color: var(--bo-navy-deep); }
.fc .fc-toolbar-title { color: var(--bo-navy); font-weight: 700; }

/* ---------- Calendar colours ----------
   Same idea as the status badges: soft tint, dark text of the same hue, solid stripe on the left.
   Every pair is about 7:1 or better for readability (the old white-on-amber / white-on-green failed). */
.event-color-Tech      { --ev-bg: #E4F3EC; --ev-ink: #1B5A40; --ev-accent: #2E8B62; }
.event-color-Sales     { --ev-bg: #E3EDFA; --ev-ink: #1A4F86; --ev-accent: #3474C0; }
.event-color-Marketing { --ev-bg: #EEEAF8; --ev-ink: #46397F; --ev-accent: #6C5BBF; }
.event-color-Admin     { --ev-bg: #FBF1DE; --ev-ink: #7A4D10; --ev-accent: #C58A25; }
.event-color-Developer { --ev-bg: #FAE8EF; --ev-ink: #8C2550; --ev-accent: #C44C7B; }
.event-color-Reviewer  { --ev-bg: #E0F2F4; --ev-ink: #175F69; --ev-accent: #2A93A1; }
.event-color-Default   { --ev-bg: #EAF1FA; --ev-ink: #203062; --ev-accent: #203062; }
.event-color-Leave     { --ev-bg: #EEF1F5; --ev-ink: #3F4A5C; --ev-accent: #8592A6; }
.event-color-Holiday   { --ev-bg: #FBE9EB; --ev-ink: #8E2C35; --ev-accent: #C2414A; }

.fc .fc-event[class*="event-color-"] {
    background-color: var(--ev-bg) !important;
    border: 0 !important;
    border-left: 3px solid var(--ev-accent) !important;
    color: var(--ev-ink) !important;
    box-shadow: none !important;
}
.fc .fc-event[class*="event-color-"]:not(.fc-event-start) { border-left-width: 0 !important; }
/* Timed entries (drawn as dot events) are bold by default and all-day / multi-day bars are not: same weight for all */
.fc .fc-event[class*="event-color-"] .fc-event-title,
.fc .fc-event[class*="event-color-"] .fc-custom-grid-label { font-weight: 600 !important; }
.fc .fc-event[class*="event-color-"] .fc-event-main,
.fc .fc-event[class*="event-color-"] .fc-event-title,
.fc .fc-event[class*="event-color-"] .fc-event-time,
.fc .fc-event[class*="event-color-"] .fc-custom-grid-label,
.fc .fc-event[class*="event-color-"] a { color: var(--ev-ink) !important; }
.fc .fc-event[class*="event-color-"]:hover { box-shadow: 0 4px 12px -4px rgba(21, 39, 81, .25) !important; filter: saturate(1.15); }
/* Leave is "away", so it gets light stripes as well as grey */
.fc .fc-event.event-color-Leave { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(63, 74, 92, .07) 6px 12px) !important; }
.fc .event-color-Holiday { font-weight: 700; }
.fc .event-bg-Holiday { background-color: #FDF1F2 !important; opacity: 1 !important; }
/* List view: a plain agenda. Rows left-aligned, time shown, colour dot + team tag, title in normal dark text */
.fc .fc-list { border: 1px solid var(--bo-border) !important; border-radius: 10px; overflow: hidden; }
.fc .fc-list-table td, .fc .fc-list-table th { text-align: left !important; vertical-align: middle !important; }
.fc .fc-list-day > * { background: var(--bo-blue-pale) !important; border-color: #CEDAEC !important; }
.fc .fc-list-day-cushion { background: var(--bo-blue-pale) !important; padding: 8px 14px !important; text-align: left !important; }
.fc .fc-list-day-text { float: none !important; color: var(--bo-navy) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; }
.fc .fc-list-day-side-text { float: none !important; margin-left: 6px; color: var(--bo-muted) !important; font-weight: 600; font-size: 12.5px; text-decoration: none !important; }
.fc .fc-list-day-side-text::before { content: "· "; }
.fc .fc-list-event-time:empty::before { content: "All day"; }
.fc .fc-list-event[class*="event-color-"] { background: #fff !important; border-left: 0 !important; filter: none !important; }
.fc .fc-list-event:hover { transform: none !important; box-shadow: none !important; }
.fc .fc-list-event:hover > td { background: var(--bo-row-hover) !important; }
.fc .fc-list-event > td { padding: 9px 14px !important; border-color: #E9EDF3 !important; font-size: 13px; }
.fc .fc-list-event .fc-list-event-time { display: table-cell !important; width: 1%; white-space: nowrap; color: var(--bo-muted) !important; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.fc .fc-list-event .fc-list-event-graphic { width: 1%; padding-right: 0 !important; }
.fc .fc-list-event .fc-list-event-dot { display: inline-block !important; border-width: 5px !important; border-radius: 50%; border-color: var(--ev-accent, var(--bo-navy)) !important; }
.fc .fc-list-event .fc-list-event-title,
.fc .fc-list-event .fc-list-event-title a { color: var(--bo-ink) !important; font-weight: 500 !important; text-decoration: none !important; }
.fc .fc-list-event:hover .fc-list-event-title a { color: var(--bo-navy) !important; font-weight: 600 !important; }
/* Team tag after the title, in the label's own tint */
.fc .fc-list-event .fc-list-event-title::after {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; vertical-align: 1px;
    background: var(--ev-bg); color: var(--ev-ink); content: none;
}
.fc .fc-list-event.event-color-Tech .fc-list-event-title::after { content: "Tech"; }
.fc .fc-list-event.event-color-Sales .fc-list-event-title::after { content: "Sales"; }
.fc .fc-list-event.event-color-Marketing .fc-list-event-title::after { content: "Marketing"; }
.fc .fc-list-event.event-color-Admin .fc-list-event-title::after { content: "Admin"; }
.fc .fc-list-event.event-color-Developer .fc-list-event-title::after { content: "Developer"; }
.fc .fc-list-event.event-color-Reviewer .fc-list-event-title::after { content: "Reviewer"; }
.fc .fc-list-event.event-color-Leave .fc-list-event-title::after { content: "Leave"; }
.fc .fc-list-event.event-color-Holiday .fc-list-event-title::after { content: "Public holiday"; }
.fc .fc-list-empty { background: #fff !important; color: var(--bo-muted); }
.fc .fc-day-today { background-color: #F5F9FF !important; }
/* The day(s) picked for a new entry: navy outline and tint, so it is not mistaken for today (pale blue) */
.fc .fc-highlight { background: rgba(32, 48, 98, .10) !important; box-shadow: inset 0 0 0 2px var(--bo-navy); opacity: 1; }

/* Legend above the calendar */
.bo-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 14px; font-size: 12.5px; color: var(--bo-ink-2); }
.bo-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bo-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--ev-bg); border-left: 3px solid var(--ev-accent); display: inline-block; }

/* ---------- Dashboard: Bug Desk metric tiles, bar list, chart card ---------- */
.bo-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* Four tiles: 2 x 2 until there is room for one row, never 3 + 1 */
.bo-metrics:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) {
    .bo-metrics:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bo-metric {
    background: #fff; border: 1px solid var(--bo-border); border-radius: var(--bo-radius);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; min-width: 0;
}
.bo-metric:hover { border-color: #9FB0C8; }
.bo-metric b { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; color: var(--bo-navy); font-variant-numeric: tabular-nums; }
.bo-metric span { font-size: 12px; color: var(--bo-muted); }
.bo-metric-lead { background: var(--bo-navy); border-color: var(--bo-navy); }
.bo-metric-lead:hover { background: var(--bo-navy-deep); border-color: var(--bo-navy-deep); }
.bo-metric-lead b { color: #fff; }
.bo-metric-lead span { color: #C0D2ED; }
.bo-metric-warn b { color: #8E5B17; }
.bo-metric-alert b { color: #96333B; }

.bo-barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bo-barlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "track track"; gap: 5px 10px; align-items: baseline; }
.bo-barlist-name { grid-area: name; font-size: 13px; font-weight: 600; color: var(--bo-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-barlist-value { grid-area: value; font-size: 13px; font-weight: 700; color: var(--bo-ink); font-variant-numeric: tabular-nums; }
.bo-barlist-value small { font-weight: 600; color: var(--bo-muted); margin-left: 4px; font-size: 11.5px; }
.bo-barlist-track { grid-area: track; height: 10px; background: #EEF1F5; border-radius: 4px; overflow: hidden; }
.bo-barlist-bar { display: block; height: 100%; background: #2a78d6; border-radius: 4px; }
.bo-chart-note { margin: 14px 0 0; font-size: 12px; color: var(--bo-muted); }
.bo-chart { position: relative; height: var(--chart-h, 240px); }
/* In a card stretched to match the card beside it, the chart grows into the spare height instead of leaving a gap */
.card.h-100 > .card-body:has(> .bo-chart) { display: flex; flex-direction: column; }
.card.h-100 > .card-body > .bo-chart { flex: 1 1 0; height: auto; min-height: var(--chart-h, 240px); }
.bo-metric b { overflow-wrap: anywhere; }

/* Dashboard sections */
.bo-section-title { font-size: 15px; font-weight: 700; color: var(--bo-navy); margin: 8px 0 12px; letter-spacing: -.1px; }
.bo-big { font-size: 30px; font-weight: 700; color: var(--bo-navy); line-height: 1.1; letter-spacing: -.5px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.bo-big small { font-size: 12.5px; font-weight: 600; color: var(--bo-muted); letter-spacing: 0; margin-left: 4px; }
.bo-big-warn { color: #8E5B17; }
.bo-subhead { font-size: 11.5px; font-weight: 700; color: var(--bo-muted); text-transform: uppercase; letter-spacing: .6px; margin: 18px 0 8px; }
.bo-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bo-linklist a { display: block; padding: 6px 10px; border-radius: 7px; background: #F6F8FB; color: var(--bo-ink); text-decoration: none; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-linklist a:hover { background: var(--bo-row-hover); color: var(--bo-navy); }
.bo-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bo-chips li { background: #F3F5F8; border: 1px solid var(--bo-border); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--bo-ink-2); }
.bo-chips b { color: var(--bo-navy); margin-left: 4px; }
.table.bo-compact > :not(caption) > * > * { padding: 9px 14px; }
.table.bo-compact .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Agenda list (dashboard "next 7 days"), coloured like the calendar */
.bo-agenda { list-style: none; margin: 0; padding: 0; }
.bo-agenda li { display: grid; grid-template-columns: 92px 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid #E9EDF3; font-size: 13px; }
.bo-agenda li:last-child { border-bottom: 0; }
.bo-agenda li > i { width: 10px; height: 10px; border-radius: 50%; background: var(--ev-accent, var(--bo-navy)); }
.bo-agenda-date { color: var(--bo-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.bo-agenda-title { color: var(--bo-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-agenda-tag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--ev-bg, var(--bo-blue-pale)); color: var(--ev-ink, var(--bo-navy)); white-space: nowrap; }
@media (max-width: 640px) { .bo-agenda li { grid-template-columns: 70px 10px minmax(0, 1fr); } .bo-agenda-tag { display: none; } }

/* Older dashboard markup (kept in case a page still uses it) */
.custom-card {
    border-radius: var(--bo-radius) !important;
    border: 1px solid var(--bo-border) !important;
    box-shadow: none !important;
}
.custom-card-hover:hover .custom-card { border-color: #9FB0C8 !important; transform: none; }
.custom-card > .card-header { background: transparent !important; border-bottom: 0; padding: 16px 18px 0 !important; }
.custom-card > .card-header h5 { font-size: 12.5px !important; font-weight: 600; color: var(--bo-muted) !important; }
.custom-card .stat-number { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.5px; color: var(--bo-navy) !important; }
.card-red .stat-number { color: #96333B !important; }
.card-yellow .stat-number { color: #8E5B17 !important; }
/* First tile in navy, like the Bug Desk's first metric */
.match-height-row > div:first-child .custom-card { background: var(--bo-navy) !important; border-color: var(--bo-navy) !important; }
.match-height-row > div:first-child .custom-card h5 { color: #C0D2ED !important; }
.match-height-row > div:first-child .custom-card .stat-number { color: #fff !important; }

@media (max-width: 640px) {
    .bo-page-title { font-size: 21px; }
    .bo-form-card { padding: 16px; }
}

/* ---------- Signed out (login): no sidebar or top bar, the card sits in the middle of the screen ---------- */
.bo-signed-out #content { display: flex; flex-direction: column; padding: 16px; }
.bo-signed-out main { flex: 1; display: flex; align-items: center; justify-content: center; }
.bo-login { width: 100%; max-width: 400px; padding: 24px 0; }
.bo-login-card {
    background: #fff; border: 1px solid var(--bo-border); border-radius: var(--bo-radius);
    padding: 32px 28px 28px; box-shadow: 0 8px 24px rgba(32, 48, 98, .08);
}
.bo-login-brand { text-align: center; margin-bottom: 24px; }
.bo-login-brand img { display: block; margin: 0 auto 10px; }
.bo-login-brand h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--bo-navy); }
.bo-login-brand p { margin: 4px 0 0; color: var(--bo-muted); font-size: 13px; }
@media (max-width: 480px) { .bo-login-card { padding: 24px 18px 20px; } }

/* Sidebar logo: shown as is, no tile behind it */
.sidebar-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.sidebar-logo img { display: block; width: 46px; height: 46px; }

/* ---------- Manage Roles: whose roles, then one tick card per role, grouped ---------- */
.bo-roles { width: 100%; }
.bo-roles-user {
    display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--bo-border); border-radius: var(--bo-radius);
}
.bo-roles-avatar {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
    background: var(--bo-navy); color: #fff; font-weight: 700; font-size: 16px;
}
.bo-roles-name { font-size: 16px; font-weight: 700; color: var(--bo-navy); }
.bo-roles-count { font-size: 12.5px; color: var(--bo-muted); }
.bo-roles-group { margin-bottom: 16px; }
.bo-roles-group .bo-section-title { margin: 0 0 8px; }
.bo-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.bo-role {
    display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; cursor: pointer;
    background: #fff; border: 1px solid var(--bo-border); border-radius: var(--bo-radius);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.bo-role:hover { border-color: var(--bo-border-2); box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.bo-role:has(.bo-role-check:checked) { border-color: var(--bo-navy); background: var(--bo-blue-pale); }
.bo-role:has(.bo-role-check:focus-visible) { outline: 2px solid var(--bo-focus); outline-offset: 2px; }
.bo-role-check { flex: 0 0 auto; margin: 3px 0 0; }
.bo-role-icon {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: #F1F4F9; color: var(--bo-navy); font-size: 16px;
}
.bo-role:has(.bo-role-check:checked) .bo-role-icon { background: var(--bo-navy); color: #fff; }
.bo-role-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.bo-role-name { font-weight: 600; font-size: 14px; color: var(--bo-ink); }
.bo-role-gives { font-size: 12.5px; line-height: 1.4; color: var(--bo-muted); }
.bo-roles-actions {
    position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px;
    margin-top: 8px; padding: 12px 0; background: #f4f1ed; border-top: 1px solid var(--bo-border); z-index: 2;
}
.bo-roles-actions .text-muted { margin-right: auto; }
@media (max-width: 576px) { .bo-roles-actions .text-muted { display: none; } }

/* Users list: assigned roles as readable chips with their icon */
.bo-role-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-role-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
    border-radius: 999px; background: var(--bo-blue-pale); border: 1px solid #CEDAEC;
    color: var(--bo-navy); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.bo-role-chip i { font-size: 13px; opacity: .85; }

/* Dashboard: outlets with no group, shown as a share above the group ranking */
.bo-nogroup { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--bo-border); }
.bo-nogroup-text { font-size: 13px; color: var(--bo-ink); line-height: 1.45; }
.bo-nogroup-text b { color: var(--bo-navy); }
.bo-nogroup-text span { display: block; font-size: 12px; color: var(--bo-muted); }
.bo-nogroup-track { margin-top: 8px; height: 8px; border-radius: 999px; background: #D5DCE6; overflow: hidden; }
.bo-nogroup-track span { display: block; height: 100%; background: #2a78d6; border-radius: 999px 0 0 999px; }
.bo-nogroup-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 11.5px; color: var(--bo-muted); }
.bo-nogroup-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #D5DCE6; margin-right: 5px; }
.bo-nogroup-legend i.in { background: #2a78d6; }

/* ---------- SFTP page: local copy status ---------- */
.sftp-sync {
    display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 10px 14px;
    background: #fff; border: 1px solid var(--bo-border); border-radius: var(--bo-radius);
}
.sftp-sync-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: #EAF6EF; color: #1F6A49; font-size: 17px;
}
.sftp-sync.is-running .sftp-sync-icon { background: var(--bo-blue-pale); color: var(--bo-navy); }
.sftp-sync.is-failed .sftp-sync-icon { background: #FBEDEF; color: #96333B; }
.sftp-sync-text { flex: 1; min-width: 0; }
.sftp-sync-title { font-weight: 600; font-size: 13.5px; color: var(--bo-ink); }
.sftp-sync-detail { font-size: 12px; color: var(--bo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sftp-source { margin-top: 4px; font-size: 12px; color: var(--bo-muted); }
.sftp-pending { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #FDF3E1; color: #8A5A12; font-size: 11px; font-weight: 600; }
.spin { display: inline-block; animation: bo-spin 1s linear infinite; }
@keyframes bo-spin { to { transform: rotate(360deg); } }
@media (max-width: 576px) { .sftp-sync { flex-wrap: wrap; } .sftp-sync-detail { white-space: normal; } }

/* ---------- Phones: the sidebar is a slide-out menu over the page ----------
   Hidden by default so the page gets the full width; the menu button opens it (on phones the toggle
   checkbox means "open", on desktop it means "collapsed"); tapping outside or picking a page closes it. */
@media (max-width: 767px) {
    #sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045;
        margin-left: -270px; height: 100%;
        box-shadow: 4px 0 24px rgba(15, 23, 42, .25);
    }
    #sidebar-toggle:checked ~ #sidebar { margin-left: 0; }
    #content { padding: 14px 16px; }
    #sidebar-toggle:checked ~ #content::before {
        content: ""; position: fixed; inset: 0; z-index: 1040; background: rgba(15, 23, 42, .45);
    }
}
/* Phones: number tiles two per row (an odd last tile spans the row) instead of one long column */
@media (max-width: 576px) {
    .bo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .bo-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .bo-metric { padding: 12px 14px; }
    .bo-metric b { font-size: 22px; }
}
/* Phones: 16px text in fields, so iPhones don't zoom the page in when a field is tapped */
@media (max-width: 767px) {
    input.form-control, select.form-select, textarea.form-control, .form-control, .form-select,
    .bd .inp, .bd .sel, .bd .ta, .tk-reply-box, .tk-search-bar, .tk-sort-select, .bbo-task-form-input,
    #content main .form-control, #content main .form-select { font-size: 16px !important; }
}
/* Phones: calendar toolbar on two rows (month name on top, arrows left, views right) */
@media (max-width: 576px) {
    .fc .fc-header-toolbar { flex-wrap: wrap; row-gap: 10px; }
    .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: -1; flex: 1 0 100%; text-align: center; }
    .fc .fc-toolbar-title { font-size: 18px !important; }
    .fc .fc-button { padding: 6px 10px !important; font-size: 13px !important; }
    .fc .fc-col-header-cell-cushion { font-size: 12px; }
}
/* SFTP list: the file name downloads too; on phones size and date go under the name and Download stays in view */
.sftp-name { color: inherit; text-decoration: none; }
.sftp-name:hover { color: var(--bo-navy); text-decoration: underline; }
.sftp-meta { display: none; }
@media (max-width: 576px) {
    #sftpFilesTable { min-width: 0 !important; width: 100% !important; }
    #sftpFilesTable th:last-child, #sftpFilesTable td:last-child { width: 1% !important; white-space: nowrap; }
    #sftpFilesTable th:nth-child(2), #sftpFilesTable td:nth-child(2),
    #sftpFilesTable th:nth-child(3), #sftpFilesTable td:nth-child(3) { display: none; }
    #sftpFilesTable td:first-child { white-space: normal; word-break: break-word; }
    .sftp-meta { display: block; margin: 2px 0 0 22px; font-size: 11.5px; font-weight: 400; color: var(--bo-muted); }
    #sftpFilesTable .sftp-dl.btn { padding: 4px 8px; }
}

/* Dashboard: a small table under a bar chart, one column per bar (the script lines it up with the bars) */
.bo-chart-table {
    display: grid; grid-template-columns: var(--lead, 40px) repeat(var(--cols, 6), minmax(0, 1fr));
    align-items: baseline; row-gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bo-border);
    text-align: center; font-variant-numeric: tabular-nums;
}
.bo-chart-table .bo-ct-head { text-align: left; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--bo-muted); text-transform: uppercase; letter-spacing: .3px; }
.bo-chart-table .bo-ct-num { font-size: 15px; font-weight: 700; color: var(--bo-navy); }
.bo-chart-table .bo-ct-rm { font-size: 12px; color: var(--bo-ink-2); white-space: nowrap; }
@media (max-width: 576px) { .bo-chart-table .bo-ct-rm { font-size: 10.5px; } .bo-chart-table .bo-ct-num { font-size: 13px; } }

/* P1 bug alert on any page: stays in the corner until closed */
.p1-notice {
    position: fixed; right: 16px; bottom: 16px; z-index: 1080; width: min(360px, calc(100vw - 32px));
    padding: 12px 14px 10px; border-radius: 12px; background: #fff; border: 1px solid #f5c2c7; border-left: 4px solid #b91c1c;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18); font-size: 13px;
}
.p1-notice .p1-title { font-weight: 700; color: #b91c1c; margin-bottom: 6px; padding-right: 18px; }
.p1-notice a { display: block; padding: 6px 0; border-top: 1px solid #f1f5f9; color: var(--bo-ink); text-decoration: none; }
.p1-notice a:hover b { text-decoration: underline; }
.p1-notice a small { display: block; color: var(--bo-muted); }
.p1-notice .p1-more { padding-top: 4px; color: var(--bo-muted); font-size: 12px; }
.p1-notice .p1-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--bo-muted); cursor: pointer; }

/* Users list: account status and the action buttons */
.bo-user-status { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bo-user-status.is-on { color: #1E7A4C; }
.bo-user-status.is-locked { color: #9A5B00; }
.bo-user-status.is-off { color: #B42318; }
.bo-user-disabled > td:first-child { color: var(--bo-muted); text-decoration: line-through; }
.bo-user-actions { display: flex; flex-wrap: nowrap; gap: 6px; }
@media (max-width: 576px) { .bo-user-actions { flex-wrap: wrap; } }

/* Phones: list tables become one card per row (site.js labels each cell with its column name).
   A table opts out with data-cards="off" (e.g. the SFTP list, which has its own phone layout). */
@media (max-width: 576px) {
    table.bo-cards.table { min-width: 0 !important; width: 100% !important; border: 0; }
    table.bo-cards > thead { display: none; }
    table.bo-cards > tbody, table.bo-cards > tbody > tr, table.bo-cards > tbody > tr > td { display: block; width: 100% !important; }
    table.bo-cards > tbody > tr {
        margin-bottom: 10px; padding: 10px 14px; border: 1px solid var(--bo-border);
        border-radius: 10px; background: #fff;
    }
    table.bo-cards > tbody > tr > * { --bs-table-bg-type: transparent !important; --bs-table-bg-state: transparent !important; }
    table.bo-cards > tbody > tr > td {
        display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
        padding: 5px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important;
        word-break: break-word; font-size: 13px;
    }
    table.bo-cards > tbody > tr > td::before {
        content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left;
        font-size: 12px; font-weight: 600; color: var(--bo-muted);
    }
    /* First column is the card's title: full width, no label */
    table.bo-cards > tbody > tr > td:first-child {
        display: block; text-align: left !important; font-size: 14px; padding-bottom: 8px !important;
        margin-bottom: 4px; border-bottom: 1px solid #E9EDF3 !important;
    }
    table.bo-cards > tbody > tr > td:first-child::before { content: none; }
    table.bo-cards > tbody > tr > td:empty, table.bo-cards > tbody > tr > td[data-label=""]::before { display: none; }
    table.bo-cards > tbody > tr > td.dt-empty { display: block; text-align: center !important; border: 0 !important; }
    table.bo-cards > tbody > tr > td.dt-empty::before { content: none; }
    table.bo-cards .bo-role-chips, table.bo-cards .bo-user-actions { justify-content: flex-end; }
    .table-responsive:has(> table.bo-cards) { overflow: visible; }
}