/* Host dashboard — Light (default) + Obsidian themes */

:root,
[data-theme="light"] {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-high: #F9FAFB;
  --sidebar: #FFFFFF;
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  --text: #111827;
  --text-sub: #374151;
  --muted: #6B7280;
  --scrollbar-thumb: #D1D5DB;
  --scrollbar-thumb-hover: #9CA3AF;
  --input-bg: #F9FAFB;
}

[data-theme="obsidian"] {
  --bg: #0D0F14;
  --surface: #161A22;
  --surface-high: #1E2330;
  --sidebar: #0A0C10;
  --border: #2A2F3D;
  --border-light: #1E2330;
  --text: #F8FAFC;
  --text-sub: #CBD5E1;
  --muted: #64748B;
  --scrollbar-thumb: #2A2F3D;
  --scrollbar-thumb-hover: #3A4150;
  --input-bg: #1E2330;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ── Layout ────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100dvh;
  width: 100%;
}

/* ── Inputs (native elements outside Compose) ──────────── */
input, select, textarea {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #6366F1 !important;
  outline: none;
}
input::placeholder { color: var(--muted) !important; }
select option { background: var(--surface-high); }

/* ── Page header ────────────────────────────────────────── */
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -0.4px; }
.page-header p { color: var(--muted); margin: 5px 0 0; font-size: 14px; }

button:hover { opacity: 0.88; }

/* ── Misc ───────────────────────────────────────────────── */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-header-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.card-actions-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.card-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12px; text-align: center; }

.modal-backdrop { padding: 16px !important; }
.modal-panel { max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-panel--narrow { max-width: 420px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .app-layout { flex-direction: column; }
  .app-main { padding: 16px 14px; width: 100%; }
  .page-header { margin-bottom: 16px !important; }
  .page-header h1 { font-size: 20px; }
  .filter-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .card-header-row { flex-direction: column; }
  .card-actions-col { align-items: stretch; width: 100%; }
  .card-actions-row { flex-direction: column; width: 100%; }
  .card-actions-row button { width: 100%; }
  .btn-row { flex-direction: column; }
  .btn-row button { width: 100%; }
  .calendar-grid { font-size: 10px; gap: 2px; }
  .calendar-grid .calendar-day { min-height: 32px !important; padding: 2px !important; }
  .modal-panel, .modal-panel--narrow { max-width: 100% !important; max-height: 95vh; border-radius: 12px !important; }
  .modal-backdrop { padding: 8px !important; align-items: flex-end !important; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
}

@media (max-width: 480px) {
  .app-main { padding: 12px 10px; }
  .calendar-grid { font-size: 9px; }
}