/* ==========================================================================
   alk — СРО-26 admin panel, Zenith theme (2026-09-28)
   Base theme lives in zenith.css (tokens, Bootstrap/AdminLTE overrides).
   This file only keeps alk's own component classes, re-expressed in Zenith
   tokens, so existing views keep working unchanged. Loaded AFTER zenith.css.
   Previous green/teal version: backups/pre-zenith-20260928-042136/css/site.css
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* Data palettes kept as named hooks (views and charts reference them),
       now mapped onto Zenith's chart/status colors. */
    --viz-cat-1: var(--zn-chart-1);   /* 44-ФЗ      — orange   */
    --viz-cat-2: var(--zn-chart-2);   /* 223-ФЗ     — teal     */
    --viz-cat-3: var(--zn-chart-3);   /* 615-ПП     — navy     */
    --viz-cat-4: var(--zn-chart-4);   /* коммерческие — amber  */

    --viz-good: var(--zn-success);
    --viz-warning: var(--zn-warning);
    --viz-serious: #f97316;
    --viz-critical: var(--zn-danger);
    --viz-closed: #c2255c;           /* terminated ≠ risk alert */

    --viz-grid: var(--zn-border);
    --viz-axis-muted: var(--zn-muted-fg);
}

[data-bs-theme="dark"] {
    --viz-serious: #fb923c;
    --viz-closed: #f06595;
}

/* ---------- Icons (Lucide, 2026-09-29 — replaces Bootstrap Icons) ----------
   Every icon renders as <i data-lucide="name" class="icon ..."> and lucide.js
   swaps it for an inline <svg class="lucide lucide-name icon ...">, carrying
   over any other classes untouched. `.icon` gives every icon icon-font-like
   sizing (1em × 1em, scales with the element's own font-size) and baseline
   alignment, replacing the old element-type/`.bi` selectors that only worked
   for <i> tags. */
.icon {
    width: 1em;
    height: 1em;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: -0.125em;
}
.app-header .nav-link .icon { font-size: 1.0625rem; }
.btn .icon { font-size: 1em; }
.zn-search > .icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    translate: 0 -50%;
    color: var(--zn-muted-fg);
    font-size: .9375rem;
    pointer-events: none;
}

/* ---------- Shell bits specific to alk ---------- */

/* avatar-initial circle (sidebar user, topbar) */
.badge-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--zn-primary);
    color: var(--zn-primary-fg);
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Global `a:hover { text-decoration: underline }` (zenith.css) leaks into
   the sidebar nav links on hover/focus — they're plain <a> tags but should
   read as nav items, not inline text links. */
.sidebar-menu .nav-link:hover,
.sidebar-menu .nav-link:focus {
    text-decoration: none;
}

/* sidebar footnote about data sources */
.sidebar-note {
    margin: .75rem .75rem 0;
    padding-top: .75rem;
    border-top: 1px solid var(--zn-border);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--zn-muted-fg);
}

/* theme switcher dropdown: checkmark on the active option */
[data-bs-theme-value].active .theme-check { display: inline-block !important; }

/* Document/scan file-type icons (see app\helpers\FileIcon) — colored like
   familiar app icons (PDF red, Word blue, Excel green, ...) rather than the
   Two-Palette data tokens above: this is format recognition, not data-viz. */
.file-icon {
    font-size: 1.25rem;
    vertical-align: -0.2em;
}
.file-icon-pdf { color: #e5484d; }
.file-icon-word { color: #2b7de9; }
.file-icon-excel { color: #1a9c6d; }
.file-icon-ppt { color: #e8590c; }
.file-icon-image { color: #9c6ade; }
.file-icon-zip { color: #a8763e; }
.file-icon-text,
.file-icon-generic { color: var(--zn-muted-fg); }
.file-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.file-toggle .icon { transition: transform .15s ease; }
.file-toggle.collapsed .icon { transform: none; }
.file-toggle:not(.collapsed) .icon { transform: rotate(180deg); }

/* Fogs out the last visible file when a "Ещё N" toggle follows, hinting
   there's more below the fold before the reveal. */
.files-visible.files-fade {
    position: relative;
    padding-bottom: .15rem;
}
.files-visible.files-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5em;
    background: linear-gradient(to bottom, transparent, var(--zn-card));
    pointer-events: none;
}

.file-toggle {
    display: inline-flex;
    align-self: flex-start; /* parent is flex-column/stretch by default — without this it fills the row width */
    align-items: center;
    line-height: 1;
    gap: .3rem;
    margin-top: .125rem;
    padding: .15rem .4rem;
    border: none;
    border-radius: 4px;
    background: color-mix(in srgb, var(--zn-fg, currentColor) 6%, transparent);
    color: var(--zn-primary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    position: relative;
    z-index: 1; /* sit above the fade overlay */
}
.file-toggle:hover {
    background: color-mix(in srgb, var(--zn-fg, currentColor) 12%, transparent);
}

[data-bs-theme="dark"] .file-icon-pdf { color: #ff6369; }
[data-bs-theme="dark"] .file-icon-word { color: #5b9df5; }
[data-bs-theme="dark"] .file-icon-excel { color: #33c98d; }
[data-bs-theme="dark"] .file-icon-ppt { color: #ff8a4c; }
[data-bs-theme="dark"] .file-icon-image { color: #b794f6; }
[data-bs-theme="dark"] .file-icon-zip { color: #c99a5f; }

/* ---------- Stat tiles (label over value, no icons, no invented deltas) ---------- */

.stat-tile {
    height: 100%;
    padding: 1.25rem;
    background: var(--zn-card);
    border: 1px solid var(--zn-border);
    border-radius: var(--zn-radius-card);
    box-shadow: var(--zn-shadow);
}

.stat-tile-label {
    font-size: .6875rem;
    font-weight: 500;
    color: var(--zn-muted-fg);
    margin-bottom: .375rem;
}

.stat-tile-value {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- Status & categorical ---------- */

.status-good { color: var(--viz-good); }
.status-warning { color: var(--viz-warning); }
.status-serious { color: var(--viz-serious); }
.status-critical { color: var(--viz-critical); }

/* .badge-status — genuine risk alerts (icon + tint + text) */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 1.25rem;
    padding: 0 .5rem;
    border-radius: .375rem;
    border: 1px solid transparent;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.badge-status .icon { font-size: .625rem; }

.badge-status-good {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}
.badge-status-critical {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}
.badge-status-neutral {
    color: var(--zn-fg);
    background: var(--zn-muted);
    border-color: var(--zn-border);
}

/* .status-dot — routine workflow state (dot + text, no pill) */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    font-weight: 500;
}

.status-dot::before {
    content: '';
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-dot-neutral { color: var(--zn-muted-fg); }
.status-dot-good { color: var(--viz-good); }
.status-dot-closed { color: var(--viz-closed); }

/* contract-type chips (fixed order, soft tint) */
.badge-cat-1,
.badge-cat-2,
.badge-cat-3,
.badge-cat-4 {
    --cat: var(--viz-cat-1);
    color: color-mix(in srgb, var(--cat) 80%, var(--zn-fg) 20%);
    background: color-mix(in srgb, var(--cat) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat) 14%, transparent);
    border-radius: .375rem;
    font-weight: 600;
    font-size: .625rem;
    white-space: nowrap;
}

/* Never truncate a cell holding one of these chips — a clipped "Коммерческий…"
   is worse than a slightly wider column; the column-width CSS stays fixed,
   the cell itself is just allowed to overflow instead of ellipsizing. */
.table-fixed td:has(.badge-cat-1),
.table-fixed td:has(.badge-cat-2),
.table-fixed td:has(.badge-cat-3),
.table-fixed td:has(.badge-cat-4) {
    overflow: visible;
    text-overflow: clip;
}
.badge-cat-2 { --cat: var(--viz-cat-2); }
.badge-cat-3 { --cat: var(--viz-cat-3); }
.badge-cat-4 { --cat: var(--viz-cat-4); color: color-mix(in srgb, var(--cat) 55%, var(--zn-fg) 45%); }

/* real problems only: overdue, expired, missing */
.alert-border {
    border-left: 3px solid var(--viz-critical) !important;
    background: color-mix(in srgb, var(--viz-critical) 3%, var(--zn-card)) !important;
}
.alert-border .text-danger,
.alert-border .link-danger {
    color: color-mix(in srgb, var(--viz-critical) 60%, var(--zn-fg) 40%) !important;
}
.alert-border .link-danger:hover { color: var(--viz-critical) !important; }

.tr-alert { background: color-mix(in srgb, var(--viz-critical) 5%, transparent); }
.tr-alert td:first-child { box-shadow: inset 3px 0 0 var(--viz-critical); }

/* ---------- Member registry search box (fully rounded, icon+clear as
   overlays inside the field instead of input-group segments — an
   input-group can't have matching corners on both ends once one of its
   segments is display:none, which is what forced the square right edge). */
.search-box {
    position: relative;
}
.search-box-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zn-muted-fg);
    font-size: .75rem;
    pointer-events: none;
}
.search-box-input {
    height: 2rem;
    padding: 0 1.75rem 0 2.6rem;
    font-size: .8125rem;
    border-radius: var(--zn-radius-lg);
}
/* Faint vertical tick just right of the search icon — barely visible. */
.search-box::after {
    content: "";
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 55%;
    background: color-mix(in srgb, var(--zn-border) 50%, transparent);
    pointer-events: none;
}
.search-box-clear {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--zn-muted-fg);
    line-height: 1;
    padding: 0 .25rem;
    font-size: .9rem;
}
.search-box-clear:hover {
    color: var(--zn-fg);
}

/* ---------- Tables ---------- */

/* Smaller than Zenith's base .875rem — these tables are dense data grids,
   not prose; also nudge cell padding down so rows don't look sparse at the
   new size. */
.table {
    font-size: .625rem;
}
.table > :not(caption) > * > * {
    padding: .5rem .75rem;
}

.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
}
.table td.text-end { font-weight: 600; }

.table-fixed { table-layout: fixed; }

.table-fixed td,
.table-fixed th {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: break-word;
}

.table td a:not(.btn) { color: #5085b0; font-weight: 500; }
.table td a:not(.btn):hover { text-decoration: underline; }

/* sortable headers */
.th-sort {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
    text-decoration: none;
}
.th-sort:hover { color: var(--zn-fg); text-decoration: none; }
.th-sort .icon { font-size: .75rem; color: var(--zn-muted-fg); }
.th-sort .icon:not(.th-sort-inactive) { color: var(--zn-fg); }
.th-sort .icon.th-sort-inactive { opacity: .45; }

/* list-group rows used as "top N" lists */
.list-group-flush > .list-group-item {
    padding: .75rem var(--bs-card-spacer-x);
    border-color: var(--zn-border);
    background: transparent;
}
.list-group-item a { color: var(--zn-fg); font-weight: 500; }

/* ---------- Topbar quick search (Zenith .zn-search) ---------- */

.topbar-search.zn-search { flex: 0 1 22.5rem; }

/* ---------- Login page (guest layout) ---------- */

.site-login { flex: 1; }

.login-split-card {
    width: 100%;
    max-width: 880px;
    border: 1px solid var(--zn-border) !important;
    border-radius: 1rem;
    background: var(--zn-card);
    box-shadow: var(--zn-shadow-lg);
}

.login-split-card .input-group {
    border: 1px solid var(--zn-border);
    border-radius: var(--zn-radius);
    background: var(--zn-bg);
    box-shadow: var(--zn-shadow-sm);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.login-split-card .input-group .input-group-text { background: transparent; border: 0; color: var(--zn-muted-fg); }
.login-split-card .input-group .form-control { border: 0; background: transparent; box-shadow: none; }
.login-split-card .input-group .form-control:focus { box-shadow: none; }
.login-split-card .input-group:focus-within {
    border-color: var(--zn-ring);
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}
.login-split-card .input-group:has(.is-invalid) { border-color: var(--zn-danger); }

/* brand panel: near-black with the chart palette as a quiet accent strip */
.login-brand-panel {
    position: relative;
    min-height: 460px;
    background: #0a0a0a;
    color: #fafafa;
    overflow: hidden;
}
.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 100% 2.5rem,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 2.5rem 100%;
    mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
    pointer-events: none;
}
.login-brand-panel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--zn-chart-1) 0 25%, var(--zn-chart-2) 25% 50%,
        #4291b0 50% 75%, var(--zn-chart-4) 75% 100%);
}
.login-brand-panel > * { position: relative; z-index: 1; }
/* Bootstrap sets h1..h6 { color: var(--bs-heading-color) } directly on the
   element, so .text-white on the parent panel div never reaches the
   heading — only inherited color would. Recolor explicitly instead. */
.login-brand-panel,
.login-brand-panel h1, .login-brand-panel h2, .login-brand-panel h3 { color: #fafafa; }
.login-brand-panel .opacity-75 { color: #a1a1a1; opacity: 1 !important; }

.login-btn {
    --bs-btn-color: var(--zn-primary-fg);
    --bs-btn-bg: var(--zn-primary);
    --bs-btn-border-color: var(--zn-primary);
    --bs-btn-hover-color: var(--zn-primary-fg);
    --bs-btn-hover-bg: color-mix(in srgb, var(--zn-primary) 88%, var(--zn-bg));
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--zn-primary-fg);
    --bs-btn-active-bg: color-mix(in srgb, var(--zn-primary) 80%, var(--zn-bg));
    color: var(--zn-primary-fg) !important;
    font-weight: 600;
}

/* ---------- Card headers used as plain titles across alk views ---------- */

.card > .card-header {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    align-items: center;
}
.card > .card-header + .table-responsive,
.card > .card-header + .list-group,
.card > .card-header + .tab-content { margin-top: .75rem; border-top: 1px solid var(--zn-border); }
.card > .card-header .btn { font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
.card > .card-header .nav-tabs,
.card > .card-header .nav-pills { font-size: .8125rem; letter-spacing: 0; }

/* ---------- Sidebar brand logo ---------- */

.sidebar-brand .brand-link .brand-image,
.sidebar-brand .brand-image {
    width: 2.75rem;
    height: 2.75rem;
    max-height: 2.75rem;
    border-radius: 0;
}
.risk-stat-value { font-size: .75rem; line-height: 1.3; }

.sidebar-brand .brand-text {
    text-transform: uppercase;
    font-weight: 900 !important;
    letter-spacing: -.01em;
    color: #6d6d6d;
}