/* 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:#0f172a;color:#fff;padding:12px 8px;position:sticky;top:0;height:100vh;overflow-x:hidden;overflow-y:auto;transition:width .18s ease;display:flex;flex-direction:column;}
  .sidebar.expanded{width:240px;padding:16px 12px;}
  .navToggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.07);color:#94a3b8;cursor:pointer;border:none;flex-shrink:0;align-self:flex-end;margin-bottom:4px;transition:background .12s;}
  .navToggle:hover{background:rgba(255,255,255,.13);}
  .navToggle i{font-size:16px;}

  .sideBrandRow{display:none;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:12px;}
  .sidebar.expanded .sideBrandRow{display:block;}
  .sideLogoWrap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:4px 2px 10px;}
  /* Vector mascot logo on transparent background -- shown as-is on the dark
     sidebar, no blend/filter (those were tuned for the old photo-style logo). */
  .sideLogo{width:100%;max-width:150px;height:auto;object-fit:contain;display:block;}
  .sideLogoText{min-width:0;}
  .companyName{font-size:12.5px;font-weight:600;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .appName{font-size:10px;color:#475569;letter-spacing:.3px;white-space:nowrap;}

  .n1{margin-bottom:2px;}
  .n1-head{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:#6366f1;transition:background .1s;}
  .n1-head:hover{background:rgba(99,102,241,.08);}
  .n1-head>i:first-child{font-size:15px;flex-shrink:0;width:20px;text-align:center;}
  .n1-head .lbl{flex:1;display:none;}
  .sidebar.expanded .n1-head .lbl{display:inline;}
  .n1-head .chev{font-size:11px;color:#334155;transition:transform .15s;margin-left:auto;display:none;}
  .sidebar.expanded .n1-head .chev{display:inline;}
  .n1:not(.n1-open)>.n1-head .chev{transform:rotate(-90deg);}

  .n2{margin-bottom:1px;}
  .n2-head{display:flex;align-items:center;gap:8px;padding:6px 9px 6px 22px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:#94a3b8;transition:background .1s;}
  .sidebar:not(.expanded) .n2-head{padding-left:9px;justify-content:center;}
  .n2-head:hover{background:rgba(255,255,255,.04);}
  .n2-head>i:first-child{font-size:14px;color:#64748b;flex-shrink:0;width:18px;text-align:center;}
  .n2-head .lbl{flex:1;display:none;}
  .sidebar.expanded .n2-head .lbl{display:inline;}
  .n2-head .chev{font-size:10px;color:#334155;transition:transform .15s;margin-left:auto;display:none;}
  .sidebar.expanded .n2-head .chev{display:inline;}
  .n2:not(.n2-open)>.n2-head .chev{transform:rotate(-90deg);}

  .navitem{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;color:#94a3b8;font-size:12px;cursor:pointer;margin-bottom:1px;transition:background .1s,color .1s;white-space:nowrap;overflow:hidden;position:relative;text-decoration:none;}
  .sidebar:not(.expanded) .navitem{justify-content:center;}
  .navitem:hover{background:rgba(255,255,255,.05);color:#cbd5e1;}
  .navitem.active{background:rgba(99,102,241,.15);color:#e0e7ff;}
  .navitem.active::before{content:'';position:absolute;left:0;top:20%;height:60%;width:3px;background:#6366f1;border-radius:0 3px 3px 0;}
  .navitem .ic{width:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .navitem .ic i{font-size:15px;color:#475569;transition:color .1s;}
  .navitem:hover .ic i{color:#94a3b8;}
  .navitem.active .ic i{color:#818cf8;}
  .navitem .lbl{display:none;}
  .sidebar.expanded .navitem .lbl{display:inline;}
  .navitem.active .lbl{font-weight:500;}

  .n1-body > .navitem{padding-left:22px;}
  .sidebar:not(.expanded) .n1-body > .navitem{padding-left:9px;}
  .n2-body > .navitem{padding-left:38px;}
  .sidebar:not(.expanded) .n2-body > .navitem{padding-left:9px;}
  .navitem.permHidden{display:none !important;}

  .navDivider{height:1px;background:rgba(255,255,255,.06);margin:6px 4px 8px;}

  .sideUserBlock{display:none;padding-bottom:2px;}
  .sidebar.expanded .sideUserBlock{display:block;}
  .sideUserBtn{display:flex;align-items:center;gap:9px;padding:7px 4px;border-radius:7px;transition:background .1s;width:100%;}
  .sideUserBtn:hover{background:rgba(255,255,255,.05);}
  .sideAvatar{width:28px;height:28px;border-radius:50%;background:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0;}
  .sideUserInfo{flex:1;min-width:0;}
  .sideUserName{font-size:12px;font-weight:500;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sideUserRole{font-size:10px;color:#475569;text-transform:capitalize;}
  .sideCopyright{display:none;padding:10px 4px 0;font-size:9px;color:#334155;line-height:1.6;text-align:center;}
  .sidebar.expanded .sideCopyright{display:block;}
  .sideCopyright b{color:#475569;}

  .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;}
  /* Sales Growth & Target table: normal mixed-case headers (not all-caps), still centered/wrapped via wrapHead above. */
  #growthLocTable th{text-transform:none;}

  /* Import Container form field labels */
  .cfLbl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-mute);font-weight:700;margin-bottom:4px;}

  /* Provisioned "coming soon" placeholder panels */
  .comingSoon{text-align:center;padding:48px 24px;}
  .comingSoon .csIcon i{font-size:44px;color:var(--primary-2);}
  .comingSoon .section{margin-top:10px;}

  /* Import Container tables: sticky header + first-5-columns frozen on scroll */
  .ctScroll{overflow:auto;}
  .ctTable{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;}
  .ctTable th,.ctTable td{padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;text-align:left;vertical-align:middle;background:var(--surface);}
  .ctTable td.num{text-align:right;}
  .ctTable thead th{position:sticky;top:0;z-index:3;background:var(--primary);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;cursor:pointer;}
  .ctTable thead th .sortArrow{margin-left:3px;font-size:9px;}
  .ctTable tbody tr:hover td{background:var(--primary-soft);}
  /* frozen first five columns (PO date, status, QB PO, invoice, supplier) */
  .ctTable th:nth-child(1),.ctTable td:nth-child(1){position:sticky;left:0;min-width:88px;max-width:88px;}
  .ctTable th:nth-child(2),.ctTable td:nth-child(2){position:sticky;left:88px;min-width:116px;max-width:116px;}
  .ctTable th:nth-child(3),.ctTable td:nth-child(3){position:sticky;left:204px;min-width:116px;max-width:116px;}
  .ctTable th:nth-child(4),.ctTable td:nth-child(4){position:sticky;left:320px;min-width:124px;max-width:124px;}
  .ctTable th:nth-child(5),.ctTable td:nth-child(5){position:sticky;left:444px;min-width:130px;max-width:130px;box-shadow:2px 0 5px -2px rgba(20,25,50,.22);overflow:hidden;text-overflow:ellipsis;}
  .ctTable tbody td:nth-child(-n+5){z-index:2;}
  .ctTable thead th:nth-child(-n+5){z-index:4;}
  .ctRowClickable{cursor:pointer;}
  /* Styled filter dropdowns for the container log/dashboard (replaces the raw
     browser <select> look with the app's rounded filter style + custom arrow). */
  .ctSel{
    font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--text);
    padding:8px 34px 8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
    background-color:var(--surface);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;
  }
  .ctSel:hover{border-color:var(--primary-2);}
  .ctSel:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.15);}
  /* ERP Stock Data table: sticky header, first column frozen, sortable headers. */
  .erpTbl{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12.5px;}
  .erpTbl th,.erpTbl td{padding:7px 11px;border-bottom:1px solid var(--border);white-space:nowrap;text-align:left;vertical-align:middle;background:var(--surface);}
  .erpTbl thead th{position:sticky;top:0;z-index:3;background:var(--primary);color:#fff;cursor:pointer;user-select:none;font-weight:600;}
  .erpTbl thead th .sortArrow{opacity:.9;font-size:10px;}
  .erpTbl tbody tr:hover td{background:var(--surface-2);}
  .erpTbl td.num,.erpTbl th.num{text-align:right;font-variant-numeric:tabular-nums;}
  .erpTbl th:nth-child(1),.erpTbl td:nth-child(1){position:sticky;left:0;z-index:2;min-width:120px;box-shadow:1px 0 0 var(--border);}
  .erpTbl thead th:nth-child(1){z-index:4;}
  .erpTbl tbody td:nth-child(1){background:var(--surface);}
  .erpTbl tfoot td{position:sticky;bottom:0;z-index:3;background:var(--surface-2);font-weight:700;border-top:2px solid var(--primary);}
  .erpTbl tfoot td:nth-child(1){left:0;z-index:4;}

  /* When the signed-in user lacks delete rights, the panel gets .noDelete and all
     delete affordances (checkbox column, per-row Delete, bulk-delete button) hide. */
  #panel-faultssubmissions.noDelete .delCol,
  #panel-faultssubmissions.noDelete thead th:first-child,
  #panel-faultssubmissions.noDelete #bulkDeleteFaultsBtn{ display:none !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{margin-bottom:14px;}
  .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;}

  .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], .formRow input[type=email], .formRow input[type=password]{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);color:var(--text);box-sizing:border-box;}
  .formRow input::placeholder{color:var(--text-mute);}
  .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);}