/* ============================================================
   ops-theme.css
   DMG OPS — UX Foundation: Themes, Density, Layout Modes
   Phase 1 UX Foundation
   ============================================================ */

/* ── Motion: reduced ────────────────────────────────────── */
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  transition-duration: 0ms !important;
  animation-duration:  0ms !important;
}

/* ── Font scale ──────────────────────────────────────────── */
:root { --font-scale: 1; }
body  { font-size: calc(14px * var(--font-scale)); }

/* ── Sidebar: right ──────────────────────────────────────── */
[data-sidebar="right"] .app-shell {
  flex-direction: row-reverse;
}
[data-sidebar="right"] .sidebar {
  border-left: 1px solid var(--border);
  border-right: none;
}

[data-theme="dark"], :root {
  --bg-deep:        #040C12;
  --bg-dark:        #071828;
  --bg-mid:         #0D1B2A;
  --bg-panel:       #111C28;
  --bg-card:        #162030;
  --border:         #1E3A4A;
  --border-light:   #2C4A5A;
  --text-primary:   #F5F6F8;
  --text-secondary: #B0BEC5;
  --text-muted:     #78909C;
  --input-bg:       #0D1B2A;
  --hover-bg:       rgba(255,255,255,0.04);
  --shadow:         0 2px 12px rgba(0,0,0,0.5);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.6);
}

/* ── THEME: LIGHT ────────────────────────────────────────── */
[data-theme="light"] {
  --bg-deep:        #F0F2F5;
  --bg-dark:        #E8EBF0;
  --bg-mid:         #FFFFFF;
  --bg-panel:       #FFFFFF;
  --bg-card:        #F5F7FA;
  --border:         #D8DEE8;
  --border-light:   #C5CDD8;
  --text-primary:   #1A1F2E;
  --text-secondary: #4A5568;
  --text-muted:     #8896A5;
  --input-bg:       #FFFFFF;
  --hover-bg:       rgba(0,0,0,0.04);
  --shadow:         0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.12);
  /* Keep brand colours */
  --orange:         #D4681A;
  --teal:           #0F9B82;
  --blue:           #1A5C8A;
  --blue-lt:        #2A7FC0;
  --red:            #C0392B;
}

/* ── THEME: SOFT (warm dark) ─────────────────────────────── */
[data-theme="soft"] {
  --bg-deep:        #0F0D0A;
  --bg-dark:        #1A1510;
  --bg-mid:         #221C14;
  --bg-panel:       #2A2218;
  --bg-card:        #332A1E;
  --border:         #3D3025;
  --border-light:   #4F3E30;
  --text-primary:   #F2EDE6;
  --text-secondary: #A09080;
  --text-muted:     #6B5A48;
  --input-bg:       #1A1510;
  --hover-bg:       rgba(255,240,220,0.05);
  --shadow:         0 2px 12px rgba(0,0,0,0.5);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.6);
  --orange:         #F09040;
  --teal:           #28C8A0;
}

/* ── THEME: HIGH CONTRAST ────────────────────────────────── */
[data-theme="hc"] {
  --bg-deep:        #000000;
  --bg-dark:        #000000;
  --bg-mid:         #0A0A0A;
  --bg-panel:       #111111;
  --bg-card:        #1A1A1A;
  --border:         #FFFFFF;
  --border-light:   #CCCCCC;
  --text-primary:   #FFFFFF;
  --text-secondary: #DDDDDD;
  --text-muted:     #AAAAAA;
  --input-bg:       #000000;
  --hover-bg:       rgba(255,255,255,0.1);
  --shadow:         none;
  --shadow-lg:      none;
  --orange:         #FFB347;
  --teal:           #00FFD0;
  --blue-lt:        #7EC8FF;
  --red:            #FF6B6B;
}

/* Focus outlines for HC */
[data-theme="hc"] *:focus-visible {
  outline: 3px solid var(--orange) !important;
  outline-offset: 2px;
}

/* ── DENSITY: COMFORTABLE (default) ─────────────────────── */
[data-density="comfortable"], :root {
  --d-pad-xs:   4px;
  --d-pad-sm:   8px;
  --d-pad-md:   14px;
  --d-pad-lg:   20px;
  --d-pad-xl:   28px;
  --d-gap:      14px;
  --d-row-h:    44px;
  --d-font-sm:  11px;
  --d-font-md:  13px;
  --d-font-lg:  15px;
  --d-radius:   8px;
}

/* ── DENSITY: COMPACT ────────────────────────────────────── */
[data-density="compact"] {
  --d-pad-xs:   2px;
  --d-pad-sm:   5px;
  --d-pad-md:   9px;
  --d-pad-lg:   13px;
  --d-pad-xl:   18px;
  --d-gap:      8px;
  --d-row-h:    32px;
  --d-font-sm:  10px;
  --d-font-md:  12px;
  --d-font-lg:  13px;
  --d-radius:   5px;
}

[data-density="compact"] .sidebar-link    { padding: 6px 16px !important; font-size: 12px !important; }
[data-density="compact"] .stat-cell       { padding: 10px 14px !important; }
[data-density="compact"] .stat-val        { font-size: 20px !important; }
[data-density="compact"] .page-title      { font-size: 18px !important; }
[data-density="compact"] .btn             { padding: 4px 10px !important; font-size: 11px !important; }
[data-density="compact"] .form-input,
[data-density="compact"] .form-select     { padding: 5px 8px !important; font-size: 12px !important; }
[data-density="compact"] .perm-table td,
[data-density="compact"] .perm-table th   { padding: 5px 10px !important; font-size: 11px !important; }

/* ── DENSITY: SPACIOUS ───────────────────────────────────── */
[data-density="spacious"] {
  --d-pad-xs:   6px;
  --d-pad-sm:   12px;
  --d-pad-md:   20px;
  --d-pad-lg:   28px;
  --d-pad-xl:   40px;
  --d-gap:      20px;
  --d-row-h:    56px;
  --d-font-sm:  12px;
  --d-font-md:  14px;
  --d-font-lg:  17px;
  --d-radius:   10px;
}

[data-density="spacious"] .sidebar-link  { padding: 12px 24px !important; font-size: 14px !important; }
[data-density="spacious"] .stat-cell     { padding: 22px 28px !important; }
[data-density="spacious"] .stat-val      { font-size: 34px !important; }

/* ── LAYOUT: STANDARD (default) ─────────────────────────── */
[data-layout="standard"] .main-content,
.main-content {
  max-width: none;
}

/* ── LAYOUT: WIDE ────────────────────────────────────────── */
[data-layout="wide"] .sidebar {
  width: 200px !important;
}
[data-layout="wide"] .main-content {
  max-width: none;
  padding: 28px 32px;
}

/* ── LAYOUT: FOCUS ───────────────────────────────────────── */
[data-layout="focus"] .sidebar {
  display: none !important;
}
[data-layout="focus"] .app-shell {
  grid-template-columns: 1fr !important;
}
[data-layout="focus"] .main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 40px;
}

/* ── THEME SWITCHER UI ───────────────────────────────────── */
.ux-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ux-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ux-btn:hover          { border-color: var(--border-light); color: var(--text-primary); }
.ux-btn.active         { border-color: var(--orange); color: var(--orange); background: rgba(232,119,34,0.08); }
.ux-btn .ux-btn-icon   { font-size: 13px; }

/* Dropdown panel for theme/density/layout picker */
.ux-panel {
  position: fixed;
  top: calc(var(--topnav-h) + 6px);
  right: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  width: 280px;
  z-index: 2000;
  display: none;
}
.ux-panel.open { display: block; }

.ux-panel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 12px;
}
.ux-panel-title:first-child { margin-top: 0; }

.ux-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ux-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
}
.ux-chip:hover         { border-color: var(--border-light); color: var(--text-primary); }
.ux-chip.active        { border-color: var(--teal); color: var(--teal); background: rgba(26,188,156,0.1); }
.ux-chip.active-orange { border-color: var(--orange); color: var(--orange); background: rgba(232,119,34,0.1); }

/* Smooth theme transitions */
body, .topnav, .sidebar, .main-content, .widget, .stat-cell,
.btn, .form-input, .form-select, .modal-box {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* Keyboard nav focus styles */
.sidebar-link:focus-visible,
.btn:focus-visible,
.form-input:focus-visible,
.ux-chip:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}