/*
 * ios-system.css — iOS Design System Enhancement Layer
 * Overlays on top of tokens.css to provide iOS-native look & feel.
 * Import AFTER tokens.css: <link rel="stylesheet" href="/css/ios-system.css">
 *
 * RULE: Never hardcode brand colors. Use var() with fallbacks only.
 * Created: 2026-06-02
 */

/* ═══════════════════════════════════════════════════════════════════════
   §1  iOS Custom Properties
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --ios-radius:          14px;
  --ios-radius-lg:       20px;
  --ios-radius-sm:       10px;
  --ios-radius-xl:       24px;
  --ios-padding:         16px;
  --ios-padding-lg:      20px;
  --ios-padding-section: 24px;
  --ios-font:            -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                         'SF Pro Display', system-ui, sans-serif;
  --ios-separator:       0.5px solid var(--border, rgba(0,255,163,0.14));
  --ios-nav-blur:        saturate(180%) blur(20px);
  --ios-transition:      0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ═════════════════════════════════════════════════════════════════════
   §1b  Nav Bar Removal (2026-06-04)
   Platform moved to iOS-style navigation. The top nav bar is
   disabled in nav.js. This rule is the CSS safety net — if any
   stale code path still creates #hy-nav, it stays invisible.
   ═════════════════════════════════════════════════════════════════════ */
#hy-nav {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §2  Global Element Upgrades
   ═════════════════════════════════════════════════════════════════════ */

/* ── Cards ────────────────────────────────────────────────────────────── */
.card,
[class*="card"] {
  border-radius: var(--ios-radius);
  padding: var(--ios-padding-lg) 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow var(--ios-transition), transform var(--ios-transition);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
/* Exclude OS window-manager micro-controls (.os-win-ctrl) — they are
   12px macOS traffic-light dots that must not inherit 44px min-height,
   padding, border-radius, or the generic button transition. */
button:not(.os-win-ctrl):not(.clean-dock-icon):not(.os-cat-pill):not(.os-tray-icon):not(#os-mode-btn):not(#os-start-btn),
.btn,
[role="button"] {
  border-radius: var(--ios-radius-sm);
  padding: 12px 20px;
  min-height: 44px;
  font-weight: 600;
  font-family: var(--ios-font);
  transition: transform var(--ios-transition),
              opacity var(--ios-transition),
              background var(--ios-transition),
              box-shadow var(--ios-transition);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

button:not(.os-win-ctrl):not(.clean-dock-icon):not(.os-cat-pill):not(.os-tray-icon):not(#os-mode-btn):not(#os-start-btn):active,
.btn:active,
[role="button"]:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* ── Primary Buttons ──────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent, #00ffa3);
  color: var(--bg-deep, #000b06);
  border: none;
  font-weight: 700;
}

.btn-primary:active {
  box-shadow: 0 2px 12px var(--accent-glow, rgba(0,255,163,0.3));
  transform: scale(0.97);
}

/* ── Form Inputs ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
  border-radius: var(--ios-radius-sm);
  padding: 12px 16px;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
  font-family: var(--ios-font);
  background: var(--bg-input, rgba(0,255,163,0.04));
  border: 1px solid var(--border, rgba(0,255,163,0.14));
  color: var(--accent-text, #00ffa3);
  transition: border-color var(--ios-transition), box-shadow var(--ios-transition);
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--border-focus, rgba(0,255,163,0.35));
  box-shadow: 0 0 0 3px var(--accent-dim, rgba(0,255,163,0.15));
  outline: none;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
table {
  border-radius: var(--ios-radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

table th,
table td {
  border-bottom: 0.5px solid var(--border, rgba(0,255,163,0.14));
  padding: 12px var(--ios-padding);
}

table tr:last-child td {
  border-bottom: none;
}

/* ── Section Titles ───────────────────────────────────────────────────── */
.section-title,
.ios-section-title {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted, rgba(200,255,240,0.58));
  font-family: var(--ios-font);
  font-weight: 600;
  padding: var(--ios-padding-section) var(--ios-padding) var(--space-sm, 8px);
}

/* ── Navigation Bar (Frosted Glass) ───────────────────────────────────── */
#hy-nav {
  -webkit-backdrop-filter: var(--ios-nav-blur);
  backdrop-filter: var(--ios-nav-blur);
  background: var(--bg-overlay, rgba(0,11,6,0.92));
  border-bottom: var(--ios-separator);
}

/* ── Badge / Pill Elements ────────────────────────────────────────────── */
.badge,
.pill,
[class*="badge"],
[class*="pill"] {
  border-radius: var(--radius-full, 9999px);
  padding: 4px 12px;
  font-size: var(--font-size-xs, 10px);
  font-weight: 600;
  font-family: var(--ios-font);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   §3  iOS Component Classes
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ios-form-group (Inset Grouped List — iOS Settings style) ─────────── */
.ios-form-group {
  background: var(--bg-card, #00120a);
  border-radius: var(--ios-radius);
  overflow: hidden;
  border: 1px solid var(--border, rgba(0,255,163,0.14));
  margin-bottom: var(--space-lg, 16px);
}

.ios-form-group .ios-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--ios-padding);
  min-height: 44px;
  border-bottom: 0.5px solid var(--border, rgba(0,255,163,0.14));
  font-family: var(--ios-font);
  gap: 12px;
}

.ios-form-group .ios-form-row:last-child {
  border-bottom: none;
}

.ios-form-group .ios-form-row label,
.ios-form-group .ios-form-row .ios-form-label {
  color: var(--accent-text, #00ffa3);
  font-size: var(--font-size-md, 14px);
  font-weight: 500;
  flex-shrink: 0;
}

.ios-form-group .ios-form-row .ios-form-value,
.ios-form-group .ios-form-row input,
.ios-form-group .ios-form-row select {
  text-align: right;
  color: var(--muted, rgba(200,255,240,0.58));
  background: transparent;
  border: none;
  font-size: var(--font-size-md, 14px);
  flex: 1;
  min-width: 0;
}

/* ── ios-segment (Segmented Control) ──────────────────────────────────── */
.ios-segment {
  display: inline-flex;
  background: var(--bg-input, rgba(0,255,163,0.04));
  border-radius: var(--radius-full, 9999px);
  padding: 3px;
  gap: 2px;
  font-family: var(--ios-font);
  border: 1px solid var(--border, rgba(0,255,163,0.14));
}

.ios-segment-item {
  padding: 8px 18px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 12px);
  font-weight: 600;
  color: var(--muted, rgba(200,255,240,0.58));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ios-transition);
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ios-segment-item.active,
.ios-segment-item[aria-selected="true"] {
  background: var(--accent, #00ffa3);
  color: var(--bg-deep, #000b06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.ios-segment-item:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* ── ios-list-row ─────────────────────────────────────────────────────── */
.ios-list-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px var(--ios-padding);
  border-bottom: 0.5px solid var(--border, rgba(0,255,163,0.14));
  font-family: var(--ios-font);
  font-size: var(--font-size-md, 14px);
  color: var(--accent-text, #00ffa3);
  transition: background var(--ios-transition);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  gap: 12px;
}

.ios-list-row:last-child {
  border-bottom: none;
}

.ios-list-row:active {
  background: var(--bg-card-hover, #001f12);
}

/* Chevron indicator */
.ios-list-row::after {
  content: '›';
  color: var(--muted, rgba(200,255,240,0.58));
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
  margin-left: auto;
  line-height: 1;
}

/* Rows without navigation chevron */
.ios-list-row--no-chevron::after {
  content: none;
}

/* ── ios-list-row--destructive ────────────────────────────────────────── */
.ios-list-row--destructive {
  color: var(--danger, #ff4d6d);
}

.ios-list-row--destructive::after {
  content: none;
}

/* ── ios-search-bar ───────────────────────────────────────────────────── */
.ios-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ios-font);
}

.ios-search-bar input {
  width: 100%;
  border-radius: var(--radius-full, 9999px);
  padding: 10px 16px 10px 38px;
  font-size: 16px;
  font-family: var(--ios-font);
  background: var(--bg-input, rgba(0,255,163,0.04));
  border: 1px solid var(--border, rgba(0,255,163,0.14));
  color: var(--accent-text, #00ffa3);
  transition: border-color var(--ios-transition), box-shadow var(--ios-transition);
  -webkit-appearance: none;
  appearance: none;
}

.ios-search-bar input:focus {
  border-color: var(--border-focus, rgba(0,255,163,0.35));
  box-shadow: 0 0 0 3px var(--accent-dim, rgba(0,255,163,0.15));
  outline: none;
}

.ios-search-bar input::placeholder {
  color: var(--muted, rgba(200,255,240,0.58));
}

/* Search icon */
.ios-search-bar::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted, rgba(200,255,240,0.58));
  border-radius: 50%;
  pointer-events: none;
}

.ios-search-bar::after {
  content: '';
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 2px;
  background: var(--muted, rgba(200,255,240,0.58));
  margin-top: 4px;
  pointer-events: none;
}

.ios-search-cancel {
  font-family: var(--ios-font);
  font-size: var(--font-size-md, 14px);
  color: var(--accent, #00ffa3);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── ios-action-sheet ─────────────────────────────────────────────────── */
.ios-action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal, rgba(0,0,0,0.85));
  z-index: var(--z-modal, 500);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ios-transition), visibility var(--ios-transition);
}

.ios-action-sheet-overlay.active {
  opacity: 1;
  visibility: visible;
}

.ios-action-sheet {
  width: calc(100% - 20px);
  max-width: 400px;
  margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(100%);
  transition: transform var(--ios-transition);
}

.ios-action-sheet-overlay.active .ios-action-sheet {
  transform: translateY(0);
}

.ios-action-sheet-group {
  background: var(--bg-card, #00120a);
  border-radius: var(--ios-radius);
  overflow: hidden;
  border: 1px solid var(--border, rgba(0,255,163,0.14));
}

.ios-action-sheet-title {
  text-align: center;
  padding: 16px;
  font-size: var(--font-size-sm, 12px);
  color: var(--muted, rgba(200,255,240,0.58));
  font-family: var(--ios-font);
  border-bottom: 0.5px solid var(--border, rgba(0,255,163,0.14));
}

.ios-action-sheet-btn {
  display: block;
  width: 100%;
  padding: 16px;
  text-align: center;
  font-size: var(--font-size-lg, 16px);
  font-family: var(--ios-font);
  font-weight: 500;
  color: var(--accent, #00ffa3);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--border, rgba(0,255,163,0.14));
  cursor: pointer;
  min-height: 44px;
  transition: background var(--ios-transition);
  -webkit-tap-highlight-color: transparent;
}

.ios-action-sheet-btn:last-child {
  border-bottom: none;
}

.ios-action-sheet-btn:active {
  background: var(--bg-card-hover, #001f12);
}

.ios-action-sheet-btn--destructive {
  color: var(--danger, #ff4d6d);
}

.ios-action-sheet-cancel {
  background: var(--bg-card, #00120a);
  border-radius: var(--ios-radius);
  border: 1px solid var(--border, rgba(0,255,163,0.14));
}

.ios-action-sheet-cancel .ios-action-sheet-btn {
  font-weight: 700;
  border-bottom: none;
}

/* ── ios-toggle (Switch) ──────────────────────────────────────────────── */
.ios-toggle {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}

.ios-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ios-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-input, rgba(0,255,163,0.04));
  border: 1px solid var(--border, rgba(0,255,163,0.14));
  border-radius: 31px;
  cursor: pointer;
  transition: background var(--ios-transition), border-color var(--ios-transition);
}

.ios-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 25px;
  height: 25px;
  background: var(--accent-text, #00ffa3);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--ios-transition);
}

.ios-toggle input:checked + .ios-toggle-track {
  background: var(--accent, #00ffa3);
  border-color: var(--accent, #00ffa3);
}

.ios-toggle input:checked + .ios-toggle-track::after {
  transform: translateX(20px);
  background: var(--bg-deep, #000b06);
}

.ios-toggle input:focus-visible + .ios-toggle-track {
  outline: 2px solid var(--accent, #00ffa3);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   §4  Safe Area & Layout
   ═══════════════════════════════════════════════════════════════════════ */
body {
  padding-top:    env(safe-area-inset-top, 0px);
  padding-right:  env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:   env(safe-area-inset-left, 0px);
}

.ios-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* dvh fallback for full-height containers */
.ios-full-height {
  height: 100vh;
  height: 100dvh;
}

/* ═══════════════════════════════════════════════════════════════════════
   §5  Touch & Interaction
   ═══════════════════════════════════════════════════════════════════════ */
button:not(.os-win-ctrl),
.btn,
[role="button"],
a,
input[type="submit"],
input[type="button"],
.ios-list-row,
.ios-segment-item,
.ios-action-sheet-btn,
.ios-search-cancel {
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* Universal press feedback for interactive elements */
a:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════
   §6  Dark Mode Refinements
   ═══════════════════════════════════════════════════════════════════════ */

/* Dark mode is the default for Hypatia — these refine the experience
   using existing theme vars with iOS-specific blur/shadow overlays. */

@media (prefers-color-scheme: dark) {
  .card,
  [class*="card"] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25),
                0 0 1px rgba(0, 0, 0, 0.4);
  }

  .ios-form-group {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  }

  .ios-action-sheet-group,
  .ios-action-sheet-cancel {
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3);
  }

  table th,
  table td {
    border-bottom-color: var(--border, rgba(0,255,163,0.14));
  }
}

/* Subtle separator adaptation */
.ios-separator {
  border: none;
  border-bottom: 0.5px solid var(--border, rgba(0,255,163,0.14));
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §7  Utility Helpers
   ═══════════════════════════════════════════════════════════════════════ */
.ios-font {
  font-family: var(--ios-font);
}

.ios-rounded {
  border-radius: var(--ios-radius);
}

.ios-rounded-lg {
  border-radius: var(--ios-radius-lg);
}

.ios-rounded-xl {
  border-radius: var(--ios-radius-xl);
}

.ios-pad {
  padding: var(--ios-padding);
}

.ios-pad-lg {
  padding: var(--ios-padding-lg);
}

.ios-pad-section {
  padding: var(--ios-padding-section);
}