/* ============================================================
   oe-app design system
   Layered on top of Bootstrap 5. Defines tokens, refines core
   components (navbar, cards, buttons, badges, forms, tables,
   alerts), and adds mobile-first ergonomics.
   ============================================================ */

:root {
    /* Brand */
    --app-brand: #5b5bd6;
    --app-brand-strong: #4842c2;
    --app-brand-soft: #ecebfb;
    --app-accent: #11b5a4;

    /* Neutrals */
    --app-bg: #f6f7fb;
    --app-surface: #ffffff;
    --app-surface-2: #f1f2f7;
    --app-border: rgba(15, 23, 42, 0.08);
    --app-border-strong: rgba(15, 23, 42, 0.14);
    --app-text: #1d2433;
    --app-text-muted: #6a7388;
    --app-text-subtle: #97a0b3;

    /* State tints */
    --app-success: #1aa67a;
    --app-success-soft: #e3f7ef;
    --app-warning: #d98c1f;
    --app-warning-soft: #fbf1dc;
    --app-danger: #d6455c;
    --app-danger-soft: #fde7eb;
    --app-info: #2891d4;
    --app-info-soft: #e3f1fb;

    /* Elevation */
    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
    --app-shadow:    0 1px 3px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .06);
    --app-shadow-lg: 0 10px 30px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .05);

    /* Radii */
    --app-radius-sm: 6px;
    --app-radius:    10px;
    --app-radius-lg: 14px;

    /* Map onto Bootstrap variables so existing utilities adopt the palette */
    --bs-primary: var(--app-brand);
    --bs-primary-rgb: 91, 91, 214;
    --bs-link-color: var(--app-brand-strong);
    --bs-link-hover-color: var(--app-brand);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-border-radius: var(--app-radius);
    --bs-border-radius-sm: var(--app-radius-sm);
    --bs-border-radius-lg: var(--app-radius-lg);
}

html, body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto",
                 "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.bg-light { background: var(--app-bg) !important; }

main.container-fluid {
    max-width: 1480px;
    padding-inline: clamp(.75rem, 2.5vw, 1.75rem);
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
}

/* Typography ----------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--app-text); letter-spacing: -0.01em; }
h4 { font-weight: 650; font-size: 1.35rem; }
h5 { font-weight: 650; }
.text-muted { color: var(--app-text-muted) !important; }
.text-body-secondary { color: var(--app-text-muted) !important; }
.small, small { color: inherit; }

code, pre, kbd {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: .85em;
}
code {
    background: var(--app-surface-2);
    padding: 1px 6px;
    border-radius: 6px;
    color: var(--app-text);
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Navbar (top-level) --------------------------------------- */
.navbar.navbar-dark.bg-dark {
    background: linear-gradient(180deg, #14182b 0%, #11142a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.navbar-dark .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.navbar-dark .navbar-brand .bi {
    color: var(--app-brand);
    background: rgba(91, 91, 214, .16);
    border-radius: 8px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
}
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, .72);
    border-radius: 8px;
    padding: .4rem .75rem;
    margin-right: .15rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background .15s, color .15s;
}
.navbar-dark .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}
.navbar-dark .nav-link.active {
    color: #fff;
    background: rgba(91, 91, 214, .22);
    box-shadow: inset 0 0 0 1px rgba(91, 91, 214, .25);
}
.navbar-dark .navbar-text {
    color: rgba(255, 255, 255, .55) !important;
}
.navbar-dark .navbar-text .bi { opacity: .8; }
.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .12);
    padding: .25rem .55rem;
}
.navbar-dark .btn-outline-light {
    border-color: rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .9);
}
.navbar-dark .btn-outline-light:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
}

/* Sub-nav (per-service) ------------------------------------ */
.navbar.bg-body-tertiary {
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border) !important;
    padding-top: .25rem;
    padding-bottom: .25rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}
.navbar.bg-body-tertiary .nav-link {
    color: var(--app-text-muted);
    padding: .5rem .85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.navbar.bg-body-tertiary .nav-link:hover {
    color: var(--app-text);
    background: var(--app-surface-2);
}
.navbar.bg-body-tertiary .nav-link.active {
    color: var(--app-brand-strong);
    background: var(--app-brand-soft);
    box-shadow: inset 2px 0 0 var(--app-brand);
}

/* Tabbed sections (nav-tabs) — e.g. the Investments sub-tabs. Clean underline
   style instead of Bootstrap's boxed tabs, so the active section reads fast. */
.nav-tabs {
    border-bottom: 1px solid var(--app-border);
    gap: .1rem;
}
.nav-tabs .nav-link {
    color: var(--app-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .55rem .85rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
    color: var(--app-text);
    border-bottom-color: var(--app-border-strong);
    background: transparent;
    isolation: isolate;
}
.nav-tabs .nav-link.active {
    color: var(--app-brand-strong);
    background: transparent;
    border-bottom-color: var(--app-brand);
    font-weight: 600;
}

/* Cards ---------------------------------------------------- */
.card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.card.shadow-sm { box-shadow: var(--app-shadow-sm); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--app-border);
    padding: .85rem 1rem;
    font-weight: 600;
}
.card-header.bg-white, .card-header.bg-light { background: transparent !important; }
.card-header .bi { color: var(--app-text-muted); margin-right: .25rem; }
.card-body { padding: 1rem; }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--app-border);
    padding: .65rem 1rem;
}
@media (min-width: 768px) {
    .card-body { padding: 1.25rem; }
    .card-header { padding: 1rem 1.25rem; }
    .card-footer { padding: .75rem 1.25rem; }
}

.list-group-item {
    border-color: var(--app-border);
    padding: .75rem 1rem;
}
@media (min-width: 768px) {
    .list-group-item { padding: .85rem 1.25rem; }
}
.list-group-flush > .list-group-item { background: transparent; }
.list-group-item.list-group-item-warning {
    background: var(--app-warning-soft);
    color: var(--app-text);
}

/* Buttons -------------------------------------------------- */
.btn {
    --bs-btn-border-radius: 8px;
    font-weight: 500;
    padding: .45rem .9rem;
    border-radius: 8px;
    transition: filter .15s, transform .05s, box-shadow .15s, background .15s, color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.btn .bi { line-height: 1; }
.btn-sm {
    padding: .3rem .65rem;
    font-size: .825rem;
    border-radius: 7px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--app-brand);
    border-color: var(--app-brand);
    color: #fff;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--app-brand-strong);
    border-color: var(--app-brand-strong);
    color: #fff;
}

.btn-outline-primary {
    color: var(--app-brand-strong);
    border-color: rgba(91, 91, 214, .35);
    background: #fff;
}
.btn-outline-primary:hover {
    background: var(--app-brand-soft);
    color: var(--app-brand-strong);
    border-color: var(--app-brand);
}

.btn-outline-secondary {
    color: var(--app-text);
    border-color: var(--app-border-strong);
    background: #fff;
}
.btn-outline-secondary:hover {
    background: var(--app-surface-2);
    color: var(--app-text);
    border-color: var(--app-border-strong);
}

.btn-outline-danger {
    color: var(--app-danger);
    border-color: rgba(214, 69, 92, .3);
    background: #fff;
}
.btn-outline-danger:hover { background: var(--app-danger-soft); color: var(--app-danger); }

.btn-outline-success {
    color: var(--app-success);
    border-color: rgba(26, 166, 122, .3);
    background: #fff;
}
.btn-outline-success:hover { background: var(--app-success-soft); color: var(--app-success); }

.btn-outline-warning {
    color: var(--app-warning);
    border-color: rgba(217, 140, 31, .35);
    background: #fff;
}
.btn-outline-warning:hover { background: var(--app-warning-soft); color: var(--app-warning); }

.btn-success {
    background: var(--app-success);
    border-color: var(--app-success);
    color: #fff;
}
.btn-success:hover { filter: brightness(.95); color: #fff; background: var(--app-success); border-color: var(--app-success); }

.btn-warning {
    background: var(--app-warning);
    border-color: var(--app-warning);
    color: #fff;
}
.btn-warning:hover { filter: brightness(.95); color: #fff; }

.btn-danger {
    background: var(--app-danger);
    border-color: var(--app-danger);
    color: #fff;
}

.btn-link { padding: 0; border: 0; color: var(--app-brand-strong); }

.btn-group .btn { border-radius: 7px; }
.btn-group .btn + .btn { margin-left: .35rem; }
.btn-group .btn:first-child { margin-left: 0; }

/* Badges --------------------------------------------------- */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .32em .6em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-size: .72rem;
}
.badge .bi { font-size: .9em; }
.badge.bg-dark { background: #2b3147 !important; color: #fff; }
.badge.bg-secondary { background: #5b6478 !important; }
.badge.bg-light.text-dark.border {
    background: var(--app-surface) !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-text) !important;
}
.badge.bg-success-subtle { background: var(--app-success-soft) !important; }
.text-success-emphasis { color: var(--app-success) !important; }
.badge.bg-danger-subtle  { background: var(--app-danger-soft)  !important; }
.text-danger-emphasis  { color: var(--app-danger) !important; }
.badge.bg-warning-subtle { background: var(--app-warning-soft) !important; }
.text-warning-emphasis { color: var(--app-warning) !important; }
.badge.bg-info-subtle    { background: var(--app-info-soft)    !important; }
.text-info-emphasis    { color: var(--app-info) !important; }
.badge.bg-secondary-subtle { background: var(--app-surface-2) !important; }
.text-secondary-emphasis { color: var(--app-text-muted) !important; }

/* AiRequest status badges — one distinct colour per status.
   Soft tinted background + matching dark text (no white), so every
   status reads clearly. Class names follow `badge-status-<Status value>`. */
.badge[class*="badge-status-"] { border: 1px solid transparent; }
.badge.badge-status-pending         { background: #e8eaf0; color: #4b5563; border-color: #d3d7e0; }  /* grey       */
.badge.badge-status-queued          { background: #e0eefb; color: #1d6fa8; border-color: #c2ddf4; }  /* blue       */
.badge.badge-status-processing      { background: #e9e8fa; color: #4a43c0; border-color: #d3d0f3; }  /* indigo     */
.badge.badge-status-waiting_answer  { background: #fbeed3; color: #9c6209; border-color: #f1dca8; }  /* amber      */
.badge.badge-status-finished        { background: #ddf3ea; color: #11815c; border-color: #bce4d3; }  /* green      */
.badge.badge-status-cancelling      { background: #fce4d5; color: #b05518; border-color: #f5cdb2; }  /* orange     */
.badge.badge-status-cancelled       { background: #fbdfe4; color: #b23149; border-color: #f3c2cb; }  /* red        */
.badge.badge-status-ready_to_commit { background: #d8efec; color: #0c7268; border-color: #b6e0db; }  /* teal       */
.badge.badge-status-committed       { background: #ece4fa; color: #6233bf; border-color: #d8c9f3; }  /* violet     */
.badge.badge-status-ready_to_push   { background: #fbe0ec; color: #ab2c61; border-color: #f3c4d8; }  /* magenta    */
.badge.badge-status-pushed          { background: #d6eee3; color: #0b6147; border-color: #b3ddca; }  /* deep green */
.badge.badge-status-closed          { background: #e2e4ec; color: #2b3147; border-color: #cbcedb; }  /* navy       */
.badge.badge-status-code_review     { background: #d1eef5; color: #0a6b80; border-color: #b0e0ec; }  /* cyan       */
.badge.badge-status-reopened        { background: #f7f0c8; color: #8a7400; border-color: #ece0a0; }  /* gold       */

/* Forms ---------------------------------------------------- */
.form-control, .form-select {
    border-color: var(--app-border-strong);
    border-radius: 8px;
    padding: .5rem .75rem;
    background: #fff;
    color: var(--app-text);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--app-brand);
    box-shadow: 0 0 0 4px rgba(91, 91, 214, .12);
}
.form-control-sm, .form-select-sm {
    padding: .35rem .55rem;
    font-size: .85rem;
    border-radius: 7px;
}
.form-label { font-weight: 500; color: var(--app-text); margin-bottom: .35rem; font-size: .9rem; }
.form-text { color: var(--app-text-muted); }
.form-check-input {
    width: 1.05em; height: 1.05em;
    margin-top: .2em;
    border-color: var(--app-border-strong);
}
.form-check-input:checked {
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}
.form-check-input:focus {
    border-color: var(--app-brand);
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .15);
}

/* Tables --------------------------------------------------- */
.table { color: var(--app-text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table thead.table-light th, .table > thead th {
    background: var(--app-surface-2);
    color: var(--app-text-muted);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--app-border);
}
.table tbody tr { border-color: var(--app-border); }
.table-hover tbody tr:hover { background: var(--app-surface-2); }
.table > :not(caption) > * > * { border-bottom-color: var(--app-border); }
/* Lining, fixed-width digits so money columns line up decimal-to-decimal. */
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* Alerts --------------------------------------------------- */
.alert {
    border-radius: var(--app-radius);
    border: 1px solid transparent;
    padding: .8rem 1rem;
}
.alert-info {
    background: var(--app-info-soft);
    color: #14629b;
    border-color: rgba(40, 145, 212, .25);
}
.alert-warning {
    background: var(--app-warning-soft);
    color: #8a5a17;
    border-color: rgba(217, 140, 31, .3);
}
.alert-danger {
    background: var(--app-danger-soft);
    color: #983245;
    border-color: rgba(214, 69, 92, .25);
}
.alert-success {
    background: var(--app-success-soft);
    color: #0f6e54;
    border-color: rgba(26, 166, 122, .25);
}
.alert-secondary {
    background: var(--app-surface);
    color: var(--app-text-muted);
    border-color: var(--app-border);
}

/* The "time not tracked" alert at the top of every page */
.alert.alert-danger.d-flex {
    background: linear-gradient(180deg, #fff3f4, var(--app-danger-soft));
    color: #983245;
    border-color: rgba(214, 69, 92, .35);
    flex-wrap: wrap;
    gap: .65rem;
}
.alert.alert-danger.d-flex .badge.bg-dark {
    background: rgba(40, 16, 24, .85) !important;
}
.alert.alert-danger.d-flex .btn-outline-light {
    color: var(--app-danger);
    border-color: rgba(214, 69, 92, .4);
    background: #fff;
}
.alert.alert-danger.d-flex .btn-outline-light:hover {
    background: var(--app-danger);
    color: #fff;
    border-color: var(--app-danger);
}

/* Section headers (page H4 + meta) ------------------------- */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* Modals --------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--app-border); }
.modal-footer { border-top: 1px solid var(--app-border); }

/* Pagination ----------------------------------------------- */
.page-link {
    color: var(--app-text);
    border-color: var(--app-border);
    border-radius: 8px;
    margin: 0 2px;
}
.page-item.active .page-link {
    background: var(--app-brand);
    border-color: var(--app-brand);
    color: #fff;
}
.page-item.disabled .page-link { color: var(--app-text-subtle); }

/* Chat bubbles (summarize) --------------------------------- */
.chat-bubble {
    max-width: 86%;
    padding: .7rem .9rem;
    border-radius: 14px;
    box-shadow: var(--app-shadow-sm);
    line-height: 1.4;
    font-size: .92rem;
    word-break: break-word;
}
.chat-bubble.user {
    background: var(--app-brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-bubble.assistant {
    background: #fff;
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-bottom-left-radius: 4px;
}
.chat-bubble small { color: inherit; opacity: .75; }

/* Terminal ------------------------------------------------- */
.terminal-wrap pre {
    background: #0b0d18 !important;
    color: #d6d8e1 !important;
    border-radius: 0;
    /* Long unbreakable strings (file paths, URLs) in agent output would
       otherwise blow out the column width and squeeze the conversation
       panel into a sliver. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Flex grid columns default to `min-width: auto`, so an overflowing
   child can push the column past its grid width. Force min-width: 0 on
   the terminal/chat columns so each side respects col-lg-7 / col-lg-5. */
.terminal-wrap .row > [class*="col-"] { min-width: 0; }
.terminal-wrap #chat-messages { overflow-wrap: anywhere; word-break: break-word; }
.terminal-wrap .card-footer {
    background: #14182b;
    color: #a4adc4;
    border-top-color: rgba(255, 255, 255, .08);
}
.terminal-wrap .card-footer code {
    background: rgba(255, 255, 255, .06);
    color: #e6e8f1;
}

/* Pre / code blocks --------------------------------------- */
pre.text-pre-wrap.bg-light {
    background: var(--app-surface-2) !important;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .85rem 1rem !important;
    color: var(--app-text);
    font-size: .82rem;
    line-height: 1.45;
}

/* Calendar overrides --------------------------------------- */
.calendar-week.card { overflow: hidden; }
.calendar-grid {
    /* Allow horizontal scroll on small screens by ensuring a sensible min-width */
    min-width: 720px;
}
.calendar-day-header.today, .calendar-day-column.today {
    background: var(--app-brand-soft) !important;
}
.calendar-event {
    background: var(--app-brand-soft) !important;
    border-left-color: var(--app-brand) !important;
    color: var(--app-text);
    border-radius: 6px;
}
.calendar-event.manual {
    background: #dff6ec !important;
    border-left-color: var(--app-success) !important;
}
.calendar-event.has-overlap {
    background: var(--app-warning-soft) !important;
    border-left-color: var(--app-warning) !important;
    box-shadow: 0 0 0 1px rgba(217, 140, 31, .4), 0 1px 2px rgba(15, 23, 42, .08) !important;
}
.calendar-event:hover { filter: brightness(.97); }

@media (max-width: 768px) {
    .calendar-week { overflow-x: auto; }
    .calendar-grid {
        height: calc(100vh - 220px);
        min-height: 540px;
    }
}

/* Collapsible filter card (uses native <details>) ---------- */
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .bi-chevron-down {
    transition: transform .15s ease;
}
details.card[open] > summary .bi-chevron-down {
    transform: rotate(180deg);
}

/* Helpers / utilities -------------------------------------- */
.shadow-sm { box-shadow: var(--app-shadow-sm) !important; }

/* Inline coin / asset logos in tables (crypto tickers, etc.) */
.coin-icon {
    border-radius: 50%;
    vertical-align: -4px;
    object-fit: contain;
}

/* Cards that link somewhere — lift slightly on hover for affordance. */
.card-hover { cursor: pointer; }
.card-hover:hover {
    box-shadow: var(--app-shadow);
    transform: translateY(-1px);
    border-color: var(--app-border-strong);
}

/* Consistent empty states (backs templates/_partials/empty_state.html.twig). */
.empty-state {
    text-align: center;
    color: var(--app-text-muted);
    padding: 2.25rem 1rem;
}
.empty-state .empty-state-icon {
    display: block;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--app-text-subtle);
    margin-bottom: .6rem;
}
.empty-state p { margin-bottom: 0; }
.empty-state .empty-state-action { margin-top: .9rem; }

.dot {
    display: inline-block;
    width: .55em; height: .55em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    margin-right: .35em;
}

.stack-mobile-vertical {
    /* When elements like header rows need to stack on mobile */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Make button rows in card footers wrap nicely on mobile */
.card-footer.d-flex,
.card-header.d-flex {
    flex-wrap: wrap;
    gap: .4rem;
}

/* Login card */
.auth-card { max-width: 380px; margin: 6vh auto 0; }
.auth-brand {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    color: var(--app-brand-strong); font-weight: 700;
    margin-bottom: 1.25rem; font-size: 1.1rem;
}
.auth-brand .bi {
    background: var(--app-brand-soft);
    color: var(--app-brand);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Inline tag-cloud for related/agent badges on cards */
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }

/* Mobile tweaks -------------------------------------------- */
@media (max-width: 575.98px) {
    h4 { font-size: 1.2rem; }
    .navbar-dark .nav-link { padding: .55rem .6rem; }
    .btn-group { width: 100%; }
    .btn-group > .btn { flex: 1; justify-content: center; }
    /* page-head action row: wrap buttons instead of overflowing the viewport */
    .page-head > :last-child:not(:first-child) { flex-wrap: wrap; }
    main.container-fluid { padding-top: .9rem; }
    .card-body { padding: .9rem; }
    .card-header { padding: .75rem .9rem; }
    /* Remove cramped table cell padding on small screens */
    .table > :not(caption) > * > * { padding: .6rem .55rem; }
}

/* Sticky right column on desktop (used on AI request show) */
@media (min-width: 992px) {
    .sticky-aside { position: sticky; top: 84px; }
}

/* Focus visible — always show a clear ring */
:focus-visible {
    outline: 2px solid var(--app-brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================
   Mobile ergonomics
   Reusable opt-in patterns + global small-screen fixes. Every
   rule here is scoped to small screens or to an opt-in class, so
   the desktop layout is byte-for-byte unchanged.
   ============================================================ */

/* Reusable: fixed-height scroll panes that shrink on small screens.
   Drive the height with --pane-h (desktop) / --pane-h-mobile (mobile)
   so callers can tune each pane without touching this rule. */
.scroll-pane {
    height: var(--pane-h, 60vh);
    overflow: auto;
}
@media (max-width: 991.98px) {
    .scroll-pane { height: var(--pane-h-mobile, 45vh); }
}

/* iOS Safari auto-zooms when a focused field renders < 16px. Force 16px on
   small screens only — padding is untouched so compact `-sm` controls keep
   their height; they just stop triggering the zoom. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    textarea.form-control,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        font-size: 16px;
    }
}

/* Sub-nav (per-service) on small screens: a single horizontal, swipeable
   row instead of Bootstrap's vertical stack (these sub-navs ship no
   toggler). Scoped to .bg-body-tertiary so the top dark navbar — which has
   a working hamburger — is never matched. */
@media (max-width: 991.98px) {
    .navbar-expand-lg.bg-body-tertiary > .container-fluid {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .navbar-expand-lg.bg-body-tertiary > .container-fluid::-webkit-scrollbar { display: none; }
    .navbar-expand-lg.bg-body-tertiary .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg.bg-body-tertiary .nav-link { white-space: nowrap; }
}

/* Reusable: card-ified tables on phones. Opt in with
   `<table class="table table-stack">` + a `data-label="…"` on each <td>.
   Desktop renders an ordinary table; below 768px each row becomes a
   bordered card with label/value lines, so wide data tables stop forcing
   horizontal scroll. */
@media (max-width: 767.98px) {
    table.table-stack { border: 0; }
    /* thead is replaced by per-cell data-labels; tfoot totals (when present)
       are surfaced elsewhere on these pages, so both are hidden in card mode. */
    table.table-stack thead,
    table.table-stack tfoot { display: none; }
    table.table-stack tbody,
    table.table-stack tr,
    table.table-stack td { display: block; width: 100%; }
    table.table-stack tr {
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius);
        background: var(--app-surface);
        box-shadow: var(--app-shadow-sm);
        margin-bottom: .6rem;
        padding: .35rem .25rem;
    }
    /* Label-above-value layout (block, not flex): the td stays a normal block
       so cells with multiple child elements — stacked sub-lines, badge rows —
       flow naturally. Only cells carrying a `data-label` get a label line. */
    table.table-stack td {
        text-align: left;
        border: 0;
        padding: .25rem .85rem;
        overflow-wrap: anywhere;
    }
    table.table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        text-align: left;
        font-weight: 600;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--app-text-muted);
        margin-bottom: .05rem;
    }
    /* Numeric / action cells keep their right alignment; the label still
       reads left thanks to the rule above. */
    table.table-stack td.text-end { text-align: right; }
    /* Empty cells collapse so they don't leave blank label rows. */
    table.table-stack td:empty { display: none; }
    /* Cells that truncate on desktop (text-truncate + max-width) should wrap
       in full inside the card instead of being clipped to a narrow width. */
    table.table-stack td.text-truncate {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    /* The primary cell (a row's title) heads the card: larger, with a divider
       under it. Mark it `stack-primary` (carries no data-label). */
    table.table-stack td.stack-primary {
        font-weight: 600;
        font-size: 1.02rem;
        border-bottom: 1px solid var(--app-border);
        padding-bottom: .45rem;
        margin-bottom: .15rem;
    }
}

/* Break long unbreakable tokens (paths, URLs, SHAs) on phones so they can't
   push the page wider than the viewport. */
@media (max-width: 767.98px) {
    code,
    .breadcrumb-item,
    .text-break-mobile {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Global guard: nothing should make the page wider than the viewport
       (mobile Safari would otherwise render the whole page zoomed out).
       `clip` rather than `hidden` so it doesn't break position: sticky. */
    body { overflow-x: clip; }
}