/* ============================================================================
   Design system — white editorial, blue action accent, amber attention accent.

   Colour rules that keep two accents from competing:
     blue  = "this does something"   (buttons, links, active nav, completion)
     amber = "pay attention to this" (pinned sections, overdue, missed)
   Everything else is neutral. Never use amber for an ordinary button.

   Pages opt in by linking common.css INSTEAD of styles.css. Pages still on
   styles.css are unaffected; nav.html reads the same variable names from
   whichever stylesheet is present.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Surfaces */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F5F6F7;

  /* Text */
  --color-text: #1F2328;
  --color-text-muted: #5F6368;
  --color-text-subtle: #8B9096;

  /* Lines */
  --color-border: #E3E5E8;
  --color-border-strong: #D1D5DB;

  /* Blue — action */
  --color-accent: #3B5BDB;
  --color-accent-hover: #2F49B2;
  --color-accent-soft: #EDF1FD;
  --color-on-accent: #FFFFFF;

  /* Amber — attention */
  --color-flag: #F5A623;
  --color-flag-soft: #FEF3E0;
  --color-on-flag: #4A2E00;

  /* Semantic */
  --color-success: #1E9E6A;
  --color-danger: #D64545;
  --color-danger-soft: #FCEDED;

  /* Consumed by nav.html so the shared nav follows whichever palette loads */
  --color-nav: #FFFFFF;
  --color-nav-text: #5F6368;
  --color-nav-text-active: #1F2328;
  --color-nav-hover: #F5F6F7;
  --color-header-bg: #FFFFFF;
  --color-header-text: #1F2328;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --transition: 0.16s ease;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
}

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

html { font-family: var(--font-family); -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4 { margin: 0 0 0.5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1rem; }

/* ---------------------------------------------------------------- header */

header.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
}
header.app-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
header.app-header h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.header-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.header-stat { display: flex; flex-direction: column; align-items: flex-end; }
.header-stat .stat-value { font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.header-stat .stat-label { font-size: 0.75rem; color: var(--color-text-muted); }
.header-stat[data-tone="flag"] .stat-value { color: var(--color-flag); }

/* -------------------------------------------------------------- sections */

main { padding: 1.25rem 0 3rem; }

.section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  user-select: none;
  background: var(--color-surface);
  transition: background var(--transition);
}
.section-header:hover { background: var(--color-surface-sunken); }
.section-header .chevron {
  flex: none;
  color: var(--color-text-subtle);
  transition: transform var(--transition);
}
.section-header[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.section-title { font-size: 0.98rem; font-weight: 600; flex: 1 1 auto; }
.section-count {
  flex: none;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
}
.section-count[data-tone="flag"] {
  background: var(--color-flag-soft);
  color: var(--color-on-flag);
}

/* Pin = "keep this open", so it earns the amber attention accent. */
.pin-star {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.pin-star:hover { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.pin-star[aria-pressed="true"] { color: var(--color-flag); }
.pin-star[aria-pressed="true"] svg { fill: var(--color-flag); }

.section-body { padding: 0 1rem 1rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.btn-ghost { background: none; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.93); }
.btn-sm { font-size: 0.82rem; padding: 0.35rem 0.65rem; }
.btn:focus-visible, .icon-btn:focus-visible, .pin-star:focus-visible, .section-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Icon buttons carry meaning by shape, tone by role. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none; /* never let flex shrink these below a tappable size */
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.icon-btn[data-tone="accent"]:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.icon-btn[data-tone="success"]:hover { background: #E8F6F0; color: var(--color-success); }
.icon-btn[data-tone="danger"]:hover { background: var(--color-danger-soft); color: var(--color-danger); }

.action-cell { display: flex; align-items: center; gap: 0.1rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- inputs */

input, select, textarea {
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
input[type="color"] { padding: 0.15rem; height: 36px; width: 52px; cursor: pointer; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); }
.form-grid select[multiple] { min-height: 108px; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.5rem; }
.label-hint { font-weight: 400; color: var(--color-text-subtle); }
.form-note { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--color-text-muted); }

/* Collapsible "add" panel inside a section */
.add-panel {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.data-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--color-surface-sunken); }

.cell-title { font-weight: 500; }
.cell-project { font-size: 0.76rem; margin-top: 0.1rem; }
.cell-muted { color: var(--color-text-muted); }
.num { font-variant-numeric: tabular-nums; }

/* Amber earns its place here: overdue is the thing to look at. */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge-flag { background: var(--color-flag); color: var(--color-on-flag); }
.badge-soft { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent); }

.project-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: 1px;
}

/* --------------------------------------------------------- weekly grid */

.week-bar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.week-label { font-size: 0.9rem; font-weight: 500; min-width: 12rem; text-align: center; }

.week-grid { display: grid; grid-template-columns: minmax(280px, 2.6fr) repeat(7, minmax(38px, 1fr)); min-width: 620px; }
.week-grid > div { display: flex; align-items: center; justify-content: center; padding: 0.4rem 0.25rem; }
.week-grid .wg-head {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  border-bottom: 1px solid var(--color-border);
}
.week-grid .wg-head.is-today { color: var(--color-accent); }
.week-grid .wg-task {
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
/* Row actions stay on one line; the task name wraps instead. */
.week-grid .wg-task > div:first-child { min-width: 0; }
.week-grid .wg-task .action-cell { flex-wrap: nowrap; flex: none; }
.week-grid .wg-cell { border-bottom: 1px solid var(--color-border); }
.week-grid .is-today-col { background: var(--color-accent-soft); }

.day-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border-strong);
  background: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.day-dot:hover { transform: scale(1.12); }
.day-dot[data-state="done"] { background: var(--color-accent); border-color: var(--color-accent); }
.day-dot[data-state="due"] { border-color: var(--color-accent); border-style: dashed; }
.day-dot[data-state="missed"] { border-color: var(--color-flag); background: var(--color-flag-soft); }
/* Not scheduled that day, but still clickable — logging an off-day counts. */
.day-dot[data-state="off"] { width: 8px; height: 8px; border: none; background: var(--color-border-strong); }
.day-dot[data-state="off"]:hover { background: var(--color-accent); }

/* ---------------------------------------------------------- empty state */

.empty-state {
  text-align: center;
  padding: 1.75rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}
.empty-state .empty-icon { color: var(--color-border-strong); margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}
.modal.hidden { display: none !important; }
.modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-header h3 { margin: 0; }
.modal-body { padding: 1.1rem; overflow-y: auto; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--color-text);
  color: #fff;
  font-size: 0.88rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 1100;
  transition: opacity var(--transition), transform var(--transition);
}
.toast.hidden { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; display: block !important; }
.toast[data-tone="error"] { background: var(--color-danger); }

/* --------------------------------------------- embedded in a Main card */

body.embed-mode { background: transparent; }
body.embed-mode main { padding: 0; }
body.embed-mode .container { padding: 0; }
body.embed-mode .section { border: none; margin: 0; background: transparent; }
body.embed-mode .section-body { border-top: none; padding: 0.5rem; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 700px) {
  body { font-size: 14px; }
  .container { padding: 0 0.6rem; }
  header.app-header .container { gap: 0.6rem; }
  .header-stats { gap: 0.9rem; }
  .section-body { padding: 0 0.6rem 0.85rem; padding-top: 0.85rem; }
  .week-grid { grid-template-columns: minmax(120px, 1.8fr) repeat(7, minmax(30px, 1fr)); font-size: 0.8rem; }
  .week-grid > div { padding: 0.3rem 0.1rem; }
  .day-dot { width: 20px; height: 20px; }
  .icon-btn { width: 34px; height: 34px; } /* comfortable touch target */
  .form-grid { grid-template-columns: 1fr; }
}