/* Dashboard grid (F3) — rows of preset-width columns, each holding a widget card.
   Module accent is a thin top border + a coloured icon; the icon + title carry the
   meaning, the colour only reinforces (colour-blind-safe). */

/* Module accent tokens (Okabe-Ito derived; tuned for contrast per theme). */
:root {
  --c-mod-global: #0072B2;
  --c-mod-work: #B26A00;
  --c-mod-finance: #2E86C1;
  --c-mod-health: #00806B;
  --c-mod-agenda: #A2557F;
  --c-mod-passwords: #C0522A;
}
[data-theme="dark"] {
  --c-mod-global: #56B4E9;
  --c-mod-work: #E69F00;
  --c-mod-finance: #7FC7F0;
  --c-mod-health: #3DD9A8;
  --c-mod-agenda: #E29CC4;
  --c-mod-passwords: #F08A50;
}

.wdg-page { display: flex; flex-direction: column; gap: var(--sp-4); }

.wdg-row { display: grid; gap: var(--sp-4); align-items: stretch; }
.wdg-row--100 { grid-template-columns: 1fr; }
.wdg-row--50-50 { grid-template-columns: 1fr 1fr; }
.wdg-row--66-33 { grid-template-columns: 2fr 1fr; }
.wdg-row--33-66 { grid-template-columns: 1fr 2fr; }
.wdg-row--33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
.wdg-row--50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
.wdg-row--25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
.wdg-row--25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
.wdg-row--25-25-25-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .wdg-row { grid-template-columns: 1fr; } }

.wdg-cell { min-width: 0; }
.wdg-cell--empty { display: none; } /* nothing rendered for empty cells in view mode */

.wdg {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--wdg-accent, var(--c-border-strong));
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wdg--global { --wdg-accent: var(--c-mod-global); }
.wdg--work { --wdg-accent: var(--c-mod-work); }
.wdg--finance { --wdg-accent: var(--c-mod-finance); }
.wdg--health { --wdg-accent: var(--c-mod-health); }
.wdg--agenda { --wdg-accent: var(--c-mod-agenda); }
.wdg--passwords { --wdg-accent: var(--c-mod-passwords); }

.wdg__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.wdg__icon { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--wdg-accent, var(--c-ink-soft)); }
.wdg__icon svg { width: 1.15rem; height: 1.15rem; }
.wdg__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.wdg__note { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-faint); white-space: nowrap; }
.wdg__body { flex: 1 1 auto; min-width: 0; padding: 0 var(--sp-4) var(--sp-4); }

/* Locked widget — a module gated by the internal lock shows this instead of its
   data. The lock icon + text carry the state; colour is only a faint accent. */
.wdg--locked .wdg__body { display: flex; }
.wdg-locked { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 5rem; padding: var(--sp-4); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); color: var(--c-ink-soft); text-align: center; }
.wdg-locked:hover { border-color: var(--wdg-accent, var(--c-border-strong)); color: var(--c-ink); background: var(--c-surface-2); }
.wdg-locked__ic { display: grid; place-items: center; color: var(--wdg-accent, var(--c-ink-soft)); }
.wdg-locked__ic svg { width: 1.4rem; height: 1.4rem; }
.wdg-locked__txt { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* Bare widgets (shortcuts / KPI strips) render their own chrome and just need spacing. */
.wdg-cell > .dash-shortcuts, .wdg-cell > .dash-kpis { margin: 0; }

/* ---- Floating "Customise" control (bottom-right) ----
   Stage 1: icon only. Stage 2: hover reveals the label. Stage 3: click expands
   into Add row · Reset · Done. Stage 4: Done saves and collapses back. */
.dash { position: relative; }
.dash-fab { position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 45; }

.dash-fab__toggle {
  display: inline-flex; align-items: center;
  height: 3rem; padding: 0 0.9rem;
  background: var(--c-ink); color: var(--c-surface); /* --c-surface is the inverse of --c-ink, so it stays legible in both themes */
  border-radius: var(--r-full); box-shadow: var(--shadow-md);
  white-space: nowrap; overflow: hidden;
}
.dash-fab__toggle:hover { filter: brightness(1.12); }
.dash-fab__ic { flex: 0 0 auto; display: grid; place-items: center; }
.dash-fab__ic svg { width: 1.25rem; height: 1.25rem; }
.dash-fab__label {
  max-width: 0; opacity: 0; overflow: hidden;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease), margin var(--dur) var(--ease);
}
.dash-fab__toggle:hover .dash-fab__label,
.dash-fab__toggle:focus-visible .dash-fab__label { max-width: 16rem; opacity: 1; margin-left: var(--sp-2); }

.dash-fab__menu {
  display: none; align-items: center; gap: 2px;
  padding: 4px; background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
}
.dash-fab__act {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 2.5rem; padding: 0 var(--sp-4); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-soft); white-space: nowrap;
}
.dash-fab__act svg { width: 1rem; height: 1rem; }
.dash-fab__act:hover { background: var(--c-surface-2); color: var(--c-ink); }
.dash-fab__act--done { background: var(--c-ink); color: var(--c-surface); }
.dash-fab__act--done:hover { background: var(--c-ink); color: var(--c-surface); filter: brightness(1.12); }

/* edit mode: swap the icon button for the action menu */
.dash-fab[data-editing="true"] .dash-fab__toggle { display: none; }
.dash-fab[data-editing="true"] .dash-fab__menu { display: inline-flex; }

@media (max-width: 560px) {
  .dash-fab { right: var(--sp-4); bottom: var(--sp-4); }
  .dash-fab__menu { flex-direction: column; align-items: stretch; border-radius: var(--r-lg); }
  .dash-fab__act { justify-content: center; }
}

.wdg-page--edit { gap: var(--sp-5); }
.ed-row { border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); padding: var(--sp-3); background: var(--c-surface-2); }
.ed-row__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ed-preset { font-size: var(--fs-sm); color: var(--c-ink-soft); display: inline-flex; align-items: center; gap: var(--sp-2); }
.ed-preset select { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font: inherit; }
.ed-row__moves { display: flex; gap: 4px; }
.ed-mini { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); color: var(--c-ink-soft); background: var(--c-surface); }
.ed-mini:hover:not([disabled]) { background: var(--c-surface-2); color: var(--c-ink); }
.ed-mini[disabled] { opacity: 0.4; }
.ed-mini svg { width: 1rem; height: 1rem; }
.ed-mini--del:hover:not([disabled]) { border-color: #b42318; color: #b42318; }

.ed-cell { position: relative; }
.ed-cell--filled { cursor: move; }
.ed-cell.is-dragging { opacity: 0.4; }
.ed-cell.is-over { outline: 2px dashed var(--c-accent-ink); outline-offset: -2px; border-radius: var(--r-lg); }
.ed-grip { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: var(--c-ink-faint); cursor: move; }
.ed-grip svg { width: 1.1rem; height: 1.1rem; }
.ed-cell__tools { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; gap: 4px; }
.ed-cell__inner { pointer-events: none; opacity: 0.96; }
.ed-add-cell { pointer-events: auto; width: 100%; min-height: 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); color: var(--c-ink-faint); background: var(--c-surface); }
.ed-add-cell:hover { color: var(--c-accent-ink); border-color: var(--c-accent-ink); }
.ed-add-cell svg { width: 1.4rem; height: 1.4rem; }

.ed-addrow { display: flex; justify-content: center; }
.ed-addrow .btn-ghost { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px dashed var(--c-border-strong); }
.ed-actions { display: flex; justify-content: space-between; gap: var(--sp-3); }

/* widget picker */
.ed-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(20,21,26,0.35); }
.ed-picker { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 92vw); max-height: 80vh; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: 0 24px 60px -24px rgba(20,21,26,0.5); }
.ed-picker__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.ed-picker__head h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ed-picker__list { overflow-y: auto; padding: var(--sp-2) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 4px; }
.ed-pick { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); text-align: left; }
.ed-pick:hover:not([disabled]) { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.ed-pick[disabled] { opacity: 0.45; }
.ed-pick__icon { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; }
.ed-pick__icon svg { width: 1.15rem; height: 1.15rem; }
.ed-pick__name { font-weight: var(--fw-semibold); }
.ed-pick__mod { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-faint); }
.ed-pick-group + .ed-pick-group { margin-top: var(--sp-3); }
.ed-pick-grouphead { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
.ed-pick-grouphead .ed-pick__icon { width: 1.1rem; height: 1.1rem; }
.ed-pick-grouphead .ed-pick__icon svg { width: 1rem; height: 1rem; }
.ed-pick-group .ed-pick { margin-bottom: 4px; }