/* ───────────────────────────────────────────────────────────────────────────
 * To-Do board styles. Layered on top of the shared dashboard tokens
 * (styles.css) and the note/comment/attachment/modal classes
 * (fbo-dashboard.css), which todos.js reuses verbatim. This file adds:
 *   • urgency card styling (grey / yellow / red / overdue flashing)
 *   • the to-do card layout + round Complete button
 *   • completed / on-time / late badges
 *   • the date → time chooser (2 PM / 10 PM / Other segmented control)
 *   • the recurring rules list + form controls
 *   • .cat-<key> colors for the to-do-only categories
 * ─────────────────────────────────────────────────────────────────────────── */

/* ─── Toolbar ───────────────────────────────────────────────────────────────── */
.todo-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 22px;
}

/* ─── Sub-tabs (To-Dos | Analytics) — mirror .hs-subtab ─────────────────────── */
.todo-subtabs { display: flex; flex-wrap: wrap; gap: 4px; }
.todo-subtab {
  border: none; background: none; color: #777;
  padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.todo-subtab:hover { background: #f4f4f4; color: #333; }
.todo-subtab.active { background: #1c1c1c; color: #fff; }
.todo-actions-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.todo-panel.hidden { display: none; }

/* ─── Feed + sections ───────────────────────────────────────────────────────── */
.todos-feed .todo-open-list { display: flex; flex-direction: column; gap: 14px; }
.todos-feed .empty-row {
  text-align: center; padding: 44px 16px;
  color: var(--fg-faint, #888);
  font-size: 14px; font-weight: 500;
}
.todo-section-head {
  margin: 30px 0 14px;
  font-family: var(--font-body, sans-serif);
  font-weight: 700; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted, #575760);
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  padding-top: 22px;
}
.todos-feed .todo-card + .todo-card { margin-top: 14px; }

/* ─── Card ──────────────────────────────────────────────────────────────────── */
.todo-card {
  position: relative;
  background: var(--bg, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-left: 4px solid var(--gold, #B79B58);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.06));
  padding: 16px 18px;
  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out, background 0.4s ease-out;
}
.todo-card:hover { box-shadow: var(--shadow-elevated, 0 12px 48px rgba(0,0,0,0.12)); }

.todo-main { display: flex; gap: 14px; align-items: flex-start; }
.todo-content { flex: 1 1 auto; min-width: 0; }

.todo-task {
  margin: 0 0 8px;
  font-size: 15px; line-height: 1.5; font-weight: 600;
  color: var(--fg-strong, #0A0A0A);
  word-break: break-word;
}
.todo-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.todo-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}
.todo-created { font-size: 12px; font-weight: 500; color: var(--fg-faint, #888); }
/* "Posted by" pill — who created the to-do. */
.todo-poster {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--fg-muted, #575760);
  background: var(--bg-subtle, #F4F4F2);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: var(--radius-full, 9999px);
  white-space: nowrap;
}
.todo-poster-icon { font-size: 11px; line-height: 1; opacity: 0.7; }
.todo-poster-time { font-weight: 500; color: var(--fg-faint, #888); }
.todo-actions { display: flex; gap: 6px; }
.todo-act {
  border: none; cursor: pointer; background: transparent;
  font-family: var(--font-body, sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--fg-muted, #575760);
  padding: 5px 10px; border-radius: var(--radius-full, 9999px);
  transition: background 0.15s ease-out, color 0.15s ease-out;
}
.todo-act:hover { background: var(--gold-subtle, rgba(183,155,88,0.1)); color: var(--gold-dark, #9A8145); }
.todo-act.danger:hover { background: rgba(193,52,52,0.1); color: #C13434; }
.todo-open-checklist { color: var(--gold-dark, #9A8145); background: var(--gold-subtle, rgba(183,155,88,0.12)); }
.todo-open-checklist:hover { background: var(--gold, #B79B58); color: #fff; }

/* ─── Right rail: due date (open) / completion details (done) ───────────────── */
.todo-rail {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; gap: 2px;
  min-width: 104px; padding-left: 12px;
}
.todo-rail-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint, #999);
}
.todo-due-label { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--fg-strong, #0A0A0A); }
.todo-countdown { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint, #888); }

/* ─── Round Complete button ─────────────────────────────────────────────────── */
.todo-complete {
  flex: 0 0 auto;
  width: 34px; height: 34px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border-strong, rgba(0,0,0,0.2));
  background: var(--bg, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease-out, background 0.15s ease-out, transform 0.1s ease-out;
}
.todo-complete .todo-check {
  font-size: 16px; line-height: 1; font-weight: 700;
  color: transparent;
}
.todo-complete:hover {
  border-color: #12B76A;
  background: rgba(18,183,106,0.08);
}
.todo-complete:hover .todo-check { color: #12B76A; }
.todo-complete:active { transform: scale(0.92); }
.todo-complete.is-done {
  border-color: #12B76A;
  background: #12B76A;
}
.todo-complete.is-done .todo-check { color: #fff; }
.todo-complete.is-done:hover { background: #0E9E5C; border-color: #0E9E5C; }

/* Completion rail (done cards) — badge on top, then who + when, stacked. */
.todo-rail-done { gap: 3px; }
.todo-done-by { font-size: 12px; font-weight: 600; color: var(--fg-muted, #575760); }
.todo-done-time { font-size: 11px; color: var(--fg-faint, #888); }
.todo-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-full, 9999px);
  margin-bottom: 3px;
}
.todo-ontime { color: #027A48; background: rgba(2,122,72,0.12); }
.todo-late   { color: #B42318; background: rgba(217,45,32,0.12); }

/* On narrow screens the rail drops below the task instead of squeezing it. */
@media (max-width: 540px) {
  .todo-main { flex-wrap: wrap; }
  .todo-rail {
    align-items: flex-start; text-align: left;
    min-width: 0; padding-left: 46px; margin-top: 6px; flex-basis: 100%;
  }
}

/* ─── Urgency (open cards) ──────────────────────────────────────────────────── */
.todo-card.urg-grey   { border-left-color: var(--gold, #B79B58); }

.todo-card.urg-yellow {
  border-left-color: #F79009;
  background: rgba(247,144,9,0.04);
}
.todo-card.urg-yellow .todo-countdown { color: #B54708; }

.todo-card.urg-red {
  border-left-color: #D92D20;
  background: rgba(217,45,32,0.05);
}
.todo-card.urg-red .todo-countdown { color: #B42318; }

.todo-card.urg-overdue {
  border-left-color: #D92D20;
  animation: todo-overdue-pulse 2s ease-in-out infinite;
}
.todo-card.urg-overdue .todo-countdown { color: #B42318; font-weight: 700; }

@keyframes todo-overdue-pulse {
  0%, 100% { background: rgba(217,45,32,0.04); box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.06)); }
  50%      { background: rgba(217,45,32,0.16); box-shadow: 0 0 0 1px rgba(217,45,32,0.35), var(--shadow-card, 0 4px 24px rgba(0,0,0,0.06)); }
}

/* Completed cards read as muted/settled. */
.todo-card.urg-done {
  border-left-color: #12B76A;
  background: var(--bg-soft, #f7f7f5);
  opacity: 0.92;
}
.todo-card.urg-done .todo-task { color: var(--fg-muted, #575760); }

/* Flash when focused from search/cmd-k */
.todo-card.todo-flash { animation: todo-flash 2.2s ease-out; }
@keyframes todo-flash {
  0%   { box-shadow: 0 0 0 3px var(--gold, #B79B58), var(--shadow-elevated, 0 12px 48px rgba(0,0,0,0.18)); }
  100% { box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.06)); }
}

/* ─── Add / edit modal: date → time chooser ─────────────────────────────────── */
.todo-modal { max-width: 560px; text-align: left; }
.todo-modal .modal-actions { margin-top: 8px; }

/* Keep tall to-do modals (long category grid, schedule options, attachments)
   within the screen — scroll inside the modal instead of overflowing off-screen.
   Overrides the base .modal's overflow:hidden. */
.todo-modal, .todo-recur-modal {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.time-chooser { margin-top: 12px; }
.time-seg {
  display: inline-flex; gap: 0;
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.time-opt {
  border: none; cursor: pointer; background: var(--bg, #fff);
  font-family: var(--font-body, sans-serif);
  font-size: 13px; font-weight: 600;
  color: var(--fg-muted, #575760);
  padding: 10px 18px;
  border-right: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  transition: background 0.12s ease-out, color 0.12s ease-out;
}
.time-opt:last-child { border-right: none; }
.time-opt:hover { background: var(--gold-subtle, rgba(183,155,88,0.1)); color: var(--gold-dark, #9A8145); }
.time-opt.active {
  background: var(--gold, #B79B58);
  color: #fff;
}
.time-other-input { margin-top: 10px; max-width: 200px; }

/* ─── Recurring modal ───────────────────────────────────────────────────────── */
.todo-recur-modal { max-width: 600px; text-align: left; }

.recur-list { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; }
.recur-list .empty-row {
  text-align: center; padding: 20px 12px;
  color: var(--fg-faint, #888); font-size: 13px; font-weight: 500;
}
.recur-item {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: var(--radius-md, 12px);
  background: var(--bg-soft, #f7f7f5);
}
.recur-item.is-inactive { opacity: 0.55; }
.recur-item-main { flex: 1 1 auto; min-width: 0; }
.recur-item-task { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--fg-strong, #0A0A0A); word-break: break-word; }
.recur-item-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.recur-item-desc { font-size: 12px; font-weight: 500; color: var(--fg-muted, #575760); }
.recur-item-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex: 0 0 auto; }
.recur-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--fg-muted, #575760);
  cursor: pointer;
}
.recur-toggle input { accent-color: var(--gold, #B79B58); width: 15px; height: 15px; }

.recur-sched-detail { margin-top: 12px; }
.recur-dow { display: flex; flex-wrap: wrap; gap: 8px; }
.recur-dow-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--border-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 12px);
  font-size: 13px; font-weight: 600; color: var(--fg-muted, #575760);
  cursor: pointer;
}
.recur-dow-opt input { accent-color: var(--gold, #B79B58); width: 15px; height: 15px; }
.recur-dow-opt:has(input:checked) {
  border-color: var(--gold, #B79B58);
  background: var(--gold-subtle, rgba(183,155,88,0.1));
  color: var(--gold-dark, #9A8145);
}

.recur-due { display: flex; gap: 10px; align-items: center; }
.recur-due-at { color: var(--fg-muted, #575760); font-size: 13px; }
.recur-offset-value { max-width: 90px; }
.recur-offset-kind { flex: 1 1 auto; }

/* ─── Category colors for to-do-only categories ─────────────────────────────── */
/* (priority, admin, customer, elliott, school, fuel, gse, qcc, rental, inflight
 *  are already defined by the notes board in fbo-dashboard.css.) */
.cat-office      { --c: #475467; --cbg: rgba(71,84,103,0.12); }
.cat-open-check  { --c: #027A48; --cbg: rgba(2,122,72,0.12); }
.cat-day-check   { --c: #0E7090; --cbg: rgba(14,112,144,0.12); }
.cat-close-check { --c: #3538CD; --cbg: rgba(53,56,205,0.12); }
.cat-open-fbo-check  { --c: #B54708; --cbg: rgba(181,71,8,0.12); }
.cat-open-desk   { --c: #5925DC; --cbg: rgba(89,37,220,0.12); }
.cat-close-fbo-check { --c: #C11574; --cbg: rgba(193,21,116,0.12); }
.cat-close-desk  { --c: #93370D; --cbg: rgba(147,55,13,0.12); }

/* Mobile */
@media (max-width: 560px) {
  .todo-foot { align-items: flex-start; }
  .recur-item { flex-direction: column; }
  .recur-item-actions { flex-direction: row; align-items: center; align-self: stretch; }
}