/*
 * Stage 5 P11: the port calendar (public month grid + agenda, hub widget) and
 * the staff list/form/import. Uses the shared tokens where they exist and
 * sensible fallbacks otherwise, so the same file works on the marketing pages
 * (tokens + marketing-theme) and on the staff pages (portal).
 */

/* ---------- kind colours (one accent per kind) ---------- */
:root {
  --cal-kind-public_holiday: #b45309;
  --cal-kind-port_closure: #b91c1c;
  --cal-kind-customs: #1d4ed8;
  --cal-kind-deadline: #7c3aed;
  --cal-kind-cutoff: #0f766e;
  --cal-kind-advisory: #475569;
  --cal-line: rgba(23, 43, 66, 0.14);
  --cal-ink: #172b42;
  --cal-muted: #5b6b7c;
  --cal-soft: #f4f7fa;
}

/* =====================================================================
 * Public calendar page
 * ===================================================================== */

.pm-cal-layout { display: grid; gap: 1.25rem; }

.pm-cal-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  align-items: center; justify-content: space-between;
}
.pm-cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.pm-cal-month { margin: 0; font-size: 1.35rem; min-width: 12ch; text-align: center; }
.pm-cal-arrow {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem; border-radius: 999px; font-weight: 600;
  color: var(--cal-ink); text-decoration: none; border: 1px solid var(--cal-line);
}
.pm-cal-arrow:hover { background: var(--cal-soft); }
.pm-cal-arrow-text { font-size: 0.85rem; }
.pm-cal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pm-cal-today {
  padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--cal-line); text-decoration: none; color: var(--cal-ink);
}
.pm-cal-toggle { display: inline-flex; border: 1px solid var(--cal-line); border-radius: 999px; overflow: hidden; }
.pm-cal-toggle-btn { padding: 0.4rem 0.85rem; text-decoration: none; color: var(--cal-ink); font-weight: 600; font-size: 0.9rem; }
.pm-cal-toggle-btn[aria-current="true"] { background: var(--cal-ink); color: #fff; }
.pm-cal-feed { font-size: 0.9rem; color: var(--cal-ink); }

/* filters as link chips: designed, keyboard-friendly and JavaScript-free */
.pm-cal-filterbar { display: grid; gap: 0.5rem; }
.pm-cal-filtergroup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pm-cal-filterlabel { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cal-muted); margin-inline-end: 0.25rem; }
.pm-cal-filterchip {
  display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  color: var(--cal-ink); text-decoration: none; border: 1px solid var(--cal-line); background: #fff;
}
.pm-cal-filterchip:hover { background: var(--cal-soft); }
.pm-cal-filterchip[aria-current="true"] { background: var(--cal-ink); border-color: var(--cal-ink); color: #fff; }

/* next up */
.pm-cal-next { border: 1px solid var(--cal-line); border-radius: 14px; padding: 0.9rem 1.1rem; background: var(--cal-soft); }
.pm-cal-next h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.pm-cal-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pm-cal-next-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.pm-cal-next-date { font-weight: 600; color: var(--cal-ink); }
.pm-cal-next-title { color: var(--cal-muted); }
.pm-cal-next-add { margin-inline-start: auto; font-size: 0.85rem; }

/* chips */
.pm-cal-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--cal-kind-advisory); }
.pm-cal-chip--public_holiday { background: var(--cal-kind-public_holiday); }
.pm-cal-chip--port_closure { background: var(--cal-kind-port_closure); }
.pm-cal-chip--customs { background: var(--cal-kind-customs); }
.pm-cal-chip--deadline { background: var(--cal-kind-deadline); }
.pm-cal-chip--cutoff { background: var(--cal-kind-cutoff); }
.pm-cal-tentative {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  color: #7c2d12; border: 1px dashed #92400e; background: #fef3c7;
}

/* month grid */
.pm-cal-grid { border: 1px solid var(--cal-line); border-radius: 14px; overflow: hidden; }
.pm-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; background: var(--cal-line); padding: 2px; }
.pm-cal-week--head { background: var(--cal-soft); padding: 0; border-bottom: 1px solid var(--cal-line); }
.pm-cal-wd { padding: 0.5rem 0.6rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cal-muted); }
.pm-cal-wd.is-weekend { color: var(--cal-kind-port_closure); }
.pm-cal-wd-short { display: none; }
.pm-cal-day { background: #fff; min-height: 3.4rem; padding: 0.4rem 0.5rem; position: relative; }
.pm-cal-day.is-out { background: #fbfcfd; color: var(--cal-muted); }
.pm-cal-day.is-today { outline: 2px solid var(--cal-ink); outline-offset: -2px; }
.pm-cal-daynum { font-size: 0.85rem; font-weight: 600; }
.pm-cal-todaymark { display: block; font-size: 0.62rem; font-weight: 700; color: var(--cal-ink); }
.pm-cal-bar {
  display: block; align-self: center; min-width: 0; margin: 1px 0; padding: 0.22rem 0.5rem;
  border-radius: 6px; font-size: 0.76rem; font-weight: 600; text-decoration: none; color: #fff;
  background: var(--cal-kind-advisory); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pm-cal-bar--public_holiday { background: var(--cal-kind-public_holiday); }
.pm-cal-bar--port_closure { background: var(--cal-kind-port_closure); }
.pm-cal-bar--customs { background: var(--cal-kind-customs); }
.pm-cal-bar--deadline { background: var(--cal-kind-deadline); }
.pm-cal-bar--cutoff { background: var(--cal-kind-cutoff); }
.pm-cal-bar.is-tentative { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 6px, transparent 6px 12px); }
.pm-cal-bar-title { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* views toggle (no JS: phones show the list, wider screens show the month) */
.pm-cal-view--month { display: none; }
.pm-cal-view--list { display: block; }
.pm-cal-views[data-view="month"] .pm-cal-view--month { display: block; }
.pm-cal-views[data-view="month"] .pm-cal-view--list { display: none; }
.pm-cal-views[data-view="list"] .pm-cal-view--month { display: none; }
.pm-cal-views[data-view="list"] .pm-cal-view--list { display: block; }

/* agenda */
.pm-cal-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pm-cal-item { border: 1px solid var(--cal-line); border-inline-start: 4px solid var(--cal-kind-advisory); border-radius: 12px; padding: 0.85rem 1rem; background: #fff; }
.pm-cal-item--public_holiday { border-inline-start-color: var(--cal-kind-public_holiday); }
.pm-cal-item--port_closure { border-inline-start-color: var(--cal-kind-port_closure); }
.pm-cal-item--customs { border-inline-start-color: var(--cal-kind-customs); }
.pm-cal-item--deadline { border-inline-start-color: var(--cal-kind-deadline); }
.pm-cal-item--cutoff { border-inline-start-color: var(--cal-kind-cutoff); }
.pm-cal-item:focus-visible { outline: 3px solid var(--cal-ink); outline-offset: 2px; }
.pm-cal-item-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pm-cal-item-title { margin: 0.4rem 0 0.2rem; font-size: 1.05rem; }
.pm-cal-item-date { margin: 0; font-weight: 600; color: var(--cal-ink); }
.pm-cal-item-ports, .pm-cal-item-note { margin: 0.35rem 0 0; color: var(--cal-muted); font-size: 0.92rem; }
.pm-cal-label { font-weight: 700; color: var(--cal-ink); }
.pm-cal-item-source { margin: 0.35rem 0 0; }
.pm-cal-item-actions { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pm-cal-add, .pm-cal-gcal { font-size: 0.88rem; font-weight: 600; }

/* empty state */
.pm-cal-empty { border: 1px dashed var(--cal-line); border-radius: 14px; padding: 1.6rem; text-align: center; background: var(--cal-soft); }
.pm-cal-empty-eyebrow { margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cal-muted); }
.pm-cal-empty h3 { margin: 0.35rem 0 0.4rem; }
.pm-cal-empty p { margin: 0; color: var(--cal-muted); }

@media (min-width: 760px) {
  .pm-cal-view--month { display: block; }
  .pm-cal-view--list { display: none; }
  .pm-cal-views[data-view="list"] .pm-cal-view--month { display: none; }
  .pm-cal-views[data-view="list"] .pm-cal-view--list { display: block; }
  .pm-cal-wd-short { display: none; }
}
@media (max-width: 759px) {
  .pm-cal-wd-full { display: none; }
  .pm-cal-wd-short { display: inline; }
  .pm-cal-arrow-text { display: none; }
}

/* =====================================================================
 * Staff pages
 * ===================================================================== */

.cal-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin: 1rem 0; }
.cal-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.cal-field > label, .cal-field > legend { font-weight: 600; }
.cal-field.has-error input, .cal-field.has-error select, .cal-field.has-error textarea { border-color: var(--danger, #b91c1c); }
.cal-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cal-error { margin: 0.25rem 0 0; color: #b91c1c; font-size: 0.85rem; }
.cal-warning { color: #b45309; font-weight: 600; }
.cal-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.cal-check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.cal-form textarea, .cal-form input[type="text"], .cal-form input[type="url"] { width: 100%; }
.cal-form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.cal-actions-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cal-status-card { margin-top: 1.25rem; }
.cal-table-wrap { overflow-x: auto; }
.cal-table-card { padding: 0; overflow: hidden; }
.cal-table { width: 100%; border-collapse: collapse; }
.cal-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cal-table th, .cal-table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--cal-line); vertical-align: top; }
.cal-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cal-muted); }
.cal-table tr.is-past td { color: var(--cal-muted); }
.cal-row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cal-row-actions .inline-form { display: inline; }
.cal-tentative { font-size: 0.72rem; font-weight: 700; color: #b45309; }
.cal-empty { text-align: center; }
.cal-import-errors ul { margin: 0.4rem 0 0.8rem; }
.cal-import-confirm { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.75rem; }
.cal-import-help { margin: 0; padding-inline-start: 1.1rem; }
.cal-import-help li { margin: 0.2rem 0; }

@media (max-width: 720px) {
  .cal-field-row { grid-template-columns: 1fr; }
  .cal-table thead { display: none; }
  .cal-table tr { display: block; border-bottom: 1px solid var(--cal-line); padding: 0.4rem 0; }
  .cal-table td { display: block; border: 0; padding: 0.25rem 0.7rem; }
  .cal-table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--cal-muted); }
}