/* shared/styles/base.css
   AMS design tokens and base resets
   Import this in every app's CSS file or <link> it from index.html
*/
@font-face{font-family:'Chillax';src:url('/shared/fonts/Chillax-Variable.woff2') format('woff2');font-weight:200 700;font-display:swap;font-style:normal}
.adorn-wordmark{font-family:'Chillax',sans-serif;font-size:17px;letter-spacing:-.02em;color:#fff;text-decoration:none;line-height:1}
.adorn-wordmark .aw-brand{font-weight:650}
.adorn-wordmark .aw-app{font-weight:400}
.adorn-wordmark .aw-ver{font-size:9px;font-weight:400;opacity:.4;margin-left:4px}

:root {
  /* ── Brand colours ─────────────────────────────── */
  --ams-blue:       #00aeef;
  --ams-blue-dark:  #0369a1;
  --ams-teal:       #0d9488;
  --ams-teal-dark:  #0f766e;
  --ams-orange:     #f97316;
  --ams-purple:     #7c3aed;
  --ams-red:        #dc2626;
  --ams-indigo:     #6366f1;

  /* ── Surface / background ─────────────────────── */
  --bg-base:        #0a0f1e;
  --bg-surface:     #0c1220;
  --bg-card:        rgba(255,255,255,.03);
  --bg-card-hover:  rgba(255,255,255,.06);
  --bg-input:       rgba(255,255,255,.07);
  --bg-overlay:     rgba(0,0,0,.55);

  /* ── Border ───────────────────────────────────── */
  --border-subtle:  rgba(255,255,255,.08);
  --border-mid:     rgba(255,255,255,.12);
  --border-strong:  rgba(255,255,255,.20);
  --border-focus:   rgba(0,174,239,.5);

  /* ── Text ─────────────────────────────────────── */
  --text-primary:   rgba(255,255,255,.92);
  --text-secondary: rgba(255,255,255,.6);
  --text-muted:     rgba(255,255,255,.4);
  --text-faint:     rgba(255,255,255,.2);

  /* ── Radius ───────────────────────────────────── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;

  /* ── Shadow ───────────────────────────────────── */
  --shadow-card:    0 4px 20px rgba(0,0,0,.3);
  --shadow-modal:   0 20px 60px rgba(0,0,0,.5);
  --shadow-input:   0 2px 8px  rgba(0,0,0,.2);

  /* ── Fonts ────────────────────────────────────── */
  --font-sans:      'DM Sans', system-ui, sans-serif;
  --font-mono:      'Fira Code', 'Cascadia Code', monospace;

  /* ── Transition ───────────────────────────────── */
  --t-fast:         .15s ease;
  --t-mid:          .25s ease;
  --t-slow:         .4s  ease;

  /* ── Z-layers ─────────────────────────────────── */
  --z-dropdown:     100;
  --z-modal:        500;
  --z-overlay:      900;
  --z-toast:        9999;
}

/* ── Light mode overrides ─────────────────────────────────────────────────── */
html.light-mode {
  --bg-base:       #f0f4ff;
  --bg-surface:    #fff;
  --bg-card:       rgba(255,255,255,.85);
  --bg-card-hover: rgba(255,255,255,.95);
  --bg-input:      rgba(0,0,0,.04);

  --border-subtle: rgba(0,0,0,.08);
  --border-mid:    rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.18);

  --text-primary:   #1a1a2e;
  --text-secondary: #4b5563;
  --text-muted:     #6b7280;
  --text-faint:     #9ca3af;

  --shadow-card:    0 4px 20px rgba(0,0,0,.08);
  --shadow-modal:   0 20px 60px rgba(0,0,0,.15);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background:  var(--bg-base);
  color:        var(--text-primary);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-sans);
  background:  var(--bg-input);
  color:       var(--text-primary);
  border:      1.5px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding:     10px 13px;
  font-size:   13px;
  outline:     none;
  transition:  border-color var(--t-fast);
  color-scheme: dark;
}
html.light-mode input, html.light-mode textarea, html.light-mode select { color-scheme: light; }
input:focus, textarea:focus, select:focus {
  border-color: var(--border-focus);
}
/* Native select styling */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
select option {
  background: var(--bg-surface, #0c1220);
  color: var(--text-primary);
  padding: 8px;
}
/* Date input styling */
input[type="date"], input[type="time"] {
  padding: 8px 10px;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(.6);
  cursor: pointer;
}
html.light-mode input[type="date"]::-webkit-calendar-picker-indicator,
html.light-mode input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
}
/* Number input — hide spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Material Symbols helper ─────────────────────────────────────────────── */
/* Override Google Fonts' font-display to block (prevent text flash) */
@font-face{font-family:'Material Symbols Outlined';font-display:block;src:local('Material Symbols Outlined')}
.mi {
  font-family: 'Material Symbols Outlined';
  font-style:  normal;
  font-weight: 300;
  font-size:   22px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  line-height: 1;
  vertical-align: middle;
  /* Hide icon text until font loads */
  overflow: hidden;
  max-width: 1em;
  max-height: 1em;
  display: inline-block;
}
.mi.fill   { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.mi.sm     { font-size: 18px; }
.mi.xs     { font-size: 16px; }
.mi.lg     { font-size: 28px; }

/* ── App switcher (shared across all apps) ───────────────────────────────── */
.app-switcher {
  position: fixed; bottom: 20px; left: 16px; z-index: var(--z-dropdown);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.app-switcher-toggle {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: #1f2937; border: 1.5px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: all var(--t-fast);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.app-switcher-toggle:hover { background: #374151; color: #fff; border-color: var(--border-strong); }

.app-switcher-menu {
  background: var(--bg-surface); border: 1.5px solid var(--border-mid);
  border-radius: var(--r-lg); padding: 8px;
  display: none; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-modal); min-width: 188px;
}
.app-switcher-menu.open { display: flex; }

.app-sw-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 9px;
  color: var(--text-secondary); font-size: 12px; font-weight: 500;
  transition: background var(--t-fast); width: 100%; text-align: left;
}
.app-sw-item:hover   { background: rgba(255,255,255,.07); color: #fff; }
.app-sw-item.current { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }

.app-sw-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.app-sw-sep { height: 1px; background: var(--border-subtle); margin: 2px 0; }

html.light-mode .app-switcher-toggle { background:#fff; border-color:rgba(0,0,0,.15); color:#4b5563; }
html.light-mode .app-sw-item         { color:#4b5563; }
html.light-mode .app-sw-item:hover   { background:rgba(0,0,0,.05); color:#111; }
html.light-mode .app-sw-item.current { background:rgba(0,0,0,.06); color:#111; }
html.light-mode .app-sw-sep          { background:rgba(0,0,0,.07); }

/* App switcher footer (logged-in box + sign-out) — works in both themes */
.app-sw-user-lbl  { color: rgba(255,255,255,.35); }
.app-sw-user-name { color: rgba(255,255,255,.8); }
.app-sw-signout   { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.app-sw-signout:hover { background: rgba(255,255,255,.12); color: #fff; }
html.light-mode .app-sw-user-lbl  { color: rgba(0,0,0,.45); }
html.light-mode .app-sw-user-name { color: rgba(0,0,0,.8); }
html.light-mode .app-sw-signout   { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.6); }
html.light-mode .app-sw-signout:hover { background: rgba(0,0,0,.1); color: #111; }

/* Topbar wordmark — was hardcoded white, now adapts to theme */
html.light-mode .adorn-wordmark { color: #1a1a2e; }