* { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --nav-w: 248px;
      --topbar-h: 56px;

      --bg: #f8fafc;
      --bg-2: #f1f5f9;
      --card: #ffffff;
      --border: #e2e8f0;
      --text: #0f172a;
      --text-muted: #334155;
      --text-subtle: #475569;

      --primary: #1d4ed8;
      --primary-h: #1e40af;
      --brand-2: #1d4ed8;
      --bg-hover: #f1f5f9;
      --success: #047857;
      --success-h: #065f46;
      --warning: #d97706;
      --danger: #dc2626;
      --info: #0891b2;
      --purple: #7e22ce;

      --nav-bg: #090e17;
      --nav-hover: rgba(255, 255, 255, 0.06);
      --nav-active: rgba(29, 78, 216, 0.18);
      --nav-text: #cbd5e1;
      --nav-title: #f8fafc;

      --radius: 10px;
      --radius-lg: 14px;
      --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
      --shadow: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
      --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.04);
      --shadow-lg: 0 10px 25px -5px rgba(15,23,42,0.10), 0 8px 10px -6px rgba(15,23,42,0.06);
      --shadow-xl: 0 20px 40px rgba(15,23,42,0.15);
    }
    html, body {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      display: block;
      width: 100%;
      min-height: 100vh;
    }
    body.no-sidebar { display: block; }
    #appRoot, body > div:first-child {
      width: 100%;
      min-height: 100vh;
      display: block;
      margin: 0;
      padding: 0;
    }
    code, pre, .mono { font-family: 'JetBrains Mono', 'Consolas', monospace; color: #0f172a; }

    /* ============ LOGIN ============ */
    #loginShell {
      position: fixed; inset: 0;
      background: linear-gradient(135deg, #0f1729 0%, #1e40af 100%);
      display: flex; align-items: center; justify-content: center;
      padding: 20px; z-index: 200;
    }
    .login-card {
      background: white; border-radius: 20px;
      width: 100%; max-width: 440px;
      padding: 40px 40px 32px;
      box-shadow: var(--shadow-xl);
    }
    .login-card .brand-header { text-align: center; margin-bottom: 32px; }
    .login-card .brand-header img { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 12px; }
    .login-card h1 { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
    .login-card .subtitle { color: var(--text-muted); font-size: 13px; }
    .form-group { margin-bottom: 14px; }
    .form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
    .form-control {
      width: 100%; padding: 11px 14px;
      font-family: inherit; font-size: 14px;
      border: 1.5px solid var(--border); border-radius: 10px;
      background: white; color: var(--text);
      transition: all 0.15s;
    }
    .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
    .login-note {
      margin-top: 20px; padding: 12px 14px;
      background: #f0f9ff; border-radius: 8px;
      color: #075985; font-size: 12px; line-height: 1.6;
      border: 1px solid #bae6fd;
    }
    .login-note a { color: #0369a1; font-weight: 700; text-decoration: none; }

    /* ============ SIDEBAR ============ */
    #sidebar {
      width: var(--nav-w);
      background: var(--nav-bg);
      color: var(--nav-text);
      min-height: 100vh; max-height: 100vh;
      position: fixed; right: 0; top: 0;
      padding: 16px 0 0;
      display: flex; flex-direction: column;
      z-index: 100;
      overflow-y: auto;
      border-left: 1px solid #1e293b;
    }
    #sidebar::-webkit-scrollbar { width: 5px; }
    #sidebar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
    .sidebar-brand {
      padding: 0 18px 16px; border-bottom: 1px solid #1e293b;
      display: flex; align-items: center; gap: 12px;
    }
    .sidebar-brand img { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; }
    .sidebar-brand .info .name { color: #ffffff; font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; }
    .sidebar-brand .info .sub { color: #94a3b8; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

    .scope-switcher {
      margin: 12px 10px;
      background: #141f36; border-radius: 10px;
      padding: 10px 14px; cursor: pointer;
      transition: all 0.15s ease; border: 1px solid #1e293b;
    }
    .scope-switcher:hover { background: #1e2d4d; border-color: #334155; }
    .scope-switcher .label {
      color: #94a3b8; font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
    }
    .scope-switcher .value {
      color: #ffffff; font-size: 13.5px; font-weight: 700;
      display: flex; align-items: center; justify-content: space-between;
    }
    .scope-switcher .arrow { color: #94a3b8; font-size: 10px; display: inline-flex; align-items: center; }

    .nav-section-label {
      padding: 14px 18px 4px;
      color: #94a3b8; font-size: 10.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px; margin: 2px 8px;
      color: var(--nav-text); text-decoration: none;
      border-radius: 8px; cursor: pointer;
      font-size: 13px; font-weight: 500;
      transition: all 0.15s ease;
      position: relative;
    }
    .nav-item:hover { background: var(--nav-hover); color: var(--nav-title); }
    .nav-item:hover .icon { color: #ffffff; }
    .nav-item.active {
      background: linear-gradient(90deg, rgba(29,78,216,0.22) 0%, rgba(29,78,216,0.08) 100%);
      color: #ffffff; font-weight: 600;
      -webkit-border-start: 3px solid #3b82f6;
              border-inline-start: 3px solid #3b82f6;
      -webkit-padding-start: 11px;
              padding-inline-start: 11px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .nav-item.active .icon { color: #60a5fa; }
    .nav-item .icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; color: #94a3b8; transition: color 0.15s; }
    .nav-item .label { flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-item .badge {
      background: var(--danger); color: white;
      font-size: 10px; padding: 1px 6px; border-radius: 10px;
      font-weight: 700; min-width: 18px; text-align: center;
    }
    .nav-item.disabled { opacity: 0.4; cursor: not-allowed; }

    .sidebar-footer {
      margin-top: auto; padding: 12px 14px;
      border-top: 1px solid #1e293b;
      display: flex; align-items: center; gap: 8px;
      background: rgba(0, 0, 0, 0.2);
    }
    .avatar {
      width: 34px; height: 34px; border-radius: 50%;
      background: linear-gradient(135deg, #1d4ed8, #7e22ce);
      color: white; display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 12px; flex-shrink: 0;
    }
    .sidebar-footer .info { flex: 1 1; overflow: hidden; min-width: 0; }
    .sidebar-footer .info .name { color: #ffffff; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-footer .info .role { color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .logout-btn {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255, 255, 255, 0.04); border: 1px solid #334155;
      color: #cbd5e1; padding: 0; border-radius: 7px;
      cursor: pointer; flex-shrink: 0;
      transition: all 0.15s ease;
    }
    .logout-btn:hover { background: #dc2626; border-color: #dc2626; color: white; }

    /* ============ MAIN ============ */
    #main {
      display: block;
      margin-right: var(--nav-w);
      margin-left: 0;
      width: calc(100% - var(--nav-w));
      min-height: 100vh;
      background: var(--bg);
      min-width: 0;
      box-sizing: border-box;
    }
    .topbar {
      height: var(--topbar-h);
      width: 100%;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 24px; position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    }
    .breadcrumb {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--text-muted); font-weight: 500;
    }
    .breadcrumb .current { color: var(--text); font-weight: 700; }
    .breadcrumb .sep { color: var(--text-subtle); font-size: 10px; }

    .topbar-actions { display: flex; align-items: center; gap: 8px; }
    .topbar-btn {
      width: 34px; height: 34px;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: 1px solid transparent; padding: 0;
      border-radius: 8px; cursor: pointer; font-size: 15px;
      color: var(--text-muted); transition: all 0.15s ease;
    }
    .topbar-btn:hover { background: var(--bg); border-color: var(--border); color: var(--text); }

    .search-bar {
      position: relative;
      background: var(--bg); border-radius: 10px; padding: 6px 12px;
      display: flex; align-items: center; gap: 8px;
      min-width: 270px; font-size: 13px;
      border: 1px solid var(--border);
      transition: all 0.15s ease;
    }
    .search-bar:focus-within { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(29,78,216,0.12); }
    .search-bar input { border: none; outline: none; background: transparent; flex: 1 1; font-family: inherit; font-size: 13px; }
    /* v31.12 smart-search dropdown */
    .search-dropdown {
      position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0;
      background: white; border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.12); z-index: 300;
      max-height: 340px; overflow-y: auto; min-width: 260px;
    }
    .search-drop-item {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
      border-bottom: 1px solid var(--bg);
    }
    .search-drop-item:last-child { border-bottom: none; }
    .search-drop-item:hover { background: var(--bg); }
    .search-drop-item .sd-icon { font-size: 16px; flex-shrink: 0; }
    .search-drop-item .sd-main { display: flex; flex-direction: column; min-width: 0; }
    .search-drop-item .sd-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .search-drop-item .sd-main small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .search-drop-empty { padding: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }
    @media (max-width: 900px) {
      .search-dropdown { position: fixed; top: calc(var(--topbar-h) + 4px); inset-inline-start: 8px; inset-inline-end: 8px; max-height: 55vh; }
    }

    .content {
      padding: 24px 28px;
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
    }
    .page-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
    }
    .page-header h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
    .page-header .subtitle { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
    .page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }

    /* ============ CARDS ============ */
    .card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 20px;
      box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
      transition: all 0.15s ease;
    }
    .card:hover { box-shadow: var(--shadow-md); }
    .card-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 14px; padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .card-title { font-size: 15px; font-weight: 800; color: var(--text); }
    .card-title-icon { display: inline-flex; align-items: center; gap: 8px; }
    .card .flex.justify-between {
      padding: 6px 0;
      border-bottom: 1px dashed rgba(226, 232, 240, 0.85);
      align-items: center;
    }
    .card .flex.justify-between:last-child {
      border-bottom: none;
    }
    .card code {
      font-family: 'JetBrains Mono', 'Consolas', monospace;
      font-size: 12px;
      background: #f1f5f9;
      color: #0f172a;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    /* Stats grid */
    .stat-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      grid-gap: 14px;
      gap: 14px; margin-bottom: 20px;
    }
    .stat-card {
      background: white; border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 18px 20px;
      display: flex; align-items: center; gap: 14px;
      transition: all 0.15s;
    }
    .stat-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .stat-card .icon-box {
      width: 44px; height: 44px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .stat-card .icon-box.blue   { background: #dbeafe; color: #1d4ed8; }
    .stat-card .icon-box.green  { background: #d1fae5; color: #047857; }
    .stat-card .icon-box.orange { background: #ffedd5; color: #c2410c; }
    .stat-card .icon-box.red    { background: #fee2e2; color: #b91c1c; }
    .stat-card .icon-box.purple { background: #f3e8ff; color: #7e22ce; }
    .stat-card .icon-box.cyan   { background: #cffafe; color: #0e7490; }
    .stat-card .value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
    .stat-card .label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
    .stat-card .trend { font-size: 11px; font-weight: 700; margin-top: 4px; }
    .stat-card .trend.up { color: var(--success); }
    .stat-card .trend.down { color: var(--danger); }

    /* Buttons */
    .btn {
      -webkit-appearance: none; -moz-appearance: none; appearance: none;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 8px; cursor: pointer;
      font-family: inherit; font-size: 13px; font-weight: 700;
      border: 1px solid transparent; transition: all 0.15s;
      text-decoration: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
    .btn-primary:hover:not(:disabled) { background: var(--primary-h); border-color: var(--primary-h); box-shadow: 0 4px 8px rgba(29,78,216,0.25); }
    .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
    .btn-ghost:hover:not(:disabled) { background: var(--bg-hover); border-color: #cbd5e1; }
    /* v31.8: .btn-secondary was used 25+ times but never defined — alias of .btn-ghost */
    .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
    .btn-secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: #cbd5e1; }
    /* Destructive: outline with colored border, transparent bg (Owner law) */
    .btn-danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
    .btn-danger:hover:not(:disabled) { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }
    /* Solid destructive allowed only in modal final confirmation */
    .modal-footer .btn-danger, .btn-danger.confirm, .btn-danger-solid { background: var(--danger); color: white; border: 1.5px solid var(--danger); }
    .modal-footer .btn-danger:hover:not(:disabled), .btn-danger.confirm:hover:not(:disabled), .btn-danger-solid:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
    /* Positive action: solid green (Owner law) */
    .btn-success { background: var(--success); color: white; border-color: var(--success); }
    .btn-success:hover:not(:disabled) { background: var(--success-h); border-color: var(--success-h); }
    .btn-warning { background: var(--warning); color: white; border-color: var(--warning); }
    .btn-sm { padding: 6px 10px; font-size: 12px; }
    .btn-xs { padding: 4px 8px; font-size: 11px; }
    .btn-block { width: 100%; justify-content: center; }
    .btn-icon-only { padding: 8px; }

    /* Pills */
    .pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: 999px;
      font-size: 11px; font-weight: 700;
      white-space: nowrap;
    }
    .pill.dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; -webkit-margin-end: 4px; margin-inline-end: 4px; }
    .pill.green  { background: #d1fae5; color: #065f46; }
    .pill.orange { background: #fed7aa; color: #9a3412; }
    .pill.red    { background: #fecaca; color: #991b1b; }
    .pill.blue   { background: #dbeafe; color: #1e3a8a; }
    .pill.gray   { background: #e2e8f0; color: #1e293b; }
    .pill.purple { background: #e9d5ff; color: #6b21a8; }
    .pill.cyan   { background: #cffafe; color: #155e75; }

    /* Table */
    /* v31.9: overflow-x auto (was hidden) — wide tables (e.g. Audit JSON details) scroll
       inside the container instead of breaking the page width, on desktop AND mobile */
    .table-wrap {
      background: white; border-radius: var(--radius-lg);
      border: 1px solid var(--border); overflow-x: auto;
      box-shadow: var(--shadow-sm);
    }
    .table-toolbar {
      padding: 14px 18px;
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; flex-wrap: wrap;
      border-bottom: 1px solid var(--border);
    }
    .table-toolbar .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1 1; }
    /* v31.8: table.table added alongside table.data — 14 tables used .table with no base style */
    table.data, table.table { width: 100%; border-collapse: collapse; }
    table.data th, table.table th {
      background: #fafbfc; padding: 10px 16px;
      text-align: right; font-size: 11px;
      font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.03em;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    table.data td, table.table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    table.data tr, table.table tr { transition: background 0.1s; }
    table.data tr:hover, table.table tr:hover { background: #fafbfc; }
    table.data tbody tr:last-child td, table.table tbody tr:last-child td { border-bottom: none; }
    table.data code, table.table code { font-size: 12px; background: #e2e8f0; color: #0f172a; padding: 2px 6px; border-radius: 4px; }

    /* Universal tabs */
    .tabs {
      display: flex; align-items: center; gap: 4px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 18px; padding-bottom: 0;
    }
    .tab {
      padding: 9px 16px; cursor: pointer;
      border-bottom: 2px solid transparent;
      color: var(--text-muted); font-weight: 600; font-size: 13px;
      border-radius: 8px 8px 0 0;
      transition: all 0.15s ease;
      margin-bottom: -1px;
      display: inline-flex; align-items: center; gap: 6px;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
    .tab.active { color: var(--primary); background: rgba(29,78,216,0.06); border-bottom-color: var(--primary); font-weight: 700; }
    .tab:hover:not(.active) { color: var(--text); background: var(--bg-hover); }

    /* v31.8: .kv promoted to always-on (was styled only inside the mobile media query) */
    .kv { display: grid; grid-template-columns: 170px 1fr; grid-gap: 8px 14px; gap: 8px 14px; margin: 0; align-items: start; }
    .kv dt { color: var(--text-muted); font-size: 12px; font-weight: 600; }
    .kv dd { margin: 0; font-size: 13px; color: var(--text); word-break: break-word; }

    .pagination {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 18px; font-size: 12px;
      border-top: 1px solid var(--border); background: #fafbfc;
    }
    .pagination .info { color: var(--text-muted); }
    .pagination .controls { display: flex; gap: 4px; align-items: center; }
    .pagination button {
      padding: 5px 10px; border: 1px solid var(--border); background: white;
      border-radius: 6px; cursor: pointer; font-size: 12px; font-family: inherit;
    }
    .pagination button:not(:disabled):hover { background: var(--bg); }
    .pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
    .pagination .current { padding: 5px 12px; font-weight: 700; color: var(--primary); }

    /* Empty state */
    .empty-state {
      padding: 80px 20px; text-align: center; color: var(--text-muted);
    }
    .empty-state .icon { font-size: 56px; margin-bottom: 16px; opacity: 0.4; }
    .empty-state h3 { color: var(--text); font-size: 17px; margin-bottom: 8px; }
    .empty-state p { font-size: 13px; margin-bottom: 20px; }

    /* Company card grid */
    .company-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      grid-gap: 14px;
      gap: 14px;
    }
    .company-card {
      background: white; border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 16px 18px;
      cursor: pointer; transition: all 0.15s;
    }
    .company-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .company-card .header {
      display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
    }
    .company-card .header .logo {
      width: 44px; height: 44px; border-radius: 11px;
      background: var(--bg); display: flex; align-items: center; justify-content: center;
      font-size: 22px;
    }
    .company-card .header .title h3 { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
    .company-card .header .title .type { font-size: 11px; color: var(--text-muted); }
    .company-card .stats {
      display: flex; gap: 12px; margin: 8px 0;
      padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .company-card .stats .stat { flex: 1 1; }
    .company-card .stats .stat .n { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1; }
    .company-card .stats .stat .l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
    .company-card .sites-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    .company-card .site-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 10px; background: var(--bg); border-radius: 6px;
      font-size: 12px;
    }
    .company-card .site-item .name { font-weight: 600; }
    .company-card .site-item .meta { color: var(--text-muted); font-size: 10px; }

    /* Modal */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(15,23,42,0.6);
      display: flex; align-items: center; justify-content: center;
      z-index: 9998; padding: 20px;
      animation: fadeIn 0.15s;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .modal {
      background: white; border-radius: 16px;
      width: min(680px, 100%); max-height: 90vh;
      display: flex; flex-direction: column;
      box-shadow: var(--shadow-xl);
      animation: slideUp 0.2s;
    }
    @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
    .modal-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 24px; border-bottom: 1px solid var(--border);
    }
    .modal-header h3 { font-size: 17px; font-weight: 800; }
    .modal-body { padding: 24px; overflow-y: auto; flex: 1 1; }
    .modal-footer {
      display: flex; justify-content: flex-end; gap: 8px;
      padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg);
    }

    /* Forms */
    .form-row {
      display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px;
      margin-bottom: 14px;
    }
    .form-row.single { grid-template-columns: 1fr; }
    .form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    /* Toast */
    /* v31.8: was right:16px which sat on top of the RTL sidebar — moved to the inline-end side (left in RTL) */
    #toastRoot { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: 400px; }
    .toast {
      background: white; padding: 12px 16px;
      border-radius: 10px; box-shadow: var(--shadow-lg);
      font-size: 13px; font-weight: 500;
      -webkit-border-start: 4px solid var(--primary);
              border-inline-start: 4px solid var(--primary);
      animation: slideInR 0.2s;
    }
    @keyframes slideInR { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
    .toast.ok { border-color: var(--success); }
    .toast.err { border-color: var(--danger); }
    .toast.warn { border-color: var(--warning); }
    .toast.info { border-color: var(--info); }

    /* Skeleton */
    .skeleton {
      background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
      background-size: 200% 100%;
      animation: skelLoad 1.4s ease-in-out infinite;
      border-radius: 4px;
    }
    @keyframes skelLoad {
      0% { background-position: 200% 0; } 100% { background-position: -200% 0; }
    }

    /* Utility */
    .flex { display: flex; }
    .flex-col { display: flex; flex-direction: column; }
    .gap-2 { gap: 8px; }
    .gap-3 { gap: 12px; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .flex-wrap { flex-wrap: wrap; }
    .text-muted { color: var(--text-muted); }
    .text-xs { font-size: 11px; }
    .text-sm { font-size: 12px; }
    .font-bold { font-weight: 700; }
    .mt-2 { margin-top: 8px; }
    .mt-3 { margin-top: 12px; }
    .mt-4 { margin-top: 16px; }
    .mb-2 { margin-bottom: 8px; }
    .mb-3 { margin-bottom: 12px; }
    .mb-4 { margin-bottom: 16px; }
    .p-3 { padding: 12px; }
    .p-4 { padding: 16px; }

    /* ============ MOBILE RESPONSIVE ============ */
    #mobileMenuBtn {
      display: none;
      position: fixed;
      top: 8px;
      right: 12px;
      z-index: 9999;
      width: 40px;
      height: 40px;
      background: #1e293b;
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      transition: all 0.15s ease;
    }
    #mobileMenuBtn:hover { background: #334155; }
    #mobileMenuOverlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 9996;
    }
    @media (max-width: 900px) {
      html {
        overflow-x: hidden !important;
      }
      body {
        overflow-x: hidden !important;
        display: block !important;
        padding: 0 !important;
      }
      body.no-sidebar {
        display: block !important;
      }
      /* Reset any grid/flex parent layout */
      #app, #appRoot, body > div:first-child {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
      }
      .content {
        padding: 16px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      /* SIDEBAR — hidden by default, slide in from right when .mobile-open */
      #sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        transform: translateX(100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 9997 !important;
        box-shadow: -6px 0 24px rgba(0,0,0,0.35) !important;
      }
      #sidebar.mobile-open {
        transform: translateX(0) !important;
      }
      /* When sidebar is open on mobile, show labels + scope info */
      #sidebar.mobile-open .scope-switcher .label,
      #sidebar.mobile-open .scope-switcher .value,
      #sidebar.mobile-open .nav-item .label,
      #sidebar.mobile-open .nav-section-label {
        display: initial !important;
      }
      #sidebar.mobile-open .sidebar-brand .info,
      #sidebar.mobile-open .sidebar-footer .info {
        display: block !important;
      }
      #sidebar.mobile-open .nav-item {
        justify-content: flex-start !important;
      }
      /* MAIN — take full width when on mobile */
      #main {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      /* TOPBAR — add space for hamburger in RTL */
      .topbar {
        -webkit-padding-start: 60px !important;
                padding-inline-start: 60px !important;
        -webkit-padding-end: 12px !important;
                padding-inline-end: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      /* HAMBURGER */
      #mobileMenuBtn {
        display: flex !important;
      }
      #mobileMenuOverlay.mobile-open {
        display: block !important;
      }
      /* Content spacing */
      .card, .container, main > section {
        padding: 12px !important;
      }
      /* Grids */
      .stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }
      .stat-card {
        padding: 12px !important;
      }
      .stat-card .value {
        font-size: 20px !important;
      }
      .stat-card .label {
        font-size: 11px !important;
      }
      /* AD tabs — allow horizontal scroll */
      .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap !important;
        max-width: 100vw;
      }
      .tab {
        flex-shrink: 0 !important;
      }
      /* Tables scroll horizontally */
      .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
      }
      .table {
        min-width: 600px;
        font-size: 13px;
      }
      .table th, .table td {
        padding: 8px 6px !important;
      }
      .btn-sm {
        padding: 4px 8px !important;
        font-size: 11px !important;
      }
      .btn {
        font-size: 13px;
        padding: 8px 12px;
      }
      /* Modals full width */
      .modal, .modal-overlay .modal {
        max-width: 96vw !important;
        margin: 8px auto !important;
        max-height: 92vh !important;
      }
      .modal-body {
        padding: 14px !important;
      }
      .form-row {
        margin-bottom: 12px;
      }
      .form-row [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }
      input.form-control, select.form-control, textarea.form-control {
        font-size: 16px !important;  /* prevents iOS zoom */
      }
      h1 { font-size: 20px !important; }
      h2 { font-size: 17px !important; }
      h3 { font-size: 15px !important; }
      .kv {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
      }
      .kv dt {
        margin-top: 8px;
        font-weight: 600;
      }
      /* Topbar search — hide "بحث سريع" on very small */
      .topbar > *:not(:last-child):not(#mobileMenuBtn) {
        max-width: 60vw;
      }
    }
    @media (max-width: 500px) {
      .stat-grid {
        grid-template-columns: 1fr !important;
      }
      .btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
      }
      /* Login card */
      .login-card {
        padding: 24px !important;
        margin: 12px !important;
      }
    }
    /* ============ END v30.19 ============ */

    /* ============ v31.9 UX FIXES (2026-07-24) ============ */
    /* Modal close (×) — 44px minimum touch target on all viewports */
    .modal-header .topbar-btn {
      min-width: 44px; min-height: 44px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 18px;
    }
    /* Audit details column — truncate long JSON (full value in tooltip) */
    .audit-details {
      display: inline-block; max-width: 340px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      vertical-align: bottom; direction: ltr; text-align: left;
    }
    @media (max-width: 900px) { .audit-details { max-width: 180px; } }
    /* Mobile modals: all form grids single-column ≤480px (fixes every CRUD modal at once) */
    @media (max-width: 480px) {
      .form-row { grid-template-columns: 1fr !important; }
      .modal .kv { grid-template-columns: 1fr !important; }
    }
    /* ============ END v31.9 ============ */

    /* ============ v31.9.1 POLISH (2026-07-24) ============ */
    /* Hamburger must never show on the logged-out login screen (body.no-sidebar) */
    body.no-sidebar #mobileMenuBtn { display: none !important; }
    /* Mobile: keep the actions column visible in RTL horizontal-scroll tables
       (Tickets / Devices / Email opt in via .sticky-actions) */
    @media (max-width: 900px) {
      table.sticky-actions td:last-child {
        position: -webkit-sticky;
        position: sticky; inset-inline-end: 0; z-index: 1;
        background: white;
        box-shadow: -4px 0 6px -4px rgba(0,0,0,0.18);
      }
      table.sticky-actions th:last-child {
        position: -webkit-sticky;
        position: sticky; inset-inline-end: 0; z-index: 1;
        background: #fafbfc;
        box-shadow: -4px 0 6px -4px rgba(0,0,0,0.18);
      }
    }
    /* Filters spread across the toolbar width (balanced like the Email page) */
    .table-toolbar .filters .form-control { flex: 1 1 160px; max-width: 340px; }
    /* ============ END v31.9.1 ============ */


    /* ============ v31.10 TICKET ATTACHMENTS ============ */
    .att-thumb-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .att-card { display: flex; flex-direction: column; gap: 6px; align-items: center; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 10px; width: 150px; background: var(--card-bg, #fff); }
    .att-thumb { width: 120px; height: 90px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f1f5f9; font-size: 22px; }
    .att-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .att-clickable { cursor: pointer; }
    .att-file-ico { width: 120px; height: 90px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; font-size: 34px; }
    .att-meta { font-size: 11px; text-align: center; word-break: break-all; line-height: 1.5; }
    .att-dl, .att-rm { min-height: 44px; min-width: 44px; }
    .att-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(10, 15, 30, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; cursor: zoom-out; }
    .att-lightbox img { max-width: 94vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
    .att-lb-close { position: absolute; top: 14px; inset-inline-start: 14px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; }
    .att-lb-cap { color: #e2e8f0; font-size: 13px; text-align: center; }
    @media (max-width: 480px) {
      .att-thumb-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
      .att-card { width: auto; }
      .att-thumb, .att-file-ico { width: 100%; }
    }
    #wgReportModal{position:fixed;inset:0;z-index:90;overflow-y:auto;background:rgba(15,23,42,.55);padding:16px}
    #wgReportModal[hidden]{display:none!important}
    #wgReportBoxWrap{display:flex;min-height:100%;align-items:center;justify-content:center}
    #wgReportBox{width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow-y:auto;margin:auto 0;background:#fff;color:#0f172a;border-radius:16px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
    #wgReportBox h2{margin:0;font-size:16px}
    #wgReportBox textarea{width:100%;margin-top:10px;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font:inherit}
    #wgReportBox button,#wgReportBox label.wg-btn{min-height:36px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;padding:6px 12px;font:inherit;font-weight:700;cursor:pointer}
    #wgReportSend{width:100%;margin-top:8px;background:#162640;color:#fff;border:0}