/* BitCRM – professional business theme on top of Bootstrap 5.3, with light and dark modes.
   The mode is set by data-bs-theme on <html> (see js/theme.js). All app colours below are tokens,
   so each mode only has to redefine the tokens. */

/* ---------- Light (default) ---------- */
:root,
[data-bs-theme="light"] {
    --crm-primary: #1f4e8c;
    --crm-primary-dark: #163a69;
    --crm-sidebar: #12263f;
    --crm-sidebar-hover: rgba(255, 255, 255, .08);
    --crm-sidebar-width: 236px;

    --crm-bg: #f3f5f9;              /* page background behind cards */
    --crm-surface: #ffffff;         /* cards, card headers */
    --crm-border: #e2e7ef;
    --crm-border-soft: #eef1f5;
    --crm-muted: #5f6b7d;           /* labels, secondary text */
    --crm-faint: #b5bfcd;           /* empty-state icons */
    --crm-code: #495468;
    --crm-table-head: #f8fafc;
    --crm-table-hover: #f5f8fc;
    --crm-shadow: rgba(18, 38, 63, .1);
    --crm-focus: #7aa0d4;

    --crm-pill-bg: #eef1f5;   --crm-pill-fg: #4b5668;
    --crm-past-bg: #fde2e4;   --crm-past-fg: #a61b29;
    --crm-t0-bg: #ffe5d0;     --crm-t0-fg: #9a3c00;
    --crm-t1-bg: #fff3cd;     --crm-t1-fg: #7a5a00;
    --crm-t2-bg: #dbeafe;     --crm-t2-fg: #1e4e8c;

    --bs-primary: #1f4e8c;
    --bs-primary-rgb: 31, 78, 140;
    --bs-link-color: #1f4e8c;
    --bs-link-color-rgb: 31, 78, 140;
    --bs-link-hover-color: #163a69;
    --bs-link-hover-color-rgb: 22, 58, 105;
    --bs-body-font-size: .925rem;
}

/* ---------- Dark ---------- */
[data-bs-theme="dark"] {
    --crm-primary: #3b7ad1;
    --crm-primary-dark: #2f66b3;
    --crm-sidebar: #0b1522;
    --crm-sidebar-hover: rgba(255, 255, 255, .07);

    --crm-bg: #0f1722;
    --crm-surface: #172131;
    --crm-border: #2a3647;
    --crm-border-soft: #233043;
    --crm-muted: #9fadbf;
    --crm-faint: #4c5a6e;
    --crm-code: #c3cdd9;
    --crm-table-head: #1c2738;
    --crm-table-hover: #1f2c40;
    --crm-shadow: rgba(0, 0, 0, .45);
    --crm-focus: #5d8fd6;

    --crm-pill-bg: #263245;   --crm-pill-fg: #c8d2de;
    --crm-past-bg: #4a1d24;   --crm-past-fg: #ffb3bc;
    --crm-t0-bg: #4a2a12;     --crm-t0-fg: #ffc08a;
    --crm-t1-bg: #443a12;     --crm-t1-fg: #ffe08a;
    --crm-t2-bg: #18304f;     --crm-t2-fg: #9cc6ff;

    --bs-body-bg: #172131;
    --bs-body-bg-rgb: 23, 33, 49;
    --bs-body-color: #dfe5ee;
    --bs-body-color-rgb: 223, 229, 238;
    --bs-secondary-color: rgba(223, 229, 238, .7);
    --bs-tertiary-bg: #1c2738;
    --bs-border-color: #2a3647;
    --bs-primary: #3b7ad1;
    --bs-primary-rgb: 59, 122, 209;
    --bs-link-color: #8ab8f5;
    --bs-link-color-rgb: 138, 184, 245;
    --bs-link-hover-color: #b5d2fa;
    --bs-link-hover-color-rgb: 181, 210, 250;
}
[data-bs-theme="dark"] .text-bg-light { background-color: #263245 !important; color: #dfe5ee !important; }
[data-bs-theme="dark"] .text-bg-light.border { border-color: #3a475a !important; }
[data-bs-theme="dark"] .alert-secondary { --bs-alert-color: #d4dbe5; }
[data-bs-theme="dark"] .text-bg-dark { background-color: #3a475a !important; color: #f1f4f8 !important; }

/* ---------- Bootstrap overrides ---------- */
.btn-primary {
    --bs-btn-bg: var(--crm-primary); --bs-btn-border-color: var(--crm-primary);
    --bs-btn-hover-bg: var(--crm-primary-dark); --bs-btn-hover-border-color: var(--crm-primary-dark);
    --bs-btn-active-bg: var(--crm-primary-dark); --bs-btn-active-border-color: var(--crm-primary-dark);
    --bs-btn-disabled-bg: var(--crm-primary); --bs-btn-disabled-border-color: var(--crm-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--crm-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--crm-primary); --bs-btn-hover-border-color: var(--crm-primary);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--crm-primary); --bs-btn-active-border-color: var(--crm-primary);
}
.pagination { --bs-pagination-active-bg: var(--crm-primary); --bs-pagination-active-border-color: var(--crm-primary); --bs-pagination-color: var(--bs-link-color); }
.form-control:focus, .form-select:focus { border-color: var(--crm-focus); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

html, body { min-height: 100%; }
body.app-body { background: var(--crm-bg); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.card a.stat-card:hover, .report-card:hover, a.mini-stat:hover, .sidebar-nav a:hover { text-decoration: none; }

/* ---------- Shell ---------- */
.app-topbar { background: var(--crm-sidebar); }
.app-shell { display: flex; min-height: 100vh; }
/* Bootstrap makes .offcanvas-lg "background-color: transparent !important" on desktop, which left the
   white menu text on the light page background. Force the dark sidebar at every width. */
.app-sidebar,
.app-sidebar.offcanvas-lg,
.app-sidebar.offcanvas-lg .offcanvas-body { background-color: var(--crm-sidebar) !important; color: #fff; }
@media (min-width: 992px) {
    .app-sidebar {
        width: var(--crm-sidebar-width); flex: 0 0 var(--crm-sidebar-width);
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    .app-sidebar.offcanvas-lg { --bs-offcanvas-width: 260px; background: var(--crm-sidebar); }
    .app-shell { min-height: calc(100vh - 56px); }
}
.sidebar-brand { align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; color: #fff; font-weight: 600; font-size: 1.15rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand i { color: #7fb2ff; font-size: 1.35rem; }
.sidebar-brand:hover { color: #fff; }
.sidebar-nav { padding: .75rem .5rem; list-style: none; margin: 0; }
.sidebar-nav .nav-link { color: rgba(255,255,255,.9); border-radius: .4rem; padding: .55rem .8rem; display: flex; align-items: center; gap: .7rem; }
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: var(--crm-sidebar-hover); color: #fff; }
.sidebar-nav .nav-link.active { background: var(--crm-primary); color: #fff; }
.sidebar-heading { color: rgba(255,255,255,.62); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 1rem .8rem .35rem; }
.sidebar-user { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }

/* Theme switcher (sidebar, mobile top bar, sign-in page) */
.theme-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: .4rem; overflow: hidden; }
.theme-switch button { background: transparent; border: 0; color: rgba(255,255,255,.8); padding: .25rem .55rem; font-size: .85rem; line-height: 1.2; }
.theme-switch button:hover { background: rgba(255,255,255,.1); color: #fff; }
.theme-switch button.active { background: rgba(255,255,255,.2); color: #fff; }
.theme-switch button + button { border-left: 1px solid rgba(255,255,255,.18); }

.app-main { flex: 1 1 auto; min-width: 0; padding: 1.25rem 1rem 1rem; }
@media (min-width: 768px) { .app-main { padding: 1.5rem 1.75rem 1rem; } }
.app-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--crm-border); }

/* ---------- Page elements ---------- */
.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: .2rem; }
.breadcrumb { font-size: .82rem; margin-bottom: .5rem; }
.card { --bs-card-bg: var(--crm-surface); border-color: var(--crm-border); }
.card-header { background: var(--crm-surface); font-weight: 600; border-bottom-color: var(--crm-border-soft); }
.card-footer { background: var(--crm-table-head); border-top-color: var(--crm-border-soft); }
.card-header-tabs .nav-link { font-weight: 500; }
.card-header-tabs .nav-link.active { background: var(--crm-surface); border-bottom-color: var(--crm-surface); }
.filter-bar .form-label { margin-bottom: .2rem; color: var(--crm-muted); }
.form-card { max-width: 1100px; }
.form-section { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--crm-muted); margin: 1.5rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--crm-border-soft); }
.form-section:first-of-type { margin-top: .25rem; }
.form-label.required::after { content: " *"; color: #e05a4b; }
.notes { white-space: pre-line; }
.cell-clip { max-width: 22rem; }

.data-table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--crm-table-hover); --bs-table-color: var(--bs-body-color); --bs-table-hover-color: var(--bs-body-color); }
.data-table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-muted); background: var(--crm-table-head); border-bottom-width: 1px; white-space: nowrap; }
.data-table td { border-color: var(--crm-border-soft); }
.data-table tfoot td { background: var(--crm-table-head); }
.sort-link { color: inherit; }
.sort-link:hover { color: var(--bs-link-color); text-decoration: none; }
.row-expired td:first-child { box-shadow: inset 3px 0 0 #dc3545; }
.row-expiring td:first-child { box-shadow: inset 3px 0 0 #f0ad4e; }

.detail-list { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; gap: .45rem .75rem; }
.detail-list-wide { grid-template-columns: minmax(9rem, 28%) 1fr; }
.detail-list dt { font-weight: 500; color: var(--crm-muted); }
.detail-list dd { margin: 0; word-break: break-word; }
@media (max-width: 575.98px) { .detail-list, .detail-list-wide { grid-template-columns: 1fr; } .detail-list dd { margin-bottom: .4rem; } }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--crm-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--crm-faint); }
.empty-state p { margin-bottom: .75rem; }

.list-group { --bs-list-group-bg: var(--crm-surface); --bs-list-group-border-color: var(--crm-border-soft); }
.history-list .list-group-item { padding: .6rem 1rem; }
.audit-changes { display: block; max-width: 34rem; white-space: pre-wrap; word-break: break-all; font-size: .72rem; color: var(--crm-code); max-height: 6rem; overflow: auto; }

/* ---------- Stat cards ---------- */
.stat-card { color: inherit; display: block; height: 100%; transition: transform .1s ease, box-shadow .1s ease; }
.stat-card:hover { transform: translateY(-1px); box-shadow: 0 .4rem 1rem var(--crm-shadow) !important; color: inherit; }
.stat-card .card-body { display: flex; gap: .85rem; align-items: center; }
.stat-icon { width: 2.6rem; height: 2.6rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 auto; }
.stat-label { font-size: .78rem; color: var(--crm-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.stat-sub { font-size: .78rem; color: var(--crm-muted); }
.mini-stat { height: 100%; color: inherit; display: block; }
.mini-stat .card-body { padding: .85rem 1rem; }
.mini-stat .stat-value { font-size: 1.35rem; }
.expiry-card.status-expired { border-left: 4px solid #dc3545; }
.expiry-card.status-expiringsoon { border-left: 4px solid #f0ad4e; }
.expiry-card.status-active { border-left: 4px solid #198754; }
.expiry-card.status-cancelled { border-left: 4px solid #6c757d; }
.report-card { color: inherit; transition: box-shadow .1s ease; }
.report-card:hover { box-shadow: 0 .4rem 1rem var(--crm-shadow) !important; color: inherit; }

/* ---------- Expiry highlighting (tiers follow the configured windows, e.g. 30/60/90) ---------- */
.expiry-pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 1rem; background: var(--crm-pill-bg); color: var(--crm-pill-fg); white-space: nowrap; }
.expiry-past { background: var(--crm-past-bg); color: var(--crm-past-fg); }
.expiry-t0 { background: var(--crm-t0-bg); color: var(--crm-t0-fg); }
.expiry-t1 { background: var(--crm-t1-bg); color: var(--crm-t1-fg); }
.expiry-t2, .expiry-t3 { background: var(--crm-t2-bg); color: var(--crm-t2-fg); }
.window-chip { padding: .3rem .7rem; border-radius: 1rem; font-size: .85rem; }
.window-chip:hover { text-decoration: none; filter: brightness(.96); }
.window-btn { border: 1px solid transparent; }
.window-btn:hover { filter: brightness(.96); }
.window-btn.active { border-color: currentColor; font-weight: 600; }

/* ---------- Auth ---------- */
body.auth-body { background: linear-gradient(135deg, #12263f 0%, #1f4e8c 100%); }
[data-bs-theme="dark"] body.auth-body { background: linear-gradient(135deg, #070d16 0%, #13233b 100%); }
.auth-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; border: 0; }
.auth-logo { width: 3.25rem; height: 3.25rem; border-radius: .9rem; background: var(--crm-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: .75rem; }

.flash { box-shadow: 0 .25rem .75rem var(--crm-shadow); }
.error-page { max-width: 560px; margin: 0 auto; }

@media print {
    .app-sidebar, .app-topbar, .filter-bar, .pager, .page-header .btn, .app-footer, .theme-switch { display: none !important; }
    .app-main { padding: 0; }
}