:root {
  font-family: "Cairo", "Inter", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  background: #0a1628;
  color: #e2e8f0;
}

button,
input,
select,
textarea {
  font: inherit;
}
/* ═══════════════════════════════════════════
   TopNavBar — Premium Horizontal Navigation
   DSOXlap Identity — RTL/LTR Responsive
   ═══════════════════════════════════════════ */

.tnb-root {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
    height: 54px;
    background: rgba(10, 14, 26, 0.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: 'Cairo', 'Inter', sans-serif;
}

/* ── RTL: items flow right-to-left ── */
.tnb-rtl { direction: rtl; }
.tnb-ltr { direction: ltr; }

/* ── Logo ── */
.tnb-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0 16px;
    height: 100%;
    flex-shrink: 0;
}

.tnb-rtl .tnb-logo { border-left: 1px solid rgba(30, 41, 59, 0.4); margin-left: 8px; }
.tnb-ltr .tnb-logo { border-right: 1px solid rgba(30, 41, 59, 0.4); margin-right: 8px; }

.tnb-logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.tnb-logo-text {
    font-size: 1.25rem;
    font-weight: 900;
    color: #06b6d4;
    letter-spacing: 3px;
}

/* ── Nav Groups ── */
.tnb-groups {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.tnb-group {
    position: relative;
}

/* ── Group Button (dropdown trigger) ── */
.tnb-group-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.tnb-group-btn:hover { color: #e2e8f0; background: rgba(30, 41, 59, 0.4); }
.tnb-group-btn.active { color: #06b6d4; }
.tnb-group-btn.open { color: #06b6d4; background: rgba(6, 182, 212, 0.08); }

.tnb-chevron { transition: transform 0.2s; }
.tnb-chevron.rotated { transform: rotate(180deg); }

/* ── Dropdown ── */
.tnb-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    min-width: 220px;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    animation: ddSlide 0.15s ease-out;
    z-index: 200;
    max-height: 420px;
    overflow-y: auto;
}

/* RTL dropdown alignment */
.tnb-rtl .tnb-dropdown { right: 0; left: auto; }
.tnb-ltr .tnb-dropdown { left: 0; right: auto; }

@keyframes ddSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.tnb-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}

.tnb-rtl .tnb-dd-item { text-align: right; }
.tnb-ltr .tnb-dd-item { text-align: left; }

.tnb-dd-item:hover { background: rgba(6, 182, 212, 0.08); color: #e2e8f0; }
.tnb-dd-item.active { background: rgba(6, 182, 212, 0.12); color: #06b6d4; font-weight: 600; }

/* ── Standalone Items ── */
.tnb-standalone {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.tnb-standalone:hover { color: #e2e8f0; background: rgba(30, 41, 59, 0.3); }
.tnb-standalone.active { color: #06b6d4; background: rgba(6, 182, 212, 0.08); }

/* ── Right Side Actions ── */
.tnb-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tnb-rtl .tnb-actions { margin-right: auto; padding-right: 12px; border-right: 1px solid rgba(30, 41, 59, 0.4); }
.tnb-ltr .tnb-actions { margin-left: auto; padding-left: 12px; border-left: 1px solid rgba(30, 41, 59, 0.4); }

.tnb-lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(30, 41, 59, 0.5);
    background: rgba(30, 41, 59, 0.2);
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.tnb-lang-btn:hover { border-color: #06b6d4; color: #06b6d4; }

.tnb-user { display: flex; align-items: center; gap: 8px; }
.tnb-user-name { font-size: 0.75rem; color: #64748b; white-space: nowrap; }

.tnb-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.06);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
}

.tnb-logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    transform: scale(1.05);
}

/* ── XORAX Brand ── */
.tnb-xorax {
    display: flex;
    align-items: center;
}

.tnb-xorax-text {
    font-size: 0.7rem;
    font-weight: 800;
    color: #06b6d4;
    letter-spacing: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.tnb-xorax:hover .tnb-xorax-text { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 1200px) {
    .tnb-standalone span { display: none; }
    .tnb-group-btn { padding: 8px 10px; font-size: 0.78rem; }
}

@media (max-width: 900px) {
    .tnb-root { padding: 0 12px; overflow-x: auto; }
    .tnb-user-name { display: none; }
    .tnb-xorax { display: none; }
}

/* ── Print: hide nav ── */
@media print {
    .tnb-root { display: none; }
}

/* ── Scrollbar for dropdowns ── */
.tnb-dropdown::-webkit-scrollbar { width: 4px; }
.tnb-dropdown::-webkit-scrollbar-track { background: transparent; }
.tnb-dropdown::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.2); border-radius: 4px; }
/* ═══════════════════════════════════════════
   FullPageLayout — Full-Screen Section Wrapper
   DSOXlap Identity
   ═══════════════════════════════════════════ */

.fp-root {
    min-height: 100vh;
    background: #0a0e1a;
    display: flex;
    flex-direction: column;
    animation: fpFadeIn 0.35s ease-out;
}

@keyframes fpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Header ── */
.fp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
    position: sticky;
    top: 0;
    z-index: 100;
}

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

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

/* ── Back Button ── */
.fp-back-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(6, 182, 212, 0.25);
    background: rgba(6, 182, 212, 0.08);
    color: #06b6d4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.fp-back-btn:hover {
    background: rgba(6, 182, 212, 0.18);
    transform: translateX(3px);
    border-color: rgba(6, 182, 212, 0.4);
}

/* ── Title ── */
.fp-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fp-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
}

.fp-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    font-family: 'Cairo', 'Inter', sans-serif;
}

/* ── Home Button ── */
.fp-home-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(30, 41, 59, 0.6);
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.2s;
}

.fp-home-btn:hover {
    border-color: rgba(6, 182, 212, 0.3);
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

/* ── Main Content ── */
.fp-main {
    flex: 1;
    overflow-y: auto;
}

.fp-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .fp-header { padding: 10px 16px; }
    .fp-content { padding: 16px; }
    .fp-title { font-size: 1rem; }
}

/* ── Print: hide header ── */
@media print {
    .fp-header { display: none; }
    .fp-content { max-width: 100%; padding: 0; }
}
/* ═══════════════════════════════════════════════════════════════
   DSOX V2 Command Center — Design System
   All styles scoped under .v2-root to avoid V1 conflicts
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
.v2-root {
    --v2-bg: #0f172a;
    --v2-bg-secondary: #1e293b;
    --v2-card: rgba(30, 41, 59, 0.7);
    --v2-card-solid: #1e293b;
    --v2-text: #e2e8f0;
    --v2-text-muted: #94a3b8;
    --v2-text-dim: #64748b;
    --v2-border: rgba(255, 255, 255, 0.1);
    --v2-border-light: rgba(255, 255, 255, 0.05);
    --v2-red: #ef4444;
    --v2-red-glow: rgba(239, 68, 68, 0.2);
    --v2-yellow: #f59e0b;
    --v2-yellow-glow: rgba(245, 158, 11, 0.2);
    --v2-green: #10b981;
    --v2-green-glow: rgba(16, 185, 129, 0.2);
    --v2-blue: #3b82f6;
    --v2-blue-glow: rgba(59, 130, 246, 0.2);
    --v2-purple: #8b5cf6;
    --v2-cyan: #06b6d4;
    --v2-radius: 12px;
    --v2-radius-sm: 8px;
    --v2-radius-lg: 16px;
    --v2-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --v2-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --v2-font: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* ── Reset & Base ── */
#root {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.v2-root {
    font-family: var(--v2-font);
    background: var(--v2-bg);
    color: var(--v2-text);
    min-height: 100vh;
    width: 100%;
    line-height: 1.6;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

.v2-root * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Glass Card ── */
.v2-card {
    background: var(--v2-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 24px;
    transition: var(--v2-transition);
}

.v2-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ── Critical Alert Banner ── */
.v2-critical-alert {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--v2-radius);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    animation: v2-pulse-border 2s ease-in-out infinite;
}

.v2-critical-alert .alert-icon {
    color: var(--v2-red);
    font-size: 1.2em;
    flex-shrink: 0;
    animation: v2-pulse 2s ease-in-out infinite;
}

.v2-critical-alert .alert-text {
    color: var(--v2-red);
    font-size: 0.85em;
    font-weight: 600;
}

.v2-critical-alert .alert-items {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1;
}

.v2-critical-alert .alert-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em;
    color: var(--v2-text-muted);
}

.v2-critical-alert .alert-item strong {
    color: var(--v2-red);
}

/* ── Sidebar Layout ── */
.v2-layout-sidebar {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.v2-content-area {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    height: 100vh;
    width: 100%;
}


/* ── Sidebar ── */
.v2-sidebar {
    width: 220px;
    min-width: 220px;
    height: 100vh;
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--v2-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.25s ease, min-width 0.25s ease;
    overflow: hidden;
}

.v2-sidebar-collapsed {
    width: 56px;
    min-width: 56px;
}

.v2-sidebar-collapsed .v2-sidebar-brand {
    justify-content: center;
    padding: 12px 0;
    min-height: 56px;
}

.v2-sidebar-collapsed .v2-sidebar-toggle {
    margin: 0 auto;
    width: 36px;
    height: 36px;
}

/* ── Sidebar Brand ── */
.v2-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--v2-border);
    min-height: 70px;
    position: relative;
}

.v2-sidebar-brand .brand-logo {
    object-fit: contain;
    border-radius: 6px;
}

.v2-sidebar-brand .dsox-logo {
    height: 54px;
    width: auto;
}

.v2-sidebar-brand .brand-divider {
    display: none;
}

.v2-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--v2-border);
    border-radius: 6px;
    background: none;
    color: var(--v2-text-dim);
    cursor: pointer;
    transition: var(--v2-transition);
    margin-right: auto;
    flex-shrink: 0;
}

.v2-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text);
}

/* ── Sidebar Nav ── */
.v2-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.v2-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.v2-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

/* ── Group Button ── */
.v2-sidebar-group-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    color: var(--v2-text-muted);
    font-size: 0.72em;
    font-weight: 600;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--v2-transition);
    font-family: var(--v2-font);
    text-align: right;
}

.v2-sidebar-group-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--v2-text);
}

.v2-sidebar-group-btn.active {
    color: var(--v2-blue);
}

.v2-sidebar-chevron {
    transition: transform 0.2s ease;
    margin-right: auto;
}

.v2-sidebar-chevron.open {
    transform: rotate(180deg);
}

/* ── Sub Items ── */
.v2-sidebar-sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px 0;
    margin-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    animation: sidebarSlideIn 0.15s ease;
}

@keyframes sidebarSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Nav Item (both sub and standalone) ── */
.v2-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    color: var(--v2-text-muted);
    font-size: 0.68em;
    font-weight: 500;
    border: none;
    background: none;
    border-radius: 5px;
    cursor: pointer;
    transition: var(--v2-transition);
    font-family: var(--v2-font);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--v2-text);
}

.v2-sidebar-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--v2-blue);
}

.v2-sidebar-item.active::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: var(--v2-blue);
    border-radius: 1px;
}

.v2-sidebar-item.standalone {
    padding: 7px 10px;
    font-size: 0.7em;
    font-weight: 600;
    position: relative;
}

.v2-sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.v2-sidebar-icon svg {
    width: 14px;
    height: 14px;
}

.v2-sidebar-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Divider ── */
.v2-sidebar-divider {
    height: 1px;
    background: var(--v2-border);
    margin: 6px 10px;
}

/* ── User Section ── */
.v2-sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--v2-border);
    min-height: 48px;
}

.v2-sidebar-user .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-blue), var(--v2-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.v2-sidebar-user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.v2-sidebar-user-info .user-name {
    font-size: 0.68em;
    font-weight: 600;
    color: var(--v2-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-sidebar-user-info .user-role {
    font-size: 0.58em;
    color: var(--v2-text-dim);
}

/* Logout Button */
.v2-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--v2-border);
    border-radius: 6px;
    background: none;
    color: var(--v2-text-dim);
    cursor: pointer;
    transition: var(--v2-transition);
    flex-shrink: 0;
}

.v2-logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--v2-red);
    color: var(--v2-red);
}

/* ── Sidebar Footer (XORAX) ── */
.v2-sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 14px;
    border-top: 1px solid var(--v2-border);
}

.v2-sidebar-footer .footer-credit {
    font-size: 0.55em;
    color: var(--v2-text-dim);
    letter-spacing: 0.5px;
}

.v2-sidebar-footer .footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: var(--v2-transition);
}

.v2-sidebar-footer .footer-link:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.v2-sidebar-footer .xorax-logo {
    height: 54px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    opacity: 0.85;
    transition: var(--v2-transition);
}

.v2-sidebar-footer .footer-link:hover .xorax-logo {
    opacity: 1;
}

.v2-sidebar-footer .footer-url {
    font-size: 0.58em;
    color: var(--v2-cyan);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── V1 Pages inside V2 — Full Height Fix ── */
.v2-main .cc-container,
.v2-main .upload-center,
.v2-main .hub-layout,
.v2-main .admin-settings {
    min-height: calc(100vh - 80px);
}

/* Command Center full width */
.v2-main .cc-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: -16px -20px;
    padding: 0;
    width: calc(100% + 40px);
}

.v2-main .cc-sidebar {
    min-width: 200px;
    max-width: 240px;
}

.v2-main .cc-main {
    flex: 1;
    min-width: 0;
}

/* Upload Center full width */
.v2-main .upload-center {
    padding: 0;
}

/* Market Intelligence full width */
.v2-main .hub-layout {
    padding: 0;
}

/* ── Main Layout ── */
.v2-main {
    padding: 16px 20px;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
}

/* ── Global Dashboard Font-Size Reduction ── */
/* Base font size for all dashboard pages to scale 'em' values */
.v2-main .dashboard-layout {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.v2-content-area h1,
.v2-content-area h2,
.v2-content-area h3 {
    font-size: 0.85em !important;
}

.v2-content-area h4,
.v2-content-area h5,
.v2-content-area h6 {
    font-size: 0.72em !important;
}

.v2-content-area p,
.v2-content-area span,
.v2-content-area label,
.v2-content-area td,
.v2-content-area th,
.v2-content-area li,
.v2-content-area button,
.v2-content-area a,
.v2-content-area input,
.v2-content-area select,
.v2-content-area textarea,
.v2-content-area .v2-card,
.v2-content-area div {
    font-size: inherit;
}

.v2-content-area {
    font-size: 13px;
    /* Em base size for dashboard */
}

/* Keep KPI values slightly bigger for readability */
.v2-content-area .kpi-value,
.v2-content-area .v2-kpi-value {
    font-size: 1.1em !important;
}

/* Section titles */
.v2-content-area .v2-section-title,
.v2-content-area .section-title {
    font-size: 0.8em !important;
}

/* Status badge & tag text */
.v2-content-area .v2-badge,
.v2-content-area .badge,
.v2-content-area .tag {
    font-size: 0.6em !important;
}

/* Table headers */
.v2-content-area th {
    font-size: 0.65em !important;
}

/* Table cells */
.v2-content-area td {
    font-size: 0.65em !important;
}

/* Alert banner text */
.v2-content-area .v2-critical-alert .alert-text {
    font-size: 0.7em !important;
}

.v2-content-area .v2-critical-alert .alert-item {
    font-size: 0.65em !important;
}

/* ── KPI Cards Grid ── */
.v2-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.v2-kpi-card {
    background: var(--v2-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--v2-transition);
    position: relative;
    overflow: hidden;
}

.v2-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--v2-radius) var(--v2-radius) 0 0;
}

.v2-kpi-card.risk-high::before {
    background: var(--v2-red);
}

.v2-kpi-card.risk-medium::before {
    background: var(--v2-yellow);
}

.v2-kpi-card.risk-low::before {
    background: var(--v2-green);
}

.v2-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.v2-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-kpi-label {
    font-size: 0.78em;
    color: var(--v2-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.v2-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

.v2-kpi-icon.red {
    background: var(--v2-red-glow);
    color: var(--v2-red);
}

.v2-kpi-icon.yellow {
    background: var(--v2-yellow-glow);
    color: var(--v2-yellow);
}

.v2-kpi-icon.green {
    background: var(--v2-green-glow);
    color: var(--v2-green);
}

.v2-kpi-icon.blue {
    background: var(--v2-blue-glow);
    color: var(--v2-blue);
}

.v2-kpi-value {
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1;
}

.v2-kpi-value.red {
    color: var(--v2-red);
}

.v2-kpi-value.yellow {
    color: var(--v2-yellow);
}

.v2-kpi-value.green {
    color: var(--v2-green);
}

.v2-kpi-value.blue {
    color: var(--v2-blue);
}

.v2-kpi-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
}

.v2-kpi-trend.up {
    color: var(--v2-green);
}

.v2-kpi-trend.down {
    color: var(--v2-red);
}

/* Progress bar */
.v2-progress-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.v2-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease;
}

.v2-progress-fill.red {
    background: var(--v2-red);
}

.v2-progress-fill.yellow {
    background: var(--v2-yellow);
}

.v2-progress-fill.green {
    background: var(--v2-green);
}

.v2-progress-fill.blue {
    background: var(--v2-blue);
}

/* ── Charts Container ── */
.v2-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.v2-chart-card {
    background: var(--v2-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 24px;
}

.v2-chart-title {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v2-chart-title .chart-icon {
    color: var(--v2-blue);
}

/* ── Tables ── */
.v2-table-container {
    overflow-x: auto;
    border-radius: var(--v2-radius);
}

.v2-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82em;
}

.v2-table thead th {
    background: rgba(15, 23, 42, 0.8);
    color: var(--v2-text-muted);
    font-weight: 600;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--v2-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.v2-table tbody tr {
    transition: var(--v2-transition);
}

.v2-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.v2-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--v2-border-light);
    color: var(--v2-text);
    white-space: nowrap;
}

/* Efficiency badge */
.v2-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
}

.v2-badge.green {
    background: var(--v2-green-glow);
    color: var(--v2-green);
}

.v2-badge.blue {
    background: var(--v2-blue-glow);
    color: var(--v2-blue);
}

.v2-badge.red {
    background: var(--v2-red-glow);
    color: var(--v2-red);
}

.v2-badge.yellow {
    background: var(--v2-yellow-glow);
    color: var(--v2-yellow);
}

/* ── Section Headers ── */
.v2-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.v2-section-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--v2-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2-section-subtitle {
    font-size: 0.8em;
    color: var(--v2-text-dim);
}

/* ── Stat Mini Cards (inside tables / sections) ── */
.v2-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.v2-stat-mini {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--v2-border-light);
    border-radius: var(--v2-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-stat-mini .label {
    font-size: 0.72em;
    color: var(--v2-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.v2-stat-mini .value {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--v2-text);
}

/* ── Invoices Search / Filter Bar ── */
.v2-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.v2-search-input {
    flex: 1;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 10px 16px;
    color: var(--v2-text);
    font-size: 0.85em;
    font-family: var(--v2-font);
    outline: none;
    transition: var(--v2-transition);
}

.v2-search-input::placeholder {
    color: var(--v2-text-dim);
}

.v2-search-input:focus {
    border-color: var(--v2-blue);
    box-shadow: 0 0 0 3px var(--v2-blue-glow);
}

.v2-filter-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 10px 16px;
    color: var(--v2-text);
    font-size: 0.85em;
    font-family: var(--v2-font);
    outline: none;
    cursor: pointer;
    appearance: none;
    min-width: 140px;
}

.v2-filter-select option {
    background: var(--v2-card-solid);
    color: var(--v2-text);
}

/* ── Risk Command Center ── */
.v2-risk-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.v2-risk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-risk-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--v2-border-light);
    border-radius: var(--v2-radius-sm);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--v2-transition);
}

.v2-risk-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.v2-risk-item .risk-customer {
    font-weight: 600;
    font-size: 0.85em;
}

.v2-risk-item .risk-amount {
    font-size: 0.82em;
    font-weight: 700;
}

.v2-risk-item .risk-days {
    font-size: 0.78em;
    color: var(--v2-text-dim);
}

/* ── Animations ── */
@keyframes v2-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes v2-pulse-border {

    0%,
    100% {
        border-color: rgba(239, 68, 68, 0.3);
    }

    50% {
        border-color: rgba(239, 68, 68, 0.6);
    }
}

@keyframes v2-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.v2-animate-in {
    animation: v2-fadeIn 0.5s ease forwards;
}

/* ── Responsive ── */
@media (max-width: 1400px) {
    .v2-charts-grid {
        grid-template-columns: 1fr;
    }

    .v2-risk-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .v2-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-nav-menu {
        gap: 0;
    }

    .v2-nav-link {
        padding: 8px 10px;
        font-size: 0.8em;
    }
}

@media (max-width: 768px) {
    .v2-kpi-grid {
        grid-template-columns: 1fr;
    }

    .v2-main {
        padding: 12px;
    }

    .v2-top-nav {
        padding: 0 12px;
    }
}

/* ── Recharts Overrides ── */
.v2-root .recharts-cartesian-axis-tick-value {
    fill: var(--v2-text-dim) !important;
    font-size: 0.72em !important;
}

.v2-root .recharts-cartesian-grid line {
    stroke: var(--v2-border-light) !important;
}

.v2-root .recharts-tooltip-wrapper .recharts-default-tooltip {
    background: var(--v2-card-solid) !important;
    border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-sm) !important;
    box-shadow: var(--v2-shadow) !important;
}

.v2-root .recharts-tooltip-item {
    color: var(--v2-text) !important;
    font-size: 0.8em !important;
}

.v2-root .recharts-tooltip-label {
    color: var(--v2-text-muted) !important;
    font-weight: 600 !important;
}

.v2-root .recharts-legend-item-text {
    color: var(--v2-text-muted) !important;
    font-size: 0.78em !important;
}

/* ═══════════════════════════════════════════
   Time Period Selector & Comparison
   ═══════════════════════════════════════════ */

.v2-period-selector-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    margin-bottom: 16px;
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    backdrop-filter: blur(12px);
}

.period-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--v2-text-muted);
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}

.period-buttons {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--v2-radius-sm);
    padding: 3px;
}

.period-btn {
    padding: 6px 16px;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--v2-text-muted);
    background: none;
    border: none;
    border-radius: var(--v2-radius-sm);
    cursor: pointer;
    transition: var(--v2-transition);
    font-family: var(--v2-font);
    white-space: nowrap;
}

.period-btn:hover {
    color: var(--v2-text);
    background: rgba(255, 255, 255, 0.05);
}

.period-btn.active {
    color: #fff;
    background: var(--v2-blue);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.period-range {
    color: var(--v2-blue);
    font-size: 0.8em;
    font-weight: 600;
    margin-right: auto;
    direction: ltr;
}

/* Comparison Banner */
.v2-comparison-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 20px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--v2-radius);
    animation: v2DropIn 0.3s ease;
}

.comp-title {
    color: var(--v2-text);
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
}

.comp-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.comp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82em;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.comp-item.positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.comp-item.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* ═══════════════════════════════════════════
   Customer Evaluation Page
   ═══════════════════════════════════════════ */

.v2-cust-eval {
    padding: 0;
}

.v2-eval-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.eval-stat-card {
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 16px;
    text-align: center;
    backdrop-filter: blur(12px);
}

.eval-stat-card.critical {
    border-color: #ef4444;
}

.eval-stat-card.warning {
    border-color: #f59e0b;
}

.eval-stat-card.info {
    border-color: #3b82f6;
}

.eval-stat-card.success {
    border-color: #10b981;
}

.eval-stat-value {
    display: block;
    font-size: 1.5em;
    font-weight: 800;
    color: var(--v2-text);
}

.eval-stat-card.critical .eval-stat-value {
    color: #ef4444;
}

.eval-stat-card.warning .eval-stat-value {
    color: #f59e0b;
}

.eval-stat-card.info .eval-stat-value {
    color: #3b82f6;
}

.eval-stat-card.success .eval-stat-value {
    color: #10b981;
}

.eval-stat-card.role-high {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(15, 23, 42, 0.5));
}

.eval-stat-card.role-medium {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.5));
}

.eval-stat-label {
    font-size: 0.75em;
    color: var(--v2-text-muted);
    margin-top: 4px;
}

/* Filters */
.v2-eval-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.eval-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 8px 14px;
    color: var(--v2-text-muted);
    flex: 1;
    min-width: 200px;
}

.eval-search input {
    background: none;
    border: none;
    color: var(--v2-text);
    font-size: 0.85em;
    outline: none;
    width: 100%;
    font-family: var(--v2-font);
}

.eval-grade-filter {
    display: flex;
    align-items: center;
    gap: 4px;
}

.grade-filter-btn {
    padding: 6px 12px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--v2-text-muted);
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: 20px;
    cursor: pointer;
    transition: var(--v2-transition);
    font-family: var(--v2-font);
}

.grade-filter-btn:hover {
    color: var(--v2-text);
}

.grade-filter-btn.active {
    color: #fff;
    background: var(--v2-blue);
    border-color: var(--v2-blue);
}

.eval-count {
    color: var(--v2-text-muted);
    font-size: 0.82em;
    white-space: nowrap;
}

/* Role Intelligence Quick Brief */
.v2-role-brief {
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(6, 182, 212, 0.07));
    border: 1px solid rgba(6, 182, 212, 0.28);
    border-radius: var(--v2-radius);
    padding: 12px;
}

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

.role-brief-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #22d3ee;
    font-size: 0.83em;
    font-weight: 700;
}

.role-brief-state {
    color: var(--v2-text-muted);
    font-size: 0.74em;
}

.role-brief-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.role-brief-item {
    border: 1px solid rgba(30, 41, 59, 0.7);
    border-radius: var(--v2-radius-sm);
    background: rgba(15, 23, 42, 0.6);
    padding: 10px;
}

.role-brief-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.role-brief-item-head strong {
    color: var(--v2-text);
    font-size: 0.8em;
}

.role-brief-item p {
    margin: 0 0 6px;
    color: #cbd5e1;
    font-size: 0.75em;
    line-height: 1.4;
}

.role-brief-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--v2-text-muted);
    font-size: 0.7em;
}

.role-brief-scenario {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #a5b4fc;
    font-size: 0.7em;
}

.role-brief-empty {
    margin: 0;
    color: var(--v2-text-muted);
    font-size: 0.78em;
}

.role-priority-tag {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.65em;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.14);
}

.role-priority-tag.priority-high {
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.15);
}

.role-priority-tag.priority-medium {
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.14);
}

.role-priority-tag.priority-opportunity {
    border-color: rgba(16, 185, 129, 0.45);
    color: #34d399;
    background: rgba(16, 185, 129, 0.14);
}

.role-scenario-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.64em;
    font-weight: 700;
    color: #c4b5fd;
    border: 1px solid rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.12);
}

/* Table */
.v2-eval-table-wrap {
    overflow-x: auto;
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    backdrop-filter: blur(12px);
}

.v2-eval-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
}

.v2-eval-table thead th {
    background: rgba(0, 0, 0, 0.3);
    color: var(--v2-text-muted);
    font-weight: 700;
    padding: 12px 14px;
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--v2-border);
}

.v2-eval-table thead th:hover {
    color: var(--v2-text);
}

.v2-eval-table tbody td {
    padding: 10px 14px;
    color: var(--v2-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

.v2-eval-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.eval-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 250px;
    white-space: normal !important;
}

.eval-name span:first-child {
    font-weight: 600;
    color: var(--v2-text);
}

.eval-inv-count {
    font-size: 0.72em;
    color: var(--v2-text-muted);
}

.eval-sector {
    color: var(--v2-text-muted) !important;
    font-size: 0.78em;
}

.eval-rate-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.eval-rate-fill {
    height: 6px;
    border-radius: 3px;
    flex: 1;
    position: relative;
}

.eval-rate-bar span {
    font-weight: 600;
    font-size: 0.8em;
    min-width: 38px;
}

.eval-grade {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 700;
}

.eval-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78em;
    font-weight: 600;
}

.eval-trend.up {
    color: #10b981;
}

.eval-trend.down {
    color: #ef4444;
}

.eval-trend.stable {
    color: var(--v2-text-muted);
}

.eval-role-cell {
    display: grid;
    gap: 5px;
    max-width: 300px;
    white-space: normal;
}

.eval-role-cell p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.73em;
    line-height: 1.35;
}

.eval-role-scenario {
    display: grid;
    gap: 5px;
    max-width: 260px;
    white-space: normal;
}

.eval-role-scenario p {
    margin: 0;
    color: #a5b4fc;
    font-size: 0.72em;
    line-height: 1.35;
}

.eval-role-action {
    display: grid;
    gap: 4px;
    max-width: 280px;
    white-space: normal;
}

.eval-role-action span {
    color: #94a3b8;
    font-size: 0.68em;
}

.eval-role-action p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.72em;
    line-height: 1.35;
}

.eval-role-empty {
    color: var(--v2-text-muted);
    font-size: 0.78em;
}

/* ═══════════════════════════════════════════
   AI Forecasting Page
   ═══════════════════════════════════════════ */

.v2-forecast {
    padding: 0;
}

.forecast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.forecast-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--v2-blue);
}

.forecast-title h2 {
    color: var(--v2-text);
    font-size: 1.3em;
    margin: 0;
}

.forecast-title p {
    color: var(--v2-text-muted);
    font-size: 0.82em;
    margin: 0;
}

.forecast-confidence {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: 20px;
    font-size: 0.82em;
    color: var(--v2-text-muted);
}

.conf-detail {
    opacity: 0.6;
    font-size: 0.75em;
}

/* Projection Cards */
.forecast-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.forecast-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    backdrop-filter: blur(12px);
}

.fc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.fc-label {
    font-size: 0.78em;
    color: var(--v2-text-muted);
}

.fc-value {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--v2-text);
}

.fc-trend {
    font-size: 0.9em;
}

.fc-trend.up {
    color: #10b981;
}

.fc-trend.down {
    color: #ef4444;
}

/* AI Insights */
.forecast-insights {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--v2-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.forecast-insights h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--v2-text);
    font-size: 0.9em;
    margin: 0 0 12px 0;
}

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

.insight-item {
    font-size: 0.85em;
    color: var(--v2-text);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--v2-radius-sm);
    line-height: 1.5;
}

/* Charts */
.forecast-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Disclaimer */
.forecast-disclaimer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--v2-radius-sm);
    font-size: 0.78em;
    color: var(--v2-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Credit Manager Report — تقرير مدير الإدارة (Refined & Compact)
   ═══════════════════════════════════════════════════════════════ */

.cr-report {
    direction: rtl;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 8px;
}

/* ── Header ── */
.cr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(16, 185, 129, 0.03));
    border: 1px solid rgba(5, 150, 105, 0.18);
    border-radius: var(--v2-radius);
}

.cr-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-header-icon {
    font-size: 1.6em;
}

.cr-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 2px;
}

.cr-subtitle {
    font-size: 0.72em;
    color: var(--v2-text-muted);
}

.cr-timestamp {
    font-size: 0.68em;
    color: var(--v2-text-dim);
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 10px;
    border-radius: 8px;
}

/* ── Executive KPIs ── */
.cr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.cr-kpi-card {
    background: var(--v2-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 14px 12px;
    text-align: center;
    transition: var(--v2-transition);
    position: relative;
    overflow: hidden;
}

.cr-kpi-card::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.04), transparent 70%);
    transition: opacity 0.3s ease;
}

.cr-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.cr-kpi-card:hover::after {
    opacity: 1;
}

.cr-kpi-icon {
    color: var(--v2-text-dim);
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
}

.cr-kpi-icon svg {
    width: 16px;
    height: 16px;
}

.cr-kpi-value {
    font-size: 1.35em;
    font-weight: 800;
    color: var(--v2-text);
    line-height: 1.1;
    margin-bottom: 3px;
}

.cr-kpi-label {
    font-size: 0.65em;
    color: var(--v2-text-muted);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.cr-kpi-target {
    font-size: 0.6em;
    color: var(--v2-text-dim);
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    display: inline-block;
}

/* ── Financial Summary Row ── */
.cr-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.cr-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--v2-radius-sm);
    border: 1px solid var(--v2-border);
    backdrop-filter: blur(12px);
    transition: var(--v2-transition);
}

.cr-summary-card:hover {
    transform: translateX(-3px);
}

.cr-summary-card svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cr-summary-total {
    background: rgba(99, 102, 241, 0.06);
    color: #818cf8;
}

.cr-summary-collected {
    background: rgba(34, 197, 94, 0.06);
    color: #22c55e;
}

.cr-summary-outstanding {
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
}

.cr-summary-value {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--v2-text);
}

.cr-summary-label {
    font-size: 0.65em;
    color: var(--v2-text-muted);
}

/* ── Section Cards ── */
.cr-section {
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: var(--v2-transition);
}

.cr-section:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.cr-section-title {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--v2-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--v2-border-light);
}

.cr-section-title svg {
    width: 16px;
    height: 16px;
}

/* ── Priority Action Cards ── */
.cr-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-action-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--v2-border-light);
    border-radius: var(--v2-radius-sm);
    padding: 10px 14px;
    transition: var(--v2-transition);
    cursor: default;
}

.cr-action-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(-4px);
}

.cr-action-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.cr-action-icon {
    flex-shrink: 0;
}

.cr-action-icon svg {
    width: 14px;
    height: 14px;
}

.cr-action-title {
    font-weight: 700;
    font-size: 0.78em;
    color: var(--v2-text);
    flex: 1;
}

.cr-action-time {
    font-size: 0.62em;
    color: var(--v2-text-dim);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    white-space: nowrap;
}

.cr-action-desc {
    font-size: 0.72em;
    color: var(--v2-text-muted);
    line-height: 1.5;
    padding-right: 22px;
}

/* ── Risk Grade Badge ── */
.cr-grade-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── Grade Distribution Bar ── */
.cr-grade-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
    gap: 2px;
}

.cr-grade-segment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    color: white;
    font-size: 0.65em;
    font-weight: 700;
    min-width: 36px;
    transition: all 0.25s ease;
    cursor: default;
}

.cr-grade-segment:hover {
    filter: brightness(1.25);
    transform: scaleY(1.08);
}

/* ── Customer Table ── */
.cr-table-wrap {
    overflow-x: auto;
    border-radius: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.cr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.73em;
}

.cr-table thead th {
    background: rgba(15, 23, 42, 0.7);
    color: var(--v2-text-muted);
    font-weight: 600;
    font-size: 0.65em;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid var(--v2-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.cr-table tbody tr {
    transition: var(--v2-transition);
}

.cr-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.035);
}

.cr-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

.cr-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--v2-border-light);
    color: var(--v2-text);
    white-space: nowrap;
}

/* ── Early Warning ── */
.cr-warning-section {
    border-color: rgba(239, 68, 68, 0.15);
}

.cr-warning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.cr-warning-card {
    background: rgba(239, 68, 68, 0.03);
    border: 1px solid rgba(239, 68, 68, 0.12);
    border-radius: 6px;
    padding: 10px 12px;
    transition: var(--v2-transition);
}

.cr-warning-card:hover {
    border-color: rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08);
}

.cr-warning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cr-warning-name {
    font-weight: 700;
    font-size: 0.75em;
    color: var(--v2-text);
}

.cr-warning-details {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.65em;
    color: var(--v2-text-muted);
}

/* ── Collector Cards ── */
.cr-collectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.cr-collector-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--v2-border-light);
    border-radius: 6px;
    padding: 12px;
    transition: var(--v2-transition);
}

.cr-collector-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.cr-collector-rank {
    font-size: 0.85em;
    font-weight: 800;
    color: var(--v2-text-dim);
    margin-bottom: 2px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 8px;
    border-radius: 6px;
}

.cr-collector-name {
    font-weight: 700;
    font-size: 0.78em;
    color: var(--v2-text);
    margin-bottom: 8px;
}

.cr-collector-stats {
    display: flex;
    gap: 12px;
}

.cr-stat-value {
    font-weight: 700;
    font-size: 0.75em;
    display: block;
}

.cr-stat-label {
    font-size: 0.58em;
    color: var(--v2-text-dim);
}

/* ── Sector Analysis ── */
.cr-sector-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cr-sector-row {
    display: grid;
    grid-template-columns: 100px 1fr 110px 70px;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    transition: var(--v2-transition);
}

.cr-sector-row:hover {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.cr-sector-name {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--v2-text);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-sector-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.cr-sector-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cr-sector-value {
    font-size: 0.68em;
    font-weight: 600;
    color: var(--v2-text-muted);
    text-align: left;
}

.cr-sector-count {
    font-size: 0.62em;
    color: var(--v2-text-dim);
    text-align: left;
}

/* ── Invoice Status Grid ── */
.cr-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.cr-status-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 10px;
    border-radius: var(--v2-radius-sm);
    border: 1px solid var(--v2-border-light);
    transition: var(--v2-transition);
}

.cr-status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.cr-status-card svg {
    width: 18px;
    height: 18px;
}

.cr-status-closed {
    background: rgba(34, 197, 94, 0.04);
    color: #22c55e;
}

.cr-status-open {
    background: rgba(59, 130, 246, 0.04);
    color: #3b82f6;
}

.cr-status-overdue {
    background: rgba(239, 68, 68, 0.04);
    color: #ef4444;
}

.cr-status-partial {
    background: rgba(245, 158, 11, 0.04);
    color: #f59e0b;
}

.cr-status-count {
    font-size: 1.2em;
    font-weight: 800;
    color: var(--v2-text);
}

.cr-status-label {
    font-size: 0.7em;
    font-weight: 600;
}

.cr-status-amount {
    font-size: 0.62em;
    color: var(--v2-text-muted);
    margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .cr-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cr-summary-row {
        grid-template-columns: 1fr;
    }

    .cr-status-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cr-kpi-grid {
        grid-template-columns: 1fr;
    }

    .cr-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .cr-sector-row {
        grid-template-columns: 80px 1fr 90px;
    }

    .cr-sector-count {
        display: none;
    }
}

/* ── Entrance Animation ── */
@keyframes cr-fadeSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cr-report .cr-header {
    animation: cr-fadeSlide 0.4s ease both;
}

.cr-report .cr-kpi-grid {
    animation: cr-fadeSlide 0.4s 0.05s ease both;
}

.cr-report .cr-summary-row {
    animation: cr-fadeSlide 0.4s 0.1s ease both;
}

.cr-report .cr-section:nth-child(n) {
    animation: cr-fadeSlide 0.4s 0.15s ease both;
}
.upload-center {
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.upload-header {
    margin-bottom: 1.5rem;
}

.upload-header h1 {
    font-size: 1.8rem;
    color: #e2e8f0;
    margin: 0;
}

.upload-subtitle {
    color: var(--dsox-muted, #94a3b8);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

/* ======================= Drop Zone ======================= */
.drop-zone {
    border: 2px dashed rgba(0, 212, 170, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    margin-bottom: 1.5rem;
}

.drop-zone:hover,
.drop-zone.dragging {
    border-color: var(--dsox-cyan, #00d4aa);
    background: rgba(0, 212, 170, 0.06);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 212, 170, 0.15);
}

.drop-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.drop-primary {
    font-size: 1.1rem;
    color: #e2e8f0;
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.drop-secondary {
    font-size: 0.85rem;
    color: var(--dsox-muted, #94a3b8);
    margin: 0 0 1rem;
}

.drop-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-tag {
    background: rgba(0, 212, 170, 0.12);
    color: var(--dsox-cyan, #00d4aa);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: monospace;
}

.meta-divider {
    color: var(--dsox-muted, #94a3b8);
}

.meta-limit {
    color: var(--dsox-muted, #94a3b8);
    font-size: 0.8rem;
}

/* =================== Pipeline Strip =================== */
.pipeline-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.pipeline-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dsox-muted, #94a3b8);
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}

.pipeline-step.completed {
    color: var(--dsox-cyan, #00d4aa);
    background: rgba(0, 212, 170, 0.1);
}

.pipeline-step.active {
    color: #fff;
    background: rgba(0, 212, 170, 0.25);
    border: 1px solid rgba(0, 212, 170, 0.5);
    box-shadow: 0 0 10px rgba(0, 212, 170, 0.3);
    animation: pulse 1.5s infinite;
}

.step-num {
    background: rgba(0, 212, 170, 0.2);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.pipeline-step.active .step-num {
    background: var(--dsox-cyan, #00d4aa);
    color: #000;
}

.pipeline-arrow {
    color: var(--dsox-muted, #94a3b8);
    font-size: 0.9rem;
    transition: color 0.3s;
}

.pipeline-arrow.active-arrow {
    color: var(--dsox-cyan, #00d4aa);
}

/* =================== Content Layout =================== */
.upload-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* ===================== Files Panel ===================== */
.files-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 212, 170, 0.1);
    border-radius: 16px;
    padding: 1.25rem;
    backdrop-filter: blur(8px);
}

.files-panel h2 {
    font-size: 1.1rem;
    color: #e2e8f0;
    margin: 0 0 1rem;
}

.files-table-wrapper {
    overflow-x: auto;
}

.files-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.files-table th {
    text-align: right;
    padding: 10px 12px;
    color: var(--dsox-muted, #94a3b8);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[dir="ltr"] .files-table th {
    text-align: left;
}

.file-row {
    cursor: pointer;
    transition: background 0.2s;
}

.file-row:hover {
    background: rgba(0, 212, 170, 0.06);
}

.file-row.selected {
    background: rgba(0, 212, 170, 0.1);
}

.files-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
    white-space: nowrap;
}

.file-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.file-icon {
    font-size: 1.1rem;
}

.type-badge {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.type-badge.excel {
    background: rgba(34, 139, 34, 0.15);
    color: #4ade80;
}

.type-badge.csv {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.type-badge.pdf {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Progress Bar */
.status-upload {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar-mini {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--dsox-cyan, #00d4aa);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.status-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-badge.complete {
    background: rgba(0, 212, 170, 0.12);
    color: #00d4aa;
}

.status-badge.processing {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    animation: pulse 1.5s infinite;
}

.status-badge.error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.actions-cell {
    display: flex;
    gap: 4px;
}

.action-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s;
    background: transparent;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* =================== Report Panel =================== */
.report-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 212, 170, 0.1);
    border-radius: 16px;
    padding: 1.25rem;
    backdrop-filter: blur(8px);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.report-header h2 {
    font-size: 1.1rem;
    color: #e2e8f0;
    margin: 0 0 0.25rem;
}

.report-filename {
    color: var(--dsox-cyan, #00d4aa);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

/* KPI Summary */
.report-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.25rem;
}

.report-kpi {
    background: rgba(0, 212, 170, 0.06);
    border: 1px solid rgba(0, 212, 170, 0.15);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.report-kpi.warning {
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.2);
}

.report-kpi.danger {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}

.report-kpi.success {
    background: rgba(0, 212, 170, 0.08);
    border-color: rgba(0, 212, 170, 0.2);
}

.kpi-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #e2e8f0;
}

.kpi-label {
    font-size: 0.75rem;
    color: var(--dsox-muted, #94a3b8);
    margin-top: 2px;
}

/* Agent Results */
.agent-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.25rem;
}

.agent-result-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 10px 14px;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.agent-result-card.success {
    border-left-color: #00d4aa;
}

.agent-result-card.warning {
    border-left-color: #fbbf24;
}

.agent-result-card.error {
    border-left-color: #ef4444;
}

.agent-result-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.agent-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.agent-result-icon {
    font-size: 1rem;
}

.agent-result-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #e2e8f0;
    flex: 1;
}

.agent-result-badge {
    font-size: 0.8rem;
}

.agent-result-message {
    color: var(--dsox-text, #e2e8f0);
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.4;
}

.agent-result-details {
    color: var(--dsox-muted, #94a3b8);
    font-size: 0.78rem;
    margin: 4px 0 0;
    font-family: monospace;
}

/* Report Actions */
.report-actions {
    display: flex;
    gap: 10px;
}

.report-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.report-btn.primary {
    background: linear-gradient(135deg, #00d4aa, #00b894);
    color: #0a1628;
}

.report-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 212, 170, 0.3);
}

.report-btn.secondary {
    background: rgba(255, 107, 53, 0.12);
    color: var(--dsox-orange, #ff6b35);
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.report-btn.secondary:hover {
    background: rgba(255, 107, 53, 0.2);
    transform: translateY(-2px);
}

/* =================== Responsive =================== */
@media (max-width: 1024px) {
    .upload-content {
        grid-template-columns: 1fr;
    }

    .report-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pipeline-strip {
        font-size: 0.7rem;
    }

    .report-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .report-actions {
        flex-direction: column;
    }
}/* ═══════════════════════════════════════════════
   AI Command Center — Youssef Architecture Layout
   Workspace Sidebar + Chat + Context Panel
   ═══════════════════════════════════════════════ */

/* Container: sidebar + main */
.cc-container {
    display: flex;
    height: calc(100vh - 2rem);
    background: #0a0e1a;
    border-radius: 12px;
    overflow: hidden;
    margin: 1rem;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

/* ── Workspace Sidebar ── */
.cc-sidebar {
    width: 280px;
    min-width: 280px;
    background: rgba(10, 14, 26, 0.95);
    border-left: 1px solid rgba(99, 102, 241, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cc-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.cc-sidebar-header h3 {
    margin: 0;
    color: #e2e8f0;
    font-size: 1rem;
}

.cc-sidebar-new {
    padding: 0.35rem 0.8rem;
    background: linear-gradient(135deg, #00d4aa, #10b981);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cc-sidebar-new:hover {
    transform: scale(1.05);
}

.cc-sidebar-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.cc-sidebar-clear {
    padding: 0.35rem 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cc-sidebar-clear:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

/* New Workspace Form */
.cc-new-ws {
    padding: 0.8rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cc-new-ws-input,
.cc-new-ws-select {
    padding: 0.5rem 0.7rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.85rem;
    outline: none;
}

.cc-new-ws-input:focus,
.cc-new-ws-select:focus {
    border-color: #00d4aa;
}

.cc-new-ws-btn {
    padding: 0.45rem;
    background: #00d4aa;
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Workspace List */
.cc-ws-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.cc-ws-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 0.25rem;
}

.cc-ws-item:hover {
    background: rgba(99, 102, 241, 0.08);
}

.cc-ws-item.active {
    background: rgba(0, 212, 170, 0.1);
    border: 1px solid rgba(0, 212, 170, 0.2);
}

.cc-ws-icon {
    font-size: 1.3rem;
    min-width: 28px;
    text-align: center;
}

.cc-ws-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cc-ws-title {
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-ws-meta {
    color: #64748b;
    font-size: 0.7rem;
}

/* Cost Monitor */
.cc-cost-monitor {
    padding: 0.8rem 1rem;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    background: rgba(0, 212, 170, 0.03);
}

.cc-cost-label {
    color: #64748b;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.cc-cost-value {
    color: #00d4aa;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

/* ── Main Chat Area ── */
.cc-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.25rem;
    background: rgba(15, 23, 42, 0.8);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.cc-sidebar-toggle {
    padding: 0.4rem 0.6rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.cc-sidebar-toggle:hover {
    background: rgba(99, 102, 241, 0.2);
}

.cc-header-center {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.cc-header-icon {
    font-size: 1.8rem;
}

.cc-header-title {
    margin: 0;
    color: #f1f5f9;
    font-size: 1.2rem;
}

.cc-header-agent {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Agent Picker */
.cc-agent-picker-wrap {
    position: relative;
}

.cc-agent-btn {
    padding: 0.5rem 1rem;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.cc-agent-btn:hover {
    background: rgba(99, 102, 241, 0.1);
}

.cc-agent-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 0.5rem;
    z-index: 100;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    max-height: 400px;
    overflow-y: auto;
}

.cc-agent-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e2e8f0;
    cursor: pointer;
    text-align: right;
    transition: background 0.15s;
}

.cc-agent-option:hover {
    background: rgba(99, 102, 241, 0.1);
}

.cc-agent-option.active {
    background: rgba(0, 212, 170, 0.1);
}

.cc-agent-option-icon {
    font-size: 1.5rem;
    min-width: 32px;
}

.cc-agent-option-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.cc-agent-option-desc {
    font-size: 0.75rem;
    color: #64748b;
}

/* ── Messages ── */
.cc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cc-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
    flex: 1;
}

.cc-welcome-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.cc-welcome h3 {
    color: #e2e8f0;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.cc-welcome p {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.cc-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.cc-quick-btn {
    padding: 0.45rem 0.9rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    color: #a5b4fc;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.cc-quick-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

/* User messages */
.cc-msg-user {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.6rem;
}

.cc-msg-avatar-user {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    font-size: 0.7rem;
    font-weight: 700;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-msg-bubble-user {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px 12px 2px 12px;
    padding: 0.7rem 1rem;
    color: #e2e8f0;
    font-size: 0.92rem;
    max-width: 70%;
    line-height: 1.6;
}

/* Agent messages */
.cc-msg-agent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.cc-msg-avatar-agent {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cc-msg-content {
    max-width: 75%;
}

.cc-msg-bubble-agent {
    background: rgba(0, 212, 170, 0.08);
    border: 1px solid rgba(0, 212, 170, 0.15);
    border-radius: 12px 12px 12px 2px;
    padding: 0.8rem 1rem;
    color: #e2e8f0;
    font-size: 0.92rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.cc-msg-cost {
    padding: 0.25rem 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: #64748b;
    font-family: 'Courier New', monospace;
}

/* Suggestions */
.cc-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.cc-suggestion-btn {
    padding: 0.35rem 0.7rem;
    background: rgba(0, 212, 170, 0.08);
    border: 1px solid rgba(0, 212, 170, 0.2);
    border-radius: 16px;
    color: #00d4aa;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cc-suggestion-btn:hover {
    background: rgba(0, 212, 170, 0.15);
    transform: translateY(-1px);
}

/* Typing indicator */
.cc-typing {
    display: flex;
    gap: 4px;
    padding: 0.8rem 1rem;
    background: rgba(0, 212, 170, 0.08);
    border: 1px solid rgba(0, 212, 170, 0.15);
    border-radius: 12px 12px 12px 2px;
}

.cc-typing span {
    width: 8px;
    height: 8px;
    background: #00d4aa;
    border-radius: 50%;
    animation: typingBounce 1.2s ease-in-out infinite;
}

.cc-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.cc-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* ── Input Area ── */
.cc-input-area {
    padding: 0.8rem 1.25rem;
    background: rgba(15, 23, 42, 0.8);
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.cc-input-row {
    display: flex;
    gap: 0.5rem;
}

.cc-input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(10, 14, 26, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.cc-input:focus {
    border-color: #00d4aa;
}

.cc-input::placeholder {
    color: #475569;
}

.cc-send-btn {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #00d4aa, #10b981);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3);
}

.cc-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cc-input-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.4rem;
    font-size: 0.72rem;
}

.cc-token-count {
    color: #64748b;
    font-family: 'Courier New', monospace;
}

.cc-token-warn {
    color: #f59e0b;
}

.cc-ws-indicator {
    color: #00d4aa;
}

/* ── Scrollbar ── */
.cc-messages::-webkit-scrollbar,
.cc-ws-list::-webkit-scrollbar {
    width: 4px;
}

.cc-messages::-webkit-scrollbar-thumb,
.cc-ws-list::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 4px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cc-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .cc-agent-dropdown {
        width: 240px;
    }
}/* ═══════════════════════════════════════════
   Hub Layout — Shared Premium Dark UI
   ═══════════════════════════════════════════ */

.hub-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    gap: 1rem;
    overflow: hidden;
}

/* ── Header ── */
.hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.hub-title h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--dsox-text);
}

.hub-subtitle {
    color: var(--dsox-muted);
    font-size: 0.8rem;
}

.hub-agent-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    background: var(--dsox-glass);
    border: 1px solid;
    border-radius: 12px;
}

.agent-icon {
    font-size: 1.5rem;
}

.agent-info {
    display: flex;
    flex-direction: column;
}

.agent-name {
    color: var(--dsox-text);
    font-weight: 600;
    font-size: 0.85rem;
}

.agent-status {
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── Body — Split Panel ── */
.hub-body {
    flex: 1;
    display: flex;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

/* Right Panel — Static Dashboard */
.hub-dashboard-panel {
    width: 340px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--dsox-glass) transparent;
}

/* Left Panel — Interactive */
.hub-interactive-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    overflow: hidden;
}

.hub-visual-section {
    flex: 1;
    background: var(--dsox-glass);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1rem;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.hub-visual-section h3 {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--dsox-text);
}

.hub-chat-section {
    height: 280px;
    flex-shrink: 0;
    background: var(--dsox-glass);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   Dashboard Cards (Right Panel)
   ═══════════════════════════════════════════ */

.dash-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem;
}

.dash-card h3 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--dsox-cyan);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-card h3 .card-icon {
    font-size: 1rem;
}

/* KPI Row */
.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kpi-mini {
    background: rgba(0, 212, 170, 0.05);
    border: 1px solid rgba(0, 212, 170, 0.1);
    border-radius: 10px;
    padding: 0.6rem;
    text-align: center;
}

.kpi-mini .kpi-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dsox-cyan);
    display: block;
}

.kpi-mini .kpi-label {
    font-size: 0.65rem;
    color: var(--dsox-muted);
    margin-top: 0.1rem;
    display: block;
}

/* Mini Table */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.mini-table th {
    color: var(--dsox-cyan);
    font-weight: 600;
    padding: 0.4rem 0.5rem;
    text-align: right;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--dsox-glass);
}

.mini-table td {
    padding: 0.35rem 0.5rem;
    color: var(--dsox-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.mini-table tr:hover td {
    background: rgba(0, 212, 170, 0.03);
}

/* Risk Badges */
.risk-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.risk-badge.a {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.risk-badge.b {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.risk-badge.c {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.risk-badge.d {
    background: rgba(0, 212, 170, 0.15);
    color: var(--dsox-cyan);
}

/* Status indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
}

.status-indicator.danger {
    color: #ef4444;
}

.status-indicator.warning {
    color: #f59e0b;
}

.status-indicator.success {
    color: var(--dsox-cyan);
}

/* ═══════════════════════════════════════════
   Hub Chat Panel
   ═══════════════════════════════════════════ */

.hub-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.hub-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--dsox-glass) transparent;
}

/* Context Summary Badge */
.hub-chat-context-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.08), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(0, 212, 170, 0.2);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--dsox-cyan);
    font-weight: 600;
    margin-bottom: 0.25rem;
    animation: badgeFadeIn 0.5s ease;
    flex-shrink: 0;
}

.hub-chat-context-badge .badge-sep {
    color: rgba(148, 163, 184, 0.3);
    font-weight: 400;
}

@keyframes badgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hub-chat-welcome {
    text-align: center;
    padding: 1rem;
    color: var(--dsox-muted);
    font-size: 0.85rem;
}

.welcome-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.4rem;
}

.hub-chat-welcome strong {
    color: var(--dsox-text);
}

.hub-chat-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.hub-chat-msg.user {
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.msg-bubble {
    max-width: 75%;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.msg-bubble p {
    margin: 0;
}

.msg-bubble.user {
    background: linear-gradient(135deg, var(--dsox-cyan), #3b82f6);
    color: var(--dsox-navy);
    border-bottom-right-radius: 4px;
}

.msg-bubble.agent {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dsox-text);
    border-bottom-left-radius: 4px;
}

/* Typing indicator */
.msg-bubble.typing {
    display: flex;
    gap: 4px;
    padding: 0.6rem 1rem;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dsox-muted);
    animation: typingBounce 1.2s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Suggestions */
.hub-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.75rem 0.5rem;
}

.suggestion-chip {
    background: rgba(0, 212, 170, 0.08);
    border: 1px solid rgba(0, 212, 170, 0.2);
    color: var(--dsox-cyan);
    padding: 0.3rem 0.7rem;
    border-radius: 16px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.suggestion-chip:hover {
    background: rgba(0, 212, 170, 0.15);
    transform: translateY(-1px);
}

/* Input */
.hub-chat-input-wrapper {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hub-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    color: var(--dsox-text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.hub-chat-input:focus {
    border-color: var(--dsox-cyan);
}

.hub-chat-input::placeholder {
    color: rgba(148, 163, 184, 0.4);
}

.hub-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-chat-send:hover:not(:disabled) {
    transform: scale(1.05);
}

.hub-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════
   Gauge Chart (Legal Compliance)
   ═══════════════════════════════════════════ */

.gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
}

.gauge-visual {
    position: relative;
    width: 140px;
    height: 75px;
    overflow: hidden;
}

.gauge-bg {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 12px solid rgba(255, 255, 255, 0.06);
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(225deg);
    position: absolute;
    top: 0;
    box-sizing: border-box;
}

.gauge-fill {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 12px solid transparent;
    border-top-color: var(--dsox-cyan);
    border-right-color: var(--dsox-cyan);
    position: absolute;
    top: 0;
    box-sizing: border-box;
    transition: transform 0.8s ease;
}

.gauge-value {
    text-align: center;
    margin-top: 0.3rem;
}

.gauge-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dsox-text);
}

.gauge-label {
    font-size: 0.7rem;
    color: var(--dsox-muted);
    display: block;
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .hub-body {
        flex-direction: column;
    }

    .hub-dashboard-panel {
        width: 100%;
        max-height: 250px;
        flex-direction: row;
        overflow-x: auto;
        padding-left: 0;
    }

    .hub-dashboard-panel .dash-card {
        min-width: 280px;
    }
}/* ══════════════════════════════════════════════════
   Comprehensive Analysis Hub — Premium Dashboard
   ══════════════════════════════════════════════════ */

.ca-hub {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
  font-family: 'Inter', 'Cairo', sans-serif;
}

/* ── Header ── */
.ca-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 20px 28px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.ca-header-left h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 4px 0;
}

.ca-header-left p {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.ca-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ca-export-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.ca-export-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ca-export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ca-lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.ca-lang-toggle:hover {
  background: rgba(99, 102, 241, 0.25);
}

/* ── Body: Sidebar + Content ── */
.ca-body {
  display: flex;
  gap: 16px;
  min-height: 600px;
}

/* RTL (Arabic): tabs on RIGHT — content first, tabs second */
.ca-body-rtl { flex-direction: row-reverse; }
/* LTR (English): tabs on LEFT — tabs first, content second */
.ca-body-ltr { flex-direction: row; }

/* ── Vertical Tabs Sidebar ── */
.ca-tabs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.4);
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 70px;
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}

.ca-tab {
  padding: 8px 12px;
  background: transparent;
  color: #94a3b8;
  border: none;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: start;
}

.ca-tab:hover {
  background: rgba(51, 65, 85, 0.5);
  color: #e2e8f0;
}

.ca-tab.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  font-weight: 600;
}

/* ── Content Panel ── */
.ca-content {
  flex: 1;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.4);
  border-radius: 16px;
  padding: 24px;
  min-height: 500px;
  backdrop-filter: blur(10px);
  min-width: 0;
}

/* ── Loading / Empty States ── */
.ca-loading, .ca-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #64748b;
  gap: 16px;
}

.ca-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: ca-spin 0.8s linear infinite;
}

@keyframes ca-spin {
  to { transform: rotate(360deg); }
}

.ca-empty-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

/* ── KPI Cards Grid ── */
.ca-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.ca-kpi-card {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(51, 65, 85, 0.4);
  border-radius: 12px;
  transition: transform 0.2s, border-color 0.2s;
}

.ca-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.4);
}

.ca-kpi-card .label {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ca-kpi-card .value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #f1f5f9;
}

.ca-kpi-card .sub {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 4px;
}

.ca-kpi-card.green { border-left: 3px solid #10b981; }
.ca-kpi-card.blue { border-left: 3px solid #3b82f6; }
.ca-kpi-card.orange { border-left: 3px solid #f59e0b; }
.ca-kpi-card.red { border-left: 3px solid #ef4444; }
.ca-kpi-card.purple { border-left: 3px solid #8b5cf6; }

/* ── Section Title ── */
.ca-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Data Tables ── */
.ca-table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
  border-radius: 10px;
  border: 1px solid rgba(51, 65, 85, 0.3);
}

.ca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ca-table thead th {
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.9);
  color: #94a3b8;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid rgba(51, 65, 85, 0.5);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ca-table tbody td {
  padding: 9px 14px;
  color: #e2e8f0;
  text-align: center;
  border-bottom: 1px solid rgba(51, 65, 85, 0.2);
  white-space: nowrap;
}

.ca-table tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.3);
}

.ca-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

.ca-table td.text-left {
  text-align: left;
}

/* ── Status Badges ── */
.ca-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}

.ca-badge.pass { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.ca-badge.warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.ca-badge.fail { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.ca-badge.pending { background: rgba(99, 102, 241, 0.15); color: #818cf8; }

/* ── YoY Comparison Row ── */
.ca-yoy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ca-yoy-card {
  padding: 16px 20px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.3);
  border-radius: 12px;
}

.ca-yoy-card .fy-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #818cf8;
  margin-bottom: 10px;
}

.ca-yoy-card .fy-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ca-yoy-card .fy-stat {
  display: flex;
  flex-direction: column;
}

.ca-yoy-card .fy-stat .stat-label {
  font-size: 0.68rem;
  color: #64748b;
}

.ca-yoy-card .fy-stat .stat-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
}

/* ── Health Score ── */
.ca-health-score {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(30, 41, 59, 0.7);
  border-radius: 14px;
  margin-bottom: 20px;
}

.ca-health-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
}

.ca-health-ring.high { background: linear-gradient(135deg, #059669, #10b981); }
.ca-health-ring.medium { background: linear-gradient(135deg, #d97706, #f59e0b); }
.ca-health-ring.low { background: linear-gradient(135deg, #dc2626, #ef4444); }

/* ── Target Tracking ── */
.ca-target-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(51, 65, 85, 0.2);
}

.ca-target-metric { color: #e2e8f0; font-weight: 500; font-size: 0.85rem; }
.ca-target-value { color: #94a3b8; font-size: 0.82rem; text-align: center; }
.ca-target-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(51, 65, 85, 0.5);
  overflow: hidden;
}
.ca-target-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ca-hub { padding: 12px; }
  .ca-header { flex-direction: column; gap: 12px; text-align: center; }
  .ca-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-body { flex-direction: column !important; }
  .ca-tabs { 
    flex-direction: row;
    width: 100%;
    min-width: unset;
    overflow-x: auto;
    position: static;
    max-height: unset;
  }
  .ca-tab { padding: 6px 10px; font-size: 0.72rem; }
  .wael-health-banner { flex-direction: column; text-align: center; }
  .wael-health-stats { justify-content: center; }
  .wael-insight-row { flex-direction: column; }
}

/* ══════════════════════════════════════════════
   Wael Intelligence — Premium Styles
   ══════════════════════════════════════════════ */

/* ── Health Banner ── */
.wael-health-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.wael-health-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.wael-health-emoji {
  font-size: 3rem;
  line-height: 1;
  animation: wael-pulse 2s ease-in-out infinite;
}

@keyframes wael-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.wael-health-text {
  flex: 1;
}

.wael-health-status {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f1f5f9;
}

.wael-health-sub {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 2px;
  font-family: 'Cairo', 'Inter', sans-serif;
  direction: rtl;
}

.wael-health-stats {
  display: flex;
  gap: 20px;
}

.wael-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wael-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
}

.wael-stat span:last-child {
  font-size: 0.68rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Insight Cards Grid (Priority Actions) ── */
.wael-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.wael-insight-card {
  padding: 18px 20px;
  background: rgba(30, 41, 59, 0.7);
  border-radius: 12px;
  border-left: 4px solid #64748b;
  transition: transform 0.2s, box-shadow 0.2s;
}

.wael-insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.wael-insight-card.severity-critical { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.wael-insight-card.severity-warning { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.06); }
.wael-insight-card.severity-info { border-left-color: #3b82f6; }
.wael-insight-card.severity-positive { border-left-color: #10b981; background: rgba(16, 185, 129, 0.06); }

.wael-insight-header {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 8px;
}

.wael-insight-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 8px 0;
}

.wael-insight-rec {
  font-size: 0.75rem;
  color: #818cf8;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 8px;
  margin-top: 8px;
  line-height: 1.45;
}

.wael-insight-ar {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 8px;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  text-align: right;
}

/* ── Insights List ── */
.wael-insights-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.wael-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.3);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.wael-insight-row:hover {
  border-color: rgba(99, 102, 241, 0.3);
}

.wael-insight-row.severity-critical { border-left: 3px solid #ef4444; }
.wael-insight-row.severity-warning { border-left: 3px solid #f59e0b; }
.wael-insight-row.severity-info { border-left: 3px solid #3b82f6; }
.wael-insight-row.severity-positive { border-left: 3px solid #10b981; }

.wael-insight-icons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1rem;
  flex-shrink: 0;
}

.wael-insight-body {
  flex: 1;
}

.wael-insight-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.wael-insight-ar-badge {
  font-size: 0.7rem;
  color: #64748b;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(51, 65, 85, 0.3);
  border-radius: 6px;
  flex-shrink: 0;
  align-self: center;
}

/* ── Credit Narrative Cards ── */
.wael-narrative-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.3);
  border-radius: 10px;
  margin-bottom: 10px;
}

.wael-narrative-score {
  font-size: 1.3rem;
  font-weight: 800;
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
}

.wael-narrative-text {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.55;
}

.wael-narrative-text strong {
  color: #e2e8f0;
}

/* ── Agent Footer ── */
.wael-agent-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  margin-top: 24px;
  color: #475569;
  font-size: 0.75rem;
  border-top: 1px solid rgba(51, 65, 85, 0.2);
}

.wael-agent-footer strong {
  color: #818cf8;
}

/* ══════════════════════════════════════════════════
   Wael Chat — Credit Intelligence Agent UI
   ══════════════════════════════════════════════════ */

.wael-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 280px);
  min-height: 500px;
  max-height: 800px;
}

/* ── Stats Badge ── */
.wael-chat-stats-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 0.78rem;
  margin-bottom: 16px;
  flex-wrap: wrap;
  direction: rtl;
}

.wael-badge-sep {
  color: rgba(99, 102, 241, 0.3);
  font-weight: 300;
}

/* ── Messages Area ── */
.wael-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.wael-chat-messages::-webkit-scrollbar {
  width: 6px;
}
.wael-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.wael-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 10px;
}

/* ── Welcome Screen ── */
.wael-chat-welcome {
  text-align: center;
  padding: 60px 20px 20px;
  animation: waelFadeIn 0.8s ease;
}

.wael-avatar-large {
  font-size: 4rem;
  margin-bottom: 16px;
  animation: waelPulse 3s ease-in-out infinite;
}

.wael-chat-welcome h2 {
  font-size: 1.5rem;
  color: #f1f5f9;
  margin: 0 0 8px;
  font-weight: 700;
}

.wael-name-highlight {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wael-chat-welcome p {
  color: #94a3b8;
  font-size: 0.95rem;
  margin: 4px 0;
  direction: rtl;
}

.wael-welcome-en {
  color: #64748b !important;
  font-size: 0.82rem !important;
  margin-top: 8px !important;
  font-style: italic;
}

/* ── Suggestions ── */
.wael-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 8px;
  justify-content: center;
  direction: rtl;
}

.wael-suggestion-chip {
  padding: 8px 16px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  color: #a5b4fc;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: 'Cairo', 'Inter', sans-serif;
  white-space: nowrap;
}

.wael-suggestion-chip:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* ── Chat Messages ── */
.wael-chat-msg {
  display: flex;
  gap: 10px;
  animation: waelMsgSlide 0.35s ease;
}

.wael-chat-msg.user {
  justify-content: flex-end;
  direction: rtl;
}

.wael-chat-msg.agent {
  justify-content: flex-start;
  direction: rtl;
}

.wael-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.wael-msg-bubble {
  max-width: 75%;
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.75;
  direction: rtl;
  text-align: right;
  position: relative;
}

.wael-msg-bubble p {
  margin: 0;
}

.wael-msg-bubble.user {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.wael-msg-bubble.agent {
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-bottom-left-radius: 4px;
}

.wael-msg-cost {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  color: #64748b;
  text-align: left;
  direction: ltr;
}

/* ── Typing Indicator ── */
.wael-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 24px !important;
}

.wael-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366f1;
  animation: waelBounce 1.4s ease-in-out infinite;
}

.wael-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.wael-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* ── Input ── */
.wael-chat-input-wrapper {
  display: flex;
  gap: 10px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(51, 65, 85, 0.3);
  margin-top: 8px;
}

.wael-chat-input {
  flex: 1;
  padding: 14px 20px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 14px;
  color: #f1f5f9;
  font-size: 0.9rem;
  direction: rtl;
  font-family: 'Cairo', 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wael-chat-input::placeholder {
  color: #475569;
}

.wael-chat-input:focus {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.wael-chat-send {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.wael-chat-send:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.wael-chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Animations ── */
@keyframes waelFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes waelPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

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

@keyframes waelBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}


/* ══════════════════════════════════════════════════
   Methodology Tab — Financial Documentation
   ══════════════════════════════════════════════════ */

.meth-container {
  max-width: 900px;
  margin: 0 auto;
  animation: waelFadeIn 0.5s ease;
}

/* ── Header ── */
.meth-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 16px;
  margin-bottom: 20px;
}

.meth-header-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.meth-header-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
  font-family: 'Cairo', 'Inter', sans-serif;
  direction: rtl;
}

.meth-header-subtitle {
  font-size: 0.82rem;
  color: #64748b;
  margin: 4px 0 0;
}

/* ── Intro Block ── */
.meth-intro {
  padding: 18px 22px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.3);
  border-radius: 12px;
  margin-bottom: 20px;
  font-family: 'Cairo', 'Inter', sans-serif;
  direction: rtl;
  text-align: right;
}

.meth-intro p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.7;
}

.meth-intro-en {
  font-style: italic;
  color: #64748b !important;
  direction: ltr;
  text-align: left;
  font-size: 0.8rem !important;
  font-family: 'Inter', sans-serif;
}

/* ── Accordion Sections ── */
.meth-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meth-section {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.3);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.meth-section.expanded {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
}

.meth-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.2s;
}

.meth-section-header:hover {
  background: rgba(99, 102, 241, 0.06);
}

.meth-section-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.meth-section-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.meth-section-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #f1f5f9;
}

.meth-section-title-ar {
  font-size: 0.78rem;
  color: #64748b;
  font-family: 'Cairo', 'Inter', sans-serif;
  direction: rtl;
  margin-top: 2px;
}

.meth-chevron {
  font-size: 1.2rem;
  color: #64748b;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.meth-chevron.open {
  transform: rotate(90deg);
  color: #818cf8;
}

.meth-section-body {
  padding: 0 20px 20px;
  animation: methSlideDown 0.3s ease;
  font-family: 'Cairo', 'Inter', sans-serif;
  direction: rtl;
  text-align: right;
}

@keyframes methSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Formula Blocks ── */
.meth-formula-block {
  padding: 16px 18px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 10px;
  margin-bottom: 14px;
}

.meth-formula-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.meth-formula {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  direction: ltr;
  text-align: left;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 6px;
  border-left: 3px solid rgba(99, 102, 241, 0.4);
  overflow-x: auto;
  line-height: 1.6;
}

.meth-formula-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.7;
  margin-top: 8px;
}

.meth-formula-desc code {
  background: rgba(99, 102, 241, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #a5b4fc;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  direction: ltr;
  unicode-bidi: embed;
}

.meth-formula-source {
  font-size: 0.7rem;
  color: #475569;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
  text-align: left;
}

/* ── Methodology Tables ── */
.meth-table {
  font-size: 0.78rem !important;
  margin-bottom: 12px;
}

.meth-table td,
.meth-table th {
  direction: rtl;
  text-align: right !important;
  white-space: normal !important;
}

.meth-table td:first-child {
  font-weight: 600;
  color: #a5b4fc;
}

/* ── Benchmark Visualization ── */
.meth-benchmark {
  padding: 14px 18px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meth-bench-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: #cbd5e1;
  direction: rtl;
}

.meth-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.meth-dot.green { background: #22c55e; }
.meth-dot.blue { background: #3b82f6; }
.meth-dot.yellow { background: #f59e0b; }
.meth-dot.orange { background: #f97316; }
.meth-dot.red { background: #ef4444; }

/* ── Decision Matrix ── */
.meth-decision-matrix {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

.meth-decision-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  border-left: 4px solid #64748b;
  font-size: 0.82rem;
  color: #e2e8f0;
  direction: rtl;
  transition: background 0.2s;
}

.meth-decision-row:hover {
  background: rgba(15, 23, 42, 0.75);
}

.meth-decision-score {
  font-weight: 700;
  font-size: 0.88rem;
  min-width: 50px;
  font-family: 'JetBrains Mono', monospace;
  color: #f1f5f9;
  direction: ltr;
}

/* ── Section Subtitle ── */
.meth-section-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  margin: 12px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(51, 65, 85, 0.4);
}

/* ── Notes & Warnings ── */
.meth-note {
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 0.78rem;
  color: #93c5fd;
  line-height: 1.6;
  margin: 10px 0;
}

.meth-warn {
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  font-size: 0.78rem;
  color: #fbbf24;
  line-height: 1.7;
  margin: 10px 0;
}

.meth-warn strong {
  color: #fcd34d;
}

/* ── Footer ── */
.meth-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px;
  margin-top: 24px;
  color: #475569;
  font-size: 0.75rem;
  border-top: 1px solid rgba(51, 65, 85, 0.2);
  text-align: center;
}

.meth-footer strong {
  color: #818cf8;
}

.meth-footer small {
  color: #334155;
  font-family: 'Cairo', 'Inter', sans-serif;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .meth-container { padding: 0 4px; }
  .meth-header { flex-direction: column; text-align: center; }
  .meth-formula { font-size: 0.85rem; }
  .meth-decision-row { flex-direction: column; gap: 6px; text-align: center; }
  .meth-section-header-left { gap: 10px; }
  .meth-section-title { font-size: 0.82rem; }
}
/* ═══════════════════════════════════════════════════════════════
   Agent Team Dashboard — فريق الائتمان والتحصيل
   Premium dark theme matching V2 design system
   ═══════════════════════════════════════════════════════════════ */

/* ── Loading & Error States ── */
.atd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 20px;
    color: var(--v2-text-muted);
    font-size: 16px;
}

.atd-loading-pulse {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #3b82f6);
    animation: atd-pulse-loading 1.2s ease-in-out infinite;
}

@keyframes atd-pulse-loading {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.atd-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    color: var(--v2-red);
}

.atd-error button {
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    color: var(--v2-text);
    padding: 8px 20px;
    border-radius: var(--v2-radius-sm);
    cursor: pointer;
    transition: var(--v2-transition);
}

.atd-error button:hover {
    background: var(--v2-bg-secondary);
    border-color: var(--v2-blue);
}

/* ── Root ── */
.atd-root {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Governance Panel ── */
.atd-governance {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(59, 130, 246, 0.04));
}

.atd-governance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.atd-governance-head h3 {
    font-size: 15px;
    color: var(--v2-text);
    margin: 0;
}

.atd-governance-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.atd-gov-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.atd-gov-card strong {
    color: #e2e8f0;
    font-size: 20px;
}

.atd-gov-card small {
    color: var(--v2-text-muted);
    font-size: 11px;
}

.atd-gov-label {
    color: #93c5fd;
    font-size: 12px;
}

.atd-gov-alert strong {
    color: #fca5a5;
}

.atd-governance-roles {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.atd-gov-role-item {
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 8px 10px;
}

.atd-gov-role-title {
    color: #cbd5e1;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.atd-gov-role-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--v2-text-muted);
    font-size: 11px;
}

.atd-quarantine {
    margin-top: 12px;
    border-top: 1px dashed var(--v2-border);
    padding-top: 12px;
}

.atd-quarantine h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: #fca5a5;
}

.atd-quarantine-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--v2-radius-sm);
    padding: 8px;
    margin-bottom: 8px;
}

.atd-quarantine-text {
    flex: 1;
    min-width: 0;
}

.atd-quarantine-text p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
    word-break: break-word;
}

.atd-quarantine-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: #fda4af;
}

.atd-quarantine-actions {
    display: flex;
    gap: 6px;
}

.atd-q-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: var(--v2-transition);
}

.atd-q-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.atd-q-approve {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}

.atd-q-approve:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.3);
}

.atd-q-reject {
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

.atd-q-reject:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.28);
}

.atd-quarantine-empty {
    margin-top: 12px;
    color: #86efac;
    font-size: 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.24);
    border-radius: var(--v2-radius-sm);
    padding: 8px 10px;
}

/* ── Header ── */
.atd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.atd-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.atd-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--v2-text);
}

.atd-title svg {
    color: var(--v2-blue);
}

.atd-subtitle {
    font-size: 14px;
    color: var(--v2-text-muted);
    padding-right: 40px;
}

.atd-refresh-btn {
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    color: var(--v2-text-muted);
    width: 40px;
    height: 40px;
    border-radius: var(--v2-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--v2-transition);
}

.atd-refresh-btn:hover {
    background: var(--v2-bg-secondary);
    color: var(--v2-blue);
    border-color: var(--v2-blue);
}

.atd-refresh-btn .spinning {
    animation: atd-spin 1s linear infinite;
}

@keyframes atd-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   Leader Card — خالد المالكي
   ═══════════════════════════════════════════ */
.atd-leader-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    margin-bottom: 32px;
    border-radius: var(--v2-radius-lg);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(245, 158, 11, 0.2);
    cursor: pointer;
    transition: var(--v2-transition);
    overflow: hidden;
}

.atd-leader-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6, #3b82f6, #10b981);
    background-size: 200% 100%;
    animation: atd-leader-gradient 4s linear infinite;
}

@keyframes atd-leader-gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.atd-leader-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.12);
}

.atd-leader-crown {
    position: absolute;
    top: 12px;
    left: 16px;
    color: #f59e0b;
    animation: atd-crown-float 3s ease-in-out infinite;
}

@keyframes atd-crown-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Leader Avatar */
.atd-leader-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.atd-leader-emoji {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    z-index: 2;
    background: var(--v2-bg);
    border-radius: 50%;
    margin: 4px;
}

.atd-leader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.atd-leader-info {
    flex: 1;
    min-width: 0;
}

.atd-leader-name {
    font-size: 22px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 2px;
}

.atd-leader-title {
    font-size: 13px;
    color: var(--v2-text-muted);
    display: block;
    margin-bottom: 8px;
}

.atd-leader-greeting {
    font-size: 14px;
    color: var(--v2-text);
    opacity: 0.8;
    font-style: italic;
}

.atd-leader-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.atd-leader-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--v2-text-muted);
}

.atd-leader-stat svg {
    color: #f59e0b;
}

/* ═══════════════════════════════════════════
   Team Grid
   ═══════════════════════════════════════════ */
.atd-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

/* ── Agent Card ── */
.atd-agent-card {
    position: relative;
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 20px 18px 16px;
    cursor: pointer;
    transition: var(--v2-transition);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.atd-agent-card:hover {
    border-color: var(--agent-accent, var(--v2-blue));
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--agent-glow, rgba(59,130,246,0.15));
}

.atd-agent-card.selected {
    border-color: var(--agent-accent, var(--v2-blue));
    box-shadow: 0 0 0 1px var(--agent-accent, var(--v2-blue)),
                0 8px 24px var(--agent-glow, rgba(59,130,246,0.15));
}

/* Accent bar at top of card */
.atd-agent-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--v2-radius) var(--v2-radius) 0 0;
}

/* Avatar with pulse dot */
.atd-agent-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    background: var(--v2-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--v2-border);
    align-self: center;
}

.atd-agent-emoji {
    font-size: 24px;
}

.atd-agent-pulse {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--v2-card-solid);
    animation: atd-pulse 2s ease-in-out infinite;
}

@keyframes atd-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Agent info */
.atd-agent-info {
    text-align: center;
}

.atd-agent-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 2px;
}

.atd-agent-title {
    font-size: 12px;
    color: var(--v2-text-muted);
    display: block;
}

/* Status badge */
.atd-agent-status {
    display: flex;
    justify-content: center;
}

.atd-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.atd-status-badge.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.atd-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: atd-dot-blink 2s ease-in-out infinite;
}

@keyframes atd-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Last action text */
.atd-agent-action {
    font-size: 12px;
    color: var(--v2-text-dim);
    text-align: center;
    line-height: 1.4;
}

/* Personality traits */
.atd-agent-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.atd-trait-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--v2-text-muted);
    border: 1px solid var(--v2-border-light);
}

/* Chat button */
.atd-agent-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    background: transparent;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: var(--v2-transition);
}

.atd-agent-chat-btn:hover {
    background: var(--agent-glow, rgba(59,130,246,0.1));
    border-color: var(--agent-accent, var(--v2-blue));
    color: var(--agent-accent, var(--v2-blue));
}

/* Leader card chat button */
.atd-leader-chat-btn {
    margin-top: 8px;
    max-width: 260px;
    border-color: rgba(245, 158, 11, 0.3);
}

.atd-leader-chat-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: #f59e0b;
    color: #f59e0b;
}

/* ═══════════════════════════════════════════
   Detail Overlay Panel
   ═══════════════════════════════════════════ */
.atd-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: atd-fade-in 0.2s ease;
}

@keyframes atd-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.atd-detail-panel {
    position: relative;
    background: var(--v2-bg-secondary);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 32px;
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    animation: atd-slide-up 0.25s ease;
}

@keyframes atd-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.atd-detail-close {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    color: var(--v2-text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: var(--v2-transition);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atd-detail-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--v2-text);
}

.atd-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.atd-detail-emoji {
    font-size: 48px;
    background: var(--v2-bg);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--v2-border);
}

.atd-detail-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 4px;
}

.atd-detail-title-text {
    font-size: 14px;
    color: var(--v2-text-muted);
}

.atd-detail-greeting {
    font-size: 15px;
    color: var(--v2-text);
    opacity: 0.8;
    font-style: italic;
    text-align: center;
    padding: 16px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--v2-radius-sm);
    border: 1px solid var(--v2-border-light);
}

.atd-detail-quote {
    color: var(--v2-blue);
    font-size: 22px;
    font-weight: 700;
    margin: 0 4px;
}

/* Detail Sections */
.atd-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.atd-detail-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text);
    margin-bottom: 10px;
}

.atd-detail-section h4 svg {
    color: var(--v2-blue);
}

.atd-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.atd-detail-chip {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--v2-blue);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.atd-detail-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.atd-detail-stat {
    text-align: center;
    padding: 12px 8px;
    background: var(--v2-bg);
    border-radius: var(--v2-radius-sm);
    border: 1px solid var(--v2-border-light);
}

.atd-detail-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 4px;
}

.atd-detail-stat-label {
    font-size: 11px;
    color: var(--v2-text-dim);
}

.atd-detail-reporting {
    font-size: 13px;
    color: var(--v2-text-muted);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .atd-root {
        padding: 16px;
    }

    .atd-leader-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .atd-leader-stats {
        flex-direction: row;
        justify-content: center;
    }

    .atd-leader-crown {
        position: relative;
        top: auto;
        left: auto;
    }

    .atd-team-grid {
        grid-template-columns: 1fr;
    }

    .atd-detail-panel {
        width: 95%;
        padding: 24px;
    }

    .atd-detail-stats-grid {
        grid-template-columns: 1fr;
    }
}
/* ═══════════════════════════════════════════════════════════
   Deal Evaluation Engine — غرفة القرارات
   Dark theme, glassmorphism, matching V2 design system
   ═══════════════════════════════════════════════════════════ */

/* ── Root ── */
.de-root {
    padding: 0;
    min-height: calc(100vh - 80px);
}

.de-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: var(--v2-text-muted);
    text-align: center;
}

.de-empty h2 {
    color: var(--v2-text);
    font-size: 1.1em !important;
    font-weight: 700;
}

.de-empty p {
    font-size: 0.85em;
}

.de-empty svg {
    color: var(--v2-blue);
    opacity: 0.5;
}

/* ── Header ── */
.de-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--v2-border);
}

.de-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.de-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-blue);
}

.de-header-title h1 {
    font-size: 1em !important;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0;
    line-height: 1.2;
}

.de-header-title span {
    font-size: 0.68em;
    color: var(--v2-text-dim);
    letter-spacing: 0.5px;
}

.de-header-actions {
    display: flex;
    gap: 8px;
}

/* ── Buttons ── */
.de-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.78em;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--v2-font);
    white-space: nowrap;
}

.de-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text-muted);
    border: 1px solid var(--v2-border);
}

.de-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--v2-text);
}

.de-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
}

.de-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ── Main Grid ── */
.de-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 16px;
    align-items: start;
}

.de-col-inputs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
}

.de-col-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 16px;
}

/* ── Card ── */
.de-card {
    background: var(--v2-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 18px;
    transition: all 0.3s ease;
    position: relative;
}

.de-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Card that contains the customer search must sit above all other cards */
.de-card:has(.de-search-container) {
    z-index: 1000;
    overflow: visible;
}

.de-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88em !important;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--v2-border-light);
}

.de-card-title-center {
    font-size: 0.88em !important;
    font-weight: 700;
    color: var(--v2-text);
    text-align: center;
    margin-bottom: 14px;
}

.de-icon-blue { color: var(--v2-blue); }
.de-icon-cyan { color: var(--v2-cyan); }
.de-icon-yellow { color: var(--v2-yellow); }
.de-icon-green { color: var(--v2-green); }
.de-icon-purple { color: var(--v2-purple); }

/* ── Search ── */
.de-search-container {
    position: relative;
    z-index: 9999;
}

.de-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 10px 14px;
    color: var(--v2-text-muted);
    transition: border-color 0.2s ease;
}

.de-search-input-wrap:focus-within {
    border-color: var(--v2-blue);
}

.de-search-input-wrap input {
    background: none;
    border: none;
    color: var(--v2-text);
    font-size: 0.85em;
    outline: none;
    width: 100%;
    font-family: var(--v2-font);
}

.de-search-input-wrap input::placeholder {
    color: var(--v2-text-dim);
}

.de-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: var(--v2-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.de-search-clear:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ── Search Dropdown ── */
.de-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    max-height: 320px;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    animation: deDropIn 0.15s ease;
}

@keyframes deDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.de-search-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--v2-text);
    cursor: pointer;
    font-family: var(--v2-font);
    transition: background 0.15s ease;
    text-align: right;
}

.de-search-option:hover {
    background: rgba(59, 130, 246, 0.08);
}

.de-search-option:last-child {
    border-bottom: none;
}

.de-search-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.de-search-name {
    font-size: 0.82em;
    font-weight: 600;
}

.de-search-meta {
    font-size: 0.68em;
    color: var(--v2-text-dim);
}

.de-search-grade {
    font-size: 0.68em;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

/* ── Customer Scorecard ── */
.de-customer-card {
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--v2-radius-sm);
    padding: 14px;
    animation: deSlideIn 0.2s ease;
}

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

.de-customer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.de-customer-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85em;
    color: var(--v2-text);
}

.de-customer-name svg {
    color: var(--v2-blue);
}

.de-customer-grade-badge {
    font-size: 0.7em;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid;
}

.de-customer-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.de-ckpi {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 8px 4px;
}

.de-ckpi-val {
    display: block;
    font-size: 0.88em;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 2px;
}

.de-ckpi-label {
    font-size: 0.62em;
    color: var(--v2-text-dim);
}

.de-customer-score-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75em;
    color: var(--v2-text-muted);
}

/* ── Form Fields ── */
.de-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.de-form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.de-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.de-field label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--v2-text-muted);
}

.de-field-hint {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--v2-text-dim);
    margin-right: 6px;
}

.de-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 8px 12px;
    color: var(--v2-text-muted);
    transition: border-color 0.2s ease;
}

.de-input-wrap:focus-within {
    border-color: var(--v2-blue);
}

.de-input-wrap input,
.de-input-wrap select {
    background: none;
    border: none;
    color: var(--v2-text);
    font-size: 0.85em;
    outline: none;
    width: 100%;
    font-family: var(--v2-font);
}

.de-input-wrap select {
    cursor: pointer;
    -webkit-appearance: none;
}

.de-input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.de-input-group select {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 8px 12px;
    color: var(--v2-text);
    font-size: 0.82em;
    font-family: var(--v2-font);
    cursor: pointer;
    outline: none;
    flex: 1;
}

.de-input-group select:focus {
    border-color: var(--v2-blue);
}

.de-field input[type="number"],
.de-field select {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 8px 12px;
    color: var(--v2-text);
    font-size: 0.82em;
    font-family: var(--v2-font);
    outline: none;
    transition: border-color 0.2s ease;
}

.de-field input[type="number"]:focus,
.de-field select:focus {
    border-color: var(--v2-blue);
}

.de-profit-display {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82em;
    color: var(--v2-text-muted);
}

.de-profit-val {
    font-size: 1.15em;
    font-weight: 800;
}

/* ── Sector Selector ── */
.de-sector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.de-sector-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--v2-font);
}

.de-sector-option:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.de-sector-option.active {
    border-color: var(--v2-blue);
    background: rgba(59, 130, 246, 0.08);
}

.de-sector-option input[type="radio"] {
    display: none;
}

.de-sector-icon {
    font-size: 1.1em;
}

.de-sector-text {
    display: flex;
    flex-direction: column;
}

.de-sector-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--v2-text);
}

.de-sector-sub {
    font-size: 0.62em;
    color: var(--v2-text-dim);
}

.de-sector-benchmark {
    margin-top: 10px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.72em;
    color: var(--v2-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.de-sector-benchmark svg {
    flex-shrink: 0;
    color: var(--v2-blue);
    margin-top: 2px;
}

/* ── Slider ── */
.de-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.de-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    outline: none;
}

.de-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--v2-blue);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.de-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--v2-blue);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.de-slider-val {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--v2-blue);
    min-width: 42px;
    text-align: center;
}

.de-field-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72em;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    padding: 6px 10px;
    border-radius: 6px;
}

/* ── Stages Detail ── */
.de-stages-detail {
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    padding: 12px;
    animation: deSlideIn 0.15s ease;
}

.de-stages-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.68em;
    color: var(--v2-text-dim);
    font-style: italic;
}

/* ── Guarantees ── */
.de-guarantees-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.de-guarantee-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.de-guarantee-option:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.de-guarantee-option input {
    display: none;
}

.de-g-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--v2-text-muted);
    flex-shrink: 0;
}

.de-guarantee-option.active .de-g-icon {
    background: rgba(59, 130, 246, 0.15);
    color: var(--v2-blue);
}

.de-g-text {
    display: flex;
    flex-direction: column;
}

.de-g-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--v2-text);
}

.de-g-sub {
    font-size: 0.62em;
    color: var(--v2-text-dim);
}

/* ═══════════════════════════════════
   RESULTS COLUMN
   ═══════════════════════════════════ */

/* ── Score Card ── */
.de-score-card {
    border-top: 3px solid var(--v2-border) !important;
    text-align: center;
}

.de-score-circle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    position: relative;
}

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

.de-score-num {
    font-size: 2.2em;
    font-weight: 800;
    line-height: 1;
    transition: color 0.5s ease;
}

.de-score-of {
    font-size: 0.7em;
    color: var(--v2-text-dim);
    margin-top: 2px;
}

/* ── Risk Meter ── */
.de-risk-meter-wrap {
    margin: 16px 0;
    padding: 0 8px;
}

.de-risk-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.62em;
    color: var(--v2-text-dim);
    margin-bottom: 4px;
}

.de-risk-meter {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to left, #ef4444 0%, #f59e0b 50%, #10b981 100%);
    position: relative;
}

.de-risk-indicator {
    position: absolute;
    top: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--v2-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: -10px;
}

/* ── Decision ── */
.de-decision-text {
    padding: 14px;
    border-radius: var(--v2-radius-sm);
    font-weight: 700;
    font-size: 0.88em;
    border: 1px solid;
    margin: 12px 0;
    text-align: center;
}

.de-decision-empty {
    background: rgba(255, 255, 255, 0.03);
    color: var(--v2-text-dim);
    border-color: var(--v2-border);
}

.de-decision-score {
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 4px;
}

/* ── Action Button ── */
.de-action-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--v2-radius-sm);
    font-size: 0.82em;
    font-weight: 700;
    font-family: var(--v2-font);
    color: white;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
}

.de-action-btn:disabled {
    background: rgba(255, 255, 255, 0.04);
    color: var(--v2-text-dim);
    cursor: not-allowed;
}

.de-action-btn:not(:disabled):hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ── Breakdown ── */
.de-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.de-bd-item {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 10px 12px;
    border-right: 3px solid var(--v2-border);
    transition: all 0.2s ease;
}

.de-bd-item:hover {
    background: rgba(0, 0, 0, 0.18);
    transform: translateX(-3px);
}

.de-bd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.de-bd-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--v2-text);
}

.de-bd-score {
    font-size: 0.82em;
    font-weight: 800;
}

.de-bd-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.de-bd-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.de-bd-sub {
    font-size: 0.65em;
    color: var(--v2-text-dim);
}

/* ── Smart Alerts ── */
.de-alerts-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.de-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--v2-radius-sm);
    border-right: 3px solid;
    animation: deSlideIn 0.2s ease;
}

.de-alert-danger {
    background: rgba(239, 68, 68, 0.06);
    border-right-color: #ef4444;
}

.de-alert-warning {
    background: rgba(245, 158, 11, 0.06);
    border-right-color: #f59e0b;
}

.de-alert-success {
    background: rgba(16, 185, 129, 0.06);
    border-right-color: #10b981;
}

.de-alert-info {
    background: rgba(59, 130, 246, 0.06);
    border-right-color: #3b82f6;
}

.de-alert-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.de-alert-danger .de-alert-icon { color: #ef4444; }
.de-alert-warning .de-alert-icon { color: #f59e0b; }
.de-alert-success .de-alert-icon { color: #10b981; }
.de-alert-info .de-alert-icon { color: #3b82f6; }

.de-alert h4 {
    font-size: 0.78em !important;
    font-weight: 700;
    margin-bottom: 2px;
}

.de-alert-danger h4 { color: #ef4444; }
.de-alert-warning h4 { color: #f59e0b; }
.de-alert-success h4 { color: #10b981; }
.de-alert-info h4 { color: #3b82f6; }

.de-alert p {
    font-size: 0.7em;
    color: var(--v2-text-muted);
    line-height: 1.5;
}

/* ── Risk Analysis Card ── */
.de-analysis-card {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.de-analysis-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82em !important;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 8px;
}

.de-analysis-card p {
    font-size: 0.75em;
    color: var(--v2-text-muted);
    line-height: 1.7;
}

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */

@media (max-width: 1024px) {
    .de-grid {
        grid-template-columns: 1fr;
    }

    .de-col-results {
        position: static;
    }

    .de-guarantees-grid {
        grid-template-columns: 1fr;
    }

    .de-customer-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .de-sector-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .de-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .de-form-grid {
        grid-template-columns: 1fr;
    }

    .de-guarantees-grid {
        grid-template-columns: 1fr;
    }

    .de-customer-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}
/**
 * Intelligence Hub — Premium DSOX Styles
 * Glassmorphism + Dynamic animations + Dark mode
 */

/* ═══ Hero Section ═══ */
.intel-hub {
    padding: 0;
}

.intel-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 16px;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
}

.intel-hero-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.intel-hero-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 14px;
    color: white;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5); }
}

.intel-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
    font-family: 'Cairo', sans-serif;
}

.intel-hero-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 4px 0 0;
}

.intel-refresh-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    color: #3b82f6;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Cairo', sans-serif;
}

.intel-refresh-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.intel-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ═══ KPI Hero Strip ═══ */
.intel-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.kpi-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--kpi-color);
    opacity: 0.6;
}

.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--kpi-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.kpi-card:hover::after {
    height: 3px;
    opacity: 1;
}

.kpi-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f1f5f9;
    font-family: 'Inter', monospace;
    line-height: 1;
}

.kpi-label {
    font-size: 0.72rem;
    color: #64748b;
    font-family: 'Cairo', sans-serif;
    text-align: center;
}

/* ═══ Group Dividers ═══ */
.intel-group-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 4px;
    margin-top: 8px;
}

.intel-group-divider::before,
.intel-group-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(51, 65, 85, 0.5), transparent);
}

.intel-group-divider span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}

/* ═══ Overview Chart ═══ */
.intel-overview-chart {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.intel-overview-chart h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-size: 1rem;
    margin: 0 0 16px;
    font-family: 'Cairo', sans-serif;
}

/* ═══ Chain Cards Grid ═══ */
.intel-chains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.intel-chain-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.4);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.intel-chain-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--chain-color);
    opacity: 0.7;
    transition: height 0.3s ease;
}

.intel-chain-card:hover {
    border-color: var(--chain-color);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.intel-chain-card:hover::before {
    height: 4px;
    opacity: 1;
}

.intel-chain-card.expanded {
    border-color: var(--chain-color);
    grid-column: 1 / -1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.chain-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.chain-icon-wrap {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.chain-id-badge {
    font-size: 0.7rem;
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.chain-title-ar {
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 2px;
    font-family: 'Cairo', sans-serif;
}

.chain-title-en {
    color: #64748b;
    font-size: 0.72rem;
    margin: 0 0 12px;
}

.chain-main-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 8px 0;
    font-family: 'Inter', monospace;
}

.chain-summary-grid {
    display: flex;
    gap: 12px;
    margin: 12px 0 8px;
    flex-wrap: wrap;
}

.chain-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-val {
    font-size: 0.9rem;
    font-weight: 600;
    color: #cbd5e1;
}

.summary-key {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: capitalize;
}

.chain-expand-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.intel-chain-card:hover .chain-expand-hint {
    opacity: 1;
}

/* ═══ Expanded Detail View ═══ */
.intel-expanded-view {
    grid-column: 1 / -1;
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 14px;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 800px;
        transform: translateY(0);
    }
}

.intel-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.intel-chart-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 12px;
    padding: 20px;
}

.intel-chart-card.wide {
    grid-column: 1 / -1;
}

.intel-chart-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    margin: 0 0 16px;
    font-family: 'Cairo', sans-serif;
}

/* ═══ Provision Summary ═══ */
.intel-provision-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.provision-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 12px;
    color: #94a3b8;
}

.provision-card.success { border-color: rgba(16, 185, 129, 0.3); color: #10b981; }
.provision-card.danger { border-color: rgba(239, 68, 68, 0.3); color: #ef4444; }

.provision-label {
    font-size: 0.8rem;
    font-family: 'Cairo', sans-serif;
}

.provision-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #e2e8f0;
}

/* ═══ Detail Grid ═══ */
.intel-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.intel-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.2);
    text-align: center;
}

.detail-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e2e8f0;
}

.detail-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: capitalize;
}

/* ═══ Empty State ═══ */
.intel-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: 60px;
}

.empty-icon-wrap {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 24px;
    color: #3b82f6;
    margin-bottom: 24px;
    animation: pulseGlow 3s ease-in-out infinite;
}

.intel-hub-empty h2 {
    color: #e2e8f0;
    font-size: 1.3rem;
    margin: 0 0 8px;
    font-family: 'Cairo', sans-serif;
}

.intel-hub-empty p {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0;
}

.empty-subtitle {
    color: #64748b !important;
    font-size: 0.8rem !important;
    margin-top: 12px !important;
}

/* ═══ Error ═══ */
.intel-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #ef4444;
    margin-top: 16px;
    font-size: 0.85rem;
}

/* ═══ DNA Table (Chain 5) ═══ */
.intel-dna-table {
    overflow-x: auto;
    margin-top: 8px;
}

.intel-dna-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
}

.intel-dna-table th {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 8px 12px;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}

.intel-dna-table td {
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #cbd5e1;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
}

.intel-dna-table tr:hover td {
    background: rgba(59, 130, 246, 0.05);
}

.intel-dna-table tr td:first-child {
    border-radius: 0 8px 8px 0;
}

.intel-dna-table tr td:last-child {
    border-radius: 8px 0 0 8px;
}

.dna-customer {
    font-weight: 600;
    color: #e2e8f0;
}

.dna-day {
    font-family: 'Inter', monospace;
    font-weight: 600;
    color: #3b82f6;
}

.dna-contact {
    font-family: 'Inter', monospace;
    color: #10b981;
    font-weight: 600;
}

.dna-trend.shifting_later {
    color: #ef4444;
}

.dna-trend.shifting_earlier {
    color: #10b981;
}

.stability-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}

.stability-bar div.stability-fill {
    height: 6px;
    border-radius: 3px;
    transition: width 0.8s ease;
    flex: 1;
    max-width: 80px;
}

.stability-bar span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
}

/* ═══ Alerts List (Chain 8) ═══ */
.intel-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.intel-alert-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.intel-alert-item:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.alert-customer {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.85rem;
}

.alert-velocity {
    color: #ef4444;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Inter', monospace;
}

.alert-detail {
    color: #64748b;
    font-size: 0.75rem;
}

/* ═══ Golden Alert (Chain 11) ═══ */
.intel-golden-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    margin-top: 16px;
    color: #f59e0b;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    animation: goldenPulse 2s ease-in-out infinite;
}

.golden-icon {
    font-size: 1.5rem;
}

@keyframes goldenPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.25);
    }
}

/* ═══ Responsive ═══ */
@media (max-width: 768px) {
    .intel-chains-grid {
        grid-template-columns: 1fr;
    }
    .intel-provision-summary {
        grid-template-columns: 1fr;
    }
    .intel-hero {
        flex-direction: column;
        gap: 16px;
    }
    .intel-dna-table {
        font-size: 0.75rem;
    }
    .intel-charts-row {
        grid-template-columns: 1fr;
    }
    .intel-kpi-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .intel-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-value {
        font-size: 1.2rem;
    }
}
/* ═══════════════════════════════════════════
   Collector Scorecard — Premium Glassmorphism
   DSOXlap Unique Identity — Phase 4
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.scorecard-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    animation: heroFadeIn 0.6s ease-out;
}

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

.scorecard-hero-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.scorecard-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.scorecard-hero-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    font-family: 'Cairo', 'Inter', sans-serif;
}

.scorecard-hero-subtitle {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.scorecard-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scorecard-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
}

.scorecard-refresh-btn:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.2);
    transform: translateY(-1px);
}

.scorecard-refresh-btn .spinning {
    animation: spin 1s linear infinite;
}

/* ── Empty State ── */
.scorecard-empty {
    padding: 4rem 2rem;
    text-align: center;
    color: #94a3b8;
}

.scorecard-empty .empty-icon-wrap {
    margin-bottom: 1.5rem;
    opacity: 0.4;
}

.scorecard-empty h2 {
    font-size: 1.4rem;
    color: #f1f5f9;
    margin-bottom: 0.5rem;
}

.scorecard-empty .empty-subtitle {
    font-size: 0.8rem;
    opacity: 0.5;
    margin-top: 0.5rem;
}

/* ── KPI Strip ── */
.scorecard-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 1.5rem;
}

.scorecard-kpi-strip .kpi-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    animation: kpiSlideUp 0.5s ease-out backwards;
}

.scorecard-kpi-strip .kpi-card:nth-child(1) { animation-delay: 0.05s; }
.scorecard-kpi-strip .kpi-card:nth-child(2) { animation-delay: 0.1s; }
.scorecard-kpi-strip .kpi-card:nth-child(3) { animation-delay: 0.15s; }
.scorecard-kpi-strip .kpi-card:nth-child(4) { animation-delay: 0.2s; }
.scorecard-kpi-strip .kpi-card:nth-child(5) { animation-delay: 0.25s; }
.scorecard-kpi-strip .kpi-card:nth-child(6) { animation-delay: 0.3s; }

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

.scorecard-kpi-strip .kpi-card:hover {
    border-color: var(--kpi-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.scorecard-kpi-strip .kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.scorecard-kpi-strip .kpi-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f1f5f9;
}

.scorecard-kpi-strip .kpi-value .top-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.scorecard-kpi-strip .kpi-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 4px;
}

/* ── Controls ── */
.scorecard-controls {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(30, 41, 59, 0.5);
    border-radius: 12px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.period-control {
    flex-wrap: wrap;
}

.period-select {
    min-width: 110px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-family: 'Cairo', sans-serif;
    padding: 0 10px;
    outline: none;
}

.period-select:focus {
    border-color: rgba(59, 130, 246, 0.65);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.control-group label {
    font-size: 0.8rem;
    color: #94a3b8;
    white-space: nowrap;
}

.commission-tabs {
    display: flex;
    gap: 4px;
}

.comm-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #1e293b;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 0.72rem;
    font-family: 'Cairo', sans-serif;
    transition: all 0.2s;
}

.comm-tab:hover {
    border-color: #475569;
    color: #94a3b8;
}

.comm-tab.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: #a855f7;
}

.weight-control {
    margin-right: auto;
}

.weight-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.weight-slider {
    width: 120px;
    accent-color: #a855f7;
}

.weight-display {
    font-size: 0.75rem;
    color: #94a3b8;
    min-width: 70px;
    text-align: center;
}

/* ── Main Grid (Leaderboard + Detail) ── */
.scorecard-main-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Leaderboard */
.scorecard-leaderboard {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.2rem;
    backdrop-filter: blur(8px);
    max-height: 600px;
    overflow-y: auto;
}

.scorecard-leaderboard h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #f1f5f9;
    margin: 0 0 1rem;
    font-weight: 600;
}

.leader-head {
    display: grid;
    grid-template-columns: 72px 1fr 78px 110px;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    color: #94a3b8;
    padding: 0 8px 8px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.65);
    margin-bottom: 8px;
}

.leader-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.leader-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.leader-row:hover {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}

.leader-row.selected {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
}

.leader-row.management-row {
    border-color: rgba(6, 182, 212, 0.35);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(59, 130, 246, 0.05));
}

.leader-row.management-row .leader-name {
    color: #67e8f9;
    font-weight: 700;
}

.leader-row.top-three {
    position: relative;
}

.leader-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.5);
    flex-shrink: 0;
}

.rank-crown { color: #fbbf24; }
.rank-silver { color: #94a3b8; }
.rank-bronze { color: #d97706; }
.rank-num { font-size: 0.75rem; color: #64748b; font-weight: 600; }

.leader-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.leader-name {
    font-size: 0.8rem;
    color: #e2e8f0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leader-stats {
    display: flex;
    gap: 12px;
}

.leader-stat {
    text-align: center;
    min-width: 44px;
}

.leader-stat .stat-value {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #f1f5f9;
}

.leader-stat .stat-label {
    display: block;
    font-size: 0.6rem;
    color: #475569;
}

.commission-stat .stat-value {
    color: #a855f7;
}

/* Grade Badge */
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid var(--grade-color);
    color: var(--grade-color);
    background: color-mix(in srgb, var(--grade-color) 15%, transparent);
}

.grade-sm { width: 22px; height: 22px; font-size: 0.65rem; }
.grade-md { width: 30px; height: 30px; font-size: 0.8rem; }
.grade-lg { width: 38px; height: 38px; font-size: 1rem; border-radius: 8px; }

/* Detail Panel */
.scorecard-detail {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
}

.detail-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-info h2 {
    font-size: 1.3rem;
    color: #f1f5f9;
    margin: 0 0 6px;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blended-badge {
    font-size: 0.75rem;
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.5);
    padding: 3px 10px;
    border-radius: 6px;
}

/* Detail KPIs */
.detail-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}

.detail-kpi-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(30, 41, 59, 0.4);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
    border-top: 2px solid var(--item-color);
}

.detail-kpi-item:hover {
    border-color: rgba(100, 116, 139, 0.3);
    transform: translateY(-2px);
}

.detail-kpi-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.detail-kpi-lbl {
    font-size: 0.68rem;
    color: #64748b;
}

/* Radar Chart Card */
.detail-chart-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.detail-chart-card h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #e2e8f0;
    margin: 0 0 0.5rem;
}

/* Commission Card */
.detail-commission-card {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.detail-commission-card h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #e2e8f0;
    margin: 0 0 1rem;
}

.commission-total {
    text-align: center;
    margin-bottom: 1rem;
}

.comm-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #a855f7;
}

.comm-unit {
    font-size: 0.8rem;
    color: #64748b;
    margin-right: 8px;
}

.commission-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0.8rem;
}

.comm-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #94a3b8;
}

.variable-amount {
    color: #10b981;
    font-weight: 600;
}

.comm-formula {
    font-size: 0.7rem;
    color: #475569;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(30, 41, 59, 0.5);
    font-family: 'JetBrains Mono', monospace;
    direction: ltr;
    text-align: left;
}

/* Escalation */
.detail-escalation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
}

.detail-escalation.low {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.detail-escalation.medium {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.detail-escalation.high {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.detail-escalation.critical {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    animation: escalationPulse 2s ease-in-out infinite;
}

@keyframes escalationPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.15); }
}

.detail-escalation strong {
    display: block;
    margin-bottom: 4px;
}

.detail-escalation p {
    margin: 0;
    opacity: 0.8;
}

/* Role Intelligence Report */
.detail-role-report {
    margin-top: 1rem;
    padding: 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(2, 132, 199, 0.08));
}

.role-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0.8rem;
}

.role-report-head h4 {
    margin: 0;
    font-size: 0.88rem;
    color: #e2e8f0;
}

.role-report-head p {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: #64748b;
}

.role-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.4);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.role-trend-pill.trend-up {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.1);
}

.role-trend-pill.trend-down {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}

.role-trend-pill.trend-stable {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.1);
}

.role-report-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0.8rem;
}

.role-block {
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 10px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.55);
}

.role-block-label {
    display: block;
    font-size: 0.66rem;
    color: #64748b;
    margin-bottom: 4px;
}

.role-block strong {
    display: block;
    font-size: 0.82rem;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.role-block p {
    margin: 0;
    font-size: 0.7rem;
    color: #94a3b8;
}

.role-block-priority.priority-high {
    border-color: rgba(239, 68, 68, 0.4);
}

.role-block-priority.priority-medium {
    border-color: rgba(245, 158, 11, 0.4);
}

.role-block-priority.priority-opportunity {
    border-color: rgba(34, 197, 94, 0.4);
}

.role-scenario-box {
    margin-bottom: 0.9rem;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 10px;
    padding: 10px;
    background: rgba(99, 102, 241, 0.08);
}

.role-scenario-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.role-scenario-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #c4b5fd;
    border: 1px solid rgba(99, 102, 241, 0.45);
    background: rgba(30, 41, 59, 0.45);
}

.role-scenario-head strong {
    color: #e2e8f0;
    font-size: 0.78rem;
}

.role-scenario-why,
.role-scenario-playbook {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.73rem;
    line-height: 1.45;
}

.role-scenario-playbook {
    margin-top: 4px;
    color: #93c5fd;
}

.role-scenario-playbook span {
    font-weight: 600;
}

.role-history-chart {
    margin-bottom: 0.9rem;
    border: 1px solid rgba(30, 41, 59, 0.55);
    border-radius: 10px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.45);
}

.role-history-chart h5,
.role-reasons h5,
.role-signals h5,
.role-action-box h5 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #cbd5e1;
}

.role-reasons {
    margin-bottom: 0.9rem;
}

.role-reasons ul,
.role-signals ul {
    margin: 0;
    padding-inline-start: 18px;
    display: grid;
    gap: 6px;
}

.role-reasons li,
.role-signals li {
    font-size: 0.74rem;
    color: #cbd5e1;
}

.role-signals-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0.9rem;
}

.role-signals {
    border: 1px solid rgba(30, 41, 59, 0.55);
    border-radius: 10px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.45);
}

.role-signals p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.72rem;
}

.role-signals-up {
    border-color: rgba(34, 197, 94, 0.25);
}

.role-signals-down {
    border-color: rgba(239, 68, 68, 0.25);
}

.role-action-box {
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 10px;
    padding: 10px;
    background: rgba(6, 182, 212, 0.06);
}

.role-action-box p {
    margin: 0 0 8px;
    color: #e2e8f0;
    font-size: 0.74rem;
    line-height: 1.45;
}

.role-action-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.role-action-meta span {
    font-size: 0.68rem;
    color: #94a3b8;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.35);
}

/* Placeholder */
.detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #475569;
    gap: 1rem;
}

/* Grade Distribution Chart */
.scorecard-grade-chart {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}

.scorecard-grade-chart h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #f1f5f9;
    margin: 0 0 1rem;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .scorecard-kpi-strip { grid-template-columns: repeat(3, 1fr); }
    .scorecard-main-grid { grid-template-columns: 1fr; }
    .detail-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .role-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .scorecard-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .commission-tabs { flex-wrap: wrap; }
    .scorecard-controls { flex-direction: column; align-items: stretch; }
    .scorecard-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
    .scorecard-hero-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .leader-head { grid-template-columns: 62px 1fr 70px 90px; font-size: 0.62rem; }
    .role-report-head { flex-direction: column; align-items: flex-start; }
    .role-report-grid { grid-template-columns: 1fr; }
    .role-signals-grid { grid-template-columns: 1fr; }
}

@media print {
    .no-print {
        display: none !important;
    }
    .collector-scorecard {
        background: white !important;
        color: black !important;
    }
}

/* ── Animations ── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════
   Cost of Delay Dashboard — Premium CSS
   Phase 5 — DSOXlap Unique Identity
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.cod-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    animation: codHeroIn 0.6s ease-out;
}

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

.cod-hero-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cod-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.cod-hero h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    font-family: 'Cairo', 'Inter', sans-serif;
}

.cod-hero-subtitle {
    color: #94a3b8;
    font-size: 0.82rem;
    margin: 4px 0 0;
}

.cod-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
}

.cod-refresh-btn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

.cod-refresh-btn .spinning {
    animation: spin 1s linear infinite;
}

/* ── Empty ── */
.cod-empty {
    padding: 4rem 2rem;
    text-align: center;
    color: #94a3b8;
}

.cod-empty .empty-icon-wrap { margin-bottom: 1.5rem; opacity: 0.4; }
.cod-empty h2 { font-size: 1.4rem; color: #f1f5f9; margin-bottom: 0.5rem; }
.cod-empty .empty-subtitle { font-size: 0.8rem; opacity: 0.5; margin-top: 0.5rem; }

/* ── Tab Switcher ── */
.cod-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 1.5rem;
}

.cod-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid #1e293b;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: 'Cairo', sans-serif;
    transition: all 0.2s;
}

.cod-tab:hover { border-color: #475569; color: #94a3b8; }

.cod-tab.active {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.cod-tab:last-child.active {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ── KPI Strip ── */
.cod-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 1.5rem;
}

.cod-kpi-strip .kpi-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    animation: kpiSlideUp 0.5s ease-out backwards;
}

.cod-kpi-strip .kpi-card:nth-child(1) { animation-delay: 0.05s; }
.cod-kpi-strip .kpi-card:nth-child(2) { animation-delay: 0.1s; }
.cod-kpi-strip .kpi-card:nth-child(3) { animation-delay: 0.15s; }
.cod-kpi-strip .kpi-card:nth-child(4) { animation-delay: 0.2s; }
.cod-kpi-strip .kpi-card:nth-child(5) { animation-delay: 0.25s; }

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

.cod-kpi-strip .kpi-card:hover {
    border-color: var(--kpi-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.cod-kpi-strip .kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.cod-kpi-strip .kpi-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f1f5f9;
}

.cod-kpi-strip .kpi-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 4px;
}

/* ── Charts Row ── */
.cod-charts-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.cod-chart-card {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.2rem;
    backdrop-filter: blur(8px);
}

.cod-chart-card.wide { grid-column: span 1; }

.cod-chart-card h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #e2e8f0;
    margin: 0 0 0.8rem;
}

/* ── Invoices Table ── */
.cod-top-invoices {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.2rem;
    backdrop-filter: blur(8px);
    margin-bottom: 1.5rem;
}

.cod-top-invoices h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #e2e8f0;
    margin: 0 0 1rem;
}

.invoices-table-wrap {
    overflow-x: auto;
}

.invoices-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.invoices-table-wrap th {
    color: #64748b;
    font-weight: 500;
    text-align: right;
    padding: 8px 10px;
    border-bottom: 1px solid #1e293b;
    font-size: 0.72rem;
}

.invoices-table-wrap td {
    color: #e2e8f0;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}

.invoices-table-wrap tr:hover { background: rgba(59, 130, 246, 0.04); }
.invoices-table-wrap tr.eroded-row { background: rgba(239, 68, 68, 0.06); }

.inv-num { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #94a3b8; }
.delay-days { color: #f59e0b; font-weight: 600; }
.cost-col { color: #ef4444; font-weight: 600; }
.negative { color: #ef4444; font-weight: 600; }
.positive { color: #10b981; font-weight: 600; }

.sector-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 500;
}

.sector-tag.gov { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.sector-tag.comm { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }

/* ── Role Intelligence Panel (Delay Tab) ── */
.cod-role-panel {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.2rem;
    backdrop-filter: blur(8px);
}

.cod-role-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.cod-role-head h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #e2e8f0;
    margin: 0;
}

.role-panel-note {
    font-size: 0.72rem;
    color: #64748b;
}

.cod-role-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 0.9rem;
}

.role-chip {
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(15, 23, 42, 0.65);
}

.role-chip span {
    font-size: 0.68rem;
    color: #64748b;
}

.role-chip strong {
    font-size: 1rem;
    color: #f1f5f9;
}

.pm-role-table-wrap {
    overflow-x: auto;
}

.pm-role-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.pm-role-table-wrap th {
    color: #64748b;
    font-weight: 500;
    text-align: right;
    padding: 8px 10px;
    border-bottom: 1px solid #1e293b;
    font-size: 0.72rem;
}

.pm-role-table-wrap td {
    color: #e2e8f0;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.3);
    font-size: 0.78rem;
}

.scenario-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.64rem;
    font-weight: 700;
    border: 1px solid rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.1);
    color: #c4b5fd;
}

.scenario-title {
    display: block;
    margin-top: 4px;
    font-size: 0.69rem;
    color: #94a3b8;
    line-height: 1.4;
}

.role-empty-cell {
    text-align: center;
    color: #64748b;
    padding: 14px 10px;
}

.role-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.67rem;
    padding: 2px 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}

.role-tag.critical {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.1);
}

.role-tag.watch {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.role-tag.healthy {
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.08);
}

.role-tag.priority-high {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
}

.role-tag.priority-medium {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

.role-tag.priority-standard {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
}

.role-tag.priority-opportunity {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}

/* ── Salesperson Grid ── */
.cod-sp-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 1.5rem;
}

.sp-leaderboard {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.2rem;
    backdrop-filter: blur(8px);
    max-height: 600px;
    overflow-y: auto;
}

.sp-leaderboard h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #f1f5f9;
    margin: 0 0 1rem;
}

.sp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    margin-bottom: 4px;
}

.sp-row:hover { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.15); }
.sp-row.selected { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }

.sp-rank {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
}

.sp-info { flex: 1; display: flex; align-items: center; gap: 8px; }
.sp-name { font-size: 0.8rem; color: #e2e8f0; font-weight: 500; }
.sp-grade { font-size: 0.75rem; font-weight: 700; }
.sp-stats { display: flex; gap: 12px; }
.sp-quality { font-size: 0.78rem; font-weight: 600; color: #f1f5f9; }
.sp-sales { font-size: 0.72rem; color: #64748b; }

/* SP Detail */
.sp-detail {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}

.sp-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
}

.sp-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-detail h2 { font-size: 1.3rem; color: #f1f5f9; margin: 0 0 6px; }
.sp-detail-meta { display: flex; align-items: center; gap: 10px; }

.sp-grade-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid;
    background: rgba(255,255,255,0.05);
}

.sp-quality-badge {
    font-size: 0.75rem;
    background: rgba(30, 41, 59, 0.5);
    padding: 3px 10px;
    border-radius: 6px;
    color: #94a3b8;
}

/* SP KPI Grid */
.sp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}

.sp-kpi-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(30, 41, 59, 0.4);
    border-top: 2px solid var(--item-color);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: transform 0.2s;
}

.sp-kpi-item:hover { transform: translateY(-2px); }
.sp-kpi-val { display: block; font-size: 1.1rem; font-weight: 700; color: #f1f5f9; }
.sp-kpi-lbl { display: block; font-size: 0.68rem; color: #64748b; margin-top: 4px; }

/* SP Radar Card */
.sp-radar-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    padding: 1rem;
}

.sp-radar-card h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #e2e8f0;
    margin: 0 0 0.5rem;
}

.sp-role-intel-card {
    margin-top: 1rem;
    border: 1px solid rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.3);
}

.sp-role-intel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.8rem;
}

.sp-role-intel-head h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    color: #e2e8f0;
    margin: 0;
}

.sp-role-intel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 0.8rem;
}

.intel-item {
    border: 1px solid rgba(30, 41, 59, 0.45);
    border-radius: 10px;
    padding: 8px;
    background: rgba(15, 23, 42, 0.45);
}

.intel-item span {
    display: block;
    font-size: 0.67rem;
    color: #64748b;
}

.intel-item strong {
    display: block;
    margin-top: 3px;
    font-size: 0.85rem;
    color: #f1f5f9;
}

.intel-summary {
    margin: 0 0 0.45rem;
    font-size: 0.77rem;
    color: #cbd5e1;
    line-height: 1.55;
}

.intel-scenario {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0.35rem;
}

.intel-why {
    margin: 0 0 0.4rem;
    font-size: 0.74rem;
    color: #a5b4fc;
    line-height: 1.5;
}

.intel-action {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.intel-playbook {
    margin: 0;
    font-size: 0.73rem;
    color: #93c5fd;
}

.intel-signals {
    margin: 0.75rem 0 0;
    padding-inline-start: 1.1rem;
    color: #fca5a5;
    font-size: 0.73rem;
}

.intel-signals li { margin-bottom: 0.25rem; }

/* SP Placeholder */
.sp-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #475569;
    gap: 1rem;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .cod-kpi-strip { grid-template-columns: repeat(3, 1fr); }
    .cod-charts-row { grid-template-columns: 1fr; }
    .cod-sp-grid { grid-template-columns: 1fr; }
    .sp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .cod-role-strip { grid-template-columns: repeat(2, 1fr); }
    .sp-role-intel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .cod-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .cod-tabs { flex-direction: column; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════
   PeriodSelector — Al-Marsad 4-Layer Tabs
   ═══════════════════════════════════════════ */

.marsad-period-selector {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    width: fit-content;
}

.marsad-period-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Cairo', 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.marsad-period-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: var(--period-glow);
    opacity: 0;
    transition: opacity 0.3s;
}

.marsad-period-btn:hover {
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
}

.marsad-period-btn:hover::before {
    opacity: 0.5;
}

.marsad-period-btn.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--period-color);
    color: var(--period-color);
    box-shadow: 0 0 20px var(--period-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.marsad-period-btn.active::before {
    opacity: 1;
}

.marsad-period-btn.active .marsad-period-icon {
    color: var(--period-color);
    background: rgba(255, 255, 255, 0.08);
}

.marsad-period-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.marsad-period-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.marsad-period-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.marsad-period-sublabel {
    font-size: 0.58rem;
    color: #64748b;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.marsad-period-btn.active .marsad-period-sublabel {
    color: var(--period-color);
    opacity: 0.7;
}

.marsad-period-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    margin-inline-start: 6px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.marsad-period-count {
    font-size: 0.65rem;
    font-weight: 600;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.marsad-period-btn.active .marsad-period-count {
    color: var(--period-color);
}

.marsad-period-amount {
    font-size: 0.56rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
    .marsad-period-selector {
        flex-wrap: wrap;
        width: 100%;
    }
    .marsad-period-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
    .marsad-period-stats {
        display: none;
    }
}

@media (max-width: 600px) {
    .marsad-period-text {
        display: none;
    }
    .marsad-period-btn {
        justify-content: center;
        padding: 8px;
    }
}
/* ═══════════════════════════════════════════════════════════════
   Executive Cockpit — CEO Dashboard — Premium Design System
   DSOXlap 2.5 — World-Class Interactive Dashboard
   ═══════════════════════════════════════════════════════════════ */

/* ── Status Color System (CSS Variables) ── */
.executive-cockpit {
    --ec-success: #10B981;
    --ec-success-glow: rgba(16, 185, 129, 0.15);
    --ec-warning: #F59E0B;
    --ec-warning-glow: rgba(245, 158, 11, 0.15);
    --ec-danger: #EF4444;
    --ec-danger-glow: rgba(239, 68, 68, 0.15);
    --ec-critical: #7C3AED;
    --ec-critical-glow: rgba(124, 58, 237, 0.15);
    --ec-benchmark: #6B7280;
    --ec-info: #3b82f6;
    --ec-info-glow: rgba(59, 130, 246, 0.15);
    --ec-cyan: #06b6d4;
    --ec-bg: #0F172A;
    --ec-card: rgba(15, 23, 42, 0.65);
    --ec-card-border: rgba(30, 41, 59, 0.6);
    --ec-card-hover: rgba(30, 41, 59, 0.9);
    --ec-text: #f1f5f9;
    --ec-text-muted: #94a3b8;
    --ec-text-dim: #64748b;
    --ec-radius: 16px;
    --ec-radius-sm: 10px;
    --ec-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --ec-font: 'Cairo', 'Inter', system-ui, sans-serif;
    --ec-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --ec-role-primary: #06b6d4;
    --ec-role-secondary: #6366f1;
    --ec-role-soft: rgba(6, 182, 212, 0.12);
    --ec-role-border: rgba(6, 182, 212, 0.28);
}

.executive-cockpit.role-ceo {
    --ec-role-primary: #06b6d4;
    --ec-role-secondary: #6366f1;
    --ec-role-soft: rgba(6, 182, 212, 0.12);
    --ec-role-border: rgba(6, 182, 212, 0.25);
}

.executive-cockpit.role-cfo {
    --ec-role-primary: #f59e0b;
    --ec-role-secondary: #ef4444;
    --ec-role-soft: rgba(245, 158, 11, 0.14);
    --ec-role-border: rgba(245, 158, 11, 0.35);
}

.executive-cockpit.role-ccl {
    --ec-role-primary: #10b981;
    --ec-role-secondary: #3b82f6;
    --ec-role-soft: rgba(16, 185, 129, 0.14);
    --ec-role-border: rgba(16, 185, 129, 0.35);
}

/* ── Base ── */
.executive-cockpit {
    width: 100%;
    padding-bottom: 2rem;
    animation: ecFadeIn 0.6s ease-out;
}

@keyframes ecFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══════════════════════════════════════════
   SMART ALERT BAR
   ═══════════════════════════════════════════ */
.ec-alert-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.2rem;
    animation: ecSlideDown 0.5s ease-out;
}

@keyframes ecSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.ec-alert-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ec-transition);
    flex-shrink: 0;
    border: 1px solid transparent;
}

.ec-alert-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.ec-alert-chip.critical {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--ec-danger);
    animation: ecAlertPulse 2.5s ease-in-out infinite;
}

.ec-alert-chip.danger {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.04));
    border-color: rgba(124, 58, 237, 0.25);
    color: var(--ec-critical);
}

.ec-alert-chip.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--ec-warning);
}

.ec-alert-chip.info {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--ec-success);
}

.ec-alert-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ec-alert-chip.critical .ec-alert-icon { background: var(--ec-danger-glow); }
.ec-alert-chip.danger .ec-alert-icon { background: var(--ec-critical-glow); }
.ec-alert-chip.warning .ec-alert-icon { background: var(--ec-warning-glow); }
.ec-alert-chip.info .ec-alert-icon { background: var(--ec-success-glow); }

.ec-alert-msg { flex: 1; font-size: 0.72rem; }
.ec-alert-action {
    font-size: 0.65rem;
    opacity: 0.7;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}

@keyframes ecAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.15); }
    50% { box-shadow: 0 0 12px 3px rgba(239, 68, 68, 0.1); }
}

/* ═══════════════════════════════════════════
   HERO HEADER
   ═══════════════════════════════════════════ */
.exec-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, var(--ec-role-soft), rgba(15, 23, 42, 0.08));
    border: 1px solid var(--ec-role-border);
    border-radius: var(--ec-radius);
    margin-bottom: 1.2rem;
    animation: ecHeroIn 0.5s ease-out;
}

@keyframes ecHeroIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.exec-hero-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exec-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ec-role-soft);
    color: var(--ec-role-primary);
    animation: ecHeroPulse 3s ease-in-out infinite;
}

@keyframes ecHeroPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--ec-role-soft); }
    50% { box-shadow: 0 0 20px 6px var(--ec-role-soft); }
}

.exec-hero-title {
    font-size: 1.2rem !important;
    font-weight: 700;
    color: var(--ec-text);
    margin: 0;
    font-family: var(--ec-font);
}

.exec-hero-sub { color: var(--ec-text-muted); font-size: 0.72rem; margin: 2px 0 0; }

.exec-hero-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exec-refresh {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--ec-role-border);
    background: var(--ec-role-soft);
    color: var(--ec-role-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ec-transition);
}

.exec-refresh:hover:not(:disabled) { background: rgba(6, 182, 212, 0.15); transform: rotate(45deg); }
.exec-refresh .spinning { animation: ecSpin 1s linear infinite; }

.exec-refresh:hover:not(:disabled) {
    background: var(--ec-role-soft);
}

@keyframes ecSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ec-basis-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 0.8rem;
}

.ec-basis-tab {
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(15, 23, 42, 0.5);
    color: var(--ec-text-muted);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ec-transition);
}

.ec-basis-tab:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.5);
    color: #dbeafe;
}

.ec-basis-tab.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(59, 130, 246, 0.12));
    color: #e0f2fe;
    border-color: rgba(56, 189, 248, 0.6);
}

.ec-basis-tab:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ec-authority-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.9rem;
}

.ec-authority-pill {
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: var(--ec-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   ROLE SPOTLIGHT (CEO/CFO/CCL differentiation)
   ═══════════════════════════════════════════ */
.ec-role-spotlight {
    margin-bottom: 1rem;
    padding: 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--ec-role-border);
    background: linear-gradient(140deg, var(--ec-role-soft), rgba(15, 23, 42, 0.92));
}

.ec-role-spotlight-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0.75rem;
}

.ec-role-spotlight-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ec-role-soft);
    color: var(--ec-role-primary);
    flex-shrink: 0;
}

.ec-role-spotlight-head h3 {
    margin: 0;
    font-size: 0.92rem;
    color: #e2e8f0;
}

.ec-role-spotlight-head h3 span {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
}

.ec-role-spotlight-head p {
    margin: 3px 0 0;
    font-size: 0.72rem;
    color: #a7b4c8;
    line-height: 1.5;
}

.ec-role-spotlight-head p span {
    color: #7c8da6;
}

.ec-role-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0.75rem;
}

.ec-role-focus-card {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 8px 10px;
    background: rgba(2, 6, 23, 0.35);
}

.ec-role-focus-card.tone-good {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
}

.ec-role-focus-card.tone-watch {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
}

.ec-role-focus-card.tone-risk {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.09);
}

.ec-role-focus-card.tone-neutral {
    border-color: rgba(148, 163, 184, 0.28);
}

.ec-role-focus-label {
    font-size: 0.68rem;
    color: #cbd5e1;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ec-role-focus-label span {
    color: #7a89a2;
}

.ec-role-focus-value {
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #f1f5f9;
}

.ec-role-focus-note {
    margin-top: 4px;
    font-size: 0.64rem;
    color: #9aa8be;
    line-height: 1.35;
}

.ec-role-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ec-role-actions-label {
    font-size: 0.7rem;
    color: #a3b2c9;
    margin-inline-end: 2px;
}

.ec-role-action-chip {
    border-radius: 999px;
    border: 1px solid var(--ec-role-border);
    background: var(--ec-role-soft);
    color: #e2e8f0;
    font-size: 0.66rem;
    padding: 5px 10px;
    white-space: nowrap;
}

.ec-authority-pill strong {
    color: #e2e8f0;
}

/* ── Time Range Selector ── */
.ec-time-range {
    display: flex;
    gap: 2px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--ec-card-border);
    border-radius: var(--ec-radius-sm);
    padding: 3px;
}

.ec-time-btn {
    padding: 4px 10px;
    border: none;
    background: none;
    color: var(--ec-text-dim);
    font-size: 0.68rem;
    font-weight: 500;
    border-radius: 7px;
    cursor: pointer;
    transition: var(--ec-transition);
    font-family: var(--ec-font);
    white-space: nowrap;
}

.ec-time-btn:hover { color: var(--ec-text); background: rgba(255, 255, 255, 0.04); }

.ec-time-btn.active {
    background: rgba(6, 182, 212, 0.15);
    color: var(--ec-cyan);
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   KPI CARDS GRID (6 columns)
   ═══════════════════════════════════════════ */
.ec-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 1.2rem;
}

/* ═══════════════════════════════════════════
   CASH COVERAGE RADAR
   ═══════════════════════════════════════════ */
.ec-radar-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-card-border);
    border-radius: var(--ec-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}

.ec-chart-badge.ok {
    background: rgba(16, 185, 129, 0.12);
    color: var(--ec-success);
}

.ec-chart-badge.danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--ec-danger);
}

.ec-chart-badge.warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--ec-warning);
}

.ec-radar-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 0.9rem;
}

.ec-radar-metric {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-radar-label {
    color: var(--ec-text-muted);
    font-size: 0.74rem;
}

.ec-radar-value {
    color: var(--ec-text);
    font-size: 1rem;
    font-weight: 700;
}

.ec-radar-meta {
    color: var(--ec-text-dim);
    font-size: 0.67rem;
    line-height: 1.5;
}

.ec-radar-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 12px;
}

.ec-radar-panel {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 0.9rem;
}

.ec-radar-panel h4 {
    margin: 0 0 0.8rem;
    color: var(--ec-text);
    font-size: 0.86rem;
}

.ec-forecast-historical-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0.8rem;
}

.ec-forecast-historical-head h4 {
    margin: 0;
}

.ec-forecast-historical-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-forecast-historical-controls label {
    color: var(--ec-text-muted);
    font-size: 0.7rem;
}

.ec-forecast-historical-controls input[type='month'] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ec-text);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-family: var(--ec-font-mono);
}

.ec-radar-nextweek,
.ec-radar-windows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-radar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ec-text-muted);
    font-size: 0.75rem;
    padding: 0.45rem 0.1rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.ec-radar-row strong {
    color: var(--ec-text);
}

.ec-radar-row.highlight strong {
    color: var(--ec-cyan);
}

.ec-radar-window {
    border-radius: 10px;
    padding: 0.75rem 0.8rem;
    border: 1px solid transparent;
}

.ec-variance-link {
    width: 100%;
    text-align: start;
    cursor: pointer;
    background: transparent;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ec-variance-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
}

.ec-variance-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.ec-variance-action-btn {
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
    font-size: 0.64rem;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.16s ease;
}

.ec-variance-action-btn:hover {
    background: rgba(59, 130, 246, 0.26);
    border-color: rgba(147, 197, 253, 0.5);
}

.ec-variance-action-btn.secondary {
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(100, 116, 139, 0.18);
    color: #cbd5e1;
}

.ec-variance-action-btn.secondary:hover {
    background: rgba(100, 116, 139, 0.28);
    border-color: rgba(148, 163, 184, 0.55);
}

.ec-variance-action-btn.bundle {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.16);
    color: #bbf7d0;
}

.ec-variance-action-btn.bundle:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(74, 222, 128, 0.55);
}

.ec-recent-investigations {
    margin-top: 12px;
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
    padding-top: 10px;
}

.ec-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ec-recent-head-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-recent-head h5 {
    margin: 0;
    font-size: 0.72rem;
    color: #cbd5e1;
    letter-spacing: 0.2px;
}

.ec-recent-head span {
    font-size: 0.66rem;
    color: #94a3b8;
}

.ec-recent-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ec-variance-action-btn.mini {
    font-size: 0.6rem;
    padding: 2px 7px;
}

.ec-variance-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ec-recent-item {
    cursor: default;
}

.ec-recent-empty {
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.7rem;
    padding: 10px;
}

.ec-radar-window.severity-critical {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

.ec-radar-window.severity-high {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}

.ec-radar-window.severity-watch {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.ec-radar-window-top,
.ec-radar-window-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ec-radar-window-top {
    color: var(--ec-text);
    font-size: 0.77rem;
    margin-bottom: 4px;
}

.ec-radar-window-bottom {
    color: var(--ec-text-muted);
    font-size: 0.68rem;
}

.ec-radar-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-text-dim);
    font-size: 0.74rem;
}

.ec-kpi-card {
    background: var(--ec-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ec-card-border);
    border-radius: var(--ec-radius);
    padding: 1rem;
    position: relative;
    overflow: visible;
    transition: var(--ec-transition);
    animation: ecKpiIn 0.5s ease-out backwards;
}

.ec-kpi-card:nth-child(1) { animation-delay: 0s; }
.ec-kpi-card:nth-child(2) { animation-delay: 0.05s; }
.ec-kpi-card:nth-child(3) { animation-delay: 0.1s; }
.ec-kpi-card:nth-child(4) { animation-delay: 0.15s; }
.ec-kpi-card:nth-child(5) { animation-delay: 0.2s; }
.ec-kpi-card:nth-child(6) { animation-delay: 0.25s; }

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

.ec-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Status stripe at top of card */
.ec-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--ec-radius) var(--ec-radius) 0 0;
}

.ec-kpi-card.status-green::before { background: var(--ec-success); }
.ec-kpi-card.status-yellow::before { background: var(--ec-warning); }
.ec-kpi-card.status-red::before { background: var(--ec-danger); }
.ec-kpi-card.status-purple::before { background: var(--ec-critical); }

.ec-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

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

.ec-kpi-label-with-formula {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

.ec-kpi-formula-badge {
    font-size: 0.62rem;
    line-height: 1;
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, 0.4);
    background: rgba(30, 58, 138, 0.25);
    border-radius: 6px;
    padding: 2px 4px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
}

.ec-kpi-formula-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    z-index: 30;
    width: min(360px, 70vw);
    background: rgba(2, 6, 23, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    padding: 10px 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    text-transform: none;
    letter-spacing: 0;
}

.ec-kpi-label-with-formula:hover .ec-kpi-formula-tooltip,
.ec-kpi-label-with-formula:focus-within .ec-kpi-formula-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ec-kpi-formula-title {
    font-size: 0.66rem;
    color: #e2e8f0;
    margin-bottom: 6px;
    font-weight: 700;
}

.ec-kpi-formula-text {
    font-size: 0.66rem;
    color: #cbd5e1;
    line-height: 1.55;
    margin-bottom: 6px;
}

.ec-kpi-formula-source {
    font-size: 0.62rem;
    color: #93c5fd;
}

.ec-kpi-formula-note {
    margin-top: 4px;
    font-size: 0.6rem;
    color: #94a3b8;
}

.ec-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-kpi-icon.green { background: var(--ec-success-glow); color: var(--ec-success); }
.ec-kpi-icon.yellow { background: var(--ec-warning-glow); color: var(--ec-warning); }
.ec-kpi-icon.red { background: var(--ec-danger-glow); color: var(--ec-danger); }
.ec-kpi-icon.blue { background: var(--ec-info-glow); color: var(--ec-info); }
.ec-kpi-icon.purple { background: var(--ec-critical-glow); color: var(--ec-critical); }
.ec-kpi-icon.cyan { background: rgba(6, 182, 212, 0.15); color: var(--ec-cyan); }

.ec-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--ec-font-mono);
    line-height: 1.2;
    margin-bottom: 4px;
}

.ec-kpi-value.green { color: var(--ec-success); }
.ec-kpi-value.yellow { color: var(--ec-warning); }
.ec-kpi-value.red { color: var(--ec-danger); }
.ec-kpi-value.purple { color: var(--ec-critical); }
.ec-kpi-value.blue { color: var(--ec-info); }
.ec-kpi-value.cyan { color: var(--ec-cyan); }

.ec-kpi-benchmark {
    font-size: 0.62rem;
    color: var(--ec-text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ec-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
}

.ec-kpi-trend.up-good { color: var(--ec-success); background: var(--ec-success-glow); }
.ec-kpi-trend.up-bad { color: var(--ec-danger); background: var(--ec-danger-glow); }
.ec-kpi-trend.down-good { color: var(--ec-success); background: var(--ec-success-glow); }
.ec-kpi-trend.down-bad { color: var(--ec-danger); background: var(--ec-danger-glow); }

/* KPI Mini Progress Bar */
.ec-kpi-progress {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 8px;
    overflow: hidden;
}

.ec-kpi-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1.5s ease-out;
}

.ec-kpi-progress-fill.green { background: var(--ec-success); }
.ec-kpi-progress-fill.yellow { background: var(--ec-warning); }
.ec-kpi-progress-fill.red { background: var(--ec-danger); }

/* Mini gauge inside KPI card */
.ec-mini-gauge {
    width: 42px;
    height: 42px;
    position: relative;
}

.ec-mini-gauge svg {
    transform: rotate(-90deg);
}

.ec-mini-gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    font-weight: 700;
    font-family: var(--ec-font-mono);
}

/* ═══════════════════════════════════════════
   CHART CARDS — Glass containers
   ═══════════════════════════════════════════ */
.ec-charts-row {
    display: grid;
    gap: 12px;
    margin-bottom: 1.2rem;
}

.ec-charts-row.cols-2 { grid-template-columns: 1fr 1fr; }
.ec-charts-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.ec-chart-card {
    background: var(--ec-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ec-card-border);
    border-radius: var(--ec-radius);
    padding: 1.2rem;
    transition: var(--ec-transition);
    animation: ecChartIn 0.6s ease-out backwards;
    overflow: hidden;
}

.ec-chart-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

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

.ec-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ec-chart-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-chart-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    color: var(--ec-cyan);
}

.ec-chart-title {
    font-size: 0.82rem !important;
    font-weight: 600;
    color: var(--ec-text);
    margin: 0;
}

.ec-chart-subtitle {
    font-size: 0.65rem;
    color: var(--ec-text-dim);
    margin-top: 2px;
}

.ec-chart-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(6, 182, 212, 0.1);
    color: var(--ec-cyan);
    font-weight: 500;
}

/* ═══════════════════════════════════════════
   CEI GAUGE (Large Radial)
   ═══════════════════════════════════════════ */
.ec-gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.ec-gauge-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
}

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

.ec-gauge-bg {
    stroke: rgba(255, 255, 255, 0.05);
}

.ec-gauge-progress {
    transition: stroke-dashoffset 1.5s ease-out;
}

.ec-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ec-gauge-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--ec-font-mono);
    display: block;
    line-height: 1;
}

.ec-gauge-label {
    font-size: 0.65rem;
    color: var(--ec-text-dim);
    margin-top: 4px;
    display: block;
}

.ec-gauge-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.ec-gauge-zones {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.ec-gauge-zone {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    color: var(--ec-text-dim);
}

.ec-gauge-zone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ═══════════════════════════════════════════
   WATERFALL CHART
   ═══════════════════════════════════════════ */
.ec-waterfall-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

.ec-waterfall-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    color: var(--ec-text-dim);
}

.ec-waterfall-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════
   TREEMAP
   ═══════════════════════════════════════════ */
.ec-treemap-wrapper {
    margin-top: 0.5rem;
}

.ec-treemap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.ec-treemap-cell {
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: var(--ec-transition);
    position: relative;
    overflow: hidden;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ec-treemap-cell:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.ec-treemap-cell.flash-danger {
    animation: ecFlashDanger 1.5s ease-in-out infinite;
}

@keyframes ecFlashDanger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 16px 4px rgba(239, 68, 68, 0.3); }
}

.ec-treemap-amount {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--ec-font-mono);
    margin-bottom: 2px;
}

.ec-treemap-label {
    font-size: 0.62rem;
    opacity: 0.8;
}

.ec-treemap-pct {
    font-size: 0.58rem;
    opacity: 0.6;
    margin-top: 2px;
}

.ec-treemap-invoices {
    font-size: 0.55rem;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════
   BUBBLE CHART (Customer Risk)
   ═══════════════════════════════════════════ */
.ec-bubble-tooltip {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(6, 182, 212, 0.2) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.ec-bubble-tooltip-name {
    font-weight: 600;
    color: var(--ec-text);
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.ec-bubble-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.68rem;
    color: var(--ec-text-muted);
    padding: 2px 0;
}

.ec-bubble-tooltip-val {
    font-family: var(--ec-font-mono);
    color: var(--ec-text);
    font-weight: 500;
}

/* ═══════════════════════════════════════════
   COLLECTOR RANKING (Horizontal Bars)
   ═══════════════════════════════════════════ */
.ec-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec-ranking-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: var(--ec-transition);
    cursor: pointer;
}

.ec-ranking-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ec-ranking-rank {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(30, 41, 59, 0.5);
    color: var(--ec-text-dim);
    flex-shrink: 0;
}

.ec-ranking-rank.rank-1 { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.ec-ranking-rank.rank-2 { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.ec-ranking-rank.rank-3 { background: rgba(180, 83, 9, 0.15); color: #b45309; }

.ec-ranking-name {
    width: 80px;
    font-size: 0.72rem;
    color: var(--ec-text);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-ranking-bar-container {
    flex: 1;
    height: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}

.ec-ranking-bar-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 1s ease-out;
    position: relative;
}

.ec-ranking-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
}

.ec-ranking-bar-fill.blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.ec-ranking-bar-fill.green { background: linear-gradient(90deg, #10b981, #34d399); }
.ec-ranking-bar-fill.yellow { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ec-ranking-bar-fill.red { background: linear-gradient(90deg, #ef4444, #f87171); }

.ec-ranking-score {
    font-size: 0.68rem;
    font-weight: 600;
    font-family: var(--ec-font-mono);
    width: 36px;
    text-align: left;
    flex-shrink: 0;
}

.ec-ranking-grade {
    font-size: 0.62rem;
    font-weight: 700;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   ROLE-SPECIFIC BOARDS (CFO / CCL)
   ═══════════════════════════════════════════ */
.ec-financial-board,
.ec-variance-board,
.ec-execution-board {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.ec-financial-row,
.ec-variance-row,
.ec-execution-row {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    padding: 8px 10px;
}

.ec-financial-row.tone-good,
.ec-execution-row.tone-good {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
}

.ec-financial-row.tone-watch,
.ec-execution-row.tone-watch {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
}

.ec-financial-row.tone-risk,
.ec-execution-row.tone-risk {
    border-color: rgba(239, 68, 68, 0.48);
    background: rgba(239, 68, 68, 0.1);
}

.ec-financial-row.tone-neutral,
.ec-execution-row.tone-neutral {
    border-color: rgba(148, 163, 184, 0.28);
}

.ec-financial-row-head,
.ec-variance-row-head,
.ec-execution-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    color: #cbd5e1;
}

.ec-financial-row-head strong,
.ec-variance-row-head strong,
.ec-execution-row-head strong {
    color: #f1f5f9;
    font-size: 0.78rem;
}

.ec-financial-row-meta,
.ec-variance-row-meta,
.ec-execution-row-note {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 0.66rem;
    line-height: 1.35;
}

.ec-financial-progress {
    margin-top: 6px;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.ec-financial-progress-fill {
    height: 100%;
    border-radius: inherit;
}

.ec-financial-progress-fill.tone-good { background: #10b981; }
.ec-financial-progress-fill.tone-watch { background: #f59e0b; }
.ec-financial-progress-fill.tone-risk { background: #ef4444; }
.ec-financial-progress-fill.tone-neutral { background: #64748b; }

.ec-variance-row {
    cursor: pointer;
    transition: var(--ec-transition);
}

.ec-variance-row:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.08);
}

/* ═══════════════════════════════════════════
   CUSTOM RECHARTS TOOLTIP
   ═══════════════════════════════════════════ */
.ec-tooltip {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(6, 182, 212, 0.2) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    font-family: var(--ec-font) !important;
}

.ec-tooltip-label {
    font-weight: 600;
    color: var(--ec-text);
    font-size: 0.75rem;
    margin-bottom: 4px;
}

.ec-tooltip-row {
    font-size: 0.68rem;
    color: var(--ec-text-muted);
    padding: 1px 0;
}

.ec-tooltip-ai {
    font-size: 0.62rem;
    color: var(--ec-cyan);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 6px;
    padding-top: 6px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.ec-tooltip-money {
    min-width: 180px;
}

.ec-chart-action {
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: var(--ec-transition);
}

.ec-chart-action:hover {
    background: rgba(6, 182, 212, 0.16);
    color: #e0f2fe;
    border-color: rgba(125, 211, 252, 0.25);
}

.ec-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1200;
}

.ec-modal-card {
    width: min(1180px, 100%);
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.ec-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ec-modal-title {
    margin: 0;
    color: var(--ec-text);
    font-size: 1rem !important;
}

.ec-modal-subtitle {
    color: var(--ec-text-dim);
    font-size: 0.7rem;
    margin-top: 4px;
}

.ec-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-modal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
}

.ec-modal-summary-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ec-text);
}

.ec-modal-summary-card strong {
    font-family: var(--ec-font-mono);
    color: #ffffff;
}

.ec-modal-table-wrap {
    overflow: auto;
    padding: 0 20px 20px;
}

.ec-modal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.ec-modal-table th,
.ec-modal-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    text-align: start;
    white-space: nowrap;
}

.ec-modal-table th {
    position: sticky;
    top: 0;
    background: #111c34;
    color: #e2e8f0;
    font-size: 0.72rem;
    z-index: 1;
}

.ec-modal-table td {
    color: #cbd5e1;
    font-size: 0.7rem;
    font-family: var(--ec-font-mono);
}

.ec-modal-empty {
    padding: 28px 20px 30px;
    text-align: center;
    color: var(--ec-text-dim);
    font-size: 0.78rem;
}

/* ═══════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════ */
.exec-empty {
    padding: 5rem 2rem;
    text-align: center;
    color: var(--ec-text-muted);
}

.exec-empty-icon { margin-bottom: 1.5rem; opacity: 0.25; color: var(--ec-cyan); }
.exec-empty h2 { font-size: 1.5rem !important; color: var(--ec-text); margin-bottom: 0.5rem; }
.exec-empty .exec-empty-features { font-size: 0.78rem; opacity: 0.4; margin-top: 0.5rem; }

/* ═══════════════════════════════════════════
   COUNTER
   ═══════════════════════════════════════════ */
.exec-counter { font-family: var(--ec-font-mono); }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1400px) {
    .ec-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .ec-charts-row.cols-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1200px) {
    .ec-charts-row.cols-2 { grid-template-columns: 1fr; }
    .ec-charts-row.cols-3 { grid-template-columns: 1fr; }
    .ec-treemap-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .ec-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .exec-hero { flex-direction: column; gap: 10px; align-items: flex-start; }
    .exec-hero-controls { width: 100%; justify-content: flex-end; }
    .ec-basis-tabs { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .ec-kpi-grid { grid-template-columns: 1fr; }
    .ec-treemap-grid { grid-template-columns: repeat(2, 1fr); }
    .ec-alert-bar { flex-direction: column; }
    .ec-basis-tab { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════
   🔭 AL-MARSAD INTEGRATION
   ═══════════════════════════════════════════ */
.ec-quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    margin-inline-start: 8px;
}

.ec-quality-badge.complete {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.ec-quality-badge.partial {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

/* Period selector spacing */
.marsad-period-selector {
    margin-bottom: 1.2rem;
}
/* ═══════════════════════════════════════════
   Report Center — Premium CSS
   Phase 8 — DSOXlap Identity
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.rc-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.06));
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    animation: rcHeroIn 0.5s ease-out;
}

@keyframes rcHeroIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.rc-hero-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rc-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.rc-hero h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    font-family: 'Cairo', 'Inter', sans-serif;
}

.rc-hero p { color: #94a3b8; font-size: 0.78rem; margin: 2px 0 0; }

/* ── Type Grid ── */
.rc-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}

.rc-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
}

.rc-type-card:hover {
    border-color: var(--card-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.rc-type-card.active {
    border-color: var(--card-color);
    background: color-mix(in srgb, var(--card-color) 10%, rgba(15, 23, 42, 0.5));
}

.rc-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-type-label { font-size: 0.82rem; font-weight: 600; color: #f1f5f9; }
.rc-type-desc { font-size: 0.68rem; color: #64748b; line-height: 1.4; }

/* ── Loading ── */
.rc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem;
    color: #94a3b8;
}

.spinning { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Report Card ── */
.rc-report-card {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    animation: reportSlide 0.4s ease-out;
}

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

.rc-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    border-bottom: 2px solid;
}

.rc-report-title { display: flex; align-items: center; gap: 8px; }
.rc-report-title h3 { margin: 0; font-size: 0.95rem; color: #f1f5f9; }

.rc-report-actions { display: flex; gap: 6px; }

.rc-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(30, 41, 59, 0.6);
    background: rgba(30, 41, 59, 0.3);
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.rc-action-btn:hover { border-color: #3b82f6; color: #3b82f6; }

/* ── Daily Flash ── */
.rc-daily { padding: 1.2rem; }

.rc-flash-line {
    padding: 8px 0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.3);
    color: #e2e8f0;
    font-size: 0.85rem;
}

.rc-flash-line:last-child { border-bottom: none; }

.rc-top-debtors {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 41, 59, 0.5);
}

.rc-top-debtors h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f59e0b;
    font-size: 0.82rem;
    margin: 0 0 8px;
}

.rc-debtor-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
}

.rc-debtor-row:hover { background: rgba(245, 158, 11, 0.04); }
.rc-debtor-name { color: #e2e8f0; font-size: 0.78rem; }
.rc-debtor-amt { color: #ef4444; font-size: 0.78rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; }

/* ── Weekly ── */
.rc-weekly { padding: 1.2rem; }

.rc-metric-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}

.rc-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 10px;
}

.rc-metric-val { font-size: 1.3rem; font-weight: 700; color: #f1f5f9; }
.rc-metric-lbl { font-size: 0.7rem; color: #64748b; }

.rc-chart-wrap,
.rc-team-list,
.rc-actions-list {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 41, 59, 0.4);
}

.rc-chart-wrap h4,
.rc-team-list h4,
.rc-actions-list h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #e2e8f0;
    margin: 0 0 10px;
}

.rc-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 2px;
}

.rc-team-row:hover { background: rgba(59, 130, 246, 0.04); }

.rc-team-rank {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(30, 41, 59, 0.5);
    color: #64748b;
}

.rc-team-rank.top-1 { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.rc-team-rank.top-2 { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.rc-team-rank.top-3 { background: rgba(180, 83, 9, 0.15); color: #b45309; }

.rc-team-name { flex: 1; color: #e2e8f0; font-size: 0.78rem; }
.rc-team-rate { color: #3b82f6; font-size: 0.75rem; font-weight: 600; }
.rc-team-amount { color: #64748b; font-size: 0.72rem; }

.rc-action-line {
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.2);
    color: #e2e8f0;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

/* ── Monthly ── */
.rc-monthly { padding: 1.2rem; }

.rc-executive-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}

.rc-exec-kpi {
    text-align: center;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 10px;
    border-top: 2px solid;
}

.rc-exec-val { display: block; font-size: 1.15rem; font-weight: 700; color: #f1f5f9; }
.rc-exec-lbl { display: block; font-size: 0.68rem; color: #64748b; margin-top: 4px; }

.rc-sectors { margin-top: 1rem; }
.rc-sectors h4 { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #e2e8f0; margin: 0 0 10px; }

.rc-sector-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.rc-sector-name { min-width: 100px; color: #e2e8f0; font-size: 0.78rem; }

.rc-sector-bar-wrap {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: rgba(30, 41, 59, 0.5);
    overflow: hidden;
}

.rc-sector-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease-out;
}

.rc-sector-rate { min-width: 40px; text-align: left; color: #94a3b8; font-size: 0.75rem; font-weight: 600; }

.rc-recs { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(30, 41, 59, 0.4); }
.rc-recs h4 { font-size: 0.82rem; color: #e2e8f0; margin: 0 0 8px; }
.rc-rec-line { padding: 6px 8px; color: #f59e0b; font-size: 0.8rem; }

/* ── Escalation ── */
.rc-escalation { padding: 1.2rem; }

.rc-esc-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.rc-esc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
}

.rc-esc-stat.critical {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.rc-esc-stat.danger {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.rc-esc-num { font-size: 2rem; font-weight: 700; }

.rc-esc-table { overflow-x: auto; }

.rc-esc-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.rc-esc-table th {
    padding: 8px 10px;
    text-align: right;
    color: #64748b;
    font-weight: 500;
    border-bottom: 1px solid #1e293b;
    font-size: 0.72rem;
}

.rc-esc-table td {
    padding: 8px 10px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}

.rc-esc-table tr:hover { background: rgba(239, 68, 68, 0.04); }

.inv-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #94a3b8; }
.amt-col { color: #ef4444; font-weight: 600; }
.days-col { color: #f59e0b; font-weight: 600; }

/* ── Empty / No Data ── */
.rc-no-data,
.rc-empty-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: #64748b;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 1000px) {
    .rc-type-grid { grid-template-columns: repeat(2, 1fr); }
    .rc-executive-kpis { grid-template-columns: repeat(3, 1fr); }
    .rc-metric-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .rc-type-grid { grid-template-columns: 1fr; }
    .rc-executive-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════
   Export Dashboard — Print-Ready CSS
   Phase 11 — DSOXlap Identity
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.export-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.export-hero-left { display: flex; align-items: center; gap: 12px; }

.export-hero-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16, 185, 129, 0.15); color: #10b981;
}

.export-hero h1 { font-size: 1.3rem; font-weight: 700; color: #f1f5f9; margin: 0; }
.export-hero p { color: #94a3b8; font-size: 0.78rem; margin: 2px 0 0; }

/* ── Setup ── */
.export-setup {
    display: flex; align-items: flex-end; gap: 12px;
    padding: 2rem; background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.6); border-radius: 14px;
}

.setup-field { flex: 1; }
.setup-field label { display: block; color: #94a3b8; font-size: 0.78rem; margin-bottom: 6px; }

.setup-field input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(30, 41, 59, 0.8);
    color: #f1f5f9; font-size: 0.9rem; box-sizing: border-box;
}

.export-gen-btn {
    display: flex; align-items: center; gap: 6px; padding: 10px 24px;
    border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.15); color: #10b981;
    cursor: pointer; font-size: 0.88rem; transition: all 0.2s;
}

.export-gen-btn:hover:not(:disabled) { background: rgba(16, 185, 129, 0.25); }

/* ── Controls ── */
.export-controls {
    display: flex; gap: 8px; margin-bottom: 1rem;
}

.export-print-btn,
.export-refresh-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: 8px; border: 1px solid rgba(30, 41, 59, 0.6);
    background: rgba(30, 41, 59, 0.3); color: #94a3b8;
    cursor: pointer; font-size: 0.8rem; transition: all 0.2s;
}

.export-print-btn:hover { border-color: #10b981; color: #10b981; }
.export-refresh-btn:hover { border-color: #3b82f6; color: #3b82f6; }

/* ── Loading ── */
.export-loading, .export-no-data {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 4rem; gap: 1rem; color: #94a3b8;
}

.spinning { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Report Body ── */
.export-report {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(30, 41, 59, 0.6);
    border-radius: 14px;
    overflow: hidden;
}

.export-section {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}

.export-section:last-child { border-bottom: none; }
.export-section h2 { font-size: 1rem; color: #f1f5f9; margin: 0 0 1rem; font-weight: 600; }

/* ── Cover ── */
.export-cover {
    text-align: center; padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(99, 102, 241, 0.06));
}

.cover-logo {
    font-size: 2.5rem; font-weight: 900; color: #06b6d4;
    letter-spacing: 4px; margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.export-cover h1 { font-size: 1.8rem; color: #f1f5f9; margin: 0 0 8px; }
.cover-subtitle { color: #94a3b8; font-size: 0.9rem; }
.cover-meta { margin-top: 1.5rem; display: flex; justify-content: center; gap: 2rem; color: #64748b; font-size: 0.75rem; }

/* ── KPI Strip ── */
.export-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
}

.export-kpi {
    text-align: center; padding: 1rem; border-radius: 10px;
    background: rgba(30, 41, 59, 0.3); border-top: 2px solid;
}

.kpi-val { display: block; font-size: 1.2rem; font-weight: 700; color: #f1f5f9; }
.kpi-unit { display: inline; font-size: 0.7rem; color: #64748b; margin-right: 4px; }
.kpi-lbl { display: block; font-size: 0.7rem; color: #64748b; margin-top: 4px; }

/* ── Table ── */
.export-table {
    width: 100%; border-collapse: collapse; font-size: 0.78rem;
}

.export-table th {
    padding: 8px 10px; text-align: right; color: #64748b;
    font-weight: 500; border-bottom: 1px solid #1e293b; font-size: 0.72rem;
}

.export-table td {
    padding: 8px 10px; color: #e2e8f0; border-bottom: 1px solid rgba(30, 41, 59, 0.3);
}

.export-table tr:hover { background: rgba(59, 130, 246, 0.04); }

/* ── Recommendations ── */
.export-rec-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-radius: 8px; margin-bottom: 6px; font-size: 0.82rem;
}

.export-rec-item.critical { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; }
.export-rec-item.warning { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); color: #f59e0b; }
.export-rec-item.info { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2); color: #10b981; }

/* ── Footer ── */
.export-footer {
    padding: 1rem 1.5rem; text-align: center; color: #475569; font-size: 0.7rem;
    border-top: 1px solid rgba(30, 41, 59, 0.3);
}

.footer-brand { color: #06b6d4; font-weight: 600; margin-top: 2px; }

/* ═══ PRINT STYLES ═══ */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; color: black !important; }
    .export-report { background: white; border: none; }
    .export-section { padding: 1rem; break-inside: avoid; }
    .export-cover { background: none; }
    .cover-logo { color: #0891b2; }
    .export-cover h1, .export-section h2, .kpi-val { color: #1e293b; }
    .kpi-lbl, .kpi-unit, .cover-subtitle, .cover-meta { color: #6b7280; }
    .export-kpi { background: #f8fafc; border-color: #d1d5db; }
    .export-table th { color: #374151; border-color: #d1d5db; }
    .export-table td { color: #1f2937; border-color: #e5e7eb; }
    .export-rec-item { border: 1px solid #d1d5db; }
    .export-footer { color: #9ca3af; }
}
.kpf-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kpf-header {
  border: 1px solid rgba(30, 41, 59, 0.55);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(13, 18, 35, 0.92));
  border-radius: 14px;
  padding: 16px;
}

.kpf-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kpf-title-row h2 {
  margin: 0;
  color: #e2e8f0;
  font-size: 1.05rem;
}

.kpf-title-row p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.84rem;
}

.kpf-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.kpf-authority {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpf-fy-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kpf-fy-btn {
  border: 1px solid rgba(51, 65, 85, 0.85);
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 0.78rem;
  cursor: pointer;
}

.kpf-fy-btn.active {
  border-color: rgba(56, 189, 248, 0.85);
  color: #e2e8f0;
  background: rgba(30, 64, 175, 0.32);
}

.kpf-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.kpf-card {
  border: 1px solid rgba(30, 41, 59, 0.6);
  background: rgba(15, 23, 42, 0.78);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kpf-card-label {
  color: #94a3b8;
  font-size: 0.74rem;
}

.kpf-card strong {
  color: #e2e8f0;
  font-size: 1rem;
}

.kpf-card-warning {
  border-color: rgba(245, 158, 11, 0.6);
}

.kpf-card-danger {
  border-color: rgba(239, 68, 68, 0.6);
}

.kpf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kpf-grid-single {
  grid-template-columns: 1fr;
}

.kpf-panel,
.kpf-table-panel {
  border: 1px solid rgba(30, 41, 59, 0.6);
  background: rgba(15, 23, 42, 0.78);
  border-radius: 12px;
  padding: 12px;
}

.kpf-panel h4,
.kpf-table-panel h4 {
  margin: 0 0 10px;
  color: #e2e8f0;
  font-size: 0.86rem;
}

.kpf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.kpf-table th,
.kpf-table td {
  border-bottom: 1px solid rgba(30, 41, 59, 0.65);
  padding: 8px 6px;
  text-align: left;
  color: #cbd5e1;
}

.kpf-table th {
  color: #94a3b8;
  font-weight: 600;
}

.kpf-empty {
  border: 1px dashed rgba(30, 41, 59, 0.7);
  background: rgba(15, 23, 42, 0.65);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: #94a3b8;
}

.kpf-empty-danger {
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.kpf-empty-cell {
  text-align: center !important;
  color: #94a3b8 !important;
}

@media (max-width: 1200px) {
  .kpf-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .kpf-cards,
  .kpf-grid {
    grid-template-columns: 1fr;
  }
}
.wr-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    color: #e2e8f0;
}

.wr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(15, 23, 42, 0.92));
    border-radius: 14px;
}

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

.wr-header-left h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.wr-header-left p {
    margin: 3px 0 0;
    font-size: 0.82rem;
    color: #94a3b8;
}

.wr-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.14);
}

.wr-state-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wr-state-strip span {
    font-size: 0.72rem;
    padding: 5px 9px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #cbd5e1;
}

.wr-engine-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.36);
    background: rgba(251, 191, 36, 0.08);
    color: #fde68a;
    font-size: 0.8rem;
}

.wr-phase3-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.wr-phase3-card {
    border: 1px solid rgba(56, 189, 248, 0.24);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wr-phase3-card strong {
    display: block;
    font-size: 0.86rem;
    color: #e2e8f0;
}

.wr-phase3-card span {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
}

.wr-grid {
    display: grid;
    grid-template-columns: 1.06fr 1.55fr 1.24fr;
    gap: 12px;
    min-height: 62vh;
}

.wr-left-panel,
.wr-center-panel,
.wr-right-panel {
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.wr-panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: #cbd5e1;
    font-weight: 600;
}

.wr-indicator-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding-right: 2px;
}

.wr-indicator-item {
    text-align: left;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wr-indicator-item:hover {
    border-color: rgba(56, 189, 248, 0.38);
}

.wr-indicator-item.active {
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.28) inset;
}

.wr-indicator-item.critical {
    border-color: rgba(239, 68, 68, 0.55);
}

.wr-indicator-item.warning {
    border-color: rgba(251, 191, 36, 0.55);
}

.wr-indicator-item.watch {
    border-color: rgba(59, 130, 246, 0.55);
}

.wr-indicator-item.resolved {
    border-color: rgba(16, 185, 129, 0.55);
}

.wr-indicator-top,
.wr-indicator-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
}

.wr-state {
    font-size: 0.67rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.wr-state.critical {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.16);
}

.wr-state.warning {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(251, 191, 36, 0.16);
}

.wr-state.watch {
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.62);
    background: rgba(59, 130, 246, 0.14);
}

.wr-state.resolved,
.wr-state.normal {
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.6);
    background: rgba(16, 185, 129, 0.14);
}

.wr-indicator-bottom .up {
    color: #fca5a5;
    font-weight: 700;
}

.wr-indicator-bottom .down {
    color: #86efac;
    font-weight: 700;
}

.wr-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.63rem;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(30, 41, 59, 0.72);
}

.wr-badge.live {
    border-color: rgba(56, 189, 248, 0.55);
}

.wr-badge.sla_breached {
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
}

.wr-badge.action_pending {
    border-color: rgba(251, 191, 36, 0.62);
    color: #fde68a;
}

.wr-badge.ceo_directive {
    border-color: rgba(168, 85, 247, 0.65);
    color: #e9d5ff;
}

.wr-badge.resolved {
    border-color: rgba(16, 185, 129, 0.62);
    color: #a7f3d0;
}

.wr-thread-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    color: #cbd5e1;
}

.wr-thread-meta span {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.62);
}

.wr-thread-meta.critical span {
    border-color: rgba(239, 68, 68, 0.45);
}

.wr-thread-meta.warning span {
    border-color: rgba(251, 191, 36, 0.45);
}

.wr-thread-meta.watch span {
    border-color: rgba(59, 130, 246, 0.42);
}

.wr-sla-breach {
    color: #fecaca !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    background: rgba(127, 29, 29, 0.3) !important;
}

.wr-timeline {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}

.wr-agent-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.62);
    background: rgba(14, 116, 144, 0.22);
    color: #a5f3fc;
    font-size: 0.7rem;
    animation: wrPulse 1.4s ease-in-out infinite;
}

@keyframes wrPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.28);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(34, 211, 238, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    }
}

.wr-message {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.78);
    padding: 10px;
}

.wr-message-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

.wr-message-head strong {
    color: #e2e8f0;
}

.wr-message p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.81rem;
    line-height: 1.52;
}

.wr-brief-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wr-brief-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(15, 23, 42, 0.55);
    border-radius: 8px;
    padding: 8px;
}

.wr-brief-key {
    font-size: 0.71rem;
    letter-spacing: 0.02em;
    color: #7dd3fc;
    font-weight: 700;
}

.wr-brief-row p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.8rem;
    color: #e2e8f0;
    line-height: 1.45;
}

.wr-brief-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wr-brief-meta span {
    font-size: 0.72rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.62);
    border-radius: 999px;
    padding: 4px 8px;
    color: #bfdbfe;
}

.wr-brief-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wr-brief-suggestions span {
    font-size: 0.75rem;
    border: 1px dashed rgba(45, 212, 191, 0.45);
    background: rgba(6, 78, 59, 0.26);
    border-radius: 8px;
    padding: 6px 8px;
    color: #99f6e4;
}

.wr-message.ceo_directive {
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(88, 28, 135, 0.15);
}

.wr-message.action_created,
.wr-message.action_pending {
    border-color: rgba(251, 191, 36, 0.5);
}

.wr-message.resolved {
    border-color: rgba(16, 185, 129, 0.48);
}

.wr-mentions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.wr-mentions span {
    font-size: 0.68rem;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.45);
    color: #67e8f9;
    background: rgba(8, 47, 73, 0.52);
}

.wr-composer {
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wr-secretary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wr-secretary-actions button {
    border: 1px solid rgba(16, 185, 129, 0.45);
    background: rgba(6, 78, 59, 0.42);
    color: #a7f3d0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.wr-secretary-actions button:hover {
    border-color: rgba(52, 211, 153, 0.6);
}

.wr-secretary-actions button.wr-live-action {
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(12, 74, 110, 0.42);
    color: #a5f3fc;
}

.wr-secretary-actions button.wr-live-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wr-composer textarea {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    resize: vertical;
    min-height: 70px;
    padding: 10px;
    font: inherit;
}

.wr-composer button,
.wr-block-head button {
    align-self: flex-end;
    border: 1px solid rgba(56, 189, 248, 0.42);
    background: rgba(14, 116, 144, 0.28);
    color: #a5f3fc;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 600;
}

.wr-composer button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wr-context-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wr-context-kpis > div {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.66);
    border-radius: 9px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wr-context-kpis label {
    font-size: 0.68rem;
    color: #94a3b8;
}

.wr-context-kpis strong {
    font-size: 0.84rem;
    color: #e2e8f0;
}

.wr-context-block {
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.56);
    border-radius: 10px;
    padding: 10px;
}

.wr-context-block h4 {
    margin: 0 0 8px;
    font-size: 0.77rem;
    color: #cbd5e1;
}

.wr-context-block p {
    margin: 4px 0;
    font-size: 0.75rem;
    color: #cbd5e1;
}

.wr-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.wr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.wr-table th,
.wr-table td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    padding: 7px 6px;
    text-align: left;
}

.wr-table th {
    color: #94a3b8;
    font-weight: 600;
}

.wr-empty-cell {
    text-align: center;
    color: #94a3b8;
    padding: 10px;
}

.wr-drill-row {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.62);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 7px;
}

.wr-drill-row strong {
    font-size: 0.77rem;
}

.wr-drill-row span {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
}

.wr-drill-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wr-footer {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.58);
    padding: 9px 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: #94a3b8;
}

.wr-footer div {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wr-empty {
    padding: 24px 12px;
    text-align: center;
    color: #94a3b8;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.45);
}

.wr-empty-danger {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.48);
    background: rgba(127, 29, 29, 0.22);
}

.wr-notification-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wr-note {
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.74);
    color: #e2e8f0;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wr-note strong {
    font-size: 0.73rem;
}

.wr-note span {
    font-size: 0.71rem;
    color: #cbd5e1;
}

.wr-note.critical {
    border-color: rgba(239, 68, 68, 0.55);
}

.wr-note.warning {
    border-color: rgba(251, 191, 36, 0.55);
}

.wr-note.info {
    border-color: rgba(56, 189, 248, 0.42);
}

.wr-policy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.wr-policy-grid > div {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    padding: 7px 8px;
    background: rgba(15, 23, 42, 0.58);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wr-policy-grid > div strong {
    font-size: 0.74rem;
    color: #e2e8f0;
}

.wr-policy-grid > div span {
    font-size: 0.7rem;
    color: #94a3b8;
}

.wr-policy-grid > div.active {
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.24) inset;
}

@media (max-width: 1350px) {
    .wr-phase3-row {
        grid-template-columns: 1fr;
    }

    .wr-grid {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .wr-left-panel,
    .wr-center-panel,
    .wr-right-panel {
        min-height: 360px;
    }
}
.dir-dock-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1800;
    border: 1px solid rgba(34, 211, 238, 0.45);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(8, 47, 73, 0.9));
    color: #e2e8f0;
    border-radius: 999px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.dir-dock-launcher .emoji {
    font-size: 18px;
}

.dir-dock-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 430px;
    max-width: 95vw;
    z-index: 1799;
    border-left: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 0;
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.985), rgba(15, 23, 42, 0.965));
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5);
    padding: 14px 14px 10px;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dir-dock-panel.ar {
    direction: rtl;
}

.dir-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.dir-dock-head button {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.dir-dock-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dir-dock-head-left .emoji {
    font-size: 20px;
}

.dir-dock-head-left strong {
    display: block;
    font-size: 0.95rem;
}

.dir-dock-head-left small {
    color: #94a3b8;
    font-size: 0.75rem;
}

.dir-dock-privacy-note {
    border: 1px solid rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.12);
    color: #86efac;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.78rem;
}

.dir-dock-main-btn {
    width: 100%;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.14);
    color: #6ee7b7;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 10px;
}

.dir-dock-prompts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 155px;
    overflow: auto;
    padding-right: 2px;
}

.dir-dock-prompts button {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.7);
    color: #cbd5e1;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: right;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.82rem;
}

.dir-dock-prompts button span {
    line-height: 1.3;
}

.dir-dock-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    gap: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    padding-top: 8px;
    flex-wrap: wrap;
}

.dir-dock-foot .link {
    border: none;
    background: transparent;
    color: #22d3ee;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.dir-dock-foot .link.danger {
    color: #fca5a5;
}

.dir-dock-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dir-dock-chat-messages {
    flex: 1;
    min-height: 200px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.62);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dir-dock-empty {
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 6px;
}

.dir-dock-msg {
    display: flex;
}

.dir-dock-msg.user {
    justify-content: flex-end;
}

.dir-dock-msg.agent {
    justify-content: flex-start;
}

.dir-dock-msg-bubble {
    max-width: 92%;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
}

.dir-dock-msg.user .dir-dock-msg-bubble {
    background: rgba(14, 116, 144, 0.25);
    border-color: rgba(34, 211, 238, 0.35);
}

.dir-dock-msg.agent .dir-dock-msg-bubble {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(148, 163, 184, 0.25);
}

.dir-dock-chat-input-wrap {
    display: flex;
    gap: 8px;
}

.dir-dock-chat-input {
    flex: 1;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
    padding: 10px 12px;
    font-size: 0.84rem;
}

.dir-dock-chat-send {
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.16);
    color: #67e8f9;
    border-radius: 10px;
    width: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dir-dock-chat-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

body.dir-dock-open .fp-main {
    padding-right: 430px;
    transition: padding-right 0.25s ease;
}

body.dir-dock-open .v2-content-area {
    padding-right: 430px;
    transition: padding-right 0.25s ease;
}

.dir-dock-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1810;
    background: rgba(2, 6, 23, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dir-dock-welcome {
    width: min(620px, 100%);
    border-radius: 18px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.98), rgba(8, 47, 73, 0.92));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    padding: 22px;
    color: #e2e8f0;
}

.dir-dock-welcome-title {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dir-dock-welcome-title span {
    font-size: 28px;
}

.dir-dock-welcome-title h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.dir-dock-welcome-title p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
}

.dir-dock-name-box {
    margin-top: 16px;
}

.dir-dock-name-box label {
    font-size: 0.82rem;
    color: #94a3b8;
    display: block;
    margin-bottom: 6px;
}

.dir-dock-name-box input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(34, 211, 238, 0.25);
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
    padding: 10px 12px;
}

.dir-dock-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dir-btn {
    border-radius: 10px;
    border: none;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dir-btn.ghost {
    background: transparent;
    color: #94a3b8;
}

.dir-btn.primary {
    background: linear-gradient(135deg, #14b8a6, #06b6d4);
    color: #042f2e;
}

.dir-btn.primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dir-dock-error {
    margin-top: 10px;
    color: #fda4af;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .dir-dock-launcher {
        right: 14px;
        bottom: 14px;
    }

    .dir-dock-panel {
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        border-left: none;
    }

    body.dir-dock-open .fp-main,
    body.dir-dock-open .v2-content-area {
        padding-right: 0;
    }
}
/* ═══════════════════════════════
   DSOXlap Landing Page v3
   Bilingual, Animated Charts, 4x Logo
   ═══════════════════════════════ */

.lp {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #e0e6ed;
    background: #060b18;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    position: relative;
}

/* ── Background ── */
.lp-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.lp-grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 212, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.015) 1px, transparent 1px);
    background-size: 50px 50px;
}

.lp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: orbFloat 18s ease-in-out infinite;
}

.lp-orb-1 {
    width: 600px;
    height: 600px;
    background: rgba(0, 212, 255, 0.10);
    top: -200px;
    right: -200px;
}

.lp-orb-2 {
    width: 500px;
    height: 500px;
    background: rgba(99, 102, 241, 0.08);
    bottom: 10%;
    left: -150px;
    animation-delay: 6s;
}

.lp-orb-3 {
    width: 350px;
    height: 350px;
    background: rgba(16, 185, 129, 0.06);
    top: 50%;
    right: 40%;
    animation-delay: 12s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(40px, -30px) scale(1.08);
    }

    50% {
        transform: translate(-20px, 50px) scale(0.95);
    }

    75% {
        transform: translate(30px, 20px) scale(1.05);
    }
}

.lp-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(0, 212, 255, 0.5);
    border-radius: 50%;
    animation: particleFloat 4s ease-in-out infinite;
}

@keyframes particleFloat {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-40px) scale(1);
    }
}

/* ── Navigation ── */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5%;
    background: rgba(6, 11, 24, 0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.lp-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-nav-logo {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.lp-nav-name {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: #00d4ff;
    letter-spacing: 1px;
}

.lp-nav-tagline {
    display: block;
    font-size: 0.65rem;
    color: #4b5563;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.lp-nav-login {
    padding: 10px 28px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #00d4ff, #6366f1);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.lp-nav-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.35);
}

/* ── Hero ── */
.lp-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    padding: 60px 5% 50px;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
}

.lp-hero-left {
    animation: fadeUp 0.8s ease both;
}

.lp-badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 100px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 18px;
}

.lp-h1 {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 8px;
}

.lp-glow-text {
    background: linear-gradient(135deg, #00d4ff, #6366f1, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradShift 5s ease infinite;
}

@keyframes gradShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.lp-h1-ar {
    font-size: 1.1rem;
    color: #6b7688;
    margin: 0 0 16px;
    font-weight: 500;
}

.lp-desc {
    font-size: 0.95rem;
    color: #8b95a5;
    line-height: 1.75;
    margin: 0 0 8px;
}

.lp-desc-ar {
    font-size: 0.82rem;
    color: #4b5563;
    direction: rtl;
    margin: 0 0 24px;
}

.lp-cta-main {
    padding: 13px 36px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #00d4ff, #6366f1);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25);
}

.lp-cta-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(0, 212, 255, 0.4);
}

/* ── Hero Logo (4x) ── */
.lp-hero-logo-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-hero-logo {
    width: 160px;
    height: 160px;
    border-radius: 28px;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
    position: relative;
    z-index: 2;
}

.lp-hero-logo-ring {
    position: absolute;
    inset: -12px;
    border-radius: 36px;
    border: 2px solid rgba(0, 212, 255, 0.15);
    animation: ringPulse 3s ease-in-out infinite;
}

.lp-ring-2 {
    inset: -24px;
    border-radius: 42px;
    border-color: rgba(99, 102, 241, 0.10);
    animation-delay: 1.5s;
}

@keyframes ringPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.04);
    }
}

.lp-hero-right {
    animation: fadeUp 0.8s ease 0.2s both;
}

/* Hero KPI grid */
.lp-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lp-kpi-card {
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    transition: all 0.3s;
    overflow: hidden;
}

.lp-kpi-card:hover {
    border-color: rgba(0, 212, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
}

.lp-kpi-label {
    display: block;
    font-size: 0.65rem;
    color: #6b7688;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.lp-kpi-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    transition: all 0.5s ease;
    /* smooth live counter */
}

.lp-kpi-unit {
    display: block;
    font-size: 0.6rem;
    color: #4b5563;
    margin-bottom: 6px;
}

.lp-cyan {
    color: #00d4ff;
}

.lp-green {
    color: #10b981;
}

.lp-purple {
    color: #a78bfa;
}

.lp-orange {
    color: #f59e0b;
}

/* ── Dashboard Previews ── */
.lp-previews {
    position: relative;
    z-index: 1;
    padding: 50px 5%;
    max-width: 1500px;
    margin: 0 auto;
}

.lp-section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.lp-section-title-ar {
    text-align: center;
    font-size: 0.9rem;
    color: #6b7688;
    direction: rtl;
    margin: 0 0 4px;
}

.lp-section-desc {
    text-align: center;
    font-size: 0.85rem;
    color: #4b5563;
    margin: 0 0 36px;
}

.lp-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.lp-preview-wide {
    grid-column: span 2;
}

.lp-preview-card {
    padding: 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.35s;
    overflow: hidden;
}

.lp-preview-card:hover {
    border-color: rgba(0, 212, 255, 0.18);
    background: rgba(0, 212, 255, 0.015);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.lp-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.lp-preview-icon {
    font-size: 1.4rem;
}

.lp-preview-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e0e6ed;
    margin: 0;
}

.lp-preview-header p {
    font-size: 0.65rem;
    color: #4b5563;
    margin: 1px 0 0;
    direction: rtl;
}

.lp-preview-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-preview-row {
    flex-direction: row;
    gap: 24px;
    align-items: center;
}

.lp-preview-donuts {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Chart Components ── */
/* Bar Chart */
.mc-bar-chart {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 80px;
    padding: 0 6px;
    flex: 1;
}

.mc-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

.mc-bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.mc-bar-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    transition: height 1.2s cubic-bezier(.4, 0, .2, 1);
    min-height: 2px;
}

.mc-bar-label {
    font-size: 0.55rem;
    color: #4b5563;
    margin-top: 3px;
}

/* Donut */
.mc-donut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.mc-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    text-align: center;
}

.mc-donut-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e0e6ed;
}

.mc-donut-label {
    font-size: 0.6rem;
    color: #8b95a5;
    font-weight: 600;
}

.mc-donut-sub {
    font-size: 0.5rem;
    color: #4b5563;
    direction: rtl;
}

/* Line Chart */
.mc-line-svg {
    display: block;
    transition: opacity 0.6s ease;
}

/* Gauge */
.mc-gauge {
    margin-bottom: 6px;
}

.mc-gauge-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mc-gauge-val {
    font-size: 1rem;
    font-weight: 700;
}

.mc-gauge-label {
    font-size: 0.7rem;
    color: #8b95a5;
}

.mc-gauge-sub {
    font-size: 0.55rem;
    color: #4b5563;
    display: block;
    margin-bottom: 3px;
    direction: rtl;
}

.mc-gauge-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.mc-gauge-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1.5s cubic-bezier(.4, 0, .2, 1);
}

/* Agent pills */
.lp-preview-agents {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lp-agent-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.3s;
}

.lp-agent-pill:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lp-agent-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: dotPulse 2s ease infinite;
    flex-shrink: 0;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

/* DNA sliders */
.lp-dna-sliders {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-dna-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    color: #8b95a5;
}

.lp-dna-track {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.lp-dna-fill {
    height: 100%;
    border-radius: 3px;
    animation: dnaGrow 2s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes dnaGrow {
    from {
        width: 0 !important;
    }
}

.lp-dna-val {
    font-size: 0.6rem;
    color: #6b7688;
    min-width: 28px;
    text-align: right;
}

/* Capsule badges */
.lp-capsule-months {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.lp-capsule-badge {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.6rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

/* Upload demo */
.lp-upload-demo {
    text-align: center;
    padding: 16px;
    border: 2px dashed rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.01);
}

.lp-upload-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.lp-upload-text {
    font-size: 0.75rem;
    color: #8b95a5;
    margin: 0 0 2px;
}

.lp-upload-text-ar {
    font-size: 0.65rem;
    color: #4b5563;
    margin: 0 0 8px;
    direction: rtl;
}

.lp-upload-formats {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.lp-upload-formats span {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.55rem;
    background: rgba(0, 212, 255, 0.06);
    color: #00d4ff;
}

/* ── Footer ── */
.lp-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 50px 5% 70px;
}

.lp-footer h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.lp-footer-ar {
    font-size: 0.85rem;
    color: #6b7688;
    direction: rtl;
    margin: 0 0 4px;
}

.lp-footer p {
    color: #4b5563;
    font-size: 0.85rem;
    margin: 0 0 20px;
}

/* ── Login Modal ── */
.lp-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.lp-modal {
    width: 400px;
    max-width: 92vw;
    padding: 32px;
    border-radius: 20px;
    background: rgba(10, 16, 32, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
    animation: slideUp 0.3s ease;
    position: relative;
}

.lp-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #6b7688;
    font-size: 1.2rem;
    cursor: pointer;
}

.lp-modal-x:hover {
    color: #e0e6ed;
}

.lp-modal-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 12px;
}

.lp-modal h2 {
    font-size: 1.2rem;
    margin: 0 0 4px;
}

.lp-modal-sub {
    font-size: 0.75rem;
    color: #6b7688;
    margin: 0 0 18px;
}

.lp-form {
    text-align: left;
}

.lp-field {
    margin-bottom: 12px;
}

.lp-field label {
    display: block;
    font-size: 0.72rem;
    color: #8b95a5;
    margin-bottom: 4px;
}

.lp-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    color: #e0e6ed;
    font-size: 0.88rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.lp-field input:focus {
    border-color: rgba(0, 212, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.06);
}

.lp-error {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    font-size: 0.75rem;
    margin-bottom: 12px;
    text-align: center;
}

.lp-submit {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #00d4ff, #6366f1);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.lp-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.3);
}

.lp-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Animations ── */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .lp-hero {
        grid-template-columns: 1fr;
        padding: 40px 5%;
    }

    .lp-h1 {
        font-size: 2rem;
    }

    .lp-hero-logo-wrap {
        width: 120px;
        height: 120px;
    }

    .lp-hero-logo {
        width: 100px;
        height: 100px;
    }

    .lp-preview-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lp-preview-wide {
        grid-column: span 2;
    }

    .lp-preview-row {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .lp-kpi-grid {
        grid-template-columns: 1fr;
    }

    .lp-preview-grid {
        grid-template-columns: 1fr;
    }

    .lp-preview-wide {
        grid-column: span 1;
    }

    .lp-h1 {
        font-size: 1.5rem;
    }
}/* Global Variables */
:root {
  /* Primary */
  --dsox-navy: #0a1628;
  --dsox-cyan: #00d4aa;
  --dsox-orange: #ff6b35;

  /* Secondary */
  --dsox-glass: rgba(255, 255, 255, 0.05);
  --dsox-border: rgba(0, 212, 170, 0.2);
  --dsox-text: #e2e8f0;
  --dsox-muted: #94a3b8;

  --bg-color: var(--dsox-navy);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--dsox-text);
  min-height: 100vh;
  overflow-x: hidden;
}

.app-container {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
}

/* Base Gradient Background Setup */
.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: linear-gradient(135deg,
      #0a1628 0%,
      #0f2137 50%,
      #1a3a5c 100%);
}

.content-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  padding-left: calc(280px + 2rem);
  /* Space for Sidebar */
  box-sizing: border-box;
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.dashboard-layout {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  width: 100%;
  animation: fadeInUp 1s ease-out 0.3s both;
}

.grid-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.grid-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .content-wrapper {
    padding-left: 2rem;
  }
}

/* =====================================================
   RTL Support (Arabic)
   ===================================================== */
[dir="rtl"] .content-wrapper {
  padding-left: 2rem;
  padding-right: calc(280px + 2rem);
}

[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
}

[dir="rtl"] .sidebar-nav a {
  text-align: right;
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-icon {
  margin-left: 12px;
  margin-right: 0;
}

[dir="rtl"] body {
  font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
}

@media (max-width: 1024px) {
  [dir="rtl"] .content-wrapper {
    padding-right: 2rem;
  }
}