/* ═══════════════════════════════════════════════════════════════════════════
   ONTASK INSTRUMENT PANEL THEME
   Replaces Inspinia 2.3. Ported from the Claude Design bundle (OnTask.html).
   Loads AFTER css/style.css and restyles the existing Bootstrap-3/Inspinia
   class vocabulary so content pages inherit the look without markup changes.
   Dark is the default; light is a full peer via html[data-theme="light"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --bg:#080a0d; --bg-panel:#0b0e12; --surface:#0d1116; --surface-2:#0a0e12; --surface-3:#07090c;
  --surface-hov:#101620; --track:#12181f; --on-tint:#0b1014; --scroll-thumb:#242c37;
  --border:#1a212b; --border-soft:#161d26; --border-2:#1c2733; --border-3:#232c38; --border-4:#2c3a49;
  --border-faint:#131a22; --avatar-bg:#1d2632;
  --text:#e9e7e2; --text-1:#dfe3e9; --text-2:#cdd3db; --text-3:#b8bec8; --text-4:#9aa3b0;
  --muted:#98a2b3; --muted-2:#8d97a7; --muted-3:#848d9c; --muted-4:#7b8391; --muted-5:#3f4854;
  --skel-1:#1b2430; --skel-2:#2b3542; --skel-3:#242e3b; --skel-4:#1c242e; --skel-5:#39424f;
  --tint-panel:#0d1319; --tint-blue:#0a1120; --tint-purple:#120e17; --tint-amber:#171208; --tint-green:#0f2a20;
  --edge-purple:#2a2033; --edge-amber:#2c2313; --edge-blue:#23395e; --edge-green:#16412f;
  --green:#34d399; --amber:#f5b544; --red:#f4643f; --blue:#5b9dff; --blue-2:#7aa7ff; --blue-3:#a9c5ff;
  --purple:#a78bfa; --pink:#ff4d6d;
  --paper:#faf9f6; --ink:#16191d; --paper-shadow:rgba(0,0,0,.5);
  --font-ui:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
html[data-theme="light"]{
  --bg:#eef0f4; --bg-panel:#ffffff; --surface:#ffffff; --surface-2:#f6f7fa; --surface-3:#f1f3f7;
  --surface-hov:#eff2f6; --track:#e9ecf1; --on-tint:#ffffff; --scroll-thumb:#c9ced7;
  --border:#dfe3ea; --border-soft:#e9ecf1; --border-2:#d8dde5; --border-3:#c6ccd6; --border-4:#aab3c0;
  --border-faint:#eaedf2; --avatar-bg:#e4e8ee;
  --text:#12161b; --text-1:#1a1f26; --text-2:#2a313a; --text-3:#39414d; --text-4:#4b5462;
  --muted:#4d5563; --muted-2:#58606d; --muted-3:#616976; --muted-4:#646b78; --muted-5:#9aa1ab;
  --skel-1:#dde2e9; --skel-2:#c8cfd9; --skel-3:#d4dae2; --skel-4:#dfe4ea; --skel-5:#bcc3ce;
  --tint-panel:#f1f8f4; --tint-blue:#eef4fd; --tint-purple:#f5f1fd; --tint-amber:#fdf6e8; --tint-green:#e8f6ef;
  --edge-purple:#d9cff2; --edge-amber:#ecdcb8; --edge-blue:#bcd2f2; --edge-green:#bfe3d1;
  --green:#08663f; --amber:#7a5304; --red:#a52f15; --blue:#2563c9; --blue-2:#1d4ed8; --blue-3:#1740b8;
  --purple:#6a3fd4; --pink:#c81742;
  --paper-shadow:rgba(20,30,50,.14);
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
body.ot-app{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
.ot-app h1,.ot-app h2,.ot-app h3,.ot-app h4,.ot-app h5,.ot-app h6{
  font-family:var(--font-ui);color:var(--text-1);
}
.ot-app a{color:var(--blue-2);text-decoration:none}
.ot-app a:hover,.ot-app a:focus{color:var(--blue-3);text-decoration:none}
.ot-app ::-webkit-scrollbar{width:9px;height:9px}
.ot-app ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:9px}
.ot-app ::-webkit-scrollbar-track{background:transparent}
.ot-app ::selection{background:color-mix(in srgb,var(--blue) 30%,transparent)}
@keyframes otPulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

/* ── 3. SHELL ──────────────────────────────────────────────────────────── */
.ot-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:224px;z-index:1030;
  display:flex;flex-direction:column;
  background:var(--bg-panel);border-right:1px solid var(--border);
}
.ot-brand{flex:none;padding:16px 16px 14px;border-bottom:1px solid var(--border)}
.ot-brand-row{display:flex;align-items:center;gap:10px}
.ot-brand-logo{
  width:26px;height:26px;flex:none;border-radius:6px;
  background:linear-gradient(140deg,var(--green),var(--blue));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ot-brand-logo img{width:100%;height:100%;object-fit:contain}
.ot-brand-logo svg{display:block}
.ot-brand-name{font:600 14px/1 var(--font-ui);letter-spacing:.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-brand-host{font:400 8.5px/1.4 var(--font-mono);color:var(--muted-4);letter-spacing:.1em;margin-top:3px;text-transform:uppercase}
.ot-nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:11px 9px 14px;display:flex;flex-direction:column;gap:1px}
.ot-nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:6px;cursor:pointer;
  color:var(--muted);border-left:2px solid transparent;
  font:500 12px var(--font-ui);
}
.ot-nav-item:hover{background:var(--surface-hov);color:var(--text-2)}
.ot-nav-item.active{color:var(--text);border-left-color:var(--green);padding-left:7px}
.ot-nav-item.active.leaf{background:var(--surface-hov)}
.ot-nav-item .fa{width:14px;flex:none;text-align:center;font-size:13px;opacity:.85}
.ot-nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-nav-caret{font:400 9px var(--font-mono);color:var(--muted-4);flex:none}
.ot-nav-badge{flex:none;padding:1px 5px;border-radius:8px;background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--amber);font:600 8.5px var(--font-mono)}
.ot-nav-children{
  display:none;flex-direction:column;gap:1px;margin:2px 0 5px 21px;
  padding-left:9px;border-left:1px solid var(--border-2);
}
.ot-nav-group.open>.ot-nav-children{display:flex}
.ot-nav-child{padding:6px 8px;border-radius:5px;cursor:pointer;font:400 11px var(--font-ui);color:var(--muted-2);display:block}
.ot-nav-child:hover{color:var(--text-2)}
.ot-nav-child.active{color:var(--green)}
/* static section headings (sidemenu.php depth 2): non-clickable labels, always visible; the leaves under
   them (.ot-nav-item.sec) are indented 8px so they read as the heading's children */
.ot-nav-section{flex:none;margin:12px 0 12px;padding:8px 9px 0;border-top:1px solid var(--border-soft);font:600 8.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-4);cursor:default;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-nav-item.sec{padding-left:17px}
.ot-nav-item.sec.active{padding-left:15px}
/* a collapsible group under a heading indents with its siblings, and its children follow it */
.ot-nav-group.sec>.ot-nav-children{margin-left:29px}
/* sectioned menus (dev.ontask.ai): tighter row pitch so the heading gaps read as the grouping.
   Scoped with :has() so a flat menu (other domains) keeps the 8px rows above. */
.ot-nav:has(.ot-nav-section){gap:0}
.ot-nav:has(.ot-nav-section) .ot-nav-item{padding-top:4px;padding-bottom:4px}
.ot-nav:has(.ot-nav-section) .ot-nav-section:first-child{margin-top:0}
.ot-side-foot{flex:none;padding:12px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:9px}
.ot-presence{display:flex;align-items:center;gap:7px}
.ot-presence-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:otPulseDot 1.9s ease-in-out infinite}
.ot-presence-label{font:400 9.5px var(--font-mono);color:var(--muted-3)}

.ot-main{margin-left:224px;min-height:100vh;background:var(--bg)}
.ot-main.no-sidebar{margin-left:0}
.ot-header{
  position:sticky;top:0;z-index:1020;
  display:flex;align-items:center;gap:16px;padding:14px 24px;
  border-bottom:1px solid var(--border);background:var(--bg-panel);
}
.ot-header-title{font:600 16px/1.2 var(--font-ui);color:var(--text)}
.ot-header-sub{font:400 10.5px/1.4 var(--font-mono);color:var(--muted-2);margin-top:4px;letter-spacing:.04em}
.ot-header-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.ot-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border-2);border-radius:7px;background:var(--surface-2)}
.ot-seg-btn{
  padding:5px 10px;border-radius:5px;cursor:pointer;border:0;background:transparent;
  font:500 9px var(--font-mono);letter-spacing:.08em;color:var(--muted-3);
}
.ot-seg-btn:hover{color:var(--text-2)}
.ot-seg-btn.active{background:var(--surface-hov);color:var(--text-1)}
.ot-logout{
  padding:7px 12px;border:1px solid var(--border-2);border-radius:6px;cursor:pointer;
  font:500 10px var(--font-mono);color:var(--muted);letter-spacing:.06em;background:transparent;display:inline-block;
}
.ot-logout:hover{border-color:var(--red);color:var(--red);text-decoration:none}
.ot-who{display:flex;align-items:center;gap:9px;padding-right:11px;border-right:1px solid var(--border-2)}
.ot-avatar{
  width:27px;height:27px;border-radius:50%;background:var(--avatar-bg);flex:none;
  display:flex;align-items:center;justify-content:center;
  font:600 9.5px var(--font-mono);color:var(--text-4);text-transform:uppercase;
}
.ot-whoami{font:400 10.5px var(--font-mono);color:var(--muted-2);white-space:nowrap}
.ot-menu-toggle{display:none;border:1px solid var(--border-2);border-radius:6px;background:transparent;color:var(--muted);padding:6px 10px;cursor:pointer}
@media (max-width: 991px){
  .ot-sidebar{transform:translateX(-100%);transition:transform .18s ease}
  body.ot-nav-open .ot-sidebar{transform:translateX(0)}
  .ot-main{margin-left:0}
  .ot-menu-toggle{display:inline-block}
  .ot-whoami{display:none}
}

/* ── 4. PAGE SCAFFOLD (Inspinia vocabulary) ────────────────────────────── */
.ot-app #wrapper{background:var(--bg)}
/* margin+padding must outrank style.css's bare #page-wrapper rules (220px margin, 0 15px padding) */
.ot-app #page-wrapper{background:var(--bg);border:0;min-height:100vh;padding:0;margin:0 0 0 224px}
.ot-app #page-wrapper.no-sidebar{margin:0}
@media (max-width:991px){.ot-app #page-wrapper{margin:0}}
.ot-app .gray-bg,.ot-app .grey-bg{background-color:var(--bg)}
.ot-app .white-bg{background-color:var(--surface)}
.ot-app .wrapper-content{padding:24px 28px 44px}
@media (max-width:767px){.ot-app .wrapper-content{padding:16px 14px 34px}}
.ot-app .page-heading{
  background:transparent;border:0;padding:22px 28px 0;
}
.ot-app .page-heading h2{font:600 20px/1.2 var(--font-ui);color:var(--text);margin:0 0 4px}
.ot-app .breadcrumb{background:transparent;padding:0;margin:0;font:400 10px var(--font-mono);color:var(--muted-3)}
.ot-app .breadcrumb>li+li:before{color:var(--muted-5)}
.ot-app .breadcrumb>li a{color:var(--muted-2)}
.ot-app .breadcrumb>.active{color:var(--muted-3)}

/* ibox → panel */
.ot-app .ibox{background:var(--surface);border:1px solid var(--border);border-radius:11px;margin-bottom:22px;overflow:hidden}
.ot-app .ibox.collapsed .ibox-content{display:none}
.ot-app .ibox-title{
  background:transparent;border:0;border-bottom:1px solid var(--border-soft);
  padding:13px 18px;min-height:0;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
}
.ot-app .ibox-title h5{
  font:500 9.5px var(--font-mono);color:var(--muted-3);letter-spacing:.13em;text-transform:uppercase;
  margin:0;float:none;display:inline-block;
}
.ot-app .ibox-title .label{margin-left:2px}
.ot-app .ibox-tools{margin-left:auto;float:none;display:flex;align-items:center;gap:7px;position:static}
.ot-app .ibox-tools a{color:var(--muted-3)}
.ot-app .ibox-tools a:hover{color:var(--text-2)}
.ot-app .ibox-content{background:transparent;border:0;padding:18px;color:var(--text-2)}
.ot-app .ibox-footer{background:var(--surface-2);border-top:1px solid var(--border-soft);padding:11px 18px}

/* dashboard-header + misc panels */
.ot-app .dashboard-header{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:18px}
.ot-app .panel{background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:none}
.ot-app .panel-default>.panel-heading,.ot-app .panel-heading{
  background:var(--surface-2);border-color:var(--border-soft);color:var(--text-2);border-radius:9px 9px 0 0;
}
.ot-app .panel-body{background:transparent;border:0;color:var(--text-2)}
.ot-app .panel-footer{background:var(--surface-2);border-color:var(--border-soft)}
.ot-app .well{background:var(--surface-2);border:1px solid var(--border-2);border-radius:8px;color:var(--text-2);box-shadow:none}
.ot-app .jumbotron{background:var(--surface-2);border-radius:11px;color:var(--text)}
.ot-app .hr-line-dashed{border-top:1px solid var(--border-faint);background:none;margin:18px 0}
.ot-app .hr-line-solid{border-top:1px solid var(--border-2);background:none}
.ot-app hr{border-top:1px solid var(--border-soft)}

/* ── 5. TYPE UTILITIES ─────────────────────────────────────────────────── */
.ot-app .text-muted{color:var(--muted-3)!important}
.ot-app .text-navy{color:var(--green)}
.ot-app .text-primary{color:var(--blue-2)}
.ot-app .text-success{color:var(--green)}
.ot-app .text-info{color:var(--blue)}
.ot-app .text-warning{color:var(--amber)}
.ot-app .text-danger{color:var(--red)}
.ot-app .font-bold{font-weight:600}
.ot-app .stat-percent{font-family:var(--font-mono);font-size:11px}
.ot-app small,.ot-app .small{color:var(--muted-2)}
.ot-app .no-margins{margin:0!important}
.ot-app h1 .ot-mono,.ot-app .ot-mono{font-family:var(--font-mono)}
.ot-app .ibox-content h1,.ot-app .ibox-content h2{font-weight:600;letter-spacing:-.01em}

/* ── 6. BUTTONS ────────────────────────────────────────────────────────── */
.ot-app .btn{
  font:500 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  border-radius:6px;padding:8px 15px;background:transparent;color:var(--text-2);
  border:1px solid var(--border-4);box-shadow:none;transition:border-color .12s,color .12s,filter .12s;
}
.ot-app .btn:hover,.ot-app .btn:focus{color:var(--green);border-color:var(--green);background:transparent;outline:none}
.ot-app .btn-lg{padding:11px 20px;font-size:12px;border-radius:7px}
.ot-app .btn-sm{padding:6px 11px;font-size:9.5px;border-radius:5px}
.ot-app .btn-xs{padding:4px 8px;font-size:9px;border-radius:4px;letter-spacing:.05em}
.ot-app .btn-block{width:100%}
/* the one filled action */
.ot-app .btn-primary{
  background:var(--green);border-color:var(--green);color:var(--on-tint);font-weight:600;
}
.ot-app .btn-primary:hover,.ot-app .btn-primary:focus,.ot-app .btn-primary:active,
.ot-app .btn-primary.active,.ot-app .open .dropdown-toggle.btn-primary{
  background:var(--green);border-color:var(--green);color:var(--on-tint);filter:brightness(1.1);
}
.ot-app .btn-success{background:transparent;border-color:var(--green);color:var(--green)}
.ot-app .btn-success:hover,.ot-app .btn-success:focus,.ot-app .btn-success:active,.ot-app .btn-success.active{
  background:color-mix(in srgb,var(--green) 10%,transparent);border-color:var(--green);color:var(--green);
}
.ot-app .btn-info{background:transparent;border-color:var(--edge-blue);color:var(--blue-2)}
.ot-app .btn-info:hover,.ot-app .btn-info:focus,.ot-app .btn-info:active,.ot-app .btn-info.active{
  background:color-mix(in srgb,var(--blue) 10%,transparent);border-color:var(--blue);color:var(--blue-2);
}
.ot-app .btn-warning{background:transparent;border-color:var(--edge-amber);color:var(--amber)}
.ot-app .btn-warning:hover,.ot-app .btn-warning:focus,.ot-app .btn-warning:active,.ot-app .btn-warning.active{
  background:color-mix(in srgb,var(--amber) 10%,transparent);border-color:var(--amber);color:var(--amber);
}
.ot-app .btn-danger{background:transparent;border-color:var(--border-2);color:var(--muted)}
.ot-app .btn-danger:hover,.ot-app .btn-danger:focus,.ot-app .btn-danger:active,.ot-app .btn-danger.active{
  background:transparent;border-color:var(--red);color:var(--red);
}
.ot-app .btn-default,.ot-app .btn-white,.ot-app .btn-link{
  background:transparent;border-color:var(--border-2);color:var(--muted);
}
.ot-app .btn-default:hover,.ot-app .btn-default:focus,.ot-app .btn-default:active,.ot-app .btn-default.active,
.ot-app .btn-white:hover,.ot-app .btn-white:focus,.ot-app .btn-white:active,.ot-app .btn-white.active{
  background:transparent;border-color:var(--blue);color:var(--blue-2);
}
.ot-app .btn-link{border-color:transparent;color:var(--blue-2);text-transform:none;letter-spacing:0}
.ot-app .btn-link:hover{color:var(--blue-3);border-color:transparent}
.ot-app .btn[disabled],.ot-app .btn.disabled{
  background:transparent;border-color:var(--border-faint);color:var(--muted-5);opacity:1;
}
.ot-app .btn-group .btn{border-radius:6px}
.ot-app .btn-group .btn+.btn{margin-left:4px}
.ot-app .btn-circle{border-radius:50%;text-transform:none}
.ot-app .btn .fa{font-size:11px}

/* ── 7. STATUS PILLS (labels & badges) ─────────────────────────────────── */
.ot-app .label,.ot-app .badge{
  display:inline-block;padding:3px 8px;border-radius:4px;
  font:600 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--muted-2) 32%,transparent);
  background:color-mix(in srgb,var(--muted-2) 8%,transparent);
  color:var(--muted-2);text-shadow:none;
}
.ot-app .label-primary,.ot-app .badge-primary,.ot-app .label-info,.ot-app .badge-info{
  border-color:color-mix(in srgb,var(--blue) 32%,transparent);
  background:color-mix(in srgb,var(--blue) 8%,transparent);color:var(--blue);
}
.ot-app .label-success,.ot-app .badge-success{
  border-color:color-mix(in srgb,var(--green) 32%,transparent);
  background:color-mix(in srgb,var(--green) 8%,transparent);color:var(--green);
}
.ot-app .label-warning,.ot-app .badge-warning{
  border-color:color-mix(in srgb,var(--amber) 32%,transparent);
  background:color-mix(in srgb,var(--amber) 8%,transparent);color:var(--amber);
}
.ot-app .label-danger,.ot-app .badge-danger{
  border-color:color-mix(in srgb,var(--red) 32%,transparent);
  background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red);
}
.ot-app .label-default,.ot-app .badge-default{color:var(--muted-2)}

/* ── 8. FORMS ──────────────────────────────────────────────────────────── */
.ot-app .form-control,.ot-app input[type=text].form-control,.ot-app select.form-control,.ot-app textarea.form-control{
  background:var(--surface-2);border:1px solid var(--border-3);border-radius:6px;
  color:var(--text);font:400 11.5px var(--font-mono);
  box-shadow:none;height:auto;padding:8px 11px;
}
.ot-app .form-control:focus{
  border-color:var(--blue);background:var(--surface-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent);outline:none;
}
.ot-app .form-control::placeholder{color:var(--muted-4)}
.ot-app .form-control[disabled],.ot-app .form-control[readonly]{
  background:var(--surface-3);color:var(--muted-3);border-color:var(--border-2);cursor:not-allowed;
}
.ot-app select.form-control option{background:var(--bg-panel);color:var(--text)}
.ot-app label,.ot-app .control-label{
  font:500 9.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-3);
  font-weight:500;
}
.ot-app .checkbox label,.ot-app .radio label,.ot-app label.checkbox-inline,.ot-app label.radio-inline{
  font:400 12px var(--font-ui);text-transform:none;letter-spacing:0;color:var(--text-2);
}
.ot-app .input-group-addon{
  background:var(--surface-2);border:1px solid var(--border-3);color:var(--muted-3);
  font:400 10.5px var(--font-mono);border-radius:6px;
}
.ot-app .input-group .form-control:first-child,.ot-app .input-group-addon:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.ot-app .input-group .form-control:last-child,.ot-app .input-group-addon:last-child{border-top-left-radius:0;border-bottom-left-radius:0}
.ot-app .help-block{color:var(--muted-3);font-size:11px}
.ot-app .has-error .form-control{border-color:var(--red)}
.ot-app .has-error .control-label,.ot-app .has-error .help-block,.ot-app label.error{color:var(--red)}
.ot-app label.error{font:400 10px var(--font-mono);text-transform:none;letter-spacing:0;display:block;margin-top:5px}
.ot-app .has-success .form-control{border-color:var(--green)}
.ot-app .form-horizontal .control-label{padding-top:10px}
.ot-app fieldset legend{color:var(--text-1);border-bottom:1px solid var(--border-soft)}

/* ── 9. TABLES + DATATABLES ────────────────────────────────────────────── */
.ot-app .table{color:var(--text-2);margin-bottom:0}
.ot-app .table>thead>tr>th{
  background:var(--surface-2);border-bottom:1px solid var(--border-soft);border-top:0;
  font:500 8.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-4);
  padding:10px 14px;vertical-align:middle;
}
.ot-app .table>tbody>tr>td{
  border-top:0;border-bottom:1px solid var(--border-faint);
  padding:11px 14px;vertical-align:middle;font-size:12px;color:var(--text-2);
}
.ot-app .table>tfoot>tr>td,.ot-app .table>tfoot>tr>th{border-top:1px solid var(--border-soft);background:var(--surface-2)}
.ot-app .table-striped>tbody>tr:nth-of-type(odd),.ot-app .table-striped>tbody>tr:nth-of-type(even){
  background:transparent; /* zebra is gone — hairline rules read cleaner at density */
}
.ot-app .table-hover>tbody>tr:hover{background:var(--surface-hov)}
.ot-app .table-bordered{border:1px solid var(--border-2)}
.ot-app .table-bordered>thead>tr>th,.ot-app .table-bordered>tbody>tr>td{border-color:var(--border-faint)}
.ot-app .table-responsive{border:0}
.ot-app .table .btn-xs{margin:0 1px}
.ot-app td.details-control{color:var(--blue-2);cursor:pointer}

/* DataTables chrome */
.ot-app .dataTables_wrapper{padding-bottom:6px}
.ot-app .dataTables_length,.ot-app .dataTables_filter,.ot-app .dataTables_info,.ot-app .dataTables_paginate{
  font:400 9.5px var(--font-mono);color:var(--muted-3);
}
.ot-app .dataTables_length label,.ot-app .dataTables_filter label{
  font:400 9.5px var(--font-mono);color:var(--muted-3);text-transform:none;letter-spacing:0;
}
.ot-app .dataTables_length select{
  background:var(--surface-2);border:1px solid var(--border-3);border-radius:5px;color:var(--text-2);
  font:400 10px var(--font-mono);padding:4px 6px;margin:0 5px;outline:none;
}
.ot-app .dataTables_filter input{
  background:var(--surface-2);border:1px solid var(--border-3);border-radius:5px;color:var(--text);
  font:400 10px var(--font-mono);padding:5px 9px;margin-left:8px;outline:none;width:188px;
}
.ot-app .dataTables_filter input:focus{border-color:var(--blue)}
.ot-app .dataTables_info{color:var(--muted-4);padding-top:12px}
.ot-app table.dataTable thead .sorting:after,.ot-app table.dataTable thead .sorting_asc:after,
.ot-app table.dataTable thead .sorting_desc:after{color:var(--muted-4);opacity:.6}
.ot-app .dataTables_paginate .paginate_button{
  border:1px solid transparent;border-radius:5px;background:transparent;color:var(--muted-2)!important;
  font:500 9.5px var(--font-mono);padding:5px 10px;margin:0 1px;cursor:pointer;
}
.ot-app .dataTables_paginate .paginate_button:hover{
  background:var(--surface-hov);border-color:var(--border-2);color:var(--text-2)!important;box-shadow:none;
}
.ot-app .dataTables_paginate .paginate_button.current,
.ot-app .dataTables_paginate .paginate_button.current:hover{
  background:var(--surface-hov);border-color:var(--border-3);color:var(--text-1)!important;
}
.ot-app .dataTables_paginate .paginate_button.disabled,
.ot-app .dataTables_paginate .paginate_button.disabled:hover{
  color:var(--muted-5)!important;background:transparent;border-color:transparent;cursor:default;
}
/* bootstrap-flavoured DT pagination */
.ot-app .pagination>li>a,.ot-app .pagination>li>span{
  background:transparent;border:1px solid var(--border-2);color:var(--muted-2);
  font:500 9.5px var(--font-mono);padding:6px 11px;margin-left:3px;border-radius:5px;
}
.ot-app .pagination>li>a:hover{background:var(--surface-hov);border-color:var(--border-3);color:var(--text-2)}
.ot-app .pagination>.active>a,.ot-app .pagination>.active>a:hover,.ot-app .pagination>.active>span{
  background:var(--surface-hov);border-color:var(--border-3);color:var(--text-1);
}
.ot-app .pagination>.disabled>a,.ot-app .pagination>.disabled>a:hover{
  background:transparent;border-color:var(--border-faint);color:var(--muted-5);
}
.ot-app .dt-buttons .dt-button,.ot-app .DTTT_button{
  background:transparent!important;border:1px solid var(--border-2)!important;border-radius:5px;
  color:var(--muted)!important;font:500 9.5px var(--font-mono);padding:6px 11px;box-shadow:none;text-shadow:none;
}
.ot-app .dt-buttons .dt-button:hover,.ot-app .DTTT_button:hover{border-color:var(--blue)!important;color:var(--blue-2)!important}

/* ── 10. TABS / PILLS / NAV ────────────────────────────────────────────── */
.ot-app .nav-tabs{border-bottom:1px solid var(--border)}
.ot-app .nav-tabs>li>a{
  border:0;border-bottom:2px solid transparent;border-radius:0;margin-right:2px;
  font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);
  background:transparent;padding:10px 14px;
}
.ot-app .nav-tabs>li>a:hover{background:transparent;border-color:transparent;border-bottom-color:var(--border-4);color:var(--text-2)}
.ot-app .nav-tabs>li.active>a,.ot-app .nav-tabs>li.active>a:hover,.ot-app .nav-tabs>li.active>a:focus{
  background:transparent;border:0;border-bottom:2px solid var(--green);color:var(--text-1);
}
.ot-app .tabs-container .panel-body{background:transparent;border:1px solid var(--border);border-top:0;border-radius:0 0 9px 9px}
.ot-app .tabs-container .nav-tabs>li.active>a{border-bottom:2px solid var(--green)}
.ot-app .tab-content>.tab-pane{background:transparent}
.ot-app .nav-pills>li>a{border-radius:5px;font:500 10px var(--font-mono);letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase}
.ot-app .nav-pills>li.active>a,.ot-app .nav-pills>li.active>a:hover{background:var(--surface-hov);color:var(--text-1)}
.ot-app .nav>li>a:hover,.ot-app .nav>li>a:focus{background:var(--surface-hov)}

/* ── 11. MODALS / DROPDOWNS / POPOVERS / ALERTS ───────────────────────── */
.ot-app .modal-content{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);color:var(--text-2);
}
.ot-app .modal-header{border-bottom:1px solid var(--border-soft);padding:16px 20px}
.ot-app .modal-header .modal-title,.ot-app .modal-title{font:600 15px var(--font-ui);color:var(--text)}
.ot-app .modal-body{background:transparent;padding:18px 20px}
.ot-app .modal-footer{border-top:1px solid var(--border-soft);background:var(--surface-2);margin-top:0;padding:13px 20px;border-radius:0 0 12px 12px}
.ot-app .inmodal .modal-body{background:transparent}
.ot-app .inmodal .modal-header{padding:20px}
.ot-app .modal-backdrop{background:#04060a}
.ot-app .modal-backdrop.in{opacity:.72}
.ot-app .close{color:var(--muted-2);opacity:1;text-shadow:none}
.ot-app .close:hover{color:var(--red)}
.ot-app .dropdown-menu{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:8px;
  box-shadow:0 14px 44px rgba(0,0,0,.45);padding:5px;
}
.ot-app .dropdown-menu>li>a{
  color:var(--text-2);border-radius:5px;padding:7px 11px;font:400 12px var(--font-ui);
}
.ot-app .dropdown-menu>li>a:hover{background:var(--surface-hov);color:var(--text-1)}
.ot-app .dropdown-menu .divider{background:var(--border-soft)}
.ot-app .popover{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:9px;
  box-shadow:0 14px 44px rgba(0,0,0,.45);color:var(--text-2);font-family:var(--font-ui);
}
.ot-app .popover-title{background:var(--surface-2);border-bottom:1px solid var(--border-soft);color:var(--text-1);border-radius:9px 9px 0 0}
.ot-app .popover-content{color:var(--text-2)}
.ot-app .popover.top>.arrow:after{border-top-color:var(--bg-panel)}
.ot-app .popover.bottom>.arrow:after{border-bottom-color:var(--bg-panel)}
.ot-app .popover.left>.arrow:after{border-left-color:var(--bg-panel)}
.ot-app .popover.right>.arrow:after{border-right-color:var(--bg-panel)}
.ot-app .tooltip-inner{background:var(--ink);color:var(--paper);font:400 10.5px var(--font-mono);border-radius:6px;padding:6px 10px}
.ot-app .tooltip.top .tooltip-arrow{border-top-color:var(--ink)}
.ot-app .tooltip.bottom .tooltip-arrow{border-bottom-color:var(--ink)}
.ot-app .alert{border-radius:8px;font:400 12px var(--font-ui);border-width:1px}
.ot-app .alert-success{background:var(--tint-green);border-color:var(--edge-green);color:var(--green)}
.ot-app .alert-info{background:var(--tint-blue);border-color:var(--edge-blue);color:var(--blue-2)}
.ot-app .alert-warning{background:var(--tint-amber);border-color:var(--edge-amber);color:var(--amber)}
.ot-app .alert-danger{background:color-mix(in srgb,var(--red) 8%,transparent);border-color:color-mix(in srgb,var(--red) 32%,transparent);color:var(--red)}

/* ── 12. PROGRESS / LISTS / MISC WIDGETS ───────────────────────────────── */
.ot-app .progress{background:var(--track);border-radius:4px;box-shadow:none;height:14px}
.ot-app .progress-mini{height:3px;border-radius:3px;margin-bottom:0}
.ot-app .progress-bar{background:var(--green);box-shadow:none}
.ot-app .progress-bar-navy-light,.ot-app .progress-bar-success{background:var(--green)}
.ot-app .progress-bar-info{background:var(--blue)}
.ot-app .progress-bar-warning{background:var(--amber)}
.ot-app .progress-bar-danger{background:var(--red)}
.ot-app .list-group-item{
  background:transparent;border-color:var(--border-faint);color:var(--text-2);padding:11px 14px;
}
.ot-app .list-group-item-heading{color:var(--text-1)}
.ot-app .list-group-item-text{color:var(--muted-2)}
.ot-app a.list-group-item:hover{background:var(--surface-hov);color:var(--text-1)}
.ot-app .no-padding{padding:0!important}
.ot-app .stat-list li{border-bottom:1px solid var(--border-faint)}
.ot-app .todo-list>li{background:var(--surface-2);border-left:4px solid var(--border-3)}
.ot-app .chat-element,.ot-app .feed-element{border-bottom:1px solid var(--border-faint)}
.ot-app .vertical-timeline-content{background:var(--surface);border:1px solid var(--border)}
.ot-app .widget{border-radius:11px}
.ot-app .navy-bg,.ot-app .bg-primary{background-color:var(--green)!important;color:var(--on-tint)}
.ot-app .lazur-bg,.ot-app .bg-info{background-color:var(--blue)!important;color:var(--on-tint)}
.ot-app .yellow-bg,.ot-app .bg-warning{background-color:var(--amber)!important;color:var(--on-tint)}
.ot-app .red-bg,.ot-app .bg-danger{background-color:var(--red)!important;color:var(--on-tint)}
.ot-app .border-bottom{border-bottom:1px solid var(--border)!important}
.ot-app .footer{background:transparent;border-top:1px solid var(--border);color:var(--muted-3)}
.ot-app .sk-spinner-wave div{background-color:var(--green)}
.ot-app .spiner-example{padding-top:0}

/* legacy inline-styled remnants that assume a white page */
.ot-app .ibox-content .well p,.ot-app .ibox-content address{color:var(--text-2)}
.ot-app .img-circle{background:var(--avatar-bg)}
.ot-app .thumbnail{background:var(--surface-2);border-color:var(--border-2)}

/* ── 13. PLUGIN SKINS ──────────────────────────────────────────────────── */
/* sweetalert */
.ot-app .sweet-alert{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:12px;font-family:var(--font-ui);
}
.ot-app .sweet-alert h2{color:var(--text);font:600 18px var(--font-ui)}
.ot-app .sweet-alert p{color:var(--muted-2);font-size:12.5px}
.ot-app .sweet-alert button{
  font:600 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:6px;
  box-shadow:none!important;padding:9px 17px;
}
.ot-app .sweet-alert button.confirm{background:var(--green)!important;color:var(--on-tint)}
.ot-app .sweet-alert button.cancel{background:transparent!important;border:1px solid var(--border-2);color:var(--muted)}
.ot-app .sweet-alert .sa-icon.sa-success .sa-placeholder{border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.ot-app .sweet-alert .sa-icon.sa-success .sa-line{background-color:var(--green)}
/* the success icon's animation masks are hardcoded white in sweetalert.css;
   they must match the panel background or they show as a disc + diagonal bars */
.ot-app .sweet-alert .sa-icon.sa-success::before,
.ot-app .sweet-alert .sa-icon.sa-success::after{background:var(--bg-panel)}
.ot-app .sweet-alert .sa-icon.sa-success .sa-fix{background-color:var(--bg-panel)}
/* toastr */
.ot-app #toast-container>div{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:9px;color:var(--text-1);
  opacity:1;box-shadow:0 14px 44px rgba(0,0,0,.45);
}
.ot-app #toast-container>.toast-success{border-left:3px solid var(--green)}
.ot-app #toast-container>.toast-error{border-left:3px solid var(--red)}
.ot-app #toast-container>.toast-info{border-left:3px solid var(--blue)}
.ot-app #toast-container>.toast-warning{border-left:3px solid var(--amber)}
/* jquery.steps wizard */
.ot-app .wizard>.steps a,.ot-app .wizard>.steps a:hover,.ot-app .wizard>.steps a:active{
  background:var(--surface-2);color:var(--muted-2);border-radius:6px;
  font:500 10px var(--font-mono);letter-spacing:.05em;
}
.ot-app .wizard>.steps .current a,.ot-app .wizard>.steps .current a:hover{
  background:var(--green);color:var(--on-tint);
}
.ot-app .wizard>.steps .done a,.ot-app .wizard>.steps .done a:hover{
  background:var(--surface-hov);color:var(--text-3);
}
.ot-app .wizard>.content{background:var(--surface);border:1px solid var(--border);border-radius:9px;min-height:120px}
.ot-app .wizard>.content>.body{position:relative;float:none;width:auto;height:auto;padding:20px}
.ot-app .wizard>.actions a,.ot-app .wizard>.actions a:hover{
  background:var(--green);color:var(--on-tint);border-radius:6px;
  font:600 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 15px;
}
.ot-app .wizard>.actions .disabled a,.ot-app .wizard>.actions .disabled a:hover{
  background:transparent;border:1px solid var(--border-faint);color:var(--muted-5);
}
/* chosen */
.ot-app .chosen-container-single .chosen-single,.ot-app .chosen-container .chosen-choices{
  background:var(--surface-2);border:1px solid var(--border-3);border-radius:6px;color:var(--text);
  box-shadow:none;font:400 11.5px var(--font-mono);height:auto;padding:7px 11px;background-image:none;
}
.ot-app .chosen-container-single .chosen-single span{color:var(--text)}
.ot-app .chosen-container .chosen-drop{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:0 0 8px 8px;box-shadow:0 14px 44px rgba(0,0,0,.45);
}
.ot-app .chosen-container .chosen-results li{color:var(--text-2);font:400 11.5px var(--font-ui)}
.ot-app .chosen-container .chosen-results li.highlighted{background:var(--surface-hov);color:var(--text-1)}
.ot-app .chosen-container-multi .chosen-choices li.search-choice{
  background:var(--surface-hov);border:1px solid var(--border-3);color:var(--text-2);border-radius:4px;box-shadow:none;background-image:none;
}
.ot-app .chosen-container .chosen-search input{background:var(--surface-2);border:1px solid var(--border-3);color:var(--text)}
/* select2 basics */
.ot-app .select2-container--default .select2-selection--single,
.ot-app .select2-container--default .select2-selection--multiple{
  background:var(--surface-2);border:1px solid var(--border-3);border-radius:6px;color:var(--text);
}
.ot-app .select2-dropdown{background:var(--bg-panel);border:1px solid var(--border-2)}
.ot-app .select2-container--default .select2-results__option--highlighted{background:var(--surface-hov);color:var(--text-1)}
/* bootstrap datepicker + jqueryui datepicker + clockpicker + daterangepicker */
.ot-app .datepicker-dropdown,.ot-app .ui-datepicker,.ot-app .daterangepicker,.ot-app .popover.clockpicker-popover{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:9px;color:var(--text-2);
  box-shadow:0 14px 44px rgba(0,0,0,.45);font-family:var(--font-mono);
}
.ot-app .datepicker table tr td,.ot-app .datepicker table tr th,
.ot-app .ui-datepicker td a,.ot-app .ui-datepicker th,
.ot-app .daterangepicker td,.ot-app .daterangepicker th{color:var(--text-2);background:transparent;border:0}
.ot-app .datepicker table tr td.day:hover,.ot-app .ui-datepicker td a:hover,
.ot-app .daterangepicker td.available:hover{background:var(--surface-hov);border-radius:5px}
.ot-app .datepicker table tr td.active,.ot-app .datepicker table tr td.active:hover,
.ot-app .daterangepicker td.active,.ot-app .daterangepicker td.active:hover{
  background:var(--green)!important;color:var(--on-tint)!important;border-radius:5px;background-image:none;text-shadow:none;
}
.ot-app .datepicker table tr td.old,.ot-app .datepicker table tr td.new,
.ot-app .daterangepicker td.off{color:var(--muted-5)}
.ot-app .ui-datepicker .ui-datepicker-header{background:var(--surface-2);border:0;color:var(--text-1)}
.ot-app .ui-widget-content{background:var(--bg-panel);border-color:var(--border-2);color:var(--text-2)}
.ot-app .ui-widget-header{background:var(--surface-2);border-color:var(--border-soft);color:var(--text-1)}
.ot-app .ui-state-default,.ot-app .ui-widget-content .ui-state-default{
  background:var(--surface-2);border-color:var(--border-2);color:var(--text-2);
}
.ot-app .ui-state-active,.ot-app .ui-widget-content .ui-state-active{background:var(--green);color:var(--on-tint);border-color:var(--green)}
.ot-app .ui-state-hover,.ot-app .ui-widget-content .ui-state-hover{background:var(--surface-hov);border-color:var(--border-3);color:var(--text-1)}
.ot-app .clockpicker-popover .popover-title{background:var(--surface-2);color:var(--text-1)}
.ot-app .clockpicker-plate{background:var(--surface-2);border-color:var(--border-3)}
.ot-app .clockpicker-tick{color:var(--text-2)}
.ot-app .clockpicker-tick:hover{background:var(--surface-hov)}
.ot-app .daterangepicker .calendar-table{background:transparent;border:0}
.ot-app .daterangepicker .ranges li{color:var(--muted-2);border-radius:5px}
.ot-app .daterangepicker .ranges li:hover,.ot-app .daterangepicker .ranges li.active{background:var(--surface-hov);color:var(--text-1);border:0}
.ot-app .daterangepicker:before,.ot-app .daterangepicker:after{display:none}
/* footable */
.ot-app .footable-odd{background:transparent}
/* morris / flot / chart wrappers keep transparent panels */
.ot-app .flot-chart{height:auto}
.ot-app .morris-hover.morris-default-style{
  background:var(--bg-panel);border:1px solid var(--border-2);border-radius:8px;color:var(--text-2);font-family:var(--font-mono);
}
.ot-app .flotTip{
  background:var(--bg-panel)!important;border:1px solid var(--border-2)!important;border-radius:7px;
  color:var(--text-2)!important;font-family:var(--font-mono)!important;padding:5px 9px!important;
}
/* jsoneditor / codemirror minimal */
.ot-app .CodeMirror{background:var(--surface-2);color:var(--text);border:1px solid var(--border-2);border-radius:8px;font-family:var(--font-mono)}
.ot-app .CodeMirror-gutters{background:var(--surface-3);border-color:var(--border-soft)}

/* ── 14. LEGACY SHELL PIECES STILL REFERENCED ──────────────────────────── */
.ot-app .navbar-static-top,.ot-app .row.border-bottom{background:transparent}
.ot-app .middle-box h3{color:var(--text-1)}
.ot-app .gray-section{background:var(--surface-2)}
.ot-app .ibox-title .pull-right{margin-left:auto}

/* ── 15. KPI STAT TILES (design: Dashboard KPI row, reused app-wide) ───── */
.ot-app .ibox-content h1.no-margins{font:600 26px/1 var(--font-mono);letter-spacing:-.02em;color:var(--text-1)}
.ot-app .ibox-content .stat-percent{font:500 10.5px var(--font-mono);color:var(--muted-2)}
.ot-app .ibox-content > small{font:400 9.5px var(--font-mono);color:var(--muted-4);letter-spacing:.04em}

/* ── 16. PAGE: DASHBOARD ───────────────────────────────────────────────── */
/* KPI value + pill accent per design order: blue / amber / green / purple */
.ot-page-dashboard .row .col-md-3:nth-child(1) .ibox-content h1.no-margins{color:var(--blue)}
.ot-page-dashboard .row .col-md-3:nth-child(2) .ibox-content h1.no-margins{color:var(--amber)}
.ot-page-dashboard .row .col-md-3:nth-child(3) .ibox-content h1.no-margins{color:var(--green)}
.ot-page-dashboard .row .col-md-3:nth-child(4) .ibox-content h1.no-margins{color:var(--purple)}
.ot-page-dashboard .row .col-md-3:nth-child(1) .ibox-title .label{
  border-color:color-mix(in srgb,var(--blue) 32%,transparent);
  background:color-mix(in srgb,var(--blue) 8%,transparent);color:var(--blue);
}
.ot-page-dashboard .row .col-md-3:nth-child(2) .ibox-title .label{
  border-color:color-mix(in srgb,var(--amber) 32%,transparent);
  background:color-mix(in srgb,var(--amber) 8%,transparent);color:var(--amber);
}
.ot-page-dashboard .row .col-md-3:nth-child(3) .ibox-title .label{
  border-color:color-mix(in srgb,var(--green) 32%,transparent);
  background:color-mix(in srgb,var(--green) 8%,transparent);color:var(--green);
}
.ot-page-dashboard .row .col-md-3:nth-child(4) .ibox-title .label{
  border-color:color-mix(in srgb,var(--purple) 32%,transparent);
  background:color-mix(in srgb,var(--purple) 8%,transparent);color:var(--purple);
}
/* activity panel: header row reads as a panel head; chart pane + stat rail */
.ot-page-dashboard .ibox:has(#activityChartWrap) .ibox-content{padding:0}
.ot-page-dashboard .ibox:has(#activityChartWrap) .ibox-content>div:first-child{
  padding:13px 17px;border-bottom:1px solid var(--border-soft);
}
.ot-page-dashboard .ibox:has(#activityChartWrap) .ibox-content>div:first-child h3{
  font:600 12px var(--font-ui);margin:0;color:var(--text);
}
.ot-page-dashboard .ibox:has(#activityChartWrap) .ibox-content>div:first-child>small,
.ot-page-dashboard .ibox:has(#activityChartWrap) .ibox-content>div:first-child small{
  font:400 10px var(--font-mono);color:var(--muted-3);
}
.ot-page-dashboard .ibox:has(#activityChartWrap) .ibox-content>div:first-child span small{
  font:400 9.5px var(--font-mono);color:var(--muted-4);
}
.ot-page-dashboard .ibox:has(#activityChartWrap) .m-t-sm{padding:18px 17px 14px}
.ot-page-dashboard .ibox:has(#activityChartWrap) hr{display:none}
#line_chart_side_bar{border-left:1px solid var(--border-soft)}
#line_chart_side_bar .stat-list li{border:0!important;margin-top:14px!important;padding:0}
#line_chart_side_bar .stat-list h2.no-margins{font:600 17px/1 var(--font-mono);letter-spacing:-.01em;color:var(--text-1)}
#line_chart_side_bar .stat-list li:nth-of-type(1) h2{color:var(--red)}
#line_chart_side_bar .stat-list li:nth-of-type(3) h2{color:var(--blue)}
#line_chart_side_bar .stat-list li:nth-of-type(4) h2{color:var(--purple)}
#line_chart_side_bar .stat-list li:nth-of-type(5) h2{color:var(--green)}
#line_chart_side_bar .stat-list li:nth-of-type(6) h2{font:600 15px var(--font-mono)}
#line_chart_side_bar .stat-list small{font:400 10.5px var(--font-ui);color:var(--muted);letter-spacing:0;text-transform:none}
#line_chart_side_bar .progress.progress-mini{height:4px;border-radius:3px;margin:6px 0 0;background:var(--track)}
/* violations filter: bootstrap btn-group reads as the design segmented control */
.ot-page-dashboard .ibox-title .btn-group{
  display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border-2);
  border-radius:7px;background:var(--surface-2);
}
.ot-page-dashboard .ibox-title .btn-group .btn,
.ot-page-dashboard .ibox-title .btn-group .btn+.btn{
  border:1px solid transparent;background:transparent;color:var(--muted-3);
  font:500 9.5px var(--font-mono);letter-spacing:.05em;padding:5px 10px;
  border-radius:5px;text-transform:uppercase;margin-left:0;
}
.ot-page-dashboard .ibox-title .btn-group .btn:hover{color:var(--text-2);border-color:transparent;background:transparent}
.ot-page-dashboard .ibox-title .btn-group .btn.btn-primary{
  background:var(--surface-hov);border-color:var(--border-2);color:var(--text);filter:none;
}
.ot-app .ibox-title .label.pull-right{order:10;margin-left:auto;float:none}
/* employee dashboard: single tracked-time panel */
.ot-page-dashboard .ibox:has(> .ibox-content > .ibox){border:0;background:transparent;overflow:visible}
.ot-page-dashboard .ibox:has(> .ibox-content > .ibox)>.ibox-content{padding:0}
.ot-page-dashboard .ibox:has(#lineChart2) .ibox-content{padding:0}
.ot-page-dashboard .ibox:has(#lineChart2) .ibox-content>div:first-child{
  padding:13px 17px;border-bottom:1px solid var(--border-soft);
}
.ot-page-dashboard .ibox:has(#lineChart2) .ibox-content>div:first-child h3{
  font:600 12px var(--font-ui);margin:0;color:var(--text);
}
.ot-page-dashboard .ibox:has(#lineChart2) .ibox-content>div:first-child small{
  font:400 10px var(--font-mono);color:var(--muted-3);
}
.ot-page-dashboard .ibox:has(#lineChart2) .m-t-sm{padding:18px 17px 14px}

/* ── 17. SEGMENTED CONTROL — replaces every btn-xs button group (design 03·ACTIONS) */
.ot-app .btn-group:has(>.btn-xs){
  display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border-2);
  border-radius:7px;background:var(--surface-2);vertical-align:middle;
}
.ot-app .btn-group:has(>.btn-xs) .btn-xs,
.ot-app .btn-group:has(>.btn-xs) .btn-xs+.btn-xs{
  border:1px solid transparent;background:transparent;color:var(--muted-3);
  font:500 9.5px var(--font-mono);letter-spacing:.05em;padding:5px 10px;
  border-radius:5px;text-transform:uppercase;margin-left:0;float:none;
}
.ot-app .btn-group:has(>.btn-xs) .btn-xs:hover{color:var(--text-2);border-color:transparent;background:transparent}
.ot-app .btn-group:has(>.btn-xs) .btn-xs.btn-primary{
  background:var(--surface-hov);border-color:var(--border-2);color:var(--text);filter:none;font-weight:500;
}

/* ── 18. PAGE: SNAPSHOTS ───────────────────────────────────────────────── */
.ot-page-snapshots .alert-info{
  display:inline-flex;align-items:center;gap:8px;
  font:400 10.5px var(--font-mono);color:var(--blue-2);
  padding:9px 13px;border-radius:8px;margin-bottom:0;
}
.ot-page-snapshots .ibox{border-radius:10px;margin-bottom:13px;transition:border-color .12s}
.ot-page-snapshots .ibox:hover{border-color:var(--border-4)}
.ot-page-snapshots .ibox-title{padding:11px 13px;text-align:left!important}
.ot-page-snapshots .ibox-title h3{
  font:500 12px var(--font-ui);color:var(--text-1);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;
}
.ot-page-snapshots .ibox-title h3.timestamps{
  font:400 10px var(--font-mono);color:var(--muted-2);max-width:45%;
}
.ot-page-snapshots .ibox-title .fa{font-size:12px!important;margin-left:8px!important;opacity:.9}
.ot-page-snapshots .ibox-content img{
  border:0!important;height:auto!important;aspect-ratio:16/10;object-fit:cover;
  display:block;background:var(--surface-3);
}
.ot-page-snapshots .col-lg-4{padding-left:7px;padding-right:7px}
.ot-page-snapshots h1{font:600 20px var(--font-ui)}
.ot-page-snapshots h4{font:400 12px var(--font-mono);color:var(--muted-2)}
.ot-page-snapshots .alert-info{width:auto!important}

/* ── 19. PAGE: RECORDINGS (user rail + date pager) ─────────────────────── */
.ot-app #side_user_list{border-top:0!important;background:var(--bg-panel)}
.ot-app #side_user_list .list-group-item,
.ot-page-recordings .list-group-item{
  background:transparent;border:0;border-radius:6px;padding:8px 10px;cursor:pointer;
  font:500 11.5px var(--font-ui);color:var(--text-1);margin-bottom:1px;
}
.ot-app #side_user_list .list-group-item:hover,
.ot-page-recordings .list-group-item:hover{background:var(--surface-hov);color:var(--text-1)}
.ot-app #side_user_list .list-group-item.active,
.ot-app #side_user_list .list-group-item.active:hover,
.ot-page-recordings .list-group-item.active,
.ot-page-recordings .list-group-item.active:hover{
  background:var(--surface-hov);border:0;border-left:2px solid var(--green);
  padding-left:8px;color:var(--text);
}
.ot-app #side_user_list .list-group-item small,
.ot-page-recordings .list-group-item small{font:400 9px var(--font-mono);color:var(--muted-4)}
.ot-app .list-group.elements-list{background:var(--bg-panel);border:0}
.ot-page-recordings .input-group-addon{cursor:pointer}
.ot-page-recordings .input-group-addon:hover{color:var(--text-2)}
.ot-page-recordings .input-group .form-control{text-align:center;font:500 10.5px var(--font-mono)}
.ot-page-recordings #recording_iframe_div{background:var(--bg)}

/* recordings tile grid (iframe page) */
.ot-page-recordings-content .ibox{border-radius:9px;transition:border-color .12s}
.ot-page-recordings-content .ibox:hover{border-color:var(--blue)}
.ot-page-recordings-content .ibox-title{padding:9px 11px;text-align:left!important;min-height:0}
.ot-page-recordings-content .ibox-title h3,
.ot-page-recordings-content .ibox-title h5{
  font:500 11px var(--font-mono);color:var(--text-2);margin:0;letter-spacing:0;text-transform:none;
}
.ot-page-recordings-content .ibox-title .fa{font-size:12px!important;opacity:.9}
.ot-page-recordings-content .ibox-content img{
  border:0!important;width:100%;display:block;background:var(--surface-3);
}
.ot-page-recordings-content h1{font:600 20px var(--font-ui)}
.ot-page-recordings-content .btn-primary{font:600 9.5px var(--font-mono);letter-spacing:.06em}

/* ── 20. PAGE: MONITOR (WebRTC wall) ───────────────────────────────────── */
.ot-page-monitor .ibox-title h3{font:500 12px var(--font-ui);color:var(--text-1);margin:6px 0 0}
.ot-page-monitor .ibox-content{padding:0}
.ot-page-monitor .ibox-content video{
  display:block;width:100%;aspect-ratio:16/10;background:var(--surface-3);object-fit:contain;
}
.ot-page-monitor .ibox-footer{text-align:center}

/* ── 21. PAGE: BROADCAST (employee client) ─────────────────────────────── */
.ot-page-broadcast video{background:var(--surface-3);border-radius:9px}
.ot-page-broadcast .btn-lg{font-size:12px}

/* ── 22. FULLCALENDAR SKIN (timesheets week + group day board) ─────────── */
.ot-app .fc{
  --fc-border-color:var(--border-faint);
  --fc-page-bg-color:transparent;
  --fc-neutral-bg-color:var(--surface-2);
  --fc-list-event-hover-bg-color:var(--surface-hov);
  --fc-today-bg-color:color-mix(in srgb,var(--green) 5%,transparent);
  --fc-event-bg-color:color-mix(in srgb,var(--green) 16%,transparent);
  --fc-event-border-color:var(--green);
  --fc-event-text-color:var(--text-1);
  --fc-highlight-color:color-mix(in srgb,var(--blue) 12%,transparent);
}
.ot-app .fc .fc-toolbar-title{font:600 14px var(--font-ui);color:var(--text)}
.ot-app .fc .fc-col-header-cell{background:var(--surface-2)}
.ot-app .fc .fc-col-header-cell-cushion{
  font:500 8.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-4);padding:8px 4px;
}
.ot-app .fc .fc-timegrid-slot-label-cushion,.ot-app .fc .fc-timegrid-axis-cushion,
.ot-app .fc .fc-daygrid-day-number{font:400 9.5px var(--font-mono);color:var(--muted-4)}
.ot-app .fc .fc-button{
  background:transparent;border:1px solid var(--border-2);color:var(--muted);
  font:500 9.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  border-radius:5px;padding:6px 11px;box-shadow:none!important;
}
.ot-app .fc .fc-button:hover{background:transparent;border-color:var(--blue);color:var(--blue-2)}
.ot-app .fc .fc-button-primary:not(:disabled).fc-button-active,
.ot-app .fc .fc-button-primary:not(:disabled):active{
  background:var(--surface-hov);border-color:var(--border-3);color:var(--text-1);
}
.ot-app .fc .fc-button:disabled{background:transparent;border-color:var(--border-faint);color:var(--muted-5);opacity:1}
.ot-app .fc .fc-event{border-radius:5px;font:500 10px var(--font-mono);padding:1px 4px}
.ot-app .fc .fc-timegrid-now-indicator-line{border-color:var(--red)}
.ot-app .fc .fc-timegrid-now-indicator-arrow{border-color:var(--red);color:var(--red)}
.ot-app .fc-theme-standard td,.ot-app .fc-theme-standard th{border-color:var(--border-faint)}
.ot-app .fc-theme-standard .fc-scrollgrid{border-color:var(--border-soft)}

/* ── 23. PAGES: TIMESHEETS / SCHEDULES / PAYROLL ───────────────────────── */
.ot-page-timesheets .ibox-title h5,.ot-page-timesheetsbyuser .ibox-title h5,
.ot-page-timesheetsbygroup .ibox-title h5{letter-spacing:.13em}
.ot-page-timesheets-content .wrapper-content,.ot-page-timesheetsbygroup-content .wrapper-content{padding:14px}
.ot-app .fc-event .fc-event-time{font-weight:600}
/* row actions inside tables are never filled (design: one filled action per screen) */
.ot-app .table .btn-primary{background:transparent;border-color:var(--border-2);color:var(--muted);font-weight:500}
.ot-app .table .btn-primary:hover,.ot-app .table .btn-primary:focus{
  background:transparent;border-color:var(--blue);color:var(--blue-2);filter:none;
}
.ot-app button[onclick*="selectall"].btn-primary,.ot-app button[onclick*="selectAll"].btn-primary{
  background:transparent;border-color:var(--border-2);color:var(--muted);font-weight:500;
}
.ot-app button[onclick*="selectall"].btn-primary:hover,.ot-app button[onclick*="selectAll"].btn-primary:hover{
  border-color:var(--text-3);color:var(--text-2);background:transparent;filter:none;
}

/* ── 24. OTD — DESIGN-NATIVE PAGE VOCABULARY ───────────────────────────────
   Pages rebuilt to emit the OnTask.html design markup directly use these
   classes (structure identical to the design; inline styles from the design
   live here so hover states work). Legacy Inspinia-vocabulary pages keep
   using sections 4-23 until they are converted. */

.otd-screen{padding:20px 24px 36px;display:flex;flex-direction:column;gap:16px}

.otd-panel{border:1px solid var(--border);border-radius:11px;background:var(--surface);overflow:hidden}
.otd-panel-head{display:flex;align-items:center;flex-wrap:wrap;gap:9px 13px;padding:13px 17px;border-bottom:1px solid var(--border-soft)}
.otd-panel-title{font:600 12px var(--font-ui);color:var(--text)}
.otd-panel-scope{font:400 10px var(--font-mono);color:var(--muted-3)}
.otd-panel-asof{margin-left:auto;font:400 9.5px var(--font-mono);color:var(--muted-4)}

/* KPI stat tile (design: Dashboard KPI row) */
.otd-kpi{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:15px 16px 14px}
.otd-kpi-top{display:flex;align-items:center;gap:8px}
.otd-kpi-label{font:500 9.5px var(--font-mono);color:var(--muted-3);letter-spacing:.11em}
.otd-kpi-line{display:flex;align-items:baseline;gap:5px;margin:11px 0 5px}
.otd-kpi-value{font:600 26px/1 var(--font-mono);letter-spacing:-.02em}
.otd-kpi-unit{font:500 11px var(--font-mono);color:var(--muted-3)}
.otd-kpi-sub{font:400 10.5px var(--font-mono);color:var(--muted-2);text-align:right}
.otd-kpi-caption{font:400 9.5px var(--font-mono);color:var(--muted-4);margin-top:8px}

/* signal pill: set the signal color via style="--pc:var(--red)" */
.otd-pill{padding:3px 8px;border-radius:4px;border:1px solid color-mix(in srgb,var(--pc,var(--muted-2)) 32%,transparent);
  background:color-mix(in srgb,var(--pc,var(--muted-2)) 8%,transparent);color:var(--pc,var(--muted-2));
  font:600 9px var(--font-mono);letter-spacing:.08em;white-space:nowrap}

/* thin progress bar */
.otd-bar{height:3px;border-radius:3px;background:var(--track);overflow:hidden}
.otd-bar>div{height:100%;border-radius:3px}

/* segmented control (design violTabs / seg spec) */
.otd-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border-2);border-radius:7px;background:var(--surface-2)}
.otd-seg-btn{padding:5px 10px;border-radius:5px;cursor:pointer;font:500 9.5px var(--font-mono);letter-spacing:.05em;
  color:var(--muted-3);background:transparent;border:1px solid transparent;white-space:nowrap}
.otd-seg-btn:hover{color:var(--text-2)}
.otd-seg-btn.active{color:var(--text);background:var(--surface-hov);border-color:var(--border-2)}

/* outlined mono action (design row action / footer action) */
.otd-btn{display:inline-block;padding:4px 9px;border:1px solid var(--border-2);border-radius:4px;cursor:pointer;
  font:500 9px var(--font-mono);color:var(--muted);background:transparent;text-decoration:none;letter-spacing:.03em;white-space:nowrap}
.otd-btn:hover{border-color:var(--blue);color:var(--blue-2);text-decoration:none}
.otd-btn.lg{padding:6px 11px;font-size:9.5px}
.otd-btn.danger:hover{border-color:var(--red);color:var(--red)}
.otd-btn.quiet:hover{border-color:var(--text-3);color:var(--text-2)}
.otd-btn.primary{border-color:color-mix(in srgb,var(--green) 45%,transparent);background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--green);font-weight:600}
.otd-btn.primary:hover{border-color:var(--green);color:var(--green)}
/* red peer of .primary for destructive actions (terminate / revoke) — tinted at rest, solid red edge on hover */
.otd-btn.destructive{border-color:color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);font-weight:600}
.otd-btn.destructive:hover,.otd-btn.destructive:focus{border-color:var(--red);background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}

/* design data table (ot-table.js drives it) */
.otd-dt-bar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:8px 17px;border-bottom:1px solid var(--border-soft);
  font:400 9.5px var(--font-mono);color:var(--muted-3)}
.otd-dt-bar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.otd-dt-len{padding:4px 6px;border:1px solid var(--border-3);border-radius:5px;background:var(--surface-2);color:var(--text-2);
  font:400 10px var(--font-mono);outline:none;cursor:pointer}
.otd-dt-q{width:188px;padding:5px 9px;border:1px solid var(--border-3);border-radius:5px;background:var(--surface-2);color:var(--text);
  outline:none;font:400 10px var(--font-mono)}
.otd-dt-head{display:grid;gap:12px;padding:10px 17px;border-bottom:1px solid var(--border-soft);background:var(--surface-2);
  font:500 8.5px var(--font-mono);color:var(--muted-4);letter-spacing:.12em}
.otd-th{display:flex;align-items:center;gap:5px;min-width:0}
.otd-th[data-sortable]{cursor:pointer;user-select:none}
.otd-th[data-sortable]:hover{color:var(--text-3)}
.otd-th.on{color:var(--text-2)}
.otd-caret{font-size:7.5px;letter-spacing:0;flex:none;color:var(--muted-5)}
.otd-caret.on{color:var(--blue-2)}
.otd-dt-row{display:grid;gap:12px;padding:11px 17px;border-bottom:1px solid var(--border-faint);align-items:center}
.otd-dt-row:hover{background:var(--surface-hov)}
.otd-dt-empty{padding:30px 17px;text-align:center;font:400 10.5px var(--font-mono);color:var(--muted-4)}
.otd-dt-actions{display:flex;align-items:center;gap:11px;padding:10px 17px;background:var(--surface-2)}
.otd-dt-actions .note{font:400 9.5px var(--font-mono);color:var(--muted-4)}
.otd-dt-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 17px;border-top:1px solid var(--border-soft);background:var(--surface-2)}
.otd-dt-info{font:400 9.5px var(--font-mono);color:var(--muted-4)}
.otd-dt-pages{margin-left:auto;display:flex;gap:4px}
.otd-pg{padding:4px 8px;text-align:center;border:1px solid var(--border-2);border-radius:4px;background:transparent;
  font:500 9.5px var(--font-mono);color:var(--muted-2);cursor:pointer}
.otd-pg.cur{border-color:var(--blue);background:var(--tint-blue);color:var(--blue-2);cursor:default}
.otd-pg.dis{color:var(--muted-5);cursor:default}

/* table cell type helpers (design row cells) */
.otd-cell-name{display:flex;align-items:center;gap:8px;min-width:0}
.otd-cell-name .av{width:22px;height:22px;flex:none;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font:600 8px var(--font-mono);color:var(--text-4)}
.otd-cell-name .nm{font:500 11.5px var(--font-ui);color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.otd-cell-title{font:400 10.5px var(--font-ui);color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.otd-cell-mono{font:400 10.5px var(--font-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.otd-cell-dim{font:400 10px var(--font-mono);color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.otd-cell-time{font:400 10.5px var(--font-mono);color:var(--text-3)}
.otd-cell-end{display:flex;gap:5px;justify-content:flex-end}

/* tinted callout (employee dashboard privacy note etc.) */
.otd-note{display:flex;gap:11px;padding:14px 16px;border:1px solid var(--edge-green);border-radius:10px;background:var(--tint-green)}
.otd-note .tick{width:15px;height:15px;flex:none;margin-top:1px;border-radius:4px;border:1px solid var(--green);display:flex;align-items:center;justify-content:center;font:700 9px var(--font-mono);color:var(--green)}
.otd-note .hd{font:600 11.5px var(--font-ui);color:var(--text-1)}
.otd-note .bd{font:400 10.5px/1.7 var(--font-mono);color:var(--muted);margin-top:5px}

/* chart panel internals (dashboard activity panel) */
.otd-chart-grid{display:grid;grid-template-columns:minmax(0,1fr) 268px}
.otd-chart-main{padding:18px 17px 14px;min-width:0}
.otd-chart-side{border-left:1px solid var(--border-soft);padding:17px;display:flex;flex-direction:column;gap:13px}
.otd-chart-days{display:flex;justify-content:space-between;margin-top:9px;font:400 9.5px var(--font-mono);color:var(--muted-4)}
.otd-chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border-faint)}
.otd-legend-item{display:flex;align-items:center;gap:6px;cursor:pointer}
.otd-legend-item .sw{width:9px;height:3px;border-radius:2px}
.otd-legend-item .lb{font:400 10px var(--font-mono);color:var(--muted)}
.otd-legend-item .tt{font:400 9.5px var(--font-mono);color:var(--muted-4)}
.otd-legend-item.off .sw{background:var(--muted-5) !important}
.otd-legend-item.off .lb{color:var(--muted-5)}
@media (max-width:1100px){.otd-chart-grid{grid-template-columns:1fr}.otd-chart-side{border-left:0;border-top:1px solid var(--border-soft)}}

/* theme segment glyphs (design: ◐ / ◑) */
.ot-seg-btn.ot-seg-glyph{padding:5px 11px;font:500 12px var(--font-mono)}
.ot-nav-item svg{flex:none;opacity:.85}
.otd-btn.hgreen:hover{border-color:var(--green);color:var(--green)}
.otd-btn.hpurple:hover{border-color:var(--purple);color:var(--purple)}
.otd-btn.xl{padding:7px 12px;font-size:10px;letter-spacing:.05em}
.otd-btn-fill{display:inline-block;padding:7px 13px;border:0;border-radius:6px;background:var(--green);color:var(--on-tint);cursor:pointer;font:600 10px var(--font-mono);letter-spacing:.06em;white-space:nowrap}
.otd-btn-fill:hover{filter:brightness(1.08)}
.otd-dt-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--green);cursor:pointer;margin:0}
.otd-banner{display:flex;align-items:center;flex-wrap:wrap;gap:10px 13px;padding:11px 15px;border:1px solid var(--edge-blue);border-radius:9px;background:var(--tint-blue);font:400 10.5px var(--font-mono);color:var(--blue-2)}
.otd-banner a{color:var(--blue-2);text-decoration:underline}
.otd-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.otd-toolbar .count{font:400 10px var(--font-mono);color:var(--muted-3)}
.otd-toolbar .acts{margin-left:auto;display:flex;gap:7px}
/* anchor variants must beat .ot-app a link color */
.ot-app a.otd-btn{color:var(--muted)}
.ot-app a.otd-btn:hover{color:var(--blue-2)}
.ot-app a.otd-btn.hgreen:hover{color:var(--green)}
.ot-app a.otd-btn.hpurple:hover{color:var(--purple)}
.ot-app a.otd-btn.danger:hover{color:var(--red)}
.ot-app a.otd-btn.destructive,.ot-app a.otd-btn.destructive:hover{color:var(--red)}
.ot-app a.otd-btn.quiet:hover{color:var(--text-2)}
.ot-app a.otd-btn-fill,.ot-app a.otd-btn-fill:hover{color:var(--on-tint)}
/* settings-card vocabulary (design isSettings) */
.ots-tab{padding:11px 14px;cursor:pointer;font:500 9.5px var(--font-mono);letter-spacing:.07em;color:var(--muted-3);border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0}
.ots-tab:hover{color:var(--text-2)}
.ots-tab.active{color:var(--text);border-bottom-color:var(--green)}
.ots-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-soft);background:var(--surface-2);padding:0 6px}
.ots-row{display:grid;grid-template-columns:186px minmax(0,1fr);gap:16px;align-items:center;padding:13px 0;border-bottom:1px dashed var(--border-2)}
.ots-lbl{font:500 11px var(--font-ui);color:var(--text-2)}
.ots-hint{font:400 9px var(--font-mono);color:var(--muted-4);margin-top:3px}
.ots-blurb{font:400 11px/1.7 var(--font-mono);color:var(--muted-3);margin-bottom:18px}
.ots-foot{display:flex;align-items:center;gap:11px;margin-top:18px}
.ots-foot .note{font:400 9.5px var(--font-mono);color:var(--muted-4);flex:1}
.ots-ro{padding:8px 11px;border:1px solid var(--border-faint);border-radius:6px;background:transparent;font:400 10.5px var(--font-mono);color:var(--muted-3);width:100%}
.ots-ed{padding:8px 11px;border:1px solid var(--border-3);border-radius:6px;background:var(--surface-2);font:400 10.5px var(--font-mono);color:var(--text-2);width:100%;outline:none}
select.ots-ed{cursor:pointer}
textarea.ots-ed{resize:vertical;min-height:88px}
.ot-app .otd-btn-fill.pad{padding:9px 16px}

/* nav anchors must beat .ot-app a link blue (design: muted gray, white active, green child-active) */
.ot-app a.ot-nav-item{color:var(--muted)}
.ot-app a.ot-nav-item:hover{color:var(--text-2)}
.ot-app a.ot-nav-item.active{color:var(--text)}
.ot-app a.ot-nav-child{color:var(--muted-2)}
.ot-app a.ot-nav-child:hover{color:var(--text-2)}
.ot-app a.ot-nav-child.active{color:var(--green)}

/* sidebar tenant footer (design: plan / seats / storage grid + seat bar) */
.ot-tenant{display:flex;flex-direction:column;gap:9px}
.ot-tenant-grid{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font:400 9.5px var(--font-mono);color:var(--muted-3)}
.ot-tenant-grid .v{color:var(--text-3)}
.ot-tenant-bar{height:3px;border-radius:3px;background:var(--track);overflow:hidden}
.ot-tenant-bar>div{height:100%;background:var(--green);border-radius:3px}