/* ============================================================
   ChannelFeedSync – Samsung SDS
   Design System: Modern light theme, Plus Jakarta Sans
   ============================================================ */

:root {
    /* Primary & Accent Colors */
    --primary:           #3B82F6;
    --primary-dark:      #2563EB;
    --primary-light:     #EFF6FF;
    --accent:            #60A5FA;

    /* Semantic Colors */
    --success:           #10B981;
    --success-light:     #ECFDF5;
    --warning:           #F59E0B;
    --warning-light:     #FFFBEB;
    --error:             #EF4444;
    --error-light:       #FEE2E2;
    --info-purple:       #8B5CF6;
    --info-purple-light: #F5F3FF;

    /* Neutral & Backgrounds */
    --sidebar-bg:        #FFFFFF;
    --sidebar-border:    #E2E8F0;
    --sidebar-divider:   #F1F5F9;
    --sidebar-hover:     #F8FAFC;
    --bg:                #EDF0F7;
    --surface:           #FFFFFF;
    --surface-alt:       #FAFBFE;
    --border:            #E2E8F0;

    /* Text Colors */
    --text-primary:      #0F172A;
    --text-secondary:    #64748B;
    --text-muted:        #94A3B8;

    /* Spacing & Layout */
    --sidebar-width:     244px;
    --topbar-height:     54px;
    --radius:            12px;
    --radius-sm:         8px;
    --radius-lg:         14px;

    /* Shadows */
    --shadow:            0 1px 3px rgba(0,0,0,0.04);
    --shadow-md:         0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:         0 10px 25px rgba(0,0,0,0.1);

    /* Animation */
    --transition:        0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* ─── APP WRAPPER ─── */
.app-wrapper { display: flex; height: 100vh; overflow: hidden; }

/* ─── SIDEBAR ─── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transition: transform var(--transition);
    overflow: hidden;
}
.sidebar.collapsed { transform: translateX(calc(-1 * var(--sidebar-width))); }

.sidebar-header {
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--sidebar-divider);
    flex-shrink: 0;
}
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-text { display: flex; flex-direction: column; justify-content: center; }
.brand-icon {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 21px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}
.brand-name { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.01em; }
.brand-sub  { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; line-height: 1.2; margin-top: 3px; }

.sidebar-nav {
    flex: 1; overflow-y: auto; padding: 14px 10px; scrollbar-width: none;
    display: flex; flex-direction: column; gap: 1px;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

/* Wrapper divs are purely semantic (group a toggle with its submenu) — they add
   no spacing of their own; the 1px rhythm comes from .sidebar-nav/.nav-section gap,
   matching the reference's flat nav list. */
.nav-section { display: flex; flex-direction: column; gap: 1px; }
.nav-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
    color: var(--text-muted);
    padding: 12px 8px 8px;
    display: block;
    text-transform: uppercase;
}
.nav-section:first-child .nav-section-label { padding-top: 2px; }
.nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500; font-size: 13px;
    line-height: 1.3;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.nav-item:hover  { background: var(--sidebar-hover); color: var(--text-secondary); text-decoration: none; }
.nav-item.active {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2.5px;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
}
.nav-item i { font-size: 15px; flex-shrink: 0; }
.nav-item-badge {
    margin-left: auto;
    background: rgba(239,68,68,0.15);
    color: #F87171;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}

/* ── Collapsible nav group ─────────────────────────────────────────── */
.nav-group-toggle {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer; user-select: none;
    font-weight: 600; font-size: 13px;
    transition: all var(--transition);
}
.nav-group-toggle:hover { background: var(--sidebar-hover); color: var(--text-secondary); }
.nav-group-toggle.group-active { color: var(--text-secondary); }
.nav-chevron { flex-shrink: 0; transition: transform 0.2s ease; margin-left: auto; color: #CBD5E1; }
.nav-group-toggle:not(.collapsed) .nav-chevron { transform: rotate(90deg); }

.nav-sub { padding-left: 4px; }
.nav-sub-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 12px 7px 32px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500; font-size: 13px;
    transition: all var(--transition);
    margin-bottom: 1px;
}
.nav-sub-item:hover  { background: var(--sidebar-hover); color: var(--text-secondary); text-decoration: none; }
.nav-sub-item.active { background: var(--primary-light); color: var(--primary); }
.nav-sub-item i { font-size: 14px; flex-shrink: 0; }

.sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--sidebar-divider);
    flex-shrink: 0;
}
.user-info { display: flex; align-items: center; gap: 10px; }
.user-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 13px;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.user-name  { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.user-role  { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.user-details { flex: 1; min-width: 0; }
.btn-logout {
    background: none; border: none; padding: 6px 8px;
    color: var(--text-muted); cursor: pointer;
    border-radius: 7px; transition: all var(--transition);
    font-size: 14px;
    border: 1px solid var(--sidebar-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.btn-logout:hover { background: var(--sidebar-hover); color: var(--text-secondary); }

/* ─── MAIN CONTENT ─── */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex; flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: margin var(--transition);
}
.main-content.expanded { margin-left: 0; }

/* ─── TOPBAR ─── */
.topbar {
    height: var(--topbar-height);
    flex-shrink: 0;
    background: var(--surface);
    display: flex; align-items: center;
    padding: 0 28px;
    gap: 16px;
    z-index: 100;
    /* Shadow alone separates it from the content below — a border-bottom on
       top of that was double-signaling the same edge and, since --border sits
       between white and the page bg, read as an odd stray line either way. */
    box-shadow: var(--shadow);
}
.sidebar-toggle {
    background: none; border: none;
    font-size: 20px; color: var(--text-secondary);
    cursor: pointer; padding: 4px 8px;
    border-radius: var(--radius-sm); transition: all var(--transition);
}
.sidebar-toggle:hover { background: var(--bg); color: var(--text-primary); }
.topbar-breadcrumb { flex: 1; }
.topbar-breadcrumb .breadcrumb { margin: 0; font-size: 12.5px; }
.topbar-breadcrumb .breadcrumb-item { color: var(--text-muted); font-weight: 500; }
.topbar-breadcrumb .breadcrumb-item a { color: var(--text-muted); text-decoration: none; }
.topbar-breadcrumb .breadcrumb-item.active { color: var(--text-primary); font-weight: 700; }
.topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: ">"; color: #CBD5E1; font-weight: 600; padding-right: 8px;
}
.topbar-date {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
.topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-btn {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition);
    position: relative;
}
.topbar-btn:hover { background: var(--surface-alt); }
.topbar-notif-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 6px; height: 6px;
    background: var(--error);
    border-radius: 50%;
    border: 1.5px solid white;
}

/* ─── PAGE CONTENT ─── */
/* Plain block flow — every page relies on Bootstrap's own mb-3/mb-4/g-4 utility
   classes for spacing between its sections, consistently. A flex+gap wrapper
   here would double up with those utilities on every page, not just Dashboard. */
.page-content {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 22px 28px 32px;
    scrollbar-width: none;
    animation: fadeIn 0.3s ease;
}
.page-content::-webkit-scrollbar { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 24px; gap: 16px;
}
.page-title  { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.page-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ─── CARDS ───
   No overflow:hidden here — a generic reusable container can hold Bootstrap
   .row gutters (negative margins), wrapping button rows, dropdowns, or JS-toggled
   panels, and clipping any of those silently breaks the layout. Corner-rounding
   for a flush (zero-padding) body around a table/list is instead scoped to
   .card-body.p-0 below, which is the one case that's genuinely static and safe
   to clip. */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* Flush card bodies (Bootstrap's .p-0) wrap a table/list directly against the
   card edge — clip just these so the header row's background respects the
   card's rounded corners, without risking any other card's dynamic content. */
.card-body.p-0 { overflow: hidden; border-radius: inherit; }
.card-header {
    padding: 15px 20px;
    background: transparent;
    border-bottom: 1px solid #F1F5F9;
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
}
/* Feed Validation Status has no title-height quirk to compensate for like
   Real-Time Feed Sync does, so it can use a normal, tighter header. */
.card-header--sm { padding: 11px 20px; }
.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}
.card-title-icon {
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* A card-title's status dot reads as a smaller, quieter signal than the
   banner's — 7px here vs the alert strip's 9px. */
.card-title .status-dot { width: 7px; height: 7px; }
.card-title > i { color: var(--primary); font-size: 14px; }
.card-body { padding: 20px; }
.feed-updated-label {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
}

/* ─── STAT CARDS ───
   Markup (Views/Dashboard/Index.cshtml):
   <a><div class="stat-card stat-card-blue">
       <div class="stat-card-icon"><i/></div>
       <div class="stat-card-body"><div class="stat-label"/><div class="stat-value"/></div>
       <div class="stat-card-footer"><span/></div>
   </div></a>
*/
.stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #D8DCE6; }

/* One neutral top accent for every card — vibrant color is reserved for actual
   alert/status states elsewhere (status-strip, badges), not ambient decoration
   on KPIs that are all equally "normal". The stat-card-blue/orange/purple/green
   classes still exist in the markup (kept so we're not touching every view that
   renders these cards) but no longer carry distinct hues. */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary-light);
}

.stat-card-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: var(--primary-light);
    color: var(--primary);
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    flex-shrink: 0;
}

.stat-card-body {
    display: flex; flex-direction: column; gap: 10px; padding: 0;
    grid-column: 1;
    grid-row: 1;
}
.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
}
.stat-value {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Sparkline trend chart — spans full width, sits between the value and the footer */
/* Compact trend line — replaces the old sparkline, which mostly rendered as a
   flat, uninformative line. A neutral (non-red/green) arrow + delta is denser
   and doesn't imply "up" is good or bad, since that depends on the metric. */
.stat-card-trend {
    grid-column: 1 / -1;
    margin-top: 10px;
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.stat-card-trend svg { width: 13px; height: 13px; flex-shrink: 0; }
.stat-card-trend-label { color: var(--text-muted); font-weight: 500; margin-left: 2px; }

/* Footer is a quiet context line — spans full width */
.stat-card-footer {
    grid-column: 1 / -1;
    padding-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
    display: flex; align-items: center; gap: 5px;
}
.stat-card-footer a { text-decoration: none; color: inherit; }

/* Genuine zero reads as "nothing to do", not broken */
.stat-card.is-zero .stat-value { color: var(--text-muted); }

/* ─── STATUS STRIP (health-first summary bar) ─── */
.status-strip {
    display: flex; align-items: center; gap: 20px; row-gap: 8px; flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 13px 20px;
    position: relative;
}
/* Signal "this needs attention" through the left accent bar, the pulsing red
   dot, and the failed-site chip — not by washing the whole panel in red. */
.status-strip--alert {
    border-color: var(--border);
    border-left-color: var(--error);
}
.status-strip__lead {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 700;
    color: var(--text-primary);
}
.status-dot {
    width: 9px; height: 9px;
    border-radius: 50%; flex: none;
    animation: pulse 2.2s ease-in-out infinite;
}
.status-dot--good { background: var(--success); }
.status-dot--crit { background: var(--error); }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
    70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.status-strip__sep {
    width: 1px; height: 16px;
    background: var(--border);
}
.status-strip__counts {
    display: flex; align-items: center; gap: 16px;
    font-size: 13px; color: var(--text-secondary);
}
.status-strip__counts b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.status-strip__counts .item { display: flex; align-items: center; gap: 7px; }
.status-chip--fail {
    display: inline-flex; align-items: center;
    background: #FEF6F6; border: 1px solid #FBD5D5; color: #B91C1C;
    border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.status-strip__grow { flex: 1 1 auto; }
.status-strip__meta {
    font-size: 12px;
    color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    font-weight: 500;
}
/* A stale sync is itself a problem — it shouldn't read as calm gray metadata
   next to a failing-site count that gets full alert treatment. */
.status-strip__meta--stale    { color: var(--warning); font-weight: 700; }
.status-strip__meta--critical { color: var(--error);   font-weight: 700; }
.status-strip__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none;
    margin-left: 4px;
    border: none; background: transparent; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 13px; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.status-strip__close:hover {
    background: var(--bg);
    color: var(--text-primary);
}
@media (max-width: 640px) {
    .status-strip__sep { display: none; }
}

/* ─── TABLES ───
   One standard size/style for every table in the app. Pages that used to set
   their own font-size (.86rem, .88rem, .82rem...) or Bootstrap's .table-sm
   should use .table-compact instead if they genuinely need denser rows. */
.table {
    color: var(--text-primary);
    width: 100%;
    border-collapse: collapse;
}
.table thead th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: #F8FAFC;
    text-align: left;
}
.table tbody td {
    padding: 11px 20px;
    line-height: 1.2;
    border-bottom: 1px solid #F8FAFC;
    vertical-align: middle;
    font-size: 13px;
}
.table tbody tr {
    background: white;
    transition: background var(--transition);
}
.table tbody tr:nth-child(even) { background: #FAFBFE; }
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: #F5F7FD; }

/* Opt-in modifier for data-dense grids that need more rows on screen */
.table-compact thead th { font-size: 10.5px; padding: 7px 12px; }
.table-compact tbody td  { font-size: 12px;  padding: 7px 12px; }

/* Table cell utilities */
.table-cell-emoji {
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 8px;
}
.table-cell-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.table-cell-sublabel {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* ─── STATUS BADGES ─── */
.status-badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    white-space: nowrap;
}
.status-success {
    background: var(--success-light);
    color: var(--success);
}
.status-success::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--success);
    margin-right: 4px;
}
.status-warning {
    background: var(--warning-light);
    color: var(--warning);
}
.status-error {
    background: var(--error-light);
    color: #BE123C;
}
.status-pending {
    background: var(--warning-light);
    color: #B45309;
}
.status-info {
    background: var(--info-purple-light);
    color: #6D28D9;
}

/* ─── TYPE BADGES ─── */
.badge-type {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 6px;
    font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
}

/* ─── MISMATCH BADGES ─── */
.badge-mismatch {
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10.5px; font-weight: 700;
    white-space: nowrap;
}
.badge-mismatch--average {
    background: var(--warning-light);
    color: #B45309;
    border: 1px solid #FDE68A;
}
.badge-mismatch--error {
    background: #FFF1F2;
    color: #BE123C;
    border: 1px solid #FECDD3;
}
.badge-mismatch--sale {
    background: var(--info-purple-light);
    color: #6D28D9;
    border: 1px solid #DDD6FE;
}

/* ─── VALIDATION RULE BADGES (Feed Validation footer) ─── */
.vd-footer-rules {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}
.rule-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px; font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.rule-badge b { color: var(--text-primary); font-weight: 700; }

/* ─── SUBSIDIARY BADGES ─── */
.badge-subsidiary {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
}

/* ─── JIRA TICKET ─── */
.jira-ticket {
    font-family: 'Courier New', monospace;
    font-size: 12px; font-weight: 600;
    color: #0052CC;
    background: #DEEBFF;
    padding: 2px 7px; border-radius: 5px;
}

/* ─── ROLE BADGES ─── */
.role-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
}
.role-admin { background: #FEF3C7; color: #92400E; }
.role-user  { background: var(--primary-light); color: var(--primary); }

/* ─── USER AVATAR SM ─── */
.user-avatar-sm {
    width: 28px; height: 28px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* ─── VALIDATION LIST ─── */
.validation-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
}
.validation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    line-height: 1.2; /* body's 1.6 default was inflating every row well past its padding */
    border-bottom: none;
    transition: background var(--transition);
}
.validation-item:hover { background: #FAFBFE; }
.validation-item:nth-child(even) { background: #FAFBFE; }
.validation-item:nth-child(even):hover { background: #F5F7FD; }
.validation-flag {
    font-size: 13px;
    flex-shrink: 0;
}
.validation-code {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    width: 56px;
    flex-shrink: 0;
}
.validation-bar {
    flex: 1;
    height: 4px;
    background: #F1F5F9;
    border-radius: 2px;
    overflow: hidden;
}
.validation-bar-fill {
    height: 100%;
    background: var(--text-muted);
    border-radius: 2px;
}
.validation-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--success);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 6px;
}
.validation-status svg {
    width: 11px;
    height: 11px;
}
/* The bar itself stays soft/desaturated regardless of severity — red used at
   full strength everywhere reads as constant alarm and stops meaning anything.
   The actual alert signal lives in the numeric status text next to it, which
   keeps full saturation so it's still the thing your eye catches first. */
.validation-bar-fill--error   { background: #FCA5A5; }
.validation-bar-fill--warning { background: #FCD9A0; }
.validation-bar-fill--failed  { background: var(--text-muted); }
.validation-status--error   { color: var(--error); font-weight: 700; }
.validation-status--warning { color: var(--warning); font-weight: 700; }
/* The 1-2 worst error counts on the panel get a bit more size so they're the
   first thing the eye lands on when scanning down the column. */
.validation-status--top { font-size: 12.5px; font-weight: 800; }
.validation-status--running { color: var(--primary); }
.validation-status--failed  { color: var(--text-muted); }

/* ─── FEED SYNC TABLE (grid-based, matches reference column layout) ─── */
.feed-table {
    width: 100%;
}
.feed-table-header, .feed-table-row {
    display: grid;
    grid-template-columns: 158px 95px 72px 76px 1fr 175px;
    align-items: center;
}
.feed-table-header {
    padding: 9px 20px;
    line-height: 1.2;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
}
.feed-table-header span {
    font-size: 10.5px; font-weight: 700; color: var(--text-muted);
    letter-spacing: 0.07em; text-transform: uppercase;
}
.feed-table-row {
    padding: 13px 20px;
    line-height: 1.2; /* body's 1.6 default was inflating every row well past its padding */
    min-height: 40px;
    background: var(--surface);
    transition: background var(--transition);
}
.feed-table-row:nth-child(even) { background: var(--surface-alt); }
.feed-table-row:hover { background: #F5F7FD; }
.feed-table-row--fail {
    background: var(--error-light) !important;
    box-shadow: inset 3px 0 0 var(--error);
}
.feed-table-row--fail:hover { background: #FEE2E2 !important; }
.feed-site-flag { font-size: 13px; line-height: 1; flex-shrink: 0; margin-right: 8px; }
.feed-time { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.feed-dur  { font-size: 12px; font-weight: 600; color: var(--text-primary); }
/* Single-line + ellipsis so a long error message never grows one row taller
   than its neighbors — full text is still available via the title attribute. */
.feed-detail {
    font-size: 11px; color: var(--text-muted); font-weight: 500;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-detail--fail { color: #BE123C; }
/* No wrap — the column is sized for the realistic max (3 abbreviated badges),
   so letting a 4th line-wrap instead of staying on one line is what breaks
   row-height consistency. */
.feed-mismatches { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; overflow: hidden; }

/* ─── GRID LAYOUTS ─── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 330px; gap: 14px; }
.grid-1 { display: grid; grid-template-columns: 1fr; }

/* ─── BUTTONS ─── */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
    font-size: 13.5px;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    border: 1px solid;
    transition: all var(--transition);
}
.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    background: white;
}
.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.btn-secondary { border-radius: var(--radius-sm); font-size: 13.5px; padding: 8px 12px; }
.btn-outline-secondary { border-radius: var(--radius-sm); font-size: 13.5px; padding: 8px 12px; }
.btn-outline-success { border-radius: var(--radius-sm); font-size: 13.5px; }
.btn-ghost {
    background: none;
    border: none;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all var(--transition);
    font-size: 14px;
    cursor: pointer;
}
.btn-ghost:hover {
    background: var(--bg);
    color: var(--text-primary);
}
.btn-ghost.text-danger:hover {
    background: var(--error-light);
    color: var(--error);
}
.btn-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: var(--surface-alt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition);
}
.btn-icon i { font-size: 12.5px; }
/* Keeps a row's action icon-buttons (edit/delete/etc.) on one line inside a table cell */
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.btn-icon:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* ─── FORMS ─── */
.form-control, .form-select {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 13.5px;
    padding: 8px 12px;
    transition: border-color var(--transition), box-shadow var(--transition);
    font-family: inherit;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20,40,160,0.1);
    outline: none;
}
.form-control-lg { font-size: 15px; padding: 10px 14px; }
.form-label { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; display: block; }
.form-label.required::after { content: ' *'; color: #EF4444; }
.form-label-sm { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; display: block; }
.form-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.input-group-text { font-size: 13.5px; border-radius: 8px; border-color: #D1D5DB; }
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-radius: 0 8px 8px 0; }
.input-group > .input-group-text:first-child { border-radius: 8px 0 0 8px; }
.form-floating > .form-control { border-radius: 8px; }

/* ─── DATATABLE OVERRIDES ─── */
div.dataTables_wrapper { padding: 16px 20px; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid #D1D5DB; border-radius: 8px; padding: 6px 12px; font-size: 13px; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(20,40,160,0.1); }
div.dataTables_wrapper div.dataTables_length label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
div.dataTables_wrapper div.dataTables_length select { display: inline-block; width: auto; min-width: 70px; border: 1px solid #D1D5DB; border-radius: 8px; padding: 4px 28px 4px 10px; font-size: 13px; height: 32px; }
.dataTables_wrapper .dataTables_info { font-size: 12.5px; color: var(--text-muted); }
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px !important; font-size: 13px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
div.dataTables_wrapper div.dataTables_filter { margin-bottom: 4px; }

/* ─── TOM SELECT OVERRIDES ─── */
.ts-control { border: 1px solid #D1D5DB !important; border-radius: 8px !important; font-size: 13.5px !important; min-height: 38px !important; font-family: inherit !important; }
.ts-wrapper.focus .ts-control { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(20,40,160,0.1) !important; }
.ts-dropdown { border: 1px solid #D1D5DB !important; border-radius: 8px !important; box-shadow: var(--shadow-md) !important; font-size: 13.5px !important; font-family: inherit !important; }
.ts-dropdown .option { padding: 8px 12px !important; }
.ts-dropdown .option:hover, .ts-dropdown .option.active { background: var(--primary-light) !important; color: var(--primary) !important; }
.ts-dropdown .option.selected { background: var(--primary) !important; color: #fff !important; }
.ts-dropdown-content { max-height: 240px !important; }
.ts-wrapper { width: 100% !important; }
.ts-wrapper .ts-control input { font-family: inherit !important; font-size: 13.5px !important; }

/* ─── ALERT FLOAT ─── */
.alert-float {
    position: fixed; top: 20px; right: 20px;
    z-index: 9999; min-width: 320px; max-width: 480px;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius);
    animation: slideIn 0.3s ease;
}
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─── DETAIL VIEW ─── */
.detail-grid { display: flex; flex-direction: column; gap: 0; }
.detail-row  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.detail-item { padding: 12px 0; border-bottom: 1px solid #F3F4F6; display: flex; flex-direction: column; gap: 4px; padding-right: 16px; }
.detail-item:last-child { border-bottom: none; }
.detail-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.detail-value { font-size: 14px; color: var(--text-primary); }
.text-preserve { white-space: pre-wrap; font-size: 14px; line-height: 1.7; }

/* ─── AUDIT ITEMS ─── */
.audit-item { display: flex; flex-direction: column; margin-bottom: 14px; }
.audit-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.audit-value { font-size: 13px; color: var(--text-primary); font-weight: 500; }

/* ─── STICKY SIDEBAR ─── */
.sticky-sidebar { position: sticky; top: calc(var(--topbar-height) + 20px); }

/* ─── COMPACT FORM ─── */
.form-section-label {
    font-size: 10.5px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.09em;
    margin-bottom: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}
.card-footer {
    background: #FAFAFA;
    border-top: 1px solid var(--border);
    padding: 14px 20px;
}
.audit-footer-strip {
    display: flex; flex-wrap: wrap; gap: 20px;
    font-size: 12px; color: var(--text-muted);
    padding-top: 2px;
}
.audit-footer-strip strong { color: var(--text-secondary); }

/* ─── LOGIN PAGE ─── */
.login-page { background: var(--sidebar-bg); min-height: 100vh; display: flex; }
.login-container { display: flex; width: 100%; min-height: 100vh; }

.login-left {
    width: 420px; flex-shrink: 0;
    background: linear-gradient(160deg, #0A1628 0%, #1428A0 100%);
    display: flex; flex-direction: column;
    padding: 48px 40px;
    position: relative; overflow: hidden;
}
.login-left::before {
    content: '';
    position: absolute; top: -100px; right: -100px;
    width: 300px; height: 300px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
}
.login-brand { margin-bottom: auto; }
.login-brand-icon {
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: white;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}
.login-brand-name { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.login-brand-tagline { font-size: 14px; color: rgba(255,255,255,0.55); margin: 0; }
.login-features { margin: 40px 0; }
.login-feature-item {
    display: flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,0.75);
    font-size: 14px; font-weight: 500;
    margin-bottom: 16px;
}
.login-feature-item i { font-size: 18px; color: rgba(255,255,255,0.9); }
.login-footer-text { font-size: 12px; color: rgba(255,255,255,0.3); margin-top: auto; }

.login-right {
    flex: 1; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.login-card { width: 100%; max-width: 400px; }
.login-card-header { margin-bottom: 32px; }
.login-card-header h2 { font-size: 26px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.login-card-header p  { font-size: 14px; color: var(--text-secondary); margin: 0; }

.btn-login {
    height: 46px; font-size: 15px; font-weight: 600;
    border-radius: 10px;
    background: var(--primary); border-color: var(--primary);
    transition: all var(--transition);
}
.btn-login:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); }

.btn-password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 4px; z-index: 5;
}
.btn-password-toggle:hover { color: var(--text-primary); }

/* ─── MODAL OVERRIDES ─── */
.modal-content { border-radius: 14px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.modal-header  { padding: 20px 24px 16px; }
.modal-body    { padding: 8px 24px 16px; }
.modal-footer  { padding: 16px 24px 20px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 991px) {
    .sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .login-left { display: none; }
}

@media (max-width: 768px) {
    .page-content { padding: 20px 16px 32px; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .detail-row { grid-template-columns: 1fr; }
    .alert-float { right: 12px; left: 12px; min-width: unset; }
    div.dataTables_wrapper { padding: 12px 0; }
}