/* =========================================================
   Household Hub – Foundation CSS (vNext)
   Extracted from original styles.css for migration test
   - tokens
   - reset + base body
   - app-shell layout contract
   - routed-view stretch contract
   ========================================================= */

/* -----------------------------
   Design Tokens (EXACT COPY)
----------------------------- */

:root {
    --bg:        #f7f3ee;
    --panel:     #fffdfa;
    --border:    #e6dfd6;
    --text:      #2a2a2a;
    --muted:     #7b746c;
  
    --plan:      #b7d3c6;
    --build:     #e6d8b5;
    --cal:       #c4d6e6;
  
    --shadow-soft: 0 12px 30px rgba(0,0,0,0.08);
    --shadow-hover: 0 22px 45px rgba(0,0,0,0.14);
  
    --task:    #cfe5db;
    --project: #e8dcc1;
    --event:   #d9e3dc;
  }

  :root[data-theme="dark"] {
    --bg:        #0b1018;
    --panel:     #121a26;
    --border:    #2a3950;
    --text:      #e9f2ff;
    --muted:     #98abc6;

    --plan:      #00f5c4;
    --build:     #ffd166;
    --cal:       #42d9ff;

    --task:      #1f3a36;
    --project:   #3d3320;
    --event:     #1f3540;

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.58);
  }

  :root[data-theme="dark"] .toolbar {
    background: linear-gradient(180deg, #101826 0%, #0b111c 100%);
  }

  :root[data-theme="dark"] .toolbar-tile {
    background: #223248;
    color: var(--text);
  }

  :root[data-theme="dark"] .toolbar-tile:hover {
    background: #2a3d56;
  }

  :root[data-theme="dark"] .topbar strong {
    color: var(--text);
  }

  :root[data-theme="dark"] .avatar-menu,
  :root[data-theme="dark"] .weather-strip,
  :root[data-theme="dark"] .admin-panel,
  :root[data-theme="dark"] .admin-metric,
  :root[data-theme="dark"] .settings-member,
  :root[data-theme="dark"] .settings-crop-modal,
  :root[data-theme="dark"] .calendar-day,
  :root[data-theme="dark"] .calendar-item,
  :root[data-theme="dark"] .login-hints,
  :root[data-theme="dark"] .login-modal {
    background: #172233;
  }

  :root[data-theme="dark"] .admin-tabs button,
  :root[data-theme="dark"] .admin-range button,
  :root[data-theme="dark"] .calendar-range-btn,
  :root[data-theme="dark"] .calendar-chip,
  :root[data-theme="dark"] .calendar-period-btn,
  :root[data-theme="dark"] .calendar-period-today,
  :root[data-theme="dark"] .weather-nav,
  :root[data-theme="dark"] .build-inbox-x,
  :root[data-theme="dark"] .planning-delete,
  :root[data-theme="dark"] .planning-project-delete,
  :root[data-theme="dark"] .planning-subtask-delete,
  :root[data-theme="dark"] .settings-member-controls button,
  :root[data-theme="dark"] .login-button.ghost {
    background: #2a3b54;
    color: var(--text);
  }

  :root[data-theme="dark"] .admin-user-menu-trigger {
    background: #25354d;
    color: var(--text);
  }

  :root[data-theme="dark"] .admin-user-menu-items {
    background: #172233;
  }

  :root[data-theme="dark"] .planning-list::-webkit-scrollbar-thumb {
    background: #355073;
  }

  :root[data-theme="dark"] .planning-input,
  :root[data-theme="dark"] .planning-subinput {
    border-bottom-color: #2c3d57;
    color: var(--text);
  }

  :root[data-theme="dark"] .planning-item,
  :root[data-theme="dark"] .planning-project-header,
  :root[data-theme="dark"] .planning-subitem {
    border-bottom-color: #25364e;
  }

  :root[data-theme="dark"] .planning-subitem {
    color: var(--muted);
  }

  :root[data-theme="dark"] .build-line {
    background: rgba(180, 214, 255, 0.22);
  }

  :root[data-theme="dark"] .build-hours-day {
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--build) 22%, #121a26) 0%,
      color-mix(in oklab, var(--plan) 24%, #121a26) 34%,
      color-mix(in oklab, var(--cal) 26%, #121a26) 68%,
      #121a26 100%
    );
  }

  :root[data-theme="dark"] .calendar-sidebar {
    background: linear-gradient(180deg, #1a2739, #182235);
  }

  :root[data-theme="dark"] .calendar-panel {
    background: rgba(20, 30, 45, 0.82);
  }

  :root[data-theme="dark"] .calendar-pill,
  :root[data-theme="dark"] .calendar-chip.ghost {
    background: #223248;
  }

  :root[data-theme="dark"] .calendar-pill[data-status='done'] {
    background: color-mix(in oklab, var(--plan) 28%, #172233);
  }

  :root[data-theme="dark"] .calendar-pill[data-status='doing'] {
    background: color-mix(in oklab, var(--cal) 32%, #172233);
  }

  :root[data-theme="dark"] .calendar-pill[data-status='canceled'] {
    background: #4a2a34;
  }

  :root[data-theme="dark"] .login-link-button,
  :root[data-theme="dark"] .settings-link-button,
  :root[data-theme="dark"] .settings-form button.settings-link-button {
    color: #9bd6ff;
  }

  :root[data-theme="dark"] .login-error,
  :root[data-theme="dark"] .settings-field-error,
  :root[data-theme="dark"] .admin-flash[data-kind='error'] {
    color: #ff9f9f;
  }

  :root[data-theme="dark"] .login-ok {
    color: #84e8a1;
  }
  
  /* -----------------------------
     Reset (EXACT COPY)
  ----------------------------- */
  
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  
  body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.4;
    transition: background-color 160ms ease, color 160ms ease;
  }
  
  /* -----------------------------
     App Shell (CONTRACT)
  ----------------------------- */
  
  .app-shell {
    display: flex;
    height: 100vh;
    width: 100%;
  }
  
  .app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  
  .app-content {
    flex: 1;
    display: flex;
    justify-content: center;
    min-height: 0;
  }
  
  /* Make routed views stretch to available width inside app-shell */
  .app-content > * {
    flex: 1;
    min-width: 0;
  }
  
  /* Ensure custom elements behave like normal blocks */
  planning-view,
  building-view,
  dashboard-view,
  calendar-view,
  chores-view,
  messages-view,
  settings-view,
  login-view {
    display: block;
  }
  
  /* Shell component structural placement helper */
app-toolbar {
  display: flex;
  height: 100%;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}