/* ═══════════════════════════════════════════════════════════════════════════
   /shared.css — Base styles shared across all itstamed apps
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --accent:      #A7F432;
  --accent-dark: #8fd42a;
  --brand-dark:  #111827;
  --brand-bg:    #f8fafc;
  --border:      #e2e8f0;
  --text:        #0f172a;
  --text2:       #475569;
  --text3:       #94a3b8;
  --red:         #dc2626;
  --red-bg:      #fef2f2;
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; color: var(--text); -webkit-font-smoothing: antialiased;
}

/* ── Login page ─────────────────────────────────────────────────────────── */
.it-login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
}
.it-login-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  border-radius: 18px; padding: 44px 40px;
  width: 100%; max-width: 400px;
}
.it-brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: 32px;
}
.it-brand-mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--accent); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.it-brand-mark span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand-dark); display: block;
}
.it-brand-name {
  font-size: 19px; font-weight: 700; color: #fff; line-height: 1; user-select: none;
}
.it-brand-name b { color: var(--accent); }

.it-login-title { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.it-login-sub   { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 26px; }

.it-form-group  { margin-bottom: 16px; }
.it-form-label  { display: block; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.it-form-input  {
  width: 100%; padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  font-size: 14px; color: #f1f5f9; font-family: inherit;
  background: rgba(255,255,255,.06); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.it-form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(167,244,50,.15);
}
.it-form-input::placeholder { color: rgba(255,255,255,.2); }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset;
  -webkit-text-fill-color: #f1f5f9;
}

.it-login-btn {
  width: 100%; padding: 12px; margin-top: 8px;
  background: var(--accent); color: var(--brand-dark);
  border: none; border-radius: 9px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.it-login-btn:hover { background: var(--accent-dark); }

.it-login-error {
  background: rgba(220,38,38,.1); color: #fca5a5;
  border: 1px solid rgba(220,38,38,.2); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; margin-bottom: 16px; display: none;
}
.it-login-error.show { display: block; }

/* ── Shared top nav (dashboard + dropdown in sub-apps) ──────────────────── */
.it-nav {
  height: 56px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px;
  position: sticky; top: 0; z-index: 50;
}
.it-nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0; margin-right: 8px;
}
.it-nav-brand-mark {
  width: 28px; height: 28px; border-radius: 7px; background: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.it-nav-brand-mark span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: block;
}
.it-nav-brand-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; user-select: none;
}
.it-nav-brand-name b { color: var(--accent); font-weight: 700; }

/* App switcher dropdown */
.it-app-switcher {
  position: relative; margin-right: 4px; flex-shrink: 0;
}
.it-app-switcher-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #f9fafb; font-family: inherit;
  font-size: 13px; font-weight: 600; color: #111827;
  transition: all .12s; white-space: nowrap;
}
.it-app-switcher-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.it-app-switcher-btn .chevron {
  width: 14px; height: 14px; color: var(--text3); transition: transform .15s; flex-shrink: 0;
}
.it-app-switcher.open .it-app-switcher-btn { background: #f1f5f9; border-color: var(--border); }
.it-app-switcher.open .chevron { transform: rotate(180deg); }

.it-app-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  min-width: 220px; padding: 6px; z-index: 9999;
  display: none; pointer-events: none; opacity: 0;
  transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.it-app-switcher.open .it-app-dropdown {
  display: block; pointer-events: auto; opacity: 1; transform: translateY(0);
}

.it-app-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  text-decoration: none; transition: background .1s;
  color: var(--text); font-size: 13px; font-weight: 500; border: none;
  background: none; width: 100%; text-align: left; font-family: inherit;
}
.it-app-dd-item:hover { background: #f8fafc; }
.it-app-dd-item.active { background: rgba(167,244,50,.1); color: var(--brand-dark); }
.it-app-dd-item .item-icon {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-dark);
}
.it-app-dd-item .item-icon svg { width: 14px; height: 14px; color: #fff; }
.it-app-dd-item.active .item-icon { background: var(--accent); }
.it-app-dd-item.active .item-icon svg { color: var(--brand-dark); }
.it-app-dd-meta { flex: 1; }
.it-app-dd-label { font-size: 13px; font-weight: 600; color: inherit; line-height: 1.2; }
.it-app-dd-sub   { font-size: 11px; color: var(--text3); margin-top: 1px; }
.it-app-dd-check { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.it-app-dd-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Nav right side */
.it-nav-right {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
}
.it-nav-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; border: none;
  background: none; color: var(--text3); cursor: pointer;
  transition: all .12s; text-decoration: none;
}
.it-nav-icon-btn:hover { background: #f1f5f9; color: var(--text2); }
.it-nav-icon-btn.active-page { background: #f1f5f9; color: var(--text); }

/* ── User dropdown ───────────────────────────────────────────────────────── */
.it-user-dropdown {
  position: relative;
  flex-shrink: 0;
}
.it-user-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #e2e8f0; border-radius: 20px;
  background: #fff; cursor: pointer; font-family: inherit;
  transition: background .1s, border-color .1s;
  white-space: nowrap;
}
.it-user-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.it-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #4f46e5; /* overridden inline per user */
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.it-user-name {
  font-size: 12px; font-weight: 600; color: #374151;
  max-width: 100px; overflow: hidden; text-overflow: ellipsis;
}
.it-user-chevron {
  width: 12px; height: 12px; color: #9ca3af;
  transition: transform .15s;
}
.it-user-dropdown.open .it-user-chevron { transform: rotate(180deg); }
.it-user-dropdown.open .it-user-btn { background: #f8fafc; border-color: #cbd5e1; }

.it-user-dd {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06);
  z-index: 200; overflow: hidden;
}
.it-user-dropdown.open .it-user-dd { display: block; }

.it-user-dd-header {
  padding: 12px 14px 10px;
}
.it-user-dd-name  { font-size: 13px; font-weight: 700; color: #111827; }
.it-user-dd-role  { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.it-user-dd-divider { height: 1px; background: #f3f4f6; margin: 0; }

.it-user-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; font-size: 13px; color: #374151;
  font-weight: 500; font-family: inherit;
  background: none; border: none; width: 100%;
  text-align: left; cursor: pointer; text-decoration: none;
  transition: background .1s;
}
.it-user-dd-item:hover { background: #f9fafb; color: #111827; }
.it-user-dd-item--danger { color: #dc2626; }
.it-user-dd-item--danger:hover { background: #fef2f2; color: #dc2626; }

/* Dashboard page */
.it-dash-page {
  flex: 1; display: flex; flex-direction: column;
  background: var(--brand-bg); min-height: calc(100vh - 56px);
}
.it-dash-hero {
  padding: 60px 32px 48px; max-width: 900px; margin: 0 auto; width: 100%;
}
.it-dash-welcome {
  font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.it-dash-welcome b { color: #1a1a1a; }
.it-dash-sub { font-size: 14px; color: var(--text2); margin-bottom: 40px; }
.it-dash-apps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.it-dash-app-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 20px; text-decoration: none; display: flex; gap: 14px;
  align-items: flex-start; transition: all .15s; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.it-dash-app-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #d1d5db;
  transform: translateY(-1px);
}
.it-dash-app-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: var(--brand-dark); display: flex; align-items: center; justify-content: center;
}
.it-dash-app-icon svg { width: 20px; height: 20px; color: var(--accent); }
.it-dash-app-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.it-dash-app-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
.it-dash-app-url  { font-size: 11px; color: var(--text3); margin-top: 8px; font-family: monospace; }

/* ── Login page extras ───────────────────────────────────────────────────── */
.it-login-footer { text-align: center; margin-top: 20px; font-size: 11px; color: rgba(255,255,255,.2); }
.shake { animation: shake .4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-6px); }
  40%,80%  { transform: translateX(6px); }
}

/* ── Dashboard page ──────────────────────────────────────────────────────── */
.it-nav-links {
  display: flex; align-items: stretch; gap: 0; margin-left: 20px;
}
.it-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 56px; font-size: 13px; font-weight: 500;
  color: #6b7280; border-bottom: 2px solid transparent;
  text-decoration: none; transition: color .12s, border-color .12s; white-space: nowrap;
}
.it-nav-link:hover { color: #111827; }
.it-nav-link.active { color: #111827; border-bottom-color: #111827; font-weight: 600; }
.it-nav-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-wrap { max-width: 960px; margin: 0 auto; padding: 48px 24px; }
.dash-greeting { margin-bottom: 40px; }
.dash-greeting h1 { font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.dash-greeting p  { font-size: 14px; color: #6b7280; }
.dash-apps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin-bottom: 48px;
}
.dash-app-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 22px; display: flex; gap: 16px; align-items: flex-start;
  text-decoration: none; transition: all .15s; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dash-app-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08); border-color: #d1d5db; transform: translateY(-2px);
}
.dash-app-icon {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  background: #111827; display: flex; align-items: center; justify-content: center;
}
.dash-app-icon svg { width: 20px; height: 20px; color: #A7F432; }
.dash-app-info { flex: 1; min-width: 0; }
.dash-app-name {
  font-size: 15px; font-weight: 700; color: #0f172a;
  margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.dash-app-name .ext { font-size: 10px; color: #9ca3af; font-weight: 400; }
.dash-app-desc { font-size: 13px; color: #6b7280; line-height: 1.5; }
.dash-app-path { font-size: 11px; color: #d1d5db; margin-top: 8px; font-family: monospace; }
.dash-empty-section {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 48px 32px; text-align: center; color: #9ca3af;
}
.dash-empty-section h2 { font-size: 15px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.dash-empty-section p  { font-size: 13px; line-height: 1.6; }

    .mg-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 20px;
    }
    .mg-card {
      background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
      box-shadow: 0 1px 4px rgba(0,0,0,.05); overflow: hidden; transition: box-shadow .15s;
    }
    .mg-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    .mg-card-header {
      padding: 16px 20px 14px; display: flex; align-items: center;
      gap: 12px; border-bottom: 1px solid #f1f5f9;
    }
    .mg-colour-bar { width: 5px; border-radius: 3px; align-self: stretch; flex-shrink: 0; }
    .mg-card-title  { font-size: 15px; font-weight: 600; color: #1e293b; flex: 1; }
    .mg-total-badge { font-size: 20px; font-weight: 700; color: #1e293b; line-height: 1; }
    .mg-total-label { font-size: 11px; color: #94a3b8; margin-top: 1px; text-align: right; }
    .mg-risk-row    { padding: 14px 20px; }
    .risk-bars      { display: flex; gap: 3px; height: 6px; border-radius: 99px; overflow: hidden; }
    .risk-tiles     { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-top: 12px; }
    .risk-tile      { border-radius: 8px; padding: 8px 6px; text-align: center;
                      transition: transform .1s, box-shadow .1s; }
    .risk-tile.clickable { cursor: pointer; }
    .risk-tile.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
    .risk-tile-num  { font-size: 18px; font-weight: 700; line-height: 1; margin-bottom: 3px; }
    .risk-tile-lbl  { font-size: 9px; font-weight: 600; text-transform: uppercase;
                      letter-spacing: .04em; opacity: .75; white-space: nowrap; }
    .risk-tile-hint { font-size: 8px; opacity: 0; transition: opacity .15s; display: block; margin-top: 2px; }
    .risk-tile.clickable:hover .risk-tile-hint { opacity: .6; }
    .rt-red    { background:#fef2f2; color:#b91c1c; }
    .rt-orange { background:#fff7ed; color:#c2410c; }
    .rt-yellow { background:#fefce8; color:#854d0e; }
    .rt-green  { background:#f0fdf4; color:#15803d; }
    .rt-none   { background:#f8fafc; color:#64748b; }
    .mg-card.ungrouped .mg-card-header { background: #f8fafc; }
    .sort-bar    { display:flex; align-items:center; gap:8px; padding:12px 20px;
                   border-bottom:1px solid #f1f5f9; }
    .sort-lbl2   { font-size:11px; font-weight:600; color:#94a3b8;
                   text-transform:uppercase; letter-spacing:.05em; }
    .sort-btn    { padding:8px 12px; border-radius:8px; font-size:14px; font-weight:500;
                   border:1px solid #d1d5db; background:#fff; color:#374151;
                   cursor:pointer; transition:all .12s; }
    .sort-btn:hover  { background:#f9fafb; }
    .sort-btn.active { background:#4f46e5; color:#fff; border-color:#4f46e5; }
    .no-data { display:flex; flex-direction:column; align-items:center;
               justify-content:center; padding:80px 24px; text-align:center; }
    .no-data svg { opacity:.2; margin-bottom:16px; }

/* ─── Global filter modal ────────────────────────────────────────────────── */
.gf-modal {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.1);
  width: 80vw; max-width: 1100px;
  height: 80vh;
}
.gf-modal-header { border-color: #f1f5f9; }
.gf-title  { color: #0f172a; }
.gf-sub    { color: #94a3b8; }
.gf-btn-clear {
  color: #64748b; border-color: #e2e8f0;
  background: transparent;
}
.gf-btn-clear:hover { color: #0f172a; background: #f8fafc; }
.gf-btn-apply { background: #1e293b; }
.gf-btn-apply:hover { background: #334155; }
.gf-btn-close { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 4px; border-radius: 6px; }
.gf-btn-close:hover { color: #475569; background: #f1f5f9; }

/* Tab bar */
.gf-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid #f1f5f9;
  padding: 0 24px;
  background: #f8fafc;
  overflow-x: auto;
}
.gf-tab {
  padding: 12px 16px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  color: #64748b;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s;
  margin-bottom: -1px;
}
.gf-tab:hover { color: #334155; }
.gf-tab.active { color: #0f172a; border-bottom-color: #3b82f6; font-weight: 600; }

/* Filter list boxes in panels */
.gf-ms-box {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden; overflow-y: auto;
  max-height: calc(80vh - 220px);
  background: #fff;
}

/* ─── Date input — shared across all pages ──────────────────────────────── */
/* !important overrides Tailwind CDN's dynamically injected preflight reset  */
input.it-date {
  font-size: 13px !important;
  font-family: inherit !important;
  color: #111827 !important;
  background: #fff !important;
  border: 1.5px solid #c7d2fe !important; /* indigo-200 resting border */
  border-radius: 8px !important;
  padding: 6px 10px !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
input.it-date:hover:not(:focus) {
  border-color: #818cf8 !important; /* indigo-400 */
}
input.it-date:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
}
input.it-date::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  filter: invert(39%) sepia(57%) saturate(800%) hue-rotate(213deg) brightness(100%);
  transition: opacity 0.12s;
}
input.it-date:hover::-webkit-calendar-picker-indicator,
input.it-date:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}
/* Compact — toolbars / control bars */
input.it-date.it-date-sm {
  padding: 5px 8px !important;
  font-size: 13px !important;
}
/* Form — full width, taller to match text inputs */
input.it-date.it-date-form {
  padding: 8px 12px !important;
  font-size: 14px !important;
  width: 100% !important;
}
/* Readonly / auto-calculated — dashed border, muted */
input.it-date.it-date-readonly {
  background: #f9fafb !important;
  color: #6b7280 !important;
  cursor: default !important;
  border-style: dashed !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark theme — activated by html.dark (toggled via user dropdown)
   Palette: Tailwind UI dark + blue-500 (#3b82f6) accents
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark {
  color-scheme: dark;

  /* ── Palette tokens ─────────────────────────────────────────────────────── */
  --dt-bg:        #0f172a;             /* slate-900  — page background        */
  --dt-nav:       #111827;             /* gray-900   — nav / header bar        */
  --dt-surface:   #1e293b;             /* slate-800  — cards & panels          */
  --dt-surface2:  #293548;             /* mid-dark   — elevated / hover        */
  --dt-border:    rgba(255,255,255,.08);
  --dt-text:      #f1f5f9;             /* slate-100  — primary text            */
  --dt-text2:     #94a3b8;             /* slate-400  — secondary text          */
  --dt-text3:     #64748b;             /* slate-500  — muted / placeholder     */
  --dt-blue:      #3b82f6;             /* blue-500   — accent                  */
  --dt-blue-lt:   #60a5fa;             /* blue-400   — accent on dark bg       */
  --dt-blue-ring: rgba(59,130,246,.25);
  --dt-indigo:    #6366f1;             /* indigo-500 — alternate accent        */
  --dt-red:       #fca5a5;
  --dt-red-bg:    rgba(220,38,38,.15);
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
html.dark body {
  background: var(--dt-bg);
  color: var(--dt-text);
}

/* ── Nav bars ──────────────────────────────────────────────────────────────── */
html.dark .it-nav {
  background: var(--dt-surface);
  border-color: var(--dt-border);
}
html.dark header {
  background: var(--dt-surface);
  border-color: var(--dt-border);
}
html.dark #page-header-slot {
  background: var(--dt-nav);
  border-color: var(--dt-border);
}
html.dark #page-header-slot h1 { color: var(--dt-text); }
html.dark #page-header-slot p  { color: var(--dt-text2); }

/* Nav brand */
html.dark .it-nav-brand-name { color: var(--dt-text); }

/* Nav tab links (sub-app pages) */
html.dark header nav a {
  color: var(--dt-text3);
  border-bottom-color: transparent;
}
html.dark header nav a:hover { color: var(--dt-text2); }
html.dark header nav a[aria-current="page"] {
  color: var(--dt-blue-lt);
  border-bottom-color: var(--dt-blue);
}

/* Nav icon buttons */
html.dark .it-nav-icon-btn { color: var(--dt-text3); }
html.dark .it-nav-icon-btn:hover {
  background: rgba(255,255,255,.07);
  color: var(--dt-text2);
}
html.dark .it-nav-link { color: var(--dt-text3); }
html.dark .it-nav-link:hover { color: var(--dt-text2); }
html.dark .it-nav-link.active {
  color: var(--dt-text);
  border-bottom-color: var(--dt-blue);
}

/* ── App switcher ──────────────────────────────────────────────────────────── */
html.dark .it-app-switcher-btn {
  background: var(--dt-surface2);
  border-color: rgba(255,255,255,.12);
  color: var(--dt-text);
}
html.dark .it-app-switcher-btn:hover {
  background: #334155;
  border-color: rgba(255,255,255,.18);
}
html.dark .it-app-switcher.open .it-app-switcher-btn {
  background: #334155;
  border-color: rgba(255,255,255,.18);
}
html.dark .it-app-dropdown {
  background: var(--dt-surface);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);
}
html.dark .it-app-dd-item         { color: var(--dt-text2); }
html.dark .it-app-dd-item:hover   { background: rgba(255,255,255,.06); color: var(--dt-text); }
html.dark .it-app-dd-item.active  {
  background: rgba(59,130,246,.15);
  color: var(--dt-blue-lt);
}
html.dark .it-app-dd-label        { color: inherit; }
html.dark .it-app-dd-sub          { color: var(--dt-text3); }
html.dark .it-app-dd-divider      { background: rgba(255,255,255,.06); }

/* ── User dropdown ─────────────────────────────────────────────────────────── */
html.dark .it-user-btn {
  background: var(--dt-surface2);
  border-color: rgba(255,255,255,.12);
}
html.dark .it-user-btn:hover {
  background: #334155;
  border-color: rgba(255,255,255,.18);
}
html.dark .it-user-dropdown.open .it-user-btn {
  background: #334155;
  border-color: rgba(255,255,255,.18);
}
html.dark .it-user-name    { color: var(--dt-text2); }
html.dark .it-user-chevron { color: var(--dt-text3); }
html.dark .it-user-dd {
  background: var(--dt-surface);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.3);
}
html.dark .it-user-dd-name       { color: var(--dt-text); }
html.dark .it-user-dd-role       { color: var(--dt-text3); }
html.dark .it-user-dd-divider    { background: rgba(255,255,255,.06); }
html.dark .it-user-dd-item       { color: var(--dt-text2); }
html.dark .it-user-dd-item:hover { background: rgba(255,255,255,.06); color: var(--dt-text); }
html.dark .it-user-dd-item--danger       { color: var(--dt-red); }
html.dark .it-user-dd-item--danger:hover { background: var(--dt-red-bg); color: var(--dt-red); }

/* ── Main content — structural overrides ───────────────────────────────────── */
html.dark main { color: var(--dt-text); }

/* White surfaces → dark card */
html.dark main .bg-white,
html.dark main [class*="bg-white"] { background-color: var(--dt-surface) !important; }

/* Gray tinted surfaces */
html.dark main .bg-gray-50,
html.dark main .bg-slate-50  { background-color: #162032 !important; }
html.dark main .bg-gray-100  { background-color: var(--dt-bg) !important; }

/* Borders */
html.dark main .border-gray-200,
html.dark main .border-gray-300,
html.dark main .border-slate-100,
html.dark main .border-slate-200 { border-color: var(--dt-border) !important; }
html.dark main .divide-y > *,
html.dark main .divide-gray-200 > *,
html.dark main .divide-gray-100 > *,
html.dark main .divide-slate-100 > * { border-color: var(--dt-border) !important; }
html.dark main .outline { outline-color: rgba(255,255,255,.05) !important; }

/* Text */
html.dark main .text-gray-900,
html.dark main .text-gray-800,
html.dark main .text-slate-900,
html.dark main .text-slate-800 { color: var(--dt-text)  !important; }
html.dark main .text-gray-700,
html.dark main .text-slate-700 { color: #cbd5e1          !important; }
html.dark main .text-gray-600,
html.dark main .text-gray-500,
html.dark main .text-slate-600,
html.dark main .text-slate-500 { color: var(--dt-text2) !important; }
html.dark main .text-gray-400,
html.dark main .text-slate-400 { color: var(--dt-text3) !important; }
html.dark main .text-gray-300,
html.dark main .text-slate-300 { color: #475569          !important; }

/* Hover surfaces in main */
html.dark main .hover\:bg-gray-50:hover,
html.dark main .hover\:bg-slate-50:hover  { background-color: rgba(255,255,255,.04) !important; }
html.dark main .hover\:bg-gray-100:hover  { background-color: rgba(255,255,255,.07) !important; }

/* Input fields in main */
html.dark main input[type="text"],
html.dark main input[type="search"],
html.dark main input[type="date"],
html.dark main select,
html.dark main textarea {
  background: var(--dt-surface2) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--dt-text) !important;
}
html.dark main input::placeholder { color: var(--dt-text3) !important; }
html.dark main input:focus,
html.dark main select:focus {
  border-color: var(--dt-blue) !important;
  box-shadow: 0 0 0 3px var(--dt-blue-ring) !important;
  outline: none !important;
}

/* Buttons with border (ghost style) in main */
html.dark main .border-gray-300 { border-color: rgba(255,255,255,.12) !important; }

/* ── Sort bar & module group components ────────────────────────────────────── */
html.dark .sort-bar   { border-color: var(--dt-border); background: var(--dt-surface); }
html.dark .sort-btn {
  background: var(--dt-surface2);
  border-color: rgba(255,255,255,.1);
  color: var(--dt-text2);
}
html.dark .sort-btn:hover  { background: #334155; color: var(--dt-text); }
html.dark .sort-btn.active { background: var(--dt-blue); border-color: var(--dt-blue); color: #fff; }
html.dark .sort-lbl2       { color: var(--dt-text3); }

html.dark .mg-card       { background: var(--dt-surface); border-color: var(--dt-border); }
html.dark .mg-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.4); }
html.dark .mg-card-header { border-color: rgba(255,255,255,.06); }
html.dark .mg-card-title, html.dark .mg-total-badge { color: var(--dt-text); }
html.dark .mg-total-label { color: var(--dt-text3); }
html.dark .mg-card.ungrouped .mg-card-header { background: #162032; }

/* Risk tiles — dark tinted */
html.dark .rt-red    { background: rgba(185,28,28,.25);  color: #fca5a5; }
html.dark .rt-orange { background: rgba(194,65,12,.25);  color: #fdba74; }
html.dark .rt-yellow { background: rgba(133,77,14,.25);  color: #fde047; }
html.dark .rt-green  { background: rgba(21,128,61,.25);  color: #86efac; }
html.dark .rt-none   { background: rgba(100,116,139,.2); color: #94a3b8; }

/* ── Date inputs (dark overrides for !important rules) ─────────────────────── */
html.dark input.it-date {
  background: var(--dt-surface2) !important;
  border-color: rgba(99,102,241,.35) !important;
  color: var(--dt-text) !important;
}
html.dark input.it-date:hover:not(:focus) {
  border-color: rgba(99,102,241,.55) !important;
}
html.dark input.it-date:focus {
  border-color: var(--dt-blue) !important;
  box-shadow: 0 0 0 3px var(--dt-blue-ring) !important;
}
html.dark input.it-date::-webkit-calendar-picker-indicator {
  filter: invert(.7) !important;
  opacity: .7 !important;
}
html.dark input.it-date.it-date-readonly {
  background: #162032 !important;
  color: var(--dt-text3) !important;
}

/* ── Dashboard page (main dashboard.html) ──────────────────────────────────── */
html.dark .it-dash-page  { background: var(--dt-bg); }
html.dark .dash-wrap     { background: transparent; }
html.dark .it-dash-welcome, html.dark .it-dash-welcome b { color: var(--dt-text); }
html.dark .it-dash-sub   { color: var(--dt-text2); }
html.dark .dash-greeting h1 { color: var(--dt-text); }
html.dark .dash-greeting p  { color: var(--dt-text2); }

html.dark .it-dash-app-card,
html.dark .dash-app-card {
  background: var(--dt-surface);
  border-color: var(--dt-border);
  box-shadow: none;
}
html.dark .it-dash-app-card:hover,
html.dark .dash-app-card:hover {
  background: var(--dt-surface2);
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  transform: translateY(-1px);
}
html.dark .it-dash-app-name,
html.dark .dash-app-name { color: var(--dt-text); }
html.dark .it-dash-app-desc,
html.dark .dash-app-desc { color: var(--dt-text2); }
html.dark .it-dash-app-url,
html.dark .dash-app-path { color: var(--dt-text3); }
html.dark .it-dash-app-icon { background: #1e3a5f; }
html.dark .it-dash-app-icon svg { color: var(--dt-blue-lt); }

/* ── Admin user table ──────────────────────────────────────────────────────── */
html.dark .u-table th {
  background: #162032;
  color: var(--dt-text3);
  border-color: var(--dt-border);
}
html.dark .u-table td     { border-color: rgba(255,255,255,.05); }
html.dark .u-table tr:hover td { background: rgba(255,255,255,.03); }

/* ── No-data states ────────────────────────────────────────────────────────── */
html.dark .no-data svg { opacity: .15; }

/* ── Indigo/blue accent buttons (keep readable in dark) ────────────────────── */
html.dark .bg-indigo-600  { background-color: var(--dt-blue) !important; }
html.dark .hover\:bg-indigo-500:hover { background-color: #2563eb !important; }
html.dark .text-indigo-600 { color: var(--dt-blue-lt) !important; }

/* ── Global filter modal — dark mode ───────────────────────────────────────── */
html.dark .gf-modal {
  background: var(--dt-surface);
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4);
}
html.dark .gf-modal-header { border-color: var(--dt-border); }
html.dark .gf-title  { color: var(--dt-text); }
html.dark .gf-sub    { color: var(--dt-text3); }
html.dark .gf-btn-clear { color: var(--dt-text2); border-color: rgba(255,255,255,.12); }
html.dark .gf-btn-clear:hover { color: var(--dt-text); background: rgba(255,255,255,.06); }
html.dark .gf-btn-apply { background: var(--dt-blue); }
html.dark .gf-btn-apply:hover { background: #2563eb; }
html.dark .gf-btn-close { color: var(--dt-text3); }
html.dark .gf-btn-close:hover { color: var(--dt-text2); background: rgba(255,255,255,.07); }

html.dark .gf-tabs { background: #162032; border-color: var(--dt-border); }
html.dark .gf-tab         { color: var(--dt-text3); }
html.dark .gf-tab:hover   { color: var(--dt-text2); }
html.dark .gf-tab.active  { color: var(--dt-text); border-bottom-color: var(--dt-blue); }

html.dark .gf-panel-wrap  { background: var(--dt-surface); }
html.dark .gf-panel .text-slate-400 { color: var(--dt-text3) !important; }

html.dark .gf-ms-box {
  background: var(--dt-surface2);
  border-color: rgba(255,255,255,.08);
}
/* Filter list items */
html.dark .ms-item {
  color: var(--dt-text2) !important;
  border-color: rgba(255,255,255,.05) !important;
}
html.dark .ms-item:hover,
html.dark .ms-item.hover\:bg-slate-50:hover { background: rgba(255,255,255,.06) !important; }
html.dark .ms-item.bg-blue-50 {
  background: rgba(59,130,246,.18) !important;
  color: var(--dt-blue-lt) !important;
}

/* ── Table toolbar — dark mode ─────────────────────────────────────────────── */
html.dark main .border-b.border-gray-200,
html.dark main .border-b.border-slate-100 { border-color: var(--dt-border) !important; }

/* Toolbar ghost buttons (Wrap, Columns) */
html.dark main .border-gray-300.bg-white.text-gray-700 {
  background: var(--dt-surface2) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--dt-text2) !important;
}
html.dark main .border-gray-300.bg-white.text-gray-700:hover {
  background: #334155 !important;
  color: var(--dt-text) !important;
}
/* Active wrap state still uses indigo — keep it, just ensure it reads well */
html.dark main button.bg-indigo-50 {
  background: rgba(99,102,241,.18) !important;
  border-color: rgba(99,102,241,.4) !important;
  color: #a5b4fc !important;
}

/* Toolbar search input — in main OR page-header-slot */
html.dark main input#search,
html.dark #page-header-slot input#search {
  background: var(--dt-surface2) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--dt-text) !important;
}
html.dark main input#search::placeholder,
html.dark #page-header-slot input#search::placeholder { color: var(--dt-text3) !important; }
html.dark main input#search:focus,
html.dark #page-header-slot input#search:focus {
  border-color: rgba(99,102,241,.5) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.15) !important;
}

/* Toolbar risk-filter select — in main OR page-header-slot */
html.dark main select#risk-filter,
html.dark #page-header-slot select#risk-filter {
  background: var(--dt-surface2) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--dt-text) !important;
}
html.dark main select#risk-filter:focus,
html.dark #page-header-slot select#risk-filter:focus {
  border-color: rgba(99,102,241,.5) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.15) !important;
}
html.dark main select#risk-filter option,
html.dark #page-header-slot select#risk-filter option {
  background: var(--dt-surface2);
  color: var(--dt-text);
}

/* Toolbar sub-label text */
html.dark main p.text-gray-500,
html.dark main span.text-gray-500 { color: var(--dt-text3) !important; }

/* ── Column filter panel — dark mode ───────────────────────────────────────── */
html.dark #col-panel {
  background: var(--dt-surface) !important;
  border-color: var(--dt-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3) !important;
}
/* Header row border + text */
html.dark #col-panel [class*="border-b"] {
  border-color: var(--dt-border) !important;
}
html.dark #col-panel [class*="text-slate-700"],
html.dark #col-panel [class*="text-gray-700"]  { color: var(--dt-text)  !important; }
html.dark #col-panel [class*="text-slate-400"],
html.dark #col-panel [class*="text-gray-400"]  { color: var(--dt-text3) !important; }
html.dark #col-panel [class*="text-slate-600"],
html.dark #col-panel [class*="text-gray-600"]  { color: var(--dt-text2) !important; }
/* Header action buttons hover */
html.dark #col-panel [class*="hover:bg-slate-100"]:hover,
html.dark #col-panel [class*="hover:bg-gray-100"]:hover  { background: rgba(255,255,255,.09) !important; }
/* Row items */
html.dark #col-panel-list > div {
  border-color: rgba(255,255,255,.05) !important;
}
html.dark #col-panel-list > div:hover {
  background: rgba(255,255,255,.05) !important;
}

/* ── Table header bottom border — indigo accent line ───────────────────────── */
html.dark .border-indigo-200 { border-color: rgba(99,102,241,.35) !important; }

/* ── Table row hover — prevent white flash in dark mode ────────────────────── */
html.dark main tbody tr:hover td,
html.dark main tbody tr:hover th {
  background-color: rgba(255,255,255,.04) !important;
}
html.dark main thead th:hover {
  background-color: rgba(255,255,255,.06) !important;
}

/* ── Toolbar / ghost buttons with bg-white in dark mode ────────────────────── */
html.dark main button.bg-white,
html.dark header button.bg-white,
html.dark #page-header-slot button.bg-white {
  background-color: var(--dt-surface2) !important;
  color: var(--dt-text2) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.dark main button.bg-white:hover,
html.dark header button.bg-white:hover,
html.dark #page-header-slot button.bg-white:hover {
  background-color: #334155 !important;
  color: var(--dt-text) !important;
}

/* ── Segmented-control / tab buttons hover in dark mode ────────────────────── */
html.dark main button.hover\:bg-gray-50:hover,
html.dark main button.hover\:bg-slate-50:hover,
html.dark #page-header-slot button.hover\:bg-gray-50:hover,
html.dark #page-header-slot button.hover\:bg-slate-50:hover {
  background-color: rgba(255,255,255,.06) !important;
}

/* ── Generic anchor / link hover:bg overrides ──────────────────────────────── */
html.dark main tr.hover\:bg-gray-50:hover td,
html.dark main tr.hover\:bg-slate-50:hover td {
  background-color: rgba(255,255,255,.04) !important;
}
html.dark .ms-item .text-slate-400 { color: var(--dt-text3) !important; }
/* ── Module-groups customer row ─────────────────────────────────────────────── */
.mg-cust-row {
  padding: 10px 20px 14px;
  border-top: 1px solid #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mg-cust-icon { color: #94a3b8; }
.mg-cust-num  { font-size: 13px; font-weight: 600; color: #1e293b; }
.mg-cust-lbl  { font-size: 12px; color: #64748b; }
.mg-cust-btn  {
  font-size: 11px; font-weight: 500;
  color: #3b82f6; background: #eff6ff;
  border: none; border-radius: 6px;
  padding: 3px 10px; cursor: pointer;
  transition: background .12s; white-space: nowrap;
}
.mg-cust-btn:hover { background: #dbeafe; }

html.dark .mg-cust-row  { border-top-color: var(--dt-border); }
html.dark .mg-cust-icon { color: var(--dt-text3); }
html.dark .mg-cust-num  { color: var(--dt-text); }
html.dark .mg-cust-lbl  { color: var(--dt-text2); }
html.dark .mg-cust-btn  { color: var(--dt-blue-lt); background: rgba(59,130,246,.12); }
html.dark .mg-cust-btn:hover { background: rgba(59,130,246,.2); }