/* ============================================================
   SCHEDMATE ELITE POLISH v105
   Final theme/component normalization loaded after every module CSS.
   Focus: readable light/dark modes, consistent shapes, responsive controls,
   accessible focus states, predictable dialogs, and no hidden text.
============================================================ */
:root {
  color-scheme: light;
  --sm105-bg: #f3f6fa;
  --sm105-bg-soft: #eef3f8;
  --sm105-surface: #ffffff;
  --sm105-surface-2: #f7f9fc;
  --sm105-surface-3: #eef2f7;
  /* text/muted/border alias the shared --sm-* palette from theme.css so
     elite/growth-styled surfaces and dashboard.css/module surfaces render
     the exact same grays instead of two hand-tuned near-matches. */
  --sm105-text: var(--sm-text, #0b1728);
  --sm105-text-2: #34445a;
  --sm105-muted: var(--sm-muted, #5b6b80);
  --sm105-faint: var(--sm-dim, #98a4b4);
  --sm105-border: var(--sm-border, rgba(18, 35, 58, .11));
  --sm105-border-strong: rgba(18, 35, 58, .18);
  --sm105-primary: #5868ec;
  --sm105-primary-2: #4052d5;
  --sm105-primary-soft: #edf0ff;
  --sm105-success: #15845e;
  --sm105-warning: #b87516;
  --sm105-danger: #cf4055;
  --sm105-ring: 0 0 0 4px rgba(88, 104, 236, .14);
  --sm105-shadow-xs: 0 5px 16px rgba(12, 29, 52, .055);
  --sm105-shadow-sm: 0 14px 38px rgba(12, 29, 52, .075);
  --sm105-shadow-lg: 0 35px 100px rgba(5, 16, 34, .24);
  --sm105-control-h: 44px;
  --sm105-radius-sm: 10px;
  --sm105-radius: 14px;
  --sm105-radius-lg: 20px;

  /* Re-map legacy systems to one source of truth. */
  --sm-e-bg: var(--sm105-bg);
  --sm-e-surface: rgba(255,255,255,.88);
  --sm-e-surface-solid: var(--sm105-surface);
  --sm-e-surface-2: var(--sm105-surface-2);
  --sm-e-text: var(--sm105-text);
  --sm-e-muted: var(--sm105-muted);
  --sm-e-border: var(--sm105-border);
  --sm-e-shadow-xs: var(--sm105-shadow-xs);
  --sm-e-shadow-sm: var(--sm105-shadow-sm);
  --growth-surface: var(--sm105-surface);
  --growth-border: var(--sm105-border);
  --growth-text: var(--sm105-text);
  --growth-muted: var(--sm105-muted);
}

html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
  --sm105-bg: #07111f;
  --sm105-bg-soft: #0a1626;
  --sm105-surface: #0e1c2e;
  --sm105-surface-2: #122238;
  --sm105-surface-3: #172a43;
  --sm105-text: var(--sm-text, #f2f6fb);
  --sm105-text-2: #c8d3e1;
  --sm105-muted: var(--sm-muted, #93a2b5);
  --sm105-faint: var(--sm-dim, #6e7f94);
  --sm105-border: var(--sm-border, rgba(220, 232, 246, .105));
  --sm105-border-strong: rgba(220, 232, 246, .19);
  --sm105-primary: #7d89ff;
  --sm105-primary-2: #6473f2;
  --sm105-primary-soft: rgba(125, 137, 255, .14);
  --sm105-success: #42c795;
  --sm105-warning: #f2b755;
  --sm105-danger: #ff7486;
  --sm105-ring: 0 0 0 4px rgba(125, 137, 255, .18);
  --sm105-shadow-xs: 0 7px 20px rgba(0, 0, 0, .15);
  --sm105-shadow-sm: 0 18px 48px rgba(0, 0, 0, .24);
  --sm105-shadow-lg: 0 38px 110px rgba(0, 0, 0, .48);
  --sm-e-bg: var(--sm105-bg);
  --sm-e-surface: rgba(14,28,46,.92);
  --sm-e-surface-solid: var(--sm105-surface);
  --sm-e-surface-2: var(--sm105-surface-2);
  --sm-e-text: var(--sm105-text);
  --sm-e-muted: var(--sm105-muted);
  --sm-e-border: var(--sm105-border);
  --growth-surface: var(--sm105-surface);
  --growth-border: var(--sm105-border);
  --growth-text: var(--sm105-text);
  --growth-muted: var(--sm105-muted);
}

html, body { background: var(--sm105-bg); }
body.sm-body {
  color: var(--sm105-text);
  background:
    radial-gradient(900px 460px at 95% -10%, color-mix(in srgb, var(--sm105-primary) 12%, transparent), transparent 68%),
    linear-gradient(180deg, var(--sm105-bg), var(--sm105-bg-soft));
}
body.sm-body, body.sm-body button, body.sm-body input, body.sm-body select, body.sm-body textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Typography: preserve hierarchy instead of forcing one universal color. */
.sm-view :where(h1,h2,h3,h4,h5,h6,.sm-card-title,.sm-panel-title,.sm-modal-title) { color: var(--sm105-text); }
.sm-view :where(p,small,.sm-muted,.sm-help,.desc) { color: var(--sm105-muted); }
.sm-view :where(strong,b) { color: inherit; }

/* App shell */
.sm-main { min-width: 0; background: transparent !important; }
.sm-content { width: 100%; max-width: 1680px; margin-inline: auto; padding: clamp(20px, 2.4vw, 34px) !important; }
.sm-sidebar { border-right-color: rgba(255,255,255,.07) !important; }
.sm-sidebar .sm-nav-item { min-height: 46px; border-radius: 13px !important; }
.sm-sidebar .sm-nav-item:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(137,151,255,.78); }
.sm-sidebar .sm-icon { display: grid; place-items: center; width: 22px; min-width: 22px; line-height: 1; }
.sm-sidebar .sm-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
/* The sidebar search is a composed control: the .sm-side-search wrapper owns
   the pill (background, border, radius, padding) and the <input> must stay
   invisible inside it. Six blanket "input, select, textarea" rules across
   premium/luxury/elite/theme fight over this one field, and in light mode
   elite's body.sm-body :where(input,…) won with a solid white fill that
   painted over the dark sidebar pill and clipped the placeholder. Pin it
   here, in the last-loaded normalization layer, so context beats blanket. */
.sm-side-search input {
  color: #e9f0f9 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}
.sm-side-search input:focus,
.sm-side-search input:focus-visible { outline: 0 !important; box-shadow: none !important; }
.sm-side-search input::placeholder { color: rgba(222,232,245,.48) !important; }
.sm-side-search .sm-search-ico { flex: 0 0 auto; line-height: 1; }

/* Top bar: every control uses the same geometry. */
.sm-topbar { min-height: 76px !important; padding: 12px clamp(16px,2vw,30px) !important; }
.sm-topbar-right { display: flex; align-items: center; gap: 8px !important; min-width: 0; }
.sm-topbar-right > :where(button,.sm-quickadd) { flex: 0 0 auto; }
/* Uniform 44px control height for every topbar control. The theme toggle is
   deliberately NOT in this list: it is a pill, sized canonically in theme.css,
   and carries its own >=44px hit area via ::after. */
.sm-topbar .sm-btn,
.sm-command-trigger,
.sm-help-btn,
#smUpgradeBtn,
#smQuickAdd {
  min-height: var(--sm105-control-h) !important;
  height: var(--sm105-control-h) !important;
  border-radius: var(--sm105-radius) !important;
}
/* The notification bell is injected by schedmate.elite.js as .sm-icon-button
   and defaulted to 40px, leaving it visibly shorter than its neighbours.
   Scoped to the topbar so the drawer's own close button keeps its size. */
.sm-topbar .sm-icon-button {
  width: var(--sm105-control-h) !important;
  height: var(--sm105-control-h) !important;
  min-height: var(--sm105-control-h) !important;
  border-radius: var(--sm105-radius) !important;
}
.sm-topbar .sm-btn,
.sm-command-trigger {
  border: 1px solid var(--sm105-border) !important;
  color: var(--sm105-text-2) !important;
  background: color-mix(in srgb, var(--sm105-surface) 92%, transparent) !important;
  box-shadow: var(--sm105-shadow-xs) !important;
}
.sm-topbar .sm-btn:hover,
.sm-command-trigger:hover { color: var(--sm105-text) !important; border-color: var(--sm105-border-strong) !important; transform: translateY(-1px); }
.sm-topbar #smUpgradeBtn { color: #fff !important; border-color: transparent !important; background: linear-gradient(135deg,var(--sm105-primary),var(--sm105-primary-2)) !important; }
.sm-command-trigger { min-width: 166px !important; padding: 0 10px 0 13px !important; gap: 9px !important; }
.sm-command-trigger > svg { width: 18px !important; height: 18px !important; color: var(--sm105-text-2) !important; fill: none !important; stroke: currentColor !important; }
.sm-command-trigger kbd { margin-left: auto; color: var(--sm105-muted) !important; background: var(--sm105-surface-2) !important; border-color: var(--sm105-border) !important; }
/* theme toggle geometry is owned by theme.css (canonical, loaded on every page) */

/* Shared interactive controls */
.sm-btn,
button,
[role="button"] { transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease; }
.sm-btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline: none !important; box-shadow: var(--sm105-ring) !important; }
button:disabled,.sm-btn:disabled { cursor: not-allowed !important; opacity: .55 !important; transform: none !important; }
.sm-btn-primary { color: #fff !important; border-color: transparent !important; background: linear-gradient(135deg,var(--sm105-primary),var(--sm105-primary-2)) !important; box-shadow: 0 11px 25px color-mix(in srgb,var(--sm105-primary) 24%,transparent) !important; }
.sm-btn-ghost { color: var(--sm105-text-2) !important; border-color: var(--sm105-border) !important; background: var(--sm105-surface) !important; }
.sm-btn-ghost:hover { color: var(--sm105-text) !important; border-color: var(--sm105-border-strong) !important; background: var(--sm105-surface-2) !important; }
.sm-danger { color: var(--sm105-danger) !important; }

/* Cards/panels */
.sm-card,.sm-panel,.sm-box,.sm-wrapper,.growth-card,.growth-pipeline-shell {
  color: var(--sm105-text);
  background: var(--sm105-surface) !important;
  border-color: var(--sm105-border) !important;
  box-shadow: var(--sm105-shadow-sm) !important;
}
.sm-card,.sm-panel,.growth-card { border-radius: var(--sm105-radius-lg) !important; }
.sm-card:hover { border-color: var(--sm105-border-strong) !important; }
.sm-metric { color: var(--sm105-text) !important; }
.sm-metric.success { color: var(--sm105-success) !important; }
.sm-chip,.badge,.pill,.growth-status,.growth-source {
  border-color: var(--sm105-border) !important;
  background: var(--sm105-surface-2) !important;
}

/* Inputs and searches */
.sm-input,.sm-select,
.sm-view input:not([type="checkbox"]):not([type="radio"]),
.sm-view select,
.sm-view textarea,
.growth-search,.growth-field input,.growth-field select,.growth-field textarea,.growth-slug,
.tl-search {
  color: var(--sm105-text) !important;
  background: var(--sm105-surface-2) !important;
  border-color: var(--sm105-border) !important;
}
.sm-view input::placeholder,.sm-view textarea::placeholder { color: var(--sm105-faint) !important; opacity: 1; }
.sm-view input:hover,.sm-view select:hover,.sm-view textarea:hover { border-color: var(--sm105-border-strong) !important; }
.sm-view input:focus,.sm-view select:focus,.sm-view textarea:focus { border-color: var(--sm105-primary) !important; box-shadow: var(--sm105-ring) !important; }
html.dark select option,html[data-theme="dark"] select option { color: var(--sm105-text); background: var(--sm105-surface); }
input[type="checkbox"],input[type="radio"] { accent-color: var(--sm105-primary); }

/* Tables */
.sm-table-wrap,.growth-table-wrap { border: 1px solid var(--sm105-border) !important; border-radius: 16px !important; background: var(--sm105-surface) !important; }
table { color: var(--sm105-text); }
thead th { color: var(--sm105-muted) !important; background: var(--sm105-surface-2) !important; border-color: var(--sm105-border) !important; }
tbody td { color: var(--sm105-text-2) !important; border-color: var(--sm105-border) !important; }
tbody tr:hover td { background: color-mix(in srgb,var(--sm105-primary) 6%,var(--sm105-surface)) !important; }

/* Dialogs / overlays */
.sm-modal-backdrop,.growth-dialog::backdrop,.sm-command-backdrop { background: rgba(3,10,20,.61) !important; backdrop-filter: blur(10px) saturate(.9); }
.sm-modal-card,.growth-dialog-card,.sm-command-panel,.support-card {
  color: var(--sm105-text);
  background: var(--sm105-surface) !important;
  border: 1px solid var(--sm105-border-strong) !important;
  box-shadow: var(--sm105-shadow-lg) !important;
}
.sm-modal-head,.sm-modal-actions,.growth-dialog-card>header,.growth-dialog-card>footer { background: var(--sm105-surface) !important; border-color: var(--sm105-border) !important; }
.sm-modal-title,.growth-dialog-card h3 { color: var(--sm105-text) !important; }
.growth-icon-btn { color: var(--sm105-muted) !important; background: var(--sm105-surface-2) !important; border-color: var(--sm105-border) !important; }
.growth-icon-btn:hover { color: var(--sm105-text) !important; border-color: var(--sm105-border-strong) !important; }

/* Growth OS hero: explicit high-contrast colors in both themes. */
.growth-form-hero,.growth-automation-hero {
  color: #f5f8ff !important;
  border-color: rgba(142,155,255,.22) !important;
  background:
    radial-gradient(600px 250px at 0 0,rgba(120,134,255,.28),transparent 70%),
    linear-gradient(135deg,#071426,#10243d) !important;
}
.growth-form-hero :where(h1,h2,h3,strong),
.growth-automation-hero :where(h1,h2,h3,strong) { color: #f5f8ff !important; }
.growth-form-hero :where(p,small),.growth-automation-hero :where(p,small) { color: rgba(229,237,248,.72) !important; }
.growth-form-hero .growth-eyebrow,.growth-automation-hero .growth-eyebrow { color: #9eaaff !important; }
.growth-flow span { color: #e8eef9 !important; background: rgba(255,255,255,.075) !important; border-color: rgba(255,255,255,.14) !important; }
.growth-flow i { color: #a8b2ff !important; }
.growth-page-head h2,.growth-form-card h3,.growth-empty h3,.growth-stat-grid strong { color: var(--sm105-text) !important; }
.growth-page-head p,.growth-form-card p,.growth-empty p,.growth-stat-grid span,.growth-stat-grid small { color: var(--sm105-muted) !important; }
.growth-form-card,.growth-stat-grid article,.growth-kanban-col,.growth-integration-card {
  color: var(--sm105-text);
  background: var(--sm105-surface) !important;
  border-color: var(--sm105-border) !important;
}
.growth-kanban-col { background: var(--sm105-surface-2) !important; }
.growth-row-actions button,.growth-form-card footer button { color: var(--sm105-text-2) !important; border-color: var(--sm105-border) !important; background: var(--sm105-surface-2) !important; }
.growth-row-actions button.primary,.growth-form-card footer button.primary { color: #fff !important; border-color: transparent !important; background: var(--sm105-primary) !important; }

/* Command palette */
.sm-command-search { border-color: var(--sm105-border) !important; }
.sm-command-search input { color: var(--sm105-text) !important; }
.sm-command-search input::placeholder { color: var(--sm105-faint) !important; }
.sm-command-item { color: var(--sm105-text-2) !important; }
.sm-command-item small,.sm-command-group-label,.sm-command-empty { color: var(--sm105-muted) !important; }
.sm-command-item:hover,.sm-command-item.is-active { color: var(--sm105-primary) !important; background: var(--sm105-primary-soft) !important; }

/* Navigation-search state */
.sm-nav-search-empty { margin: 10px 8px; padding: 12px; border: 1px dashed rgba(255,255,255,.14); border-radius: 12px; color: rgba(232,240,250,.62); font-size: 11px; line-height: 1.45; }
.sm-nav-item[hidden],.sm-nav-section[hidden] { display: none !important; }

/* Scrollbars */
.sm-nav,.sm-content,.sm-modal-card,.growth-dialog-card,.growth-kanban,.sm-command-results,.sm-table-wrap { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--sm105-muted) 50%,transparent) transparent; }
.sm-nav::-webkit-scrollbar,.sm-content::-webkit-scrollbar,.sm-modal-card::-webkit-scrollbar,.growth-dialog-card::-webkit-scrollbar,.growth-kanban::-webkit-scrollbar,.sm-command-results::-webkit-scrollbar,.sm-table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.sm-nav::-webkit-scrollbar-thumb,.sm-content::-webkit-scrollbar-thumb,.sm-modal-card::-webkit-scrollbar-thumb,.growth-dialog-card::-webkit-scrollbar-thumb,.growth-kanban::-webkit-scrollbar-thumb,.sm-command-results::-webkit-scrollbar-thumb,.sm-table-wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb,var(--sm105-muted) 48%,transparent); background-clip: padding-box; }

/* Loading guard */
.is-sm-busy { position: relative; pointer-events: none; }
.is-sm-busy::after { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sm105-spin .72s linear infinite; }
@keyframes sm105-spin { to { transform: rotate(1turn); } }

/* Responsive */
@media (max-width: 1100px) {
  .sm-command-trigger { min-width: var(--sm105-control-h) !important; width: var(--sm105-control-h) !important; justify-content: center !important; padding: 0 !important; }
  .sm-command-trigger .sm-command-label,.sm-command-trigger kbd { display: none !important; }
}
@media (max-width: 760px) {
  .sm-content { padding: 16px 13px 86px !important; }
  .sm-topbar { min-height: 66px !important; padding: 9px 12px !important; }
  .sm-topbar-right { gap: 6px !important; }
  /* theme toggle geometry is owned by theme.css (canonical, loaded on every page) */
  .growth-form-hero,.growth-automation-hero { padding: 22px !important; }
  .growth-flow { width: 100%; }
  .growth-flow span { flex: 1 1 auto; text-align: center; }
  .sm-modal-card,.growth-dialog-card { border-radius: 18px !important; }
}
@media (max-width: 520px) {
  .sm-page-title { font-size: 17px !important; }
  .sm-page-sub { display: none !important; }
  .sm-topbar #smQuickAdd { padding-inline: 10px !important; font-size: 0 !important; }
  .sm-topbar #smQuickAdd::after { content: "+"; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


.growth-head-search { width: min(280px, 34vw); min-height: var(--sm105-control-h); }
.growth-head-search input { min-width: 0; }
.growth-pipeline-actions { display: flex; align-items: center; gap: 9px; }
.growth-pipeline-actions .growth-search { width: min(270px, 30vw); }
@media (max-width:760px) {
  .growth-head-search,.growth-pipeline-actions,.growth-pipeline-actions .growth-search { width: 100%; }
  .growth-pipeline-toolbar,.growth-pipeline-actions { align-items: stretch; flex-direction: column; }
}