/* Extracted from timelinebar.html */
:root {
  --bg: #000;
  --panel: #000;
  --panel-2: #001000;
  --text: #00ff66;
  --muted: #00b865;
  --brand: #00ff66;
  --brand-2: #00994d;
  --accent: #00ff66;
  --danger: #ff3333;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --input-bg: #000;
}

:root[data-theme='light'] {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --panel-2: #f3f6fb;
  --text: #0d1321;
  --muted: #5c6b73;
  --brand: #16a34a;
  --brand-2: #0e7a3d;
  --accent: #16a34a;
  --danger: #dc2626;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --input-bg: #ffffff;
}

/* Light theme readability + contrast tweaks */
:root[data-theme='light'] body { text-shadow: none; }
:root[data-theme='light'] .card { border-color: rgba(16,24,40,0.12); }
:root[data-theme='light'] .track {
  background: linear-gradient(90deg, rgba(16,24,40,.06), rgba(16,24,40,.04));
  border-color: rgba(16,24,40,.16);
}
:root[data-theme='light'] .tick-line { background: rgba(16,24,40,.18); }
:root[data-theme='light'] .tick-label { color: #475467; text-shadow: none; }

/* Punch readability in light theme: black text with subtle color glow */
:root[data-theme='light'] .punch { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.55); }
:root[data-theme='light'] .punch-label { color: #111; text-shadow: 0 0 12px rgba(22,163,74,.10); }
/* Ensure all non-solid statuses keep dark text in light theme */
:root[data-theme='light'] .punch.status-green .punch-label,
:root[data-theme='light'] .punch.status-yellow .punch-label,
:root[data-theme='light'] .punch.status-red .punch-label,
:root[data-theme='light'] .punch.status-blue .punch-label,
:root[data-theme='light'] .punch.status-purple .punch-label { color: #111; }

/* Edit controls color for light theme */
:root[data-theme='light'] .punch .control-btn { background: rgba(16,24,40,.08); color: #0d1321; }
:root[data-theme='light'] .label-popper { background: #fff; color: #0d1321; border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .label-connector { background: var(--brand-2); }
:root[data-theme='light'] .row-action.edit { background: rgba(16,24,40,.06); border: 1px solid rgba(16,24,40,.12); color: #0d1321; }
:root[data-theme='light'] .row-action.edit:hover { background: rgba(16,24,40,.10); }
:root[data-theme='light'] .icon-btn:hover { background: rgba(16,24,40,.08); color: #0d1321; }

/* Menus/popovers in light theme */
:root[data-theme='light'] .status-menu { background: var(--panel); border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .note-popover { border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .note-popover pre,
:root[data-theme='light'] .note-popover code { background: rgba(16,24,40,.06); }

/* Light theme tweaks for buttons */
:root[data-theme='light'] .btn.ghost {
  background: rgba(16,24,40,0.06);
  border: 1px solid rgba(16,24,40,0.12);
}
:root[data-theme='light'] .btn.ghost:hover {
  background: rgba(16,24,40,0.1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; height: auto; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Courier New', monospace;
  color: var(--text);
  background: var(--bg);
  display: grid;
  place-items: start center;
  padding: 32px 16px 80px;
  text-shadow: none;
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

/* Themed form controls */
input[type="text"], textarea, select {
  width: 100%;
  appearance: none;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 0 0 0 rgba(0,255,102,0);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input[type="text"]::placeholder, textarea::placeholder { color: rgba(255,255,255,.45); }
:root[data-theme='light'] input[type="text"]::placeholder,
:root[data-theme='light'] textarea::placeholder { color: #98a2b3; }
input[type="text"]:focus, textarea:focus, select:focus {
  border-color: rgba(0,255,102,0.45);
  box-shadow: 0 0 0 3px rgba(0,255,102,0.18);
}

/* Plain dropdown <select> */
select { cursor: pointer; }

/* Combobox dropdown */
.dropdown { position: relative; display: flex; align-items: stretch; gap: 6px; }
.dropdown-input { flex: 1; }
.dropdown-toggle {
  appearance: none; border: 1px solid rgba(255,255,255,0.15); background: var(--input-bg); color: var(--text);
  border-radius: 10px; padding: 0 10px; cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; min-width: 34px;
}
.dropdown-toggle:hover { filter: brightness(1.08); }
.dropdown-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.25); border-radius: 10px; box-shadow: var(--shadow); max-height: 220px; overflow: auto; padding: 6px; display: none; z-index: 50; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.dropdown-item:hover { background: rgba(255,255,255,.06); }
:root[data-theme='light'] .dropdown-item:hover { background: rgba(16,24,40,.06); }

/* Quill editor theming for rich-editor blocks */
.rich-editor { border-radius: 10px; overflow: hidden; background: var(--input-bg); }
/* Remove white borders and unify look across all modals */
.rich-editor .ql-toolbar,
.rich-editor .ql-toolbar.ql-snow { background: rgba(255,255,255,.06); border: 0; }
.rich-editor .ql-container,
.rich-editor .ql-container.ql-snow { background: var(--input-bg); color: var(--text); border: 0; min-height: 120px; font-size: 14px; }
.rich-editor .ql-editor { min-height: 110px; }
:root[data-theme='light'] .rich-editor .ql-toolbar,
:root[data-theme='light'] .rich-editor .ql-toolbar.ql-snow { background: rgba(16,24,40,.06); }

.app { width: min(1100px, 96vw); display: grid; gap: 24px; }

.header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.title { font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: .2px; }
.subtle { color: var(--muted); font-size: 13px; }
/* Day label as a link to open calendar */
#dayLabel.clickable { cursor: pointer; display: inline-block; border-bottom: 1px dotted rgba(255,255,255,.25); }
#dayLabel.clickable:hover { border-bottom-color: rgba(255,255,255,.5); }

.card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid rgba(0,255,102,0.2); border-radius: 16px; box-shadow: var(--shadow); overflow: visible; }
.card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 0 14px; }
.card .card-title { font-weight: 700; letter-spacing: .2px; }
.collapse-btn { appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 8px; transition: transform .15s ease, color .15s ease; }
.collapse-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.table-card.collapsed .collapse-btn { transform: rotate(-90deg); }
.table-card.collapsed .card-body { display: none; }
.card .card-body { padding: 0 14px 14px 14px; }
.card .card-body.scrollable { max-height: 320px; overflow: auto; -webkit-overflow-scrolling: touch; }
.card .card-body.scrollable table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }

/* Timeline */
.timeline { padding: 30px 20px; }

.track {
  position: relative;
  height: 92px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  /* allow tick labels positioned above the track to be visible */
  overflow: visible;
  cursor: crosshair;
  user-select: none;
  isolation: isolate;
}

.tick-labels { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }
/* unified tick: full-height line + label bound together */
.tick { position: absolute; top: 0; bottom: 0; }
.tick-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); transform: translateX(-50%); }
.tick-label { position: absolute; top: -22px; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.tick[data-edge="start"] .tick-label { transform: translateX(0%); }
.tick[data-edge="end"] .tick-label { transform: translateX(-100%); }

/* Current time indicator */
.now-indicator { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffd046; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 10px rgba(255,208,70,.4); transform: translateX(-50%); pointer-events: none; z-index: 2; }
/* Dimmed style when viewing a non-today date */
.now-indicator.not-today { background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.25); opacity: .55; }

.ghost { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,255,102,.3), rgba(0,255,102,.18)); border-left: 2px dashed var(--brand-2); border-right: 2px dashed var(--brand-2); display: none; pointer-events: none; z-index: 1; }

.tip { position: absolute; top: -36px; transform: translateX(-50%); background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.3); border-radius: 10px; padding: 4px 8px; font-size: 12px; white-space: nowrap; display: none; pointer-events: none; z-index: 2; box-shadow: var(--shadow); }
.tip-center { top: auto; bottom: -36px; }

.punch { position: absolute; top: 16px; bottom: 16px; border-radius: 10px; background: rgba(0,255,102,0.15); border: 1px solid rgba(0,255,102,0.6); box-shadow: inset 0 0 0 1px rgba(0,255,102,0.2), 0 6px 16px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; padding: 0 12px; color: var(--text); }
.punch-label { font-weight: 600; font-size: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; color: var(--text); text-shadow: none; margin: 0; flex: 1; }

/* small indicator for notes inside a punch */
.punch .note-dot { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: #ffd046; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 6px rgba(255,208,70,.6); border: 0; cursor: pointer; padding: 0; display: inline-block; z-index: 40; }
.punch .note-dot:hover { filter: brightness(1.1); }

/* schedule chip (top-left) that switches the current schedule on click */
.punch .schedule-chip {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 50;
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(11,18,39,.35);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.punch .schedule-chip:hover { filter: brightness(1.08); }
.punch.narrow .schedule-chip { font-size: 10px; padding: 1px 4px; }

:root[data-theme='light'] .punch .schedule-chip {
  background: rgba(16,24,40,.08);
  color: #0d1321;
  border-color: rgba(16,24,40,.18);
}

/* handles are grid children (first and last column). They sit entirely inside the block and match the dark inner edge */
.handle { position: absolute; top: 0; bottom: 0; width: 12px; display: block; cursor: ew-resize; background: transparent; z-index: 30; pointer-events: auto; }
.handle.left { left: 0; }
.handle.right { right: 0; }

/* visible inner bar on the handle (anchored to the inner edge) */
.handle-bar { position: absolute; top: 0; bottom: 0; width: 6px; background: linear-gradient(270deg, rgba(0,0,0,0.22), rgba(0,0,0,0.08)); pointer-events: none; }
/* flipped orientation: round the edge facing the block center */
.handle.left .handle-bar { left: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.handle.right .handle-bar { right: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* active glow for the edge being resized */
.punch.resizing-left .handle.left .handle-bar,
.punch.resizing-right .handle.right .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.18), inset 0 0 0 2px rgba(0,255,102,0.12);
}

/* indicate which handle will be grabbed on hover/focus (pre-resize feedback) */
.handle.left:hover .handle-bar, .handle.left:focus .handle-bar, .handle.left:focus-visible .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.12), inset 0 0 0 2px rgba(0,255,102,0.08);
}
.handle.right:hover .handle-bar, .handle.right:focus .handle-bar, .handle.right:focus-visible .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.12), inset 0 0 0 2px rgba(0,255,102,0.08);
}

/* remove default focus outline but keep accessible focus-visible handling */
.handle:focus { outline: none; }

/* narrow block handling: move label outside so it stays legible */
.punch.narrow { /* keep label outside but make handles slightly larger visually */
  overflow: hidden;
}
.punch.narrow .punch-label { display: none; }
.punch.narrow .handle { transform: none; }
/* hide the in-block edit/delete buttons for narrow punches (we show popper controls instead) */
.punch.narrow .controls { display: none !important; }

/* label popper rendered below the timeline when blocks are very narrow */
.label-layer { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.label-popper { position: absolute; pointer-events: auto; /* let popper size to content so full bucket labels display */ min-width: 110px; max-width: 420px; width: max-content; background: rgba(11,18,39,0.95); color: var(--text); border: 1px solid rgba(255,255,255,.08); padding: 6px 8px; border-radius: 8px; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; box-shadow: var(--shadow); z-index: 90; white-space: nowrap; }
.label-popper .label-text { overflow: visible; text-overflow: clip; white-space: nowrap; font-weight: 600; }
.label-popper .controls { position: static; display: flex; gap: 6px; }
.label-popper .control-btn { width: 26px; height: 26px; }
.label-connector { position: absolute; width: 2px; background: var(--brand-2); z-index: 80; pointer-events: none; }

/* controls shown on hover for edit/delete */
.punch .controls { position: absolute; right: 6px; top: 6px; display: flex; gap: 6px; opacity: 0; transition: opacity .12s ease; z-index: 4; }
.punch:hover .controls { opacity: 0; }
.punch .control-btn { appearance: none; border: 0; background: rgba(0,0,0,.18); color: var(--text); width: 26px; height: 26px; border-radius: 6px; display: none; place-items: center; font-size: 12px; cursor: pointer; }
.punch .control-btn.delete { background: rgba(255,107,107,0.9); color: #091019; }
.punch.invalid { outline: 2px solid var(--danger); }
/* Soft-selection highlight */
.punch.selected { outline: 2px solid var(--accent); }

/* Hide in-block and popper edit/delete controls */
.punch .controls, .label-popper .controls { display: none !important; }

/* Entries table: note column snippet and wrapping */
#entriesTable td.note { vertical-align: top; cursor: pointer; }
/* Fixed-height viewport that shows rendered markdown without affecting row height */
#entriesTable td.note .note-window { 
  --note-window-height: 38px; /* approx single-row height incl. line; tune if needed */
  height: var(--note-window-height);
  max-height: var(--note-window-height);
  overflow: auto; 
  padding-right: 4px;
  scrollbar-gutter: stable both-edges;
}
#entriesTable td.note .note-html { line-height: 1.3; }
/* Some basic markdown spacing inside the window */
#entriesTable td.note .note-html p { margin: .25em 0; }
#entriesTable td.note .note-html ul, #entriesTable td.note .note-html ol { padding-left: 18px; margin: .25em 0; }
#entriesTable td.note .note-html li { margin: .15em 0; }

/* Slim, themed scrollbars for note preview + popover */
#entriesTable td.note .note-window,
.note-popover .note-content {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,255,102,.55) transparent; /* thumb | track */
}
#entriesTable td.note .note-window::-webkit-scrollbar,
.note-popover .note-content::-webkit-scrollbar { width: 6px; height: 6px; }
#entriesTable td.note .note-window::-webkit-scrollbar-track,
.note-popover .note-content::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 8px; }
#entriesTable td.note .note-window::-webkit-scrollbar-thumb,
.note-popover .note-content::-webkit-scrollbar-thumb { background: rgba(0,255,102,.55); border-radius: 8px; }
#entriesTable td.note .note-window::-webkit-scrollbar-thumb:hover,
.note-popover .note-content::-webkit-scrollbar-thumb:hover { background: rgba(0,255,102,.75); }

:root[data-theme='light'] #entriesTable td.note .note-window,
:root[data-theme='light'] .note-popover .note-content {
  scrollbar-color: rgba(22,163,74,.6) rgba(16,24,40,.08);
}
:root[data-theme='light'] #entriesTable td.note .note-window::-webkit-scrollbar-track,
:root[data-theme='light'] .note-popover .note-content::-webkit-scrollbar-track { background: rgba(16,24,40,.08); }
:root[data-theme='light'] #entriesTable td.note .note-window::-webkit-scrollbar-thumb,
:root[data-theme='light'] .note-popover .note-content::-webkit-scrollbar-thumb { background: rgba(22,163,74,.6); }
#entriesTable td.note:hover { background: rgba(255,255,255,.04); }
:root[data-theme='light'] #entriesTable td.note:hover { background: rgba(16,24,40,.06); }

/* Active (current time) highlight on timeline block */
.punch.is-active {
  box-shadow: inset 0 0 0 2px #ffd046, 0 0 14px rgba(255,208,70,.45);
  z-index: 45;
}

/* Active row highlight in entries table */
#entriesTable tbody tr.is-active {
  border-left: 3px solid #ffd046 !important;
  outline: 2px solid rgba(255,208,70,.25);
  outline-offset: -2px;
}
:root[data-theme='light'] #entriesTable tbody tr.is-active {
  outline-color: rgba(240,180,0,.25);
}

/* Entries table: color rows by status for quick scanning */
/* Transparent variants: subtle background + left accent */
#entriesTable tbody tr.status-green { background: rgba(0,255,0,0.07); border-left: 3px solid #00ff00; }
#entriesTable tbody tr.status-yellow { background: rgba(255,255,0,0.08); border-left: 3px solid #ffff00; }
#entriesTable tbody tr.status-red { background: rgba(255,51,51,0.08); border-left: 3px solid #ff3333; }
#entriesTable tbody tr.status-blue { background: rgba(0,128,255,0.08); border-left: 3px solid #0080ff; }
#entriesTable tbody tr.status-purple { background: rgba(170,0,255,0.08); border-left: 3px solid #aa00ff; }
/* Solid variants: a bit stronger but keep text readable */
#entriesTable tbody tr.status-green-solid { background: rgba(0,255,0,0.18); border-left: 3px solid #00ff00; }
#entriesTable tbody tr.status-yellow-solid { background: rgba(255,255,0,0.2); border-left: 3px solid #ffff00; }
#entriesTable tbody tr.status-red-solid { background: rgba(255,51,51,0.18); border-left: 3px solid #ff3333; }
#entriesTable tbody tr.status-blue-solid { background: rgba(0,128,255,0.18); border-left: 3px solid #0080ff; }
#entriesTable tbody tr.status-purple-solid { background: rgba(170,0,255,0.18); border-left: 3px solid #aa00ff; }

/* Light theme: lighten backgrounds to avoid overpowering */
:root[data-theme='light'] #entriesTable tbody tr.status-green { background: rgba(22,163,74,0.10); }
:root[data-theme='light'] #entriesTable tbody tr.status-yellow { background: rgba(240,180,0,0.12); }
:root[data-theme='light'] #entriesTable tbody tr.status-red { background: rgba(220,38,38,0.12); }
:root[data-theme='light'] #entriesTable tbody tr.status-blue { background: rgba(37,99,235,0.10); }
:root[data-theme='light'] #entriesTable tbody tr.status-purple { background: rgba(147,51,234,0.10); }
:root[data-theme='light'] #entriesTable tbody tr.status-green-solid { background: rgba(22,163,74,0.16); }
:root[data-theme='light'] #entriesTable tbody tr.status-yellow-solid { background: rgba(240,180,0,0.18); }
:root[data-theme='light'] #entriesTable tbody tr.status-red-solid { background: rgba(220,38,38,0.18); }
:root[data-theme='light'] #entriesTable tbody tr.status-blue-solid { background: rgba(37,99,235,0.16); }
:root[data-theme='light'] #entriesTable tbody tr.status-purple-solid { background: rgba(147,51,234,0.16); }

/* --- Responsive: Mobile Layout --- */
/* Extracted from timelinebar.html */
:root {
  --bg: #000;
  --panel: #000;
  --panel-2: #001000;
  --text: #00ff66;
  --muted: #00b865;
  --brand: #00ff66;
  --brand-2: #00994d;
  --accent: #00ff66;
  --danger: #ff3333;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --input-bg: #000;
}

:root[data-theme='light'] {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --panel-2: #f3f6fb;
  --text: #0d1321;
  --muted: #5c6b73;
  --brand: #16a34a;
  --brand-2: #0e7a3d;
  --accent: #16a34a;
  --danger: #dc2626;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --input-bg: #ffffff;
}

/* Light theme readability + contrast tweaks */
:root[data-theme='light'] body { text-shadow: none; }
:root[data-theme='light'] .card { border-color: rgba(16,24,40,0.12); }
:root[data-theme='light'] .track {
  background: linear-gradient(90deg, rgba(16,24,40,.06), rgba(16,24,40,.04));
  border-color: rgba(16,24,40,.16);
}
:root[data-theme='light'] .tick-line { background: rgba(16,24,40,.18); }
:root[data-theme='light'] .tick-label { color: #475467; text-shadow: none; }

/* Punch readability in light theme: black text with subtle color glow */
:root[data-theme='light'] .punch { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.55); }
:root[data-theme='light'] .punch-label { color: #111; text-shadow: 0 0 12px rgba(22,163,74,.10); }
/* Ensure all non-solid statuses keep dark text in light theme */
:root[data-theme='light'] .punch.status-green .punch-label,
:root[data-theme='light'] .punch.status-yellow .punch-label,
:root[data-theme='light'] .punch.status-red .punch-label,
:root[data-theme='light'] .punch.status-blue .punch-label,
:root[data-theme='light'] .punch.status-purple .punch-label { color: #111; }

/* Edit controls color for light theme */
:root[data-theme='light'] .punch .control-btn { background: rgba(16,24,40,.08); color: #0d1321; }
:root[data-theme='light'] .label-popper { background: #fff; color: #0d1321; border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .label-connector { background: var(--brand-2); }
:root[data-theme='light'] .row-action.edit { background: rgba(16,24,40,.06); border: 1px solid rgba(16,24,40,.12); color: #0d1321; }
:root[data-theme='light'] .row-action.edit:hover { background: rgba(16,24,40,.10); }
:root[data-theme='light'] .icon-btn:hover { background: rgba(16,24,40,.08); color: #0d1321; }

/* Menus/popovers in light theme */
:root[data-theme='light'] .status-menu { background: var(--panel); border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .note-popover { border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .note-popover pre,
:root[data-theme='light'] .note-popover code { background: rgba(16,24,40,.06); }

/* Light theme tweaks for buttons */
:root[data-theme='light'] .btn.ghost {
  background: rgba(16,24,40,0.06);
  border: 1px solid rgba(16,24,40,0.12);
}
:root[data-theme='light'] .btn.ghost:hover {
  background: rgba(16,24,40,0.1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; height: auto; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Courier New', monospace;
  color: var(--text);
  background: var(--bg);
  display: grid;
  place-items: start center;
  padding: 32px 16px 80px;
  text-shadow: none;
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

.app { width: min(1100px, 96vw); display: grid; gap: 24px; }

.header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.title { font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: .2px; }
.subtle { color: var(--muted); font-size: 13px; }
/* Day label as a link to open calendar */
#dayLabel.clickable { cursor: pointer; display: inline-block; border-bottom: 1px dotted rgba(255,255,255,.25); }
#dayLabel.clickable:hover { border-bottom-color: rgba(255,255,255,.5); }

.card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid rgba(0,255,102,0.2); border-radius: 16px; box-shadow: var(--shadow); overflow: visible; }

/* Timeline */
.timeline { padding: 30px 20px; }

.track {
  position: relative;
  height: 92px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  /* allow tick labels positioned above the track to be visible */
  overflow: visible;
  cursor: crosshair;
  user-select: none;
  isolation: isolate;
}

.tick-labels { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }
/* unified tick: full-height line + label bound together */
.tick { position: absolute; top: 0; bottom: 0; }
.tick-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); transform: translateX(-50%); }
.tick-label { position: absolute; top: -22px; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.tick[data-edge="start"] .tick-label { transform: translateX(0%); }
.tick[data-edge="end"] .tick-label { transform: translateX(-100%); }

/* Current time indicator */
.now-indicator { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffd046; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 10px rgba(255,208,70,.4); transform: translateX(-50%); pointer-events: none; z-index: 2; }
/* Dimmed style when viewing a non-today date */
.now-indicator.not-today { background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.25); opacity: .55; }

.ghost { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,255,102,.3), rgba(0,255,102,.18)); border-left: 2px dashed var(--brand-2); border-right: 2px dashed var(--brand-2); display: none; pointer-events: none; z-index: 1; }

.tip { position: absolute; top: -36px; transform: translateX(-50%); background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.3); border-radius: 10px; padding: 4px 8px; font-size: 12px; white-space: nowrap; display: none; pointer-events: none; z-index: 2; box-shadow: var(--shadow); }
.tip-center { top: auto; bottom: -36px; }

.punch { position: absolute; top: 16px; bottom: 16px; border-radius: 10px; background: rgba(0,255,102,0.15); border: 1px solid rgba(0,255,102,0.6); box-shadow: inset 0 0 0 1px rgba(0,255,102,0.2), 0 6px 16px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; padding: 0 12px; color: var(--text); }
.punch-label { font-weight: 600; font-size: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; color: var(--text); text-shadow: none; margin: 0; flex: 1; }

/* small indicator for notes inside a punch */
.punch .note-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ffd046; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 6px rgba(255,208,70,.6); border: 0; cursor: pointer; padding: 0; display: inline-block; z-index: 40; }
.punch .note-dot:hover { filter: brightness(1.1); }

/* handles are grid children (first and last column). They sit entirely inside the block and match the dark inner edge */
.handle { position: absolute; top: 0; bottom: 0; width: 12px; display: block; cursor: ew-resize; background: transparent; z-index: 30; pointer-events: auto; }
.handle.left { left: 0; }
.handle.right { right: 0; }

/* visible inner bar on the handle (anchored to the inner edge) */
.handle-bar { position: absolute; top: 0; bottom: 0; width: 6px; background: linear-gradient(270deg, rgba(0,0,0,0.22), rgba(0,0,0,0.08)); pointer-events: none; }
/* flipped orientation: round the edge facing the block center */
.handle.left .handle-bar { left: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.handle.right .handle-bar { right: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* active glow for the edge being resized */
.punch.resizing-left .handle.left .handle-bar,
.punch.resizing-right .handle.right .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.18), inset 0 0 0 2px rgba(0,255,102,0.12);
}

/* indicate which handle will be grabbed on hover/focus (pre-resize feedback) */
.handle.left:hover .handle-bar, .handle.left:focus .handle-bar, .handle.left:focus-visible .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.12), inset 0 0 0 2px rgba(0,255,102,0.08);
}
.handle.right:hover .handle-bar, .handle.right:focus .handle-bar, .handle.right:focus-visible .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.12), inset 0 0 0 2px rgba(0,255,102,0.08);
}

/* remove default focus outline but keep accessible focus-visible handling */
.handle:focus { outline: none; }

/* narrow block handling: move label outside so it stays legible */
.punch.narrow { /* keep label outside but make handles slightly larger visually */
  overflow: hidden;
}
.punch.narrow .punch-label { display: none; }
.punch.narrow .handle { transform: none; }
/* hide the in-block edit/delete buttons for narrow punches (we show popper controls instead) */
.punch.narrow .controls { display: none !important; }

/* label popper rendered below the timeline when blocks are very narrow */
.label-layer { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.label-popper { position: absolute; pointer-events: auto; /* let popper size to content so full bucket labels display */ min-width: 110px; max-width: 420px; width: max-content; background: rgba(11,18,39,0.95); color: var(--text); border: 1px solid rgba(255,255,255,.08); padding: 6px 8px; border-radius: 8px; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; box-shadow: var(--shadow); z-index: 90; white-space: nowrap; }
.label-popper .label-text { overflow: visible; text-overflow: clip; white-space: nowrap; font-weight: 600; }
.label-popper .controls { position: static; display: flex; gap: 6px; }
.label-popper .control-btn { width: 26px; height: 26px; }
.label-connector { position: absolute; width: 2px; background: var(--brand-2); z-index: 80; pointer-events: none; }

/* controls shown on hover for edit/delete */
.punch .controls { position: absolute; right: 6px; top: 6px; display: flex; gap: 6px; opacity: 0; transition: opacity .12s ease; z-index: 4; }
.punch:hover .controls { opacity: 0; }
.punch .control-btn { appearance: none; border: 0; background: rgba(0,0,0,.18); color: var(--text); width: 26px; height: 26px; border-radius: 6px; display: none; place-items: center; font-size: 12px; cursor: pointer; }
.punch .control-btn.delete { background: rgba(255,107,107,0.9); color: #091019; }
.punch.invalid { outline: 2px solid var(--danger); }

/* Hide in-block and popper edit/delete controls */
.punch .controls, .label-popper .controls { display: none !important; }

/* --- Responsive: Mobile Layout --- */
@media (max-width: 720px) {

  body { padding: 12px 8px 64px; 
}
  .app { width: 100%; gap: 16px; }
  .header { align-items: center; }
  .timeline { padding: 16px 12px; }
  .track { height: 120px; }
  .tick-label { top: -18px; font-size: 11px; }
  .help-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .help-row > div:first-child { display: none; }
  .mobile-controls { display: flex; }
  .mobile-controls { gap: 8px; }
  .mobile-zoom-range { width: 110px; accent-color: var(--brand); }
  .row { grid-template-columns: 1fr; }
  .modal { width: 100%; max-width: 100vw; }
  .calendar-weekdays { gap: 4px !important; }
  .calendar-grid { gap: 4px !important; }
  .table-card { overflow-x: visible; }
  table { min-width: 0; width: 100%; table-layout: fixed; }
  th, td { padding: 10px 8px; }
  /* Hide less-critical columns only on the entries table: status, note, actions */
  #entriesTable thead th:nth-child(1),
  #entriesTable tbody td:nth-child(1),
  #entriesTable thead th:nth-child(6),
  #entriesTable tbody td:nth-child(6),
  #entriesTable thead th:nth-child(7),
  #entriesTable tbody td:nth-child(7) { display: none; }
  .punch-label { font-size: 16px; }
  .label-popper { max-width: 92vw; }
  .punch .control-btn, .label-popper .control-btn { width: 30px; height: 30px; font-size: 13px; }
  /* Ensure content can scroll on small screens */
  body { display: block; overflow-y: auto; }
}

/* Ensure order-specific override for mobile controls visibility */
@media (max-width: 720px) {
 .mobile-controls { display: flex !important; 
} }

/* Floating popover for full note content */
.note-popover { position: fixed; max-width: 520px; min-width: 260px; background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.3); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; z-index: 300; }
.note-popover .note-content { max-height: 260px; overflow: auto; }
.note-popover .note-close { position: absolute; top: 6px; right: 6px; appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 8px; }
.note-popover .note-close:hover { background: rgba(255,255,255,.06); color: var(--text); }
.note-popover a { color: var(--brand-2); }
.note-popover pre { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px; overflow: auto; }
.note-popover code { background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 3px; }
.note-popover h1, .note-popover h2, .note-popover h3 { margin: .4em 0 .2em; }
.note-popover p { margin: .4em 0; }
/* Lists inside markdown popover */
.note-popover ul, .note-popover ol { padding-left: 18px; margin: .3em 0; }
.note-popover li { margin: .2em 0; }

/* Hover highlight syncing between track blocks and table rows */
.punch.is-hovered { outline: 2px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 8px 20px rgba(0,0,0,.5); }
tbody tr.is-hovered { background: rgba(255,255,255,.06); }

/* Status coloring for punches */
.punch.status-green { background: rgba(0,255,0,0.15); border-color: #00ff00; }
.punch.status-green .punch-label { color: #00ff00; }
.punch.status-green-solid { background: #00ff00; border-color: #00ff00; }
.punch.status-green-solid .punch-label { color: #000; }

.punch.status-yellow { background: rgba(255,255,0,0.15); border-color: #ffff00; }
.punch.status-yellow .punch-label { color: #ffff00; }
.punch.status-yellow-solid { background: #ffff00; border-color: #ffff00; }
.punch.status-yellow-solid .punch-label { color: #000; }

.punch.status-red { background: rgba(255,0,0,0.15); border-color: #ff3333; }
.punch.status-red .punch-label { color: #ff3333; }
.punch.status-red-solid { background: #ff3333; border-color: #ff3333; }
.punch.status-red-solid .punch-label { color: #000; }

.punch.status-blue { background: rgba(0,128,255,0.15); border-color: #0080ff; }
.punch.status-blue .punch-label { color: var(--text); }
.punch.status-blue-solid { background: #0080ff; border-color: #0080ff; }
.punch.status-blue-solid .punch-label { color: #fff; }

.punch.status-purple { background: rgba(170,0,255,0.15); border-color: #aa00ff; }
.punch.status-purple .punch-label { color: var(--text); }
.punch.status-purple-solid { background: #aa00ff; border-color: #aa00ff; }
.punch.status-purple-solid .punch-label { color: #fff; }

.punch.status-default { /* keep the default styling */ }

.help-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 16px; border-top: 1px dashed rgba(255,255,255,.08); color: var(--muted); font-size: 13px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { width: 520px; max-width: 96vw; }
.modal.modal-lg { width: 760px; }
.modal.modal-xl { width: 960px; }
.modal .body { padding: 18px; display: grid; gap: 12px; max-height: 70vh; overflow: auto; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
input[type="text"], input[type="date"], textarea, input[readonly], select { width: 100%; border: 1px solid rgba(0,255,102,0.3); background: var(--input-bg); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
textarea { resize: vertical; min-height: 72px; }
.modal .body::-webkit-scrollbar { width: 8px; }
.modal .body::-webkit-scrollbar-track { background: transparent; }
.modal .body::-webkit-scrollbar-thumb { background: rgba(0,255,102,.25); border-radius: 8px; }
.modal .body { scrollbar-width: thin; scrollbar-color: rgba(0,255,102,.25) transparent; }

/* Stylized date input */
input[type="date"] { appearance: none; -webkit-appearance: none; position: relative; padding-right: 36px; color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; filter: hue-rotate(90deg) saturate(120%); opacity: .85; cursor: pointer; padding: 6px; margin-right: 4px; border-radius: 8px; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { background: rgba(255,255,255,.06); }
input[type="date"]::-webkit-datetime-edit { color: var(--text); }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0 2px; }
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field { color: var(--text); background: transparent; }
.note-foot { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.note-foot a { color: var(--brand-2); text-decoration: none; }
.note-foot a:hover { text-decoration: underline; }
.note-preview { margin-top: 8px; border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); font-size: 14px; max-height: 200px; overflow: auto; }
.note-preview pre { background: rgba(0,0,0,.35); padding: 8px; border-radius: 8px; overflow: auto; }
.note-preview code { background: rgba(0,0,0,.35); padding: 0 3px; border-radius: 4px; }
.note-preview ul, .note-preview ol { padding-left: 18px; margin: .3em 0; }
.note-preview li { margin: .2em 0; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.modal-title { font-weight: 700; letter-spacing:.2px; }
.icon-btn { appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.modal-footer { display: flex; justify-content: end; gap: 8px; padding: 0 18px 18px; }
.btn { appearance: none; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.btn.primary { background: linear-gradient(180deg, var(--accent), #18b67c); color: #042416; }
.btn.ghost { background: rgba(255,255,255,.06); color: var(--text); }
.btn.danger { background: #ff6b6b; color: #1e0f0f; }

/* Header Back button size tweak */
#btnBucketBackTop { padding: 6px 10px; font-size: 12px; }

.day-arrow {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1em;
  margin: 0 4px;
  padding: 0;
  line-height: 1;
}
.day-arrow:hover {
  color: var(--brand);
}

/* Mobile timeline controls (hidden on desktop by default) */
.mobile-controls { display: none; gap: 10px; align-items: center; padding: 10px 12px 0; }
.mobile-zoom { padding: 6px 10px; font-size: 14px; }
.mobile-scrollbar { position: relative; flex: 1; height: 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); overflow: hidden; }
.mobile-window { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }

/* Light theme adjustments for mobile controls */
:root[data-theme='light'] .mobile-scrollbar { background: rgba(16,24,40,.06); border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .mobile-window { box-shadow: 0 0 0 1px rgba(16,24,40,.15) inset; }

/* Repeat controls */
.dow-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.dow-picker .chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(0,255,102,.25); color: var(--text); padding: 6px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; user-select: none; }
.dow-picker .chip input { appearance: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,255,102,.35); display: inline-block; position: relative; }
.dow-picker .chip input:checked { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; }
.dow-presets { margin-top: 6px; display: flex; gap: 8px; }

/* Apply scope & extend */
#applyScopeWrap { padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; }
#extendWrap { padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; }

/* Table */
/* Allow status dropdowns to overflow outside the card without clipping */
.table-card { overflow: visible; position: relative; z-index: 5; }
/* Styled scrollbars for scrollable card bodies */
.card .card-body.scrollable { scrollbar-width: thin; scrollbar-color: rgba(0,255,102,.55) rgba(255,255,255,.06); }
.card .card-body.scrollable::-webkit-scrollbar { height: 10px; width: 10px; }
.card .card-body.scrollable::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; }
.card .card-body.scrollable::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand), var(--brand-2)); border-radius: 999px; }
.card .card-body.scrollable::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
table { width: 100%; border-collapse: collapse; }
thead { background: rgba(255,255,255,.04); }
th, td { text-align: left; padding: 12px 14px; font-size: 14px; }
tbody tr + tr td { border-top: 1px dashed rgba(255,255,255,.08); }
td.note { color: var(--muted); }
.empty { padding: 18px; text-align: center; color: var(--muted); }

/* Make bucket view notes more visible */
#bucketViewCard td.note { color: var(--text); }

/* Status selector cell */
td.status-cell, th.status-cell { padding-left: 10px; padding-right: 10px; width: 40px; }
.status-wrap { position: relative; }
.status-btn { appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,255,102,0.3); cursor: pointer; background: rgba(0,255,102,0.1); display: inline-block; }
.status-btn.status-green { background: rgba(0,255,0,0.3); border-color: #00ff00; }
.status-btn.status-green-solid { background: #00ff00; border-color: #00ff00; }
.status-btn.status-yellow { background: rgba(255,255,0,0.3); border-color: #ffff00; }
.status-btn.status-yellow-solid { background: #ffff00; border-color: #ffff00; }
.status-btn.status-red { background: rgba(255,0,0,0.3); border-color: #ff3333; }
.status-btn.status-red-solid { background: #ff3333; border-color: #ff3333; }
.status-btn.status-blue { background: rgba(0,128,255,0.3); border-color: #0080ff; }
.status-btn.status-blue-solid { background: #0080ff; border-color: #0080ff; }
.status-btn.status-purple { background: rgba(170,0,255,0.3); border-color: #aa00ff; }
.status-btn.status-purple-solid { background: #aa00ff; border-color: #aa00ff; }
.status-btn.status-default { background: rgba(0,255,102,0.1); }

.status-menu { position: absolute; top: 24px; left: 0; background: #000; border: 1px solid rgba(0,255,102,0.3); border-radius: 8px; padding: 6px; display: none; grid-template-columns: repeat(4, 20px); gap: 6px; box-shadow: var(--shadow); z-index: 200; }
.status-option { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,255,102,0.3); cursor: pointer; }
.status-option[data-value="green"] { background: rgba(0,255,0,0.3); border-color: #00ff00; }
.status-option[data-value="green-solid"] { background: #00ff00; border-color: #00ff00; }
.status-option[data-value="yellow"] { background: rgba(255,255,0,0.3); border-color: #ffff00; }
.status-option[data-value="yellow-solid"] { background: #ffff00; border-color: #ffff00; }
.status-option[data-value="red"] { background: rgba(255,0,0,0.3); border-color: #ff3333; }
.status-option[data-value="red-solid"] { background: #ff3333; border-color: #ff3333; }
.status-option[data-value="blue"] { background: rgba(0,128,255,0.3); border-color: #0080ff; }
.status-option[data-value="blue-solid"] { background: #0080ff; border-color: #0080ff; }
.status-option[data-value="purple"] { background: rgba(170,0,255,0.3); border-color: #aa00ff; }
.status-option[data-value="purple-solid"] { background: #aa00ff; border-color: #aa00ff; }
.status-option[data-value="default"] { background: rgba(0,255,102,0.1); }

/* Always-visible horizontal status picker inside modal */
.modal .status-btn { display: none; }
.modal .status-menu { position: static; display: flex !important; grid-template-columns: none; gap: 8px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.status-option.selected { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* Open state */
.status-wrap.open .status-menu { display: grid; }
/* Open upwards modifier when near bottom */
.status-wrap.up .status-menu { top: auto; bottom: 24px; }

/* Table actions */
.table-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.row-action { appearance: none; border: 0; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; margin-right: 0; }
.table-actions { justify-content: flex-start; }
/* Add a little cushion to the right edge of the Actions cell */
#entriesTable td.table-actions { padding-right: 18px !important; }
#entriesTable thead th:last-child { padding-right: 18px !important; }
/* Slightly widen the Actions column so right padding is respected */
#entriesTable thead th:last-child { width: 140px; }
#entriesTable tbody td.table-actions { width: 140px; }
/* Add small space after last button */
.table-actions .row-action:last-child { margin-right: 8px; }
.row-action.edit { background: rgba(255,255,255,.08); color: var(--text); }
.row-action.delete { background: var(--danger); color: #091019; }
tbody tr { cursor: pointer; }
tbody tr .row-action { cursor: pointer; }

/* Copyable cells in the table */
#entriesTable td.copy-cell { cursor: copy; }
#entriesTable td.copy-cell:hover { background: rgba(255,255,255,.06); }
:root[data-theme='light'] #entriesTable td.copy-cell:hover { background: rgba(16,24,40,.06); }

/* Note modal: viewer and editor */
#noteModal .modal .body { max-height: 70vh; overflow: hidden; display: flex; flex-direction: column; }
#noteModal #noteViewer { max-height: none; }
#noteEditorWrap { display: flex; flex-direction: column; min-height: 0; }
#noteEditor { display: flex; flex-direction: column; min-height: 0; }
#noteEditor .ql-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#noteModal #noteEditor .ql-editor { flex: 1; min-height: 0; }
#noteViewer { max-height: 70vh; overflow: auto; }
#noteViewer p { margin: .5em 0; }
#noteViewer pre { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px; overflow: auto; }
:root[data-theme='light'] #noteViewer pre { background: rgba(16,24,40,.06); }
#noteViewer code { background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 3px; }

/* Quill editor height inside note modal */
#noteEditor .ql-editor { min-height: 320px; }

/* Mini date picker popover */
.date-popover { position: fixed; min-width: 260px; background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.3); border-radius: 12px; box-shadow: var(--shadow); z-index: 300; padding: 10px; }
.date-popover .date-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.date-popover .date-title { font-weight: 700; letter-spacing: .2px; }
.date-popover .date-nav { display: flex; gap: 6px; }
.date-popover .date-btn { appearance: none; border: 0; background: rgba(255,255,255,.06); color: var(--text); border-radius: 8px; padding: 4px 8px; cursor: pointer; }
.date-popover .date-btn:hover { background: rgba(255,255,255,.1); }
.date-popover .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.date-popover .date-wd { text-align: center; font-size: 12px; color: var(--muted); }
.date-popover .date-day { text-align: center; padding: 6px 0; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.04); }
.date-popover .date-day:hover { background: rgba(255,255,255,.1); }
.date-popover .date-day.other { opacity: .5; }
.date-popover .date-day.today { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.date-popover .date-day.selected { background: var(--brand); color: #091019; }
:root[data-theme='light'] .date-popover .date-btn { background: rgba(16,24,40,.06); color: #0d1321; }
:root[data-theme='light'] .date-popover .date-btn:hover { background: rgba(16,24,40,.10); }

/* Toast */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #111b37; color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 14px; font-size: 14px; display: none; z-index: 60; box-shadow: var(--shadow); }

/* Calendar */
.calendar { overflow: visible; }
.calendar-weekdays .cal-weekday { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 4px; }
.calendar-grid { user-select: none; transition: opacity .15s ease; }
.cal-day { position: relative; min-height: 72px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); cursor: pointer; }
.cal-day:hover { border-color: rgba(255,255,255,.16); box-shadow: 0 2px 8px rgba(0,0,0,.25) inset; }
.cal-day.other-month { opacity: .5; }
.cal-day.selected { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.cal-day.today { outline: 2px solid #ffd046; outline-offset: 2px; }
.cal-day.has-items { border-color: rgba(0,255,102,0.35); }
.cal-num { font-weight: 700; font-size: 12px; color: var(--muted); }
.cal-meta { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--muted); }

/* Month view: unique bucket list per day */
.cal-buckets {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 24px; /* below the day number */
  bottom: 6px;
  overflow: auto;
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none;    /* Firefox */
  user-select: none;
}
.cal-buckets::-webkit-scrollbar { width: 0; height: 0; }
.cal-bucket {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text);
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clickable month/year pieces in label */
#calMonthLabel .cal-link { cursor: pointer; border-bottom: 1px dotted rgba(255,255,255,.25); }
#calMonthLabel .cal-link:hover { border-bottom-color: rgba(255,255,255,.5); }
#calMonthLabel .cal-range { color: var(--muted); }
/* Inline prev/next nav inside label for months/years views */
#calMonthLabel .cal-nav { display: inline-block; cursor: pointer; padding: 2px 8px; margin: 0 6px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); user-select: none; }
#calMonthLabel .cal-nav:hover { background: rgba(255,255,255,.12); }

/* Floating calendar FAB */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 80; padding: 12px 16px; border-radius: 999px; font-weight: 800; background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: #08121f; box-shadow: var(--shadow); }
.fab:hover { filter: brightness(1.08); }

/* Mobile viewport fit overrides (appended to win cascade wars) */
@media (max-width: 720px) {
  body { padding: 8px 8px 48px; display: block; overflow-y: auto; }
  .timeline { padding: 10px 12px; }
  .help-row { display: none; }
  .calendar { padding: 8px 8px 12px; }
}

  .app { width: 100%; gap: 16px; }
  .header { align-items: center; }
  .timeline { padding: 16px 12px; }
  .track { height: 120px; }
  .tick-label { top: -18px; font-size: 11px; }
  .help-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .help-row > div:first-child { display: none; }
  .mobile-controls { display: flex; }
  .mobile-controls { gap: 8px; }
  .mobile-zoom-range { width: 110px; accent-color: var(--brand); }
  .row { grid-template-columns: 1fr; }
  .modal { width: 100%; max-width: 100vw; }
  .calendar-weekdays { gap: 4px !important; }
  .calendar-grid { gap: 4px !important; }
  .table-card { overflow-x: visible; }
  table { min-width: 0; width: 100%; table-layout: fixed; }
  th, td { padding: 10px 8px; }
  /* Hide less-critical columns only on the entries table: status, note, actions */
  #entriesTable thead th:nth-child(1),
  #entriesTable tbody td:nth-child(1),
  #entriesTable thead th:nth-child(6),
  #entriesTable tbody td:nth-child(6),
  #entriesTable thead th:nth-child(7),
  #entriesTable tbody td:nth-child(7) { display: none; }
  .punch-label { font-size: 16px; }
  .label-popper { max-width: 92vw; }
  .punch .control-btn, .label-popper .control-btn { width: 30px; height: 30px; font-size: 13px; }
  /* Ensure content can scroll on small screens */
  body { display: block; overflow-y: auto; }
}

/* Dedicated narrow breakpoint polish and overflow safety */
@media (max-width: 640px) {
  .app { width: 100%; }
  .card { max-width: 100%; }
  .header { flex-wrap: wrap; gap: 8px; }
  .top-controls { flex-wrap: wrap; gap: 6px; }
  .title { font-size: 20px; }
  /* Reset hard column widths so the table fits */
  #entriesTable th, #entriesTable td { width: auto !important; }
  #entriesTable { table-layout: fixed; width: 100%; min-width: 0; }
  /* Allow horizontal scroll inside the table card if needed */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Break very long content */
  th, td { word-break: break-word; }
}

/* Extra-safe mobile overrides at the end of the file to win cascade */
@media (max-width: 720px) {
  /* Ensure table never forces page wider than viewport */
  #entriesTable { width: 100%; min-width: 0; table-layout: fixed; }
  #entriesTable th, #entriesTable td { width: auto !important; }
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Keep controls wrapping */
  .header { flex-wrap: wrap; }
  .top-controls { flex-wrap: wrap; }
  /* Show Note column on mobile too */
  #entriesTable thead th:nth-child(6),
  #entriesTable tbody td:nth-child(6) { display: table-cell !important; }
}

/* Desktop/tablet: ensure Note column is visible */
@media (min-width: 721px) {
  #entriesTable thead th:nth-child(6),
  #entriesTable tbody td:nth-child(6),
  #entriesTable thead th:nth-child(7),
  #entriesTable tbody td:nth-child(7) { display: table-cell !important; }
}

/* Ensure order-specific override for mobile controls visibility */
/* Extracted from timelinebar.html */
:root {
  --bg: #000;
  --panel: #000;
  --panel-2: #001000;
  --text: #00ff66;
  --muted: #00b865;
  --brand: #00ff66;
  --brand-2: #00994d;
  --accent: #00ff66;
  --danger: #ff3333;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --input-bg: #000;
}

:root[data-theme='light'] {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --panel-2: #f3f6fb;
  --text: #0d1321;
  --muted: #5c6b73;
  --brand: #16a34a;
  --brand-2: #0e7a3d;
  --accent: #16a34a;
  --danger: #dc2626;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --input-bg: #ffffff;
}

/* Light theme readability + contrast tweaks */
:root[data-theme='light'] body { text-shadow: none; }
:root[data-theme='light'] .card { border-color: rgba(16,24,40,0.12); }
:root[data-theme='light'] .track {
  background: linear-gradient(90deg, rgba(16,24,40,.06), rgba(16,24,40,.04));
  border-color: rgba(16,24,40,.16);
}
:root[data-theme='light'] .tick-line { background: rgba(16,24,40,.18); }
:root[data-theme='light'] .tick-label { color: #475467; text-shadow: none; }

/* Punch readability in light theme: black text with subtle color glow */
:root[data-theme='light'] .punch { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.55); }
:root[data-theme='light'] .punch-label { color: #111; text-shadow: 0 0 12px rgba(22,163,74,.10); }
/* Ensure all non-solid statuses keep dark text in light theme */
:root[data-theme='light'] .punch.status-green .punch-label,
:root[data-theme='light'] .punch.status-yellow .punch-label,
:root[data-theme='light'] .punch.status-red .punch-label,
:root[data-theme='light'] .punch.status-blue .punch-label,
:root[data-theme='light'] .punch.status-purple .punch-label { color: #111; }

/* Edit controls color for light theme */
:root[data-theme='light'] .punch .control-btn { background: rgba(16,24,40,.08); color: #0d1321; }
:root[data-theme='light'] .label-popper { background: #fff; color: #0d1321; border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .label-connector { background: var(--brand-2); }
:root[data-theme='light'] .row-action.edit { background: rgba(16,24,40,.06); border: 1px solid rgba(16,24,40,.12); color: #0d1321; }
:root[data-theme='light'] .row-action.edit:hover { background: rgba(16,24,40,.10); }
:root[data-theme='light'] .icon-btn:hover { background: rgba(16,24,40,.08); color: #0d1321; }

/* Menus/popovers in light theme */
:root[data-theme='light'] .status-menu { background: var(--panel); border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .note-popover { border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .note-popover pre,
:root[data-theme='light'] .note-popover code { background: rgba(16,24,40,.06); }

/* Light theme tweaks for buttons */
:root[data-theme='light'] .btn.ghost {
  background: rgba(16,24,40,0.06);
  border: 1px solid rgba(16,24,40,0.12);
}
:root[data-theme='light'] .btn.ghost:hover {
  background: rgba(16,24,40,0.1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; height: auto; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Courier New', monospace;
  color: var(--text);
  background: var(--bg);
  display: grid;
  place-items: start center;
  padding: 32px 16px 80px;
  text-shadow: none;
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

.app { width: min(1100px, 96vw); display: grid; gap: 24px; }

.header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.title { font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: .2px; }
.subtle { color: var(--muted); font-size: 13px; }
/* Day label as a link to open calendar */
#dayLabel.clickable { cursor: pointer; display: inline-block; border-bottom: 1px dotted rgba(255,255,255,.25); }
#dayLabel.clickable:hover { border-bottom-color: rgba(255,255,255,.5); }

.card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid rgba(0,255,102,0.2); border-radius: 16px; box-shadow: var(--shadow); overflow: visible; }

/* Timeline */
.timeline { padding: 30px 20px; }

.track {
  position: relative;
  height: 92px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  /* allow tick labels positioned above the track to be visible */
  overflow: visible;
  cursor: crosshair;
  user-select: none;
  isolation: isolate;
}

.tick-labels { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }
/* unified tick: full-height line + label bound together */
.tick { position: absolute; top: 0; bottom: 0; }
.tick-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); transform: translateX(-50%); }
.tick-label { position: absolute; top: -22px; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.tick[data-edge="start"] .tick-label { transform: translateX(0%); }
.tick[data-edge="end"] .tick-label { transform: translateX(-100%); }

/* Current time indicator */
.now-indicator { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffd046; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 10px rgba(255,208,70,.4); transform: translateX(-50%); pointer-events: none; z-index: 2; }
/* Dimmed style when viewing a non-today date */
.now-indicator.not-today { background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.25); opacity: .55; }

.ghost { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,255,102,.3), rgba(0,255,102,.18)); border-left: 2px dashed var(--brand-2); border-right: 2px dashed var(--brand-2); display: none; pointer-events: none; z-index: 1; }

.tip { position: absolute; top: -36px; transform: translateX(-50%); background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.3); border-radius: 10px; padding: 4px 8px; font-size: 12px; white-space: nowrap; display: none; pointer-events: none; z-index: 2; box-shadow: var(--shadow); }
.tip-center { top: auto; bottom: -36px; }

.punch { position: absolute; top: 16px; bottom: 16px; border-radius: 10px; background: rgba(0,255,102,0.15); border: 1px solid rgba(0,255,102,0.6); box-shadow: inset 0 0 0 1px rgba(0,255,102,0.2), 0 6px 16px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; padding: 0 12px; color: var(--text); }
.punch-label { font-weight: 600; font-size: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; color: var(--text); text-shadow: none; margin: 0; flex: 1; }

/* small indicator for notes inside a punch */
.punch .note-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ffd046; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 6px rgba(255,208,70,.6); border: 0; cursor: pointer; padding: 0; display: inline-block; z-index: 40; }
.punch .note-dot:hover { filter: brightness(1.1); }

/* handles are grid children (first and last column). They sit entirely inside the block and match the dark inner edge */
.handle { position: absolute; top: 0; bottom: 0; width: 12px; display: block; cursor: ew-resize; background: transparent; z-index: 30; pointer-events: auto; }
.handle.left { left: 0; }
.handle.right { right: 0; }

/* visible inner bar on the handle (anchored to the inner edge) */
.handle-bar { position: absolute; top: 0; bottom: 0; width: 6px; background: linear-gradient(270deg, rgba(0,0,0,0.22), rgba(0,0,0,0.08)); pointer-events: none; }
/* flipped orientation: round the edge facing the block center */
.handle.left .handle-bar { left: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.handle.right .handle-bar { right: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* active glow for the edge being resized */
.punch.resizing-left .handle.left .handle-bar,
.punch.resizing-right .handle.right .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.18), inset 0 0 0 2px rgba(0,255,102,0.12);
}

/* indicate which handle will be grabbed on hover/focus (pre-resize feedback) */
.handle.left:hover .handle-bar, .handle.left:focus .handle-bar, .handle.left:focus-visible .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.12), inset 0 0 0 2px rgba(0,255,102,0.08);
}
.handle.right:hover .handle-bar, .handle.right:focus .handle-bar, .handle.right:focus-visible .handle-bar {
  box-shadow: 0 0 0 4px rgba(0,255,102,0.12), inset 0 0 0 2px rgba(0,255,102,0.08);
}

/* remove default focus outline but keep accessible focus-visible handling */
.handle:focus { outline: none; }

/* narrow block handling: move label outside so it stays legible */
.punch.narrow { /* keep label outside but make handles slightly larger visually */
  overflow: hidden;
}
.punch.narrow .punch-label { display: none; }
.punch.narrow .handle { transform: none; }
/* hide the in-block edit/delete buttons for narrow punches (we show popper controls instead) */
.punch.narrow .controls { display: none !important; }

/* label popper rendered below the timeline when blocks are very narrow */
.label-layer { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.label-popper { position: absolute; pointer-events: auto; /* let popper size to content so full bucket labels display */ min-width: 110px; max-width: 420px; width: max-content; background: rgba(11,18,39,0.95); color: var(--text); border: 1px solid rgba(255,255,255,.08); padding: 6px 8px; border-radius: 8px; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; box-shadow: var(--shadow); z-index: 90; white-space: nowrap; }
.label-popper .label-text { overflow: visible; text-overflow: clip; white-space: nowrap; font-weight: 600; }
.label-popper .controls { position: static; display: flex; gap: 6px; }
.label-popper .control-btn { width: 26px; height: 26px; }
.label-connector { position: absolute; width: 2px; background: var(--brand-2); z-index: 80; pointer-events: none; }

/* controls shown on hover for edit/delete */
.punch .controls { position: absolute; right: 6px; top: 6px; display: flex; gap: 6px; opacity: 0; transition: opacity .12s ease; z-index: 4; }
.punch:hover .controls { opacity: 0; }
.punch .control-btn { appearance: none; border: 0; background: rgba(0,0,0,.18); color: var(--text); width: 26px; height: 26px; border-radius: 6px; display: none; place-items: center; font-size: 12px; cursor: pointer; }
.punch .control-btn.delete { background: rgba(255,107,107,0.9); color: #091019; }
.punch.invalid { outline: 2px solid var(--danger); }

/* Hide in-block and popper edit/delete controls */
.punch .controls, .label-popper .controls { display: none !important; }

/* --- Responsive: Mobile Layout --- */
@media (max-width: 720px) {

  body { padding: 12px 8px 64px; 
}
  .app { width: 100%; gap: 16px; }
  .header { align-items: center; }
  .timeline { padding: 16px 12px; }
  .track { height: 120px; }
  .tick-label { top: -18px; font-size: 11px; }
  .help-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .help-row > div:first-child { display: none; }
  .mobile-controls { display: flex; }
  .mobile-controls { gap: 8px; }
  .mobile-zoom-range { width: 110px; accent-color: var(--brand); }
  .row { grid-template-columns: 1fr; }
  .modal { width: 100%; max-width: 100vw; }
  .calendar-weekdays { gap: 4px !important; }
  .calendar-grid { gap: 4px !important; }
  .table-card { overflow-x: visible; }
  table { min-width: 0; width: 100%; table-layout: fixed; }
  th, td { padding: 10px 8px; }
  /* Hide less-critical columns only on the entries table: status, note, actions */
  #entriesTable thead th:nth-child(1),
  #entriesTable tbody td:nth-child(1),
  #entriesTable thead th:nth-child(6),
  #entriesTable tbody td:nth-child(6),
  #entriesTable thead th:nth-child(7),
  #entriesTable tbody td:nth-child(7) { display: none; }
  .punch-label { font-size: 16px; }
  .label-popper { max-width: 92vw; }
  .punch .control-btn, .label-popper .control-btn { width: 30px; height: 30px; font-size: 13px; }
  /* Ensure content can scroll on small screens */
  body { display: block; overflow-y: auto; }
}

/* Ensure order-specific override for mobile controls visibility */
@media (max-width: 720px) {
 .mobile-controls { display: flex !important; 
} }

/* Floating popover for full note content */
.note-popover { position: fixed; max-width: 520px; min-width: 260px; background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.3); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; z-index: 300; }
.note-popover .note-content { max-height: 260px; overflow: auto; }
.note-popover .note-close { position: absolute; top: 6px; right: 6px; appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 8px; }
.note-popover .note-close:hover { background: rgba(255,255,255,.06); color: var(--text); }
.note-popover a { color: var(--brand-2); }
.note-popover pre { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px; overflow: auto; }
.note-popover code { background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 3px; }
.note-popover h1, .note-popover h2, .note-popover h3 { margin: .4em 0 .2em; }
.note-popover p { margin: .4em 0; }

/* Hover highlight syncing between track blocks and table rows */
.punch.is-hovered { outline: 2px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 8px 20px rgba(0,0,0,.5); }
tbody tr.is-hovered { background: rgba(255,255,255,.06); }

/* Status coloring for punches */
.punch.status-green { background: rgba(0,255,0,0.15); border-color: #00ff00; }
.punch.status-green .punch-label { color: #00ff00; }
.punch.status-green-solid { background: #00ff00; border-color: #00ff00; }
.punch.status-green-solid .punch-label { color: #000; }

.punch.status-yellow { background: rgba(255,255,0,0.15); border-color: #ffff00; }
.punch.status-yellow .punch-label { color: #ffff00; }
.punch.status-yellow-solid { background: #ffff00; border-color: #ffff00; }
.punch.status-yellow-solid .punch-label { color: #000; }

.punch.status-red { background: rgba(255,0,0,0.15); border-color: #ff3333; }
.punch.status-red .punch-label { color: #ff3333; }
.punch.status-red-solid { background: #ff3333; border-color: #ff3333; }
.punch.status-red-solid .punch-label { color: #000; }

.punch.status-blue { background: rgba(0,128,255,0.15); border-color: #0080ff; }
.punch.status-blue .punch-label { color: var(--text); }
.punch.status-blue-solid { background: #0080ff; border-color: #0080ff; }
.punch.status-blue-solid .punch-label { color: #fff; }

.punch.status-purple { background: rgba(170,0,255,0.15); border-color: #aa00ff; }
.punch.status-purple .punch-label { color: var(--text); }
.punch.status-purple-solid { background: #aa00ff; border-color: #aa00ff; }
.punch.status-purple-solid .punch-label { color: #fff; }

.punch.status-default { /* keep the default styling */ }

.help-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 16px; border-top: 1px dashed rgba(255,255,255,.08); color: var(--muted); font-size: 13px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { width: 520px; max-width: 96vw; }
.modal .body { padding: 18px; display: grid; gap: 12px; max-height: 70vh; overflow: auto; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
input[type="text"], input[type="date"], textarea, input[readonly], select { width: 100%; border: 1px solid rgba(0,255,102,0.3); background: var(--input-bg); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
textarea { resize: vertical; min-height: 72px; }
.modal .body::-webkit-scrollbar { width: 8px; }
.modal .body::-webkit-scrollbar-track { background: transparent; }
.modal .body::-webkit-scrollbar-thumb { background: rgba(0,255,102,.25); border-radius: 8px; }
.modal .body { scrollbar-width: thin; scrollbar-color: rgba(0,255,102,.25) transparent; }

/* Stylized date input */
input[type="date"] { appearance: none; -webkit-appearance: none; position: relative; padding-right: 36px; color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; filter: hue-rotate(90deg) saturate(120%); opacity: .85; cursor: pointer; padding: 6px; margin-right: 4px; border-radius: 8px; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { background: rgba(255,255,255,.06); }
input[type="date"]::-webkit-datetime-edit { color: var(--text); }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0 2px; }
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field { color: var(--text); background: transparent; }
.note-foot { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.note-foot a { color: var(--brand-2); text-decoration: none; }
.note-foot a:hover { text-decoration: underline; }
.note-preview { margin-top: 8px; border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); font-size: 14px; max-height: 200px; overflow: auto; }
.note-preview pre { background: rgba(0,0,0,.35); padding: 8px; border-radius: 8px; overflow: auto; }
.note-preview code { background: rgba(0,0,0,.35); padding: 0 3px; border-radius: 4px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.modal-title { font-weight: 700; letter-spacing:.2px; }
.icon-btn { appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.modal-footer { display: flex; justify-content: end; gap: 8px; padding: 0 18px 18px; }
.btn { appearance: none; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.btn.primary { background: linear-gradient(180deg, var(--accent), #18b67c); color: #042416; }
.btn.ghost { background: rgba(255,255,255,.06); color: var(--text); }
.btn.danger { background: #ff6b6b; color: #1e0f0f; }

/* Mobile timeline controls (hidden on desktop by default) */
.mobile-controls { display: none; gap: 10px; align-items: center; padding: 10px 12px 0; }
.mobile-zoom { padding: 6px 10px; font-size: 14px; }
.mobile-scrollbar { position: relative; flex: 1; height: 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); overflow: hidden; }
.mobile-window { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }

/* Light theme adjustments for mobile controls */
:root[data-theme='light'] .mobile-scrollbar { background: rgba(16,24,40,.06); border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .mobile-window { box-shadow: 0 0 0 1px rgba(16,24,40,.15) inset; }

/* Repeat controls */
.dow-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.dow-picker .chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(0,255,102,.25); color: var(--text); padding: 6px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; user-select: none; }
.dow-picker .chip input { appearance: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,255,102,.35); display: inline-block; position: relative; }
.dow-picker .chip input:checked { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; }
.dow-presets { margin-top: 6px; display: flex; gap: 8px; }

/* Apply scope & extend */
#applyScopeWrap { padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; }
#extendWrap { padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; }

/* Table */
/* Allow status dropdowns to overflow outside the card without clipping */
.table-card { overflow: visible; position: relative; z-index: 5; }
table { width: 100%; border-collapse: collapse; }
thead { background: rgba(255,255,255,.04); }
th, td { text-align: left; padding: 12px 14px; font-size: 14px; }
tbody tr + tr td { border-top: 1px dashed rgba(255,255,255,.08); }
td.note { color: var(--muted); }
.empty { padding: 18px; text-align: center; color: var(--muted); }

/* Status selector cell */
td.status-cell, th.status-cell { padding-left: 10px; padding-right: 10px; width: 40px; }
.status-wrap { position: relative; }
.status-btn { appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,255,102,0.3); cursor: pointer; background: rgba(0,255,102,0.1); display: inline-block; }
.status-btn.status-green { background: rgba(0,255,0,0.3); border-color: #00ff00; }
.status-btn.status-green-solid { background: #00ff00; border-color: #00ff00; }
.status-btn.status-yellow { background: rgba(255,255,0,0.3); border-color: #ffff00; }
.status-btn.status-yellow-solid { background: #ffff00; border-color: #ffff00; }
.status-btn.status-red { background: rgba(255,0,0,0.3); border-color: #ff3333; }
.status-btn.status-red-solid { background: #ff3333; border-color: #ff3333; }
.status-btn.status-blue { background: rgba(0,128,255,0.3); border-color: #0080ff; }
.status-btn.status-blue-solid { background: #0080ff; border-color: #0080ff; }
.status-btn.status-purple { background: rgba(170,0,255,0.3); border-color: #aa00ff; }
.status-btn.status-purple-solid { background: #aa00ff; border-color: #aa00ff; }
.status-btn.status-default { background: rgba(0,255,102,0.1); }

.status-menu { position: absolute; top: 24px; left: 0; background: #000; border: 1px solid rgba(0,255,102,0.3); border-radius: 8px; padding: 6px; display: none; grid-template-columns: repeat(4, 20px); gap: 6px; box-shadow: var(--shadow); z-index: 200; }
.status-option { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,255,102,0.3); cursor: pointer; }
.status-option[data-value="green"] { background: rgba(0,255,0,0.3); border-color: #00ff00; }
.status-option[data-value="green-solid"] { background: #00ff00; border-color: #00ff00; }
.status-option[data-value="yellow"] { background: rgba(255,255,0,0.3); border-color: #ffff00; }
.status-option[data-value="yellow-solid"] { background: #ffff00; border-color: #ffff00; }
.status-option[data-value="red"] { background: rgba(255,0,0,0.3); border-color: #ff3333; }
.status-option[data-value="red-solid"] { background: #ff3333; border-color: #ff3333; }
.status-option[data-value="blue"] { background: rgba(0,128,255,0.3); border-color: #0080ff; }
.status-option[data-value="blue-solid"] { background: #0080ff; border-color: #0080ff; }
.status-option[data-value="purple"] { background: rgba(170,0,255,0.3); border-color: #aa00ff; }
.status-option[data-value="purple-solid"] { background: #aa00ff; border-color: #aa00ff; }
.status-option[data-value="default"] { background: rgba(0,255,102,0.1); }

/* Open state */
.status-wrap.open .status-menu { display: grid; }
/* Open upwards modifier when near bottom */
.status-wrap.up .status-menu { top: auto; bottom: 24px; }

/* Table actions */
.table-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.row-action { appearance: none; border: 0; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; margin-right: 0; }
.row-action.edit { background: rgba(255,255,255,.08); color: var(--text); }
.row-action.delete { background: var(--danger); color: #091019; }
tbody tr { cursor: pointer; }
tbody tr .row-action { cursor: pointer; }

/* Toast */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #111b37; color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 14px; font-size: 14px; display: none; z-index: 60; box-shadow: var(--shadow); }

/* Calendar */
.calendar { overflow: visible; }
.calendar-weekdays .cal-weekday { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 4px; }
.calendar-grid { user-select: none; transition: opacity .15s ease; }
.cal-day { position: relative; min-height: 72px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); cursor: pointer; }
.cal-day:hover { border-color: rgba(255,255,255,.16); box-shadow: 0 2px 8px rgba(0,0,0,.25) inset; }
.cal-day.other-month { opacity: .5; }
.cal-day.selected { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.cal-day.today { outline: 2px solid #ffd046; outline-offset: 2px; }
.cal-day.has-items { border-color: rgba(0,255,102,0.35); }
.cal-num { font-weight: 700; font-size: 12px; color: var(--muted); }
.cal-meta { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--muted); }

/* Month view: unique bucket list per day */
.cal-buckets {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 24px; /* below the day number */
  bottom: 6px;
  overflow: auto;
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none;    /* Firefox */
  user-select: none;
}
.cal-buckets::-webkit-scrollbar { width: 0; height: 0; }
.cal-bucket {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text);
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clickable month/year pieces in label */
#calMonthLabel .cal-link { cursor: pointer; border-bottom: 1px dotted rgba(255,255,255,.25); }
#calMonthLabel .cal-link:hover { border-bottom-color: rgba(255,255,255,.5); }
#calMonthLabel .cal-range { color: var(--muted); }
/* Inline prev/next nav inside label for months/years views */
#calMonthLabel .cal-nav { display: inline-block; cursor: pointer; padding: 2px 8px; margin: 0 6px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); user-select: none; }
#calMonthLabel .cal-nav:hover { background: rgba(255,255,255,.12); }

/* Floating calendar FAB */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 80; padding: 12px 16px; border-radius: 999px; font-weight: 800; background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: #08121f; box-shadow: var(--shadow); }
.fab:hover { filter: brightness(1.08); }
 }

/* Floating popover for full note content */
.note-popover { position: fixed; max-width: 520px; min-width: 260px; background: var(--panel); color: var(--text); border: 1px solid rgba(0,255,102,0.3); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; z-index: 300; }
.note-popover .note-content { max-height: 260px; overflow: auto; }
.note-popover .note-close { position: absolute; top: 6px; right: 6px; appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 8px; }
.note-popover .note-close:hover { background: rgba(255,255,255,.06); color: var(--text); }
.note-popover a { color: var(--brand-2); }
.note-popover pre { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px; overflow: auto; }
.note-popover code { background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 3px; }
.note-popover h1, .note-popover h2, .note-popover h3 { margin: .4em 0 .2em; }
.note-popover p { margin: .4em 0; }

/* Hover highlight syncing between track blocks and table rows */
.punch.is-hovered { outline: 2px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 8px 20px rgba(0,0,0,.5); }
tbody tr.is-hovered { background: rgba(255,255,255,.06); }

/* Status coloring for punches */
.punch.status-green { background: rgba(0,255,0,0.15); border-color: #00ff00; }
.punch.status-green .punch-label { color: #00ff00; }
.punch.status-green-solid { background: #00ff00; border-color: #00ff00; }
.punch.status-green-solid .punch-label { color: #000; }

.punch.status-yellow { background: rgba(255,255,0,0.15); border-color: #ffff00; }
.punch.status-yellow .punch-label { color: #ffff00; }
.punch.status-yellow-solid { background: #ffff00; border-color: #ffff00; }
.punch.status-yellow-solid .punch-label { color: #000; }

.punch.status-red { background: rgba(255,0,0,0.15); border-color: #ff3333; }
.punch.status-red .punch-label { color: #ff3333; }
.punch.status-red-solid { background: #ff3333; border-color: #ff3333; }
.punch.status-red-solid .punch-label { color: #000; }

.punch.status-blue { background: rgba(0,128,255,0.15); border-color: #0080ff; }
.punch.status-blue .punch-label { color: var(--text); }
.punch.status-blue-solid { background: #0080ff; border-color: #0080ff; }
.punch.status-blue-solid .punch-label { color: #fff; }

.punch.status-purple { background: rgba(170,0,255,0.15); border-color: #aa00ff; }
.punch.status-purple .punch-label { color: var(--text); }
.punch.status-purple-solid { background: #aa00ff; border-color: #aa00ff; }
.punch.status-purple-solid .punch-label { color: #fff; }

.punch.status-default { /* keep the default styling */ }

.help-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 16px; border-top: 1px dashed rgba(255,255,255,.08); color: var(--muted); font-size: 13px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { width: 520px; max-width: 96vw; }
.modal .body { padding: 18px; display: grid; gap: 12px; max-height: 70vh; overflow: auto; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
input[type="text"], input[type="date"], textarea, input[readonly], select { width: 100%; border: 1px solid rgba(0,255,102,0.3); background: var(--input-bg); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
textarea { resize: vertical; min-height: 72px; }
.modal .body::-webkit-scrollbar { width: 8px; }
.modal .body::-webkit-scrollbar-track { background: transparent; }
.modal .body::-webkit-scrollbar-thumb { background: rgba(0,255,102,.25); border-radius: 8px; }
.modal .body { scrollbar-width: thin; scrollbar-color: rgba(0,255,102,.25) transparent; }

/* Stylized date input */
input[type="date"] { appearance: none; -webkit-appearance: none; position: relative; padding-right: 36px; color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; filter: hue-rotate(90deg) saturate(120%); opacity: .85; cursor: pointer; padding: 6px; margin-right: 4px; border-radius: 8px; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { background: rgba(255,255,255,.06); }
input[type="date"]::-webkit-datetime-edit { color: var(--text); }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0 2px; }
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field { color: var(--text); background: transparent; }
.note-foot { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.note-foot a { color: var(--brand-2); text-decoration: none; }
.note-foot a:hover { text-decoration: underline; }
.note-preview { margin-top: 8px; border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); font-size: 14px; max-height: 200px; overflow: auto; }
.note-preview pre { background: rgba(0,0,0,.35); padding: 8px; border-radius: 8px; overflow: auto; }
.note-preview code { background: rgba(0,0,0,.35); padding: 0 3px; border-radius: 4px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.modal-title { font-weight: 700; letter-spacing:.2px; }
.icon-btn { appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 6px; border-radius: 8px; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.modal-footer { display: flex; justify-content: end; gap: 8px; padding: 0 18px 18px; }
.btn { appearance: none; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.btn.primary { background: linear-gradient(180deg, var(--accent), #18b67c); color: #042416; }
.btn.ghost { background: rgba(255,255,255,.06); color: var(--text); }
.btn.danger { background: #ff6b6b; color: #1e0f0f; }

/* Mobile timeline controls (hidden on desktop by default) */
.mobile-controls { display: none; gap: 10px; align-items: center; padding: 10px 12px 0; }
.mobile-zoom { padding: 6px 10px; font-size: 14px; }
.mobile-scrollbar { position: relative; flex: 1; height: 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); overflow: hidden; }
.mobile-window { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }

/* Light theme adjustments for mobile controls */
:root[data-theme='light'] .mobile-scrollbar { background: rgba(16,24,40,.06); border-color: rgba(16,24,40,.12); }
:root[data-theme='light'] .mobile-window { box-shadow: 0 0 0 1px rgba(16,24,40,.15) inset; }

/* Repeat controls */
.dow-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.dow-picker .chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(0,255,102,.25); color: var(--text); padding: 6px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; user-select: none; }
.dow-picker .chip input { appearance: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,255,102,.35); display: inline-block; position: relative; }
.dow-picker .chip input:checked { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; }
.dow-presets { margin-top: 6px; display: flex; gap: 8px; }

/* Apply scope & extend */
#applyScopeWrap { padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; }
#extendWrap { padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; }

/* Table */
/* Allow status dropdowns to overflow outside the card without clipping */
.table-card { overflow: visible; position: relative; z-index: 5; }
table { width: 100%; border-collapse: collapse; }
thead { background: rgba(255,255,255,.04); }
th, td { text-align: left; padding: 12px 14px; font-size: 14px; }
tbody tr + tr td { border-top: 1px dashed rgba(255,255,255,.08); }
td.note { color: var(--muted); }
.empty { padding: 18px; text-align: center; color: var(--muted); }

/* Status selector cell */
td.status-cell, th.status-cell { padding-left: 10px; padding-right: 10px; width: 40px; }
.status-wrap { position: relative; }
.status-btn { appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,255,102,0.3); cursor: pointer; background: rgba(0,255,102,0.1); display: inline-block; }
.status-btn.status-green { background: rgba(0,255,0,0.3); border-color: #00ff00; }
.status-btn.status-green-solid { background: #00ff00; border-color: #00ff00; }
.status-btn.status-yellow { background: rgba(255,255,0,0.3); border-color: #ffff00; }
.status-btn.status-yellow-solid { background: #ffff00; border-color: #ffff00; }
.status-btn.status-red { background: rgba(255,0,0,0.3); border-color: #ff3333; }
.status-btn.status-red-solid { background: #ff3333; border-color: #ff3333; }
.status-btn.status-blue { background: rgba(0,128,255,0.3); border-color: #0080ff; }
.status-btn.status-blue-solid { background: #0080ff; border-color: #0080ff; }
.status-btn.status-purple { background: rgba(170,0,255,0.3); border-color: #aa00ff; }
.status-btn.status-purple-solid { background: #aa00ff; border-color: #aa00ff; }
.status-btn.status-default { background: rgba(0,255,102,0.1); }

.status-menu { position: absolute; top: 24px; left: 0; background: #000; border: 1px solid rgba(0,255,102,0.3); border-radius: 8px; padding: 6px; display: none; grid-template-columns: repeat(4, 20px); gap: 6px; box-shadow: var(--shadow); z-index: 200; }
.status-option { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,255,102,0.3); cursor: pointer; }
.status-option[data-value="green"] { background: rgba(0,255,0,0.3); border-color: #00ff00; }
.status-option[data-value="green-solid"] { background: #00ff00; border-color: #00ff00; }
.status-option[data-value="yellow"] { background: rgba(255,255,0,0.3); border-color: #ffff00; }
.status-option[data-value="yellow-solid"] { background: #ffff00; border-color: #ffff00; }
.status-option[data-value="red"] { background: rgba(255,0,0,0.3); border-color: #ff3333; }
.status-option[data-value="red-solid"] { background: #ff3333; border-color: #ff3333; }
.status-option[data-value="blue"] { background: rgba(0,128,255,0.3); border-color: #0080ff; }
.status-option[data-value="blue-solid"] { background: #0080ff; border-color: #0080ff; }
.status-option[data-value="purple"] { background: rgba(170,0,255,0.3); border-color: #aa00ff; }
.status-option[data-value="purple-solid"] { background: #aa00ff; border-color: #aa00ff; }
.status-option[data-value="default"] { background: rgba(0,255,102,0.1); }

/* Open state */
.status-wrap.open .status-menu { display: grid; }
/* Open upwards modifier when near bottom */
.status-wrap.up .status-menu { top: auto; bottom: 24px; }

/* Table actions */
.table-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.row-action { appearance: none; border: 0; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; margin-right: 0; }
.row-action.edit { background: rgba(255,255,255,.08); color: var(--text); }
.row-action.delete { background: var(--danger); color: #091019; }
tbody tr { cursor: pointer; }
tbody tr .row-action { cursor: pointer; }

/* Toast */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #111b37; color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 14px; font-size: 14px; display: none; z-index: 60; box-shadow: var(--shadow); }

/* Calendar */
.calendar { overflow: visible; }
.calendar-weekdays .cal-weekday { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 4px; }
.calendar-grid { user-select: none; transition: opacity .15s ease; }
.cal-day { position: relative; min-height: 72px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); cursor: pointer; }
.cal-day:hover { border-color: rgba(255,255,255,.16); box-shadow: 0 2px 8px rgba(0,0,0,.25) inset; }
.cal-day.other-month { opacity: .5; }
.cal-day.selected { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.cal-day.today { outline: 2px solid #ffd046; outline-offset: 2px; }
.cal-day.has-items { border-color: rgba(0,255,102,0.35); }
.cal-num { font-weight: 700; font-size: 12px; color: var(--muted); }
.cal-meta { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--muted); }

/* Month view: unique bucket list per day */
.cal-buckets {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 24px; /* below the day number */
  bottom: 6px;
  overflow: auto;
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none;    /* Firefox */
  user-select: none;
}
.cal-buckets::-webkit-scrollbar { width: 0; height: 0; }
.cal-bucket {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text);
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clickable month/year pieces in label */
#calMonthLabel .cal-link { cursor: pointer; border-bottom: 1px dotted rgba(255,255,255,.25); }
#calMonthLabel .cal-link:hover { border-bottom-color: rgba(255,255,255,.5); }
#calMonthLabel .cal-range { color: var(--muted); }
/* Inline prev/next nav inside label for months/years views */
#calMonthLabel .cal-nav { display: inline-block; cursor: pointer; padding: 2px 8px; margin: 0 6px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); user-select: none; }
#calMonthLabel .cal-nav:hover { background: rgba(255,255,255,.12); }

/* Floating calendar FAB */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 80; padding: 12px 16px; border-radius: 999px; font-weight: 800; background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: #08121f; box-shadow: var(--shadow); }
.fab:hover { filter: brightness(1.08); }

/* --- Note popover header + edit mode overrides --- */
.note-popover { padding-top: 38px; }
.note-popover .note-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 6px; }
.note-popover .note-actions .note-edit,
.note-popover .note-actions .note-close { appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; border-radius: 8px; }
.note-popover .note-actions .note-close { position: static; }
.note-popover .note-actions .note-edit:hover,
.note-popover .note-actions .note-close:hover { background: rgba(255,255,255,.06); color: var(--text); }
.note-popover .note-editarea { width: 100%; min-height: 120px; resize: vertical; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.15); color: var(--text); font: inherit; }
.note-popover .note-edit-actions { display: flex; justify-content: end; gap: 8px; margin-top: 10px; }
:root[data-theme='light'] .note-popover .note-editarea { background: rgba(16,24,40,.06); border-color: rgba(16,24,40,.12); }

/* Final mobile overrides to ensure responsiveness below 720px/640px */
@media (max-width: 720px) {
  #entriesTable { width: 100%; min-width: 0; table-layout: fixed; }
  #entriesTable th, #entriesTable td { width: auto !important; }
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .header { flex-wrap: wrap; }
  .top-controls { flex-wrap: wrap; }
}

/* --- Bucket report links --- */
a.bucket-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
a.bucket-link:visited { color: inherit; }

/* --- Bucket View layout + note visibility --- */
/* Always allow horizontal scroll so columns don't crush the note */
#bucketViewCard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Ensure the table keeps a reasonable minimum width to preserve note space */
#bucketViewCard table { min-width: 900px; table-layout: auto; }
/* Keep the Note column readable with a sensible minimum width */
#bucketViewCard th:nth-child(5),
#bucketViewCard td.note { min-width: 320px; }
/* Note content wrapping for readability */
#bucketViewCard td.note { vertical-align: top; }
#bucketViewCard td.note .note-html { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.3; }
#bucketViewCard td.note .note-html p { margin: .25em 0; }
#bucketViewCard td.note .note-html ul, #bucketViewCard td.note .note-html ol { padding-left: 18px; margin: .25em 0; }
#bucketViewCard td.note .note-html li { margin: .15em 0; }
#bucketViewCard td.note .note-html pre { white-space: pre-wrap; overflow: auto; }

/* Header of the Bucket View card: allow controls to wrap on narrow screens */
#bucketViewCard > div { flex-wrap: wrap; row-gap: 6px; }
#bucketViewCard > div > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bucket View total label */
#bucketViewTotal { color: var(--muted); margin-left: 6px; font-weight: 400; }

/* Styled scrollbars for tables (horizontal scroll on mobile) */
.table-card { scrollbar-width: thin; scrollbar-color: rgba(0,255,102,.55) rgba(255,255,255,.06); }
.table-card::-webkit-scrollbar { height: 10px; width: 10px; }
.table-card::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; }
.table-card::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand), var(--brand-2)); border-radius: 999px; }
.table-card::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--brand-2), var(--brand)); }

/* Dual note editors */
.note-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.note-section { display: block; }
.note-section-title { font-weight: 600; margin-bottom: 6px; opacity: 0.85; }
.note-section textarea { width: 100%; min-height: 72px; resize: vertical; }
@media (max-width: 720px) { .note-dual { grid-template-columns: 1fr; } }
/* Hide legacy note column next to Bucket in edit modal */
.row:has(#bucketField) { grid-template-columns: 1fr; }
.row:has(#bucketField) > div:nth-child(2) { display: none; }

/* Note modal: keep modal fixed-height and scroll inside each editor */
#noteModal .modal { display: flex; flex-direction: column; height: 80vh; max-height: 90vh; }
#noteModal .modal .body { flex: 1; overflow: hidden; display: flex; }
#noteModal .note-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; }
#noteModal .note-section { display: flex; flex-direction: column; min-height: 0; }
#noteModal .note-section .note-view { flex: 1; min-height: 0; overflow: auto; }
/* Editor wrappers fill and do not scroll; content inside editor scrolls */
#noteModal #noteEditorWrap, #noteModal #bucketNoteEditorWrap { flex: 1; min-height: 0; overflow: hidden; }
#noteModal .rich-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#noteModal .rich-editor .ql-toolbar { flex: 0 0 auto; }
#noteModal .rich-editor .ql-container { flex: 1 1 auto; min-height: 0; overflow: hidden; }
#noteModal .rich-editor .ql-editor { height: 100%; min-height: 0; overflow: auto; }
/* Ensure any earlier overflow on ql-container is overridden */
#noteModal .ql-container { overflow: hidden; }
@media (max-width: 720px) { #noteModal .note-dual { grid-template-columns: 1fr; } }

/* Make bucket editor match punch editor sizing */
#bucketNoteEditorWrap { display: flex; flex-direction: column; min-height: 0; }
#bucketNoteEditor { display: flex; flex-direction: column; min-height: 0; }
#bucketNoteEditor .ql-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#noteModal #bucketNoteEditor .ql-editor { flex: 1; min-height: 0; }
#bucketNoteEditor .ql-editor { min-height: 320px; }

/* Prevent horizontal growth; scroll horizontally inside editor/viewer */
#noteModal .note-section, #noteModal .rich-editor, #noteModal .rich-editor .ql-container, #noteModal .rich-editor .ql-editor { min-width: 0; max-width: 100%; }
#noteModal .rich-editor .ql-editor { overflow-x: auto; }
#noteModal .note-section .note-view { overflow-x: auto; }


#noteModal .ql-container { overflow: auto; }

/* Dashboard modules */
.module-track {
  position: relative;
  height: 40px;
  background: var(--track-bg, rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
}
.module-punch {
  position: absolute;
  top: 6px;
  height: 28px;
  border-radius: 6px;
}
.module-punch.status-green { background: rgba(0,255,0,0.15); border: 1px solid #00ff00; }
.module-punch.status-green-solid { background: #00ff00; border: 1px solid #00ff00; }
.module-punch.status-yellow { background: rgba(255,255,0,0.15); border: 1px solid #ffff00; }
.module-punch.status-yellow-solid { background: #ffff00; border: 1px solid #ffff00; }
.module-punch.status-red { background: rgba(255,0,0,0.15); border: 1px solid #ff3333; }
.module-punch.status-red-solid { background: #ff3333; border: 1px solid #ff3333; }
.module-punch.status-blue { background: rgba(0,128,255,0.15); border: 1px solid #0080ff; }
.module-punch.status-blue-solid { background: #0080ff; border: 1px solid #0080ff; }
.module-punch.status-purple { background: rgba(170,0,255,0.15); border: 1px solid #aa00ff; }
.module-punch.status-purple-solid { background: #aa00ff; border: 1px solid #aa00ff; }
.mini-table {
  width: 100%;
  border-collapse: collapse;
}
.mini-table th, .mini-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Override Quill editor borders to remove white borders or set to black */
.ql-container,
.ql-toolbar,
.ql-editor {
  border: none !important;
}

/* If you prefer a black border instead, uncomment the following: */
/*
.ql-container,
.ql-toolbar,
.ql-editor {
  border: 1px solid black !important;
}
*/