/* ==========================================================
   City of Knowledge Academy - Library Management System
   ========================================================== */

:root {
    --cka-navy: #13294b;
    --cka-navy-dark: #0c1c35;
    --cka-gold: #d4a017;
    --sidebar-width: 260px;
}

/* ---------- Themes ----------
   The theme is set on <html> as data-bs-theme="light|dark" (Bootstrap 5.3
   colour modes) by assets/js/theme.js before the page paints. Bootstrap
   themes its own components; the variables below theme the app shell.
   Selectors use :root[data-bs-theme] so they win over Bootstrap's own
   colour-mode blocks. */
:root,
:root[data-bs-theme="light"] {
    --bs-primary: #1d4e89;
    --bs-primary-rgb: 29, 78, 137;
    --bs-link-color: #1d4e89;
    --bs-link-color-rgb: 29, 78, 137;
    --bs-link-hover-color: #133560;
    --bs-link-hover-color-rgb: 19, 53, 96;

    --app-bg: #f4f6fa;
    --app-surface: #ffffff;
    --app-surface-muted: #f8f9fb;
    --app-border: #e3e7ee;
    --app-heading-muted: #5a6474; /* 5.6:1 on table headers (was 4.45:1) */
    --app-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    --app-accent-soft: #eef3fa;
    /* <code> text: Bootstrap's #d63384 is 4.16:1 on the page background (Phase 26 QA). */
    --bs-code-color: #a61e5c;

    --sidebar-bg: #ffffff;
    --sidebar-border: #e3e7ee;
    --sidebar-text: #1f2a3d;
    --sidebar-heading: #5f6b7d;
    --sidebar-icon: #4a5568;
    --sidebar-hover-bg: #eef3fa;
    --sidebar-hover-text: #0c1c35;
    --sidebar-brand-text: #13294b;
    --sidebar-brand-subtext: #5f6b7d;

    /* Gold active item: identical in both themes (navy on gold, 7.4:1). */
    --sidebar-active-bg: var(--cka-gold);
    --sidebar-active-text: var(--cka-navy-dark);

    /* Outline buttons in the notification UI (Phase 18): >= 4.5:1 in both themes. */
    --app-outline-primary: #1d4e89;
    --app-outline-secondary: #5c636a;
    --app-outline-danger: #b02a37;
}

:root[data-bs-theme="dark"] {
    --bs-code-color: #e685b5; /* Bootstrap's dark value, restated: the light block's bare :root would win */
    --bs-body-bg: #171a1f;
    --bs-body-bg-rgb: 23, 26, 31;
    --bs-body-color: #e6e8eb;
    --bs-body-color-rgb: 230, 232, 235;
    --bs-secondary-bg: #20242a;
    --bs-tertiary-bg: #1c1f24;
    --bs-tertiary-bg-rgb: 28, 31, 36;
    --bs-border-color: #30353d;
    --bs-secondary-color: rgba(230, 232, 235, .7);
    --bs-emphasis-color: #ffffff;
    --bs-primary: #3d7cc9;
    --bs-primary-rgb: 61, 124, 201;
    --bs-link-color: #8ab4f0;
    --bs-link-color-rgb: 138, 180, 240;
    --bs-link-hover-color: #b3cef7;
    --bs-link-hover-color-rgb: 179, 206, 247;

    --app-bg: #0e1013;
    --app-surface: #171a1f;
    --app-surface-muted: #1c1f24;
    --app-border: #2a2f36;
    --app-heading-muted: #a4acb8;
    --app-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --app-accent-soft: #1f2a3a;

    --sidebar-bg: #121418;
    --sidebar-border: #23272e;
    --sidebar-text: #e2e5ea;
    --sidebar-heading: #8d96a3;
    --sidebar-icon: #b4bcc8;
    --sidebar-hover-bg: #1f232a;
    --sidebar-hover-text: #ffffff;
    --sidebar-brand-text: #ffffff;
    --sidebar-brand-subtext: #a4acb8;

    --app-outline-primary: #8ab4f0;
    --app-outline-secondary: #b4bcc8;
    --app-outline-danger: #f1959e;
}

body {
    background: var(--app-bg);
}

.btn-primary {
    --bs-btn-bg: #1d4e89;
    --bs-btn-border-color: #1d4e89;
    --bs-btn-hover-bg: #173f6f;
    --bs-btn-hover-border-color: #173f6f;
    --bs-btn-active-bg: #133560;
}

/* ---------- Brand ---------- */
.brand-mark {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cka-navy), #1d4e89);
    color: var(--cka-gold);
    font-size: 2rem;
}

.brand-mark-sm {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.25rem;
}

/* ---------- Guest pages ---------- */
.guest-body {
    min-height: 100vh;
    background: radial-gradient(circle at top, #1d4e89 0%, var(--cka-navy) 45%, var(--cka-navy-dark) 100%);
}

.guest-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.guest-wrapper > .text-muted {
    color: rgba(255, 255, 255, .6) !important;
}

.brand-title {
    letter-spacing: .06em;
    color: var(--sidebar-brand-text);
}

.guest-card {
    width: 100%;
    max-width: 520px;
    border: 0;
    border-radius: 1rem;
}

.status-list .list-group-item span:last-child {
    max-width: 55%;
}

.debug-trace pre {
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow: auto;
    font-size: .75rem;
}

/* ---------- Application shell ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
}

@media (min-width: 992px) {
    .app-sidebar {
        /* Bootstrap's .offcanvas-lg forces a transparent background at this
           width (with !important); restore the themed sidebar surface. */
        background-color: var(--sidebar-bg) !important;
        width: var(--sidebar-width);
        position: fixed;
        inset: 0 auto 0 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .app-main {
        margin-left: var(--sidebar-width);
    }
}

@media (max-width: 991.98px) {
    .app-sidebar {
        --bs-offcanvas-width: var(--sidebar-width);
        --bs-offcanvas-bg: var(--sidebar-bg);
        --bs-offcanvas-color: var(--sidebar-text);
    }
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand-link {
    color: var(--sidebar-brand-text);
}

.sidebar-brand-link:hover {
    color: var(--sidebar-brand-text);
}

.sidebar-brand-sub {
    color: var(--sidebar-brand-subtext);
}

.sidebar-nav {
    padding: .75rem .5rem 2rem;
}

.sidebar-heading {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sidebar-heading);
    padding: 1rem .75rem .35rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: .5rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .925rem;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-link .bi {
    color: var(--sidebar-icon);
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

.sidebar-link:focus-visible {
    outline: 2px solid var(--cka-gold);
    outline-offset: 1px;
}

.sidebar-link.active,
.sidebar-link.active:hover,
.sidebar-link.active .bi {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 64px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
}

.topbar-search {
    max-width: 480px;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cka-navy);
    color: var(--cka-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* ---------- Cards & tables ---------- */
.card {
    --bs-card-bg: var(--app-surface);
    border: 0;
    border-radius: .75rem;
    box-shadow: var(--app-shadow);
}

:root[data-bs-theme="dark"] .card {
    border: 1px solid var(--app-border);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
}

.table {
    --bs-table-bg: transparent;
}

/* Contain absolutely positioned descendants (e.g. .visually-hidden
   captions/headers) so they scroll with the table instead of widening the
   whole page on mobile. */
.table-responsive {
    position: relative;
    /* Bootstrap keeps .visually-hidden <caption>s in flow (1px, below the
       table), which would add a stray vertical scrollbar. */
    overflow-y: hidden;
}

.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-heading-muted);
    background: var(--app-surface-muted);
}

/* ---------- Shell (Phase 7) ---------- */
.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    background: var(--app-surface);
    padding: .5rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .2);
}

.topbar-title {
    min-width: 0;
    max-width: 55vw;
    font-size: .95rem;
}

.notification-menu {
    width: min(22rem, calc(100vw - 2rem));
}

.notification-badge {
    font-size: .65rem;
}

/* Phase 18: notification menu items and the notification center */
.notification-menu .notification-menu-list {
    max-height: min(22rem, 60vh);
    overflow-y: auto;
}

.notification-menu .notification-menu-item {
    white-space: normal;
}

.notification-unread {
    border-inline-start: 3px solid var(--bs-primary) !important;
    padding-inline-start: .75rem !important;
}

.notification-body {
    flex: 1 1 0;
    min-width: 0;
}

/* Outline buttons (all pages): Bootstrap's compiled outline colours fall below 4.5:1 on the
   page background (light) and on dark surfaces. Use the theme's own colours instead
   (Phase 19; replaces the Phase 18 notification-only fix). Hover/active keep Bootstrap's fill. */
.btn-outline-primary {
    --bs-btn-color: var(--app-outline-primary);
    --bs-btn-border-color: var(--app-outline-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--app-outline-secondary);
    --bs-btn-border-color: var(--app-outline-secondary);
}

.btn-outline-danger {
    --bs-btn-color: var(--app-outline-danger);
    --bs-btn-border-color: var(--app-outline-danger);
}

/* Audit log (Phase 22): long values wrap inside their cell; wide tables scroll in their container. */
.audit-description {
    min-width: 16rem;
}

.audit-value {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .8125rem;
    max-height: 24rem;
    overflow: auto;
    color: var(--bs-body-color);
}

.audit-changed > * {
    background-color: var(--bs-warning-bg-subtle) !important;
}

/* Phones: Bootstrap does not position dropdowns inside .navbar, so the
   menu (anchored to the bell, not the screen edge) would overflow left.
   Pin it under the sticky top bar, full width minus the gutters. */
@media (max-width: 575.98px) {
    /* Center: actions on their own row under the message (aligned with the text, past the icon). */
    .notification-actions {
        flex-basis: 100%;
        padding-inline-start: 2.25rem;
    }

    .app-topbar .dropdown-menu.notification-menu {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 4.25rem);
        left: 1rem;
        right: 1rem;
        width: auto;
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
    }
}

.user-menu {
    min-width: 16rem;
    max-width: calc(100vw - 2rem);
}

.app-content:focus {
    outline: none;
}

.min-w-0 {
    min-width: 0;
}

/* ---------- Dashboard ---------- */
.stat-card .stat-value {
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.quick-actions .list-group-item {
    background: transparent;
    border-color: var(--app-border);
}

.quick-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-accent-soft);
    color: var(--bs-link-color);
    font-size: 1.15rem;
}

/* ---------- Theme selector (user menu) ---------- */
.theme-switch .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.theme-switch .btn[aria-pressed="true"] {
    background: var(--cka-gold);
    border-color: var(--cka-gold);
    color: var(--cka-navy-dark);
    font-weight: 600;
}

/* Dark-mode touch-ups for light-only Bootstrap utilities used in views. */
:root[data-bs-theme="dark"] .text-bg-light {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-secondary-bg) !important;
}

:root[data-bs-theme="dark"] .border {
    --bs-border-color: #3a404a;
}

.attention-count {
    min-width: 2.25rem;
}

.activity-list li:last-child,
.attention-list li:last-child {
    border-bottom: 0 !important;
}

@media (max-width: 575.98px) {
    .app-content {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .dashboard-welcome .brand-mark {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
}

/* Barcode scanner inputs: large and obvious. */
.scan-input {
    font-size: 1.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .05em;
}

.toast-container {
    z-index: 1090;
}

/* ------------------------------------------------------------------
   Barcodes (Phase 14). Bars are always black on white (both themes) so
   they scan from screen and paper; the SVG scales in module units.
   ------------------------------------------------------------------ */
.barcode {
    display: inline-block;
    margin: 0;
    padding: .5rem .75rem .25rem;
    background: #fff;
    color: #000;
    border-radius: .25rem;
    max-width: 100%;
}

.barcode-svg {
    display: block;
    width: 100%;
    min-width: 12rem;
    height: 3.25rem;
}

.barcode-lg .barcode-svg {
    height: 4.5rem;
}

.barcode-text {
    margin-top: .2rem;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    letter-spacing: .12em;
    color: #000;
}

/* Label sheet: default 63.5 x 38.1 mm labels (3 x 7 on A4). Change the
   variables to match other label stock. */
.label-sheet {
    --label-width: 63.5mm;
    --label-height: 38.1mm;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--label-width)), var(--label-width)));
    gap: 4mm;
}

.barcode-label {
    width: min(100%, var(--label-width));
    min-height: var(--label-height);
    padding: 2.5mm 3mm;
    background: #fff;
    color: #000;
    border: 1px dashed #adb5bd;
    border-radius: 2mm;
    display: flex;
    flex-direction: column;
    gap: 1mm;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
}

.barcode-label .barcode {
    padding: 0;
    width: 100%;
}

.barcode-label .barcode-svg {
    min-width: 0;
    height: 12mm;
}

.barcode-label .barcode-text {
    font-size: 8pt;
}

.barcode-label-head,
.barcode-label-foot {
    display: flex;
    justify-content: space-between;
    gap: 2mm;
    font-size: 7pt;
}

.barcode-label-brand {
    font-weight: 700;
    letter-spacing: .04em;
}

.barcode-label-title {
    font-size: 8pt;
    font-weight: 600;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
}

/* Circulation receipt (Phase 15): narrow slip, prints on A4 or receipt rolls. */
.receipt {
    max-width: 24rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
}

@media print {
    .receipt {
        border: 0;
        max-width: 80mm;
        background: #fff;
        color: #000;
    }

    @page {
        margin: 8mm;
    }

    /* Paper is white whatever the screen theme (the dark color-scheme would
       otherwise tint the page margins). */
    :root,
    :root[data-bs-theme="dark"] {
        color-scheme: light !important;
    }

    .app-sidebar,
    .app-topbar,
    .app-content nav[aria-label="breadcrumb"],
    .app-content > .d-flex:first-of-type,
    .skip-link,
    .toast-container,
    .no-print,
    .btn {
        display: none !important;
    }

    html,
    body,
    .app-shell,
    .app-main,
    .app-content {
        background: #fff !important;
        color: #000 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        display: block !important;
    }

    .card {
        border: 0 !important;
        box-shadow: none !important;
    }

    .barcode-label {
        border-color: transparent;
    }
}

/* ------------------------------------------------------------------
   Reports (Phase 25 groundwork)
   ------------------------------------------------------------------ */
.report-card {
    transition: border-color .15s ease-in-out;
}

.report-card:hover {
    border-color: var(--bs-primary-border-subtle);
}

.report-card:focus-visible {
    outline: 3px solid var(--bs-focus-ring-color, rgba(13, 110, 253, .5));
    outline-offset: 2px;
}

.report-summary dd {
    overflow-wrap: anywhere;
}

@media print {
    /* Readable black-on-white report pages whatever the screen theme. */
    .report-print-header,
    .report-print-header *,
    .report-summary,
    .report-summary *,
    .report-breakdown,
    .report-breakdown *,
    .report-table,
    .report-table *,
    .card-header,
    .card-header * {
        color: #000 !important;
        background: transparent !important;
        border-color: #999 !important;
        --bs-table-bg: transparent;
        --bs-table-striped-bg: transparent;
        --bs-table-color: #000;
    }

    .table-responsive {
        overflow: visible !important;
    }

    .report-table {
        font-size: 8.5pt;
    }

    .report-table thead {
        display: table-header-group; /* repeat column headings on every page */
    }

    .report-table tr,
    .report-breakdown,
    .report-summary > div {
        break-inside: avoid;
    }
}

/* Report charts (Phase 25): server-rendered SVG, coloured here (no inline styles). */
:root,
:root[data-bs-theme="light"] {
    --app-chart-1: #1d4ed8;
    --app-chart-2: #b7791f;
    --app-chart-3: #0f766e;
    --app-chart-grid: #d8dee8;
}

:root[data-bs-theme="dark"] {
    --app-chart-1: #6ea8fe;
    --app-chart-2: #e0b04f;
    --app-chart-3: #4fd1c5;
    --app-chart-grid: #3a4250;
}

.report-chart {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    overflow: visible;
}

.report-chart .chart-series-1 { fill: var(--app-chart-1); }
.report-chart .chart-series-2 { fill: var(--app-chart-2); }
.report-chart .chart-series-3 { fill: var(--app-chart-3); }
.report-chart .chart-grid { stroke: var(--app-chart-grid); stroke-width: 1; }
.report-chart .chart-label,
.report-chart .chart-value { fill: var(--bs-body-color); font-size: 12px; }
.report-chart .chart-axis { fill: var(--bs-secondary-color); font-size: 11px; }

@media print {
    @page {
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-size: 8pt;
        }
    }

    .report-chart .chart-series-1 { fill: #333; }
    .report-chart .chart-series-2 { fill: #888; }
    .report-chart .chart-series-3 { fill: #bbb; }
    .report-chart .chart-label,
    .report-chart .chart-value,
    .report-chart .chart-axis { fill: #000; }
    .report-breakdown,
    .report-chart { break-inside: avoid; }
}

/* Printed reports (Phase 25): wide tables fit the paper. Report pages print on
   named landscape pages; receipts and labels keep their own page setup. */
@media print {
    @page report {
        size: A4 landscape;
        margin: 10mm;
    }

    body:has(.report-print-header) .app-content {
        page: report;
    }

    .report-table {
        width: 100% !important;
        table-layout: auto;
        font-size: 7.5pt;
    }

    .report-table th,
    .report-table td,
    .report-table .text-nowrap {
        white-space: normal !important;
        overflow-wrap: anywhere;
        padding: 2px 3px !important;
    }
}

/* Member photographs (Phase 29): stored as 3:4 portraits. */
.member-photo {
    display: block;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    border: 2px solid var(--cka-gold);
    background: var(--bs-tertiary-bg);
}

.member-photo-sm {
    width: 72px;
    flex: 0 0 auto;
}

@media print {
    /* No page padding in print, so Bootstrap's negative row gutters would stick out. */
    body:has(.report-print-header) .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }
}