/* THEWATCH — application shell styles (Milestone 1)
   Builds on the marketing site's own ../../assets/styles.css (same
   --bg/--panel/--blue/--text/--muted tokens, same Orbitron/Inter
   fonts) rather than inventing a second palette — this file is
   loaded AFTER it and only adds what the dashboard shell/auth pages
   need on top: sidebar, topbar, cards, tables, status pills, forms. */

:root{
  --sidebar-w: 224px;
  --topbar-h: 60px;
  --card-radius: 10px;
  --border: rgba(255,255,255,.08);
  --surface: #0d1220;
  --surface-2: #0a0e1a;
  --danger: var(--red);
  --warn: var(--amber);
  --ok: var(--green);
  --info: var(--blue2);
}
:root[data-theme="light"]{
  --border: rgba(13,18,32,.10);
  --surface: #ffffff;
  --surface-2: #f4f6fb;
}

body.app-body{
  background: var(--bg);
  min-height: 100vh;
}

/* ---------------------------------------------------------------
   Auth pages (login, mfa, onboarding, invite-accept, ...)
   --------------------------------------------------------------- */
.auth-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card{
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 36px 32px;
}
.auth-card.wide{ max-width: 520px; }
.auth-logo{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.auth-logo img{ height:36px; width:auto; }
.auth-logo .name{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:18px; }
.auth-card h1{ font-size:22px; margin-bottom:6px; }
.auth-card .sub{ color:var(--muted); font-size:13.5px; margin-bottom:26px; line-height:1.5; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:7px; font-family:'Inter',sans-serif; font-size:14px; padding:11px 13px;
  transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--blue2); }
.field .hint{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }

.form-error{
  display:none; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35);
  color:#fca5a5; font-size:13px; padding:10px 13px; border-radius:7px; margin-bottom:18px;
}
.form-error.show{ display:block; }
.form-success{
  display:none; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35);
  color:#86efac; font-size:13px; padding:10px 13px; border-radius:7px; margin-bottom:18px;
}
.form-success.show{ display:block; }

.auth-links{ margin-top:20px; text-align:center; font-size:13px; color:var(--muted); }
.auth-links a{ color:var(--blue2); font-weight:600; }
.auth-links a:hover{ text-decoration:underline; }

.otp-input{ letter-spacing:.5em; font-size:22px; text-align:center; font-family:monospace; }

.strength-meter-track{ height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:8px; }
.strength-meter-fill{ height:100%; width:0%; transition:width .2s ease, background .2s ease; }
.strength-label{ font-size:11px; color:var(--muted); margin-top:5px; min-height:14px; }
.field-mismatch{ display:none; color:#f87171; font-size:11.5px; margin-top:6px; }

.wizard-steps{ display:flex; gap:8px; margin-bottom:26px; }
.wizard-steps .step{ flex:1; height:4px; border-radius:2px; background:var(--border); }
.wizard-steps .step.active, .wizard-steps .step.done{ background:var(--blue2); }

/* ---------------------------------------------------------------
   App shell — sidebar + topbar (everything under app/dashboard.html
   and its siblings)
   --------------------------------------------------------------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w); flex-shrink:0; background:var(--surface-2);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 18px 16px; border-bottom:1px solid var(--border); }
.sidebar-close{ display:none; margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:4px; flex-shrink:0; }
.sidebar-close:hover{ color:var(--text); }
.sidebar-brand img{ height:28px; width:auto; }
.sidebar-brand .txt{ line-height:1.15; }
.sidebar-brand .txt .name{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:14.5px; }
.sidebar-brand .txt .sub{ font-size:9px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }

.nav-group{ padding:14px 10px; }
.nav-group-label{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:6px 10px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:7px;
  font-size:13.5px; font-weight:600; color:var(--muted2); margin-bottom:2px; cursor:pointer;
}
.nav-item:hover{ background:var(--panel-line); color:var(--text); }
.nav-item.active{ background:rgba(47,111,237,.14); color:var(--text); }
.nav-item.active .dot{ background:var(--blue2); }
.nav-item .dot{ width:5px; height:5px; border-radius:50%; background:transparent; flex-shrink:0; }
.nav-item .badge-count{
  margin-left:auto; background:var(--panel-line); color:var(--muted2); font-size:10.5px;
  font-weight:700; padding:1px 7px; border-radius:999px;
}

.sidebar-footer{ margin-top:auto; padding:14px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }
.sidebar-footer .status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:6px; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height: var(--topbar-h); border-bottom:1px solid var(--border); display:flex; align-items:center;
  gap:16px; padding:0 22px; position:sticky; top:0; background:var(--bg); z-index:10;
}
.topbar-search{
  flex:1; max-width:440px; display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:7px; padding:8px 12px; color:var(--muted); font-size:13px;
}
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.topbar-icon{ position:relative; color:var(--muted2); cursor:pointer; }
.topbar-user{ position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; }
.topbar-user .avatar{
  width:32px; height:32px; border-radius:50%; background:linear-gradient(180deg,var(--blue2),var(--blue));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff;
  overflow:hidden;
}
.topbar-user .avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-lg{
  width:88px; height:88px; border-radius:50%; background:linear-gradient(180deg,var(--blue2),var(--blue));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px; color:#fff;
  overflow:hidden;
}
.avatar-lg img{ width:100%; height:100%; object-fit:cover; }
.topbar-user .who{ line-height:1.2; }
.topbar-user .who .n{ font-size:13px; font-weight:700; }
.topbar-user .who .r{ font-size:10.5px; color:var(--muted); text-transform:capitalize; }

.profile-menu{
  display:none; position:absolute; top:calc(100% + 10px); right:0; min-width:200px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:6px; box-shadow:0 12px 28px -8px rgba(0,0,0,.6); z-index:50;
}
.profile-menu.open{ display:block; }
.profile-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:9px 12px; border-radius:7px; font-size:13px; font-weight:600; color:var(--muted2);
  font-family:'Inter',sans-serif;
}
.profile-menu-item:hover{ background:var(--panel-line); color:var(--text); }
.profile-menu-item.active{ color:var(--text); background:rgba(47,111,237,.14); }
.profile-menu-divider{ height:1px; background:var(--border); margin:6px 4px; }
.profile-menu-item.logout{ color:#f87171; }
.profile-menu-item.logout:hover{ background:rgba(239,68,68,.1); }

.content{ padding:26px; flex:1; }
.content-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.content-header h1{ font-size:22px; margin-bottom:4px; }
.content-header .sub{ color:var(--muted); font-size:13.5px; }

/* ---------------------------------------------------------------
   Cards, grids, tables — shared building blocks for every real page
   built this milestone and every future "Phase 2" placeholder.
   --------------------------------------------------------------- */
.grid{ display:grid; gap:18px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-5{ grid-template-columns: repeat(5, 1fr); }
@media(max-width:1100px){ .grid-5{ grid-template-columns: repeat(3, 1fr); } }
@media(max-width:900px){ .grid-3, .grid-4, .grid-5{ grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .grid, .grid-3, .grid-4, .grid-5{ grid-template-columns: 1fr !important; } }

/* ---------------------------------------------------------------
   Mobile shell (≤860px) — the sidebar above is a fixed 224px column
   with no collapse mechanism otherwise, which would leave well under
   half a phone's screen for actual content. PROVEiT!'s target user is
   a small-business owner frequently on the go, so this isn't a
   secondary breakpoint to skip. Sidebar becomes an off-canvas drawer
   (hidden by default, slides in over a backdrop via a hamburger
   toggle renderShell() adds to the topbar — see js/layout.js).
   --------------------------------------------------------------- */
.sidebar-toggle{ display:none; background:none; border:none; color:var(--text); cursor:pointer; font-size:20px; line-height:1; padding:4px 8px 4px 0; }
.sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:190; }
.sidebar-backdrop.open{ display:block; }

@media(max-width:860px){
  .sidebar-toggle{ display:inline-block; }
  .sidebar-close{ display:inline-block; }
  .sidebar{
    position:fixed; left:0; top:0; z-index:200;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:4px 0 32px rgba(0,0,0,.5);
  }
  .sidebar.open{ transform:translateX(0); }
  .topbar{ padding:0 14px; gap:10px; }
  .topbar-search span{ display:none; }
  .topbar-search{ max-width:none; flex:0 0 auto; padding:8px 10px; }
  .topbar-user .who{ display:none; }
  .content{ padding:16px; }
  .content-header{ flex-direction:column; align-items:stretch; }
}

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--card-radius); padding:20px; overflow-x:auto; }
.card.clickable{ display:block; text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; }
.card.clickable:hover{ border-color:rgba(91,157,255,.45); transform:translateY(-1px); }

.widget-slot{ position:relative; }
.widget-remove{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.4); border:1px solid var(--border); color:var(--muted2);
  font-size:14px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s ease;
  display:flex; align-items:center; justify-content:center;
}
.widget-slot:hover .widget-remove{ opacity:1; }
.widget-remove:hover{ background:rgba(239,68,68,.25); border-color:rgba(239,68,68,.5); color:#fff; }
.card-title{ font-size:13px; font-weight:700; letter-spacing:.03em; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
.card-title .actions a, .card-title .actions button{ font-size:12px; color:var(--blue2); font-weight:600; }

.stat{ }
.stat .n{ font-family:'Orbitron',sans-serif; font-size:28px; font-weight:800; }
.stat .l{ font-size:12px; color:var(--muted); margin-top:4px; }

table.data{ width:100%; border-collapse:collapse; font-size:13px; }
table.data th{ text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--border); }
table.data td{ padding:12px; border-bottom:1px solid var(--border); color:var(--muted2); }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:rgba(255,255,255,.02); }

.pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.pill-critical, .pill-red{ background:rgba(239,68,68,.14); color:#f87171; }
.pill-high, .pill-amber{ background:rgba(245,165,36,.14); color:#fbbf24; }
.pill-medium, .pill-blue{ background:rgba(47,111,237,.14); color:var(--blue2); }
.pill-low, .pill-green{ background:rgba(34,197,94,.14); color:#4ade80; }
.pill-muted{ background:rgba(255,255,255,.06); color:var(--muted2); }

.tag{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:6px; font-size:11.5px; background:rgba(255,255,255,.06); color:var(--muted2); margin:0 5px 5px 0; }

.btn-icon{ background:none; border:1px solid var(--border); color:var(--muted2); border-radius:7px; padding:7px 10px; cursor:pointer; font-size:12.5px; }
.btn-icon:hover{ color:var(--text); border-color:var(--muted2); }

.empty-state{ text-align:center; padding:60px 24px; color:var(--muted); }
.empty-state .icon{ font-size:36px; margin-bottom:14px; opacity:.6; }
.empty-state h3{ color:var(--text); font-size:16px; margin-bottom:8px; }
.empty-state p{ font-size:13.5px; max-width:380px; margin:0 auto; }

.phase-badge{
  display:inline-block; margin-top:16px; padding:6px 16px; border-radius:999px;
  background:rgba(47,111,237,.14); border:1px solid rgba(91,157,255,.4); color:var(--blue2);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:12px 18px; font-size:13px; box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
  z-index:999; display:none;
}
.toast.show{ display:block; }
.toast.error{ border-color:rgba(239,68,68,.4); color:#f87171; }
.toast.success{ border-color:rgba(34,197,94,.4); color:#86efac; }

.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; }

/* ---------------------------------------------------------------
   Native iOS app hook. The THEWATCH app adds `proveit-native-app` to
   <html> at document start (before first paint) when it embeds one of
   these pages in its WKWebView. The app supplies its own login,
   sidebar and title bar, so the shell's own sidebar, hamburger and
   page title are hidden here to stop the page reading like a browser
   tab inside the app; the topbar's functional controls (search, org
   switcher, feedback, user menu) stay. A normal browser never gets the
   class, so nothing in this block applies on the public site. Lives
   here rather than per page because every app page loads this file
   and renderShell() draws the same chrome on all of them.
   --------------------------------------------------------------- */
html.proveit-native-app,
html.proveit-native-app body{ overflow-x:hidden; max-width:100vw; touch-action:pan-x pan-y; background-image:none !important; }
html.proveit-native-app a,
html.proveit-native-app button{ -webkit-touch-callout:none; }
html.proveit-native-app #tw-sidebar,
html.proveit-native-app #tw-sidebar-toggle,
html.proveit-native-app #tw-sidebar-backdrop,
html.proveit-native-app .content-header h1,
html.proveit-native-app .content-header .sub{ display:none !important; }
html.proveit-native-app .main{ width:100% !important; max-width:100% !important; margin-left:0 !important; }
html.proveit-native-app .topbar{ padding:0 14px; gap:10px; }
html.proveit-native-app .content{ padding:10px 14px 60px !important; }
/* With the title hidden the header only ever holds action buttons; it
   collapses to nothing when there are none. */
html.proveit-native-app .content-header{ margin-bottom:0 !important; gap:0 !important; }
html.proveit-native-app .content-header > :not(:first-child){ margin-bottom:14px; }

/* Phone-width tables: below 720px each row of the main list tables
   becomes a bordered card and each cell stacks with its column header
   printed above it, so nothing ever needs to scroll sideways. Column
   labels are pinned to the real <th> text of each table, in order. A
   trailing cell with no header (the action column) stacks with no
   label. A single colspan "empty state" or "loading" cell keeps its
   normal one-cell layout. */
@media (max-width:720px){
  html.proveit-native-app #alerts-table,
  html.proveit-native-app #cases-table,
  html.proveit-native-app #incidents-table,
  html.proveit-native-app #connectors-table,
  html.proveit-native-app #native-connectors-table,
  html.proveit-native-app #playbooks-table,
  html.proveit-native-app #users-table,
  html.proveit-native-app #pending-invites-table{ min-width:0 !important; width:100% !important; display:block !important; }
  html.proveit-native-app #alerts-table thead,
  html.proveit-native-app #cases-table thead,
  html.proveit-native-app #incidents-table thead,
  html.proveit-native-app #connectors-table thead,
  html.proveit-native-app #native-connectors-table thead,
  html.proveit-native-app #playbooks-table thead,
  html.proveit-native-app #users-table thead,
  html.proveit-native-app #pending-invites-table thead{ display:none !important; }
  html.proveit-native-app #alerts-table tbody,
  html.proveit-native-app #alerts-table tbody tr,
  html.proveit-native-app #alerts-table tbody tr > td,
  html.proveit-native-app #cases-table tbody,
  html.proveit-native-app #cases-table tbody tr,
  html.proveit-native-app #cases-table tbody tr > td,
  html.proveit-native-app #incidents-table tbody,
  html.proveit-native-app #incidents-table tbody tr,
  html.proveit-native-app #incidents-table tbody tr > td,
  html.proveit-native-app #connectors-table tbody,
  html.proveit-native-app #connectors-table tbody tr,
  html.proveit-native-app #connectors-table tbody tr > td,
  html.proveit-native-app #native-connectors-table tbody,
  html.proveit-native-app #native-connectors-table tbody tr,
  html.proveit-native-app #native-connectors-table tbody tr > td,
  html.proveit-native-app #playbooks-table tbody,
  html.proveit-native-app #playbooks-table tbody tr,
  html.proveit-native-app #playbooks-table tbody tr > td,
  html.proveit-native-app #users-table tbody,
  html.proveit-native-app #users-table tbody tr,
  html.proveit-native-app #users-table tbody tr > td,
  html.proveit-native-app #pending-invites-table tbody,
  html.proveit-native-app #pending-invites-table tbody tr,
  html.proveit-native-app #pending-invites-table tbody tr > td{ display:block !important; width:100% !important; max-width:none !important; box-sizing:border-box; }
  html.proveit-native-app #alerts-table tbody tr,
  html.proveit-native-app #cases-table tbody tr,
  html.proveit-native-app #incidents-table tbody tr,
  html.proveit-native-app #connectors-table tbody tr,
  html.proveit-native-app #native-connectors-table tbody tr,
  html.proveit-native-app #playbooks-table tbody tr,
  html.proveit-native-app #users-table tbody tr,
  html.proveit-native-app #pending-invites-table tbody tr{ margin-bottom:12px; border:1px solid var(--border) !important; border-radius:8px; padding:4px 14px; }
  html.proveit-native-app #alerts-table tbody tr > td,
  html.proveit-native-app #cases-table tbody tr > td,
  html.proveit-native-app #incidents-table tbody tr > td,
  html.proveit-native-app #connectors-table tbody tr > td,
  html.proveit-native-app #native-connectors-table tbody tr > td,
  html.proveit-native-app #playbooks-table tbody tr > td,
  html.proveit-native-app #users-table tbody tr > td,
  html.proveit-native-app #pending-invites-table tbody tr > td{ padding:10px 0 !important; border-bottom:1px solid var(--border) !important; text-align:left !important; background:none !important; white-space:normal !important; }
  html.proveit-native-app #alerts-table tbody tr > td:last-child,
  html.proveit-native-app #cases-table tbody tr > td:last-child,
  html.proveit-native-app #incidents-table tbody tr > td:last-child,
  html.proveit-native-app #connectors-table tbody tr > td:last-child,
  html.proveit-native-app #native-connectors-table tbody tr > td:last-child,
  html.proveit-native-app #playbooks-table tbody tr > td:last-child,
  html.proveit-native-app #users-table tbody tr > td:last-child,
  html.proveit-native-app #pending-invites-table tbody tr > td:last-child{ border-bottom:0 !important; }
  /* A trailing action cell that happens to be empty on this row would
     otherwise render as a blank strip inside the card. */
  html.proveit-native-app #alerts-table tbody tr > td:empty,
  html.proveit-native-app #cases-table tbody tr > td:empty,
  html.proveit-native-app #incidents-table tbody tr > td:empty,
  html.proveit-native-app #connectors-table tbody tr > td:empty,
  html.proveit-native-app #native-connectors-table tbody tr > td:empty,
  html.proveit-native-app #playbooks-table tbody tr > td:empty,
  html.proveit-native-app #users-table tbody tr > td:empty,
  html.proveit-native-app #pending-invites-table tbody tr > td:empty{ display:none !important; }
  html.proveit-native-app #alerts-table tbody tr > td::before,
  html.proveit-native-app #cases-table tbody tr > td::before,
  html.proveit-native-app #incidents-table tbody tr > td::before,
  html.proveit-native-app #connectors-table tbody tr > td::before,
  html.proveit-native-app #native-connectors-table tbody tr > td::before,
  html.proveit-native-app #playbooks-table tbody tr > td::before,
  html.proveit-native-app #users-table tbody tr > td::before,
  html.proveit-native-app #pending-invites-table tbody tr > td::before{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }

  /* Alerts: Severity, Title, Source, Status, SLA, Case, When */
  html.proveit-native-app #alerts-table tbody tr > td:nth-of-type(1)::before{ content:"Severity"; }
  html.proveit-native-app #alerts-table tbody tr > td:nth-of-type(2)::before{ content:"Title"; }
  html.proveit-native-app #alerts-table tbody tr > td:nth-of-type(3)::before{ content:"Source"; }
  html.proveit-native-app #alerts-table tbody tr > td:nth-of-type(4)::before{ content:"Status"; }
  html.proveit-native-app #alerts-table tbody tr > td:nth-of-type(5)::before{ content:"SLA"; }
  html.proveit-native-app #alerts-table tbody tr > td:nth-of-type(6)::before{ content:"Case"; }
  html.proveit-native-app #alerts-table tbody tr > td:nth-of-type(7)::before{ content:"When"; }

  /* Cases: Severity, Title, Status, Risk, SLA, Alerts, Assigned, Updated
     (the thead's column-filter row goes away with the thead). */
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(1)::before{ content:"Severity"; }
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(2)::before{ content:"Title"; }
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(3)::before{ content:"Status"; }
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(4)::before{ content:"Risk"; }
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(5)::before{ content:"SLA"; }
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(6)::before{ content:"Alerts"; }
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(7)::before{ content:"Assigned"; }
  html.proveit-native-app #cases-table tbody tr > td:nth-of-type(8)::before{ content:"Updated"; }

  /* Major Incidents: Sev, Case, Status, Commander, Open Actions, Declared */
  html.proveit-native-app #incidents-table tbody tr > td:nth-of-type(1)::before{ content:"Sev"; }
  html.proveit-native-app #incidents-table tbody tr > td:nth-of-type(2)::before{ content:"Case"; }
  html.proveit-native-app #incidents-table tbody tr > td:nth-of-type(3)::before{ content:"Status"; }
  html.proveit-native-app #incidents-table tbody tr > td:nth-of-type(4)::before{ content:"Commander"; }
  html.proveit-native-app #incidents-table tbody tr > td:nth-of-type(5)::before{ content:"Open Actions"; }
  html.proveit-native-app #incidents-table tbody tr > td:nth-of-type(6)::before{ content:"Declared"; }

  /* Connectors: Name, Category, Status, Default Severity, Last Event,
     Created, (actions). */
  html.proveit-native-app #connectors-table tbody tr > td:nth-of-type(1)::before{ content:"Name"; }
  html.proveit-native-app #connectors-table tbody tr > td:nth-of-type(2)::before{ content:"Category"; }
  html.proveit-native-app #connectors-table tbody tr > td:nth-of-type(3)::before{ content:"Status"; }
  html.proveit-native-app #connectors-table tbody tr > td:nth-of-type(4)::before{ content:"Default Severity"; }
  html.proveit-native-app #connectors-table tbody tr > td:nth-of-type(5)::before{ content:"Last Event"; }
  html.proveit-native-app #connectors-table tbody tr > td:nth-of-type(6)::before{ content:"Created"; }

  /* Native connectors: Name, Provider, Last Sync, Status, (actions). */
  html.proveit-native-app #native-connectors-table tbody tr > td:nth-of-type(1)::before{ content:"Name"; }
  html.proveit-native-app #native-connectors-table tbody tr > td:nth-of-type(2)::before{ content:"Provider"; }
  html.proveit-native-app #native-connectors-table tbody tr > td:nth-of-type(3)::before{ content:"Last Sync"; }
  html.proveit-native-app #native-connectors-table tbody tr > td:nth-of-type(4)::before{ content:"Status"; }

  /* Playbooks: Name, Description, Steps, Enabled, Approval, Runs, (actions). */
  html.proveit-native-app #playbooks-table tbody tr > td:nth-of-type(1)::before{ content:"Name"; }
  html.proveit-native-app #playbooks-table tbody tr > td:nth-of-type(2)::before{ content:"Description"; }
  html.proveit-native-app #playbooks-table tbody tr > td:nth-of-type(3)::before{ content:"Steps"; }
  html.proveit-native-app #playbooks-table tbody tr > td:nth-of-type(4)::before{ content:"Enabled"; }
  html.proveit-native-app #playbooks-table tbody tr > td:nth-of-type(5)::before{ content:"Approval"; }
  html.proveit-native-app #playbooks-table tbody tr > td:nth-of-type(6)::before{ content:"Runs"; }

  /* Users & Roles, team members: Name, Email, Roles, MFA, Status, Last
     Login, (actions). */
  html.proveit-native-app #users-table tbody tr > td:nth-of-type(1)::before{ content:"Name"; }
  html.proveit-native-app #users-table tbody tr > td:nth-of-type(2)::before{ content:"Email"; }
  html.proveit-native-app #users-table tbody tr > td:nth-of-type(3)::before{ content:"Roles"; }
  html.proveit-native-app #users-table tbody tr > td:nth-of-type(4)::before{ content:"MFA"; }
  html.proveit-native-app #users-table tbody tr > td:nth-of-type(5)::before{ content:"Status"; }
  html.proveit-native-app #users-table tbody tr > td:nth-of-type(6)::before{ content:"Last Login"; }

  /* Users & Roles, pending invitations: Email, Sent, Expires */
  html.proveit-native-app #pending-invites-table tbody tr > td:nth-of-type(1)::before{ content:"Email"; }
  html.proveit-native-app #pending-invites-table tbody tr > td:nth-of-type(2)::before{ content:"Sent"; }
  html.proveit-native-app #pending-invites-table tbody tr > td:nth-of-type(3)::before{ content:"Expires"; }

  /* Single colspan loading/empty-state cell: one plain block, no label. */
  html.proveit-native-app #alerts-table tbody tr > td[colspan]::before,
  html.proveit-native-app #cases-table tbody tr > td[colspan]::before,
  html.proveit-native-app #incidents-table tbody tr > td[colspan]::before,
  html.proveit-native-app #connectors-table tbody tr > td[colspan]::before,
  html.proveit-native-app #native-connectors-table tbody tr > td[colspan]::before,
  html.proveit-native-app #playbooks-table tbody tr > td[colspan]::before,
  html.proveit-native-app #users-table tbody tr > td[colspan]::before,
  html.proveit-native-app #pending-invites-table tbody tr > td[colspan]::before{ content:none !important; }
  html.proveit-native-app #alerts-table tbody tr > td[colspan],
  html.proveit-native-app #cases-table tbody tr > td[colspan],
  html.proveit-native-app #incidents-table tbody tr > td[colspan],
  html.proveit-native-app #connectors-table tbody tr > td[colspan],
  html.proveit-native-app #native-connectors-table tbody tr > td[colspan],
  html.proveit-native-app #playbooks-table tbody tr > td[colspan],
  html.proveit-native-app #users-table tbody tr > td[colspan],
  html.proveit-native-app #pending-invites-table tbody tr > td[colspan]{ text-align:center !important; }
}