/* ════════════════════════════════════════════════════════════════
   iOS-STYLE OVERRIDE — BAKES PERSONAL DASHBOARD
   Loaded LAST to override all cyberpunk/futuristic styling.
   White backgrounds, SF Pro typography, rounded cards, Apple blue.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. OVERRIDE ALL CSS VARIABLES TO iOS COLOUR SCHEME ────────── */
:root {
    --bg: #f7f9fc !important;
    --bg-rgb: 247, 249, 252 !important;
    --bg-card: #ffffff !important;
    --bg-card-solid: #ffffff !important;
    --bg-card-hover: #f5f7fa !important;
    --bg-inset: #f0f3f7 !important;
    --bg-nav: rgba(255, 255, 255, 0.85) !important;
    --border: rgba(0, 0, 0, 0.08) !important;
    --border-hover: rgba(0, 122, 255, 0.3) !important;
    --text: #1d1d1f !important;
    --text-secondary: #424245 !important;
    --text-muted: #86868b !important;
    --text-faint: #aeaeb2 !important;
    --text-dim: #c7c7cc !important;
    --accent: #007aff !important;
    --accent-rgb: 0, 122, 255 !important;
    --accent-2: #5856d6 !important;
    --accent-2-rgb: 88, 86, 214 !important;
    --accent-3: #00c7be !important;
    --accent-3-rgb: 0, 199, 190 !important;
    --accent-light: rgba(0, 122, 255, 0.08) !important;
    --accent-glow: transparent !important;
    --danger: #ff3b30 !important;
    --warning: #ff9500 !important;
    --info: #007aff !important;
    --gradient-start: #007aff !important;
    --gradient-end: #5856d6 !important;
    --gradient-2: linear-gradient(135deg, #007aff 0%, #5856d6 100%) !important;
    --gradient-3: linear-gradient(135deg, #00c7be 0%, #007aff 100%) !important;
    --input-bg: #f5f7fa !important;
    --input-border: rgba(0, 0, 0, 0.1) !important;
    --input-focus-bg: #ffffff !important;
    --table-odd: #f7f9fc !important;
    --shadow-glow: transparent !important;
    --transition: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    --radius: 16px !important;
    --radius-sm: 12px !important;
    --radius-xs: 8px !important;
    --glass: #ffffff !important;
}

/* Also override light-mode variables (in case body.light-mode is active) */
body.light-mode {
    --bg: #f7f9fc !important;
    --bg-rgb: 247, 249, 252 !important;
    --bg-card: #ffffff !important;
    --bg-card-solid: #ffffff !important;
    --bg-card-hover: #f5f7fa !important;
    --bg-inset: #f0f3f7 !important;
    --bg-nav: rgba(255, 255, 255, 0.85) !important;
    --border: rgba(0, 0, 0, 0.08) !important;
    --border-hover: rgba(0, 122, 255, 0.3) !important;
    --text: #1d1d1f !important;
    --text-secondary: #424245 !important;
    --text-muted: #86868b !important;
    --text-faint: #aeaeb2 !important;
    --text-dim: #c7c7cc !important;
    --accent: #007aff !important;
    --accent-rgb: 0, 122, 255 !important;
    --accent-2: #5856d6 !important;
    --accent-2-rgb: 88, 86, 214 !important;
    --accent-3: #00c7be !important;
    --accent-3-rgb: 0, 199, 190 !important;
    --accent-light: rgba(0, 122, 255, 0.08) !important;
    --accent-glow: transparent !important;
    --gradient-start: #007aff !important;
    --gradient-end: #5856d6 !important;
    --gradient-2: linear-gradient(135deg, #007aff 0%, #5856d6 100%) !important;
    --gradient-3: linear-gradient(135deg, #00c7be 0%, #007aff 100%) !important;
    --input-bg: #f5f7fa !important;
    --input-border: rgba(0, 0, 0, 0.1) !important;
    --input-focus-bg: #ffffff !important;
    --table-odd: #f7f9fc !important;
    --shadow-glow: transparent !important;
    --glass: #ffffff !important;
}

/* ── 2. KILL ALL CYBERPUNK VISUAL EFFECTS ──────────────────────── */
.scanline,
.floating-orb,
.particle,
/* Remove background particles/grid overlays (NOT body.bh-grid — that hides the whole page) */
.bh-particles,
.bh-p,
.grid-lines {
    display: none !important;
}

/* Kill the ::after grid that bh-grid adds, without hiding the body itself */
body.bh-grid::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Remove animated mesh background */
body::before {
    content: none !important;
    display: none !important;
    background: none !important;
    animation: none !important;
}

/* Remove grid overlay from futuristic.css */
body::after {
    content: none !important;
    display: none !important;
    background: none !important;
    animation: none !important;
}

/* Remove all glow text-shadows */
.glow-text,
.glass-card::before,
.hero::before,
.glass-shine,
.logoPulse {
    text-shadow: none !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Kill card entrance animations from premium.css */
.card,
.summary-card,
.work-hero-card,
.work-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Kill shimmer on buttons */
.btn-primary::after,
.work-form button::after {
    display: none !important;
    content: none !important;
}

/* Kill gradient animated text */
.simple-hero-weight .num,
.hero-number {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    animation: none !important;
}

/* Remove neon gradient clip on page headers */
.page-header h1 {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
}

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif !important;
    background: #f7f9fc !important;
    color: #1d1d1f !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ── 4. CARDS — White, rounded, subtle shadow ─────────────────── */
.card,
.work-section,
.summary-card,
.eod-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.card:hover,
.work-section:hover,
.summary-card:hover,
.eod-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-1px) !important;
    border-color: rgba(0, 122, 255, 0.15) !important;
}

/* ── 5. NAVIGATION — Clean frosted glass bar ───────────────────── */
.nav {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.nav-logo {
    color: #007aff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
}

.nav-link {
    color: var(--text-muted) !important;
    text-shadow: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.nav-link:hover {
    color: #007aff !important;
    background: rgba(0, 122, 255, 0.06) !important;
}

.nav-link.active {
    color: #007aff !important;
    background: rgba(0, 122, 255, 0.1) !important;
    font-weight: 600 !important;
}

.live-clock {
    color: var(--text) !important;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums !important;
}

/* Service status dot */
.status-dot {
    background: #34c759 !important;
    box-shadow: none !important;
}

/* Theme toggle button */
.theme-toggle {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 50% !important;
}

/* ── 6. STAT BOXES & METRICS ───────────────────────────────────── */
.stat-box,
.stat-card {
    background: #f7f9fc !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.stat-val {
    color: #1d1d1f !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.stat-label {
    color: #86868b !important;
}

.stat-row {
    gap: 10px !important;
}

/* ── 7. BUTTONS — iOS pill style ───────────────────────────────── */
.btn {
    background: #f5f7fa !important;
    color: #007aff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.btn:hover {
    background: rgba(0, 122, 255, 0.06) !important;
    border-color: rgba(0, 122, 255, 0.2) !important;
}

.btn-primary {
    background: #007aff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.btn-primary:hover {
    background: #0056b3 !important;
}

.quick-log-btn {
    background: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
    border: 1px solid rgba(0, 122, 255, 0.15) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.quick-log-btn:hover {
    background: rgba(0, 122, 255, 0.12) !important;
    border-color: rgba(0, 122, 255, 0.3) !important;
}

/* ── 8. INPUTS — iOS-style form fields ─────────────────────────── */
input,
select,
textarea {
    background: #f5f7fa !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    transition: all 0.2s ease !important;
}

input:focus,
select:focus,
textarea:focus {
    background: #ffffff !important;
    border-color: #007aff !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #aeaeb2 !important;
}

select option {
    background: #ffffff !important;
    color: #1d1d1f !important;
}

/* ── 9. TABLES — Clean iOS-style ───────────────────────────────── */
table,
.log-table,
.lab-table {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.log-table th,
.lab-table th,
.log-table-head,
.lab-table-head {
    background: #f7f9fc !important;
    color: #86868b !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
}

table tr:nth-child(odd) {
    background: #fafbfc !important;
}

table tr:hover {
    background: rgba(0, 122, 255, 0.04) !important;
}

/* ── 10. PAGE HEADER ──────────────────────────────────────────── */
.page-header h1 {
    color: #1d1d1f !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

.page-sub {
    color: #86868b !important;
}

/* ── 11. LINKS ─────────────────────────────────────────────────── */
a {
    color: #007aff !important;
}

.card-link {
    color: #007aff !important;
}

/* ── 12. PROGRESS BARS & RINGS ─────────────────────────────────── */
.progress-fill {
    background: #007aff !important;
    box-shadow: none !important;
}

.compliance-bar.done {
    background: #34c759 !important;
}

.ring-track,
.cycle-ring-track {
    stroke: rgba(0, 0, 0, 0.06) !important;
}

.metric-ring .ring-value {
    fill: #1d1d1f !important;
}

/* ── 13. MISC ELEMENTS ─────────────────────────────────────────── */
.chip {
    background: #f0f3f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: var(--text-secondary) !important;
    border-radius: 20px !important;
}

.chip:hover {
    background: rgba(0, 122, 255, 0.06) !important;
}

.toast {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.log-entry {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.log-entry:hover {
    background: rgba(0, 122, 255, 0.03) !important;
}

.section-title {
    color: #1d1d1f !important;
}

.form-help {
    color: #86868b !important;
}

.card-badge {
    background: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
}

/* Lab values */
.lab-value.high { color: #ff3b30 !important; }
.lab-value.low { color: #ff9500 !important; }

/* Stat card variants */
.stat-card.accent { background: rgba(0, 122, 255, 0.06) !important; }
.stat-card.purple { background: rgba(88, 86, 214, 0.06) !important; }
.stat-card.cyan { background: rgba(0, 199, 190, 0.06) !important; }
.stat-card.warning { background: rgba(255, 149, 0, 0.06) !important; }

/* Water drop effect */
.water-drop {
    filter: none !important;
}

/* Marker dots */
.marker-dot {
    box-shadow: 0 0 0 2px #fff !important;
}

/* Chart tooltip */
.chart-tooltip {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Dose cells */
.dose-cell {
    background: #f7f9fc !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}
.dose-cell.filled {
    background: rgba(0, 122, 255, 0.1) !important;
    border-color: rgba(0, 122, 255, 0.25) !important;
}
.dose-cell.today {
    background: rgba(88, 86, 214, 0.1) !important;
    border-color: rgba(88, 86, 214, 0.3) !important;
}
.dose-cell.today.filled {
    background: rgba(0, 122, 255, 0.15) !important;
    border-color: rgba(0, 122, 255, 0.35) !important;
}

/* Mini bars */
.mini-bar {
    background: rgba(0, 0, 0, 0.05) !important;
}
.weight-bar {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Tracker rows */
.tracker-row {
    background: #f7f9fc !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 12px !important;
}
.tracker-row:hover {
    background: rgba(0, 122, 255, 0.04) !important;
}

/* Streak cards */
.streak-card {
    background: #f7f9fc !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
}
.streak-card:hover {
    border-color: rgba(0, 122, 255, 0.2) !important;
}

/* Metric labels */
.metric-label {
    color: #86868b !important;
}

/* Glass cards override */
.glass-card::before {
    display: none !important;
    content: none !important;
}

/* Glass shine */
.glass-shine {
    display: none !important;
}

/* Hero gradient overlay */
.hero::before {
    display: none !important;
    content: none !important;
}

/* ── 14. SCROLLBAR — Subtle ───────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
::-webkit-scrollbar-track {
    background: transparent !important;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25) !important;
}

/* Text selection */
::selection {
    background: rgba(0, 122, 255, 0.15) !important;
    color: #1d1d1f !important;
}

/* ── 15. MOBILE RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-links {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }
    .nav-link {
        color: var(--text) !important;
    }
    .page-header h1 {
        font-size: 24px !important;
    }
}

/* ── 16. FORCE LIGHT MODE ──────────────────────────────────────── */
/* Override the dark mode default — always use light iOS theme */
body {
    background: #f7f9fc !important;
    color: #1d1d1f !important;
}

/* SVG ring gradient overrides for weight page */
linearGradient stop {
    stop-color: #007aff !important;
}

/* Ensure text in SVG is dark */
text {
    fill: #1d1d1f !important;
}

/* Fix any remaining neon-coloured text */
.protocol-name,
.protocol-name-lg,
.inj-name,
.weight-value,
.hero-label,
.hero-change {
    color: var(--text) !important;
    text-shadow: none !important;
}

.hero-label { color: #86868b !important; }
.hero-change { color: #34c759 !important; }