/* ============================================================
   Agency admin theme — built on Bootstrap 5.3.
   "Pure white minimal" design language (relate.so-inspired):
   - Inter UI type
   - White canvas, hairline borders, very soft shadows
   - Low-radius rectangles (no pills), compact sidebar
   - Neutral palette with a restrained blue interactive accent
   - Semantic status colours kept independent of the accent
   ============================================================ */

/* ---- Design tokens -------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-bg: #ffffff;             /* canvas-white */
    --bs-body-color: #18181b;          /* near-black ink */
    --bs-secondary-color: #6b7280;     /* muted text */
    --bs-border-color: #ececec;        /* hairline-light */
    --bs-border-radius: 0.625rem;      /* rounded.lg 10px */
    --bs-border-radius-sm: 0.4375rem;  /* rounded.md 7px */
    --bs-link-color-rgb: 37, 99, 235;  /* accent blue links */

    --app-surface: #ffffff;            /* cards / inputs */
    --app-sidebar-bg: #fafaf9;         /* light-grey rail, set off from white content */
    --app-sidebar-hover: #f0f0ee;      /* nav hover, darker than the rail */
    --app-sidebar-active: #e7e7e4;     /* active item, a touch stronger than hover */
    --app-topbar-bg: rgba(255, 255, 255, 0.82);
    --app-accent: #2563eb;             /* interactive blue */
    --app-accent-ink: #1d4ed8;         /* darker blue */
    --app-accent-soft: #eff4ff;        /* blue tint surface */
    --app-pill-bg: #18181b;            /* primary button: near-black */
    --app-pill-color: #ffffff;
    --app-pill-hover: #343438;
    --app-active-bg: #f4f4f5;          /* neutral hover/active */
    --app-muted: #6b7280;

    /* very soft, relate-like elevation */
    --app-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                  0 1px 3px rgba(16, 24, 40, 0.06);

    /* semantic status colours (independent of the accent) */
    --app-ok-bg: #e7f6ed;
    --app-ok-ink: #137a43;
    --app-warn-bg: #fef3e2;
    --app-warn-ink: #b45309;
    --app-danger-bg: #fdecec;
    --app-danger-ink: #b42318;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0b0b0c;             /* canvas-night */
    --bs-body-color: #f4f4f5;
    --bs-secondary-color: #a1a1aa;
    --bs-border-color: #232327;        /* hairline-dark */
    --bs-emphasis-color: #ffffff;
    --bs-link-color-rgb: 96, 165, 250;

    --app-surface: #141416;            /* elevated night surface */
    --app-sidebar-bg: #141417;         /* set off from the near-black content */
    --app-sidebar-hover: #232328;      /* nav hover, lighter than the rail */
    --app-sidebar-active: #2c2c32;     /* active item, a touch stronger than hover */
    --app-topbar-bg: rgba(16, 16, 18, 0.82);
    --app-accent: #60a5fa;
    --app-accent-ink: #93c5fd;
    --app-accent-soft: #18233a;
    --app-pill-bg: #ffffff;            /* inverse primary on dark */
    --app-pill-color: #18181b;
    --app-pill-hover: #d4d4d8;
    --app-active-bg: #1c1c20;
    --app-muted: #a1a1aa;

    --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --app-ok-bg: #10261a;
    --app-ok-ink: #5fd394;
    --app-warn-bg: #2a1f10;
    --app-warn-ink: #f0b66a;
    --app-danger-bg: #2a1414;
    --app-danger-ink: #f7a8a0;
}

/* ---- Base ---------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
    /* Inter character variants: single-storey a, open digits, tab figures off */
    font-feature-settings: "cv05", "cv08", "cv11";
}

::selection { background: rgba(37, 99, 235, 0.16); }
[data-bs-theme="dark"] ::selection { background: rgba(96, 165, 250, 0.26); }

h1, h2, h3, .display-title {
    font-weight: 600;                  /* crisp, modern headings */
    letter-spacing: -0.018em;
}

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

.text-muted-2 { color: var(--app-muted) !important; }
.eyebrow {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--app-muted);
    font-weight: 600;
}

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

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

.app-sidebar {
    /* Bootstrap forces `background: transparent !important` on .offcanvas-lg at
       desktop width, so we must override with !important and also feed its own
       offcanvas variable for the mobile drawer. */
    --bs-offcanvas-bg: var(--app-sidebar-bg);
    --bs-offcanvas-width: 256px;
    background: var(--app-sidebar-bg) !important;
    border-right: 1px solid var(--bs-border-color);
}

@media (min-width: 992px) {
    .app-sidebar {
        width: 256px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.1rem 1.15rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--bs-body-color);
    text-decoration: none;
}
.sidebar-brand .brand-mark {
    width: 34px; height: 34px;
    border-radius: 8px;                /* rounded square, not a circle */
    background: var(--bs-body-color);
    color: var(--bs-body-bg);
    display: grid; place-items: center;
    font-weight: 700; font-size: 1rem;
}
.sidebar-brand .brand-logo { height: 38px; width: auto; border-radius: 7px; }

.company-asset-preview {
    max-height: 64px;
    max-width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    padding: 4px;
    background: #ffffff;
}

/* Read-only detail rows */
.detail-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.detail-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-muted);
    margin-bottom: 0.15rem;
    font-weight: 600;
}
.detail-value { font-weight: 500; word-break: break-word; }

.sidebar-section {
    padding: 1rem 1.2rem 0.3rem;
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--app-muted);
    font-weight: 600;
}

.sidebar-nav { padding: 0.2rem 0.6rem 0.9rem; }
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.5rem;            /* smaller, tighter highlight ("cover") */
    margin-bottom: 0.04rem;
    border-radius: 6px;                /* low-radius rows, not pills */
    color: var(--app-muted);
    font-weight: 500;
    font-size: 0.9rem;
    transition: background .12s ease, color .12s ease;
}
.sidebar-nav .nav-link i { font-size: 1rem; }
.sidebar-nav .nav-link:hover {
    color: var(--bs-body-color);
    background: var(--app-sidebar-hover);
}
.sidebar-nav .nav-link.active {
    color: var(--bs-body-color);
    background: var(--app-sidebar-active);
    font-weight: 600;
}
.sidebar-nav .nav-link.active i { color: var(--bs-body-color); }

/* Grouped menus: only the top-level group toggle and the leaf link carry the
   active "cover". Intermediate sub-group toggles stay open (rotated caret) but
   are left uncovered — e.g. on "List Amendments" only Contracts (top) and the
   leaf are highlighted, not the "Amendments" sub-group in between. */
.sidebar-subnav .nav-toggle.active {
    color: var(--app-muted);
    background: transparent;
    font-weight: 500;
}
.sidebar-subnav .nav-toggle.active i { color: inherit; }

/* ---- Collapsible sidebar sub-menus ------------------------------------- */
.sidebar-nav .nav-toggle { cursor: pointer; }
.sidebar-nav .nav-toggle .nav-caret {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}
.sidebar-nav .nav-toggle:not(.collapsed) .nav-caret { transform: rotate(90deg); }
.sidebar-subnav { list-style: none; padding-left: 0; margin: 0; }
.sidebar-subnav .nav-link { padding-left: 2.3rem; font-weight: 500; font-size: 0.875rem; }
.sidebar-subnav .sidebar-subnav .nav-link { padding-left: 3rem; font-size: 0.85rem; }

/* ---- Topbar ------------------------------------------------------------- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 60px;
    padding: 0 1.25rem;
    background: var(--app-topbar-bg);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--bs-border-color);
}
.topbar-title { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--bs-border-color);
    background: var(--app-surface);
    color: var(--bs-body-color);
    border-radius: 8px;                /* squared icon button */
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.icon-btn:hover { background: var(--app-active-bg); }
.theme-toggle .bi-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun { display: block; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }

.app-main { padding: 1.5rem; flex: 1; }
@media (min-width: 992px) { .app-main { padding: 2rem 2.25rem; } }

/* ---- Buttons (low-radius, no pills) ------------------------------------- */
.btn {
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.825rem; border-radius: 7px; }
.btn-primary {
    background: var(--app-pill-bg);
    border-color: var(--app-pill-bg);
    color: var(--app-pill-color);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--app-pill-hover);
    border-color: var(--app-pill-hover);
    color: var(--app-pill-color);
}
.btn-outline-secondary {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    background: var(--app-surface);
}
.btn-outline-secondary:hover {
    background: var(--app-active-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
.btn-aloe {
    background: var(--app-accent);
    border: none;
    color: #ffffff;
}
.btn-aloe:hover { filter: brightness(0.94); color: #ffffff; }

/* ---- Cards -------------------------------------------------------------- */
.card {
    background: var(--app-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--app-shadow);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.85rem 1.1rem;
}
.card .card-body { padding: 1.1rem; }

.stat-card .stat-value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.stat-card .stat-icon {
    width: 42px; height: 42px; border-radius: 10px;   /* rounded square */
    background: var(--app-accent-soft); color: var(--app-accent);
    display: grid; place-items: center; font-size: 1.15rem;
}

/* ---- Tables ------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    margin-bottom: 0;
}
.table > thead th {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--app-muted);
    font-weight: 600;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.table > tbody > tr > td {
    border-color: var(--bs-border-color);
    vertical-align: middle;
    padding: 0.7rem 0.75rem;
    font-size: 0.9rem;
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--app-active-bg); }

/* ---- Forms (works with Django's {{ form.as_p }}) ----------------------- */
.form-control, .form-select,
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
form select, form textarea {
    background: var(--app-surface);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    width: 100%;
}
.form-control:focus, .form-select:focus,
form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] form input:focus,
[data-bs-theme="dark"] form select:focus,
[data-bs-theme="dark"] form textarea:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}
form p { margin-bottom: 1rem; }
form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.3rem; }
.helptext, form .helptext {
    display: block; margin-top: 0.3rem;
    font-size: 0.8rem; color: var(--app-muted);
}
.errorlist {
    list-style: none; padding: 0; margin: 0.3rem 0 0;
    color: var(--app-danger-ink); font-size: 0.85rem;
}

/* ---- Badges ------------------------------------------------------------- */
.badge { border-radius: 6px; font-weight: 600; padding: 0.34em 0.6em; font-size: 0.72rem; }
.badge-active { background: var(--app-ok-bg); color: var(--app-ok-ink); }
.badge-suspended { background: var(--app-danger-bg); color: var(--app-danger-ink); }

/* Soften Bootstrap's contextual badges to match the muted palette */
.badge.text-bg-success { background: var(--app-ok-bg) !important; color: var(--app-ok-ink) !important; }
.badge.text-bg-warning { background: var(--app-warn-bg) !important; color: var(--app-warn-ink) !important; }
.badge.text-bg-danger  { background: var(--app-danger-bg) !important; color: var(--app-danger-ink) !important; }
.badge.text-bg-secondary { background: var(--app-active-bg) !important; color: var(--app-muted) !important; }
.badge.text-bg-info { background: var(--app-accent-soft) !important; color: var(--app-accent-ink) !important; }
.badge.text-bg-primary { background: var(--app-accent-soft) !important; color: var(--app-accent-ink) !important; }
.badge.text-bg-light.border { border-color: var(--bs-border-color) !important; color: var(--app-muted) !important; }

/* ---- Alerts (Django messages) ------------------------------------------ */
.alert { border-radius: var(--bs-border-radius-sm); border: 1px solid var(--bs-border-color); font-size: 0.9rem; }

/* ---- Auth (login / password reset) ------------------------------------- */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--bs-body-bg);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--app-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--app-shadow);
    padding: 2rem;
}
.auth-brand {
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 600; font-size: 1.2rem; margin-bottom: 1.5rem;
}
.auth-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 5; }

/* ---- Login cover (split screen) ---------------------------------------- */
.cover { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 991.98px) {
    .cover { grid-template-columns: 1fr; }
    .cover-aside { display: none; }
}

.cover-aside {
    position: relative;
    overflow: hidden;
    background: #0b0b0c;               /* near-black panel */
    color: #ffffff;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* soft accent glow on the dark panel */
.cover-aside::after {
    content: "";
    position: absolute;
    width: 460px; height: 460px;
    right: -140px; bottom: -160px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 70%);
    pointer-events: none;
}
.cover-aside .cover-brand {
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em;
}
.cover-aside .cover-brand .brand-mark {
    width: 28px; height: 28px; border-radius: 7px;
    background: #ffffff; color: #0b0b0c; display: grid; place-items: center;
    font-weight: 700; font-size: 0.9rem;
}
.cover-aside .cover-headline {
    font-weight: 600;
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 18ch;
}
.cover-aside .cover-eyebrow {
    text-transform: uppercase; letter-spacing: 0.07em;
    font-size: 0.7rem; color: #93a3c2; margin-bottom: 1rem; font-weight: 600;
}
.cover-aside .cover-foot { color: #8b93a3; font-size: 0.85rem; }

.cover-form {
    position: relative;
    display: grid; place-items: center;
    padding: 2rem;
    background: var(--bs-body-bg);
}
.cover-form-inner { width: 100%; max-width: 400px; }
.cover-form-inner .cover-title { font-weight: 600; font-size: 1.8rem; margin-bottom: 0.25rem; letter-spacing: -0.02em; }

/* ============================================================
   Refinements layer — premium polish on top of the base theme
   ============================================================ */

/* Tabular figures keep numbers aligned in tables, stats and money. */
.table, .stat-value, .detail-value, .topbar-title { font-variant-numeric: tabular-nums; }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* Accessible keyboard focus rings (don't show on mouse click). */
:focus-visible { outline: none; }
.btn:focus-visible,
.icon-btn:focus-visible,
.sidebar-nav .nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Buttons: subtle press feedback + crisp disabled state. */
.btn { will-change: transform; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn.disabled { opacity: 0.5; }

/* Cards lead with the hairline border; the shadow is just a whisper. */
.card { transition: border-color .12s ease, box-shadow .12s ease; }

/* Content links (table IDs, etc.) take the accent; buttons keep their own
   colours via Bootstrap's --bs-btn-* API — never reset .btn colour globally. */
.app-main a:not(.btn):not(.nav-link):not(.dropdown-item) { transition: color .12s ease; }
.app-main a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--app-accent-ink); }

/* Themed outline buttons (secondary is handled in the buttons section above). */
.btn-outline-danger {
    --bs-btn-color: var(--app-danger-ink);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-danger-ink);
    --bs-btn-hover-border-color: var(--app-danger-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-danger-ink);
    --bs-btn-active-border-color: var(--app-danger-ink);
}
.btn-outline-info {
    --bs-btn-color: var(--app-accent-ink);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-accent);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-accent);
    --bs-btn-active-border-color: var(--app-accent);
}

/* Inputs: clearer placeholder + hover affordance. */
::placeholder { color: var(--app-muted); opacity: 1; }
.form-control:hover, form input:hover, form select:hover, form textarea:hover { border-color: #d9d9d9; }
[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] form input:hover,
[data-bs-theme="dark"] form select:hover,
[data-bs-theme="dark"] form textarea:hover { border-color: #34343a; }

/* Checkboxes / radios adopt the accent. */
.form-check-input { border-color: var(--bs-border-color); }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.form-check-input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); }

/* Dropdown menus (account menu, etc.) on theme. */
.dropdown-menu {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.06);
    background: var(--app-surface);
    padding: 0.3rem;
}
.dropdown-item { border-radius: 6px; padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--app-active-bg); }
.dropdown-header { padding: 0.45rem 0.6rem; }
.dropdown-divider { border-color: var(--bs-border-color); }

/* Django message alerts — softened to the muted palette. */
.alert-success { background: var(--app-ok-bg); color: var(--app-ok-ink); border-color: transparent; }
.alert-danger, .alert-error { background: var(--app-danger-bg); color: var(--app-danger-ink); border-color: transparent; }
.alert-warning { background: var(--app-warn-bg); color: var(--app-warn-ink); border-color: transparent; }
.alert-info { background: var(--app-accent-soft); color: var(--app-accent-ink); border-color: transparent; }
.alert .btn-close { filter: none; }

/* Thin, unobtrusive scrollbars (sidebar + main). */
.app-sidebar, .app-main, .table-responsive { scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
.app-sidebar::-webkit-scrollbar, .app-main::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
.app-sidebar::-webkit-scrollbar-thumb,
.app-main::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 9999px; }
.app-sidebar::-webkit-scrollbar-thumb:hover,
.app-main::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--app-muted); }
::-webkit-scrollbar-track { background: transparent; }

/* Empty-state cells read as quiet, centred hints. */
.table td.text-center.text-muted-2 { padding-top: 2.25rem; padding-bottom: 2.25rem; }