@import url('./typography.css');

/**
 * Ouroboros Universal iOS Fix
 * Applied globally — fixes sidebar colors, typography, card shadows
 * 2026-05-24 — Wavult Group
 */

/* ── SIDEBAR — correct light mode palette ─────────────────────────── */
.sidebar, .os-sidebar {
  background: rgba(249,249,249,0.94) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-right: .5px solid rgba(60,60,67,.18) !important;
}
@media (prefers-color-scheme: dark) {
  .sidebar, .os-sidebar {
    background: rgba(28,28,30,0.94) !important;
    border-right-color: rgba(255,255,255,.08) !important;
  }
}

/* ── NAV ITEMS — subtle active state ─────────────────────────────── */
.nav-item.active, .os-nav-item.active {
  background: rgba(0,122,255,.12) !important;
  color: #007AFF !important;
}
.nav-item.active *, .os-nav-item.active * {
  color: #007AFF !important;
}

/* ── LOGO AREA ─────────────────────────────────────────────────── */
.logo-brand, .os-logo-brand {
  color: rgba(60,60,67,.5) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
}
.logo-name, .os-logo-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #000 !important;
  letter-spacing: -.3px !important;
}
@media (prefers-color-scheme: dark) {
  .logo-name, .os-logo-name { color: #fff !important; }
}

/* ── TOPBAR ────────────────────────────────────────────────────── */
.topbar, .os-topbar {
  background: rgba(249,249,249,.92) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: .5px solid rgba(60,60,67,.18) !important;
  height: 52px !important;
}
@media (prefers-color-scheme: dark) {
  .topbar, .os-topbar {
    background: rgba(28,28,30,.92) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
  }
}
.topbar-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #000 !important;
}

/* ── CARDS — white with proper shadow ────────────────────────────── */
.card, .kpi-card, .stat-card, .mini-stat,
.info-card, .data-card, .metric-card {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04) !important;
}
@media (prefers-color-scheme: dark) {
  .card, .kpi-card, .stat-card, .mini-stat,
  .info-card, .data-card, .metric-card {
    background: #1C1C1E !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.3) !important;
  }
}

/* ── TYPOGRAPHY — readable, not gray-on-gray ─────────────────────── */
.kpi-value, .stat-value, .big-number {
  color: #000 !important;
  font-weight: 700 !important; /* iOS Title 1: 28px/700 */
  letter-spacing: -.02em !important;
}
.kpi-label, .stat-label, .card-label {
  color: rgba(60,60,67,.55) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
@media (prefers-color-scheme: dark) {
  .kpi-value, .stat-value, .big-number { color: #fff !important; }
  .kpi-label, .stat-label { color: rgba(235,235,245,.55) !important; }
}

/* ── PAGE BODY ─────────────────────────────────────────────────── */
body {
  background: #F2F2F7 !important;
  color: #000 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}
@media (prefers-color-scheme: dark) {
  body { background: #000 !important; color: #fff !important; }
}

/* ── LARGE TITLE ─────────────────────────────────────────────── */
.large-title, [class*="large-title"]:not([class*="-section"]):not([class*="-area"]) {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -.5px !important;
  line-height: 1.1 !important;
  color: #000 !important;
}
.large-subtitle {
  font-size: 14px !important;
  color: rgba(60,60,67,.55) !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}
@media (prefers-color-scheme: dark) {
  .large-title, [class*="large-title"]:not([class*="-section"]):not([class*="-area"]) {
    color: #fff !important;
  }
}

/* ── NAV BAR (old) — hide duplicates ────────────────────────────── */
.nav-bar { display: none !important; }

/* ── SPRINT/KANBAN CARDS ─────────────────────────────────────── */
.sprint-card, .task-card, .kanban-card, [class*="task-card"] {
  background: #fff !important;
  border-radius: 12px !important;
  border: .5px solid rgba(60,60,67,.1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
@media (prefers-color-scheme: dark) {
  .sprint-card, .task-card, .kanban-card, [class*="task-card"] {
    background: #2C2C2E !important;
    border-color: rgba(255,255,255,.06) !important;
  }
}

/* ── SECTION LABELS ──────────────────────────────────────────── */
.sidebar-label, .section-label, .group-label, [class*="sidebar-label"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(60,60,67,.45) !important;
}

/* ── BADGES / PILLS ──────────────────────────────────────────── */
.badge, [class*="badge-"]:not(.badge-live) {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
}

/* ── SPRINT PILLS ────────────────────────────────────────────── */
[class*="sprint-btn"], [class*="sprint-pill"] {
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
}

/* ── COLUMN HEADERS ──────────────────────────────────────────── */
.col-header, [class*="col-title"], [class*="column-header"] {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

/* ── MAIN CONTENT AREA ───────────────────────────────────────── */
.main, .os-content, .content-area {
  background: #F2F2F7 !important;
}
@media (prefers-color-scheme: dark) {
  .main, .os-content, .content-area { background: #000 !important; }
}

/* ── SEARCH INPUT ────────────────────────────────────────────── */
.search-wrap, [class*="search-wrap"], [class*="search-bar"] {
  background: rgba(120,120,128,.11) !important;
  border-radius: 10px !important;
  border: none !important;
}
input[type="search"], .search-input {
  background: transparent !important;
  border: none !important;
  font-size: 15px !important;
  color: #000 !important;
}
@media (prefers-color-scheme: dark) {
  input[type="search"], .search-input { color: #fff !important; }
}
input::placeholder { color: rgba(60,60,67,.3) !important; }

/* ── ENSURE STATS ARE READABLE ───────────────────────────────── */
.mini-stat-value, .stat-number, .kpi-number {
  font-size: 22px !important; /* iOS Title 2: 22px/700 */
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: #007AFF !important;
  display: block !important;
  line-height: 28px !important;
  margin-bottom: 4px !important;
}