/* ═══════════════════════════════════════════════════════════════════════════
   SalesDesk premium skin — appearance only.

   Loaded LAST by tools/build_clone.py and switched on by `class="sd-skin"` on <html>.
   No markup, behaviour or data changes: it re-tunes the Ocean colour scheme's own
   palette (the --oc-* tokens every screen already routes through) and adds
   typography, depth, shape and motion on top.

   Scope: html.sd-skin[data-kf-scheme="ocean"] — Ocean is everyone's default, so this
   is the new default look. "Original" in the scheme picker still shows the old warm
   theme untouched, which doubles as an instant way back.

   Each selector here repeats the Ocean selector plus the .sd-skin class, so it
   outranks Ocean (and the stylesheets the app injects at runtime) on specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Palette: neutral graphite / Apple-style light, one teal accent ─────── */
html.sd-skin[data-kf-scheme="ocean"] {
  --oc-bg:        #09090B;
  --oc-bg-2:      #0E0E11;
  --oc-sf:        #141417;
  --oc-sf-2:      #1A1A1E;
  --oc-sf-3:      #232328;
  --oc-line:      #232328;
  --oc-line-2:    #313137;
  --oc-ink-1:     #F5F5F7;
  --oc-ink-2:     #C7C7CC;
  --oc-ink-3:     #98989F;
  --oc-ink-4:     #6E6E73;
  --oc-ac:        #2DD4BF;
  --oc-ac-on:     #03201C;
  --oc-ac-deep:   #5EEAD4;
  --oc-ac-soft:   #0F2A28;
  --oc-ac2:       #0A84FF;
  --oc-ac2-deep:  #64B5FF;
  --oc-ac2-soft:  #0B2238;
  --oc-shadow:    0 0 0 0.5px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 10px 32px rgba(0,0,0,0.38);

  /* -apple-system = SF Pro in Safari / Apple devices. Everyone else gets Inter (the closest open
     match to SF). BlinkMacSystemFont is deliberately left out: Chrome maps it to Segoe UI on Windows. */
  --sd-sans: -apple-system, "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --sd-display: -apple-system, "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sd-glass: rgba(14,14,17,0.72);
  --sd-hover: rgba(255,255,255,0.05);
  --sd-ring: rgba(45,212,191,0.28);
}
html.sd-skin[data-kf-scheme="ocean"][data-kf-theme="light"] {
  --oc-bg:        #F5F5F7;
  --oc-bg-2:      #EDEDF0;
  --oc-sf:        #FFFFFF;
  --oc-sf-2:      #F7F7F9;
  --oc-sf-3:      #EEEEF1;
  --oc-line:      #E5E5EA;
  --oc-line-2:    #D2D2D7;
  --oc-ink-1:     #1D1D1F;
  --oc-ink-2:     #3A3A3C;
  --oc-ink-3:     #6E6E73;
  --oc-ink-4:     #8E8E93;
  --oc-ac:        #0F766E;             /* deep enough for white labels at 4.5:1 */
  --oc-ac-on:     #FFFFFF;
  --oc-ac-deep:   #0B5F58;
  --oc-ac-soft:   #E3F4F1;
  --oc-ac2:       #0071E3;
  --oc-ac2-deep:  #0058B0;
  --oc-ac2-soft:  #E6F0FC;
  --oc-shadow:    0 0 0 0.5px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);

  --sd-glass: rgba(251,251,253,0.78);
  --sd-hover: rgba(0,0,0,0.04);
  --sd-ring: rgba(15,118,110,0.22);
}

/* ── 2. Typography: SF Pro on Apple devices, Inter elsewhere, tabular figures ── */
html.sd-skin[data-kf-scheme="ocean"] :is(#tpatab-performance, #tpatab-agents, #tpatab-policies, #tpatab-hierarchy,
  #tpatab-eod, #tpatab-agencies, #tpatab-agencyadmin, #panel-goals, #panel-policies, #panel-leaderboard, #panel-carriers,
  #panel-resources, #panel-inboundcalls, #panel-inboundrefund, #panel-inboundonboard, #panel-inboundstart, #panel-dialtracker,
  #panel-compgrid, #panel-leadvendors, #panel-training, #panel-calculator, #panel-profile, #panel-weeklytracker,
  #panel-teamperf, #panel-recruiterhq, #panel-underwriting, #panel-worksheet, #panel-admin, #panel-eappguides, #panel-crm,
  #panel-licensing) {
  --tp-sans: var(--sd-sans); --tp-mono: var(--sd-sans);
  --tk-sans: var(--sd-sans); --tk-mono: var(--sd-sans);
  --bob-sans: var(--sd-sans); --bob-mono: var(--sd-sans);
  --lb-sans: var(--sd-sans); --lb-mono: var(--sd-sans);
  --kf-sans: var(--sd-sans); --kf-mono: var(--sd-sans);
  --tp-radius: 16px; --tp-radius-sm: 12px;
  --tk-radius: 16px; --bob-radius: 16px; --lb-radius: 16px; --kf-radius: 14px;
}
html.sd-skin[data-kf-scheme="ocean"] body {
  font-family: var(--sd-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.006em;
}
/* Hard-coded families (Plus Jakarta Sans, Instrument Sans, Geist, JetBrains Mono…) fold into
   one system family. :where() keeps this at the prefix's specificity so token-driven rules
   (now pointing at the same stack) are unaffected. */
html.sd-skin[data-kf-scheme="ocean"] :where(body *:not(svg, svg *, code, pre, kbd)) {
  font-family: var(--sd-sans) !important;
}
html.sd-skin[data-kf-scheme="ocean"] :where(h1, h2, h3) { letter-spacing: -0.022em; }
html.sd-skin[data-kf-scheme="ocean"] :where(h1, h2) { font-family: var(--sd-display) !important; }

/* ── 3. App shell ──────────────────────────────────────────────────────── */
/* Sidebar: frosted, hairline edge, calmer selection */
html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar {
  background: var(--sd-glass) !important;          /* Ocean sets this with !important */
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-right: 0.5px solid var(--oc-line) !important;
  box-shadow: none;
}
html.sd-skin[data-kf-scheme="ocean"][data-kf-theme="light"] .ss-sidebar { background: var(--sd-glass) !important; }
html.sd-skin[data-kf-scheme="ocean"] :is(.ss-sidebar-btn, .ss-navsub-btn) {
  border-radius: 10px;
  transition: background-color .18s var(--sd-ease), color .18s var(--sd-ease), box-shadow .18s var(--sd-ease);
}
html.sd-skin[data-kf-scheme="ocean"] :is(.ss-sidebar-btn, .ss-navsub-btn):hover:not(.active) {
  background: var(--sd-hover);
}
html.sd-skin[data-kf-scheme="ocean"] :is(.ss-sidebar-btn, .ss-navsub-btn).active,
html.sd-skin[data-kf-scheme="ocean"][data-kf-theme="light"] :is(.ss-sidebar-btn, .ss-navsub-btn).active {
  background: var(--oc-ac-soft) !important;
  color: var(--oc-ink-1) !important;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--oc-ac) 35%, transparent);
}
html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar-btn.active svg,
html.sd-skin[data-kf-scheme="ocean"][data-kf-theme="light"] .ss-sidebar-btn.active svg { color: var(--oc-ac) !important; }
html.sd-skin[data-kf-scheme="ocean"] .kf-brand-mark {
  border-radius: 10px;
  background: linear-gradient(135deg, #2dd4bf, #38bdf8);
  color: #03201C;
  box-shadow: 0 4px 14px rgba(45,212,191,0.32), inset 0 1px 0 rgba(255,255,255,0.35);
}
html.sd-skin[data-kf-scheme="ocean"] .kf-brand-name { letter-spacing: -0.02em; }

/* Primary actions: Submit Deal (filled) / Submit KPIs (tinted) */
html.sd-skin[data-kf-scheme="ocean"] .ss-action-btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .12s var(--sd-ease), box-shadow .2s var(--sd-ease), filter .2s var(--sd-ease), background-color .2s;
}
html.sd-skin[data-kf-scheme="ocean"] .ss-action-btn.deal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--oc-ac) 86%, #fff), var(--oc-ac));
  color: var(--oc-ac-on);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 20px -8px color-mix(in srgb, var(--oc-ac) 70%, transparent);
}
html.sd-skin[data-kf-scheme="ocean"] .ss-action-btn.deal:hover { filter: brightness(1.05); }
html.sd-skin[data-kf-scheme="ocean"] .ss-action-btn.kpi {
  background: color-mix(in srgb, var(--oc-ac) 9%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--oc-ac) 38%, transparent);
  color: var(--oc-ac-deep);
}
html.sd-skin[data-kf-scheme="ocean"][data-kf-theme="light"] .ss-action-btn.kpi { color: var(--oc-ac); }

/* "Needs attention" bar: frosted strip, pill chips */
html.sd-skin[data-kf-scheme="ocean"] .ss-notifbar {
  background: var(--sd-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--oc-line);
}
html.sd-skin[data-kf-scheme="ocean"] .ss-notif-chip {
  border-radius: 999px;
  transition: transform .15s var(--sd-ease), background-color .2s;
}
html.sd-skin[data-kf-scheme="ocean"] .ss-notif-chip:hover { transform: translateY(-1px); }

/* ── 4. Surfaces: softer depth on the common cards ─────────────────────── */
html.sd-skin[data-kf-scheme="ocean"] :is(.tp-card, .tk-card, .dt-card, .comp-card, .tp-kpi-panel, .wt-stat) {
  border-radius: 16px;
  box-shadow: var(--oc-shadow);
}

/* ── 5. Dialogs: blurred scrim, rounder sheet, gentle entrance ─────────── */
html.sd-skin[data-kf-scheme="ocean"] :is(.ss-submit-overlay, .ss-modal-overlay, .ss-confirm-overlay, .ss-alert-overlay,
  .ss-goal-overlay, .ss-signup-overlay, .ss-pd-edit-overlay, .ss-milestone-overlay, .tp-modal-backdrop, .tk-modal-backdrop,
  .bob-modal-backdrop, .ss-tv-modal-backdrop, .tp-ae-overlay, .mp-edit-overlay) {
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
html.sd-skin[data-kf-scheme="ocean"] :is(.ss-submit-overlay-inner, .ss-goal-overlay-inner, .ss-modal, .ss-confirm-box,
  .ss-alert-box, .tk-modal, .tp-modal, .bob-modal, .rhq-modal, .crm-modal) {
  border-radius: 20px !important;
  box-shadow: 0 0 0 0.5px var(--oc-line-2), 0 24px 64px rgba(0,0,0,0.35);
  animation: sd-sheet-in .28s var(--sd-ease);
}
@keyframes sd-sheet-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }

/* ── 6. Controls: inputs, buttons, focus ───────────────────────────────── */
html.sd-skin[data-kf-scheme="ocean"] :is(input:not([type=checkbox], [type=radio], [type=range], [type=color]), select, textarea) {
  border-radius: 10px;
  transition: border-color .15s var(--sd-ease), box-shadow .15s var(--sd-ease), background-color .15s;
}
html.sd-skin[data-kf-scheme="ocean"] :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea):focus {
  outline: none;
  border-color: var(--oc-ac) !important;
  box-shadow: 0 0 0 4px var(--sd-ring) !important;
}
html.sd-skin[data-kf-scheme="ocean"] :is(input[type=checkbox], input[type=radio]) { accent-color: var(--oc-ac); }
html.sd-skin[data-kf-scheme="ocean"] button {
  transition: background-color .18s var(--sd-ease), color .18s var(--sd-ease), border-color .18s var(--sd-ease),
              box-shadow .18s var(--sd-ease), opacity .18s, transform .12s var(--sd-ease);
}
html.sd-skin[data-kf-scheme="ocean"] button:active:not(:disabled) { transform: scale(0.98); }
html.sd-skin[data-kf-scheme="ocean"] :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--oc-ac) 70%, transparent);
  outline-offset: 2px;
}

/* ── 7. Small details ──────────────────────────────────────────────────── */
html.sd-skin[data-kf-scheme="ocean"] ::selection { background: color-mix(in srgb, var(--oc-ac) 28%, transparent); }
html.sd-skin[data-kf-scheme="ocean"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html.sd-skin[data-kf-scheme="ocean"] ::-webkit-scrollbar-track { background: transparent; }
html.sd-skin[data-kf-scheme="ocean"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--oc-ink-1) 16%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}
html.sd-skin[data-kf-scheme="ocean"] ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--oc-ink-1) 28%, transparent); }
html.sd-skin[data-kf-scheme="ocean"] { scrollbar-color: color-mix(in srgb, var(--oc-ink-1) 18%, transparent) transparent; }

/* ── 8. Respect reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.sd-skin[data-kf-scheme="ocean"] * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── 9. Sign-in: tighter display tracking, Apple-style ─────────────────── */
html.sd-skin[data-kf-scheme="ocean"] .kairos-title { letter-spacing: -0.03em; }
html.sd-skin[data-kf-scheme="ocean"] .kairos-login input { border-radius: 12px; }
html.sd-skin[data-kf-scheme="ocean"] .kairos-login-submit { border-radius: 12px; letter-spacing: -0.01em; }

/* ── 10. Sidebar like Retell: brand + Submit buttons pinned on top, footer pinned at the bottom,
         the menu scrolls behind them (frosted). Desktop only; phones keep the top-bar menu. ── */
@media (min-width: 769px) {
  html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar { padding-top: 0; padding-bottom: 0; }
  html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar-header,
  html.sd-skin[data-kf-scheme="ocean"] .ss-quick-actions,
  html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar-footer {
    position: sticky; z-index: 4;
    margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px;
    width: calc(100% + 16px); box-sizing: border-box;
    background: var(--sd-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar-header { top: 0; }
  html.sd-skin[data-kf-scheme="ocean"] .ss-quick-actions {
    top: var(--sd-sbh, 64px); padding-bottom: 10px; margin-bottom: 4px;
    transition: box-shadow .2s var(--sd-ease);
  }
  html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar.sd-scrolled .ss-quick-actions {
    box-shadow: 0 0.5px 0 var(--oc-line), 0 8px 16px -12px rgba(0,0,0,0.35);
  }
  html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar-footer {
    bottom: 0; padding-bottom: 12px; margin-top: auto;
    box-shadow: 0 -0.5px 0 var(--oc-line);
  }
  /* the item list itself keeps a little air above the footer */
  html.sd-skin[data-kf-scheme="ocean"] .ss-sidebar-grid { padding-bottom: 10px; }
}