/* Material Design 3 (baseline) colour roles, type scale, shape, and elevation, in plain CSS. */

:root {
  color-scheme: light;

  --primary: #6750a4;
  --on-primary: #ffffff;
  --primary-container: #eaddff;
  --on-primary-container: #21005d;
  --secondary-container: #e8def8;
  --on-secondary-container: #1d192b;

  --surface: #fef7ff;
  --surface-container: #f3edf7;
  --surface-container-high: #ece6f0;
  --surface-container-highest: #e6e0e9;
  --on-surface: #1d1b20;
  --on-surface-variant: #49454f;
  --outline: #79747e;
  --outline-variant: #cac4d0;

  --error: #b3261e;
  --on-error: #ffffff;
  --error-container: #f9dedc;

  /* Not a baseline M3 role: a green reserved for the add action. */
  --add: #2e7d32;
  --on-add: #ffffff;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --primary: #d0bcff;
    --on-primary: #381e72;
    --primary-container: #4f378b;
    --on-primary-container: #eaddff;
    --secondary-container: #4a4458;
    --on-secondary-container: #e8def8;

    --surface: #141218;
    --surface-container: #211f26;
    --surface-container-high: #2b2930;
    --surface-container-highest: #36343b;
    --on-surface: #e6e1e5;
    --on-surface-variant: #cac4d0;
    --outline: #938f99;
    --outline-variant: #49454f;

    --error: #f2b8b5;
    --on-error: #601410;
    --error-container: #8c1d18;

    --add: #8adb96;
    --on-add: #003910;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --primary: #d0bcff;
  --on-primary: #381e72;
  --primary-container: #4f378b;
  --on-primary-container: #eaddff;
  --secondary-container: #4a4458;
  --on-secondary-container: #e8def8;

  --surface: #141218;
  --surface-container: #211f26;
  --surface-container-high: #2b2930;
  --surface-container-highest: #36343b;
  --on-surface: #e6e1e5;
  --on-surface-variant: #cac4d0;
  --outline: #938f99;
  --outline-variant: #49454f;

  --error: #f2b8b5;
  --on-error: #601410;
  --error-container: #8c1d18;

  --add: #8adb96;
  --on-add: #003910;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---- Type scale ---- */
.display-small { font-size: 36px; line-height: 44px; font-weight: 400; }
.headline-small { font-size: 24px; line-height: 32px; font-weight: 400; margin: 0 0 16px; }
.title-large { font-size: 22px; line-height: 28px; font-weight: 400; }
.title-medium { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-small { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-large { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-medium { font-size: 14px; line-height: 20px; font-weight: 400; }
.label-large { font-size: 14px; line-height: 20px; font-weight: 500; }
.label-medium { font-size: 12px; line-height: 16px; font-weight: 500; }
.label-small { font-size: 11px; line-height: 16px; font-weight: 500; }

.variant { color: var(--on-surface-variant); }
.center { text-align: center; }
.empty { color: var(--on-surface-variant); text-align: center; padding: 24px 0; margin: 0; }
h2.title-medium { margin: 24px 0 8px; }

/* ---- App bar and layout ---- */
.top-app-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 16px;
  background: var(--surface);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 120px; /* room for the add button */
}

.error-text {
  min-height: 20px;
  margin: 0 0 8px;
  color: var(--error);
  font-size: 12px;
  line-height: 16px;
}

/* ---- Buttons ---- */
button, .text-button, .filled-button, .outlined-button {
  font-family: inherit;
}

.filled-button,
.outlined-button,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.filled-button {
  background: var(--primary);
  color: var(--on-primary);
}

.outlined-button {
  background: transparent;
  border-color: var(--outline);
  color: var(--primary);
}

.text-button {
  background: transparent;
  color: var(--primary);
  padding: 0 12px;
}

.text-button.danger { color: var(--error); }

.text-button[hidden] { display: none; }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--on-surface-variant);
  cursor: pointer;
}

.icon svg,
.icon-button svg,
.text-button svg,
.fab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}

.icon { display: inline-flex; }

.moved-banner {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: var(--radius-m);
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.moved-banner h2 { margin: 0 0 4px; }
.moved-banner p { margin: 0 0 12px; }
.moved-banner .filled-button { text-decoration: none; display: inline-flex; }
.banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-hint { margin: 10px 0 0 !important; font-size: 13px; line-height: 18px; opacity: 0.85; }
.moved-banner textarea {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  font: 14px/20px monospace;
  color: var(--on-surface);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-s);
  resize: vertical;
}
.moved-banner .copy-fallback { margin: 12px 0 0; }
.moved-banner textarea[hidden] { display: none; }

.notice {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.back-link {
  margin: 8px 0 0 -12px;
}

/* ---- Home: add project ---- */
.add-project {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.add-project .outlined-field { flex: 1; margin-bottom: 0; }
.add-project .filled-button { margin-top: 8px; }

/* ---- Outlined text fields with floating labels ---- */
.outlined-field {
  position: relative;
  margin-bottom: 16px;
}

.outlined-field input,
.outlined-field select,
.date-button {
  width: 100%;
  height: 56px;
  padding: 16px;
  margin: 0;
  border: 1px solid var(--outline);
  border-radius: 4px;
  background: transparent;
  color: var(--on-surface);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.date-button { text-align: left; cursor: pointer; }

.date-button.placeholder { color: var(--on-surface-variant); }

.outlined-field input:focus,
.outlined-field select:focus,
.date-button:focus {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.outlined-field label {
  position: absolute;
  top: 50%;
  left: 12px;
  padding: 0 4px;
  background: var(--label-bg, var(--surface));
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 24px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: top 120ms, font-size 120ms, color 120ms;
}

.outlined-field input:focus + label,
.outlined-field input:not(:placeholder-shown) + label,
.outlined-field.always-float label {
  top: 0;
  font-size: 12px;
  line-height: 16px;
}

.outlined-field input:focus + label { color: var(--primary); }

.outlined-field select,
.outlined-field input[type="number"] {
  -moz-appearance: textfield;
}

.outlined-field input[type="number"]::-webkit-inner-spin-button,
.outlined-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Surfaces and lists ---- */
.summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  margin-bottom: 8px;
  border-radius: var(--radius-m);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.m3-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  border-radius: var(--radius-m);
  background: var(--surface-container);
  overflow: hidden;
}

.m3-list li + li { border-top: 1px solid var(--outline-variant); }

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--on-surface);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.list-item:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }

.list-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.list-item-text .body-medium { overflow-wrap: anywhere; }

/* ---- Segmented control ---- */
.segmented {
  display: flex;
  height: 40px;
  margin-bottom: 16px;
  border: 1px solid var(--outline);
  border-radius: 20px;
  overflow: hidden;
}

.segmented button {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  border: none;
  border-left: 1px solid var(--outline);
  background: transparent;
  color: var(--on-surface);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.segmented button:first-child { border-left: none; }

.segmented button.active {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

/* ---- Calendars (shared shape) ---- */
.calendar {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: var(--radius-m);
  background: var(--surface-container-highest);
}

.calendar[hidden] { display: none; }

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-header strong { flex: 1; text-align: center; }

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  justify-items: center;
}

.calendar-weekdays {
  margin-bottom: 4px;
  color: var(--on-surface-variant);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}

/* Date picker in the entry form */
.day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.day.blank { visibility: hidden; }
.day.today { border-color: var(--primary); }
.day.selected { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Hours calendar: the day number is fixed at the top and the hours chip at the bottom.
   Both rows always take up space, so cells with and without hours line up. */
.hours-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 4px 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
}

.hours-cell.blank { visibility: hidden; cursor: default; }
.hours-cell.today { border-color: var(--primary); }
.hours-cell:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }

.cell-day {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--on-surface);
}

.cell-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 100%;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cell-hours.has-hours {
  width: auto;
  min-width: 0;
  padding: 0 6px;
  border-radius: 999px;
}

.hours-cell.lvl-1 .cell-hours.has-hours { background: var(--secondary-container); color: var(--on-secondary-container); }
.hours-cell.lvl-2 .cell-hours.has-hours { background: var(--primary-container); color: var(--on-primary-container); }
.hours-cell.lvl-3 .cell-hours.has-hours { background: var(--primary); color: var(--on-primary); }

/* ---- Floating add button ---- */
.fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: var(--radius-m);
  background: var(--add);
  color: var(--on-add);
  box-shadow: var(--elevation-3);
  cursor: pointer;
}

.fab svg { margin: 0; }

/* ---- Dialog ---- */
dialog {
  --label-bg: var(--surface-container-high);
  width: min(calc(100vw - 32px), 560px);
  max-height: calc(100vh - 32px);
  padding: 24px;
  border: none;
  border-radius: var(--radius-l);
  background: var(--surface-container-high);
  color: var(--on-surface);
  box-shadow: var(--elevation-3);
  overflow: auto;
}

dialog::backdrop { background: rgba(0, 0, 0, 0.4); }

.dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.spacer { flex: 1; }

/* Shown in the entry form when the chosen project and day already have an entry. */
.conflict {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  background: var(--error-container);
  color: var(--on-surface);
}

.conflict[hidden] { display: none; }

.conflict p { margin: 0; }

.conflict .text-button { padding: 0; }

/* ---- Month tree: months > weeks > days ---- */
.tree-children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}

/* Days sit one step deeper than their week, so the nesting is visible. */
.tree-children.days { padding-left: 32px; }

.tree-children > li + li { border-top: 1px solid var(--outline-variant); }

.toggle .toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.toggle.level-2 { min-height: 48px; padding-left: 8px; }

.day-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 8px 8px 16px;
  border-top: 1px solid var(--outline-variant);
}

.day-row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.day-row-text .body-medium { overflow-wrap: anywhere; }

.icon-button.danger { color: var(--error); }

/* Tonal icon buttons, used for the hours stepper. */
.icon-button.tonal {
  flex: none;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.icon-button.tonal:hover {
  background: color-mix(in srgb, var(--on-secondary-container) 8%, var(--secondary-container));
}

/* Hours row: a half-width box with the − and + buttons outside it, to its right. The box's
   own spinners are hidden in favour of these buttons. */
.hours-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.hours-field {
  flex: 0 0 50%;
  margin-bottom: 0;
}

.hours-field label {
  white-space: nowrap;
}

.stepper-buttons {
  display: flex;
  gap: 16px;
}

.filled-button.danger {
  background: var(--error);
  color: var(--on-error);
}

/* The in-app confirmation uses the same surface as the entry dialog. */
#confirm-dialog { width: min(calc(100vw - 32px), 420px); }

.filled-button:disabled {
  background: color-mix(in srgb, var(--on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--on-surface) 38%, transparent);
  cursor: not-allowed;
}