@import "src/features/board/board.css";
@import "src/features/budget/budget.css";
@import "src/features/builder/builder.css";
@import "src/features/calendar/calendar.css";
@import "src/features/tiles/tiles.css";
@import "src/features/tiles/tile-popup.css";
@import "src/features/transfer/transfer.css";
@import "src/ui/groups.css";

/* Colour tokens: night mode overrides these under [data-theme="dark"]. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-alt: #f9fafb;
  --border: #c8ccd5;
  --text: #111827;
  --text-muted: #4b5563;
  --text-faint: #6b7280;
  --accent: #4f46e5;
  --accent-deep: #3730a3; /* outline for Location tiles and fields */
  --accent-text: #ffffff;
  /* Event tile colours (one place to change them): fill, outline, and the night-mode tint, outline and popup accent */
  --event-fill: #fdebcb; --event-edge: #d97706; --event-tint: rgba(245, 158, 11, 0.2); --event-edge-night: rgba(251, 191, 36, 0.5); --event-accent-night: #fcd34d;
  --danger: #dc2626; /* invalid fields, Needs Update */
  --danger-text: #b91c1c; /* Delete buttons and icons */
  --danger-edge: #e5a3a3; /* their outline */
  --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Night mode palette, taken from the reference screenshot; toggled by src/features/theme. */
[data-theme="dark"] {
  --bg: #16151f;
  --surface: #1e1d2b;
  --surface-alt: #262536;
  --border: #4b4a5c;
  --text: #f3f4f6;
  --text-muted: #c7c7d1;
  --text-faint: #a3a2b3;
  --icon: #e0e7ff;
}

* { box-sizing: border-box; }

/* Keep [hidden] winning over display rules such as .day-grid's grid. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible, .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* one visible keyboard focus ring */

/* Header */
.sticky-top { position: sticky; top: 0; z-index: 10; }
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 26px; /* 26px each side: the buttons line up with the edges of the full-width Drawing Board card and stay clear of the scrollbar */
  background: var(--surface);
}
/* The title sits on the left of the Header Bar, the global icons on the right. */
.title-block { display: flex; align-items: center; min-width: 0; }
.app-header h1 { margin: 0; font-size: 1.3rem; line-height: 1.2; white-space: nowrap; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--icon, var(--accent));
}
/* Sun icon shown in night mode, yellow as in the reference screenshot. */
[data-theme="dark"] [data-action="theme"] { color: #facc15; }
.icon-btn:disabled { cursor: default; }
.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn svg .fill { fill: currentColor; stroke: none; }

/* Tabs */
.tabs {
  --bar-h: 52px;
  height: var(--bar-h);
  display: flex;
  gap: 16px; /* as wide as the space left of the first button */
  padding: 0 26px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tabs-nav { display: flex; gap: 16px; }
.tabs-nav a, .builder-btn {
  display: flex;
  align-items: center;
  align-self: center;
  height: 28px;
  padding: 0 14px;
  line-height: 1;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Tab switching without JS: Itinerary shows by default, a targeted panel replaces it. */
.panel { display: none; }
body:not(:has(.panel:target)) #itinerary,
.panel:target { display: block; }

body:not(:has(.panel:target)) [data-tab="itinerary"],
body:has(#itinerary:target) [data-tab="itinerary"],
body:has(#drawing-board:target) [data-tab="drawing-board"],
body:has(#budget:target) [data-tab="budget"] {
  background: var(--accent);
  border-color: var(--accent); /* no grey outline on the selected page */
  color: var(--accent-text);
}

/* Main area */
main {
  max-width: 1540px;
  margin: 0 auto;
  padding: 24px 44px 48px; /* side room so the slim add-day strip fits outside the Day 1 box */
}
body:not(:has(#drawing-board:target)):not(:has(#budget:target)) main { padding-top: 8px; } /* Itinerary (Calendar and Day by Day): the first row sits the same 8px under the Menu Bar or weekday bar line as the Day boxes sit from each other */

.view-toggle, .dlg-type {
  display: flex;
  width: fit-content;
  flex: none;
  align-self: center;
  height: 28px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.view-toggle button, .dlg-type button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  line-height: 1;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
}
body:has(#drawing-board:target) .view-toggle:not(.sort-toggle):not(.filter-toggle), body:has(#budget:target) .view-toggle:not(.budget-toggle) { display: none; }
.budget-toggle { display: none; } /* Budget only */
body:has(#budget:target) .budget-toggle { display: flex; }
.sort-toggle { display: none; } /* Drawing Board only */
body:has(#drawing-board:target) .sort-toggle { display: flex; }
/* The Drawing Board table uses the full width: its panel lines up with the header text on the left and the Print button on the right. */
body:has(#drawing-board:target) main { max-width: none; padding-left: 26px; padding-right: 26px; }
.view-toggle .active, .dlg-type .active { background: var(--accent); color: var(--accent-text); }

.tabs-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

/* Day cards */
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* auto-fit: with few days the columns grow to fill the row, like a full week */
  gap: 8px;
}
.day {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Every second day gets a pale blue Box and Title Pane in print only (see print.css); on screen all Boxes share one fill. */
.day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 46px; /* a Title Pane without a date line is as tall as one with, so the bin has room to sit centred */
  padding: 10px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.3;
}

.add-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--surface-alt); color: var(--accent);
  font: inherit; font-size: 0.75rem; opacity: 0.8; transition: opacity 0.15s; cursor: pointer; min-height: 90px;
}
.add-day:hover, .add-day:focus-visible { opacity: 1; font-weight: 700; border-style: solid; }
.add-day-plus { font-size: 1.4rem; font-weight: 700; line-height: 1; }
/* Day-by-day view: a slim strip hangs outside the left edge, as tall as Day 1 (absolutely placed in Day 1's grid cell). */
.days:not(.calendar) .add-day-before {
  position: absolute;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  right: 100%;
  margin-right: 2px;
  top: 0;
  bottom: 0;
  width: 36px;
  min-height: 0;
  padding: 0;
}
.days:not(.calendar) .day-grid { position: relative; }
/* Fewer than seven days: the + after button is the same slim 36px strip as the + before button, hanging off the right edge, so the days fill the row. */
.days:not(.calendar) .few-days .add-day-after { position: absolute; left: 100%; margin-left: 2px; top: 0; bottom: 0; width: 36px; min-height: 0; padding: 0; }
.days:not(.calendar) .few-days .add-day-after .add-day-date { display: none; }
.days:not(.calendar) .few-days .add-day-after .add-day-plus { font-size: 1rem; }
.days:not(.calendar) .add-day-before .add-day-date { display: none; }
/* When the last row has a gap beside the last day, the + after box fills that gap as an ordinary cell (set by fitAddAfter in builder.js). */
.days:not(.calendar) .day-grid .add-day-after.inline {
  position: static;
  grid-column: auto;
  left: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  width: auto;
  height: auto;
  min-height: 90px;
  padding: 0;
}
.day, .day-head { position: relative; }
.day.selected { outline: 3px solid var(--accent); outline-offset: -1px; }
.day-del {
  position: absolute; top: 50%; transform: translateY(-50%); right: 18px; display: none; place-items: center; width: 30px; height: 30px; padding: 0; /* centred over the status icons of the tiles below (their centre is 34px in from the Box edge), and vertically in the Title Pane */
  border: 1px solid var(--danger-edge); border-radius: var(--radius); background: var(--surface); color: var(--danger-text);
}
.day.selected .day-del { display: grid; }
.day.selected .day-head .day-date { visibility: hidden; } /* the date steps aside while the bin is showing */
.day-del svg { width: 16px; height: 16px; fill: currentColor; }
.day-del:disabled { color: var(--text-faint); border-color: var(--border); cursor: not-allowed; }
.day-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; padding: 10px 14px;
  background: var(--text); color: var(--bg); border-radius: var(--radius); font-size: 0.85rem;
}
.day-toast button { margin-left: 8px; border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; }
/* Phones and other thin screens (days stack in one column): the + strips lie above Day 1 and below the last day instead of at the sides. */
@media (max-width: 560px) {
  /* Menu Bar: tighter tab padding and gaps so the tabs and buttons fit without sideways scrolling. */
  .tabs { padding: 0 6px; gap: 0; overflow-x: auto; scrollbar-width: none; } /* the Menu Bar scrolls sideways instead of cutting buttons off */
  .tabs::-webkit-scrollbar { display: none; }
  .tabs-right { padding-left: 8px; }
  .tabs-nav a, .builder-btn { padding: 0 8px; font-size: 0.85rem; }
  .tabs-right { gap: 3px; }
  /* A second Menu Bar: the tabs keep the first row; the page's own tools (Builder Panel, toggles, search, sort) get a row of their own below it. */
  .tabs { height: auto; flex-direction: column; padding: 0; overflow: visible; }
  .tabs-nav, .tabs-right { box-sizing: border-box; height: var(--bar-h); align-items: center; overflow-x: auto; scrollbar-width: none; padding: 0 6px; flex: none; }
  .tabs-nav::-webkit-scrollbar, .tabs-right::-webkit-scrollbar { display: none; }
  .tabs-nav { gap: 6px; }
  .tabs-right { margin-left: 0; border-top: 1px solid var(--border); padding-left: 6px; gap: 6px; }
  .app-header { padding: 8px 10px 8px 16px; gap: 8px; }
  .app-header h1 { font-size: 1.2rem; }
  .toolbar { gap: 4px; justify-content: flex-end; }
  .icon-btn { width: 34px; height: 34px; }
  .tabs { gap: 0; } .tabs-nav a, .builder-btn { padding: 0 clamp(4px, 1.6vw, 10px); font-size: clamp(0.72rem, 3.4vw, 0.85rem); }
  .view-toggle button { padding: 0 clamp(3px, 1.2vw, 8px); font-size: clamp(0.72rem, 3.4vw, 0.85rem); }
  .view-toggle button { padding: 0 8px; font-size: 0.85rem; }
  main { padding-left: 12px; padding-right: 12px; }
  main { padding-top: 8px; } /* the Drawing Board and Budget sit the same 8px under the Menu Bar as the Itinerary's Day boxes */
  #budget > .budget-layout { gap: 8px; }
  #budget .budget-layout > .board-card { margin-bottom: 0; }
  body:has(#drawing-board:target) main { padding-left: 10px; padding-right: 10px; }
  .days:not(.calendar) .day-grid .add-day-before,
  .days:not(.calendar) .day-grid .add-day-after {
    position: static; grid-column: 1 / -1; grid-row: auto; right: auto; left: auto; top: auto; bottom: auto;
    margin: 0; width: auto; height: 36px; min-height: 0; padding: 0;
  }
  .days:not(.calendar) .day-grid .add-day-date { display: none; }
  .days:not(.calendar) .day-grid .add-day-plus { font-size: 1rem; }
}
.empty { color: var(--text-muted); text-align: center; padding: 48px 0; }

/* Itinerary reads like 110% browser zoom on screen; Header Bar, Menu Bar, phones and print are untouched. */
@media screen and (min-width: 561px) {
  #itinerary .days { zoom: 1.1; }
  .weekday-row { font-size: calc(0.85rem * 1.1); } /* the weekday names match the Day titles, which are drawn at 110% */
  #itinerary .day-head { min-height: 35px; padding-top: 7.7px; padding-bottom: 7.7px; } /* 2px above + 30px bin + 2px below + the 1px rule */
  #itinerary .day-del { top: 2px; right: 2px; transform: none; } /* the same gap (2px) from the top as from the right edge of the Title Pane, so both round alike */ /* the Title Pane compresses to the height of the weekday boxes */
  #itinerary .day-grid { gap: 7.27px; } /* 8px once zoomed, like the weekday boxes */
  #itinerary .day-grid:not(.few-days) { grid-template-columns: repeat(auto-fit, minmax(max(190px, calc((100% - 6 * 7.27px) / 7)), 1fr)); } /* never more than seven columns, so the + after box does not become an eighth */
  #itinerary .days.calendar .day-grid:not(.few-days) { grid-template-columns: repeat(7, minmax(0, 1fr)); } /* Calendar view is always seven columns, whatever the width, to match the weekday boxes */
  #itinerary .day { border-width: 0.909px; } /* 1px once zoomed (a plain 1px renders as 1.1px) */
  /* Day 1 and Day 7 line up with the outer edges of the Drawing Board panel (about 1792px wide at most, otherwise the window minus 45px a side); the slim + strip hangs in the 45px beside it */
  body:not(:has(#drawing-board:target)):not(:has(#budget:target)) main { max-width: 1882px; padding-left: 45px; padding-right: 45px; }
  .weekday-row { max-width: 1882px; padding: 0 45px; gap: 8px; } /* the weekday boxes stay lined up with the day columns */
}

/* Date boxes (ui/datebox.js): plain text at rest, no icon of our own; a click opens the browser's calendar. */
@media print { .board-table input.date-fmt::placeholder { color: transparent; } } /* an empty date prints blank, not as its hint */

/* Dark mode: the dashed "+ Add" and add-day outlines use a lighter indigo so they stand out on the dark cards. */
[data-theme="dark"] .add-day, [data-theme="dark"] .day-content .add { border-color: #a5b4fc; color: #a5b4fc; }
@media screen and (min-width: 561px) { #itinerary .add-day { border-width: 0.909px; } } /* the same 1px (once zoomed) as the day Boxes */

/* Header Bar and Menu Bar: pointing at a button outlines it in indigo, like the "+ Add" rows. */
.app-header .icon-btn:not(:disabled):hover, .tabs-nav a:hover, .builder-btn:hover, .tabs-right .sort-pick:hover { border-color: var(--accent); }
[data-theme="dark"] .app-header .icon-btn:not(:disabled):hover, [data-theme="dark"] .tabs-nav a:hover, [data-theme="dark"] .builder-btn:hover, [data-theme="dark"] .tabs-right .sort-pick:hover { border-color: #a5b4fc; } /* same as the + Add rows in night mode */
.app-header .icon-btn[data-action="purge"]:hover { color: var(--danger-text); border-color: var(--danger-edge); } /* the bin and its outline turn the Delete-button red when pointed at */
[data-theme="dark"] .app-header .icon-btn[data-action="purge"]:hover { color: var(--danger-text); border-color: var(--danger-edge); } /* the same red as day mode, like the Drawing Board bins */
.builder-btn { display: none; cursor: pointer; font-weight: 400; font-family: inherit; }
.builder-btn[aria-pressed="false"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } /* lit while the Builder Panel is showing, like the selected tab */ /* Itinerary only */
body:not(:has(.panel:target)) .builder-btn, body:has(#itinerary:target) .builder-btn { display: flex; }

/* Menu Bar toggles and the search box are built like the tiles: two separate shapes that touch (the purple half like the Bar part, the white half like the Tile part), each with its own border and its own outer corners, so no clipped corners. */
.tabs-right .view-toggle, .tabs-right .board-search-box { border: 0; border-radius: 0; overflow: visible; background: transparent; gap: 0; }
.tabs-right .view-toggle > *, .tabs-right .board-search-box > * { box-sizing: border-box; border: 1px solid var(--border); background: var(--surface); }
.tabs-right .view-toggle > :first-child, .tabs-right .board-search-box > :first-child { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.tabs-right .view-toggle > :last-child, .tabs-right .board-search-box > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.tabs-right .view-toggle > .active, .tabs-right .view-toggle > .sort-label, .tabs-right .board-search-box > .board-search-icon { background: var(--accent); border-color: var(--accent); }
.tabs-right .view-toggle:hover > *, .tabs-right .board-search-box:hover > * { border-color: var(--accent); }
[data-theme="dark"] .tabs-right .view-toggle:hover > *, [data-theme="dark"] .tabs-right .board-search-box:hover > * { border-color: #a5b4fc; }
.tabs-right .view-toggle:hover > :last-child:not(.active):not(.sort-label), .tabs-right .board-search-box:hover > .board-search { border-left-color: var(--border); } /* the line between the two parts stays unpainted on hover (both modes) */
[data-theme="dark"] .tabs-right .view-toggle:hover > :last-child:not(.active):not(.sort-label), [data-theme="dark"] .tabs-right .board-search-box:hover > .board-search { border-left-color: var(--border); }

/* Search box: icon, field, then a purple clear button (a Bar part again, rounded on the far side); the field in between has no right edge so it meets the cross. */
.tabs-right .board-search-box > .board-search { border-left: 0; border-right: 0; border-radius: 0; } /* no grey line beside the purple icon, like the cross side */
.tabs-right .board-search-box > .board-search-clear { border-left: 0; cursor: pointer; display: block; }
.board-search::-webkit-search-cancel-button { display: none; }
.board-search-clear svg { display: block; width: 18px; height: 18px; fill: var(--accent-text); }
/* Search box outline: a thin 1px purple line while pointed at or typed in (no thicker focus ring, however many times it is hovered while focused). */
.tabs-right .board-search-box > .board-search:focus, .tabs-right .board-search-box > .board-search:focus-visible { outline: none; box-shadow: none; }
.tabs-right .board-search-box:focus-within > * { border-color: var(--accent); }
[data-theme="dark"] .tabs-right .board-search-box:focus-within > * { border-color: #a5b4fc; }
.tabs-right .board-search-box:focus-within > .board-search, [data-theme="dark"] .tabs-right .board-search-box:focus-within > .board-search { border-left-color: var(--border); }
.tabs-right .board-search-box > .board-search { margin-left: -1px; } /* the field tucks 1px under the purple icon, so no hairline can show between them at fractional browser zoom */
.tabs-right .board-search-box > svg.board-search-icon { position: relative; z-index: 1; }
/* No grey line where a purple half meets its neighbour: the neighbour drops its left edge (the purple half's own border already outlines the pair). */
.tabs-right .view-toggle > .sort-label + *, .tabs-right .view-toggle > .active:first-child + * { border-left: 0; }
/* On hover the line between the two parts keeps the purple fill's colour (never the hover indigo), so it never reads as a divider, in both modes. */
.tabs-right .view-toggle:hover > .active:last-child, [data-theme="dark"] .tabs-right .view-toggle:hover > .active:last-child { border-left-color: var(--accent); }
/* A selected right-hand half has no left edge either, so no purple (or any) line can show between the two parts, hovered or not, in both modes. */
.tabs-right .view-toggle > .active:last-child, .tabs-right .view-toggle:hover > .active:last-child, [data-theme="dark"] .tabs-right .view-toggle:hover > .active:last-child { border-left-width: 0; }