/* Revit Model Health Dashboard Design System */
/* Dark-Mode Glassmorphism Palette */

:root {
    --bg-dark: #000000;
    --bg-card: rgba(4, 6, 12, 0.92);
    --bg-card-hover: rgba(7, 12, 22, 0.96);
    --bg-input: rgba(0, 0, 0, 0.72);
    --border-color: rgba(255, 255, 255, 0.07);
    --border-focus: rgba(0, 242, 254, 0.5);
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    /* Neon Status Colors */
    --color-primary: #00f2fe;
    --color-primary-rgb: 0, 242, 254;
    --color-secondary: #7f00ff;
    
    --color-success: #00e676;
    --color-success-rgb: 0, 230, 118;
    --color-error: #ff1744;
    --color-error-rgb: 255, 23, 68;
    --color-warning: #ffb300;
    --color-warning-rgb: 255, 179, 0;
    --color-info: #00b0ff;
    --color-info-rgb: 0, 176, 255;
    
    --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    --shadow-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --shadow-card: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and Core Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #000;
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.5;
}

/* Ambient Background Glows */
.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
}

.bg-glow-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.4) 0%, rgba(79, 172, 254, 0) 70%);
    top: -100px;
    left: -100px;
}

.bg-glow-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(127, 0, 255, 0.3) 0%, rgba(225, 0, 255, 0) 70%);
    bottom: -150px;
    right: -100px;
}

.bg-glow-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 230, 118, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
    top: 40%;
    left: 45%;
}

/* Main Container Layout */
.app-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 24px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-svg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.5));
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-sub {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 3px;
    margin-top: -2px;
}

.header-titles h1 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.header-titles .subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.header-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.meta-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.meta-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.meta-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.status-indicator {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-error);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-error);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.7); }
    70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 8px rgba(255, 23, 68, 0); }
    100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 rgba(255, 23, 68, 0); }
}

/* QAQC Workspace Structure */
.qaqc-workspace-shell {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.14);
    background: rgba(2, 4, 10, 0.92);
}

.qaqc-project-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.qaqc-eyebrow,
.qaqc-card-kicker {
    display: block;
    font-size: 0.56rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 800;
}

.qaqc-project-copy h2,
.qaqc-ldc-head h3 {
    margin: 2px 0 0;
    font-family: var(--font-heading);
    font-size: 1.14rem;
    color: var(--text-primary);
}

.qaqc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.qaqc-crumb {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.065);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.35px;
}

.qaqc-crumb.active {
    color: var(--color-primary);
    background: rgba(0,242,254,0.08);
    border-color: rgba(0,242,254,0.28);
}

.qaqc-crumb-sep {
    color: rgba(255,255,255,0.22);
    font-weight: 800;
}

.qaqc-project-name-field {
    width: min(360px, 100%);
}

.qaqc-project-name-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.58rem;
    color: var(--text-muted);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.qaqc-project-name-field input,
.qaqc-ldc-add select {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(7, 11, 24, 0.74);
    color: var(--text-primary);
    outline: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.qaqc-project-name-field input:focus,
.qaqc-ldc-add select:focus {
    border-color: rgba(0, 242, 254, 0.38);
}

.qaqc-dp-grid,
.qaqc-ldc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.qaqc-dp-card,
.qaqc-ldc-card {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    text-align: center;
    padding: 24px 22px;
    border-radius: 18px;
    border: 1px solid rgba(0, 242, 254, 0.16);
    background: linear-gradient(145deg, rgba(5, 8, 16, 0.96), rgba(2, 3, 8, 0.98));
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.qaqc-dp-card:hover,
.qaqc-ldc-card:hover,
.qaqc-dp-card.active,
.qaqc-ldc-card.active {
    transform: translateY(-7px) scale(1.02);
    border-color: var(--color-primary);
    background: linear-gradient(145deg, rgba(5, 14, 24, 0.98), rgba(0, 0, 0, 0.98));
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.38), 0 0 25px rgba(0, 242, 254, 0.13);
}

/* ── Staggered card entrance (plays each time a QAQC page/drill renders) ── */
@keyframes qaqcCardRise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.qaqc-dp-card,
.qaqc-ldc-card {
    /* backwards fill: hold the hidden state only during the delay,
       then revert to normal styles so :hover lift still works */
    animation: qaqcCardRise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: 40ms;
}

.qaqc-dp-card:nth-child(2),  .qaqc-ldc-card:nth-child(2)  { animation-delay: 100ms; }
.qaqc-dp-card:nth-child(3),  .qaqc-ldc-card:nth-child(3)  { animation-delay: 160ms; }
.qaqc-dp-card:nth-child(4),  .qaqc-ldc-card:nth-child(4)  { animation-delay: 220ms; }
.qaqc-dp-card:nth-child(5),  .qaqc-ldc-card:nth-child(5)  { animation-delay: 280ms; }
.qaqc-dp-card:nth-child(6),  .qaqc-ldc-card:nth-child(6)  { animation-delay: 340ms; }
.qaqc-dp-card:nth-child(7),  .qaqc-ldc-card:nth-child(7)  { animation-delay: 400ms; }
.qaqc-dp-card:nth-child(8),  .qaqc-ldc-card:nth-child(8)  { animation-delay: 460ms; }
.qaqc-dp-card:nth-child(9),  .qaqc-ldc-card:nth-child(9)  { animation-delay: 520ms; }
.qaqc-dp-card:nth-child(10), .qaqc-ldc-card:nth-child(10) { animation-delay: 580ms; }
.qaqc-dp-card:nth-child(11), .qaqc-ldc-card:nth-child(11) { animation-delay: 640ms; }
.qaqc-dp-card:nth-child(n+12), .qaqc-ldc-card:nth-child(n+12) { animation-delay: 700ms; }

/* Generic staggered entrance for card blocks on every other page/tab.
   Delay is set inline per-card by staggerReveal() in index.js. */
.card-stagger-anim {
    animation: qaqcCardRise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .qaqc-dp-card,
    .qaqc-ldc-card,
    .card-stagger-anim { animation: none !important; }
}

.qaqc-card-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    right: -34px;
    top: -34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.05) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    transition: var(--transition-smooth);
}

.qaqc-dp-card:hover .qaqc-card-glow,
.qaqc-ldc-card:hover .qaqc-card-glow {
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.14) 0%, rgba(0,0,0,0) 70%);
}

.qaqc-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    color: var(--color-primary);
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.22);
    transition: var(--transition-smooth);
}

.qaqc-dp-card .qaqc-card-icon,
.qaqc-ldc-card .qaqc-card-icon {
    display: grid !important;
    place-items: center !important;
    margin: 0 auto 8px !important;
    color: var(--color-primary) !important;
    font-family: initial !important;
}

.qaqc-dp-card .qaqc-card-icon svg,
.qaqc-ldc-card .qaqc-card-icon svg {
    display: block;
    margin: 0 auto;
    stroke: currentColor;
}

.qaqc-dp-card:hover .qaqc-card-icon,
.qaqc-ldc-card:hover .qaqc-card-icon {
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.28);
}

.qaqc-dp-card strong,
.qaqc-ldc-card span {
    display: block;
    margin: 2px 0;
    font-size: 1.05rem;
    font-family: var(--font-heading);
    color: var(--color-primary);
}

.qaqc-dp-card span:not(.qaqc-card-kicker),
.qaqc-dp-card em,
.qaqc-ldc-card em,
.qaqc-ldc-card i {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 650;
}

.qaqc-card-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin: 7px 0 2px;
}

.qaqc-card-metrics span {
    margin: 0 !important;
    padding: 7px 5px;
    border-radius: 9px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.055);
    color: var(--text-muted) !important;
    font-size: 0.58rem !important;
    font-family: var(--font-body) !important;
    font-weight: 800;
}

.qaqc-card-metrics b {
    display: block;
    margin-bottom: 2px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: var(--font-heading);
}

.qaqc-card-summary {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.qaqc-card-summary span {
    margin: 0 !important;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,242,254,0.055);
    color: var(--text-secondary) !important;
    font-size: 0.58rem !important;
    font-family: var(--font-body) !important;
    font-weight: 800;
}

.qaqc-card-action {
    margin-top: auto !important;
    width: 100%;
    min-height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0, 242, 254, 0.22);
    background: rgba(0, 242, 254, 0.04);
    color: var(--color-primary) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    transition: var(--transition-smooth);
}

.qaqc-card-action svg {
    transition: var(--transition-smooth);
}

.qaqc-dp-card:hover .qaqc-card-action,
.qaqc-ldc-card:hover .qaqc-card-action {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.13) 0%, rgba(79, 172, 254, 0.2) 100%);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.18);
}

.qaqc-dp-card:hover .qaqc-card-action svg,
.qaqc-ldc-card:hover .qaqc-card-action svg {
    transform: translateX(4px);
}

.qaqc-ldc-workspace {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.qaqc-workspace-shell.qaqc-tabs-compact {
    padding: 10px 12px;
    margin-bottom: 10px;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-project-row {
    display: none;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-project-name-field {
    display: none;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-breadcrumbs {
    display: none;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-ldc-workspace {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-ldc-head {
    margin-bottom: 0;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-ldc-head .qaqc-eyebrow {
    display: none;
}

.qaqc-workspace-shell.qaqc-tabs-compact #qaqc-selected-dp-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
}

.qaqc-workspace-shell.qaqc-tabs-compact #qaqc-selected-dp-title strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.02rem;
    text-transform: none;
    letter-spacing: 0;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-title-context {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.qaqc-workspace-shell.qaqc-tabs-compact .qaqc-back-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
}

.qaqc-workspace-shell.qaqc-tabs-compact #qaqc-ldc-grid {
    display: block;
    margin-top: 8px;
}

.qaqc-submission-card {
    min-height: 230px;
}

.qaqc-submission-card strong {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.2;
}

.qaqc-submission-editor {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) 1.4fr;
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 242, 254, 0.18);
    background: rgba(0, 242, 254, 0.035);
}

.qaqc-submission-editor label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.qaqc-submission-editor label span {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.qaqc-submission-editor input {
    width: 100%;
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 242, 254, 0.22);
    background: rgba(3, 7, 16, 0.86);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0 12px;
    outline: none;
}

.qaqc-submission-editor input:focus {
    border-color: rgba(0, 242, 254, 0.48);
    box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.06);
}

.qaqc-submission-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.qaqc-submission-meta span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 46px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.055);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
}

.qaqc-submission-meta b {
    color: var(--text-muted);
    font-size: 0.54rem;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.qaqc-ldc-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.qaqc-ldc-add {
    display: flex;
    gap: 8px;
    align-items: center;
}

.qaqc-ldc-add select {
    min-width: 170px;
}

.qaqc-ldc-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
}

.qaqc-stage-card strong {
    color: var(--color-success);
    font-size: 1.65rem;
}

.qaqc-back-btn {
    margin-left: 10px;
    padding: 5px 9px;
    border-radius: 7px;
    border: 1px solid rgba(0,242,254,0.25);
    background: rgba(0,242,254,0.06);
    color: var(--color-primary);
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
}

.qaqc-back-btn:hover {
    border-color: rgba(0,242,254,0.45);
    background: rgba(0,242,254,0.12);
}

.qaqc-stage-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(0,242,254,0.22);
    background: rgba(0,242,254,0.05);
}

.qaqc-stage-summary span {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.qaqc-stage-summary strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1rem;
}

.qaqc-stage-summary em {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
}

.qaqc-empty-ldc {
    grid-column: 1 / -1;
    padding: 14px;
    border-radius: 9px;
    border: 1px dashed rgba(0, 242, 254, 0.22);
    color: var(--text-muted);
    font-size: 0.72rem;
    background: rgba(0, 242, 254, 0.03);
}

@media (max-width: 1500px) {
    .qaqc-dp-grid,
    .qaqc-ldc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .qaqc-dp-grid,
    .qaqc-ldc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .qaqc-dp-grid,
    .qaqc-ldc-grid {
        grid-template-columns: 1fr;
    }
}

/* QAQC Tab Bar — hidden; navigation now via sidebar sub-tree */
.qaqc-tab-bar {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 14px;
    flex-shrink: 0;
}

.qaqc-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.qaqc-tab:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
}

.qaqc-tab.active {
    background: rgba(0,242,254,0.07);
    border-color: rgba(0,242,254,0.25);
    color: var(--color-primary);
}

.qaqc-tab-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
}

.qaqc-tab-panel.active {
    display: flex;
}

/* Locked state — hide a tab's data until a Design Package is selected */
.qaqc-tab-locked { display: none; }
.qaqc-tab-panel.qaqc-locked > *:not(.qaqc-tab-locked) { display: none !important; }
.qaqc-tab-panel.qaqc-locked > .qaqc-tab-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 48px 28px;
    min-height: 220px;
    border-radius: 16px;
    color: var(--text-muted);
}
.qaqc-tab-locked svg { color: var(--color-primary); opacity: 0.75; }
.qaqc-tab-locked h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: 0.3px;
}
.qaqc-tab-locked p { margin: 0; font-size: 0.82rem; max-width: 360px; }

/* Empty Model Health state (after Reset / before first upload) */
.model-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 44px 24px;
    min-height: 180px;
    color: var(--text-muted);
}
.model-empty-state svg { color: var(--color-primary); opacity: 0.7; }
.model-empty-state h3 {
    margin: 0;
    font-size: 0.98rem;
    color: var(--text-primary);
    font-weight: 800;
}
.model-empty-state p { margin: 0; font-size: 0.82rem; max-width: 340px; }

/* Placeholder tab panels */
.qaqc-placeholder-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(9,13,27,0.35);
    color: var(--text-muted);
    text-align: center;
    padding: 60px 40px;
}

.qaqc-placeholder-panel h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
}

.qaqc-placeholder-panel p {
    font-size: 0.78rem;
    max-width: 420px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.placeholder-badge {
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(0,242,254,0.07);
    border: 1px solid rgba(0,242,254,0.2);
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Design Package Stage Dashboard */
.design-package-subnav {
    display: none;
    margin: -8px 0 8px 34px;
    padding: 0 0 0 12px;
    border-left: 1px solid rgba(0, 242, 254, 0.22);
}

.design-package-subnav.active {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.design-package-subnav button {
    position: relative;
    min-height: 28px;
    padding: 5px 10px 5px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.design-package-subnav button::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: rgba(0, 242, 254, 0.22);
}

.design-package-subnav button.active,
.design-package-subnav button:hover {
    color: var(--color-primary);
    background: rgba(0, 242, 254, 0.08);
}

/* ── QAQC sidebar sub-nav tree ────────────────────────────────────────── */
.qaqc-subnav {
    flex-direction: column;
    gap: 2px;
    margin: -4px 0 4px 34px;
    padding: 0 0 0 12px;
    border-left: 1px solid rgba(0, 242, 254, 0.22);
}
.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 6px 10px 6px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
    position: relative;
    letter-spacing: 0.2px;
}
.nav-sub-item::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 1px;
    background: rgba(0, 242, 254, 0.22);
}
.nav-sub-item svg { flex-shrink: 0; }
.nav-sub-item:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}
.nav-sub-item.active {
    color: var(--color-primary);
    background: rgba(0, 242, 254, 0.08);
}
.sidebar.collapsed .qaqc-subnav { display: none !important; }

.nav-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

#nav-design-stages.subnav-open .nav-chevron {
    transform: rotate(180deg);
}

#nav-qaqc.subnav-open .nav-chevron {
    transform: rotate(180deg);
}

.stage-dashboard-shell {
    min-height: calc(100vh - 150px);
    padding: 22px;
    border-radius: 18px;
    border: 1px solid rgba(0, 242, 254, 0.12);
    background: linear-gradient(135deg, rgba(7, 14, 28, 0.9), rgba(11, 16, 34, 0.76));
    box-shadow: 0 24px 70px rgba(0,0,0,0.32);
}

.stage-dashboard-top {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.stage-breadcrumbs {
    min-height: 24px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.stage-breadcrumbs span {
    color: var(--color-primary);
}

.stage-dashboard-top h1 {
    margin: 18px 0 8px;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1.02;
    color: var(--text-primary);
    letter-spacing: 0;
}

.stage-dashboard-top p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stage-page-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 12px;
    width: min(720px, 55%);
}

.stage-meta-card {
    min-height: 72px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;
    background: rgba(7, 11, 24, 0.58);
}

.stage-meta-card span,
.stage-context-controls span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    font-weight: 800;
}

.stage-meta-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.stage-meta-card em {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 650;
}

.stage-meta-card.status strong {
    display: flex;
    gap: 8px;
    align-items: center;
}

.stage-meta-card.status i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #00e676;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
}

.stage-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 24px;
}

.stage-context-controls {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.stage-context-controls label {
    min-width: 170px;
}

.stage-context-controls select {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 242, 254, 0.16);
    background: rgba(7, 11, 24, 0.74);
    color: var(--text-primary);
    outline: none;
    font-size: 0.78rem;
    font-weight: 800;
}

.stage-qaqc-tabs {
    display: flex;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 13px;
    background: rgba(7, 11, 24, 0.55);
}

.stage-qaqc-tabs button {
    min-height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.stage-qaqc-tabs button.active {
    border-color: rgba(0, 242, 254, 0.38);
    background: rgba(0, 242, 254, 0.08);
    color: var(--color-primary);
}

.stage-qaqc-tabs button span {
    font-size: 0.58rem;
    color: rgba(148,163,184,0.72);
}

.stage-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 18px;
}

.deliverable-stage-card {
    position: relative;
    overflow: hidden;
    min-height: 282px;
    padding: 22px 28px 18px;
    border-radius: 16px;
    border: 1px solid rgba(0, 242, 254, 0.26);
    background:
        radial-gradient(circle at 15% 10%, rgba(0, 242, 254, 0.09), transparent 28%),
        linear-gradient(145deg, rgba(10, 23, 42, 0.86), rgba(11, 15, 32, 0.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 38px rgba(0,0,0,0.24);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.deliverable-stage-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 242, 254, 0.54);
}

.stage-card-main {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 22px;
    align-items: center;
}

.stage-ring {
    position: relative;
    width: 128px;
    height: 128px;
}

.stage-ring svg {
    width: 128px;
    height: 128px;
    transform: rotate(-90deg);
}

.stage-ring-bg,
.stage-ring-fg {
    fill: none;
    stroke-width: 10;
}

.stage-ring-bg {
    stroke: rgba(148, 163, 184, 0.16);
}

.stage-ring-fg {
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.45));
}

.stage-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stage-ring-center strong {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.92rem;
    line-height: 1;
}

.stage-ring-center span {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.58rem;
    text-transform: uppercase;
    font-weight: 800;
}

.stage-card-copy h2 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.55rem;
}

.stage-card-copy .stage-rows {
    display: block;
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 700;
}

.stage-status-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-status-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 650;
}

.stage-status-row i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.stage-status-row.approved i { background: #00e676; }
.stage-status-row.submitted i { background: #00b0ff; }
.stage-status-row.not-started i { background: #94a3b8; }

.stage-progress-track {
    height: 4px;
    margin: 22px 6px 16px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148,163,184,0.14);
}

.stage-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00f2fe, #22e7d0);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.45);
}

.stage-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}

.stage-check-pill {
    padding: 7px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.035);
    text-align: center;
}

.stage-check-pill span {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 0.54rem;
    text-transform: uppercase;
    font-weight: 800;
}

.stage-check-pill strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.84rem;
}

.stage-open-btn {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 242, 254, 0.22);
    background: rgba(0, 242, 254, 0.04);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 850;
    cursor: pointer;
}

.stage-info-strip {
    margin-top: 16px;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 22px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.035);
}

.stage-info-copy {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--color-primary);
}

.stage-info-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
}

.stage-context-summary {
    min-width: 260px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}

.stage-empty-state {
    grid-column: 1 / -1;
    padding: 44px 20px;
    border: 1px dashed rgba(0,242,254,0.24);
    border-radius: 14px;
    color: var(--text-muted);
    text-align: center;
    background: rgba(0,242,254,0.03);
}

@media (max-width: 1400px) {
    .stage-dashboard-top,
    .stage-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .stage-page-meta {
        width: 100%;
    }

    .stage-card-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 820px) {
    .stage-page-meta,
    .stage-card-grid {
        grid-template-columns: 1fr;
    }

    .stage-card-main {
        grid-template-columns: 108px 1fr;
        gap: 16px;
    }

    .stage-ring,
    .stage-ring svg {
        width: 108px;
        height: 108px;
    }

    .stage-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stage-context-controls,
    .stage-qaqc-tabs,
    .stage-info-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .stage-ring {
        margin: 0 auto;
    }
}

/* Dashboard Cards Structure */
.dashboard-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    min-height: 0;
}

/* QAQC size reduction overrides */
#view-qaqc .card-header {
    padding: 14px 18px;
}

#view-qaqc .card-header h2 {
    font-size: 0.92rem;
}

#view-qaqc .card-body {
    padding: 0 18px 18px 18px;
    gap: 14px;
}

#view-qaqc .card-body.scrollable-body {
    padding: 10px 18px;
}

#view-qaqc .gauge-container {
    width: 160px;
    height: 160px;
    margin: 6px auto;
}

#view-qaqc .gauge-value {
    font-size: 2rem;
}

#view-qaqc .gauge-label {
    font-size: 0.58rem;
}

#view-qaqc .stat-num {
    font-size: 1.05rem;
}

#view-qaqc .stat-lbl {
    font-size: 0.5rem;
}

#view-qaqc .stat-mini {
    padding: 8px 4px;
}

#view-qaqc .summary-stats-grid {
    grid-template-columns: repeat(4, 1fr);
}

#view-qaqc .details-item {
    font-size: 0.68rem;
    padding: 6px 10px;
}

#view-qaqc .model-details-section h3,
#view-qaqc .categories-section h3 {
    font-size: 0.65rem;
    margin-bottom: 8px;
}

#view-qaqc .progress-metric {
    gap: 4px;
    margin-bottom: 8px;
}

#view-qaqc .metric-info {
    font-size: 0.68rem;
}

#view-qaqc .card-divider {
    margin: 0;
}

#view-qaqc .active-count {
    font-size: 0.65rem;
}

#view-qaqc .search-box input {
    font-size: 0.72rem;
}

#view-qaqc .filter-tab {
    font-size: 0.68rem;
    padding: 5px 10px;
}

#view-qaqc .badge {
    font-size: 0.6rem;
    padding: 4px 9px;
}

/* ============================================================
   CLASH ANALYSIS DASHBOARD
   ============================================================ */
.clash-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

/* KPI Row */
.clash-kpi-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(135px, 1fr));
    gap: 12px;
    margin-top: 20px;
    flex-shrink: 0;
}

.c-kpi-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 16px;
    border-radius: 13px;
    background: rgba(9,13,27,0.45);
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 96px;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.c-kpi-mini:hover,
.c-kpi-card:hover,
.c-kpi-split:hover,
.clash-chart-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 242, 254, 0.28);
    background: rgba(11, 22, 39, 0.58);
}

.c-kpi-icon-wrap {
    font-size: 0.9rem;
    line-height: 1;
}

.c-kpi-mini-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.c-kpi-mini-val {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-heading);
    line-height: 1.1;
}

.c-kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 16px;
    border-radius: 13px;
    background: rgba(9,13,27,0.45);
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 96px;
    text-align: center;
    flex: 1;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.c-kpi-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.c-kpi-big {
    font-size: 2.15rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-heading);
    line-height: 1.1;
}

.c-kpi-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
}

.c-kpi-split {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border-radius: 13px;
    min-height: 96px;
    background: rgba(9,13,27,0.45);
    border: 1px solid rgba(255,255,255,0.06);
    flex: 1.4;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.c-kpi-split-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.c-kpi-tiny-lbl {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 700;
    text-align: center;
}

.c-kpi-tiny-val {
    font-size: 1.28rem;
    font-weight: 800;
    font-family: var(--font-heading);
    text-align: center;
    line-height: 1;
}

/* Main Body */
.clash-body {
    display: flex;
    gap: 16px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Filter Sidebar */
.clash-filters {
    width: 210px;
    flex-shrink: 0;
    padding: 18px 16px;
    border-radius: 12px;
    background: rgba(9,13,27,0.45);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 100%;
}

.clash-filter-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clash-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clash-filter-group label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.clash-filter-group select {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.7rem;
    border-radius: 6px;
    background: rgba(10,14,28,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    outline: none;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.clash-filter-group select:hover,
.clash-filter-group select:focus {
    border-color: rgba(0, 242, 254, 0.35);
    background: rgba(10, 24, 40, 0.82);
}

.clash-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid rgba(0,242,254,0.2);
    background: rgba(0,242,254,0.05);
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

.clash-reset-btn:hover {
    background: rgba(0,242,254,0.12);
    border-color: rgba(0,242,254,0.4);
}

.clash-filter-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Charts Grid */
.clash-charts-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(250px, 1fr) minmax(250px, 1fr);
    gap: 16px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.clash-chart-card {
    border-radius: 14px;
    padding: 18px 20px;
    background: rgba(9,13,27,0.35);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.clash-chart-title {
    font-size: 0.9rem;
    font-weight: 850;
    color: var(--text-secondary);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

#cc-status,
#cc-top10,
#cc-priority,
#cc-trend,
#cc-disc {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

#cc-status,
#cc-disc {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#cc-top10 {
    overflow: auto;
}

#cc-top10 table {
    width: 100% !important;
    height: 100%;
}

#cc-priority {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 28px);
}

#cc-priority svg {
    width: clamp(128px, 32%, 190px) !important;
    height: auto !important;
}

#cc-trend {
    display: flex;
    flex-direction: column;
}

#cc-trend svg {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
}

#cc-disc {
    gap: 8px;
}

#cc-top10-card {
    grid-column: span 2;
}

@media (max-width: 1500px) {
    .clash-kpi-row {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .clash-charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(240px, 1fr));
    }

    #cc-top10-card {
        grid-column: span 1;
    }
}

@media (max-width: 1050px) {
    .clash-body {
        flex-direction: column;
        overflow: visible;
    }

    .clash-filters {
        width: 100%;
        max-height: none;
    }

    .clash-charts-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        overflow: visible;
    }

    .clash-chart-card {
        min-height: 260px;
    }
}

/* Priority badge pill */
.clash-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.clash-priority-badge.H {
    background: rgba(255,68,68,0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255,68,68,0.3);
}

.clash-priority-badge.M {
    background: rgba(255,153,0,0.15);
    color: #ffa733;
    border: 1px solid rgba(255,153,0,0.3);
}

.clash-priority-badge.L {
    background: rgba(0,204,102,0.15);
    color: #00cc88;
    border: 1px solid rgba(0,204,102,0.3);
}

.clash-upload-label {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px;
    border-radius: 7px;
    border: 1px dashed rgba(0,242,254,0.3);
    background: rgba(0,242,254,0.04);
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

.clash-upload-label:hover {
    background: rgba(0,242,254,0.1);
    border-color: rgba(0,242,254,0.5);
}

.dashboard-card {
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, rgba(5, 8, 16, 0.96), rgba(0, 0, 0, 0.98));
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    top: -50px;
    right: -50px;
    pointer-events: none;
    z-index: 0;
}

.card-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.card-header.border-bottom {
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.card-header h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.card-body {
    padding: 0 24px 24px 24px;
    overflow-y: auto;
    flex-grow: 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-body.scrollable-body {
    padding: 12px 24px;
}

.card-divider {
    border: none;
    border-top: 1px solid var(--border-color);
}

/* Badge styles */
.badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.badge-pulse {
    background: rgba(0, 242, 254, 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(0, 242, 254, 0.3);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.1);
}

/* LEFT CARD: Gauge Styles */
.gauge-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radial-gauge {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.03);
    stroke-width: 9;
}

.gauge-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 314.159; /* 2 * PI * r (r=50) */
    stroke-dashoffset: 314.159; /* Starts empty */
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 6px var(--color-success));
}

.gauge-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gauge-value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.gauge-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin-top: -2px;
}

/* Stat Grid */
.summary-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
    text-align: center;
    transition: var(--transition-smooth);
}

.stat-mini {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.stat-mini:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.stat-mini.active#card-filter-pass {
    border-color: var(--color-success);
    background: rgba(0, 230, 118, 0.05);
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.2);
    transform: translateY(-2px);
}

.stat-mini.active#card-filter-fail {
    border-color: var(--color-error);
    background: rgba(255, 23, 68, 0.05);
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.2);
    transform: translateY(-2px);
}

.stat-mini.active#card-filter-err {
    border-color: var(--color-warning);
    background: rgba(255, 179, 0, 0.05);
    box-shadow: 0 0 15px rgba(255, 179, 0, 0.2);
    transform: translateY(-2px);
}

.stat-mini.active#card-filter-report {
    border-color: var(--color-info);
    background: rgba(0, 176, 255, 0.05);
    box-shadow: 0 0 15px rgba(0, 176, 255, 0.2);
    transform: translateY(-2px);
}

.stat-num {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-lbl {
    font-size: 0.55rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Details list style */
.details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.details-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.details-item .lbl {
    color: var(--text-secondary);
}

.details-item .val {
    font-weight: 600;
    color: var(--text-primary);
}

.model-details-section h3, .categories-section h3 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Category Progress Bars */
.progress-metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.metric-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 500;
}

.metric-info .name {
    color: var(--text-secondary);
}

.metric-info .pct {
    color: var(--text-primary);
    font-weight: 600;
}

.metric-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.metric-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
}

/* Status colors and utility backgrounds */
.text-success { color: var(--color-success); text-shadow: 0 0 10px rgba(0,230,118,0.2); }
.text-error { color: var(--color-error); text-shadow: 0 0 10px rgba(255,23,68,0.2); }
.text-alert { color: var(--color-warning); text-shadow: 0 0 10px rgba(255,179,0,0.2); }
.text-info { color: var(--color-info); text-shadow: 0 0 10px rgba(0,176,255,0.2); }

.bg-success { background-color: var(--color-success); box-shadow: 0 0 8px rgba(0,230,118,0.4); }
.bg-error { background-color: var(--color-error); box-shadow: 0 0 8px rgba(255,23,68,0.4); }
.bg-warning { background-color: var(--color-warning); box-shadow: 0 0 8px rgba(255,179,0,0.4); }
.bg-info { background-color: var(--color-info); box-shadow: 0 0 8px rgba(0,176,255,0.4); }
.bg-gray { background-color: var(--text-muted); }

/* font mono style */
.font-mono {
    font-family: 'Courier New', Courier, monospace;
}

/* RIGHT CARD: Filter Controls & Lists */
.card-header .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.active-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.controls-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

/* Search Box */
.search-box {
    position: relative;
    width: 100%;
}

.search-box input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px 12px 46px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}

.search-box input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

/* Filter Tab buttons */
.filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.filter-tabs::-webkit-scrollbar {
    height: 4px;
}

.filter-tabs::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.filter-tab {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.filter-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.15);
}

.filter-tab.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12) 0%, rgba(79, 172, 254, 0.12) 100%);
    color: var(--color-primary);
    border-color: var(--border-focus);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.1);
}

.tab-badge {
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    min-width: 18px;
    text-align: center;
}

/* Scrollbar customization */
.scrollable-body::-webkit-scrollbar {
    width: 6px;
}

.scrollable-body::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.scrollable-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* QC Checks List Items */
.checks-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.check-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.check-item:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 5px 15px rgba(0,0,0,0.3);
}

.check-item-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    padding-right: 20px;
}

.check-item-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-item-name {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.check-item-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.check-item-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.check-count-badge {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.active-selection {
    background: rgba(0, 242, 254, 0.05) !important;
    border-color: rgba(0, 242, 254, 0.3) !important;
    box-shadow: 0 0 15px rgba(0,242,254,0.1) !important;
}

/* Status Pill Badges */
.status-pill {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    min-width: 80px;
    display: inline-block;
}

.status-pill.pass {
    background: rgba(0, 230, 118, 0.08);
    color: var(--color-success);
    border: 1px solid rgba(0, 230, 118, 0.2);
    box-shadow: inset 0 0 4px rgba(0, 230, 118, 0.1);
}

.status-pill.fail {
    background: rgba(255, 23, 68, 0.08);
    color: var(--color-error);
    border: 1px solid rgba(255, 23, 68, 0.2);
    box-shadow: inset 0 0 4px rgba(255, 23, 68, 0.1);
}

.status-pill.error {
    background: rgba(255, 179, 0, 0.08);
    color: var(--color-warning);
    border: 1px solid rgba(255, 179, 0, 0.2);
    box-shadow: inset 0 0 4px rgba(255, 179, 0, 0.1);
}

.status-pill.report {
    background: rgba(0, 176, 255, 0.08);
    color: var(--color-info);
    border: 1px solid rgba(0, 176, 255, 0.2);
    box-shadow: inset 0 0 4px rgba(0, 176, 255, 0.1);
}

.status-pill.notrun {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* Naming checks waiting for a Project Standard upload */
.status-pill.awaiting {
    background: rgba(0, 176, 255, 0.08);
    color: #4dabff;
    border: 1px solid rgba(0, 176, 255, 0.3);
}

.chevron-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.check-item:hover .chevron-icon {
    color: var(--color-primary);
    transform: translateX(2px);
}

/* Loading & Empty States */
.loading-state, .empty-state {
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-secondary);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.03);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    filter: drop-shadow(0 0 5px rgba(0,242,254,0.3));
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* SLIDE OUT DRAWER: Inspector Panel */
.inspector-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 750px;
    max-width: 100vw;
    height: 100vh;
    background: rgba(9, 13, 27, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    border-left: 1px solid var(--border-color);
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.inspector-drawer.active {
    transform: translateX(0);
}

.drawer-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-title-area {
    display: flex;
    align-items: center;
    gap: 16px;
    width: calc(100% - 40px);
}

.drawer-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.drawer-header h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.drawer-close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.drawer-close-btn svg {
    width: 18px;
    height: 18px;
}

.drawer-body {
    padding: 24px;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.inspector-section h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Description style inside drawer */
.description-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.failure-message-box {
    background: rgba(255, 23, 68, 0.05);
    border: 1px solid rgba(255, 23, 68, 0.15);
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.failure-message-box .box-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-error);
    letter-spacing: 1px;
}

.failure-message-box p {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Flagged Elements structures */
.elements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.elements-header h3 {
    margin-bottom: 0;
}

.elements-list-wrapper {
    background: rgba(10, 14, 28, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    max-height: 400px;
}

.elements-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    text-align: left;
}

.elements-table th {
    background: #0a0e1c;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.elements-table td {
    padding: 9px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    vertical-align: top;
}

/* Name / Details column: let long family/sheet names wrap instead of
   pushing the Value + Count columns off-screen */
.elements-table td:nth-child(5) {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 150px;
    max-width: 280px;
}

/* Keep the status pill / count on one line so they never get clipped */
.elements-table th:nth-child(6),
.elements-table td:nth-child(6),
.elements-table th:nth-child(7),
.elements-table td:nth-child(7) {
    white-space: nowrap;
}

/* Empty generic columns (Category/Family/Type) stay compact */
.elements-table td:nth-child(2),
.elements-table td:nth-child(3),
.elements-table td:nth-child(4) {
    white-space: nowrap;
    color: var(--text-muted);
}

.elements-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.elements-table tbody tr.inspector-row-fail td {
    background: rgba(255, 23, 68, 0.075);
    border-bottom-color: rgba(255, 23, 68, 0.18);
}

.elements-table tbody tr.inspector-row-fail td:first-child {
    box-shadow: inset 3px 0 0 rgba(255, 23, 68, 0.75);
}

.elements-table tbody tr.inspector-row-fail:hover td {
    background: rgba(255, 23, 68, 0.12);
}

.elements-table tbody tr.inspector-row-pass td {
    background: rgba(0, 230, 118, 0.025);
}

.inspector-validation-msg {
    font-size: 0.75rem;
    margin-top: 4px;
    line-height: 1.35;
}

.inspector-validation-msg.error {
    color: var(--color-error);
}

.copy-id-btn {
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-family: monospace;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-smooth);
}

.copy-id-btn:hover {
    background: rgba(0, 242, 254, 0.1);
    color: #fff;
    box-shadow: 0 0 8px rgba(0,242,254,0.3);
}

/* Button style */
.btn {
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.btn-glass-pill {
    background: #0a0b10;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    padding: 6px 20px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 16px -4px rgba(0, 0, 0, 0.8),
        inset 0 -4px 12px rgba(0, 112, 243, 0.5),
        inset 0 -2px 4px rgba(138, 43, 226, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}

.header-action-btn {
    width: auto;
    min-width: 132px;
    height: 34px !important;
    padding: 0 18px !important;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}

.header-reset-btn {
    min-width: 78px;
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.08);
    box-shadow:
        0 8px 16px -4px rgba(0, 0, 0, 0.8),
        inset 0 -4px 12px rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 242, 254, 0.18);
}

.btn-glass-pill::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 10%;
    right: 10%;
    height: 35%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0));
    border-radius: 50px;
    pointer-events: none;
}

.btn-glass-pill:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 12px 20px -4px rgba(0, 0, 0, 0.9),
        inset 0 -5px 15px rgba(0, 112, 243, 0.7),
        inset 0 -3px 6px rgba(138, 43, 226, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-glass-pill:active {
    transform: translateY(1px);
    box-shadow: 
        0 4px 8px -2px rgba(0, 0, 0, 0.8),
        inset 0 -2px 8px rgba(0, 112, 243, 0.4),
        inset 0 -1px 3px rgba(138, 43, 226, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-sm {
    padding: 6px 12px;
    border-radius: 6px;
}

.icon-inline {
    width: 14px;
    height: 14px;
}

/* Copy Toast Notifications */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 100px);
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.95) 0%, rgba(0, 200, 83, 0.95) 100%);
    border: 1px solid rgba(0, 230, 118, 0.3);
    box-shadow: 0 10px 30px rgba(0, 230, 118, 0.3);
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.toast.show {
    transform: translate(-50%, 0);
}

/* Category pills in list views */
.category-badge {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Compliance Percentage Badge style */
.pct-badge {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    min-width: 60px;
    display: inline-block;
}

.pct-badge.pass {
    background: rgba(0, 230, 118, 0.04);
    color: var(--color-success);
    border-color: rgba(0, 230, 118, 0.15);
}

.pct-badge.fail {
    background: rgba(255, 23, 68, 0.04);
    color: var(--color-error);
    border-color: rgba(255, 23, 68, 0.15);
}

.pct-badge.alert {
    background: rgba(255, 179, 0, 0.04);
    color: var(--color-warning);
    border-color: rgba(255, 179, 0, 0.15);
}

/* Settings Styles */
.settings-btn {
    margin-left: 16px;
    background: rgba(10, 14, 28, 0.45) !important;
    border: 1px solid rgba(0, 242, 254, 0.15) !important;
    color: var(--color-primary) !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.08) !important;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background 0.3s, 
                border-color 0.3s, 
                box-shadow 0.3s !important;
}

.settings-btn:hover {
    background: rgba(0, 242, 254, 0.1) !important;
    border-color: rgba(0, 242, 254, 0.45) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 18px rgba(0, 242, 254, 0.25) !important;
    transform: rotate(45deg) !important;
}

#settings-drawer {
    width: 950px !important;
    max-width: 95vw !important;
    background: rgba(6, 8, 20, 0.98) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85) !important;
}

#btn-close-settings {
    background: #ffffff !important;
    color: #0c0f24 !important;
    border: none !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s, background 0.2s !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

#btn-close-settings:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: scale(1.05) !important;
}

#btn-close-settings svg {
    stroke: #0c0f24 !important;
}

/* Settings Tab Switcher */
.settings-tabs {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 8px;
    width: 100%;
}

.settings-tab {
    flex: 1;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    font-size: 0.78rem;
    transition: var(--transition-smooth);
    outline: none;
}

.settings-tab.active {
    background: rgba(0, 242, 254, 0.08) !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(0, 242, 254, 0.15) !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.05);
}

.settings-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.settings-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.settings-tab-content.active {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
}

.settings-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.settings-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.settings-group small {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.settings-input {
    background: rgba(10, 14, 28, 0.5);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 12px;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.settings-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.15);
}

/* ==========================================================================
   MODON PREMIUM SIDEBAR NAVIGATION & VIEWS LAYOUT
   ========================================================================== */

.app-layout {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    height: auto;
    max-height: none;
    overflow: visible;
    position: relative;
    z-index: 1;
    background: #000;
}

/* Sidebar Panel styling */
.sidebar {
    width: 260px;
    min-width: 260px;
    min-height: 100vh;
    height: auto;
    background: #02030a;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    z-index: 10;
    transition: var(--transition-smooth);
    box-shadow: 5px 0 25px rgba(0,0,0,0.4);
}

.sidebar.collapsed {
    width: 78px;
    min-width: 78px;
    padding: 24px 10px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    padding: 0;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition-smooth);
}

.sidebar-logo-img {
    width: 142px;
    height: auto;
    display: block;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.14));
    transition: var(--transition-smooth);
}

.sidebar.collapsed .sidebar-logo-img {
    width: 40px;
}

.sidebar.collapsed .logo-text {
    opacity: 0;
    width: 0;
    pointer-events: none;
    overflow: hidden;
}

.logo-svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-sub {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-muted);
}

.input-kpi-strip {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 0;
    padding: 18px 20px;
    border: 1px solid rgba(0, 242, 254, 0.18);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(0, 176, 255, 0.08), rgba(8, 12, 30, 0.6) 42%, rgba(9, 13, 27, 0.55)),
        rgba(9, 13, 27, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26), inset 0 0 24px rgba(0, 242, 254, 0.03);
    overflow: hidden;
}

.input-kpi-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 0 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.input-kpi-item:last-child {
    border-right: 0;
}

.input-kpi-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.input-kpi-label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.input-kpi-item strong {
    display: block;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 800;
}

.sidebar-header .logo-area {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.sidebar-header .brand-name {
    display: none;
}

.sidebar.collapsed .sidebar-header .logo-area {
    align-items: center;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.nav-item svg {
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.nav-item span {
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.sidebar.collapsed .nav-item span {
    opacity: 0;
    width: 0;
    pointer-events: none;
    overflow: hidden;
}

.nav-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
    color: var(--color-primary);
    background: rgba(0, 242, 254, 0.06);
    border-color: rgba(0, 242, 254, 0.2);
    box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.1);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px var(--color-primary);
}

.nav-badge {
    position: absolute;
    right: 12px;
    background: var(--color-primary);
    color: #070913;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
    transition: var(--transition-smooth);
}

.sidebar.collapsed .nav-badge {
    right: 6px;
    top: 6px;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    transition: var(--transition-smooth);
}

.sidebar.collapsed .sidebar-footer {
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
}

.sidebar-footer .version {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.sidebar-footer .program {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Main Content Panel */
.main-content {
    flex-grow: 1;
    min-height: 100vh;
    height: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: #05070f;
    position: relative;
    padding: 24px;
    transition: var(--transition-smooth);
}

#view-overall.dashboard-view {
    height: auto;
    min-height: 0;
}

#view-overall .gantt-view-container {
    min-height: 0;
}

#view-overall .gantt-visualizer {
    padding-bottom: 0;
}

.sidebar-toggle-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-right: 16px;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    color: var(--color-primary);
    background: rgba(0, 242, 254, 0.05);
    border-color: rgba(0, 242, 254, 0.2);
}

/* Views Switch Wrapper */
.views-wrapper {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    position: relative;
}

.dashboard-view {
    display: none;
    width: 100%;
    height: auto;
    min-height: 0;
    animation: viewFadeIn 0.4s ease-out forwards;
}

.dashboard-view.active {
    display: block;
}

#view-qaqc.dashboard-view.active {
    display: flex;
    flex-direction: column;
}

@keyframes viewFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   MODON GANTT CHART VISUALIZER STYLES
   ========================================================================== */

.gantt-view-container {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Gantt Drop & Drag File Upload Card */
.gantt-upload-card {
    min-height: 420px;
    background: var(--bg-card);
    border: 2px dashed rgba(0, 242, 254, 0.25);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.gantt-upload-card:hover {
    border-color: var(--color-primary);
    background: rgba(19, 27, 54, 0.85);
    box-shadow: 0 0 35px rgba(0, 242, 254, 0.15);
}

.upload-pulse-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: radialPulse 4s infinite ease-in-out;
}

@keyframes radialPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.35); opacity: 0.9; }
}

.gantt-upload-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 600px;
    z-index: 1;
}

.upload-icon {
    width: 64px;
    height: 64px;
    stroke: var(--color-primary);
    filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.5));
    animation: floatUp 3s infinite ease-in-out;
}

@keyframes floatUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.gantt-upload-inner h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.upload-tip {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.required-cols-info {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 10px;
    text-align: left;
}

.info-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.cols-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cols-grid code {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.75rem;
}

.btn-glass-glow {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.25);
    border: 1px solid rgba(0, 242, 254, 0.4);
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2) 0%, rgba(79, 172, 254, 0.3) 100%);
    backdrop-filter: blur(5px);
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 50px;
}

.btn-glass-glow:hover {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.4) 0%, rgba(79, 172, 254, 0.5) 100%);
    box-shadow: 0 4px 30px rgba(0, 242, 254, 0.45);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* Gantt Dashboard Stats KPI Row */
.gantt-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.gantt-kpi-card {
    padding: 22px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.kpi-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.05) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    top: -20px;
    right: -20px;
    pointer-events: none;
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.kpi-val {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
}

.kpi-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.kpi-bar-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.kpi-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease-out;
}

/* Gantt control filtering panel */
.gantt-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-radius: 18px;
    flex-wrap: wrap;
}

.gantt-controls .search-box {
    flex-grow: 1;
    max-width: 400px;
    position: relative;
}

.gantt-controls .select-group {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.select-wrapper label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding-left: 4px;
}

.gantt-controls select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 140px;
    outline: none;
    transition: var(--transition-smooth);
}

.gantt-controls select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15);
}

/* Gantt Timeline Board Card styling */
.gantt-board-card {
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
}

.gantt-board-wrapper {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.gantt-board-wrapper::-webkit-scrollbar {
    height: 8px;
}
.gantt-board-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.gantt-board {
    display: flex;
    flex-direction: column;
    position: relative;
    background: rgba(5, 7, 20, 0.2);
    min-width: 1100px;
}

/* Timeline headers row */
.gantt-header-row {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: rgba(10, 14, 30, 0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 6;
}

.gantt-header-label-cell {
    width: 320px;
    min-width: 320px;
    padding: 16px 24px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-right: 1px solid var(--border-color);
    position: sticky;
    left: 0;
    background: #080c1e;
    z-index: 7;
    flex-shrink: 0;
}

.gantt-header-timeline-wrapper {
    display: flex;
    flex-grow: 1;
}

.gantt-month-column {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    text-align: center;
    flex-grow: 1;
}

.gantt-month-column:last-child {
    border-right: none;
}

.gantt-month-label {
    padding: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--color-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 242, 254, 0.02);
    text-transform: uppercase;
}

.gantt-weeks-row {
    display: flex;
    flex-grow: 1;
}

.gantt-week-cell {
    flex-grow: 1;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 4px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.gantt-week-cell:last-child {
    border-right: none;
}

/* Gantt rows */
.gantt-row {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: var(--transition-smooth);
    background: rgba(255,255,255,0.01);
}

.gantt-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.gantt-row:last-child {
    border-bottom: none;
}

.gantt-label-cell {
    width: 320px;
    min-width: 320px;
    padding: 16px 24px;
    border-right: 1px solid var(--border-color);
    position: sticky;
    left: 0;
    background: #0c0f24; /* Prevents sticky row labels transparency overlap */
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.15);
}

.gantt-row:hover .gantt-label-cell {
    background: #111532;
}

.gantt-package-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.gantt-stage-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border-radius: 4px;
    white-space: nowrap;
}

.gantt-precinct-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-info);
    letter-spacing: 0.5px;
}

.gantt-timeline-track-cell {
    flex-grow: 1;
    position: relative;
    padding: 0;
}

/* Timeline bars grid columns lines overlay */
.gantt-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
    z-index: 1;
}

.gantt-grid-col {
    flex-grow: 1;
    border-right: 1px dashed rgba(255, 255, 255, 0.02);
}

.gantt-grid-col:last-child {
    border-right: none;
}

/* Gantt bars container */
.gantt-bars-container {
    position: relative;
    width: 100%;
    height: 64px;
    z-index: 2;
}

/* Planned bar outline styling */
.gantt-bar-planned {
    position: absolute;
    height: 12px;
    border-radius: 6px;
    border: 1px dashed rgba(0, 242, 254, 0.5);
    background: rgba(0, 242, 254, 0.1);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.03);
    transition: var(--transition-smooth);
    z-index: 2;
    top: 14px;
    cursor: pointer;
}

.gantt-bar-planned:hover {
    border-color: var(--color-primary);
    background: rgba(0, 242, 254, 0.2);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.25);
}

/* Actual bar solid styling */
.gantt-bar-actual {
    position: absolute;
    height: 16px;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth);
    z-index: 3;
    top: 34px;
    cursor: pointer;
}

.gantt-bar-actual.completed {
    background: linear-gradient(90deg, rgba(0, 230, 118, 0.4) 0%, rgba(0, 230, 118, 0.8) 100%);
    border: 1px solid var(--color-success);
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.15);
}

.gantt-bar-actual.ontrack {
    background: linear-gradient(90deg, rgba(0, 176, 255, 0.4) 0%, rgba(0, 176, 255, 0.8) 100%);
    border: 1px solid var(--color-info);
    box-shadow: 0 0 10px rgba(0, 176, 255, 0.15);
}

.gantt-bar-actual.delayed {
    background: linear-gradient(90deg, rgba(255, 23, 68, 0.4) 0%, rgba(255, 23, 68, 0.8) 100%);
    border: 1px solid var(--color-error);
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.2);
}

.gantt-bar-actual.notstarted {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--text-muted);
    box-shadow: none;
    height: 12px;
    border-radius: 6px;
    top: 36px;
}

/* Tooltip overlay styling on hover */
.gantt-tooltip-content {
    display: none;
    position: absolute;
    background: #0a0e22;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 50;
    pointer-events: none;
    font-size: 0.75rem;
    color: var(--text-primary);
    flex-direction: column;
    gap: 6px;
    width: 260px;
    transform: translate(-50%, -108%);
    left: 50%;
}

.gantt-bar-planned:hover .gantt-tooltip-content,
.gantt-bar-actual:hover .gantt-tooltip-content {
    display: flex;
}

.tooltip-title {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.tooltip-val {
    font-weight: 600;
    color: var(--text-secondary);
}

.tooltip-val.completed { color: var(--color-success); }
.tooltip-val.ontrack { color: var(--color-info); }
.tooltip-val.delayed { color: var(--color-error); }
.tooltip-val.notstarted { color: var(--text-muted); }

/* Milestone Diamonds */
.gantt-milestone-diamond {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    transform: translate(-50%, -50%) rotate(45deg);
    top: 42px; /* Centered relative to Actual bar alignment */
    z-index: 5;
    border: 2px solid #0c0f24;
    box-shadow: 0 0 8px var(--color-primary);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.gantt-milestone-diamond:hover {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.4);
    background: #ffffff;
    box-shadow: 0 0 12px #ffffff;
}

/* Table grid customizations */
.gantt-table-card {
    margin-top: 8px;
}

.gantt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.gantt-table th {
    background: rgba(255,255,255,0.02);
    padding: 12px 16px;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.gantt-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.gantt-table tr:hover {
    background: rgba(255, 255, 255, 0.015);
}

.gantt-table tr:last-child td {
    border-bottom: none;
}

.status-pill.notstarted {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-pill.ontrack {
    background: rgba(0, 176, 255, 0.1);
    color: var(--color-info);
    border: 1px solid rgba(0, 176, 255, 0.25);
}

/* ==========================================================================
   MODON GANTT CHART INTERACTIVE GRID STYLES
   ========================================================================== */

.gantt-table td {
    padding: 6px 8px; /* High-density grid */
    vertical-align: middle;
}

.grid-input {
    background: rgba(10, 14, 28, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    width: 100%;
    transition: var(--transition-smooth);
}

.grid-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(10, 14, 28, 0.5);
}

.grid-input:focus {
    border-color: var(--color-primary);
    background: rgba(7, 9, 19, 0.85);
    outline: none;
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.25);
}

.grid-input.date-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    padding: 6px 8px;
    color: var(--text-primary);
}

/* Style date picker calendar icon button in dark mode */
.grid-input.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1) hue-rotate(180deg) brightness(1.5);
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition-smooth);
}

.grid-input.date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.btn-delete-row {
    background: transparent;
    border: none;
    color: var(--color-error);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    opacity: 0.6;
    margin: 0 auto;
}

.btn-delete-row:hover {
    background: rgba(255, 23, 68, 0.1);
    opacity: 1;
    transform: scale(1.15);
}

.btn-add-row {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2) 0%, rgba(79, 172, 254, 0.35) 100%);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.15);
}

.btn-add-row:hover {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.35) 0%, rgba(79, 172, 254, 0.5) 100%);
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35);
    transform: translateY(-1px);
}

/* ==========================================================================
   MODON GANTT SUBVIEWS & PROGRAM BOARD CARD LAYOUTS
   ========================================================================== */

.gantt-subview-tabs-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4px;
}

.gantt-subview-tabs {
    display: flex;
    gap: 8px;
    background: rgba(12, 16, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 5px;
    border-radius: 50px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

.gantt-subtab {
    background: transparent;
    border: 1px solid transparent;
    outline: none;
    padding: 8px 18px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: var(--transition-smooth);
}

.gantt-subtab:hover {
    color: var(--text-primary);
}

.gantt-subtab.active {
    color: var(--color-primary);
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12) 0%, rgba(79, 172, 254, 0.22) 100%);
    border: 1px solid rgba(0, 242, 254, 0.3);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15);
}

.gantt-subview-panel {
    display: none;
    width: 100%;
}

.gantt-subview-panel.active {
    display: block;
    animation: viewFadeIn 0.35s ease-out;
}

/* Overall Split Layout Styling */
.overall-split-container {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-top: 12px;
    align-items: stretch;
}

.overall-dp-grid {
    flex: 1.8;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-content: start;
}

.overall-sidebar-table {
    flex: 1.2;
    min-width: 440px;
    max-width: 490px;
    display: flex;
    flex-direction: column;
}

/* High-Density Small Grid Inputs Table */
.gantt-table.high-density-table th {
    padding: 10px 8px;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
}

.gantt-table.high-density-table td {
    padding: 4px 6px;
    font-size: 0.76rem;
}

.gantt-table.high-density-table .grid-input {
    padding: 5px 8px;
    font-size: 0.75rem;
    border-radius: 6px;
}

.gantt-table.high-density-table .grid-input.date-input {
    font-size: 0.74rem;
    padding: 5px 6px;
}

.gantt-table.high-density-table .btn-delete-row {
    padding: 4px;
    border-radius: 5px;
}

/* Glowing Design Package Cards (Overall view) */
.dp-program-card {
    padding: 20px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    cursor: pointer;
}

.dp-program-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 242, 254, 0.45);
    box-shadow: 0 4px 20px rgba(0, 242, 254, 0.12);
}

.dp-card-glow {
    position: absolute;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.05) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    top: -15px;
    right: -15px;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.dp-program-card:hover .dp-card-glow {
    background: radial-gradient(circle, rgba(0, 242, 254, 0.1) 0%, rgba(0,0,0,0) 70%);
    width: 120px;
    height: 120px;
}

.dp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.dp-card-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dp-card-code {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    line-height: 1;
}

.dp-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
}

.dp-card-badge {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    text-transform: uppercase;
}

.dp-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dp-metric-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dp-metric-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-left: 2px;
}

.dp-stage-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 176, 255, 0.08);
    border: 1px solid rgba(0, 176, 255, 0.2);
    color: var(--color-info);
}

.dp-stage-pill.no-stage {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.dp-qaqc-pill {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.dp-qaqc-pill.compliant {
    background: rgba(0, 230, 118, 0.04);
    border: 1px solid rgba(0, 230, 118, 0.15);
}

.dp-qaqc-pill.non-compliant {
    background: rgba(255, 23, 68, 0.04);
    border: 1px solid rgba(255, 23, 68, 0.15);
}

.dp-qaqc-pill.awaiting {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.dp-qaqc-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dp-qaqc-status-text {
    font-size: 0.74rem;
    font-weight: 700;
}

.dp-qaqc-pill.compliant .dp-qaqc-status-text { color: var(--color-success); }
.dp-qaqc-pill.non-compliant .dp-qaqc-status-text { color: var(--color-error); }
.dp-qaqc-pill.awaiting .dp-qaqc-status-text { color: var(--text-muted); }

.dp-qaqc-pct {
    font-size: 0.72rem;
    font-weight: 800;
}

.dp-qaqc-pill.compliant .dp-qaqc-pct { color: var(--color-success); }
.dp-qaqc-pill.non-compliant .dp-qaqc-pct { color: var(--color-error); }
.dp-qaqc-pill.awaiting .dp-qaqc-pct { color: var(--text-muted); }

.dp-model-file-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.62rem;
    color: var(--text-muted);
    word-break: break-all;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.03);
    padding-top: 4px;
}

.dp-qaqc-pill.awaiting .dp-model-file-code {
    border-top: none;
    padding-top: 0;
}

/* Localized Detailed View Cards */
.detailed-timelines-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 12px;
}

.detailed-dp-timeline-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.detailed-dp-timeline-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.detailed-dp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(10, 14, 30, 0.4);
}

.detailed-dp-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detailed-dp-code-tag {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(0, 242, 254, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 242, 254, 0.15);
    letter-spacing: 0.5px;
}

.detailed-dp-name-tag {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.detailed-dp-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-detailed-dp-timeline-card .gantt-board-card {
    border: none;
    border-radius: 0;
    background: transparent;
}

/* ==========================================================================
   MODON LOGIN OVERLAY & PORTAL SELECTOR STYLES
   ========================================================================== */

/* Login Overlay Styles */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #05070f;
    background: radial-gradient(circle at center, #0c1228 0%, #05070f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 36px 32px;
    border-radius: 24px;
    background: rgba(13, 19, 39, 0.75);
    border: 1px solid rgba(0, 242, 254, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 242, 254, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: loginFadeIn 0.6s ease-out;
}

@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

/* ==========================================================================
   TWO-PHASE LOGIN  (Phase 1: Video Intro  →  Phase 2: Login Page)
   ========================================================================== */

/* Outer wrapper — fixed fullscreen */
.selector-view {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #020810 !important;
    z-index: 9000;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   PHASE 1 — VIDEO INTRO SCREEN
   ══════════════════════════════════════════════════════════ */

.wl-intro {
    position: absolute;
    inset: 0;
    z-index: 10;
    transition: opacity 0.6s ease;
}

.wl-intro.hiding {
    opacity: 0;
    pointer-events: none;
}

.wl-intro-vid {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Subtle dark vignette around edges */
.wl-intro-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center,
        transparent 35%,
        rgba(2, 8, 16, 0.55) 70%,
        rgba(2, 8, 16, 0.82) 100%);
    pointer-events: none;
}

/* Brand top-left */
.wl-intro-brand {
    position: absolute;
    top: 32px; left: 36px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
}

.wl-intro-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.2));
}

.wl-intro-bsep {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.25);
}

.wl-intro-btag {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* Skip hint top-right */
.wl-intro-hint {
    position: absolute;
    top: 38px; right: 36px;
    z-index: 3;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
    animation: wlHintPulse 3s ease infinite;
}

@keyframes wlHintPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.65; }
}

/* Controls bar — bottom center */
.wl-intro-bar {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(4, 8, 20, 0.72);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 50px;
    padding: 8px 12px;
}

.wl-ib-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.wl-ib-btn:hover {
    background: rgba(255,255,255,0.10);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.22);
}

/* Skip button — special cyan style */
.wl-ib-skip {
    background: linear-gradient(135deg, rgba(0,242,254,0.15), rgba(79,172,254,0.15));
    border-color: rgba(0,242,254,0.35);
    color: var(--color-primary);
    padding-left: 20px;
    padding-right: 20px;
}

.wl-ib-skip:hover {
    background: linear-gradient(135deg, rgba(0,242,254,0.25), rgba(79,172,254,0.25));
    border-color: var(--color-primary);
    color: #fff;
    transform: translateX(2px);
}

/* ══════════════════════════════════════════════════════════
   PHASE 2 — LOGIN PAGE
   ══════════════════════════════════════════════════════════ */

/* ══ PHASE 2 — Login page: bg = welcome page_New.png ══════════ */
.wl-login-page {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* card stays on the RIGHT */
    background-image: url('welcome%20page_New.png');
    background-size: cover;
    background-position: left center;
    transition: opacity 0.6s ease;
    overflow: hidden;
}

.wl-login-page.visible { opacity: 1 !important; }

/* ── Left column — hidden: it's already IN the bg image ── */
.wll-left {
    display: none !important;
}

/* ── RIGHT COLUMN: login card floats over the right side of the bg image ── */
.wll-right {
    width: 38%;
    min-width: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 44px 20px 16px;
    height: 100%;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    /* Subtle dark veil so card is readable against the cityscape bg */
    background: linear-gradient(to right,
        rgba(4, 10, 28, 0) 0%,
        rgba(4, 10, 28, 0.70) 18%,
        rgba(4, 10, 28, 0.82) 100%
    );
}

/* The glassmorphic card */
.wll-card {
    width: 100%;
    max-width: 420px;
    background: rgba(7, 11, 26, 0.80);
    border: 1px solid rgba(0,242,254,0.18);
    border-radius: 22px;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    box-shadow:
        0 28px 70px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 0 50px rgba(0,100,200,0.08);
    padding: clamp(26px, 4vw, 40px) clamp(24px, 3.5vw, 36px);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: wllCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.1s;
}

@keyframes wllCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Shield icon */
.wllc-shield {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: rgba(0,80,180,0.15);
    border: 1px solid rgba(0,180,254,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4facfe;
    margin-bottom: 20px;
    box-shadow: 0 0 28px rgba(0, 120, 254, 0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}

.wllc-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.5px;
    text-align: center;
}

.wllc-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(150,210,255,0.8);
    margin: 0 0 10px;
    text-align: center;
    letter-spacing: 0.3px;
}

.wllc-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.55;
    margin: 0 0 20px;
    max-width: 340px;
}

/* Security note */
.wllc-sec-note {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.6;
    text-align: center;
}

/* ── Shared form styles ──────────────────────────────── */

/* Error banner */
.welcome-login-error {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,23,68,0.28);
    background: rgba(255,23,68,0.08);
    color: var(--color-error);
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
}

.welcome-login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 5;
}

.wlf-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wlf-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.wlf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.wlf-ico {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
    z-index: 7;
}

.wlf-ico-left { left: 14px; }

.wlf-input {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    pointer-events: auto !important;
    position: relative;
    z-index: 6;
    font-family: var(--font-body, inherit);
}

.wlf-input::placeholder { color: rgba(255,255,255,0.2); }

.wlf-input:focus {
    border-color: rgba(0,180,254,0.55);
    box-shadow: 0 0 0 4px rgba(0,180,254,0.08);
    background: rgba(0,180,254,0.04);
}

.wlf-eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7;
    transition: color 0.2s;
}

.wlf-eye-btn:hover { color: var(--text-primary); }

.wlf-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wlf-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.wlf-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.wlf-forgot {
    font-size: 0.78rem;
    color: #4facfe;
    text-decoration: none;
    transition: opacity 0.2s;
}

.wlf-forgot:hover { opacity: 0.8; }

/* Continue to Portal button — solid bright cyan */
.welcome-login-btn {
    height: 52px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    border: none;
    background: linear-gradient(90deg, #00c8ff 0%, #0080ff 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-smooth);
    letter-spacing: 0.3px;
    margin-top: 2px;
    box-shadow: 0 4px 20px rgba(0,128,255,0.3);
}

.welcome-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,150,255,0.45);
    filter: brightness(1.08);
}

.welcome-login-btn:active { transform: translateY(0); }

/* Sign in with SSO button — dark bordered */
.wl-sso-btn {
    height: 50px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.wl-sso-btn:hover {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
    color: var(--text-primary);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 960px) {
    .wll-feat-row { display: none; }
    .wll-character { height: 70%; }
    .wll-fc-trend { display: none; }
    .wll-fc-del   { display: none; }
}

@media (max-width: 760px) {
    .wl-login-page { flex-direction: column; overflow-y: auto; }
    .wll-left  { display: none; }
    .wll-right { width: 100%; max-width: 460px; margin: auto; padding: 24px 20px; }
}

@media (max-width: 480px) {
    .wll-card { padding: 24px 18px; border-radius: 18px; }
    .wllc-title { font-size: 1.5rem; }
}

.selector-container {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selector-cards-grid {
    width: 100%;
}

.selector-card {
    padding: 36px 32px;
    border-radius: 24px;
    background: rgba(13, 19, 39, 0.7);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    box-shadow: var(--shadow-card);
}

.selector-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: var(--color-primary);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 242, 254, 0.15);
}

.selector-card-glow {
    position: absolute;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.05) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    top: -30px;
    right: -30px;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.selector-card:hover .selector-card-glow {
    background: radial-gradient(circle, rgba(0, 242, 254, 0.12) 0%, rgba(0,0,0,0) 70%);
    width: 180px;
    height: 180px;
}

.selector-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: var(--transition-smooth);
}

.selector-card:hover .selector-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 0 15px currentColor;
}

.selector-card-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.selector-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    flex-grow: 1;
}

.selector-goto-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.25);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(0, 242, 254, 0.04);
    transition: var(--transition-smooth);
    margin-top: 10px;
}

.selector-card:hover .selector-goto-btn {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(79, 172, 254, 0.25) 100%);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

.selector-card:hover .selector-goto-btn svg {
    transform: translateX(4px);
}

.selector-goto-btn svg {
    transition: var(--transition-smooth);
}

/* Spinner Loader animation */
.spinner-loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: btnSpin 0.75s linear infinite;
}

@keyframes btnSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-signout:hover {
    background: rgba(255, 23, 68, 0.12) !important;
    border-color: var(--color-error) !important;
    transform: scale(1.02);
}

/* ==========================================================================
   [NEW] Premium SPA Project Settings & Spreadsheet Grid Styles
   ========================================================================== */

/* Full Screen Settings Layout */
.settings-view-container {
    animation: viewFadeIn 0.4s ease-out;
    padding: 10px;
    z-index: 1;
}

.project-settings-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 1100px;
}

.settings-hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(8, 14, 28, 0.48);
    color: var(--text-primary);
    text-align: left;
}

.settings-hub-action {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.settings-hub-action:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 242, 254, 0.36);
    background: rgba(0, 242, 254, 0.07);
}

.settings-hub-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #00b0ff;
    background: rgba(0,176,255,0.08);
    border: 1px solid rgba(0,176,255,0.18);
}

.settings-hub-icon.cyan {
    color: var(--color-primary);
    background: rgba(0,242,254,0.08);
    border-color: rgba(0,242,254,0.18);
}

.settings-hub-card h3 {
    margin: 0 0 5px;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    color: var(--text-primary);
}

.settings-hub-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.site-chatbot {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 12000;
    width: fit-content;   /* prevent accidental full-width stretching */
    height: fit-content;
    pointer-events: none; /* container transparent — children opt-in below */
}
.site-chatbot-toggle,
.site-chatbot-panel,
.site-chatbot-resize {
    pointer-events: auto; /* only the visible pieces capture events */
}

.site-chatbot-toggle {
    position: relative;
    width: 66px;
    height: 66px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 242, 254, 0.34);
    background: #000;
    box-shadow: 0 0 0 5px rgba(0, 242, 254, 0.06), 0 16px 40px rgba(0,0,0,0.5);
    cursor: pointer;
    overflow: visible;
}

.site-chatbot-toggle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.site-chatbot-cog {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #001016;
    box-shadow: 0 0 14px rgba(0,242,254,0.45);
}

.site-chatbot-panel {
    position: absolute;
    right: 0;
    bottom: 78px;
    width: min(380px, calc(100vw - 34px));
    max-height: min(560px, calc(100vh - 120px));
    display: none;
    grid-template-rows: auto minmax(120px, 1fr) auto auto;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(0, 242, 254, 0.2);
    background: linear-gradient(145deg, rgba(7, 10, 18, 0.98), rgba(0, 0, 0, 0.98));
    box-shadow: 0 22px 64px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.04);
}

.site-chatbot.open .site-chatbot-panel {
    display: grid;
}

.site-chatbot-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.site-chatbot-head span {
    display: block;
    color: var(--color-primary);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.site-chatbot-head strong {
    display: block;
    margin-top: 2px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

.site-chatbot-head button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
}

.site-chatbot-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
}

.site-chatbot-message {
    max-width: 88%;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 0.76rem;
    line-height: 1.45;
}

.site-chatbot-message.bot {
    align-self: flex-start;
    background: rgba(0, 242, 254, 0.07);
    border: 1px solid rgba(0, 242, 254, 0.16);
    color: var(--text-secondary);
}

.site-chatbot-message.user {
    align-self: flex-end;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
}

.site-chatbot-quick {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 0 12px 10px;
}

.site-chatbot-quick button {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.18);
    background: rgba(0, 242, 254, 0.05);
    color: var(--color-primary);
    font-size: 0.63rem;
    font-weight: 800;
    cursor: pointer;
}

.site-chatbot-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.site-chatbot-form input {
    flex: 1;
    min-width: 0;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.68);
    color: var(--text-primary);
    padding: 0 10px;
    outline: none;
    font-size: 0.76rem;
}

.site-chatbot-form input:focus {
    border-color: rgba(0, 242, 254, 0.48);
    box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.08);
}

.site-chatbot-form button {
    height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background: rgba(0, 242, 254, 0.08);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 850;
    cursor: pointer;
}

/* Tab Switcher Styling */
.settings-tabs {
    display: flex;
    gap: 8px;
    background: rgba(13, 19, 39, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 6px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.settings-tab {
    flex: 1;
    padding: 12px 20px !important;
    background: none !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    cursor: pointer;
    font-size: 0.85rem !important;
    transition: var(--transition-smooth) !important;
    outline: none;
}

.settings-tab:hover {
    color: var(--text-secondary) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.settings-tab.active {
    color: var(--color-primary) !important;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12) 0%, rgba(79, 172, 254, 0.22) 100%) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15) !important;
    font-weight: 700 !important;
}

.settings-tab-content {
    display: none;
    width: 100%;
}

.settings-tab-content.active {
    display: flex;
    animation: viewFadeIn 0.35s ease-out;
}

/* Spreadsheet-Style Spreadsheet Grid Design */
.table-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.gantt-table.high-density-table {
    border-collapse: collapse;
    width: 100%;
    background: rgba(9, 13, 27, 0.3);
}

.gantt-table.high-density-table th {
    background: rgba(13, 19, 39, 0.95);
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    padding: 12px 10px !important;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-table.high-density-table td {
    padding: 6px 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    height: 42px;
}

.gantt-table.high-density-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Borderless transparent cells inputs */
.gantt-table.high-density-table input,
.gantt-table.high-density-table select {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-primary) !important;
    width: 100%;
    height: 100%;
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    transition: var(--transition-smooth);
    outline: none !important;
}

.gantt-table.high-density-table input:hover,
.gantt-table.high-density-table select:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.gantt-table.high-density-table input:focus,
.gantt-table.high-density-table select:focus {
    background: rgba(10, 14, 28, 0.95) !important;
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
}

/* Custom dropdown style */
.gantt-table.high-density-table select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
    padding-right: 24px !important;
    cursor: pointer;
}

.gantt-table.high-density-table select option {
    background: #0f1326 !important;
    color: var(--text-primary) !important;
    padding: 10px !important;
}

/* Custom date style */
.gantt-table.high-density-table input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8) sepia(100%) hue-rotate(180deg) saturate(3);
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition-smooth);
}

.gantt-table.high-density-table input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Spreadsheet Grid Status Colored Pills matching Image 3 */
.grid-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
    min-width: 80px;
    line-height: 1.4;
}

.grid-status-badge.approved {
    background: rgba(0, 230, 118, 0.08) !important;
    color: #00e676 !important;
    border: 1px solid rgba(0, 230, 118, 0.25) !important;
}

.grid-status-badge.submitted {
    background: rgba(0, 176, 255, 0.08) !important;
    color: #00b0ff !important;
    border: 1px solid rgba(0, 176, 255, 0.25) !important;
}

.grid-status-badge.inprogress {
    background: rgba(255, 179, 0, 0.08) !important;
    color: #ffb300 !important;
    border: 1px solid rgba(255, 179, 0, 0.25) !important;
}

.grid-status-badge.delayed {
    background: rgba(255, 23, 68, 0.08) !important;
    color: #ff1744 !important;
    border: 1px solid rgba(255, 23, 68, 0.25) !important;
}

.grid-status-badge.notstarted {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Spreadsheet Grid Delete Row Button */
.btn-delete-row {
    background: rgba(255, 23, 68, 0.06) !important;
    border: 1px solid rgba(255, 23, 68, 0.15) !important;
    color: var(--color-error) !important;
    padding: 6px !important;
    border-radius: 6px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    width: 28px;
    height: 28px;
}

.btn-delete-row:hover {
    background: rgba(255, 23, 68, 0.15) !important;
    border-color: var(--color-error) !important;
    transform: scale(1.08);
}

/* ==========================================================================
   ADVANCED SIZABLE COLUMNS & DICTIONARY TEXTAREA DESIGN
   ========================================================================== */

.gantt-table.high-density-table th {
    position: relative;
    overflow: visible !important; /* Ensure handles are visible */
}

/* Drag Handles */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    user-select: none;
    background: transparent;
    transition: background-color 0.15s ease;
}

.col-resize-handle:hover,
.col-resize-handle.resizing {
    background-color: var(--color-primary) !important;
    box-shadow: 0 0 8px var(--color-primary);
}

/* Dictionary Modal Textarea Styling on Focus */
#dictionary-modal textarea:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.2) !important;
    background: rgba(10, 14, 28, 0.9) !important;
}

#view-input .qaqc-settings-card {
    padding: 20px !important;
}

#view-input .table-controls-row h2 {
    font-size: 1.05rem !important;
}

#view-input .table-wrapper {
    border-color: rgba(0, 242, 254, 0.12) !important;
    background: rgba(5, 9, 20, 0.56) !important;
}

#view-input .gantt-table.high-density-table th {
    padding: 10px 8px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.55px !important;
}

#view-input .gantt-table.high-density-table td {
    height: 38px !important;
    padding: 5px 7px !important;
}

#view-input .gantt-table.high-density-table input,
#view-input .gantt-table.high-density-table select {
    font-size: 0.72rem !important;
    padding: 5px 7px !important;
}

#view-input .gantt-table.high-density-table select {
    padding-right: 22px !important;
}

#view-input .gantt-table.high-density-table select.grid-status-badge {
    height: 30px !important;
    padding: 4px 10px !important;
    font-size: 0.68rem !important;
}

#view-input #settings-table-search,
#view-input #settings-filter-by,
#view-input #settings-filter-value,
#view-input #btn-add-gantt-row,
#view-input #btn-open-dictionary,
#view-input #btn-reset-gantt-settings {
    height: 36px !important;
    font-size: 0.76rem !important;
}

@media (max-width: 1180px) {
    .input-kpi-strip {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .input-kpi-item:nth-child(3) {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    .input-kpi-strip {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .input-kpi-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 10px 6px;
    }

    .input-kpi-item:last-child {
        border-bottom: 0;
    }
}

/* Scrollable Container Custom Scrollbar */
.table-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   GLOBAL ACCESSIBILITY OVERRIDES: ARIAL FONT & LARGE TEXT/TABLE SIZES
   ========================================================================== */

/* 1. Force Arial Font-Family throughout the Entire Application */
:root {
    --font-heading: 'Arial', sans-serif !important;
    --font-body: 'Arial', sans-serif !important;
}

body, button, input, select, textarea, span, h1, h2, h3, h4, h5, h6, a, p, div, code, pre {
    font-family: 'Arial', sans-serif !important;
}

/* 2. Global Text Size Increases for Perfect Visibility */
#header-main-title {
    font-size: 1.85rem !important; /* Extremely visible main header title */
    font-weight: bold !important;
}

#header-subtitle {
    font-size: 1.05rem !important; /* Highly visible sub-header */
    font-weight: 500 !important;
}

.nav-item span {
    font-size: 1.05rem !important; /* Highly readable sidebar links */
    font-weight: 600 !important;
}

.brand-name {
    font-size: 1.45rem !important;
}

.brand-sub {
    font-size: 0.72rem !important;
}

.meta-val {
    font-size: 1.08rem !important;
    font-weight: bold !important;
}

.meta-label {
    font-size: 0.78rem !important;
    font-weight: bold !important;
}

/* Spacious table overrides removed to restore original elegant high-density table dimensions */

#settings-table-search {
    font-size: 0.95rem !important; /* Larger search query text */
    padding: 10px 12px 10px 38px !important;
    height: 38px !important;
}

#btn-add-gantt-row, #btn-open-dictionary, #btn-reset-gantt-settings {
    font-size: 0.88rem !important; /* Larger button labels */
    height: 38px !important;
    padding: 8px 16px !important;
}

/* 5. Overall compliance cards size increases */
.card-header h2 {
    font-size: 1.35rem !important;
    font-weight: bold !important;
}

.details-item {
    font-size: 0.92rem !important;
}

.metric-info {
    font-size: 0.92rem !important;
}

.metric-info .pct {
    font-size: 0.95rem !important;
}

.stat-num {
    font-size: 1.55rem !important;
    font-weight: bold !important;
}

.stat-lbl {
    font-size: 0.75rem !important;
    font-weight: bold !important;
}

/* 6. Dynamic check items list size increases */
.check-item-name {
    font-size: 1.08rem !important;
    font-weight: bold !important;
}

.check-item-desc {
    font-size: 0.9rem !important;
}

.filter-tab {
    font-size: 0.9rem !important;
    height: 38px !important;
}

/* 7. Setup Dictionary Input scaling */
#dictionary-modal label {
    font-size: 0.9rem !important; /* Larger modal labels */
    font-weight: bold !important;
    color: var(--color-primary) !important;
}

#dictionary-modal textarea {
    font-size: 0.95rem !important; /* Highly visible text inside editors */
    font-weight: 600 !important;
}

/* Highly specific status badge styling for select dropdowns to match Image 3 */
.gantt-table.high-density-table select.grid-status-badge {
    height: 38px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-align-last: center !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    background-image: none !important; /* Remove dropdown arrow to look exactly like standard badge */
    padding-right: 14px !important; /* Reset padding since arrow is gone */
    transition: var(--transition-smooth);
}

.gantt-table.high-density-table select.grid-status-badge.approved {
    background: rgba(0, 230, 118, 0.08) !important;
    color: #00e676 !important;
    border: 1px solid rgba(0, 230, 118, 0.25) !important;
}

.gantt-table.high-density-table select.grid-status-badge.submitted {
    background: rgba(0, 176, 255, 0.08) !important;
    color: #00b0ff !important;
    border: 1px solid rgba(0, 176, 255, 0.25) !important;
}

.gantt-table.high-density-table select.grid-status-badge.inprogress {
    background: rgba(255, 179, 0, 0.08) !important;
    color: #ffb300 !important;
    border: 1px solid rgba(255, 179, 0, 0.25) !important;
}

.gantt-table.high-density-table select.grid-status-badge.delayed {
    background: rgba(255, 23, 68, 0.08) !important;
    color: #ff1744 !important;
    border: 1px solid rgba(255, 23, 68, 0.25) !important;
}

.gantt-table.high-density-table select.grid-status-badge.notstarted {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.gantt-table.high-density-table select.grid-status-badge:focus {
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.3) !important;
    border-color: var(--border-focus) !important;
}

/* Compact professional scale for BIM deliverables workspace */
.main-content {
    padding: 18px !important;
}

.dashboard-header {
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
}

#header-main-title {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
}

#header-subtitle {
    font-size: 0.86rem !important;
}

.meta-item {
    min-width: 118px !important;
    padding: 7px 12px !important;
}

.meta-label {
    font-size: 0.62rem !important;
}

.meta-val {
    font-size: 0.82rem !important;
}

.sidebar {
    width: 230px !important;
    min-width: 230px !important;
    padding: 18px 12px !important;
}

.sidebar-logo-img {
    width: 124px !important;
}

.sidebar-nav {
    gap: 5px !important;
}

.nav-item {
    padding: 9px 12px !important;
    border-radius: 9px !important;
}

.nav-item span {
    font-size: 0.82rem !important;
}

.input-kpi-strip {
    padding: 13px 16px !important;
    border-radius: 9px !important;
}

.input-kpi-item {
    appearance: none;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    min-height: 42px !important;
    padding: 0 18px !important;
    text-align: left;
}

.input-kpi-item:hover {
    background: rgba(255, 255, 255, 0.018);
    color: var(--kpi-color, var(--text-primary));
}

.input-kpi-item.active {
    background: transparent;
    box-shadow: none;
}

.input-kpi-item.active .input-kpi-label,
.input-kpi-item.active strong {
    color: var(--kpi-color, var(--color-primary));
}

.input-kpi-item.active .input-kpi-icon {
    transform: translateY(-1px);
    color: var(--kpi-color, var(--color-primary));
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.28));
}

.input-kpi-icon {
    width: 28px !important;
    height: 28px !important;
}

.input-kpi-label {
    font-size: 0.58rem !important;
}

.input-kpi-item strong {
    font-size: 1.25rem !important;
}

#view-input .qaqc-settings-card {
    padding: 16px !important;
    gap: 12px !important;
}

#view-input .table-controls-row {
    padding-bottom: 12px !important;
}

#view-input .table-controls-row h2 {
    font-size: 0.96rem !important;
}

#view-input .gantt-table.high-density-table th {
    padding: 8px 8px !important;
    font-size: 0.6rem !important;
}

#view-input .gantt-table.high-density-table td {
    height: 32px !important;
    padding: 3px 6px !important;
}

#view-input .gantt-table.high-density-table input,
#view-input .gantt-table.high-density-table select {
    font-size: 0.66rem !important;
    padding: 4px 6px !important;
}

#view-input .gantt-table.high-density-table select.grid-status-badge,
.gantt-table.high-density-table select.grid-status-badge {
    height: 25px !important;
    padding: 3px 8px !important;
    font-size: 0.62rem !important;
}

#view-input #settings-table-search,
#view-input #settings-filter-by,
#view-input #settings-filter-value,
#view-input #btn-add-gantt-row,
#view-input #btn-open-dictionary,
#view-input #btn-reset-gantt-settings {
    height: 32px !important;
    font-size: 0.68rem !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.status-color-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.status-color-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
}

.status-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    box-shadow: 0 0 8px currentColor;
}

.status-color-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-color-row input[type="color"] {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

.gantt-table.high-density-table select.grid-status-badge,
.grid-status-badge {
    color: var(--status-color, #94a3b8) !important;
    background: var(--status-bg, rgba(255, 255, 255, 0.03)) !important;
    border-color: var(--status-border, rgba(255, 255, 255, 0.08)) !important;
}


.delivery-timeline-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    width: 100%;
}

.delivery-kpi-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 9px;
    background: rgba(9, 13, 27, 0.38);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.delivery-kpi-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--kpi-color, var(--color-primary));
    box-shadow: 0 0 10px var(--kpi-color, var(--color-primary));
    flex: 0 0 auto;
}

.delivery-kpi-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.delivery-kpi-value {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
}

.delivery-gantt-row {
    display: flex;
    min-height: 46px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.delivery-gantt-row:hover {
    background: rgba(255, 255, 255, 0.018);
}

.delivery-gantt-label {
    width: 280px;
    min-width: 280px;
    padding: 8px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.075);
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 8px;
    align-items: center;
    background: rgba(4, 8, 18, 0.42);
}

.delivery-gantt-code {
    color: var(--color-primary);
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.delivery-gantt-name {
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-gantt-meta {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-gantt-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 720px;
    overflow: hidden;
}

.delivery-gantt-grid {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    z-index: 1;
}

.delivery-gantt-grid-month {
    border-right: 1px solid rgba(255, 255, 255, 0.055);
}

.delivery-gantt-baseline {
    position: absolute;
    top: 20px;
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    z-index: 2;
}

.delivery-gantt-bar {
    position: absolute;
    top: 16px;
    height: 13px;
    border-radius: 999px;
    background: var(--bar-color, var(--color-primary));
    box-shadow: 0 0 12px color-mix(in srgb, var(--bar-color, #00f2fe) 55%, transparent);
    z-index: 3;
}

.delivery-gantt-actual {
    position: absolute;
    top: 11px;
    width: 3px;
    height: 24px;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
    z-index: 4;
}

.delivery-gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed var(--color-primary);
    filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.75));
    z-index: 5;
    pointer-events: none;
}

.delivery-gantt-tooltip {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    min-width: 230px;
    max-width: 280px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 242, 254, 0.22);
    border-radius: 8px;
    background: rgba(6, 10, 22, 0.96);
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.45;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
    z-index: 8;
}

.delivery-gantt-bar:hover .delivery-gantt-tooltip {
    opacity: 1;
}

.delivery-gantt-empty {
    padding: 28px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* Premium Chevron Hexagonal Timeline Bars matching the user screenshot! */
.gantt-bar-actual {
    position: absolute;
    height: 28px !important;
    border-radius: 0 !important; /* Clipped elements do not need border-radius */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
    transition: var(--transition-smooth);
    z-index: 3;
    top: 18px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%) !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    border: none !important;
}

/* Hide planned timeline outlines to look clean and neat, matching screenshot */
.gantt-bar-planned {
    display: none !important;
}

/* Premium hover micro-animation scale */
.gantt-bar-actual:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.2) !important;
    z-index: 4 !important;
}

/* Vibrant solid colors from the screenshot legend:
   Submitted: Green, In Progress: Blue, Upcoming: Yellow/Orange, Delayed: Red */
.gantt-bar-actual.approved,
.gantt-bar-actual.submitted {
    background: #00b060 !important; /* Solid vibrant modon green */
    box-shadow: 0 0 12px rgba(0, 176, 96, 0.3) !important;
}

.gantt-bar-actual.inprogress {
    background: #007bff !important; /* Solid vibrant modon blue */
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.3) !important;
}

.gantt-bar-actual.upcoming,
.gantt-bar-actual.notstarted {
    background: #e4a100 !important; /* Solid vibrant orange/yellow */
    box-shadow: 0 0 12px rgba(228, 161, 0, 0.3) !important;
}

.gantt-bar-actual.delayed {
    background: #ff1744 !important; /* Solid vibrant modon red */
    box-shadow: 0 0 12px rgba(255, 23, 68, 0.35) !important;
}

/* Premium Milestone Diamond styling */
.gantt-milestone-diamond {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #94a3b8 !important; /* Slate grey silver */
    transform: translate(-50%, -50%) rotate(45deg);
    top: 32px !important; /* Perfectly centered relative to 28px bar */
    z-index: 5;
    border: 2px solid #0c0f24 !important;
    box-shadow: 0 0 8px rgba(148, 163, 184, 0.6) !important;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.gantt-milestone-diamond:hover {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.4) !important;
    background: #ffffff !important;
    box-shadow: 0 0 12px #ffffff !important;
}

/* ==========================================================================
   QAQC Audit Threshold Cards - Premium Glassmorphism & Micro-animations
   ========================================================================== */
.threshold-card {
    background: rgba(13, 19, 39, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-card);
}

.threshold-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50%);
    opacity: 0;
    transition: var(--transition-smooth);
    pointer-events: none;
    z-index: 1;
}

.threshold-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 242, 254, 0.25);
    background: rgba(19, 27, 54, 0.6);
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 242, 254, 0.03);
}

.threshold-card:hover::before {
    opacity: 1;
}

.threshold-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.threshold-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.threshold-card:hover .threshold-card-icon {
    transform: scale(1.08);
}

.threshold-card-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.threshold-card-code {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.75;
    text-transform: uppercase;
}

.threshold-card-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.threshold-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    z-index: 2;
    flex-grow: 1;
}

.threshold-card-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}

.threshold-card-input-row label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
}

.threshold-card-input {
    width: 110px;
    padding: 6px 10px;
    font-size: 0.84rem;
    font-family: var(--font-body);
    font-weight: 700;
    text-align: right;
    border-radius: 6px;
    background: rgba(10, 14, 28, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.threshold-card-input:focus {
    border-color: var(--border-focus);
    background: rgba(10, 14, 28, 0.8);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
    outline: none;
}

/* ==========================================================================
   SIDEBAR RESIZER & DELAY HISTORY TREE VIEW
   ========================================================================== */

/* Sidebar Drag Resizer */
.sidebar-resizer {
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: rgba(255, 255, 255, 0.03);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s, box-shadow 0.2s;
    z-index: 100;
    position: relative;
    flex-shrink: 0;
}
.sidebar-resizer:hover, .sidebar-resizer.resizing {
    background: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
}
.sidebar.collapsed + .sidebar-resizer {
    pointer-events: none;
    opacity: 0;
}

/* History Tree Toggles */
.btn-toggle-history {
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-toggle-history:hover {
    color: #ffffff;
    filter: drop-shadow(0 0 4px var(--color-primary));
}
.btn-toggle-history.expanded {
    color: var(--color-warning);
    filter: drop-shadow(0 0 4px var(--color-warning));
}

.history-row {
    transition: all 0.3s ease;
}
.history-row td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   NEW HIGH-FIDELITY GANTT TIMELINE VIEW
   ========================================================================= */

.timeline-row {
    display: flex;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.2s ease;
    align-items: stretch;
}

.timeline-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.timeline-row:last-child {
    border-bottom: none;
}

.timeline-label-code {
    width: 80px;
    min-width: 80px;
    padding: 16px 10px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    background: rgba(10, 14, 30, 0.2);
}

.timeline-label-name {
    width: 180px;
    min-width: 180px;
    padding: 16px 16px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
    background: rgba(10, 14, 30, 0.1);
}

.timeline-track-wrapper {
    flex-grow: 1;
    position: relative;
    height: 64px;
    box-sizing: border-box;
}

.timeline-wire {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 2;
}

/* Milestone Node Wrapper */
.timeline-milestone-node {
    position: absolute;
    top: 50%;
    transform: translate(-100%, -50%);
    display: flex;
    align-items: center;
    margin-left: 5px; /* offset half the diamond width */
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-milestone-node:hover {
    z-index: 30;
}

.timeline-milestone-node:hover .milestone-diamond {
    transform: rotate(45deg) scale(1.35);
    background: #ffffff !important;
    box-shadow: 0 0 12px #ffffff !important;
}

.timeline-milestone-node:hover .timeline-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 10px);
}

.milestone-diamond {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 2.5px solid #060814;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Premium Absolute-Positioned CSS Tooltip displaying BELOW the milestone node to prevent top cut-off */
.timeline-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(8, 12, 28, 0.96);
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    width: 250px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    white-space: normal;
    z-index: 99;
}

.timeline-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgba(8, 12, 28, 0.96) transparent;
}

/* Tooltip flipped ABOVE the diamond when near bottom of chart */
.timeline-milestone-node.tooltip-above .timeline-tooltip {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 0);
}
.timeline-milestone-node.tooltip-above:hover .timeline-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -10px);
}
.timeline-milestone-node.tooltip-above .timeline-tooltip::after {
    bottom: auto;
    top: 100%;
    border-color: rgba(8, 12, 28, 0.96) transparent transparent transparent;
}

.tooltip-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.tooltip-row:last-child {
    margin-bottom: 0;
}

.tooltip-lbl {
    color: var(--text-muted);
    font-weight: 600;
}

.tooltip-val {
    color: var(--text-secondary);
    font-weight: 700;
}

.tooltip-val.approved, .tooltip-val.submitted {
    color: #00b060;
}
.tooltip-val.inprogress {
    color: #007bff;
}
.tooltip-val.upcoming {
    color: #e4a100;
}
.tooltip-val.delayed {
    color: #ff1744;
}

/* Final MODON black-theme polish and page-height trim */
html,
body {
    background: #000 !important;
}

body::before,
body::after,
.bg-glow,
.bg-glow-1,
.bg-glow-2,
.bg-glow-3 {
    display: none !important;
}

.app-layout,
.main-content,
.views-wrapper,
.dashboard-view {
    background: #000 !important;
}

.app-layout {
    min-height: 100dvh !important;
    height: auto !important;
    align-items: flex-start;
}

.sidebar {
    background: #03040a !important;
    min-height: 100dvh !important;
}

.main-content {
    min-height: 0 !important;
    padding-bottom: 18px !important;
}

.views-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.dashboard-view,
.gantt-view-container,
.qaqc-workspace-shell,
.stage-dashboard-shell {
    min-height: 0 !important;
}

.dashboard-card,
.qaqc-settings-card,
.qaqc-workspace-shell,
.stage-dashboard-shell,
.deliverable-stage-card,
.dp-program-card,
.qaqc-dp-card,
.qaqc-ldc-card,
.gantt-kpi-card,
.input-kpi-strip {
    background:
        linear-gradient(145deg, rgba(7, 10, 18, 0.96), rgba(0, 0, 0, 0.98)) !important;
    border-color: rgba(0, 242, 254, 0.16) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#view-input .table-wrapper,
.gantt-table.high-density-table,
.grid-input,
.grid-select,
.qaqc-check-list,
.qaqc-check-row,
.qaqc-model-info,
.qaqc-submission-card,
.qaqc-submission-editor {
    background-color: rgba(0, 0, 0, 0.72) !important;
}

.selector-view {
    background-color: #000 !important;
}

/* Keep the compact black layout readable without clipping controls */
.app-layout {
    overflow-x: hidden !important;
    width: 100% !important;
}

.main-content {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: hidden !important;
}

.sidebar.collapsed ~ .main-content {
    max-width: none !important;
}

.dashboard-header {
    gap: 16px !important;
    align-items: flex-start !important;
}

.header-left {
    min-width: 0 !important;
    flex: 1 1 520px !important;
}

.header-titles {
    min-width: 0 !important;
}

.header-titles h1,
.header-titles .subtitle {
    overflow-wrap: anywhere !important;
}

.header-right.top-action-bar {
    min-width: 320px !important;
    flex: 1 1 900px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 12px 16px !important;
    align-items: flex-end !important;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: flex-end;
    gap: 10px 12px;
    min-width: 0;
}

.toolbar-left {
    flex: 1 1 520px;
    flex-wrap: wrap;
    justify-content: flex-end;
    order: 1;
}

.toolbar-right {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    order: 2;
}

.header-upload-group {
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 10px 12px !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
}

.toolbar-control-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
}

#header-qaqc-uploads {
    gap: 10px !important;
}

#header-qaqc-uploads > div,
#header-acc-uploads,
#header-clash-uploads,
#header-loin-uploads {
    min-height: 34px;
}

.header-action-btn {
    height: 34px !important;
    min-height: 34px !important;
    max-width: 220px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.top-action-bar .upload-status {
    display: none !important;
    max-width: 220px;
    min-height: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#qaqc-status-msg,
#upload-status-msg,
#clash-upload-status-msg,
#acc-upload-status-msg {
    font-size: 0.58rem !important;
}

.header-clash-group,
.header-acc-group,
.header-loin-group {
    flex: 0 1 auto;
}

.hdr-clash-filter,
.hdr-loin-filter,
.hdr-acc-filter,
.hdr-qaqc-filter {
    /* Width follows the selected file name (grows leftward into the empty
       space, capped) instead of a fixed box, so a long name never overlaps
       the upload button. */
    flex: 0 1 auto;
    min-width: 178px;
    max-width: 460px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
}

.hdr-clash-filter select,
.hdr-loin-filter select,
.hdr-acc-filter select,
.hdr-qaqc-filter select {
    height: 34px;
    min-height: 34px;
}

#clash-upload-status-msg,
#acc-upload-status-msg {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#btn-reset-clash-header,
#btn-clear-loin-files,
#btn-reset-acc-review-header,
#btn-reset-model-health {
    min-height: 34px;
    height: 34px;
}

.meta-item {
    min-width: 150px !important;
    max-width: 260px !important;
    min-height: 48px !important;
}

.meta-val {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.28 !important;
}

.sidebar-header {
    min-height: 54px !important;
}

.sidebar-logo-img {
    width: 122px !important;
    max-height: 46px !important;
    object-fit: contain !important;
}

#view-input .qaqc-settings-card,
#view-input .table-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
}

#view-input .table-controls-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 0 !important;
}

#view-input .table-controls-row > div {
    min-width: 0 !important;
}

#view-input .table-controls-row > div:last-child {
    flex: 1 1 520px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    align-content: center !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    height: 36px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
}

#view-input .select-group,
#view-input .select-wrapper {
    flex: 0 0 auto !important;
    align-items: center !important;
    align-self: center !important;
    min-height: 0 !important;
    height: auto !important;
}

#view-input #settings-table-search {
    flex: 0 0 260px !important;
    min-width: 180px !important;
    max-width: 360px !important;
}

#view-input #settings-filter-by,
#view-input #settings-filter-value {
    flex: 0 0 auto !important;
    width: 190px !important;
    min-width: 160px !important;
    max-width: 220px !important;
    height: 32px !important;
}

#view-input #btn-add-gantt-row {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Reliable sidebar collapse and resize behavior */
.sidebar.collapsed {
    width: 78px !important;
    min-width: 78px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.sidebar.collapsed .sidebar-logo-img {
    width: 42px !important;
    max-height: 42px !important;
}

.sidebar.collapsed .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-chevron,
.sidebar.collapsed .design-package-subnav,
.sidebar.collapsed .sidebar-footer {
    display: none !important;
}

.sidebar-resizer {
    width: 6px !important;
    background: rgba(0, 242, 254, 0.08) !important;
}

.sidebar:not(.collapsed) + .sidebar-resizer {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sort-glyph {
    color: var(--text-muted);
    font-size: 0.62rem;
    margin-left: 4px;
}

/* ── Chatbot drag / resize ─────────────────────────────── */
.site-chatbot-drag-hint {
    color: var(--text-muted);
    opacity: 0.55;
    cursor: grab;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    transition: opacity 0.2s;
}
.site-chatbot-drag-hint:hover { opacity: 0.95; }
#site-chatbot-head { cursor: move; user-select: none; }
#site-chatbot-head button { cursor: pointer; }

.site-chatbot-resize {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 3px;
    color: var(--color-primary);
    opacity: 0.3;
    transition: opacity 0.2s;
    z-index: 3;
}
.site-chatbot-resize:hover { opacity: 0.85; }

/* ── Clash custom tooltip ──────────────────────────────── */
.clash-tip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: rgba(4, 8, 18, 0.97);
    border: 1px solid rgba(0, 242, 254, 0.28);
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.6;
    box-shadow: 0 10px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    max-width: 240px;
    display: none;
    white-space: nowrap;
}
.clash-tip.visible { display: block; }
.clash-tip-title {
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 0.74rem;
    font-family: var(--font-heading);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 4px;
}
.clash-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.clash-tip-label { color: var(--text-muted); }

/* ==========================================================================
   GROUP BY DESIGN PACKAGE — Tree-style group rows
   ========================================================================== */

.dp-group-row td {
    background: rgba(0, 242, 254, 0.04) !important;
    border-bottom: 1px solid rgba(0, 242, 254, 0.12) !important;
    border-top: 1px solid rgba(0, 242, 254, 0.12) !important;
    cursor: pointer;
    user-select: none;
}
.dp-group-row:hover td {
    background: rgba(0, 242, 254, 0.08) !important;
}

.dp-group-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.btn-toggle-dp-group {
    background: none;
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 4px;
    padding: 3px 5px;
    cursor: pointer;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.btn-toggle-dp-group:hover { background: rgba(0,242,254,0.1); }

.dp-group-code {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(0,242,254,0.3);
}
.dp-group-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.dp-group-count {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.dp-group-status-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 4px;
}
.dp-status-pill {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    letter-spacing: 0.3px;
}
.dp-status-pill.approved    { color: #00e676; border-color: rgba(0,230,118,0.3); background: rgba(0,230,118,0.08); }
.dp-status-pill.submitted   { color: #00b0ff; border-color: rgba(0,176,255,0.3); background: rgba(0,176,255,0.08); }
.dp-status-pill.inprogress  { color: #ffb300; border-color: rgba(255,179,0,0.3);  background: rgba(255,179,0,0.08); }
.dp-status-pill.delayed     { color: #ff1744; border-color: rgba(255,23,68,0.3);  background: rgba(255,23,68,0.08); }
.dp-status-pill.notstarted  { color: #64748b; border-color: rgba(100,116,139,0.3);background: rgba(100,116,139,0.06); }

/* Indentation for rows inside a group */
.gantt-table.high-density-table tbody tr.dp-child-row td:nth-child(1) {
    padding-left: 22px !important;
}

/* Group-by button active state */
#btn-group-by-dp.active {
    color: var(--color-primary) !important;
    border-color: rgba(0, 242, 254, 0.5) !important;
    background: rgba(0, 242, 254, 0.08) !important;
    box-shadow: 0 0 10px rgba(0,242,254,0.12);
}

/* ==========================================================================
   COLUMN VISIBILITY — Settings gear & dropdown
   ========================================================================== */

#btn-col-visibility:hover {
    color: var(--color-primary) !important;
    border-color: rgba(0,242,254,0.4) !important;
    background: rgba(0,242,254,0.06) !important;
}
#btn-col-visibility.active {
    color: var(--color-primary) !important;
    border-color: rgba(0,242,254,0.5) !important;
    background: rgba(0,242,254,0.1) !important;
}

.col-vis-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.col-vis-item:hover { background: rgba(255,255,255,0.05); }
.col-vis-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.col-vis-item.col-hidden-item .col-vis-label { opacity: 0.4; text-decoration: line-through; }

/* Hidden table column */
.gantt-col-hidden { display: none !important; }

/* ==========================================================================
   VOICE MIC BUTTON — inside chatbot form
   ========================================================================== */

.chatbot-voice-btn {
    height: 34px;
    width: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.chatbot-voice-btn:hover {
    color: var(--color-primary);
    border-color: rgba(0,242,254,0.35);
    background: rgba(0,242,254,0.07);
}
.chatbot-voice-btn.recording {
    color: #ff1744;
    border-color: rgba(255,23,68,0.5);
    background: rgba(255,23,68,0.1);
    animation: voicePulse 1s infinite;
}
@keyframes voicePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,23,68,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(255,23,68,0); }
}
.clash-tip-val   { font-weight: 700; }

/* ==========================================================================
   LOIN DASHBOARD
   ========================================================================== */

.loin-dashboard {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.loin-toolbar,
.loin-upload-card,
.loin-panel,
.loin-kpi-card {
    border: 1px solid rgba(0, 242, 254, 0.14);
    background: linear-gradient(145deg, rgba(3, 6, 12, 0.96), rgba(8, 12, 24, 0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 44px rgba(0,0,0,0.28);
}

.loin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 12px;
}

.loin-toolbar h3 {
    margin: 4px 0 3px;
    color: var(--text-primary);
    font-size: 1.25rem;
    letter-spacing: 0;
}

.loin-toolbar p,
.loin-upload-card span,
.loin-upload-card em {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.loin-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.loin-file-filter {
    display: grid;
    gap: 5px;
    min-width: min(320px, 100%);
}

.loin-file-filter span {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.loin-file-filter select {
    min-height: 36px;
    max-width: 360px;
    border-radius: 8px;
    border: 1px solid rgba(0,242,254,0.2);
    background: rgba(3, 7, 16, 0.92);
    color: var(--text-secondary);
    padding: 0 10px;
    font-size: 0.76rem;
    font-weight: 800;
    outline: none;
}

.loin-file-filter select:focus {
    border-color: rgba(0,242,254,0.48);
    box-shadow: 0 0 0 3px rgba(0,242,254,0.06);
}

/* ── Header LOIN controls (compact version) ─────────────────────────── */
.hdr-loin-filter {
    gap: 2px;
    min-width: unset;
}
.hdr-loin-filter select {
    min-height: 30px;
    font-size: 0.72rem;
    padding: 0 8px;
    max-width: 240px;
}

.top-action-bar .hdr-qaqc-filter,
.top-action-bar .hdr-loin-filter,
.top-action-bar .hdr-clash-filter,
.top-action-bar .hdr-acc-filter {
    flex: 0 1 auto !important;
    min-width: 178px !important;
    max-width: 460px !important;
    /* dropdown sits leftmost so it grows left into empty space while the
       upload button + Reset stay anchored on the right */
    order: -1 !important;
}

.top-action-bar .hdr-qaqc-filter {
    flex: 0 0 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
}

.top-action-bar .hdr-qaqc-filter select,
.top-action-bar .hdr-loin-filter select,
.top-action-bar .hdr-clash-filter select,
.top-action-bar .hdr-acc-filter select {
    height: 34px !important;
    min-height: 34px !important;
    width: 100% !important;
    max-width: 100% !important;
    /* keep the selected name inside the box — never spill over the button */
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.btn-sm-pill {
    padding: 5px 14px;
    font-size: 0.75rem;
    height: 30px;
    border-radius: 8px;
    white-space: nowrap;
}

.loin-upload-card {
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.loin-upload-card div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.loin-upload-card strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.loin-upload-card em {
    font-style: normal;
    text-align: right;
    max-width: 360px;
}

.loin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(135px, 1fr));
    gap: 0;
    border: 1px solid rgba(0, 242, 254, 0.14);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(3, 6, 12, 0.96), rgba(8, 12, 24, 0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 44px rgba(0,0,0,0.28);
}

.loin-kpi-card {
    min-height: 76px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow: hidden;
}

.loin-kpi-card:last-child {
    border-right: 0;
}

.loin-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--color-primary);
    background: rgba(0,242,254,0.075);
    border: 1px solid rgba(0,242,254,0.12);
}

.loin-kpi-card.green .loin-kpi-icon {
    color: #00e676;
    background: rgba(0,230,118,0.075);
    border-color: rgba(0,230,118,0.14);
}

.loin-kpi-card.red .loin-kpi-icon {
    color: #ff4757;
    background: rgba(255,71,87,0.075);
    border-color: rgba(255,71,87,0.16);
}

.loin-kpi-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.loin-kpi-card small,
.loin-panel-head span {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.loin-kpi-card strong {
    color: var(--color-primary);
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    line-height: 1;
}

.loin-kpi-card.green strong {
    color: #00e676;
}

.loin-kpi-card.red strong {
    color: #ff4757;
}

.loin-main-grid {
    display: grid;
    grid-template-columns: minmax(155px, 0.38fr) minmax(200px, 0.48fr) 1fr;
    grid-template-rows: 560px;
    gap: 12px;
    align-items: stretch;
}
/* Force all direct section children to fill their grid cell height */
.loin-main-grid > section {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.loin-mid-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.48fr) 1fr;
    gap: 12px;
    align-items: stretch;
}

.loin-panel {
    border-radius: 12px;
    padding: 14px;
    min-width: 0;
}

.loin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.loin-overall .loin-panel-head {
    justify-content: flex-start;
}

.loin-panel-head h4 {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Wrapper inside Overall Compliance that vertically centers gauge + below text */
.loin-overall-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.loin-gauge {
    min-height: 0;
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
}

.loin-gauge svg {
    width: min(200px, 90%);
    transform: rotate(-90deg);
}

/* Numbers + label below the Overall gauge circle */
.loin-gauge-below {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.loin-gauge-below small {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.3px;
}
.loin-gauge-below em {
    color: var(--text-muted);
    font-size: 0.63rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.loin-gauge circle {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}

.loin-gauge .track {
    stroke: rgba(148, 163, 184, 0.14);
}

.loin-gauge .fill {
    stroke: var(--color-primary);
    stroke-dasharray: 251.2;
    filter: drop-shadow(0 0 8px rgba(0,242,254,0.45));
}

.loin-gauge-center {
    position: absolute;
    display: grid;
    place-items: center;
    gap: 4px;
}

.loin-gauge strong {
    color: var(--text-primary);
    font-size: 2rem;
    line-height: 1;
}

.loin-gauge span {
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

.loin-building-grid,
.loin-discipline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow: auto;
    padding-right: 2px;
}

.loin-mini-card {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.loin-mini-card strong {
    color: #8bdfff;
    font-size: 0.9rem;
}

.loin-mini-card b {
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.loin-mini-card div {
    height: 5px;
    border-radius: 999px;
    background: rgba(148,163,184,0.14);
    overflow: hidden;
}

.loin-mini-card i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), #22d3ee);
}

.loin-mini-card span {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.loin-level-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 0.66rem;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,0.1);
}

.loin-level-badge.excellent,
.loin-level-badge.good {
    color: #00e676;
    background: rgba(0,230,118,0.09);
    border-color: rgba(0,230,118,0.22);
}

.loin-level-badge.low {
    color: #ff5f6d;
    background: rgba(255,95,109,0.09);
    border-color: rgba(255,95,109,0.24);
}

.loin-level-badge.very-low {
    color: #ff6b6b;
    background: rgba(255,71,87,0.11);
    border-color: rgba(255,71,87,0.28);
}

.loin-discipline-card dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.loin-discipline-card dt,
.loin-discipline-card dd {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
}

.loin-discipline-card dt {
    color: var(--text-muted);
}

.loin-discipline-card dd {
    color: var(--text-primary);
}

.loin-discipline-card dd.filled {
    color: #00e676;
}

.loin-discipline-card dd.empty {
    color: #ff5f6d;
}

.loin-category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow: auto;
}

.loin-category-list div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    border-radius: 9px;
    padding: 10px 11px;
}

.loin-category-list span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loin-category-list strong {
    color: #ff5f6d;
    font-size: 0.82rem;
}

.loin-lower-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
}

.loin-discipline-chart-panel {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.loin-chart-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -2px 0 10px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.loin-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.loin-chart-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.loin-chart-legend .filled {
    background: var(--color-primary);
}

.loin-chart-legend .empty {
    background: #ff4757;
}

.loin-column-chart {
    min-height: 255px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    gap: 8px;
    align-items: end;
    padding: 14px 8px 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background:
        linear-gradient(to top, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 100% 25%,
        transparent;
}

.loin-column-item {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.loin-column-stack {
    width: min(38px, 100%);
    height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 7px 7px 4px 4px;
    background: rgba(148,163,184,0.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.loin-column-stack span {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 8px;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.loin-column-stack span.empty {
    background: linear-gradient(180deg, #ff5252, #d82f3a);
}

.loin-column-stack span.filled {
    background: linear-gradient(180deg, #23d7d2, #0ea7aa);
}

.loin-column-stack b {
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.loin-column-item strong {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
}

.loin-chart-note {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* ── Full-width table below chart ─────────────────────────────────── */
.loin-full-table {
    padding: 0;
    overflow: hidden;
}
.loin-full-table .loin-panel-head {
    padding: 14px 16px 0;
}

/* ── Mini circular gauge (buildings + disciplines) ─────────────────── */
.loin-mini-gauge-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.loin-mini-gauge-svg {
    width: 56px;
    height: 56px;
}
.lmg-track {
    fill: none;
    stroke: rgba(148,163,184,0.12);
    stroke-width: 7;
}
.lmg-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 7;
    stroke-linecap: round;
}
.loin-mini-gauge-center {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loin-mini-gauge-center strong {
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
}
.loin-mini-gauge-center svg {
    /* discipline icons rendered inside gauge center */
    width: 18px;
    height: 18px;
}

/* ── Building cards ────────────────────────────────────────────────── */
.loin-bldg-scroll {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 2px;
}
.loin-bldg-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 7px 10px;
    transition: background 0.15s;
}
.loin-bldg-card:hover {
    background: rgba(255,255,255,0.06);
}
.loin-bldg-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.loin-bldg-card-info svg {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-bottom: 1px;
}
.loin-bldg-card-info b {
    color: #8bdfff;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loin-bldg-card-info small {
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 700;
}

/* ── Discipline cards v2 (gauge + icon + stats) ─────────────────────── */
.loin-disc-cards-scroll {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 2px;
}
.loin-disc-card-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 7px 10px;
    transition: background 0.15s;
}
.loin-disc-card-v2:hover {
    background: rgba(255,255,255,0.06);
}
.loin-disc-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.loin-disc-code-label {
    color: #8bdfff;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
}
.loin-disc-pct-label {
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.loin-disc-stats-dl {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr;
    gap: 1px 6px;
    margin: 4px 0 0;
    padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.loin-disc-stats-dl dt {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}
.loin-disc-stats-dl dd {
    color: var(--text-primary);
    font-size: 0.65rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.4;
}
.loin-disc-stats-dl dd.filled { color: #00e676; }
.loin-disc-stats-dl dd.empty  { color: #ff5f6d; }

/* ── Top 10 Empty Categories ────────────────────────────────────────── */
.loin-top10-panel {
    display: flex;
    flex-direction: column;
}
.loin-top10-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 2px;
    flex: 1;
}
.loin-top10-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 6px 9px;
}
.loin-top10-rank {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,71,87,0.14);
    border: 1px solid rgba(255,71,87,0.28);
    color: #ff5f6d;
    font-size: 0.62rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.loin-top10-cat-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.loin-top10-name {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.71rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.loin-top10-count {
    color: #ff5f6d;
    font-size: 0.76rem;
    font-weight: 900;
    flex-shrink: 0;
}
.loin-view-all-btn {
    margin-top: 10px;
    width: 100%;
    padding: 7px 12px;
    background: rgba(0,242,254,0.05);
    border: 1px solid rgba(0,242,254,0.18);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-align: center;
}
.loin-view-all-btn:hover {
    background: rgba(0,242,254,0.11);
    border-color: rgba(0,242,254,0.32);
}

/* ═══════════════════════════════════════════════════════════════════════
   Building Compliance cards (v2) — icon+info LEFT, large gauge RIGHT
   ════════════════════════════════════════════════════════════════════ */
.loin-bldg-v2-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.loin-bldg-v2-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}
.loin-bldg-v2-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: background 0.15s;
}
.loin-bldg-v2-card:hover { background: rgba(255,255,255,0.07); }
.loin-bldg-v2-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.loin-bldg-v2-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(0,242,254,0.07);
    border: 1px solid rgba(0,242,254,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}
.loin-bldg-v2-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.loin-bldg-v2-text strong {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.1;
    display: block;
}
.loin-bldg-v2-text span {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    line-height: 1.4;
}
.loin-bldg-v2-text b {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    display: block;
}
.loin-bldg-v2-gauge {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.loin-bldg-v2-gauge-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    pointer-events: none;
}
.loin-bldg-v2-gauge-center strong {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}
.loin-bldg-v2-gauge-center span {
    color: var(--text-muted);
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Power-BI cross-filter visual states ─────────────────────────────── */
.loin-cf-selected {
    border-color: rgba(0,242,254,0.5) !important;
    background: rgba(0,242,254,0.07) !important;
    box-shadow: 0 0 0 2px rgba(0,242,254,0.18), inset 0 0 0 1px rgba(0,242,254,0.1);
}
.loin-cf-dimmed {
    opacity: 0.38;
    transition: opacity 0.2s;
}
.loin-bldg-v2-card,
.loin-disc-v2-card,
.loin-top10-item {
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.2s;
}

/* ═══════════════════════════════════════════════════════════════════════
   Discipline Compliance cards (v2) — horizontal scroll, large gauges
   ════════════════════════════════════════════════════════════════════ */
.loin-disc-v2-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.loin-disc-v2-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    padding-right: 2px;
    align-content: start;
}
.loin-disc-v2-scroll::-webkit-scrollbar { width: 4px; }
.loin-disc-v2-scroll::-webkit-scrollbar-track { background: transparent; }
.loin-disc-v2-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
}
.loin-disc-v2-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 10px 12px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.loin-disc-v2-card:hover { background: rgba(255,255,255,0.06); }
.loin-disc-v2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.loin-disc-v2-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.loin-disc-v2-icon svg { width: 26px; height: 26px; }
.loin-disc-v2-code {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    line-height: 1;
}
.loin-disc-v2-gauge-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
}
.loin-disc-v2-gauge-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.loin-disc-v2-gauge-center strong {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}
.loin-disc-v2-gauge-center span {
    color: var(--text-muted);
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.loin-disc-v2-stats {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.loin-disc-v2-stats dt {
    color: var(--text-muted);
    font-size: 0.63rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}
.loin-disc-v2-stats dd {
    color: var(--text-primary);
    font-size: 0.67rem;
    font-weight: 900;
    margin: 0;
    text-align: right;
    line-height: 1.4;
}
.loin-disc-v2-stats dd.filled { color: #00e676; }
.loin-disc-v2-stats dd.empty  { color: #ff5f6d; }

/* ── Top 10 Empty Categories: icon-wrap replaces rank badge ─────────── */
.loin-top10-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(0,242,254,0.06);
    border: 1px solid rgba(0,242,254,0.12);
    color: rgba(0,242,254,0.7);
    flex-shrink: 0;
}

.loin-table-panel {
    padding: 0;
    overflow: hidden;
}

.loin-table-panel .loin-panel-head {
    padding: 14px 16px 0;
}

.loin-table-scroll {
    overflow: auto;
    max-height: 520px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.loin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
    font-size: 0.76rem;
}

.loin-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(12, 18, 36, 0.98);
    color: var(--text-muted);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.66rem;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}

/* ── Sortable column headers ── */
.loin-th-sort {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, background 0.15s;
}
.loin-th-sort:hover { color: var(--color-primary); background: rgba(0,242,254,0.04); }
.loin-th-sort.active-sort { color: var(--color-primary); }

.loin-table td {
    color: var(--text-secondary);
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.75rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Row tinting by status ── */
.loin-row-filled td { background: rgba(0,230,118,0.018); }
.loin-row-empty  td { background: rgba(255,95,109,0.018); }
.loin-row-filled:hover td { background: rgba(0,230,118,0.06) !important; }
.loin-row-empty:hover  td { background: rgba(255,95,109,0.06) !important; }

.loin-table-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 34px 12px !important;
}

/* ── Discipline / Building pills ── */
.loin-disc-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(0,242,254,0.1);
    color: var(--color-primary);
    border: 1px solid rgba(0,242,254,0.18);
    white-space: nowrap;
}
.loin-bldg-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
}

/* ── Truncated / highlighted cells ── */
.loin-td-file { max-width: 160px !important; }
.loin-td-param { font-weight: 600; color: var(--text-primary) !important; max-width: 240px !important; }
.loin-td-val { max-width: 200px !important; }

/* ── Filter bar ── */
.loin-tbl-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.014);
}
.loin-tbl-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}
.loin-tbl-search-wrap svg {
    position: absolute;
    left: 9px;
    color: var(--text-muted);
    pointer-events: none;
}
.loin-tbl-search-wrap input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    padding: 6px 32px 6px 28px;
    color: var(--text-primary);
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}
.loin-tbl-search-wrap input:focus { border-color: rgba(0,242,254,0.4); }
.loin-tbl-clear-x {
    position: absolute;
    right: 7px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.loin-tbl-clear-x:hover { color: var(--color-primary); }
.loin-tbl-filters select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    padding: 6px 10px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.loin-tbl-filters select:focus { border-color: rgba(0,242,254,0.4); }
.loin-tbl-reset-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    padding: 6px 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.loin-tbl-reset-btn:hover { border-color: rgba(0,242,254,0.35); color: var(--color-primary); }

/* ── Pagination bar ── */
.loin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.012);
    flex-wrap: wrap;
    gap: 8px;
}
#loin-pg-info { font-size: 0.72rem; color: var(--text-muted); }
.loin-pg-btns { display: flex; align-items: center; gap: 4px; }
#loin-pg-label { font-size: 0.72rem; color: var(--text-secondary); padding: 0 8px; white-space: nowrap; }
.loin-pg-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
}
.loin-pg-btn:hover:not(:disabled) { border-color: rgba(0,242,254,0.4); color: var(--color-primary); }
.loin-pg-btn:disabled { opacity: 0.28; cursor: not-allowed; }

.loin-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 850;
}

.loin-status.filled {
    color: #00e676;
    background: rgba(0,230,118,0.08);
    border: 1px solid rgba(0,230,118,0.22);
}

.loin-status.empty {
    color: #ff5f6d;
    background: rgba(255,95,109,0.08);
    border: 1px solid rgba(255,95,109,0.22);
}

/* ==========================================================================
   ACC REVIEW DASHBOARD
   ========================================================================== */

.acc-review-dashboard {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.status-indicator {
    display: none !important;
}

.acc-inline-filter {
    display: flex;
    justify-content: flex-start;
    margin-bottom: -4px;
}

#view-qaqc .qaqc-workspace-shell.qaqc-tabs-compact {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    margin: 0 0 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#view-qaqc .qaqc-workspace-shell.qaqc-tabs-compact #qaqc-ldc-grid {
    display: none !important;
}

.acc-hero,
.acc-kpi-card,
.acc-stage-panel,
.acc-panel {
    border: 1px solid rgba(0, 242, 254, 0.14);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.98), rgba(7, 11, 20, 0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 44px rgba(0,0,0,0.3);
}

.acc-hero {
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.acc-hero h3 {
    margin: 4px 0 4px;
    color: var(--text-primary);
    font-size: 1.25rem;
    letter-spacing: 0;
}

.acc-hero p,
.acc-upload-actions span {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.acc-upload-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.acc-upload-actions span {
    flex-basis: 100%;
    text-align: right;
}

.acc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.acc-kpi-card {
    min-height: 88px;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}

.acc-kpi-card small,
.acc-panel-head span,
.acc-source-list span {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.acc-kpi-card strong {
    color: var(--text-primary);
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    line-height: 1;
}

.acc-stage-panel {
    border-radius: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.acc-stage-panel h4 {
    margin: 4px 0 0;
    color: var(--color-primary);
    font-size: 1.45rem;
}

.acc-stage-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.acc-stage-chip {
    min-height: 54px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
    border-radius: 10px;
    display: grid;
    place-items: center;
    gap: 3px;
    color: var(--text-muted);
}

.acc-stage-chip.active {
    color: var(--text-primary);
    border-color: rgba(0, 242, 254, 0.26);
    background: rgba(0, 242, 254, 0.065);
}

.acc-stage-chip.final {
    color: var(--color-primary);
    border-color: rgba(0, 242, 254, 0.95);
    background: linear-gradient(180deg, rgba(0,242,254,0.16), rgba(0,242,254,0.04));
    box-shadow: 0 0 0 1px rgba(0,242,254,0.2), 0 0 18px rgba(0, 242, 254, 0.36);
}

.acc-stage-step:has(.acc-stage-chip.final) b {
    color: var(--color-primary);
    font-weight: 900;
}

.acc-stage-step.final-step b {
    color: var(--color-primary);
    font-weight: 900;
}

.acc-stage-chip.muted {
    opacity: 0.72;
}

.acc-stage-chip span {
    font-size: 0.78rem;
    font-weight: 850;
}

.acc-stage-chip b {
    font-size: 0.72rem;
}

.acc-main-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr) minmax(280px, 1fr);
    gap: 12px;
}

.acc-panel {
    border-radius: 12px;
    padding: 14px;
    min-width: 0;
}

.acc-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.acc-panel-head h4 {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.acc-donut-card {
    display: flex;
    flex-direction: column;
}

.acc-donut {
    width: min(210px, 76%);
    aspect-ratio: 1;
    margin: 8px auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 26px rgba(0,242,254,0.12);
}

.acc-donut > div {
    width: 68%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #02040a;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
}

.acc-donut strong {
    color: var(--text-primary);
    font-size: 2rem;
    line-height: 1;
}

.acc-donut span {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 850;
    letter-spacing: 1px;
}

.acc-legend {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 750;
}

.acc-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.acc-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.acc-legend i.closed { background: var(--color-primary); }
.acc-legend i.open { background: #ffb000; border: 1px solid rgba(255,176,0,0.4); }

.acc-status-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acc-status-row {
    display: grid;
    gap: 7px;
}

.acc-status-row div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.acc-status-row span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-status-row b {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.acc-status-row em {
    height: 7px;
    display: block;
    border-radius: 999px;
    background: rgba(148,163,184,0.14);
    overflow: hidden;
}

.acc-status-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.acc-status-row i.rejected { background: #ff5f6d; }
.acc-status-row i.closed { background: #00e676; }
.acc-status-row i.open { background: #00b8ff; }
.acc-status-row i.neutral { background: #94a3b8; }

.acc-source-list {
    display: grid;
    gap: 10px;
}

.acc-source-list div {
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    border-radius: 9px;
    padding: 10px 11px;
    display: grid;
    gap: 5px;
}

.acc-source-list strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.acc-table-panel {
    padding: 0;
    overflow: hidden;
}

.acc-table-panel .acc-panel-head {
    padding: 14px 16px 0;
}

.acc-table-scroll {
    overflow: auto;
    max-height: 420px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.acc-review-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.acc-review-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: rgba(12, 18, 36, 0.98);
    color: var(--text-muted);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.66rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.acc-review-table td {
    padding: 10px 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: top;
}

.acc-stage-badge,
.acc-review-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 850;
}

.acc-stage-badge {
    color: var(--color-primary);
    background: rgba(0,242,254,0.08);
    border: 1px solid rgba(0,242,254,0.22);
}

.acc-review-status.closed {
    color: #00e676;
    background: rgba(0,230,118,0.08);
    border: 1px solid rgba(0,230,118,0.22);
}

.acc-review-status.open {
    color: #00b8ff;
    background: rgba(0,184,255,0.08);
    border: 1px solid rgba(0,184,255,0.22);
}

.acc-review-status.rejected {
    color: #ff5f6d;
    background: rgba(255,95,109,0.08);
    border: 1px solid rgba(255,95,109,0.22);
}

.acc-review-status.neutral {
    color: var(--text-muted);
    background: rgba(148,163,184,0.08);
    border: 1px solid rgba(148,163,184,0.18);
}

.acc-empty-cell {
    text-align: center;
    padding: 34px 12px !important;
    color: var(--text-muted) !important;
}

.acc-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.acc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.acc-breadcrumb em {
    color: var(--text-muted);
    font-style: normal;
}

.acc-page-head h3 {
    margin: 6px 0 4px;
    color: var(--text-primary);
    font-size: 1.35rem;
    letter-spacing: 0;
}

.acc-page-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.acc-upload-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
    gap: 12px;
}

.acc-upload-box,
.acc-about-card {
    border: 1px solid rgba(0, 242, 254, 0.14);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.98), rgba(7, 11, 20, 0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 44px rgba(0,0,0,0.3);
    border-radius: 12px;
}

.acc-upload-box {
    min-height: 76px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.acc-upload-icon {
    width: 56px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--color-primary);
    border: 1px dashed rgba(0,242,254,0.28);
    background: rgba(0,242,254,0.04);
    border-radius: 9px;
    flex: 0 0 auto;
}

.acc-upload-box > span:not(.acc-upload-icon) {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-upload-box .btn-secondary {
    margin-left: auto;
}

.acc-about-card {
    min-height: 76px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acc-about-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--color-primary);
    border: 1px solid rgba(0,242,254,0.28);
    font-size: 0.78rem;
    font-weight: 900;
    flex: 0 0 auto;
}

.acc-about-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.acc-about-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.acc-kpi-card {
    min-height: 92px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    justify-content: initial !important;
}

.acc-kpi-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--acc-kpi-color, var(--color-primary));
    border-radius: 10px;
    background: color-mix(in srgb, var(--acc-kpi-color, #00f2fe) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--acc-kpi-color, #00f2fe) 28%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--acc-kpi-color, #00f2fe) 16%, transparent);
}

.acc-kpi-card > div {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: start;
    gap: 2px;
}

.acc-kpi-card small {
    color: var(--acc-kpi-label, var(--text-muted)) !important;
    line-height: 1.1;
}

.acc-kpi-card strong {
    color: var(--text-primary) !important;
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
    margin: 2px 0 0 !important;
    text-align: left !important;
}

.acc-kpi-card em {
    display: block;
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.72rem;
    margin-top: 0;
    line-height: 1.2;
}

.acc-kpi-cyan {
    --acc-kpi-color: #00f2fe;
    --acc-kpi-label: #00f2fe;
}

.acc-kpi-cyan .acc-kpi-icon {
    background: rgba(0,242,254,0.10);
    border-color: rgba(0,242,254,0.26);
}

.acc-kpi-amber {
    --acc-kpi-color: #ffb000;
    --acc-kpi-label: #ffb000;
}

.acc-kpi-amber .acc-kpi-icon {
    background: rgba(255,176,0,0.10);
    border-color: rgba(255,176,0,0.28);
}

.acc-kpi-green {
    --acc-kpi-color: #00e676;
    --acc-kpi-label: #9ca3af;
}

.acc-kpi-green .acc-kpi-icon {
    background: rgba(0,230,118,0.10);
    border-color: rgba(0,230,118,0.28);
}

.acc-stage-panel {
    display: block;
    min-height: 150px;
    padding: 20px 24px 22px;
}

.acc-stage-head {
    margin-bottom: 20px;
}

.acc-stage-track {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 1.4vw, 24px);
    width: 100%;
    overflow-x: auto;
    padding: 0 0 8px;
}

.acc-stage-step {
    min-width: 150px;
    display: grid;
    grid-template-rows: 58px 22px;
    align-items: start;
    gap: 12px;
    justify-items: center;
    flex: 1 1 0;
}

.acc-stage-step b {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1;
    min-height: 22px;
    display: grid;
    place-items: center;
}

.acc-stage-chip {
    width: 100%;
    min-height: 58px;
    height: 58px;
    place-items: center;
    border-radius: 11px;
}

.acc-stage-chip span {
    font-size: 1.05rem;
    line-height: 1;
}

.acc-stage-arrow {
    width: clamp(28px, 2.6vw, 52px);
    height: 58px;
    display: grid;
    place-items: center;
    align-self: flex-start;
    color: var(--text-muted);
    opacity: 0.75;
    font-size: 1.55rem;
    line-height: 1;
    flex: 0 0 auto;
}

.acc-final-stage-card {
    min-width: 250px;
    min-height: 96px;
    border: 1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.025);
    border-radius: 10px;
    padding: 16px 18px;
    display: grid;
    gap: 8px;
    align-content: center;
    flex: 0 0 clamp(250px, 18vw, 330px);
    margin-left: 2px;
}

.acc-final-stage-card small {
    color: var(--color-primary);
    font-size: 0.82rem;
    text-transform: uppercase;
    font-weight: 900;
}

.acc-final-stage-card strong {
    color: var(--text-primary);
    font-size: 0.98rem;
    line-height: 1.1;
}

.acc-final-stage-card span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.acc-main-grid {
    grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1fr) minmax(300px, 0.9fr);
}

.acc-donut-card {
    min-height: 250px;
    position: relative;
}

.acc-donut {
    width: min(178px, 62%);
    margin: 18px auto 12px;
}

.acc-legend.side {
    position: absolute;
    right: 22px;
    top: 86px;
    display: grid;
    justify-content: start;
}

.acc-legend.side b {
    color: var(--text-secondary);
    margin-left: 8px;
}

.acc-column-card {
    min-height: 250px;
}

.acc-column-chart {
    height: 200px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.acc-chart-grid {
    height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.68rem;
    padding-bottom: 23px;
}

.acc-bars {
    height: 178px;
    display: flex;
    align-items: end;
    justify-content: space-around;
    gap: clamp(18px, 4vw, 54px);
    padding: 0 22px;
    border-bottom: 1px solid rgba(148,163,184,0.35);
    background: repeating-linear-gradient(to top, rgba(148,163,184,0.09), rgba(148,163,184,0.09) 1px, transparent 1px, transparent 35px);
    overflow: hidden;
}

.acc-bar-item {
    height: 100%;
    min-width: 112px;
    width: clamp(112px, 22%, 160px);
    display: grid;
    grid-template-rows: 1fr 36px;
    justify-items: center;
    align-items: end;
    color: var(--text-secondary);
    flex: 1 1 0;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.acc-bar-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.acc-bar-item strong {
    position: absolute;
    left: 50%;
    bottom: calc(var(--bar-pct, 0%) + 8px);
    transform: translateX(-50%);
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1;
    white-space: nowrap;
    z-index: 1;
}

.acc-bar-item strong em {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.72rem;
    margin-left: 5px;
}

.acc-bar {
    width: min(70px, 56%);
    height: var(--bar-pct, 3%);
    min-height: 6px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #00f2fe, #00a7c8);
    box-shadow: 0 0 14px rgba(0,242,254,0.18);
}

.acc-bar.rejected {
    background: linear-gradient(180deg, #ff3f5f, #b81732);
    box-shadow: 0 0 14px rgba(255,63,95,0.18);
}

.acc-bar.closed {
    background: linear-gradient(180deg, #ffd23f, #d99a00);
    box-shadow: 0 0 14px rgba(255,210,63,0.18);
}

.acc-bar.open {
    background: linear-gradient(180deg, #9ca3af, #586174);
    box-shadow: 0 0 14px rgba(156,163,175,0.14);
}

.acc-bar.neutral {
    background: linear-gradient(180deg, #9ca3af, #586174);
}

.acc-bar-item span {
    max-width: 132px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.2;
}

.acc-highlights-card {
    min-height: 250px;
}

.acc-highlight-list {
    display: grid;
    gap: 9px;
}

.acc-highlight-list div {
    min-height: 42px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.acc-highlight-list span {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.2;
    font-weight: 650;
}

.acc-highlight-list strong {
    color: var(--color-primary);
    font-size: 0.82rem;
    white-space: nowrap;
}

.acc-highlight-list strong.danger { color: #ff5f6d; }
.acc-highlight-list strong.warn { color: #ffb000; }
.acc-highlight-list strong.good { color: #00e676; }

.acc-hi-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--color-primary);
}

.acc-hi-icon svg {
    width: 16px;
    height: 16px;
}

.acc-hi-icon.red { color: #ff5f6d; }
.acc-hi-icon.amber { color: #ffb000; }
.acc-hi-icon.green { color: #00e676; }
.acc-hi-icon.cyan { color: var(--color-primary); }

.acc-review-table th {
    color: var(--text-muted);
    font-size: 0.76rem;
    padding: 13px 14px;
}

.acc-review-table td:nth-child(5) {
    color: var(--text-primary);
}

.acc-review-table {
    font-size: 0.86rem;
}

.acc-review-table td {
    padding: 12px 14px;
}

@media (max-width: 1500px) {
    .acc-stage-step {
        min-width: 135px;
    }
    .acc-final-stage-card {
        min-width: 230px;
        flex-basis: 260px;
    }
}

.acc-progress-cell {
    min-width: 180px;
    display: grid;
    grid-template-columns: 50px minmax(96px, 1fr);
    gap: 10px;
    align-items: center;
}

.acc-progress-cell span {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.acc-progress-cell em {
    height: 7px;
    border-radius: 999px;
    background: rgba(148,163,184,0.22);
    overflow: hidden;
}

.acc-progress-cell i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ffb000;
}

.acc-progress-cell i.closed {
    background: #59c84f;
}

.acc-progress-cell i.open {
    background: #ffb000;
}

.acc-kpi-card,
.acc-stage-step,
.acc-legend.side span,
.acc-highlight-list div,
.acc-review-table tbody tr {
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.acc-kpi-card:hover,
.acc-stage-step:hover .acc-stage-chip,
.acc-legend.side span:hover,
.acc-bar-item:hover,
.acc-highlight-list div:hover,
.acc-review-table tbody tr:hover {
    border-color: rgba(0, 242, 254, 0.34);
    filter: brightness(1.08);
}

.acc-kpi-card.is-active-filter,
.acc-stage-step.is-active-filter .acc-stage-chip,
.acc-bar-item.is-active-filter,
.acc-highlight-list div.is-active-filter,
.acc-review-table tbody tr.is-active-filter {
    border-color: rgba(0, 242, 254, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(0,242,254,0.28), 0 0 20px rgba(0,242,254,0.18);
}

.acc-bar-item.is-active-filter {
    background: linear-gradient(180deg, rgba(0,242,254,0.10), transparent 72%);
}

.acc-legend.side span.is-active-filter {
    color: var(--color-primary);
}

.acc-review-table tbody tr.is-active-filter td {
    background: rgba(0,242,254,0.06);
    color: var(--text-primary);
}

.acc-filter-clear {
    max-width: min(320px, 36vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qaqc-tabs-compact .qaqc-ldc-head {
    margin-bottom: 0;
}

.qaqc-tabs-compact #qaqc-selected-dp-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.qaqc-tabs-compact #qaqc-selected-dp-title .qaqc-back-btn {
    margin-left: 0;
}

.qaqc-tabs-compact .qaqc-submission-editor {
    grid-template-columns: minmax(240px, 0.9fr) minmax(520px, 1.6fr);
    gap: 10px;
}

.qaqc-tabs-compact .qaqc-submission-meta span {
    overflow: hidden;
}

.qaqc-tabs-compact .qaqc-submission-meta span:not(:first-child) {
    white-space: nowrap;
}

/* ── LOIN Compliance Level Visualization (in Settings LOIN tab) ──────────── */
.loin-settings-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.4fr);
    gap: 20px;
    width: 100%;
    max-width: 1100px;
    align-items: start;
}
.loin-compliance-vis-card {
    background: rgba(9,13,27,0.5);
    border: 1px solid rgba(0,242,254,0.14);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.loin-compliance-vis-card h4 {
    margin: 0;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.loin-compliance-band-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.loin-band-bar {
    width: 100%;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
}
.loin-band-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(0,0,0,0.75);
    min-width: 2px;
    transition: width 0.4s ease;
    overflow: hidden;
    white-space: nowrap;
}
.loin-band-seg.very-low { background: linear-gradient(90deg, #ff1744, #e53935); }
.loin-band-seg.low      { background: linear-gradient(90deg, #ff6d00, #ff9100); }
.loin-band-seg.good     { background: linear-gradient(90deg, #ffea00, #76ff03); }
.loin-band-seg.excellent{ background: linear-gradient(90deg, #00e676, #1de9b6); }
.loin-band-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0 2px;
}
.loin-compliance-levels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.loin-level-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.loin-level-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.loin-level-swatch.very-low { background: #e53935; }
.loin-level-swatch.low      { background: #ff9100; }
.loin-level-swatch.good     { background: #76ff03; }
.loin-level-swatch.excellent{ background: #1de9b6; }
.loin-level-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-secondary);
    flex: 1;
}
.loin-level-range {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Project Settings 3-tab system ──────────────────────────────────────── */
.pstab-switcher {
    display: flex;
    gap: 4px;
    width: 100%;
    max-width: 1100px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 4px;
}
.pstab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.pstab-btn svg { flex-shrink: 0; }
.pstab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
}
.pstab-btn.active {
    background: rgba(0,242,254,0.1);
    color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(0,242,254,0.2);
}
.pstab-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    animation: viewFadeIn 0.25s ease-out;
}
.pstab-panel.active {
    display: flex;
}
.pstab-bim-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    max-width: 1100px;
}
.pstab-bim-body svg {
    opacity: 0.3;
}
.pstab-bim-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 480px;
    line-height: 1.6;
}

@media (max-width: 1400px) {
    .loin-main-grid {
        grid-template-columns: minmax(150px, 0.4fr) minmax(190px, 0.5fr) 1fr;
    }
    .loin-mid-grid {
        grid-template-columns: minmax(240px, 0.5fr) 1fr;
    }
    .acc-main-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 900px) {
    .loin-toolbar,
    .loin-upload-card,
    .acc-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .loin-upload-card em {
        text-align: left;
        max-width: none;
    }
    .acc-upload-actions,
    .acc-upload-actions span {
        justify-content: flex-start;
        text-align: left;
    }
    .loin-main-grid,
    .loin-mid-grid,
    .acc-main-grid,
    .acc-stage-panel {
        grid-template-columns: 1fr;
    }
    .loin-kpi-grid {
        grid-template-columns: 1fr;
    }
    .loin-kpi-card {
        border-right: 0;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .loin-kpi-card:first-child {
        border-top: 0;
    }
    .loin-gauge {
        min-height: 180px;
    }
    .loin-settings-grid {
        grid-template-columns: 1fr;
    }
    .pstab-btn {
        font-size: 0.72rem;
        padding: 8px 8px;
    }
}

/* =========================================================================
   MIDP vs ACC Deliverables Dashboard
   ========================================================================= */
.midp-dashboard { display:flex; flex-direction:column; gap:16px; padding:4px 2px 24px; }
.midp-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; }
.midp-title { font-size:1.25rem; font-weight:800; color:var(--text-primary); margin:0; }
.midp-subtitle { font-size:0.82rem; color:var(--text-muted); margin:2px 0 0; }
.midp-matching-note { font-size:0.72rem; color:var(--text-muted); background:rgba(0,242,254,0.05); border:1px solid rgba(0,242,254,0.15); border-radius:8px; padding:6px 12px; }
.midp-matching-note b { color:var(--color-primary); font-weight:700; }

.midp-upload-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; }
.midp-upload-card { display:flex; align-items:center; gap:14px; background:linear-gradient(145deg,rgba(8,12,24,0.96),rgba(2,4,10,0.98)); border:1px solid rgba(0,242,254,0.16); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-card); }
.midp-upload-ic { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.midp-upload-ic.blue { background:rgba(0,176,255,0.1); color:#00b0ff; }
.midp-upload-ic.purple { background:rgba(168,85,247,0.1); color:#a855f7; }
.midp-upload-copy { display:flex; flex-direction:column; flex:1; min-width:0; }
.midp-upload-label { font-size:0.62rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); }
.midp-upload-copy strong { font-size:0.86rem; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.midp-mapping { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; background:rgba(10,14,28,0.5); border:1px solid var(--border-color); border-radius:12px; padding:12px 16px; }
.midp-mapping-title { font-size:0.7rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase; color:var(--color-primary); align-self:center; }
.midp-mapping label { display:flex; flex-direction:column; gap:4px; font-size:0.62rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); }
.midp-mapping select { min-height:32px; min-width:160px; border-radius:8px; border:1px solid rgba(0,242,254,0.2); background:rgba(3,7,16,0.92); color:var(--text-secondary); padding:0 10px; font-size:0.76rem; font-weight:700; outline:none; }
.midp-mapping select:focus { border-color:rgba(0,242,254,0.48); }

.midp-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.midp-kpi { display:flex; align-items:center; gap:14px; background:rgba(10,14,28,0.55); border:1px solid var(--border-color); border-radius:14px; padding:16px 18px; border-left-width:3px; }
.midp-kpi em { display:block; font-size:0.66rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); font-style:normal; }
.midp-kpi strong { font-size:1.7rem; font-weight:800; color:var(--text-primary); line-height:1.1; }
.midp-kpi-ic { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.midp-kpi.blue { border-left-color:#00b0ff; } .midp-kpi.blue .midp-kpi-ic { background:rgba(0,176,255,0.12); color:#00b0ff; }
.midp-kpi.green { border-left-color:#00e676; } .midp-kpi.green .midp-kpi-ic { background:rgba(0,230,118,0.12); color:#00e676; }
.midp-kpi.red { border-left-color:#ff1744; } .midp-kpi.red .midp-kpi-ic { background:rgba(255,23,68,0.12); color:#ff5c7a; }
.midp-kpi.purple { border-left-color:#a855f7; } .midp-kpi.purple .midp-kpi-ic { background:rgba(168,85,247,0.12); color:#a855f7; }
.midp-kpi.completion { border-left-color:var(--color-primary); }
.midp-mini-donut { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:conic-gradient(var(--color-primary) 0%, rgba(255,255,255,0.07) 0%); }
.midp-mini-donut span { width:38px; height:38px; border-radius:50%; background:#070b16; display:flex; align-items:center; justify-content:center; font-size:0.66rem; font-weight:800; color:var(--color-primary); }

.midp-charts-row { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:14px; }
.midp-lists-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.midp-panel { background:rgba(10,14,28,0.45); border:1px solid var(--border-color); border-radius:14px; padding:16px 18px; min-width:0; }
.midp-panel h4 { margin:0 0 14px; font-size:0.82rem; font-weight:800; color:var(--text-primary); }
.midp-panel h4 small { color:var(--text-muted); font-weight:600; font-size:0.7rem; }

.midp-bar-chart { display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:18px; }
.midp-bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.midp-bar-pair { display:flex; align-items:flex-end; gap:4px; height:100%; width:100%; justify-content:center; }
.midp-bar { width:16px; border-radius:4px 4px 0 0; position:relative; min-height:2px; transition:height .5s ease; }
.midp-bar.exp { background:linear-gradient(180deg,#3a4a6a,#2a3450); }
.midp-bar.sub { background:linear-gradient(180deg,#00c8ff,#0090d0); }
.midp-bar-val { position:absolute; top:-15px; left:50%; transform:translateX(-50%); font-size:0.6rem; font-weight:700; color:var(--text-secondary); }
.midp-bar-label { font-size:0.66rem; font-weight:700; color:var(--text-muted); }
.midp-legend-row { display:flex; gap:14px; margin-top:10px; font-size:0.66rem; color:var(--text-muted); }
.midp-legend-row i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:middle; }

.midp-disc-chart { display:flex; flex-direction:column; gap:9px; max-height:210px; overflow-y:auto; }
.midp-disc-row { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:8px; }
.midp-disc-code { font-size:0.72rem; font-weight:800; color:var(--text-secondary); }
.midp-disc-track { height:9px; background:rgba(255,255,255,0.06); border-radius:5px; overflow:hidden; }
.midp-disc-fill { height:100%; border-radius:5px; transition:width .5s ease; }
.midp-disc-meta { font-size:0.66rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }

.midp-status-wrap { display:flex; align-items:center; gap:16px; }
.midp-donut { width:130px; height:130px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.midp-donut span { width:84px; height:84px; border-radius:50%; background:#070b16; display:flex; align-items:center; justify-content:center; text-align:center; font-size:0.7rem; font-weight:800; color:var(--text-primary); line-height:1.3; }
.midp-donut-legend { display:flex; flex-direction:column; gap:8px; font-size:0.74rem; color:var(--text-secondary); }
.midp-donut-legend div { display:flex; align-items:center; gap:8px; }
.midp-donut-legend i { width:11px; height:11px; border-radius:3px; }
.midp-donut-legend b { color:var(--text-primary); }

.midp-list { display:flex; flex-direction:column; gap:8px; }
.midp-list-item { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05); border-radius:9px; font-size:0.78rem; }
.midp-list-item .lbl { color:var(--text-secondary); font-weight:600; }
.midp-list-item .cnt { color:#ff5c7a; font-weight:800; font-size:0.8rem; }
.midp-list-empty { font-size:0.78rem; color:var(--text-muted); text-align:center; padding:16px; }

.midp-table-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.midp-table-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.midp-filter-tabs { display:flex; gap:4px; background:rgba(255,255,255,0.03); border-radius:9px; padding:3px; }
.midp-filter-tabs button { border:none; background:transparent; color:var(--text-muted); font-size:0.72rem; font-weight:700; padding:6px 12px; border-radius:7px; cursor:pointer; }
.midp-filter-tabs button.active { background:var(--color-primary); color:#03121a; }
#midp-search { min-height:32px; min-width:200px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); background:rgba(3,7,16,0.9); color:var(--text-primary); padding:0 12px; font-size:0.78rem; outline:none; }
.midp-table-wrap { max-height:440px; overflow:auto; border:1px solid var(--border-color); border-radius:12px; }
.midp-table { width:100%; border-collapse:collapse; font-size:0.76rem; text-align:left; }
.midp-table th { position:sticky; top:0; background:#0a0e1c; border-bottom:1px solid var(--border-color); padding:10px 12px; font-weight:700; color:var(--text-secondary); white-space:nowrap; z-index:5; }
.midp-table td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--text-primary); vertical-align:top; }
.midp-table td:first-child { word-break:break-word; overflow-wrap:anywhere; max-width:320px; }
.midp-table tbody tr:hover td { background:rgba(255,255,255,0.02); }
.midp-pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.66rem; font-weight:800; }
.midp-pill.submitted { background:rgba(0,230,118,0.12); color:#00e676; border:1px solid rgba(0,230,118,0.3); }
.midp-pill.missing { background:rgba(255,23,68,0.1); color:#ff5c7a; border:1px solid rgba(255,23,68,0.3); }
.midp-pill.extra { background:rgba(168,85,247,0.12); color:#c084fc; border:1px solid rgba(168,85,247,0.3); }

.midp-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:60px 24px; color:var(--text-muted); }
.midp-empty svg { color:var(--color-primary); opacity:0.6; }
.midp-empty h3 { margin:0; font-size:1rem; color:var(--text-primary); font-weight:800; }
.midp-empty p { margin:0; font-size:0.82rem; max-width:380px; }

@media (max-width:1100px){ .midp-charts-row{ grid-template-columns:1fr; } .midp-lists-row{ grid-template-columns:1fr; } }