/* ============================================
   THEME.CSS — SAP Fiori 3 (Quartz Light) inspired
   Tokens approximate @sap-theming/theming-base-content Horizon
   ============================================ */

/* ---------- Fiori font "72" ---------- */
@font-face{font-family:"72";src:local("72");font-display:swap}

/* ---------- CSS Variables ---------- */
:root{
  /* Neutrals */
  --bg:#f5f6f7;--bg2:#ffffff;--bg3:#fafafa;
  --text:#1d2d3e;--text2:#556b82;--text3:#32363a;
  --border:#e5e5e5;--border2:#d5d5d5;--hover:#ebf5fe;

  /* SAP Fiori brand palette */
  --primary:#0070f2;          /* Brand blue */
  --primary-dark:#0854a0;
  --primary-light:#ebf5fe;
  --accent:#1b90ff;

  --success:#30914c;
  --danger:#d20a0a;
  --warning:#e76500;
  --info:#7858ff;
  --teal:#049f9a;

  /* Shell (top bar) */
  --shell-bg:#354a5f;          /* Fiori shell grey-navy */
  --shell-text:#ffffff;
  --shell-hover:#425c77;
  --shell-active:#5b738b;

  /* Sidebar legacy (kept for compat — now hidden when topnav active) */
  --sidebar-bg:#354a5f;--sidebar-text:#d1dbe5;--sidebar-active:#ffffff;--sidebar-hover:#425c77;

  /* Topbar & shadows */
  --topbar-bg:#ffffff;
  --topbar-shadow:0 1px 0 #d5d5d5;
  --card-shadow:0 0 0 1px #e5e5e5;            /* border-as-shadow, Fiori flat */
  --card-shadow-hover:0 0 0 1px #0070f2,0 4px 12px rgba(0,112,242,.12);

  /* Table header */
  --th-bg:#f5f6f7;--th-text:#32363a;--th-gradient:#f5f6f7;

  /* Gradients (kept for compat, re-skinned) */
  --primary-gradient:linear-gradient(180deg,#0070f2 0%,#0854a0 100%);
  --primary-gradient-v:linear-gradient(180deg,#0070f2 0%,#0854a0 100%);

  /* Radii — Fiori is flatter */
  --r-sm:2px;--r-md:4px;--r-lg:6px;
}

body.dark{
  --bg:#1a2733;--bg2:#23313e;--bg3:#2a3a48;
  --text:#eaecee;--text2:#a9b4be;--text3:#cfd6dd;
  --border:#3a4a5c;--border2:#4a5b6e;--hover:#2f4255;

  --primary:#1b90ff;--primary-dark:#0070f2;--primary-light:#1f3a5a;
  --success:#36a566;--danger:#ff5454;--warning:#ff8c3d;

  --shell-bg:#12171e;--shell-hover:#1f2935;--shell-active:#2d3a49;
  --topbar-bg:#23313e;--topbar-shadow:0 1px 0 #3a4a5c;
  --card-shadow:0 0 0 1px #3a4a5c;
  --card-shadow-hover:0 0 0 1px #1b90ff,0 4px 12px rgba(27,144,255,.25);

  --th-bg:#1a2733;--th-text:#cfd6dd;--th-gradient:#1a2733;

  --primary-gradient:linear-gradient(180deg,#1b90ff 0%,#0070f2 100%);
  --primary-gradient-v:linear-gradient(180deg,#1b90ff 0%,#0070f2 100%);
}

/* ---------- Reset & Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-y:scroll;scrollbar-gutter:stable}
body{
  font-family:"72","72full",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-size:14px;line-height:1.4;
  background:var(--bg);color:var(--text);
  min-height:100vh;display:flex;
  transition:background .25s,color .25s;
}

/* ---------- Sidebar (legacy) — kept for back-compat ---------- */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:200px;background:var(--shell-bg);color:#d1dbe5;z-index:800;display:flex;flex-direction:column;transition:width .3s;overflow:hidden}
body.sb-collapsed .sidebar{width:56px}
.sidebar-logo{padding:12px 16px;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo .logo-icon{font-size:18px;color:#1b90ff}
body.sb-collapsed .sidebar-logo span{display:none}
.sidebar-nav{flex:1;padding:6px 0;overflow-y:auto}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 16px;color:#d1dbe5;text-decoration:none;font-size:13px;font-weight:400;transition:all .12s;white-space:nowrap;border-left:3px solid transparent}
.sidebar-nav a:hover{background:var(--shell-hover);color:#fff}
.sidebar-nav a.active{color:#fff;background:var(--shell-active);border-left-color:#1b90ff;font-weight:600}
.sidebar-nav a .nav-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
body.sb-collapsed .sidebar-nav a span{display:none}
body.sb-collapsed .sidebar-nav a{justify-content:center;padding:12px 0}
.sidebar-footer{padding:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
.sidebar-footer button{background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.9);padding:7px 10px;border-radius:var(--r-md);cursor:pointer;font-size:12px;display:flex;align-items:center;gap:7px;transition:all .12s;white-space:nowrap}
.sidebar-footer button:hover{background:rgba(255,255,255,.16);color:#fff}
body.sb-collapsed .sidebar-footer button span{display:none}
body.sb-collapsed .sidebar-footer button{justify-content:center;padding:9px 0}

/* ---------- Main Content ---------- */
.main-content{flex:1;margin-left:200px;transition:margin-left .3s;min-height:100vh;display:flex;flex-direction:column;min-width:0;max-width:calc(100vw - 200px)}
body.sb-collapsed .main-content{margin-left:56px;max-width:calc(100vw - 56px)}
.page-content{min-width:0;padding:16px 24px;flex:1}

/* ---------- Topbar (page header under shell) ---------- */
.topbar{position:sticky;top:0;z-index:100;background:var(--topbar-bg);padding:12px 24px;display:flex;align-items:center;gap:16px;box-shadow:var(--topbar-shadow);min-height:48px}
.topbar-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:0}
.topbar-search{flex:1;max-width:360px;position:relative}
.topbar-search input{width:100%;padding:7px 12px 7px 32px;border:1px solid var(--border2);border-radius:var(--r-md);font-size:13px;background:var(--bg2);color:var(--text);outline:none;transition:border .15s,box-shadow .15s}
.topbar-search input:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.topbar-search::before{content:'\1F50D';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.5}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ---------- Dashboard Tiles (Fiori launchpad style) ---------- */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:12px;margin-bottom:20px}
.dash-card{background:var(--bg2);border-radius:var(--r-lg);padding:16px;box-shadow:var(--card-shadow);display:flex;align-items:center;gap:12px;transition:box-shadow .15s,transform .15s;cursor:pointer}
.dash-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-1px)}
.dash-card .dc-icon{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.dash-card .dc-icon.c1{background:var(--primary-light);color:var(--primary)}
.dash-card .dc-icon.c2{background:#e8f5ec;color:var(--success)}
.dash-card .dc-icon.c3{background:#fff3e8;color:var(--warning)}
.dash-card .dc-icon.c4{background:#fde7e7;color:var(--danger)}
.dash-card .dc-icon.c5{background:#eee8ff;color:var(--info)}
.dash-card .dc-icon.c6{background:#e4f7f6;color:var(--teal)}
.dash-card .dc-info .dc-value{font-size:22px;font-weight:700;color:var(--text);line-height:1.1}
.dash-card .dc-info .dc-label{font-size:11px;color:var(--text2);text-transform:none;font-weight:400;margin-top:2px}

/* ---------- Section ---------- */
.section-title{background:var(--bg2);color:var(--text);padding:10px 16px;border:1px solid var(--border);border-bottom:none;border-radius:var(--r-lg) var(--r-lg) 0 0;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;border-left:3px solid var(--primary)}
.section-body{background:var(--bg2);border:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);padding:14px;margin-bottom:16px}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{padding:7px 10px;border:1px solid var(--border2);border-radius:var(--r-md);font-size:13px;background:var(--bg2);color:var(--text);outline:none;height:34px;transition:border .15s,box-shadow .15s}
.toolbar input:focus,.toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.toolbar input[type=text]{width:200px}
.toolbar input[type=date]{width:150px}

/* ---------- Buttons — Fiori flat ---------- */
.btn{
  font-family:inherit;font-weight:400;font-size:13px;letter-spacing:0;
  padding:6px 14px;border:1px solid var(--border2);border-radius:var(--r-md);
  cursor:pointer;user-select:none;outline:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;
  background:var(--bg2);color:var(--text);
  transition:background .12s,border-color .12s,box-shadow .12s,color .12s;
}
.btn:hover{background:var(--hover);border-color:var(--primary);color:var(--primary)}
.btn:active{background:var(--primary-light)}
.btn:focus-visible{box-shadow:0 0 0 2px var(--primary)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.btn-primary:active{background:#063a75}

.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:#236b37;border-color:#236b37;color:#fff}

.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#a00808;border-color:#a00808;color:#fff}

.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning)}
.btn-warning:hover{background:#b24d00;border-color:#b24d00;color:#fff}

.btn-sm{padding:4px 10px;font-size:12px;height:28px}
.btn-icon{padding:4px 8px;font-size:13px;height:28px;width:28px}
.btn-tb{width:34px;height:34px;font-size:14px;padding:0}

/* Additional button variants — all theme-driven */
.btn-info{background:var(--info);color:#fff;border-color:var(--info)}
.btn-info:hover{background:#5a3fd1;border-color:#5a3fd1;color:#fff}
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-teal:hover{background:#037a76;border-color:#037a76;color:#fff}
.btn-dark{background:var(--text);color:var(--bg2);border-color:var(--text)}
.btn-dark:hover{background:var(--text3);color:var(--bg2);border-color:var(--text3)}
.btn-secondary{background:var(--border);color:var(--text);border-color:var(--border2)}
.btn-secondary:hover{background:var(--border2);color:var(--text);border-color:var(--border2)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary-light);color:var(--primary-dark);border-color:var(--primary-dark)}

/* Theme enforcement — every <button> element inherits font from page and respects theme.
   Targets raw <button> elements that don't have the .btn class. */
button{font-family:inherit;color:inherit}
button:not(.btn):not(.modal-close):not(.sidebar-toggle):not(.tm-tab):not(.tab):not(.nav-tab){
  font-family:inherit;
}
/* Force .btn family/color inheritance at higher specificity to override page-local style= */
.btn{font-family:inherit !important}
/* Dark-mode contrast for the default (unstyled) .btn — body-level readable text */
body.dark .btn:not([class*="btn-"]):not([style*="background"]){color:var(--text)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--bg2);font-family:inherit;color:var(--text)}
thead th{background:var(--th-bg);color:var(--th-text);padding:9px 10px;font-size:12px;font-weight:600;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;border-bottom:1px solid var(--border2);font-family:inherit}
thead th:hover{background:var(--hover)}
tbody td{padding:8px 10px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);font-family:inherit}
tbody tr:hover{background:var(--hover)}
tbody tr.row-done{opacity:.55}
tbody tr.row-selected{background:var(--primary-light)}
.ms-summary{background:var(--primary-light);color:var(--text);font-weight:700}
.ms-summary td{border-top:2px solid var(--primary);color:var(--text)}

/* Theme enforcement — override any page-local rules that drift from theme tokens.
   Catches legacy colors that hardcoded black headers or light-grey borders. */
table thead th{background:var(--th-bg) !important;color:var(--th-text) !important}
table thead th:hover{background:var(--hover) !important}
table tbody td{color:var(--text);border-color:var(--border)}
table tbody tr:hover:not(.gg-row):not(.ms-summary){background:var(--hover)}
table tbody tr.gg-row td{color:inherit}
table tbody tr.row-selected:hover{background:var(--primary-light)}

/* Grid-group drop zone — aligned with theme */
.gg-zone{background:var(--bg3);border:2px dashed var(--border2);color:var(--text)}
.gg-zone .gg-empty{color:var(--text2)}
.gg-chip{background:var(--primary);color:#fff}
body.dark .gg-chip{background:var(--primary-dark)}

/* ---------- Badges ---------- */
.badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap;display:inline-block;border:1px solid transparent}
.badge-done{background:#e8f5ec;color:var(--success);border-color:#c3e5ce}
.badge-doing{background:var(--primary-light);color:var(--primary);border-color:#b3d9fd}
.badge-todo{background:#fff3e8;color:var(--warning);border-color:#fbd3b0}
.badge-hold{background:#fde7e7;color:var(--danger);border-color:#f7c1c1}
.ms-status{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;display:inline-block}
.ms-paid{background:#e8f5ec;color:var(--success)}
.ms-invoiced{background:var(--primary-light);color:var(--primary)}
.ms-pending{background:#fff3e8;color:var(--warning)}

/* ---------- Priority chips ---------- */
.priority{padding:2px 7px;border-radius:var(--r-sm);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.2px}
.priority-high{background:#fde7e7;color:var(--danger);border:1px solid var(--danger)}
.priority-medium{background:#fff3e8;color:var(--warning);border:1px solid var(--warning)}
.priority-low{background:#e8f5ec;color:var(--success);border:1px solid var(--success)}

/* ---------- Detail Tabs (IconTabBar style) ---------- */
.detail-tabs{
  display:flex;flex-wrap:wrap;gap:0;
  background:var(--bg2);
  padding:0 8px;
  border-bottom:1px solid var(--border2);
  border-radius:0;
  margin-bottom:0;
  overflow:visible;
  row-gap:0;
}
.dtab{
  padding:12px 16px;
  border:none;
  background:transparent;
  color:var(--text2);
  font-size:13px;font-weight:600;
  cursor:pointer;
  border-radius:0;
  border-bottom:3px solid transparent;
  transition:color .15s,border-color .15s;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.dtab:hover:not(.active){color:var(--primary)}
.dtab.active{
  color:var(--primary);
  border-bottom-color:var(--primary);
  font-weight:700;
  background:transparent;
}
.dtab.active::before,.dtab.active::after{content:none}
.tab-panel{
  display:none;background:var(--bg2);
  border:1px solid var(--border);border-top:none;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:18px;margin-bottom:20px;
}
.tab-panel.active{display:block}

/* ---------- Modals (Fiori Dialog) ---------- */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(29,45,62,.5);z-index:1000;justify-content:center;align-items:center;backdrop-filter:blur(2px)}
.modal-overlay.active{display:flex}
.modal{background:var(--bg2);border-radius:var(--r-lg);width:650px;max-width:95vw;height:90vh;max-height:90vh;min-height:560px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.22);color:var(--text);display:flex;flex-direction:column;border:1px solid var(--border2)}

/* Modal header — Fiori blue-navy gradient bar */
.modal-header{flex-shrink:0;position:sticky;top:0;z-index:10;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#0070f2 0%,#354a5f 70%,#12171e 100%);color:#fff;border-bottom:none}
.modal-header h2{font-size:17px;font-weight:700;color:#fff;letter-spacing:0}
.modal-header .mh-icon{width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.modal-header .mh-sub{font-size:11px;opacity:.85;margin-top:2px;text-transform:none;letter-spacing:.3px;color:rgba(255,255,255,.88)}
.modal-close{background:transparent;border:none;font-size:22px;cursor:pointer;color:rgba(255,255,255,.9);padding:2px 8px;border-radius:var(--r-sm);line-height:1;transition:background .12s}
.modal-close:hover{background:rgba(255,255,255,.15);color:#fff}
body.dark .modal-header{background:linear-gradient(90deg,#0854a0 0%,#1a2733 70%,#12171e 100%)}

.modal-body{padding:20px;flex:1 1 auto;overflow-y:auto;min-height:0;background:var(--bg2)}
.modal-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;background:var(--bg3);position:sticky;bottom:0;z-index:10}

tbody tr.row-clickable{cursor:pointer}
tbody tr.row-clickable:hover{background:var(--hover)}

.btn:disabled,.btn.perm-disabled,button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.view-only-banner{background:#fff3e8;color:#b24d00;padding:8px 12px;border-radius:var(--r-md);font-size:12px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--warning)}

/* ---------- Forms ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:12px;font-weight:600;color:var(--text2)}
.form-group input,.form-group select,.form-group textarea{padding:7px 10px;border:1px solid var(--border2);border-radius:var(--r-md);font-size:13px;font-family:inherit;background:var(--bg2);color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.form-group textarea{resize:vertical;min-height:60px}

/* ---------- Toast (Fiori MessageToast) ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);padding:10px 22px;background:#32363a;color:#fff;border-radius:22px;font-size:13px;z-index:2000;opacity:0;transition:all .25s;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ---------- Info Grid ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.info-item{background:var(--bg3);padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--border)}
.info-item label{font-size:11px;color:var(--text2);text-transform:none;font-weight:500;display:block;margin-bottom:2px}
.info-item span{font-size:14px;font-weight:600;color:var(--text)}

/* ---------- Phase Timeline ---------- */
.phase-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.phase-row:last-child{border-bottom:none}
.phase-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;background:var(--bg3);color:var(--text2);border:1px solid var(--border2)}
.phase-num.ph-done{background:var(--success);color:#fff;border-color:var(--success)}
.phase-num.ph-doing{background:var(--primary);color:#fff;border-color:var(--primary)}
.phase-info{flex:1}.phase-name{font-weight:600;font-size:14px}.phase-dates{font-size:12px;color:var(--text2)}

/* ---------- Progress ---------- */
.progress-cell{display:flex;align-items:center;gap:6px}
.progress-mini{width:70px;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-mini .fill{height:100%;border-radius:3px}
.progress-mini .fill.low{background:var(--danger)}
.progress-mini .fill.mid{background:var(--warning)}
.progress-mini .fill.high{background:var(--success)}

/* ---------- Deadline ---------- */
.deadline-indicator{font-size:12px;white-space:nowrap}
.dl-overdue{color:var(--danger);font-weight:600}
.dl-today{color:var(--warning);font-weight:600}
.dl-soon{color:var(--warning)}
.dl-ok{color:var(--success)}
.dl-done{color:var(--text2)}

/* ---------- Actions ---------- */
.actions{display:flex;gap:4px;white-space:nowrap}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:48px;color:var(--text2);font-size:14px}

/* ---------- Bulk Bar ---------- */
.bulk-bar{position:fixed;bottom:0;left:200px;right:0;background:var(--shell-bg);color:#fff;padding:10px 20px;display:none;align-items:center;gap:14px;z-index:900;box-shadow:0 -2px 8px rgba(0,0,0,.15);flex-wrap:wrap;transition:left .3s}
body.sb-collapsed .bulk-bar{left:56px}
.bulk-bar.active{display:flex}
.bulk-bar .bulk-count{font-weight:700;font-size:14px;min-width:100px}
.bulk-bar select{padding:6px 8px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-md);font-size:12px;background:var(--shell-hover);color:#fff}
.bulk-field{display:flex;flex-direction:column;gap:2px}
.bulk-field label{font-size:11px;color:rgba(255,255,255,.7)}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .sidebar{width:56px}
  .sidebar-logo span,.sidebar-nav a span,.sidebar-footer button span{display:none}
  .sidebar-nav a{justify-content:center;padding:12px 0}
  .main-content{margin-left:56px;max-width:calc(100vw - 56px)}
  .bulk-bar{left:56px}
  .form-row{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar input[type=text]{width:100%}
}

/* ---------- Shared Modal Sub-Tabs (Fiori IconTabFilter inside modals) ---------- */
.tm-tabs{
  display:flex;flex-wrap:wrap;gap:0;
  background:var(--bg2);
  padding:0;
  border-bottom:1px solid var(--border2);
  border-radius:0;
  margin-bottom:0;
  overflow:visible;
}
.tm-tabs::-webkit-scrollbar{height:4px}
.tm-tabs::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.tm-tab{
  flex:0 1 auto;
  padding:10px 14px;
  background:transparent;border:none;
  border-radius:0;
  border-bottom:3px solid transparent;
  cursor:pointer;
  font-size:12px;font-weight:600;
  color:var(--text2);
  text-transform:none;letter-spacing:0;
  transition:color .12s,border-color .12s;
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.tm-tab:hover:not(.active){color:var(--primary)}
.tm-tab.active{
  color:var(--primary);
  border-bottom-color:var(--primary);
  font-weight:700;
  background:transparent;
}
.tm-tab.active::before,.tm-tab.active::after{content:none}
.tm-tab-panel{display:none;background:var(--bg2);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:14px;margin-bottom:12px}
.tm-tab-panel.active{display:block}

/* ---------- Sub-Steppers & Sub-Sections ---------- */
.sub-stepper{display:flex;align-items:center;gap:0;margin-bottom:16px;padding:6px 4px;background:var(--bg3);border-radius:var(--r-md);border:1px solid var(--border)}
.sub-step{flex:1;padding:7px 6px;text-align:center;font-size:11px;font-weight:600;color:var(--text2);position:relative;text-transform:none;letter-spacing:0;transition:color .15s}
.sub-step:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;width:5px;height:5px;border-right:2px solid var(--border2);border-top:2px solid var(--border2);transform:translateY(-50%) rotate(45deg)}
.sub-step.active{color:#fff;background:var(--primary);border-radius:var(--r-sm);margin:-2px 2px;padding:9px 6px}
.sub-step.active::after{display:none}
.sub-step.completed{color:var(--success)}
.sub-step.completed::after{border-color:var(--success)}
.sub-step.danger{color:#fff;background:var(--danger);border-radius:var(--r-sm);margin:-2px 2px;padding:9px 6px}
.sub-step.danger::after{display:none}

.sub-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px;border-left:3px solid var(--primary)}
.sub-section.sec-info{border-left-color:var(--primary)}
.sub-section.sec-detail{border-left-color:var(--info)}
.sub-section.sec-commercial{border-left-color:var(--warning)}
.sub-section.sec-content{border-left-color:var(--teal)}
.sub-section.sec-response{border-left-color:var(--accent)}
.sub-section.sec-notes{border-left-color:var(--text2)}
.sub-section-title{font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.sub-section-title .sst-icon{font-size:14px;color:var(--primary)}
.sub-grid{display:grid;gap:10px}
.sub-grid-2{grid-template-columns:1fr 1fr}
.sub-grid-3{grid-template-columns:1fr 1fr 1fr}
.sub-grid-4{grid-template-columns:1fr 1fr 1fr 1fr}
.sub-grid > div{min-width:0}
.sub-grid label{display:block;font-size:11px;font-weight:600;color:var(--text2);text-transform:none;letter-spacing:0;margin-bottom:3px}
.sub-grid input,.sub-grid select,.sub-grid textarea{width:100%;padding:6px 9px;border:1px solid var(--border2);border-radius:var(--r-md);font-size:13px;background:var(--bg2);color:var(--text);font-family:inherit;box-sizing:border-box;transition:border-color .12s,box-shadow .12s}
.sub-grid input:focus,.sub-grid select:focus,.sub-grid textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 1px var(--primary)}
.sub-grid textarea{resize:vertical;min-height:56px;line-height:1.4}

/* ---------- Checklist items ---------- */
.cl-items{width:100%;border-collapse:collapse;font-size:12px}
.cl-items thead th{background:var(--th-bg);color:var(--th-text);padding:7px 8px;font-size:11px;font-weight:600;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border2)}
.cl-items tbody td{padding:4px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
.cl-items input,.cl-items select,.cl-items textarea{width:100%;padding:5px 7px;border:1px solid var(--border2);border-radius:var(--r-sm);font-size:12px;font-family:inherit;background:var(--bg2);color:var(--text);outline:none}
.cl-items input:focus,.cl-items select:focus,.cl-items textarea:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.cl-items input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary)}

/* ---------- Focus ring global ---------- */
input:focus,select:focus,textarea:focus,button:focus-visible{outline:none}
input[type=checkbox]{accent-color:var(--primary)}
input[type=radio]{accent-color:var(--primary)}

/* Links */
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* =====================================================================
   THEME VARIANTS — popular ERP / enterprise design systems
   Apply via <body class="theme-<name>">. Default (no class) = SAP Fiori.
   ===================================================================== */

/* ---- SAP Horizon (SAP's newer 2023+ look — cooler, flatter) ---- */
body.theme-sap-horizon{
  --primary:#0064d9;--primary-dark:#0854a0;--primary-light:#e8f4ff;--accent:#1b90ff;
  --shell-bg:#1a2733;--shell-hover:#2b3c4d;--shell-active:#3a4e62;
  --success:#2b7d2b;--danger:#b00;--warning:#de7000;
  --bg:#f5f6f7;--bg2:#ffffff;--bg3:#f0f2f4;
  --text:#131e29;--text2:#556b82;
  --border:#dadfe5;--border2:#c2c9d2;--hover:#e8f4ff;
  --th-bg:#ebeef1;--th-text:#131e29;--th-gradient:#ebeef1;
}
body.theme-sap-horizon .modal-header,
body.theme-sap-horizon #topnav{background:linear-gradient(90deg,#0064d9 0%,#1a2733 70%,#0a1218 100%)}

/* ---- Oracle Redwood (orange-red accent on warm neutrals) ---- */
body.theme-oracle-redwood{
  --primary:#1b5dab;--primary-dark:#143d72;--primary-light:#e6eef8;--accent:#c74634;
  --shell-bg:#312d2a;--shell-hover:#47413c;--shell-active:#5e5650;
  --success:#2d7f3e;--danger:#c74634;--warning:#d1581f;
  --bg:#f8f6f2;--bg2:#ffffff;--bg3:#f2efe9;
  --text:#1c1b1a;--text2:#5b5753;
  --border:#e4dfd6;--border2:#d0c9bc;--hover:#f2e8dc;
  --th-bg:#f2efe9;--th-text:#1c1b1a;--th-gradient:#f2efe9;
}
body.theme-oracle-redwood .modal-header,
body.theme-oracle-redwood #topnav{background:linear-gradient(90deg,#312d2a 0%,#1c1b1a 100%)}
body.theme-oracle-redwood #topnav .tn-brand .tn-logo{color:#e27447}

/* ---- Microsoft Fluent / Dynamics 365 ---- */
body.theme-microsoft-fluent{
  --primary:#0078d4;--primary-dark:#106ebe;--primary-light:#deecf9;--accent:#2b88d8;
  --shell-bg:#2b579a;--shell-hover:#3e6cb3;--shell-active:#527ec1;
  --success:#107c10;--danger:#d13438;--warning:#ca5010;
  --bg:#faf9f8;--bg2:#ffffff;--bg3:#f3f2f1;
  --text:#201f1e;--text2:#605e5c;
  --border:#edebe9;--border2:#d2d0ce;--hover:#eff6fc;
  --th-bg:#f3f2f1;--th-text:#201f1e;--th-gradient:#f3f2f1;
}
body.theme-microsoft-fluent .modal-header,
body.theme-microsoft-fluent #topnav{background:linear-gradient(90deg,#0078d4 0%,#2b579a 100%)}

/* ---- Salesforce Lightning ---- */
body.theme-salesforce-lightning{
  --primary:#0176d3;--primary-dark:#014486;--primary-light:#eaf5fe;--accent:#ff9a3c;
  --shell-bg:#16325c;--shell-hover:#1b3e71;--shell-active:#224c89;
  --success:#2e844a;--danger:#ba0517;--warning:#dd7a01;
  --bg:#f3f3f3;--bg2:#ffffff;--bg3:#f7f9fb;
  --text:#080707;--text2:#444545;
  --border:#dddbda;--border2:#c9c7c5;--hover:#eaf5fe;
  --th-bg:#f3f3f3;--th-text:#080707;--th-gradient:#f3f3f3;
}
body.theme-salesforce-lightning .modal-header,
body.theme-salesforce-lightning #topnav{background:linear-gradient(90deg,#0176d3 0%,#16325c 100%)}

/* ---- ServiceNow (Now Platform) ---- */
body.theme-servicenow{
  --primary:#293e40;--primary-dark:#1a2a2c;--primary-light:#e6eef0;--accent:#81b5a1;
  --shell-bg:#293e40;--shell-hover:#3a5355;--shell-active:#4c686a;
  --success:#2fa44f;--danger:#e57373;--warning:#e37222;
  --bg:#f4f6f7;--bg2:#ffffff;--bg3:#eef2f3;
  --text:#1f2c2d;--text2:#5a6b6d;
  --border:#d7dee0;--border2:#c0cacd;--hover:#e6eef0;
  --th-bg:#eef2f3;--th-text:#1f2c2d;--th-gradient:#eef2f3;
}
body.theme-servicenow .modal-header,
body.theme-servicenow #topnav{background:linear-gradient(90deg,#293e40 0%,#14202a 100%)}
body.theme-servicenow #topnav .tn-brand .tn-logo{color:#81b5a1}

/* ---- Workday ---- */
body.theme-workday{
  --primary:#f38b00;--primary-dark:#b86800;--primary-light:#fef4e6;--accent:#0086bf;
  --shell-bg:#363c42;--shell-hover:#4a5058;--shell-active:#5d646c;
  --success:#5d9f2d;--danger:#c0392b;--warning:#f38b00;
  --bg:#f5f5f5;--bg2:#ffffff;--bg3:#efefef;
  --text:#222222;--text2:#6b6b6b;
  --border:#e0e0e0;--border2:#cfcfcf;--hover:#fef4e6;
  --th-bg:#efefef;--th-text:#222222;--th-gradient:#efefef;
}
body.theme-workday .modal-header,
body.theme-workday #topnav{background:linear-gradient(90deg,#363c42 0%,#1f2326 100%)}
body.theme-workday #topnav .tn-brand .tn-logo{color:#f38b00}

/* ---- NetSuite ---- */
body.theme-netsuite{
  --primary:#125687;--primary-dark:#0a3d60;--primary-light:#e4ecf3;--accent:#ff7f00;
  --shell-bg:#125687;--shell-hover:#1a6fa8;--shell-active:#2388c9;
  --success:#2e7d32;--danger:#c62828;--warning:#ff7f00;
  --bg:#f5f5f5;--bg2:#ffffff;--bg3:#ebeef1;
  --text:#212121;--text2:#616161;
  --border:#e0e0e0;--border2:#bdbdbd;--hover:#e4ecf3;
  --th-bg:#ebeef1;--th-text:#212121;--th-gradient:#ebeef1;
}
body.theme-netsuite .modal-header,
body.theme-netsuite #topnav{background:linear-gradient(90deg,#125687 0%,#0a2540 100%)}

/* ---- Odoo ---- */
body.theme-odoo{
  --primary:#714b67;--primary-dark:#4c2f45;--primary-light:#f1e9ee;--accent:#00a09d;
  --shell-bg:#714b67;--shell-hover:#8a5f7e;--shell-active:#a07495;
  --success:#00a09d;--danger:#d9534f;--warning:#f0ad4e;
  --bg:#f9f9f9;--bg2:#ffffff;--bg3:#f0eeee;
  --text:#212529;--text2:#6c757d;
  --border:#e6e6e6;--border2:#ced4da;--hover:#f1e9ee;
  --th-bg:#f0eeee;--th-text:#212529;--th-gradient:#f0eeee;
}
body.theme-odoo .modal-header,
body.theme-odoo #topnav{background:linear-gradient(90deg,#714b67 0%,#4c2f45 100%)}

/* ---- IBM Carbon ---- */
body.theme-ibm-carbon{
  --primary:#0f62fe;--primary-dark:#0043ce;--primary-light:#edf5ff;--accent:#4589ff;
  --shell-bg:#161616;--shell-hover:#262626;--shell-active:#393939;
  --success:#24a148;--danger:#da1e28;--warning:#f1c21b;
  --bg:#f4f4f4;--bg2:#ffffff;--bg3:#e0e0e0;
  --text:#161616;--text2:#525252;
  --border:#e0e0e0;--border2:#c6c6c6;--hover:#edf5ff;
  --th-bg:#e0e0e0;--th-text:#161616;--th-gradient:#e0e0e0;
}
body.theme-ibm-carbon .modal-header,
body.theme-ibm-carbon #topnav{background:linear-gradient(90deg,#161616 0%,#0f62fe 100%)}

/* ---- Atlassian Jira ---- */
body.theme-atlassian{
  --primary:#0052cc;--primary-dark:#0747a6;--primary-light:#deebff;--accent:#2684ff;
  --shell-bg:#0747a6;--shell-hover:#0052cc;--shell-active:#2684ff;
  --success:#00875a;--danger:#de350b;--warning:#ff8b00;
  --bg:#f4f5f7;--bg2:#ffffff;--bg3:#ebecf0;
  --text:#172b4d;--text2:#5e6c84;
  --border:#dfe1e6;--border2:#c1c7d0;--hover:#deebff;
  --th-bg:#f4f5f7;--th-text:#172b4d;--th-gradient:#f4f5f7;
}
body.theme-atlassian .modal-header,
body.theme-atlassian #topnav{background:linear-gradient(90deg,#0052cc 0%,#0747a6 100%)}

/* ---- HubSpot ---- */
body.theme-hubspot{
  --primary:#ff7a59;--primary-dark:#e05c3e;--primary-light:#ffece5;--accent:#33475b;
  --shell-bg:#2d3e50;--shell-hover:#425061;--shell-active:#516278;
  --success:#00bda5;--danger:#f2545b;--warning:#ffb400;
  --bg:#f5f8fa;--bg2:#ffffff;--bg3:#eaf0f6;
  --text:#33475b;--text2:#516f90;
  --border:#dfe3eb;--border2:#cbd6e2;--hover:#ffece5;
  --th-bg:#eaf0f6;--th-text:#33475b;--th-gradient:#eaf0f6;
}
body.theme-hubspot .modal-header,
body.theme-hubspot #topnav{background:linear-gradient(90deg,#2d3e50 0%,#1f2d3d 100%)}
body.theme-hubspot #topnav .tn-brand .tn-logo{color:#ff7a59}

/* ---- Monday.com ---- */
body.theme-monday{
  --primary:#0073ea;--primary-dark:#0060b9;--primary-light:#e6f1fc;--accent:#a25ddc;
  --shell-bg:#292f4c;--shell-hover:#363d63;--shell-active:#434b7b;
  --success:#00c875;--danger:#e2445c;--warning:#ffcb00;
  --bg:#f6f7fb;--bg2:#ffffff;--bg3:#eaeaf7;
  --text:#323338;--text2:#676879;
  --border:#e6e9ef;--border2:#c4c7d4;--hover:#e6f1fc;
  --th-bg:#eaeaf7;--th-text:#323338;--th-gradient:#eaeaf7;
}
body.theme-monday .modal-header,
body.theme-monday #topnav{background:linear-gradient(90deg,#292f4c 0%,#1a1e31 100%)}
body.theme-monday #topnav .tn-brand .tn-logo{color:#a25ddc}

/* ---- Shopify Polaris ---- */
body.theme-shopify{
  --primary:#008060;--primary-dark:#005e46;--primary-light:#e3f1df;--accent:#95bf47;
  --shell-bg:#1a1a1a;--shell-hover:#2c2c2c;--shell-active:#3d3d3d;
  --success:#008060;--danger:#d82c0d;--warning:#b98900;
  --bg:#f6f6f7;--bg2:#ffffff;--bg3:#f1f1f2;
  --text:#202223;--text2:#6d7175;
  --border:#e4e5e7;--border2:#c9cccf;--hover:#e3f1df;
  --th-bg:#f1f1f2;--th-text:#202223;--th-gradient:#f1f1f2;
}
body.theme-shopify .modal-header,
body.theme-shopify #topnav{background:linear-gradient(90deg,#1a1a1a 0%,#004c3f 100%)}
body.theme-shopify #topnav .tn-brand .tn-logo{color:#95bf47}

/* ---- Google Material Design ---- */
body.theme-material{
  --primary:#1976d2;--primary-dark:#0d47a1;--primary-light:#e3f2fd;--accent:#ff4081;
  --shell-bg:#1976d2;--shell-hover:#1565c0;--shell-active:#0d47a1;
  --success:#2e7d32;--danger:#d32f2f;--warning:#ed6c02;
  --bg:#fafafa;--bg2:#ffffff;--bg3:#f5f5f5;
  --text:#212121;--text2:#757575;
  --border:#e0e0e0;--border2:#bdbdbd;--hover:#e3f2fd;
  --th-bg:#f5f5f5;--th-text:#212121;--th-gradient:#f5f5f5;
}
body.theme-material .modal-header,
body.theme-material #topnav{background:linear-gradient(90deg,#1976d2 0%,#0d47a1 100%)}

/* ---- Ant Design (Alibaba) ---- */
body.theme-ant{
  --primary:#1890ff;--primary-dark:#096dd9;--primary-light:#e6f7ff;--accent:#13c2c2;
  --shell-bg:#001529;--shell-hover:#002140;--shell-active:#003a8c;
  --success:#52c41a;--danger:#ff4d4f;--warning:#faad14;
  --bg:#f0f2f5;--bg2:#ffffff;--bg3:#fafafa;
  --text:#000000d9;--text2:#00000073;
  --border:#f0f0f0;--border2:#d9d9d9;--hover:#e6f7ff;
  --th-bg:#fafafa;--th-text:#000000d9;--th-gradient:#fafafa;
}
body.theme-ant .modal-header,
body.theme-ant #topnav{background:linear-gradient(90deg,#001529 0%,#002140 100%)}

/* ---- GitHub Primer ---- */
body.theme-github{
  --primary:#0969da;--primary-dark:#0550ae;--primary-light:#ddf4ff;--accent:#1f883d;
  --shell-bg:#24292f;--shell-hover:#32383f;--shell-active:#44474e;
  --success:#1a7f37;--danger:#cf222e;--warning:#9a6700;
  --bg:#f6f8fa;--bg2:#ffffff;--bg3:#eaeef2;
  --text:#24292f;--text2:#57606a;
  --border:#d0d7de;--border2:#afb8c1;--hover:#ddf4ff;
  --th-bg:#f6f8fa;--th-text:#24292f;--th-gradient:#f6f8fa;
}
body.theme-github .modal-header,
body.theme-github #topnav{background:linear-gradient(90deg,#24292f 0%,#0d1117 100%)}

/* ---- Linear ---- */
body.theme-linear{
  --primary:#5e6ad2;--primary-dark:#4754b0;--primary-light:#eef0ff;--accent:#a7abf4;
  --shell-bg:#1c1c1c;--shell-hover:#2a2a2a;--shell-active:#3a3a3a;
  --success:#26b5a6;--danger:#e5484d;--warning:#f5a524;
  --bg:#fafafa;--bg2:#ffffff;--bg3:#f4f4f5;
  --text:#0e0e13;--text2:#6f7177;
  --border:#e8e8e9;--border2:#c8c8cd;--hover:#eef0ff;
  --th-bg:#f4f4f5;--th-text:#0e0e13;--th-gradient:#f4f4f5;
}
body.theme-linear .modal-header,
body.theme-linear #topnav{background:linear-gradient(90deg,#1c1c1c 0%,#0d0d0d 100%)}
body.theme-linear #topnav .tn-brand .tn-logo{color:#a7abf4}

/* ---- Vercel / Geist (monochrome) ---- */
body.theme-vercel{
  --primary:#000000;--primary-dark:#000000;--primary-light:#f4f4f5;--accent:#666666;
  --shell-bg:#000000;--shell-hover:#1a1a1a;--shell-active:#2a2a2a;
  --success:#0070f3;--danger:#ee0000;--warning:#f5a623;
  --bg:#fafafa;--bg2:#ffffff;--bg3:#f4f4f5;
  --text:#000000;--text2:#666666;
  --border:#eaeaea;--border2:#cccccc;--hover:#f4f4f5;
  --th-bg:#fafafa;--th-text:#000000;--th-gradient:#fafafa;
}
body.theme-vercel .modal-header,
body.theme-vercel #topnav{background:linear-gradient(90deg,#000000 0%,#000000 100%)}

/* ---- Slack Aubergine ---- */
body.theme-slack{
  --primary:#611f69;--primary-dark:#4a154b;--primary-light:#f4ecf4;--accent:#ecb22e;
  --shell-bg:#3f0e40;--shell-hover:#4a154b;--shell-active:#611f69;
  --success:#007a5a;--danger:#e01e5a;--warning:#ecb22e;
  --bg:#f8f8f8;--bg2:#ffffff;--bg3:#f4ecf4;
  --text:#1d1c1d;--text2:#616061;
  --border:#e8e8e8;--border2:#d1d1d1;--hover:#f4ecf4;
  --th-bg:#f4ecf4;--th-text:#1d1c1d;--th-gradient:#f4ecf4;
}
body.theme-slack .modal-header,
body.theme-slack #topnav{background:linear-gradient(90deg,#4a154b 0%,#3f0e40 100%)}
body.theme-slack #topnav .tn-brand .tn-logo{color:#ecb22e}

/* ---- Notion (minimal) ---- */
body.theme-notion{
  --primary:#2e2e2e;--primary-dark:#1a1a1a;--primary-light:#efefef;--accent:#787774;
  --shell-bg:#ffffff;--shell-hover:#f7f6f3;--shell-active:#efeeec;
  --success:#448361;--danger:#d44c47;--warning:#cb912f;
  --bg:#ffffff;--bg2:#ffffff;--bg3:#f7f6f3;
  --text:#37352f;--text2:#787774;
  --border:#e9e9e7;--border2:#d3d1cb;--hover:#efefef;
  --th-bg:#f7f6f3;--th-text:#37352f;--th-gradient:#f7f6f3;
}
body.theme-notion .topnav,
body.theme-notion #topnav{background:#ffffff!important;color:#37352f;border-bottom:1px solid #e9e9e7}
body.theme-notion #topnav .tn-brand{color:#37352f;border-right-color:#e9e9e7}
body.theme-notion #topnav .tn-right{border-left-color:#e9e9e7}
body.theme-notion #topnav .tn-group-btn{color:#787774}
body.theme-notion #topnav .tn-group-btn:hover{color:#37352f;background:#f7f6f3}
body.theme-notion #topnav .tn-group.active>.tn-group-btn,body.theme-notion #topnav .tn-group.open>.tn-group-btn{color:#37352f;background:#efefef}
body.theme-notion #topnav .tn-user-name{color:#37352f}
body.theme-notion #topnav .tn-user{color:#787774}
body.theme-notion #topnav .tn-btn{color:#787774}
body.theme-notion #topnav .tn-btn:hover{background:#efefef;color:#37352f}
body.theme-notion .modal-header{background:#f7f6f3;color:#37352f;border-bottom:1px solid #e9e9e7}
body.theme-notion .modal-header h2,body.theme-notion .modal-close{color:#37352f}
body.theme-notion .modal-header .mh-icon{background:#e9e9e7;color:#37352f}

/* Grid sort — headers clickable, indicator on right */
th.gs-sortable{user-select:none;transition:background .12s,color .12s}
th.gs-sortable:hover{background:var(--hover) !important;color:var(--primary) !important}
th.gs-sortable .gs-indicator{display:inline-block;margin-left:4px;font-size:10px;vertical-align:middle;transition:opacity .12s,color .12s}