/* ═══════════════════════════════════════════════════════════════
   HomeBase Portal — Design System
   Typefaces: DM Sans (body) + DM Mono (code/data)
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --accent:       #6366f1;
  --accent-dim:   rgba(99,102,241,0.18);
  --accent-glow:  rgba(99,102,241,0.35);
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    16px;
  --radius-xl:    22px;
  --font:         'DM Sans', system-ui, sans-serif;
  --mono:         'DM Mono', monospace;
  --ease:         cubic-bezier(.25,.46,.45,.94);
  --fast:         120ms var(--ease);
  --mid:          220ms var(--ease);
  --slow:         380ms var(--ease);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.2);
  --shadow:       0 2px 8px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-xl:    0 20px 60px rgba(0,0,0,.5);
}

[data-theme="dark"] {
  --bg:      #0c0d12;
  --bg-2:    #131520;
  --bg-3:    #1a1d2e;
  --bg-4:    #222640;
  --bg-5:    #2a2f4a;
  --border:  rgba(255,255,255,.07);
  --border-2:rgba(255,255,255,.12);
  --text:    #e9ebf5;
  --text-2:  #8b90b0;
  --text-3:  #50567a;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg:      #f2f3fb;
  --bg-2:    #ffffff;
  --bg-3:    #eceef8;
  --bg-4:    #e2e5f5;
  --bg-5:    #d8ddf0;
  --border:  rgba(0,0,0,.09);
  --border-2:rgba(0,0,0,.15);
  --text:    #181a2e;
  --text-2:  #4b5080;
  --text-3:  #8890b8;
  color-scheme: light;
}

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.65;
  transition: background var(--mid), color var(--mid);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; transition: opacity var(--fast); }
a:hover { opacity: .78; }
img { max-width: 100%; }
hr { border: none; border-top: 1px solid var(--border); }

/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 600; }
small, .text-sm { font-size: .82rem; }
.text-muted { color: var(--text-2); }
.mono { font-family: var(--mono); }

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
.container-sm { max-width: 520px; margin: 0 auto; padding: 2rem 1rem; }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(12px);
}
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.brand-gem {
  font-size: 1.5rem;
  color: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent-glow));
  line-height: 1;
}
.nav-end {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 500;
  transition: background var(--fast), color var(--fast);
}
.nav-link:hover, .nav-link.active { color: var(--text); background: var(--bg-3); opacity: 1; }
.nav-link.active { color: var(--accent); }

/* avatar button */
.avatar-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-4);
  border: 2px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: var(--text);
  overflow: hidden;
  transition: border-color var(--fast);
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.avatar-btn:hover { border-color: var(--accent); }

/* dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 210px;
  padding: .4rem 0;
  display: none;
  z-index: 999;
  animation: dropIn .12s var(--ease);
}
.dropdown-menu.open { display: block; }
@keyframes dropIn { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:none } }
.dropdown-header {
  padding: .7rem 1rem .6rem;
  border-bottom: 1px solid var(--border);
}
.dropdown-header strong { display:block; font-size:.88rem; }
.dropdown-header small  { color:var(--text-2); font-size:.75rem; }
.dropdown-item {
  display: block;
  padding: .48rem 1rem;
  color: var(--text-2);
  font-size: .85rem;
  transition: background var(--fast), color var(--fast);
}
.dropdown-item:hover { color:var(--text); background:var(--bg-3); opacity:1; }
.dropdown-item.danger:hover { color:#f87171; }
.dropdown-divider { border-top: 1px solid var(--border); margin: .3rem 0; }

/* ── Role chips ─────────────────────────────────────────────── */
.role-chips { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.35rem; }
.chip {
  font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.1rem .45rem;
  border-radius:99px;
}
.chip-admin   { background:rgba(239,68,68,.15);  color:#f87171; }
.chip-parent  { background:rgba(245,158,11,.15); color:#fbbf24; }
.chip-child   { background:rgba(34,197,94,.15);  color:#4ade80; }
.chip-visitor { background:rgba(148,163,184,.12);color:#94a3b8; }

/* ── Flash messages ─────────────────────────────────────────── */
.toasts {
  position: fixed; top:66px; right:1rem;
  z-index:1000; display:flex; flex-direction:column; gap:.5rem;
  pointer-events:none; max-width:360px;
}
.toast {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem 1rem;
  border-radius:var(--radius);
  font-size:.85rem; font-weight:500;
  box-shadow:var(--shadow-lg);
  pointer-events:all;
  animation: toastIn .2s var(--ease);
}
@keyframes toastIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
.toast button { background:none;border:none;cursor:pointer;color:inherit;opacity:.55;line-height:1; font-size:.9rem; }
.toast-success { background:rgba(34,197,94,.14);  border:1px solid rgba(34,197,94,.3);  color:#4ade80; }
.toast-error   { background:rgba(239,68,68,.14);  border:1px solid rgba(239,68,68,.3);  color:#f87171; }
.toast-info    { background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.3); color:#818cf8; }
.toast-warning { background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.3); color:#fbbf24; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
}
.card-sm { padding:1rem; border-radius:var(--radius); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1.1rem;
  border-radius:var(--radius-sm);
  font-family:var(--font); font-size:.875rem; font-weight:600;
  cursor:pointer; border:1px solid transparent;
  transition:all var(--fast); white-space:nowrap;
  text-decoration:none;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { opacity:.85; box-shadow:0 0 20px var(--accent-glow); color:#fff; }
.btn-ghost   { background:transparent; color:var(--text-2); border-color:var(--border-2); }
.btn-ghost:hover { color:var(--text); background:var(--bg-3); opacity:1; }
.btn-danger  { background:rgba(239,68,68,.14); color:#f87171; border-color:rgba(239,68,68,.25); }
.btn-danger:hover { background:rgba(239,68,68,.25); opacity:1; color:#f87171; }
.btn-sm   { padding:.3rem .7rem; font-size:.8rem; }
.btn-icon { padding:.4rem; aspect-ratio:1; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ── Form elements ──────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.15rem; }
.form-label { font-size:.85rem; font-weight:500; color:var(--text-2); }
.form-input,.form-select,.form-textarea {
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--font); font-size:.9rem;
  padding:.6rem .85rem; width:100%;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.form-textarea { resize:vertical; min-height:90px; }
.form-hint { font-size:.77rem; color:var(--text-3); }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.check-row { display:flex; align-items:center; gap:.55rem; }
.check-row input[type=checkbox] { width:15px;height:15px;accent-color:var(--accent);cursor:pointer; }
.check-row label { font-size:.875rem; color:var(--text-2); cursor:pointer; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
th {
  text-align:left; padding:.7rem 1rem;
  color:var(--text-3); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border);
  background:var(--bg-3);
}
td { padding:.75rem 1rem; border-bottom:1px solid var(--border); color:var(--text-2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg-3); color:var(--text); }
.td-mono { font-family:var(--mono); font-size:.82rem; }

/* ── App grid (portal tiles) ────────────────────────────────── */
.app-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1rem;
}
.app-tile {
  position:relative; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.4rem 1.2rem;
  display:flex; flex-direction:column; gap:.7rem;
  color:var(--text); text-decoration:none;
  transition:border-color var(--mid), transform var(--mid), box-shadow var(--mid);
}
.app-tile::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--accent-dim),transparent 55%);
  opacity:0; transition:opacity var(--mid);
}
.app-tile:hover {
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  color:var(--text); opacity:1;
}
.app-tile:hover::after { opacity:1; }
.tile-icon {
  width:46px;height:46px;
  background:var(--bg-4);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem; position:relative; z-index:1;
}
.tile-title { font-weight:600; font-size:.95rem; position:relative;z-index:1; }
.tile-desc  { font-size:.78rem;color:var(--text-2);line-height:1.5;position:relative;z-index:1; }
.pin-btn {
  position:absolute;top:.75rem;right:.75rem;
  background:none;border:none;cursor:pointer;
  color:var(--text-3);font-size:1rem;z-index:2;
  transition:color var(--fast);padding:.2rem;line-height:1;
}
.pin-btn:hover,.pin-btn.pinned { color:var(--accent); }

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-wrap {
  min-height:100vh;display:flex;
  align-items:center;justify-content:center;
  padding:1rem;
  background:radial-gradient(ellipse 60% 50% at 50% -10%, var(--accent-dim), transparent);
}
.auth-box { width:100%;max-width:420px; }
.auth-header { text-align:center;margin-bottom:1.75rem; }
.auth-gem { font-size:3rem;color:var(--accent);filter:drop-shadow(0 0 18px var(--accent-glow));display:block;margin-bottom:.6rem; }
.auth-sub { color:var(--text-2);margin-top:.3rem;font-size:.9rem; }
.divider {
  display:flex;align-items:center;gap:.75rem;
  margin:1.25rem 0;color:var(--text-3);font-size:.8rem;
}
.divider::before,.divider::after { content:'';flex:1;height:1px;background:var(--border); }
.google-btn {
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  width:100%;padding:.65rem;
  border:1px solid var(--border-2);
  border-radius:var(--radius-sm);
  background:var(--bg-3);color:var(--text);
  font-family:var(--font);font-size:.9rem;font-weight:500;
  cursor:pointer;text-decoration:none;
  transition:all var(--fast);
}
.google-btn:hover { border-color:var(--accent);background:var(--bg-4);color:var(--text);opacity:1; }

/* ── Admin layout ───────────────────────────────────────────── */
.admin-shell { display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 58px); }
.sidebar {
  background:var(--bg-2);border-right:1px solid var(--border);
  padding:1.25rem .75rem;display:flex;flex-direction:column;gap:.15rem;
}
.sidebar-group-label {
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-3);padding:.5rem .75rem;margin-top:.75rem;
}
.sidebar-link {
  display:flex;align-items:center;gap:.55rem;
  padding:.48rem .75rem;border-radius:var(--radius-sm);
  color:var(--text-2);font-size:.86rem;font-weight:500;
  transition:all var(--fast);
}
.sidebar-link:hover { color:var(--text);background:var(--bg-3);opacity:1; }
.sidebar-link.active { color:var(--accent);background:var(--accent-dim); }
.admin-body { padding:2rem;overflow:auto; }

/* ── Stats ──────────────────────────────────────────────────── */
.stats-row { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-bottom:2rem; }
.stat-card { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem; }
.stat-val   { font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em; }
.stat-label { font-size:.78rem;color:var(--text-3);margin-top:.2rem; }

/* ── Status ─────────────────────────────────────────────────── */
.dot { width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0; }
.dot-ok    { background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.55); }
.dot-warn  { background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.55); }
.dot-error { background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.55); }

/* ── File manager ───────────────────────────────────────────── */
.file-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem;
}
.file-card {
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color var(--fast);position:relative;
}
.file-card:hover { border-color:var(--border-2); }
.file-thumb {
  width:100%;aspect-ratio:16/9;background:var(--bg-3);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:2rem;overflow:hidden;
}
.file-thumb img { width:100%;height:100%;object-fit:cover; }
.file-name { font-size:.85rem;font-weight:600;word-break:break-all; }
.file-meta { font-size:.75rem;color:var(--text-3); }
.vis-badge {
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.12rem .45rem;border-radius:99px;display:inline-block;
}
.vis-private { background:rgba(239,68,68,.12);color:#f87171; }
.vis-family  { background:rgba(34,197,94,.12); color:#4ade80; }
.vis-role    { background:rgba(99,102,241,.12);color:#818cf8; }

/* ── Storage bar ────────────────────────────────────────────── */
.storage-bar-wrap {
  background:var(--bg-3);border-radius:99px;height:6px;overflow:hidden;width:100%;
}
.storage-bar {
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#a78bfa);
  transition:width .6s var(--ease);
}
.storage-bar.warn  { background:linear-gradient(90deg,#f59e0b,#ef4444); }

/* ── Markdown editor ────────────────────────────────────────── */
.md-editor { display:grid;grid-template-columns:1fr 1fr;gap:1rem;height:65vh; }
.md-editor textarea {
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-family:var(--mono);font-size:.875rem;
  padding:1rem;resize:none;width:100%;height:100%;
  transition:border-color var(--fast);
}
.md-editor textarea:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim); }
.md-preview {
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.25rem;overflow-y:auto;height:100%;
  font-size:.9rem;line-height:1.75;
}
.md-preview h1,.md-preview h2,.md-preview h3 { margin:1rem 0 .5rem;font-weight:600; }
.md-preview h1 { font-size:1.5rem; }
.md-preview h2 { font-size:1.2rem; }
.md-preview h3 { font-size:1rem; }
.md-preview p  { margin:.6rem 0; }
.md-preview ul,.md-preview ol { padding-left:1.5rem;margin:.6rem 0; }
.md-preview li { margin:.25rem 0; }
.md-preview code {
  background:var(--bg-4);border-radius:4px;
  padding:.1rem .35rem;font-family:var(--mono);font-size:.85em;
}
.md-preview pre { background:var(--bg-4);border-radius:var(--radius-sm);padding:1rem;overflow-x:auto;margin:.75rem 0; }
.md-preview pre code { background:none;padding:0; }
.md-preview blockquote {
  border-left:3px solid var(--accent);padding-left:1rem;
  color:var(--text-2);margin:.75rem 0;
}
.md-preview a { color:var(--accent); }
.md-preview strong { font-weight:600;color:var(--text); }
.md-preview hr { border-color:var(--border);margin:1rem 0; }
.md-preview table { border-collapse:collapse;width:100%;margin:.75rem 0; }
.md-preview th,.md-preview td { border:1px solid var(--border);padding:.4rem .7rem; }
.md-preview th { background:var(--bg-3); }

/* ── Page header ────────────────────────────────────────────── */
.page-hd {
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.75rem;flex-wrap:wrap;
}
.page-hd-actions { display:flex;gap:.5rem;align-items:center; }

/* ── Section title ──────────────────────────────────────────── */
.section-label {
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);margin-bottom:.75rem;
  display:flex;align-items:center;gap:.6rem;
}
.section-label::after { content:'';flex:1;height:1px;background:var(--border); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex;align-items:center;
  padding:.18rem .55rem;border-radius:99px;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
.badge-green  { background:rgba(34,197,94,.14); color:#4ade80; }
.badge-red    { background:rgba(239,68,68,.14); color:#f87171; }
.badge-yellow { background:rgba(245,158,11,.14);color:#fbbf24; }
.badge-blue   { background:rgba(99,102,241,.14);color:#818cf8; }
.badge-gray   { background:rgba(148,163,184,.12);color:var(--text-2); }

/* ── Error pages ────────────────────────────────────────────── */
.error-page { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center;gap:1rem; }
.error-code { font-size:7rem;font-weight:800;line-height:1;color:var(--accent);filter:drop-shadow(0 0 40px var(--accent-glow)); }

/* ── Clock ──────────────────────────────────────────────────── */
.clock { position:fixed;bottom:1rem;right:1.5rem;font-family:var(--mono);font-size:.78rem;color:var(--text-3);pointer-events:none;z-index:50; }

/* ── Invite copy ─────────────────────────────────────────────── */
.invite-url {
  font-family:var(--mono);font-size:.78rem;
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.5rem .75rem;word-break:break-all;cursor:pointer;
  transition:border-color var(--fast);
}
.invite-url:hover { border-color:var(--accent); }

/* ── Colour swatches ─────────────────────────────────────────── */
.swatches { display:flex;gap:.5rem;flex-wrap:wrap; }
.swatch {
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;
  transition:transform var(--fast),border-color var(--fast);
}
.swatch.active,.swatch:hover { border-color:var(--text);transform:scale(1.15); }

/* ── Utilities ──────────────────────────────────────────────── */
.flex  { display:flex; }
.flex-col { display:flex;flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.w-full { width:100%; }
.empty-state { text-align:center;padding:3.5rem 1rem;color:var(--text-3); }
.empty-state .icon { font-size:2.5rem;margin-bottom:.75rem;opacity:.35; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:768px) {
  .admin-shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .form-row { grid-template-columns:1fr; }
  .md-editor { grid-template-columns:1fr;height:auto; }
  .md-editor textarea { height:40vh; }
  .md-preview { height:40vh; }
  .app-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}