:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface2: #eef0f4;
  --border: #d1d5e0;
  --text: #1a1d27;
  --text-dim: #6b7080;
  --accent: #6c5ce7;
  --accent-light: #5a4bd4;
  --green: #00916e;
  --green-bg: rgba(0,145,110,.1);
  --red: #c0392b;
  --red-bg: rgba(192,57,43,.1);
  --yellow: #b8860b;
  --yellow-bg: rgba(184,134,11,.1);
  --blue: #2d7dd2;
  --blue-bg: rgba(45,125,210,.1);
}
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #232733;
  --border: #2e3345;
  --text: #e4e6f0;
  --text-dim: #8b8fa3;
  --accent: #6c5ce7;
  --accent-light: #a29bfe;
  --green: #00b894;
  --green-bg: rgba(0,184,148,.12);
  --red: #e17055;
  --red-bg: rgba(225,112,85,.12);
  --yellow: #fdcb6e;
  --yellow-bg: rgba(253,203,110,.12);
  --blue: #74b9ff;
  --blue-bg: rgba(116,185,255,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { direction:rtl; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Arial', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

/* Layout - RTL */
.app { display:flex; min-height:100vh; }
.sidebar { width:240px; background:var(--surface); border-left:1px solid var(--border); padding:20px 0; display:flex; flex-direction:column; position:fixed; right:0; height:100vh; z-index:10; }
.main { margin-right:240px; flex:1; padding:24px 32px; width:calc(100% - 240px); }

/* Sidebar */
.logo { padding:0 20px 24px; font-size:22px; font-weight:700; letter-spacing:-.5px; border-bottom:1px solid var(--border); }
.logo span { color:var(--accent-light); }
.nav { list-style:none; padding:12px 0; flex:1; overflow-y:auto; overflow-x:hidden; }
.nav li { padding:10px 20px; cursor:pointer; display:flex; align-items:center; gap:10px; color:var(--text-dim); transition:.2s; font-size:14px; border-right:3px solid transparent; }
.nav li:hover { color:var(--text); background:rgba(108,92,231,.06); }
.nav li.active { color:var(--accent-light); background:rgba(108,92,231,.1); border-right-color:var(--accent); font-weight:600; }
.nav li svg { width:18px; height:18px; flex-shrink:0; }

/* ── Level-1 collapsible nav group ──────────────────────────────────────── */
.nav .nav-group-item { padding:0; display:block; cursor:default; border-right:none; }
.nav .nav-group-item:hover { background:none; color:inherit; }
.nav-group-header { padding:10px 20px; cursor:pointer; display:flex; align-items:center; gap:10px; color:var(--text-dim); transition:.2s; font-size:14px; border-right:3px solid transparent; }
.nav-group-header:hover { color:var(--text); background:rgba(108,92,231,.06); }
.nav-group-item.group-open .nav-group-header { color:var(--accent-light); }
.nav-group-item:has(.active) .nav-group-header { color:var(--accent-light); border-right-color:var(--accent); background:rgba(108,92,231,.06); }
.nav-group-header svg { width:18px; height:18px; flex-shrink:0; }
.nav-chevron { width:14px !important; height:14px !important; margin-right:auto; transition:transform .2s; }
.nav-group-item.group-open .nav-chevron { transform:rotate(180deg); }
.nav-sub { list-style:none; padding:0 0 4px; display:none; }
.nav-group-item.group-open .nav-sub { display:block; }
.nav-sub li { padding:8px 20px 8px 32px; font-size:13px; border-right:3px solid transparent; }
.nav-sub li svg { width:15px !important; height:15px !important; }


.sidebar-footer { padding:16px 20px; border-top:1px solid var(--border); font-size:12px; color:var(--text-dim); }

/* Header */
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.header h1 { font-size:24px; font-weight:700; }
.header-actions { display:flex; gap:10px; }

/* Buttons */
.btn, .btn-sm { padding:8px 16px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:.15s ease; }
.btn:hover, .btn-sm:hover { background:var(--surface2); border-color:var(--accent); }
.btn:active, .btn-sm:active { transform:scale(.96); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 1px 4px rgba(108,92,231,.35); }
.btn-primary:hover { background:var(--accent-light); border-color:var(--accent-light); }
.btn-sm { padding:5px 10px; font-size:12px; border-radius:7px; gap:4px; }
.btn-danger { background:var(--red); border-color:var(--red); color:#fff; }
.btn-danger:hover { background:var(--red); border-color:var(--red); opacity:.85; }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:24px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; }
.card-label { font-size:12px; color:var(--text-dim); letter-spacing:.5px; margin-bottom:6px; }
.card-value { font-size:28px; font-weight:700; }
.card-change { font-size:12px; margin-top:6px; display:flex; align-items:center; gap:4px; }
.card-change.up { color:var(--green); }
.card-change.down { color:var(--red); }

/* Sections */
.section { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.section-title { font-size:16px; font-weight:600; }

/* Table */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:right; padding:10px 12px; color:var(--text-dim); font-weight:500; font-size:12px; letter-spacing:.5px; border-bottom:1px solid var(--border); }
td { padding:10px 12px; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(108,92,231,.04); }

/* Tags */
.tag { display:inline-block; padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.tag-income { background:var(--green-bg); color:var(--green); }
.tag-expense { background:var(--red-bg); color:var(--red); }
.tag-pending { background:var(--yellow-bg); color:var(--yellow); }
.tag-paid { background:var(--green-bg); color:var(--green); }
.tag-overdue { background:var(--red-bg); color:var(--red); }
.tag-client { background:var(--blue-bg); color:var(--blue); }

/* Chart area */
.chart-container { position:relative; height:260px; margin-top:12px; }
.chart-bar-group { display:flex; align-items:flex-end; gap:4px; height:220px; padding:0 4px; }
.chart-bar { flex:1; border-radius:4px 4px 0 0; min-width:20px; position:relative; transition:.3s; cursor:pointer; }
.chart-bar:hover { opacity:.85; }
.chart-bar.income { background:var(--green); }
.chart-bar.expense { background:var(--red); opacity:.7; }
.chart-labels { display:flex; justify-content:space-around; margin-top:8px; font-size:11px; color:var(--text-dim); }
.chart-legend { display:flex; gap:16px; font-size:12px; color:var(--text-dim); }
.chart-legend span { display:flex; align-items:center; gap:5px; }
.chart-legend .dot { width:10px; height:10px; border-radius:3px; }

/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; width:540px; max-width:95vw; max-height:90vh; overflow-y:auto; position:relative; }
.modal h2 { font-size:18px; margin-bottom:16px; }
.modal-close { position:absolute; top:14px; left:16px; background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:18px; line-height:1; padding:4px 6px; border-radius:6px; transition:color .15s, background .15s; z-index:1; }
.modal-close:hover { color:var(--text); background:var(--bg); }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px; letter-spacing:.5px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:9px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px; outline:none; }
.form-group input:focus, .form-group select:focus { border-color:var(--accent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-actions { display:flex; gap:10px; justify-content:flex-start; margin-top:18px; }
/* Checkbox + label on one row, outside .form-group so the width:100%
   rule above never stretches the checkbox — see js/evaluation.js's
   scores-settings page for the bug this fixes. */
.ev-check-row { display:flex; align-items:flex-start; gap:10px; padding:8px 0; font-size:14px; font-weight:400; cursor:pointer; }
.ev-check-row input[type="checkbox"] { margin-top:2px; }
.ev-check-row span { flex:1; }

/* Fleet module */
.fleet-plate { font-weight:700; font-size:14px; letter-spacing:.6px; }
.tag-dim { background:var(--surface2); color:var(--text-dim); display:inline-block; padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600; }

/* Order modal sections */
.order-modal-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.order-modal-head h2 { margin:0; font-size:18px; }
.order-modal-close { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:20px; line-height:1; padding:0 2px; transition:color .15s; }
.order-modal-close:hover { color:var(--text); }
.order-section { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.order-section:last-of-type { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.order-section-label { font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:.7px; text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.req { color:var(--accent); margin-right:2px; }
.order-items-cols { display:grid; grid-template-columns:1fr 76px 76px 34px; gap:6px; padding:0 2px 6px; font-size:11px; font-weight:700; color:var(--text-dim); letter-spacing:.4px; }
.order-item-row { display:grid; grid-template-columns:1fr 76px 76px 34px; gap:6px; margin-bottom:6px; align-items:center; }
.order-item-row input { padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:13px; width:100%; outline:none; transition:border-color .15s; }
.order-item-row input:focus { border-color:var(--accent); }
.order-item-row select { padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:13px; width:100%; outline:none; cursor:pointer; transition:border-color .15s; }
.order-item-row select:focus { border-color:var(--accent); }
.product-field { position:relative; min-width:0; }
.product-field .pf-row { display:flex; gap:4px; align-items:center; }
.product-field .product-name-input { flex:1; min-width:0; box-sizing:border-box; }
.order-item-rm { background:none; border:1px solid var(--border); border-radius:7px; width:32px; height:33px; cursor:pointer; color:var(--text-dim); font-size:15px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.order-item-rm:hover { background:var(--red-bg); border-color:var(--red); color:var(--red); }
.order-form-footer { display:flex; gap:10px; padding-top:18px; border-top:1px solid var(--border); margin-top:6px; }
.order-form-footer .btn { flex:1; justify-content:center; padding:10px 0; font-size:14px; }
.order-client-hint { font-size:11px; color:var(--text-dim); margin-top:6px; }

/* Tabs */
.tabs { display:flex; gap:4px; margin-bottom:16px; }
.tab { padding:7px 14px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--text-dim); transition:.2s; }
.tab:hover { color:var(--text); }
.tab.active { background:var(--accent); color:#fff; }
/* Soft blue tint distinguishes tabs that only exist because the viewer
   has HR/hierarchy-manager permissions (managing this employee or others)
   from the plain tabs about the viewer's own employment — a fixed color,
   not tied to --accent, so it still reads as "different" regardless of
   the tenant's branding color. */
.tab-mgmt { background:rgba(116,185,255,.12); }
.tab-mgmt:hover { background:rgba(116,185,255,.22); color:var(--text); }
.tab-mgmt.active { background:var(--blue); color:#fff; }

/* ── 2-level HC tab system ───────────────────────────────────────────────── */
.tabs-groups { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tabs-group-pill { padding:6px 14px; border-radius:20px; font-size:13px; cursor:pointer; color:var(--text-dim); border:1px solid var(--border); background:var(--surface); transition:.2s; }
.tabs-group-pill:hover { color:var(--text); border-color:var(--accent); }
.tabs-group-pill.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.tabs-sub { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:8px; }
.tab-sub { padding:6px 12px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--text-dim); transition:.2s; display:inline-flex; align-items:center; gap:5px; }
.tab-sub:hover { color:var(--text); background:rgba(108,92,231,.06); }
.tab-sub.active { background:rgba(108,92,231,.12); color:var(--accent-light); font-weight:600; }
.tabs-group-pill { display:inline-flex; align-items:center; gap:5px; }
.hc-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--red); color:#fff; font-size:10px; font-weight:700; line-height:1; }

/* Page visibility */
.page { display:none; }
.page.active { display:block; }

/* Grid helper */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }

/* Mobile header (hidden on desktop) */
.mobile-header { display:none; position:fixed; top:0; right:0; left:0; height:56px; background:var(--surface); border-bottom:1px solid var(--border); z-index:200; padding:0 16px; align-items:center; justify-content:space-between; }
.mobile-header .logo { font-size:18px; font-weight:700; letter-spacing:-.5px; }
.mobile-header .logo span { color:var(--accent-light); }

/* Hamburger button */
.hamburger { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 8px; cursor:pointer; color:var(--text); line-height:0; transition:.2s; }
.hamburger:hover { background:var(--surface2); }
.hamburger svg { width:20px; height:20px; display:block; }

/* Sidebar close button (mobile only) */
.sidebar-close { display:none; position:absolute; top:14px; left:10px; background:none; border:none; cursor:pointer; color:var(--text-dim); padding:4px; line-height:0; border-radius:6px; }
.sidebar-close:hover { color:var(--text); background:var(--surface2); }
.sidebar-close svg { width:20px; height:20px; display:block; }

/* Sidebar backdrop */
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999; }
.sidebar-backdrop.show { display:block; }

/* ── Responsive — Tablet & Mobile (≤ 900px) ─────────────────────── */
@media (max-width:900px) {
  html, body { overflow-x:hidden; }

  /* Mobile top bar */
  .mobile-header { display:flex; }

  /* Sidebar: transform-based drawer (GPU-accelerated, iOS-safe) */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 82vw !important;
    max-width: 340px !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateX(100%) !important;
    transition: transform .25s ease !important;
    z-index: 1000 !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }

  /* Nav list: scrollable, grows to fill space */
  .nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Footer + user info pinned at bottom */
  .sidebar-footer { flex: 0 0 auto !important; }
  #user-info      { flex: 0 0 auto !important; }
  .sidebar-close  { display: block; }
  .sidebar .logo  { display: none; }

  /* Lock page scroll while drawer is open */
  body.sidebar-open { overflow: hidden !important; }

  /* Main content */
  .main { margin-right: 0; width: 100%; padding: 16px; padding-top: 72px; }

  /* Layout */
  .grid-2         { grid-template-columns: 1fr; }
  .header         { flex-wrap: wrap; gap: 10px; }
  .header-actions { flex-wrap: wrap; gap: 8px; }
  .search-input   { flex: 1; min-width: 120px; width: auto; }
  .form-row       { grid-template-columns: 1fr; }

  /* Tabs: always scroll horizontally, no wrapping */
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab  { white-space: nowrap; flex-shrink: 0; }

  /* Cards */
  .cards { grid-template-columns: 1fr 1fr; }
  .chart-container { height: 200px; }

  /* Tables: allow horizontal scroll inside sections */
  .section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Buttons: larger touch targets */
  .btn { min-height: 36px; }
}

/* ── Phone (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width:480px) {
  .mobile-header { height: 52px; }
  .main          { padding: 12px; padding-top: 64px; }
  .cards         { grid-template-columns: 1fr; }
  .card-value    { font-size: 22px; }
  .header h1     { font-size: 20px; }
  .modal         { padding: 16px; }
  /* Bigger tap targets on small phones */
  .btn           { min-height: 40px; padding: 9px 16px; }
  .btn-sm        { min-height: 32px; padding: 5px 10px; }
  /* Nav items taller for easier tapping */
  .nav li        { padding: 13px 20px; font-size: 15px; }
}

/* ── PWA Standalone (installed on home screen) ───────────────────── */
@media (display-mode: standalone) {
  /* Respect iPhone notch / Dynamic Island */
  .mobile-header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(56px + env(safe-area-inset-top, 0px));
  }
  /* Push main content below notch-aware header */
  @media (max-width: 900px) {
    .main { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
  }
  @media (max-width: 480px) {
    .main { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  }
  /* Bottom safe area so content isn't hidden by home indicator */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Budget progress */
.budget-item { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.budget-item:last-child { border-bottom:none; }
.budget-info { flex:1; }
.budget-name { font-size:14px; font-weight:500; }
.budget-meta { font-size:12px; color:var(--text-dim); margin-top:2px; }
.budget-bar { height:6px; background:var(--bg); border-radius:3px; margin-top:6px; overflow:hidden; }
.budget-bar-fill { height:100%; border-radius:3px; transition:.4s; }

/* Quick stats row */
.stats-row { display:flex; gap:24px; flex-wrap:wrap; }
.stat-block { flex:1; min-width:150px; }
.stat-block .label { font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.stat-block .val { font-size:20px; font-weight:700; }

/* Invoice status dot */
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:6px; }
.status-dot.paid { background:var(--green); }
.status-dot.pending { background:var(--yellow); }
.status-dot.overdue { background:var(--red); }

/* Search */
.search-input { padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13px; width:220px; outline:none; }
.search-input:focus { border-color:var(--accent); }

/* Toast */
.toast { position:fixed; bottom:24px; left:24px; background:var(--green); color:#fff; padding:12px 20px; border-radius:8px; font-size:13px; z-index:200; transform:translateY(80px); opacity:0; transition:.3s; }
.toast.show { transform:translateY(0); opacity:1; }

/* Pie / Donut charts */
.pie-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.pie-svg { flex-shrink:0; }
.pie-legend { display:flex; flex-direction:column; gap:8px; }
.pie-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; }
.pie-legend-dot { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.pie-legend-label { color:var(--text-dim); }
.pie-legend-value { font-weight:600; margin-right:auto; padding-right:12px; }
.pie-center-text { font-size:14px; font-weight:700; fill:var(--text); }
.pie-center-sub { font-size:9px; fill:var(--text-dim); }

/* Scanner / OCR */
.scan-upload-area { border:2px dashed var(--border); border-radius:12px; padding:24px; text-align:center; cursor:pointer; transition:.2s; min-height:120px; display:flex; align-items:center; justify-content:center; }
.scan-upload-area:hover { border-color:var(--accent); background:rgba(108,92,231,.04); }
.scan-upload-area.drag-over { border-color:var(--accent); background:rgba(108,92,231,.08); }
.spinner { width:20px; height:20px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Login Screen */
#login-screen { display:none; position:fixed; inset:0; background:var(--bg); z-index:9999; align-items:center; justify-content:center; }
.login-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:40px 36px; width:380px; max-width:90vw; }
.login-logo { font-size:26px; font-weight:800; color:var(--text); text-align:center; margin-bottom:24px; letter-spacing:-0.5px; }
.login-logo span { color:var(--accent); }
.login-box h2 { font-size:18px; color:var(--text); text-align:center; margin-bottom:20px; font-weight:600; }
.login-box .form-group { margin-bottom:14px; }
.login-box label { display:block; font-size:13px; color:var(--text-dim); margin-bottom:5px; }
.login-box input { width:100%; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:14px; }
.login-box input:focus { outline:none; border-color:var(--accent); }

/* Theme toggle */
.sidebar-footer { display:flex; align-items:center; justify-content:space-between; }
.btn-theme-toggle { background:none; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:16px; padding:3px 7px; line-height:1; transition:.2s; }
.btn-theme-toggle:hover { background:var(--surface2); }

/* User info in sidebar */
.user-info { padding:12px 16px; border-top:1px solid var(--border); margin-top:auto; font-size:13px; color:var(--text-dim); display:flex; align-items:center; justify-content:space-between; }
.user-info .username { color:var(--text); font-weight:600; }
.btn-logout { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:12px; padding:4px 8px; border-radius:4px; }
.btn-logout:hover { color:var(--red); background:var(--red-bg); }

/* Password show/hide wrapper */
.pw-wrap { position:relative; display:block; }
.pw-wrap input { padding-left:36px; width:100%; box-sizing:border-box; }
.pw-eye { position:absolute; left:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-dim); padding:2px; display:flex; align-items:center; line-height:1; }
.pw-eye:hover { color:var(--text); }

/* ── Quality Center ──────────────────────────────────────────────────────── */

/* Projects grid */
.qc-projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.qc-proj-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; transition:.15s; }
.qc-proj-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(108,92,231,.1); }
.qc-proj-card-top { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.qc-proj-card-name { font-size:15px; font-weight:600; margin-bottom:4px; }
.qc-proj-card-desc { font-size:12px; color:var(--text-muted); margin-bottom:8px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.qc-proj-card-meta { font-size:12px; color:var(--text-muted); display:flex; gap:12px; margin-bottom:10px; }
.qc-proj-card-actions { display:flex; gap:6px; }

/* Generic badges */
.qc-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; white-space:nowrap; }

/* Exec status badges */
.qc-exec-ns    { background:#e8e8f0; color:#666; }
.qc-exec-ip    { background:rgba(116,185,255,.2); color:#0984e3; }
.qc-exec-pass  { background:rgba(0,184,148,.15); color:#00b894; }
.qc-exec-fail  { background:rgba(225,112,85,.15); color:#e17055; }
.qc-exec-block { background:rgba(253,203,110,.25); color:#b8860b; }
.qc-exec-skip  { background:#e8e8f0; color:#999; }

/* Iteration status badges */
.qc-iter-draft   { background:#e8e8f0; color:#666; }
.qc-iter-active  { background:rgba(0,184,148,.15); color:#00b894; }
.qc-iter-done    { background:rgba(108,92,231,.12); color:var(--accent); }
.qc-iter-cancel  { background:rgba(225,112,85,.12); color:#e17055; }

/* Priority badges */
.qc-prio { border-radius:4px; font-size:10px; }
.qc-prio-crit { background:rgba(225,112,85,.2); color:#e17055; }
.qc-prio-high { background:rgba(253,203,110,.3); color:#b8860b; }
.qc-prio-med  { background:rgba(116,185,255,.2); color:#0984e3; }
.qc-prio-low  { background:rgba(0,184,148,.12); color:#00b894; }

/* Project type badge */
.qc-type { background:rgba(108,92,231,.1); color:var(--accent); border-radius:4px; }

/* Progress bar */
.qc-prog-wrap { display:flex; align-items:center; gap:6px; min-width:100px; }
.qc-prog-bar  { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.qc-prog-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; }
.qc-prog-fill.green { background:var(--green); }
.qc-prog-fill.red   { background:var(--red); }
.qc-prog-label { font-size:11px; color:var(--text-muted); white-space:nowrap; }

/* Progress summary row */
.qc-prog-summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--border); margin-bottom:16px; }
.qc-prog-pct { font-size:20px; font-weight:700; color:var(--accent); min-width:48px; }
.qc-tag-pass  { color:var(--green); font-size:13px; font-weight:600; }
.qc-tag-fail  { color:var(--red); font-size:13px; font-weight:600; }
.qc-tag-block { color:#b8860b; font-size:13px; }
.qc-tag-skip  { color:var(--text-muted); font-size:13px; }

/* Execution table */
.qc-exec-table { table-layout:auto; }
.qc-exec-table td { vertical-align:top; padding:10px 8px; }
.qc-status-sel { padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; }
.qc-notes-inp  { padding:4px 8px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; }
.qc-row-dirty  { background:rgba(253,203,110,.08); }

/* Language selector */
.qc-lang-sel { padding:5px 8px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; }

/* Loading placeholder */
.qc-loading { padding:40px; text-align:center; color:var(--text-muted); }

/* passed_with_findings badge (amber) */
.qc-exec-pwf { background:rgba(253,167,53,.2); color:#e67e22; }

/* Run badge */
.qc-run-badge { display:inline-block; font-size:10px; font-weight:600; background:rgba(108,92,231,.1); color:var(--accent); border-radius:4px; padding:1px 6px; white-space:nowrap; }

/* Evidence / Findings icon buttons */
.qc-ev-btn, .qc-find-btn { position:relative; font-size:12px; padding:3px 8px; }
.qc-cnt-badge { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; border-radius:50%; font-size:9px; font-weight:700; min-width:14px; height:14px; margin-right:2px; vertical-align:middle; }

/* Execution table action cell */
.qc-exec-actions { white-space:nowrap; }

/* Expandable panel row */
.qc-panel-row td { background:var(--bg); padding:0 !important; border-bottom:2px solid var(--accent) !important; }
.qc-panel-cell { padding:0 !important; }
.qc-panel-inner { padding:14px 18px; }
.qc-panel-header { margin-bottom:10px; font-size:13px; }
.qc-panel-empty { color:var(--text-muted); font-size:12px; padding:6px 0; margin:0; }

/* Evidence list & items */
.qc-ev-list { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; min-height:8px; }
.qc-ev-item { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.qc-ev-icon { font-size:16px; flex-shrink:0; width:22px; text-align:center; margin-top:1px; }
.qc-ev-body { flex:1; min-width:0; }
.qc-ev-title { font-size:12px; font-weight:600; color:var(--text); margin-bottom:2px; }
.qc-ev-content-text { font-size:12px; color:var(--text-muted); white-space:pre-wrap; word-break:break-word; }
.qc-ev-link-a { font-size:12px; color:var(--accent); word-break:break-all; }
.qc-ev-thumb { max-width:180px; max-height:120px; border-radius:6px; margin-top:4px; cursor:zoom-in; display:block; border:1px solid var(--border); }

/* Evidence add form */
.qc-add-panel { border-top:1px solid var(--border); padding-top:10px; margin-top:4px; }
.qc-type-tabs { display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap; }
.qc-type-tab { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:12px; cursor:pointer; transition:.12s; }
.qc-type-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.qc-type-tab:hover:not(.active) { border-color:var(--accent); color:var(--accent); }

/* File upload area */
.qc-file-drop { display:block; background:var(--bg); border:1px dashed var(--border); border-radius:8px; padding:12px; text-align:center; cursor:pointer; transition:.12s; }
.qc-file-drop:hover { border-color:var(--accent); }

/* Findings items */
.qc-find-item { padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-bottom:6px; }
.qc-find-item-header { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.qc-find-item-title { font-size:13px; font-weight:600; flex:1; min-width:80px; }
.qc-find-item-desc { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* Finding severity badges */
.qc-sev-crit  { background:rgba(225,112,85,.2);  color:#e17055; }
.qc-sev-major { background:rgba(253,167,53,.2);  color:#e67e22; }
.qc-sev-minor { background:rgba(116,185,255,.2); color:#0984e3; }
.qc-sev-obs   { background:#e8e8f0; color:#666; }

/* Finding status badges */
.qc-fst-open      { background:rgba(253,203,110,.3); color:#b8860b; }
.qc-fst-ip        { background:rgba(116,185,255,.2); color:#0984e3; }
.qc-fst-resolved  { background:rgba(0,184,148,.15);  color:#00b894; }
.qc-fst-accepted  { background:rgba(0,184,148,.15);  color:#00b894; }
.qc-fst-closed    { background:#e8e8f0; color:#999; }

/* Progress summary — passed_with_findings tag */
.qc-tag-pwf { color:#e67e22; font-size:13px; font-weight:600; }

/* ── QC Import preview ───────────────────────────────────────────────────── */
.qc-import-preview { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px 18px; }
.qc-import-row { display:flex; align-items:baseline; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border); gap:12px; }
.qc-import-row:last-of-type { border-bottom:none; }
.qc-import-label { font-size:12px; color:var(--text-muted); flex-shrink:0; }
.qc-import-value { font-size:14px; font-weight:600; color:var(--text); text-align:end; }
.qc-import-big { font-size:22px; color:var(--accent); }
.qc-import-iter-list { margin:4px 0 10px 18px; padding:0; font-size:12px; color:var(--text-muted); }
.qc-import-iter-list li { padding:1px 0; }
.qc-import-section { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:12px 0 6px; }
.qc-import-prios { display:flex; flex-direction:column; gap:4px; margin-bottom:4px; }
.qc-import-stat { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.qc-import-stat span:last-child { font-weight:700; font-size:14px; }
.qc-import-cats { display:flex; flex-direction:column; gap:2px; max-height:220px; overflow-y:auto; }
.qc-import-cat-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:3px 0; border-bottom:1px solid var(--border); }
.qc-import-cat-row:last-child { border-bottom:none; }
.qc-import-cat-count { background:var(--accent); color:#fff; border-radius:10px; font-size:10px; font-weight:700; padding:1px 7px; min-width:20px; text-align:center; }
.qc-import-errors { background:rgba(225,112,85,.1); border:1px solid rgba(225,112,85,.3); border-radius:8px; padding:12px 16px; }
.qc-import-errors ul { margin:6px 0 0; padding-inline-start:18px; }
.qc-import-errors li { font-size:12px; color:var(--red); padding:2px 0; }
.qc-import-errors p { margin:0; font-size:13px; font-weight:600; color:var(--red); }

/* ── Status picker (I/P/B/F/C) ─────────────────────────────────────── */
.qc-sp { display:flex; gap:4px; flex-wrap:nowrap; }
.qc-sp-btn { padding:3px 7px; border-radius:5px; border:2px solid transparent; cursor:pointer;
             font-size:11px; font-weight:700; line-height:1; opacity:.45; transition:.15s; background:none; }
.qc-sp-btn:hover, .qc-sp-btn.qc-sp-active { opacity:1; border-color:currentColor; }
.qc-sp-I { color:#888; }
.qc-sp-P { color:var(--blue); }
.qc-sp-B { color:var(--yellow); }
.qc-sp-F { color:var(--red); }
.qc-sp-C { color:var(--green); }
/* active state fill */
.qc-sp-btn.qc-sp-active.qc-sp-I { background:#e0e0e0; color:#555; }
.qc-sp-btn.qc-sp-active.qc-sp-P { background:rgba(116,185,255,.18); }
.qc-sp-btn.qc-sp-active.qc-sp-B { background:rgba(253,203,110,.18); }
.qc-sp-btn.qc-sp-active.qc-sp-F { background:rgba(225,112,85,.18); }
.qc-sp-btn.qc-sp-active.qc-sp-C { background:rgba(0,184,148,.18); }

/* ── Expandable detail row ──────────────────────────────────────────── */
.qc-detail-row td { background:var(--bg); padding:0 !important; border-bottom:2px solid var(--accent) !important; }
.qc-detail-cell { padding:0 !important; }
.qc-detail-inner { padding:0; }
.qc-detail-content { display:flex; flex-direction:column; gap:0; }
.qc-detail-section { padding:14px 20px; border-bottom:1px solid var(--border); }
.qc-detail-section:last-child { border-bottom:none; }
.qc-detail-section-title { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted);
                            letter-spacing:.05em; margin-bottom:6px; }
.qc-expand-btn { font-size:16px; line-height:1; padding:2px 8px; }

/* ── Execution timeline ─────────────────────────────────────────────── */
.qc-timeline { display:flex; flex-direction:column; gap:8px; padding-block:4px; }
.qc-tl-event { display:flex; align-items:flex-start; gap:10px; }
.qc-tl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px;
              background:var(--accent); }
.qc-tl-dot-created       { background:var(--blue); }
.qc-tl-dot-status_changed { background:var(--accent); }
.qc-tl-dot-note_added    { background:var(--green); }
.qc-tl-dot-evidence_added { background:var(--yellow); }
.qc-tl-dot-finding_added  { background:var(--red); }
.qc-tl-body { display:flex; flex-direction:column; gap:1px; }
.qc-tl-text  { font-size:12px; color:var(--text); }
.qc-tl-actor { font-size:10px; color:var(--text-muted); }
.qc-tl-time  { font-size:10px; color:var(--text-muted); }

/* ── Notes ──────────────────────────────────────────────────────────── */
.qc-note-item { border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:8px; background:var(--surface); }
.qc-note-meta { font-size:10px; color:var(--text-muted); margin-bottom:4px; display:flex; align-items:center; }
.qc-note-body { font-size:13px; white-space:pre-wrap; }

/* ── Steps list ─────────────────────────────────────────────────────── */
.qc-steps-list { margin:4px 0; padding-inline-start:20px; }
.qc-steps-list li { font-size:13px; padding:2px 0; }

/* ── Iter progress bar (summary) ────────────────────────────────────── */
.qc-iter-progress { display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.qc-iter-prog-stat { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; }
.qc-iter-prog-bar-wrap { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.qc-iter-prog-bar { height:100%; background:var(--green); transition:width .3s; border-radius:3px; }

/* ── Row status tinting ─────────────────────────────────────────────── */
tr.qc-row-I td { background:rgba(180,180,180,.07); }
tr.qc-row-P td { background:rgba(116,185,255,.09); }
tr.qc-row-B td { background:rgba(253,203,110,.10); }
tr.qc-row-F td { background:rgba(225,112,85,.09); }
tr.qc-row-C td { background:rgba(0,184,148,.08); }

/* ── Status badge pills (exec badge) ────────────────────────────────── */
.qc-sp-badge-I { background:#e0e0e0; color:#555; }
.qc-sp-badge-P { background:rgba(116,185,255,.22); color:var(--blue); }
.qc-sp-badge-B { background:rgba(253,203,110,.25); color:#b8860b; }
.qc-sp-badge-F { background:rgba(225,112,85,.20); color:var(--red); }
.qc-sp-badge-C { background:rgba(0,184,148,.18); color:var(--green); }

/* ── Counter pills in rows ───────────────────────────────────────────── */
.qc-cnt-pill { display:inline-flex; align-items:center; gap:2px; font-size:10px; font-weight:600;
  padding:1px 5px; border-radius:10px; margin-inline-start:3px; }
.qc-cnt-note { background:rgba(108,92,231,.12); color:var(--accent); }
.qc-cnt-ev   { background:rgba(116,185,255,.18); color:var(--blue); }
.qc-cnt-find { background:rgba(225,112,85,.18); color:var(--red); }
/* Status count pills (dashboard) */
.qc-cnt-I { background:#e0e0e0; color:#555; }
.qc-cnt-P { background:rgba(116,185,255,.20); color:var(--blue); }
.qc-cnt-B { background:rgba(253,203,110,.25); color:#b8860b; }
.qc-cnt-F { background:rgba(225,112,85,.20); color:var(--red); }
.qc-cnt-C { background:rgba(0,184,148,.18); color:var(--green); }

/* ── Dashboard execution bar ─────────────────────────────────────────── */
.qc-dash-exec-bar { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin-bottom:16px; }
.qc-dash-status-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.qc-dash-prog-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qc-dash-prog-track { flex:1; min-width:120px; height:12px; background:var(--border); border-radius:6px; overflow:hidden; display:flex; }
.qc-dash-prog-track > div { height:100%; transition:width .4s; }
.qc-seg-I { background:#c0c0c0; }
.qc-seg-P { background:var(--blue); }
.qc-seg-B { background:var(--yellow); }
.qc-seg-F { background:var(--red); }
.qc-seg-C { background:var(--green); }
.qc-dash-pct { font-size:13px; font-weight:700; white-space:nowrap; }
.qc-dash-health { font-size:12px; font-weight:600; color:var(--green); white-space:nowrap; }

/* ── Session mode ────────────────────────────────────────────────────── */
.qc-session-card { max-width:860px; margin:0 auto; }
.qc-session-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.qc-session-progress { flex:1; min-width:200px; }
.qc-session-prog-bar { height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin-bottom:4px; }
.qc-session-prog-label { font-size:11px; color:var(--text-muted); }
.qc-session-title { font-size:20px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qc-session-num { font-size:13px; font-weight:600; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:2px 8px; color:var(--text-muted); }
.qc-session-section { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:12px; }
.qc-session-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:8px; }
.qc-session-text { font-size:14px; line-height:1.6; }
.qc-session-status { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:12px; }
.qc-session-nav { display:flex; align-items:center; justify-content:space-between; margin-top:20px; }
.qc-session-auto-toggle { display:flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }
.qc-session-auto-toggle input { cursor:pointer; }
.qc-session-kb-hint { font-size:16px; cursor:help; color:var(--text-muted); user-select:none; }

/* ── Session Summary screen ──────────────────────────────────────────── */
.qc-session-summary { padding:8px 0; }
.qc-session-summary-grid { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.qc-session-summary-total { text-align:center; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 20px; }
.qc-session-summary-stat { text-align:center; }
.qc-session-summary-cnt { font-size:16px; padding:4px 12px; }
.qc-session-summary-num { font-size:32px; font-weight:800; line-height:1; }
.qc-session-summary-lbl { font-size:11px; color:var(--text-muted); margin-top:4px; }
.qc-session-summary-metrics { display:flex; gap:32px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--border); }
.qc-session-summary-metric { text-align:center; }
.qc-session-summary-metric .qc-session-summary-num { font-size:40px; }

/* ── Init CTA banner ─────────────────────────────────────────────────── */
.qc-init-cta { text-align:center; padding:48px 24px; border:2px dashed var(--border); border-radius:12px; margin:16px 0; }
.qc-init-cta-icon { font-size:48px; margin-bottom:12px; }
.qc-init-cta-btn { font-size:15px; padding:12px 28px; margin-top:4px; }

/* ── Iterations table active row ─────────────────────────────────────── */
tr.qc-iter-row-active td { background:rgba(108,92,231,.06); }