/* Kuhlman.Co — Dashboard theme overlay.
   Loaded by app.html. Targets the React dashboard's foundational CSS
   to give it a quiet, sophisticated cream/navy look that matches the
   new static-site design language. Uses high specificity + !important
   to win against the existing inline <style> rules in app.html.

   Strategy: change the FOUNDATIONS (bg, surface, ink, accent, type)
   and let individual components inherit. No need to override every
   one of the 369 dash-* / admin-* classes. */

/* === Theme tokens, lifted from the static homepage ================== */
:root[data-theme="light"],
:root {
  --dash-bg:            #f5f7fc;
  --dash-surface:       #ffffff;
  --dash-surface-2:     #f9fbfe;
  --dash-border:        rgba(15,15,26,0.08);
  --dash-border-hi:     rgba(15,15,26,0.16);
  --dash-ink:           #0f0f1a;
  --dash-ink-2:         rgba(15,15,26,0.66);
  --dash-ink-3:         rgba(15,15,26,0.42);
  --dash-blue:          #3a8fff;
  --dash-blue-dk:       #2176f4;
  --dash-cyan:          #40e6d9;
  --dash-shadow-sm:     0 1px 2px rgba(15,15,26,0.04);
  --dash-shadow:        0 4px 14px rgba(15,15,26,0.06);
  --dash-shadow-lg:     0 12px 32px rgba(58,143,255,0.10);
}

/* === Dashboard shell — cream paper instead of dark cosmic blue ==== */
.dash-wrap {
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(58,143,255,0.06) 0%, transparent 55%),
    radial-gradient(700px 500px at 100% 100%, rgba(64,230,217,0.04) 0%, transparent 50%),
    var(--dash-bg) !important;
}
:root[data-theme="light"] .dash-wrap,
:root[data-theme="dark"] .dash-wrap {
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(58,143,255,0.06) 0%, transparent 55%),
    radial-gradient(700px 500px at 100% 100%, rgba(64,230,217,0.04) 0%, transparent 50%),
    var(--dash-bg) !important;
}

/* === Top header bar — clean cream/white with hairline rule ======== */
.dash-header {
  background: rgba(245,247,252,0.92) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--dash-border) !important;
  padding: 0 28px !important;
}
.dash-wordmark { color: var(--dash-ink) !important; font-weight: 600 !important; letter-spacing: -0.3px !important; }
.dash-wordmark span { color: var(--dash-blue) !important; }
.dash-header-divider { background: var(--dash-border) !important; }
.dash-header-user-name { color: var(--dash-ink) !important; font-weight: 500 !important; }
.dash-header-user-email { color: var(--dash-ink-3) !important; font-size: 11.5px !important; }
.dash-header-viewsite,
.dash-header-signout {
  color: var(--dash-ink-2) !important;
  background: transparent !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  transition: border-color 0.18s, color 0.18s, background 0.18s !important;
}
.dash-header-viewsite:hover,
.dash-header-signout:hover {
  border-color: var(--dash-border-hi) !important;
  color: var(--dash-ink) !important;
  background: rgba(15,15,26,0.03) !important;
}
.dash-avatar,
.dash-avatar-sm {
  background: linear-gradient(135deg, var(--dash-blue) 0%, var(--dash-blue-dk) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(58,143,255,0.32) !important;
}

/* === Top nav tabs — minimal, with editorial underline indicator == */
.dash-header-nav { gap: 0 !important; }
.dash-header-nav-item {
  color: var(--dash-ink-3) !important;
  background: transparent !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 450 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.005em !important;
  padding: 10px 14px !important;
  border-radius: 0 !important;
  position: relative !important;
  transition: color 0.18s !important;
}
.dash-header-nav-item:hover { color: var(--dash-ink) !important; background: transparent !important; }
.dash-header-nav-item.active {
  color: var(--dash-ink) !important;
  font-weight: 500 !important;
}
.dash-header-nav-item.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--dash-blue);
  border-radius: 2px 2px 0 0;
}

/* === Content area — generous, calm =============================== */
.dash-content-wrap,
.dash-content-row {
  background: transparent !important;
  color: var(--dash-ink) !important;
}

/* === Cards / sections — soft surface with hairline border ======== */
.admin-card,
.admin-section,
.dash-card,
.pp2-section,
.pm-card {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--dash-shadow-sm) !important;
  color: var(--dash-ink) !important;
}
.admin-card:hover, .dash-card:hover {
  border-color: var(--dash-border-hi) !important;
}
.admin-section-head,
.dash-section-head,
.pp2-section-head {
  border-bottom: 1px solid var(--dash-border) !important;
  color: var(--dash-ink) !important;
}

/* === Forms — clean inputs ======================================== */
.admin-field-label {
  color: var(--dash-ink-2) !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
.admin-field-help {
  color: var(--dash-ink-3) !important;
  font-size: 12.5px !important;
}
.admin-field input,
.admin-field textarea,
.admin-field select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 8px !important;
  color: var(--dash-ink) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--dash-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(58,143,255,0.10) !important;
}

/* === Buttons — primary cream-and-navy + ghost ==================== */
.btn, .btn-primary, .admin-save-btn {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.005em !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s !important;
  border: 1px solid transparent !important;
}
.btn-primary, .admin-save-btn {
  background: var(--dash-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(58,143,255,0.22) !important;
}
.btn-primary:hover, .admin-save-btn:hover {
  background: var(--dash-blue-dk) !important;
  box-shadow: 0 4px 14px rgba(58,143,255,0.32) !important;
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent !important;
  color: var(--dash-ink-2) !important;
  border: 1px solid var(--dash-border) !important;
}
.btn-ghost:hover {
  background: rgba(15,15,26,0.04) !important;
  color: var(--dash-ink) !important;
  border-color: var(--dash-border-hi) !important;
}
.admin-save-status { color: var(--dash-ink-3) !important; font-family: 'DM Mono', monospace !important; font-size: 11.5px !important; letter-spacing: 0.06em !important; }
.admin-readonly-banner {
  background: rgba(58,143,255,0.06) !important;
  border: 1px solid rgba(58,143,255,0.22) !important;
  color: var(--dash-blue-dk) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}

/* === Subnav (within panels) ===================================== */
.admin-subnav,
.as-subnav,
.pp2-tabs {
  border-bottom: 1px solid var(--dash-border) !important;
}
.admin-subnav-tab,
.as-subnav-tab {
  color: var(--dash-ink-3) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 450 !important;
}
.admin-subnav-tab:hover,
.as-subnav-tab:hover { color: var(--dash-ink) !important; }
.admin-subnav-tab.active,
.as-subnav-tab.active {
  color: var(--dash-ink) !important;
  border-bottom-color: var(--dash-blue) !important;
  font-weight: 500 !important;
}

/* === Side nav ==================================================== */
.admin-side-nav,
.admin-side-section { background: transparent !important; }
.admin-side-section-head {
  font-family: 'DM Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--dash-ink-3) !important;
}
.admin-side-tab {
  color: var(--dash-ink-2) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: background 0.18s, color 0.18s !important;
}
.admin-side-tab:hover { color: var(--dash-ink) !important; background: rgba(15,15,26,0.03) !important; }
.admin-side-tab.active {
  background: rgba(58,143,255,0.08) !important;
  color: var(--dash-blue-dk) !important;
  font-weight: 500 !important;
}

/* === App Store panel (.as-*) ==================================== */
.as-rating-card,
.as-review-row {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
  color: var(--dash-ink) !important;
}
.as-rating-big { color: var(--dash-ink) !important; font-weight: 500 !important; }
.as-rating-stars { color: #fbbf24 !important; }
.as-rating-meta { color: var(--dash-ink-3) !important; }
.as-rating-bar { background: var(--dash-border) !important; }
.as-rating-bar-fill { background: var(--dash-blue) !important; }
.as-review-title { color: var(--dash-ink) !important; font-weight: 500 !important; }
.as-review-author,
.as-review-meta { color: var(--dash-ink-3) !important; }
.as-review-body { color: var(--dash-ink-2) !important; }
.as-tester-row {
  border-bottom: 1px solid var(--dash-border) !important;
}
.as-tester-name { color: var(--dash-ink) !important; }
.as-tester-email { color: var(--dash-ink-3) !important; font-family: 'DM Mono', monospace !important; }
.as-version-num { color: var(--dash-ink) !important; }
.as-version-state { color: var(--dash-ink-2) !important; font-family: 'DM Mono', monospace !important; font-size: 11.5px !important; letter-spacing: 0.06em !important; }
.as-version-date { color: var(--dash-ink-3) !important; }
.as-empty, .as-loading { color: var(--dash-ink-3) !important; font-family: 'DM Sans', system-ui, sans-serif !important; }

/* === Feedback rows ============================================== */
.dash-feedback-list { gap: 8px !important; }
.dash-feedback-row {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  transition: border-color 0.18s !important;
}
.dash-feedback-row:hover { border-color: var(--dash-border-hi) !important; }
.dash-feedback-msg { color: var(--dash-ink) !important; }
.dash-feedback-rating { color: #fbbf24 !important; }
.dash-feedback-time { color: var(--dash-ink-3) !important; font-family: 'DM Mono', monospace !important; font-size: 11px !important; }
.dash-feedback-type-badge {
  background: rgba(58,143,255,0.08) !important;
  color: var(--dash-blue-dk) !important;
  border: 1px solid rgba(58,143,255,0.22) !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* === Alerts list ================================================= */
.dash-alerts-list { gap: 8px !important; }
.dash-alert-row {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.dash-alert-title { color: var(--dash-ink) !important; font-weight: 500 !important; }
.dash-alert-desc { color: var(--dash-ink-2) !important; }
.dash-alert-time { color: var(--dash-ink-3) !important; font-family: 'DM Mono', monospace !important; font-size: 11px !important; }
.dash-alert-dot { box-shadow: 0 0 8px currentColor !important; }
.dash-alert-dismiss {
  color: var(--dash-ink-3) !important;
  background: transparent !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 8px !important;
}
.dash-alert-dismiss:hover { color: var(--dash-ink) !important; border-color: var(--dash-border-hi) !important; }

/* === Filters / toolbar =========================================== */
.dash-filter-row, .as-toolbar {
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.dash-filter-btn {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  background: transparent !important;
  color: var(--dash-ink-2) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 99px !important;
  padding: 5px 12px !important;
  transition: background 0.18s, color 0.18s, border-color 0.18s !important;
}
.dash-filter-btn:hover {
  border-color: var(--dash-border-hi) !important;
  color: var(--dash-ink) !important;
}
.dash-filter-btn.active {
  background: var(--dash-ink) !important;
  color: var(--dash-surface) !important;
  border-color: var(--dash-ink) !important;
}

/* === Project / PM views (pp2-*) ================================= */
.pp2-board-col {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
}
.pp2-board-col-head {
  border-bottom: 1px solid var(--dash-border) !important;
  color: var(--dash-ink) !important;
}
.pp2-board-col-title { color: var(--dash-ink-2) !important; font-weight: 500 !important; }
.pp2-board-col-count { color: var(--dash-ink-3) !important; font-family: 'DM Mono', monospace !important; }
.pp2-card {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  color: var(--dash-ink) !important;
  border-radius: 10px !important;
}
.pp2-card:hover { border-color: var(--dash-border-hi) !important; box-shadow: var(--dash-shadow) !important; }

/* === Login modal — clean centered card ========================== */
.login-modal, .login-wrap {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 60px rgba(15,15,26,0.18) !important;
  color: var(--dash-ink) !important;
}
.login-title, .login-heading { color: var(--dash-ink) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; }
.login-sub, .login-help { color: var(--dash-ink-2) !important; }

/* === Loading / empty states ===================================== */
.loading, .empty, .dash-loading, .dash-empty {
  color: var(--dash-ink-3) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* === The signed-in profile pill (top right of nav) ============== */
.dash-header-user {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 99px !important;
  padding: 4px 4px 4px 12px !important;
}
.dash-header-user-info { padding-right: 4px !important; }

/* === Final polish — make text rendering and weight consistent === */
.dash-wrap, .dash-wrap * { -webkit-font-smoothing: antialiased !important; }
.dash-wrap h1, .dash-wrap h2, .dash-wrap h3 {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--dash-ink) !important;
}
.dash-wrap a { color: var(--dash-blue-dk) !important; }
.dash-wrap a:hover { color: var(--dash-blue) !important; }