/* =========================================================
   Life OS — layout.css
   Sidebar, header, page area, and phone layout.
   ========================================================= */
#app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------- Sidebar ---------- */
.sidebar {
  flex: 0 0 auto;
  width: var(--sidebar-width);
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.25s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.sb-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 48px; padding: 8px 8px 6px 14px;
}
.sb-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; }
.sb-brand-mark {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 5px;
  background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-collapse { opacity: 0; transition: opacity var(--dur), background-color var(--dur), color var(--dur); }
.sidebar:hover .sb-collapse, .sb-collapse:focus-visible { opacity: 1; }
@media (hover: none) { .sb-collapse { opacity: 1; } }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 6px 16px; }

.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; margin: 1px 0; border-radius: var(--radius);
  color: var(--text-muted); text-decoration: none; white-space: nowrap; font-size: 0.92rem;
  transition: background-color var(--dur), color var(--dur);
}
.sb-item:hover { background: var(--hover); color: var(--text); }
.sb-item.active { background: var(--active); color: var(--text); font-weight: 500; }
.sb-icon { width: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; }
.sb-emoji { font-size: 1rem; line-height: 1; }
.sb-label { overflow: hidden; text-overflow: ellipsis; }
.sb-heading {
  padding: 16px 8px 4px; font-size: 0.75rem; font-weight: 600;
  color: var(--text-faint); letter-spacing: 0.02em; white-space: nowrap;
}

/* Compact (icons only) and hidden sidebar — computers and tablets only */
@media (min-width: 769px) {
  html.sidebar-compact .sidebar { width: var(--sidebar-compact-width); }
  html.sidebar-compact .sb-label,
  html.sidebar-compact .sb-brand { display: none; }
  html.sidebar-compact .sb-top { justify-content: center; padding: 8px 0 6px; }
  html.sidebar-compact .sb-collapse { opacity: 1; }
  html.sidebar-compact .sb-item { justify-content: center; padding: 6px 0; }
  html.sidebar-compact .sb-heading { height: 1px; padding: 0; margin: 12px 10px 8px; background: var(--border); }

  html.sidebar-collapsed .sidebar { width: 0; border-right-width: 0; }
}

/* ---------- Main area and header ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.header {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 12px 0 14px; flex: 0 0 auto;
}
#sidebar-open { display: none; }
html.sidebar-collapsed #sidebar-open { display: inline-flex; }

.header-title {
  flex: 1; min-width: 0; font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-right { display: flex; align-items: center; gap: 6px; }

.clock {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 0.85rem; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.clock-time { color: var(--text); font-weight: 500; }
.clock-date-short { display: none; }

/* ---------- Page area ---------- */
.page { flex: 1; overflow-y: auto; }
.page-inner { max-width: 860px; margin: 0 auto; padding: 56px 56px 120px; }

.page-title { font-size: 2.4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 6px; }
.page-subtitle { color: var(--text-muted); margin: 0 0 28px; }

.empty-note {
  color: var(--text-faint); font-size: 0.95rem;
  padding: 14px 16px; border: 1px dashed var(--border); border-radius: 8px;
}

.module-hero-icon { font-size: 3.2rem; line-height: 1; margin-bottom: 12px; }
.module-color-bar { width: 48px; height: 4px; border-radius: 2px; margin: 4px 0 28px; }

/* ---------- Phones ---------- */
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    width: min(280px, 85vw);
    transform: translateX(-100%);
    box-shadow: var(--shadow);
    transition: transform 0.25s var(--ease), background-color 0.4s var(--ease);
  }
  html.sidebar-mobile-open .sidebar { transform: none; }

  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: var(--backdrop); opacity: 0; pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }
  html.sidebar-mobile-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  #sidebar-open { display: inline-flex; }

  .page-inner { padding: 28px 20px 100px; }
  .page-title { font-size: 1.9rem; }
  .clock-date { display: none; }
  .clock-date-short { display: inline; }
}

@media (max-width: 400px) {
  .header { gap: 6px; padding: 0 6px 0 8px; }
  .clock { gap: 6px; font-size: 0.8rem; }
}