/* Mr. Patel's Workday — v3 overrides (ported from the static edition).
   Loaded after css/app.css; wins on equal specificity. Carries the static
   edition's v3 behaviors:
   A. header restructure (title row + compact pill row on phones);
   B. tab bar: exact 3px active indicator inside the active tab + label guards;
   C. usual-look metrics: kill iOS automatic text inflation + task-row metrics;
   D. laptop mode >=1024px: left-rail nav, wide centered content column;
   E. data panel (export/import) styling;
   F. day-switching + install-hint styling (static edition kept these in an
      inline <style>; folded in here so the diff stays in one file). */

/* ---------- C: text inflation + task metrics ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.task { padding: 10px 12px; }
.task-title { font-size: 15px; }

/* ---------- A: header ---------- */
:root { --header-h: calc(107px + env(safe-area-inset-top)); }
@media (min-width: 720px) { :root { --header-h: calc(63px + env(safe-area-inset-top)); } }

header#app-header {
  flex-wrap: wrap;
  row-gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
header#app-header .brand { flex: 1 1 auto; min-width: 0; }
header#app-header .brand-text { min-width: 0; }
header#app-header .brand-name,
header#app-header .brand-date { overflow: hidden; text-overflow: ellipsis; }
header#app-header .header-actions { display: flex; gap: 8px; }
header#app-header .header-actions .btn { white-space: nowrap; }
.quickadd { top: var(--header-h); }

@media (max-width: 719.98px) {
  /* phone: the buttons become one row of compact pills BELOW the title */
  header#app-header .header-actions { order: 2; flex: 1 1 100%; }
  header#app-header .header-actions .btn {
    flex: 1 1 0; min-height: 36px; padding: 4px 4px; font-size: 13px;
  }
  header#app-header .header-actions #btn-data { flex-grow: 0.8; }
  header#app-header .header-actions #btn-logout { flex-grow: 0.75; }
}

/* ---------- B: tab bar ---------- */
nav#tabbar { background: var(--surface); }
nav#tabbar button { position: relative; white-space: nowrap; }
nav#tabbar button.active { box-shadow: none; }
nav#tabbar button.active::before {
  content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent);
}
@media (max-width: 359px) {
  nav#tabbar button { font-size: 12px; padding: 12px 2px; }
}

/* ---------- E: data panel ---------- */
.data-note { color: var(--dim); font-size: 13px; margin: 0 0 12px; }
.data-actions { display: flex; flex-direction: column; gap: 8px; }
.data-status { color: var(--dim); font-size: 13px; min-height: 18px; margin: 12px 0 0; }

/* ---------- F: day-switching + install hint + page blend ---------- */
html { background: #090a0c; }
:root { color-scheme: dark; } /* native pickers (the date jump) render dark */
/* Dedicated date bar under the Today view head: [‹] [tappable date] [›]
   (+ a Today pill whenever the viewed day isn't today). >=48px targets,
   in normal flow — it can never slide under the sticky app header. */
.date-bar { display: flex; align-items: stretch; gap: 8px; margin: 10px 0 2px; }
.date-arrow {
  flex: 0 0 52px; min-height: 48px; padding: 0;
  font-size: 24px; line-height: 1;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-ctl); cursor: pointer;
}
.date-label {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctl);
  font-weight: 600; text-align: center; cursor: pointer; overflow: hidden;
}
.date-label-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* the native date input sits invisibly over the whole label: a tap anywhere
   on the label opens the platform date picker, pre-set to the viewed day */
.date-label input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; padding: 0; min-height: 0; cursor: pointer;
}
.date-today-pill {
  flex: 0 0 auto; min-height: 48px; padding: 0 18px;
  border: none; border-radius: 999px;
  background: var(--accent); color: #0b0e13; font-weight: 700; cursor: pointer;
}
.install-hint { display: flex; align-items: center; gap: 10px; background: var(--surface-raised, #1e1f24); color: var(--text, #f2f3f5); border-bottom: 1px solid var(--border-strong, rgba(255,255,255,0.15)); padding: calc(8px + env(safe-area-inset-top)) 16px 8px; font-size: 13px; }
.install-hint span { flex: 1; }
.install-hint[hidden] { display: none; }

/* ---------- D: laptop mode (>=1024px) ---------- */
@media (min-width: 1024px) {
  body { padding-left: 208px; padding-bottom: 32px; }

  /* the bottom tab bar becomes a left rail */
  nav#tabbar {
    top: 0; right: auto; width: 208px;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    border-top: none; border-right: 1px solid var(--border-strong);
    padding: calc(76px + env(safe-area-inset-top)) 12px 16px; gap: 4px;
  }
  nav#tabbar button {
    flex: none; text-align: left; min-height: 44px;
    padding: 10px 14px; font-size: 14px; border-radius: var(--radius-ctl);
  }
  nav#tabbar button.active { background: var(--surface-raised); }
  nav#tabbar button.active::before {
    top: 8px; bottom: 8px; left: 0; right: auto; width: 3px; height: auto;
    border-radius: 0 3px 3px 0;
  }

  main#view { max-width: 1120px; padding: 24px 32px; }
  .desk-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .note-editor { max-width: 820px; }
  .panel { width: min(480px, 94vw); }
}
@media (min-width: 1024px) and (hover: hover) {
  nav#tabbar button:hover { background: var(--surface-alt); color: var(--text); }
  .task:hover, .note-card:hover, .archive-item:hover { border-color: var(--border-strong); }
}