/* base-layout.css
   Design tokens (CSS variables), resets, and the app shell:
   sidebar, navigation, topbar, content area, modals, name-management lists.
*/
  :root{
    --bg:#eef1f8; --surface:#ffffff; --surface-2:#f6f7fb; --border:#e2e5ee;
    --text:#161a2b; --text-soft:#565f74; --text-mute:#98a0b3;
    --primary:#4338ca; --primary-2:#6366f1; --primary-soft:#eef0fe;
    --accent:#0d9488; --accent-soft:#e6f7f5;
    --amber:#d97706; --amber-soft:#fdf1e0;
    --pink:#db2777; --pink-soft:#fde7f1;
    --cyan:#0891b2; --cyan-soft:#e2f6fa;
    --danger:#dc2626; --danger-soft:#fde8e8;
    --success:#16a34a; --success-soft:#e7f7ec;
    --radius:12px; --radius-sm:8px;
    --shadow:0 1px 2px rgba(20,25,50,.04), 0 6px 18px rgba(20,25,50,.06);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);}
  a{text-decoration:none;color:inherit;}

  .app{display:flex;min-height:100vh;}
  .sidebar{width:64px;flex-shrink:0;background:linear-gradient(180deg,#1e1b4b 0%,#312e81 100%);color:#fff;padding:16px 10px;position:sticky;top:0;height:100vh;overflow-x:hidden;overflow-y:auto;transition:width .18s ease;}
  .sidebar.expanded{width:232px;padding:20px 14px;}
  .navToggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:15px;margin-bottom:16px;border:none;}
  .sidebar.expanded .navToggle{margin-left:auto;}
  .navToggle:hover{background:rgba(255,255,255,.18);}
  .sideBrandRow{padding:0 2px 16px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:14px;display:none;}
  .sidebar.expanded .sideBrandRow{display:block;}
  .companyName{font-size:14px;font-weight:700;line-height:1.3;}
  .sideLogoWrap{display:flex;justify-content:center;margin-bottom:10px;}
  .sideLogo{max-width:120px;width:100%;height:auto;border-radius:10px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.25);}
  .appName{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:#c7c9f5;margin-top:4px;}
  .navitem{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:9px;color:#d8d9f7;font-size:13px;cursor:pointer;margin-bottom:3px;transition:background .12s;white-space:nowrap;overflow:hidden;}
  .navitem:hover{background:rgba(255,255,255,.08);}
  .navitem.active{background:#ffffff;color:var(--primary);font-weight:700;}
  .navitem .ic{font-size:15px;width:20px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;line-height:1;}
  .navitem .lbl{display:none;}
  .sidebar.expanded .navitem .lbl{display:inline;}
  .sideFoot{margin-top:16px;padding:10px;font-size:10.5px;color:#a5a8e8;line-height:1.5;display:none;}
  .sidebar.expanded .sideFoot{display:block;}
  .sideCopyright{margin-top:20px;padding:14px 10px 4px;font-size:9.5px;color:#8688c9;line-height:1.6;text-align:center;border-top:1px solid rgba(255,255,255,.1);display:none;}
  .sidebar.expanded .sideCopyright{display:block;}
  .sideCopyright b{color:#c7c9f5;}
  .fileSearch{font-family:var(--font);font-size:12.5px;padding:8px 12px;border:1px solid var(--border);border-radius:20px;background:var(--surface-2);color:var(--text);min-width:230px;}
  .pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--text-soft);}
  .pager button{font-family:var(--font);font-size:12.5px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);cursor:pointer;}
  .pager button:disabled{opacity:.4;cursor:not-allowed;}

  table.rep.wrapHead th, table.pivot.wrapHead th{white-space:normal;vertical-align:bottom;line-height:1.35;min-width:92px;text-align:center !important;}
  .freezeCol td:first-child, .freezeCol th:first-child{position:sticky;left:0;z-index:2;box-shadow:2px 0 5px -3px rgba(20,25,50,.25);}
  .freezeCol thead th:first-child{z-index:5;}
  table.rep.freezeCol tbody td:first-child{background:var(--surface);}
  table.rep.freezeCol tr.grandRow td:first-child{background:var(--text);}
  table.pivot.freezeCol tr.brandRow td:first-child{background:var(--primary-soft);}
  table.pivot.freezeCol tr.productRow td:first-child{background:var(--surface);}
  table.pivot.freezeCol tr.grandRow td:first-child{background:var(--text);}

  .viewAsWrap{display:none;margin-bottom:14px;}
  .sidebar.expanded .viewAsWrap{display:block;}
  .vaLabel{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:#a5a8e8;display:block;margin-bottom:5px;}
  .viewAsWrap select{width:100%;font-family:var(--font);font-size:12px;padding:6px 8px;border-radius:7px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;}
  .viewAsWrap select option{color:#161a2b;}

  .navFolderHead{display:flex;align-items:center;gap:8px;padding:9px 10px 5px;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#9799dd;cursor:pointer;font-weight:700;}
  .navFolderHead .chev{margin-left:auto;transition:transform .15s;font-size:10px;}
  .navFolder.collapsed .navFolderBody{display:none;}
  .navFolder.collapsed .navFolderHead .chev{transform:rotate(-90deg);}
  .sidebar:not(.expanded) .navFolderHead{justify-content:center;padding:9px 0 5px;}
  .sidebar:not(.expanded) .navFolderHead .lbl,.sidebar:not(.expanded) .navFolderHead .chev{display:none;}
  .navitem.permHidden{display:none !important;}

  .userCard{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
  .userCard .uName{font-weight:700;font-size:13.5px;color:var(--text);}
  .userCard .uPerms{font-size:11.5px;color:var(--text-mute);margin-top:4px;line-height:1.6;}
  .permGroup{margin-bottom:12px;}
  .permGroup .pgTitle{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);font-weight:700;margin-bottom:6px;}
  .permCheck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-soft);margin-right:16px;}
  .formRow{margin-bottom:14px;}
  .formRow label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);font-weight:700;margin-bottom:6px;}
  .formRow input[type=text]{width:100%;max-width:280px;font-family:var(--font);font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);}
  .formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 18px;margin-bottom:14px;}
  .formGrid select, .formGrid input[type=date], .formGrid input[type=text]{width:100%;max-width:none;font-family:var(--font);font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);box-sizing:border-box;}
  .faultTypeChecks{display:flex;flex-wrap:wrap;gap:8px 16px;}
  .faultTypeChecks label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-soft);}
  .nameList{margin-top:10px;max-height:220px;overflow-y:auto;}
  .nameChip{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:12.5px;color:var(--text-soft);border-bottom:1px solid #f0f1f6;}
  .nameChip button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:12px;padding:2px 6px;}
  /* ---- Settings panel ---- */
  .settingAddRow{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
  .settingAddRow input[type=text]{flex:1;min-width:200px;font-family:var(--font);font-size:13px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);}
  .settingAddRow input[type=text]:focus{outline:2px solid var(--primary);border-color:var(--primary);}
  .nameChip{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:13px;font-weight:500;color:var(--text-soft);border-bottom:1px solid var(--border);}
  .nameChip:last-child{border-bottom:none;}
  .nameChip span{flex:1;}
  .nameChip button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:background .1s;}
  .nameChip button:hover{background:var(--danger-soft);}