/* Time, Billing & Leave — interface styles.
 *
 * Palette and typography taken from spsoft.com: Syne for headings,
 * Montserrat for body, crimson #f52255 against near-black #191919.
 *
 * This is an operational tool people open every day, often for two minutes at
 * a time to enter hours. It is styled to be quiet and legible rather than
 * expressive: the brand shows in the type, the accent and the header, and gets
 * out of the way of the numbers.
 */

:root {
  /* Brand */
  --sp-black: #191919;
  --sp-black-soft: #1d1d1d;
  --sp-crimson: #f52255;
  --sp-crimson-dark: #cd0d46;
  --sp-lime: #d7f522;

  /* Neutrals */
  --sp-grey-100: #f2f2f2;
  --sp-grey-200: #e8ebef;
  --sp-grey-300: #c9d4e2;
  --sp-grey-400: #bdbdbd;
  --sp-grey-500: #828282;
  --sp-slate: #505d68;

  /* Semantic. Amounts and states are read at a glance, so each state gets a
     colour that survives being seen out of the corner of the eye. */
  --sp-ok: #1a7f4b;
  --sp-ok-bg: #e8f5ee;
  --sp-warn: #a86400;
  --sp-warn-bg: #fdf3e2;
  --sp-danger: var(--sp-crimson-dark);
  --sp-danger-bg: #fdeaf0;
  --sp-info-bg: #eef2f8;

  --sp-bg: #ffffff;
  --sp-surface: #ffffff;
  --sp-page: #f7f8fa;
  --sp-text: var(--sp-black);
  --sp-text-muted: var(--sp-slate);
  --sp-border: var(--sp-grey-200);

  --sp-radius: 8px;
  --sp-radius-sm: 5px;
  --sp-shadow: 0 1px 2px rgba(25, 25, 25, 0.06), 0 1px 3px rgba(25, 25, 25, 0.04);
  --sp-shadow-lg: 0 4px 16px rgba(25, 25, 25, 0.09);

  --sp-font-head: "Syne", "Montserrat", system-ui, sans-serif;
  --sp-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Hours and money must line up in columns; proportional digits do not. */
  --sp-font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sp-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sp-text);
  background: var(--sp-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sp-font-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a {
  color: var(--sp-crimson-dark);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* --- Layout ------------------------------------------------------------- */

.sp-header {
  background: var(--sp-black);
  color: #fff;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.sp-brand {
  font-family: var(--sp-font-head);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.sp-brand:hover { text-decoration: none; }
.sp-brand .dot { color: var(--sp-crimson); }

.sp-nav {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  overflow-x: auto;
  /* A flex child defaults to min-width:auto, which lets the nav push the
     user block off the header and clip the last link. */
  min-width: 0;
  /* Reserve the scrollbar gutter. Without it the bar appears only on pages
     whose nav overflows, and the header visibly jumps as you move between
     tabs. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sp-nav::-webkit-scrollbar { display: none; }

.sp-nav a {
  color: rgba(255, 255, 255, 0.72);
  padding: 0.45rem 0.75rem;
  border-radius: var(--sp-radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
}
.sp-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.sp-nav a.active {
  color: #fff;
  background: var(--sp-crimson);
}

.sp-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  /* Never squeezed by the nav: the sign-in identity and admin link must
     stay reachable at every width. */
  flex-shrink: 0;
}

.sp-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 4rem;
}

.sp-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.sp-page-head p { margin: 0; color: var(--sp-text-muted); font-size: 0.9rem; }

/* --- Cards -------------------------------------------------------------- */

.sp-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.sp-card-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sp-card-head h2, .sp-card-head h3 { margin: 0; }

.sp-card-body { padding: 1.1rem; }
.sp-card-body.flush { padding: 0; }

.sp-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-bottom: 1.25rem;
}

/* --- Stat tiles --------------------------------------------------------- */

.sp-stat {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--sp-shadow);
}
.sp-stat .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-text-muted);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.sp-stat .value {
  font-family: var(--sp-font-head);
  font-size: 1.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sp-stat .sub { font-size: 0.78rem; color: var(--sp-text-muted); margin-top: 0.15rem; }
.sp-stat.accent { border-left: 3px solid var(--sp-crimson); }

/* --- Tables ------------------------------------------------------------- */

.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.sp-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-text-muted);
  font-weight: 700;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-grey-100);
  white-space: nowrap;
}
.sp-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--sp-border);
  vertical-align: middle;
}
.sp-table tbody tr:last-child td { border-bottom: none; }
.sp-table tbody tr:hover { background: var(--sp-grey-100); }
.sp-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--sp-font-num);
  font-size: 0.85rem;
}
.sp-table-wrap { overflow-x: auto; }

/* --- Weekly timesheet grid ---------------------------------------------- */
/* The primary screen: a week of one person's time, project against day. */

.sp-week {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.sp-week th {
  padding: 0.5rem 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sp-text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-grey-100);
  text-align: center;
}
.sp-week th.project-col { text-align: left; min-width: 220px; }
.sp-week th .dow { display: block; font-size: 0.85rem; color: var(--sp-text); }
.sp-week th .date { display: block; font-weight: 500; font-size: 0.68rem; }

.sp-week td {
  padding: 0.3rem;
  border-bottom: 1px solid var(--sp-border);
  text-align: center;
}
.sp-week td.project-col {
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-weight: 500;
}
.sp-week td.project-col .client {
  display: block;
  font-size: 0.74rem;
  color: var(--sp-text-muted);
  font-weight: 400;
}
.sp-work-project { display: block; font-weight: 650; color: var(--sp-text); }
.sp-work-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sp-remove-work-item {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sp-grey-500);
  font: 500 1rem/1 var(--sp-font-body);
  cursor: pointer;
}
.sp-remove-work-item:hover,
.sp-remove-work-item:focus-visible {
  background: var(--sp-danger-bg);
  color: var(--sp-crimson-dark);
  outline: none;
}
.sp-work-task {
  display: block;
  margin-top: 0.12rem;
  color: var(--sp-slate);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Weekends and holidays are visibly not working days, so a gap there reads as
   expected rather than as missing time. */
.sp-week .off { background: var(--sp-grey-100); }
/* Approved leave: no hours are expected, and the reason is visible. */
.sp-week .on-leave {
  background: var(--sp-info-bg);
  color: var(--sp-slate);
  font-size: 0.7rem;
  font-weight: 600;
}

.sp-hours {
  width: 82px;
  padding: 0.35rem 0.2rem;
  text-align: center;
  border: 1px solid var(--sp-grey-300);
  border-radius: var(--sp-radius-sm);
  font-family: var(--sp-font-num);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--sp-text);
  appearance: textfield;
  -moz-appearance: textfield;
}
.sp-hours::-webkit-inner-spin-button,
.sp-hours::-webkit-outer-spin-button { margin: 0; appearance: none; }
.sp-hours:focus {
  outline: none;
  border-color: var(--sp-crimson);
  box-shadow: 0 0 0 3px rgba(245, 34, 85, 0.14);
}
.sp-hours:disabled {
  background: var(--sp-grey-100);
  color: var(--sp-grey-500);
  cursor: not-allowed;
}
.sp-hours.saved {
  border-color: var(--sp-ok);
  background: var(--sp-ok-bg);
}

.sp-week tfoot td {
  font-weight: 700;
  background: var(--sp-grey-100);
  font-family: var(--sp-font-num);
  font-variant-numeric: tabular-nums;
}
/* A day short of or over the person's schedule is worth noticing while
   entering, not at submission. */
.sp-day-total.under { color: var(--sp-warn); }
.sp-day-total.over { color: var(--sp-danger); }
.sp-day-total.exact { color: var(--sp-ok); }

/* --- Badges ------------------------------------------------------------- */

.sp-badge {
  display: inline-block;
  padding: 0.16rem 0.5rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sp-badge.draft { background: var(--sp-grey-200); color: var(--sp-slate); }
.sp-badge.submitted { background: var(--sp-warn-bg); color: var(--sp-warn); }
.sp-badge.approved { background: var(--sp-ok-bg); color: var(--sp-ok); }
.sp-badge.rejected { background: var(--sp-danger-bg); color: var(--sp-danger); }
.sp-badge.locked { background: var(--sp-black); color: #fff; }
.sp-badge.pending { background: var(--sp-warn-bg); color: var(--sp-warn); }
.sp-badge.cancelled { background: var(--sp-grey-200); color: var(--sp-grey-500); }
.sp-badge.billable { background: var(--sp-ok-bg); color: var(--sp-ok); }
.sp-badge.non-billable { background: var(--sp-grey-200); color: var(--sp-slate); }
.sp-badge.contractor { background: #efe7fb; color: #5b3a9e; }

/* --- Buttons ------------------------------------------------------------ */

.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid transparent;
  font-family: var(--sp-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--sp-black);
  color: #fff;
  transition: background 0.12s ease;
}
.sp-btn:hover { background: #000; text-decoration: none; }
.sp-btn.primary { background: var(--sp-crimson); }
.sp-btn.primary:hover { background: var(--sp-crimson-dark); }
.sp-btn.ghost {
  background: transparent;
  border-color: var(--sp-grey-300);
  color: var(--sp-text);
}
.sp-btn.ghost:hover { background: var(--sp-grey-100); }
.sp-btn.ok { background: var(--sp-ok); }
.sp-btn.danger { background: var(--sp-crimson-dark); }
.sp-btn.sm { padding: 0.32rem 0.6rem; font-size: 0.78rem; }
.sp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.sp-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* --- Forms -------------------------------------------------------------- */

.sp-field { margin-bottom: 0.95rem; }
.sp-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--sp-text);
}
.sp-field .hint { font-size: 0.76rem; color: var(--sp-text-muted); margin-top: 0.22rem; }

.sp-input, .sp-select, .sp-textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--sp-grey-300);
  border-radius: var(--sp-radius-sm);
  font-family: var(--sp-font-body);
  font-size: 0.88rem;
  background: #fff;
  color: var(--sp-text);
}
.sp-input:focus, .sp-select:focus, .sp-textarea:focus {
  outline: none;
  border-color: var(--sp-crimson);
  box-shadow: 0 0 0 3px rgba(245, 34, 85, 0.14);
}
.sp-textarea { min-height: 74px; resize: vertical; }
.sp-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* --- Messages ----------------------------------------------------------- */

.sp-note {
  padding: 0.7rem 0.9rem;
  border-radius: var(--sp-radius-sm);
  font-size: 0.86rem;
  margin-bottom: 0.95rem;
  border-left: 3px solid;
}
.sp-note.info { background: var(--sp-info-bg); border-color: var(--sp-slate); }
.sp-note.ok { background: var(--sp-ok-bg); border-color: var(--sp-ok); color: #145f38; }
.sp-note.warn { background: var(--sp-warn-bg); border-color: var(--sp-warn); color: #7a4900; }
.sp-note.error { background: var(--sp-danger-bg); border-color: var(--sp-danger); color: var(--sp-danger); }

.sp-empty {
  padding: 2.4rem 1rem;
  text-align: center;
  color: var(--sp-text-muted);
  font-size: 0.9rem;
}

/* --- Calendar ----------------------------------------------------------- */

.sp-cal { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sp-cal th {
  padding: 0.45rem 0.3rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sp-text-muted);
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-grey-100);
  text-align: center;
  min-width: 46px;
}
.sp-calendar-scroll { max-height: 70vh; overflow: auto; position: relative; }
.sp-cal thead th { position: sticky; top: 0; z-index: 2; }
.sp-cal th.person-col { text-align: left; min-width: 175px; left: 0; z-index: 4; }
.sp-cal td {
  border-bottom: 1px solid var(--sp-border);
  border-right: 1px solid var(--sp-grey-100);
  height: 30px;
  text-align: center;
  padding: 0;
}
.sp-cal td.person-col { position: sticky; left: 0; z-index: 1; text-align: left; padding: 0.35rem 0.6rem; font-weight: 500; background:var(--sp-surface); box-shadow:2px 0 3px rgba(25,25,25,.06); }
.sp-cal td.away { background: var(--sp-crimson); }
.sp-cal td.away-unpaid {
  /* Contractor unavailability is not leave; it reads differently on purpose. */
  background: repeating-linear-gradient(
    45deg, var(--sp-slate), var(--sp-slate) 3px, transparent 3px, transparent 6px
  );
}
.sp-cal td.weekend { background: var(--sp-grey-100); }

.sp-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--sp-text-muted);
  padding: 0.7rem 1.1rem;
}
.sp-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sp-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--sp-border);
}

/* --- Utility ------------------------------------------------------------ */

.muted { color: var(--sp-text-muted); }
.num { font-variant-numeric: tabular-nums; font-family: var(--sp-font-num); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 0.85rem; }
.htmx-request { opacity: 0.55; transition: opacity 0.1s; }

@media (max-width: 720px) {
  .sp-header { gap: 0.75rem; padding: 0 0.85rem; }
  .sp-user .name { display: none; }
  .sp-main { padding: 1.1rem 0.85rem 3rem; }
}

/* --- Timer -------------------------------------------------------------- */
/* Specification A.2's start/stop timer. Quiet when idle, unmistakable when
   running: someone who forgets a timer is running bills the wrong day. */

.sp-timer {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  padding: 0.75rem 1.1rem;
  margin-bottom: 1.25rem;
}
.sp-timer-disclosure {
  margin: -0.35rem 0 1.25rem;
}
.sp-timer-disclosure > summary {
  display: inline-flex;
  cursor: pointer;
  color: var(--sp-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.sp-timer-disclosure[open] > summary { margin-bottom: 0.5rem; }
.sp-timer-disclosure .sp-timer { margin-bottom: 0; }
.sp-timer.running {
  border-left: 3px solid var(--sp-crimson);
  background: linear-gradient(to right, var(--sp-danger-bg), var(--sp-surface) 40%);
}
.sp-timer-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sp-timer-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--sp-text-muted);
}
.sp-timer-detail { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.sp-timer-detail .muted { font-size: 0.78rem; }
.sp-timer-elapsed {
  font-family: var(--sp-font-num);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sp-crimson-dark);
}
.sp-timer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-crimson);
  animation: sp-pulse 2s ease-in-out infinite;
}
@keyframes sp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* Respect a reduced-motion preference: a pulsing dot is decoration. */
@media (prefers-reduced-motion: reduce) {
  .sp-timer-dot { animation: none; }
}

/* --- Cell detail -------------------------------------------------------- */

.sp-cell-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Notes and corrections are secondary cell actions. The task itself is part
   of the weekly row, matching the established Harvest/Clockify interaction. */
.sp-cell-detail {
  position: absolute;
  top: -0.34rem;
  right: -0.32rem;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--sp-grey-300);
  border-radius: 50%;
  background: #fff;
  color: var(--sp-grey-500);
  font: 700 0.8rem/1 var(--sp-font-body);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  transition: border-color 0.12s, color 0.12s, transform 0.12s;
}
.sp-cell-detail:hover,
.sp-cell-detail:focus-visible {
  border-color: var(--sp-crimson);
  color: var(--sp-crimson);
  outline: none;
  transform: translateY(-1px);
}
.sp-cell-detail.non-billable {
  border-color: var(--sp-warn);
}
.sp-cell-error {
  font-size: 0.66rem;
  color: var(--sp-danger);
  margin-top: 0.15rem;
  line-height: 1.2;
}

.sp-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--sp-border);
}
.sp-detail-head .muted { display: block; font-size: 0.8rem; }

.sp-quick-entry-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(170px, 1fr) 145px 145px minmax(180px, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  padding: 1rem 1.1rem;
}
.sp-quick-entry-form .sp-field { margin: 0; }
.sp-form-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:.8rem 1rem; align-items:end; }
.sp-form-grid label { display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; font-weight:600; }
@media (max-width: 760px) {
  .sp-quick-entry-form,.sp-form-grid { grid-template-columns: 1fr; }
}

/* --- Month calendar ---------------------------------------------------- */

.sp-month-summary {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-surface);
}
.sp-month-summary strong { font-size: 1.25rem; }
.sp-month-summary span { color: var(--sp-text-muted); }
.sp-month-calendar-head,.sp-month-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.sp-month-calendar-head span { padding:.6rem; text-align:center; font-size:.72rem; font-weight:700; color:var(--sp-text-muted); background:var(--sp-grey-100); }
.sp-month-day { min-height:118px; padding:.55rem; border-top:1px solid var(--sp-border); border-right:1px solid var(--sp-border); color:inherit; text-decoration:none; position:relative; }
.sp-month-day:hover { background:var(--sp-info-bg); }
.sp-month-day.outside { opacity:.42; background:var(--sp-grey-100); }
.sp-month-day.away { box-shadow:inset 3px 0 var(--sp-crimson); }
.sp-month-date { display:block; font-weight:700; margin-bottom:.4rem; }
.sp-month-hours { position:absolute; right:.5rem; bottom:.45rem; }
.sp-month-work-item { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.76rem; }
.sp-month-work-item + .sp-month-work-item { margin-top: 0.2rem; }
.sp-week th.selected-day { box-shadow:inset 0 -3px var(--sp-crimson); background:var(--sp-info-bg); }
.sp-people-filter { padding:1rem; border-bottom:1px solid var(--sp-border); display:flex; gap:.8rem; align-items:flex-start; flex-wrap:wrap; }
.sp-people-options { display:flex; gap:.35rem 1rem; flex-wrap:wrap; flex:1; max-height:120px; overflow:auto; }
.sp-people-options label { white-space:nowrap; font-size:.82rem; }
.sp-cal .outside { opacity:.42; }
.sp-calendar-month { padding:.35rem .5rem; white-space:nowrap; }
.sp-multiselect { position:relative; min-width:260px; }
.sp-multiselect > summary { cursor:pointer; border:1px solid var(--sp-grey-300); border-radius:var(--sp-radius-sm); background:#fff; padding:.42rem .65rem; font-size:.84rem; font-weight:600; list-style:none; }
.sp-multiselect > summary::-webkit-details-marker { display:none; }
.sp-multiselect-panel { position:absolute; z-index:15; top:calc(100% + .35rem); left:0; width:min(420px,90vw); padding:.7rem; border:1px solid var(--sp-border); border-radius:var(--sp-radius); background:#fff; box-shadow:var(--sp-shadow-lg); }
.sp-multiselect-panel .sp-people-options { margin:.6rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.sp-multiselect-panel .sp-actions { justify-content:space-between; }
@media (max-width:760px) { .sp-month-day { min-height:78px; padding:.35rem; } .sp-month-work-item { display:none; } }
@media print { .sp-header,.no-print { display:none !important; } .sp-main { max-width:none; margin:0; padding:0; } .sp-card { box-shadow:none; break-inside:avoid; } }

/* --- Approvals ---------------------------------------------------------- */

.sp-bulk-bar { position: sticky; top: 58px; z-index: 10; }
.sp-bulk-bar .sp-card-body { padding: 0.7rem 1.1rem; }

/* Per-day hours, so the shape of the week is visible rather than just its
   total. */
.sp-daybar { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sp-daybar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-grey-100);
  min-width: 62px;
}
.sp-daybar-item .d {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sp-text-muted);
  font-weight: 600;
}
.sp-daybar-item .h {
  font-family: var(--sp-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9rem;
}
.sp-daybar-item.unusual {
  border-color: var(--sp-warn);
  background: var(--sp-warn-bg);
}
.sp-daybar-item.unusual .h { color: var(--sp-warn); }

.sp-empty p { margin: 0 0 0.4rem; }
.sp-empty p:last-child { margin-bottom: 0; }


/* --- Sign out and dismissable notes ------------------------------------- */

.sp-user .name {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}
.sp-user .name:hover { color: #fff; text-decoration: underline; }

.sp-signout {
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--sp-radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}
.sp-signout:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* A confirmation that never leaves is misleading once something else has
   happened, so they fade; errors stay until dismissed. */
.sp-note.sp-dismissable {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.sp-note-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
  opacity: 0.55;
}
.sp-note-close:hover { opacity: 1; }

/* --- Weekly completion --------------------------------------------------- */

/* How much of the week has been recorded. Deliberately quiet: it is a nudge,
   not an alarm — someone mid-week is not behind, they are mid-week. */
.sp-progress {
  height: 6px;
  margin-top: 0.7rem;
  border-radius: 100px;
  background: var(--sp-grey-200);
  overflow: hidden;
}
.sp-progress span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--sp-crimson);
  transition: width 0.3s;
}
/* On the accent tile the crimson fill would disappear into the background. */
.sp-stat.accent .sp-progress { background: var(--sp-grey-200); }
.sp-stat.accent .sp-progress span { background: var(--sp-crimson); }
.sp-cal td.pending { background:repeating-linear-gradient(45deg,#f2b8c1,#f2b8c1 3px,transparent 3px,transparent 6px); }
.sp-cal td.partial { background:linear-gradient(90deg,var(--sp-crimson) 50%,transparent 50%); }
.sp-cal td.holiday { background:#fff3cd; }

/* --- People, feeds and compact dashboard lists ------------------------- */
.sp-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--sp-border); background:var(--sp-grey-100); }
.sp-avatar.placeholder { display:inline-flex; align-items:center; justify-content:center; color:var(--sp-slate); font-size:.72rem; font-weight:700; letter-spacing:.03em; }
.sp-avatar.sm { width:34px; height:34px; }
.sp-avatar.md { width:48px; height:48px; }
.sp-avatar.lg { width:88px; height:88px; font-size:1.05rem; }
.sp-photo-editor { display:flex; gap:1rem; align-items:center; padding:.8rem; border:1px solid var(--sp-border); border-radius:var(--sp-radius); }
.sp-list { display:grid; }
.sp-list-row { display:flex; gap:.75rem; align-items:flex-start; padding:.8rem 1rem; border-bottom:1px solid var(--sp-border); }
.sp-list-row:last-child { border-bottom:0; }
.sp-list-row.unread { background:var(--sp-info-bg); }
.sp-notification-dot { width:8px; height:8px; margin-top:.5rem; border-radius:50%; background:var(--sp-crimson); flex:0 0 auto; }
.sp-list-row:not(.unread) .sp-notification-dot { background:var(--sp-grey-300); }
.sp-balance-details summary { cursor:pointer; color:var(--sp-crimson-dark); }
.sp-balance-popover { min-width:210px; padding:.65rem; margin-top:.35rem; border:1px solid var(--sp-border); border-radius:var(--sp-radius-sm); background:#fff; text-align:left; font-size:.78rem; box-shadow:var(--sp-shadow); }
.sp-date-event { display:block; margin:.25rem 0; padding:.3rem; border-left:3px solid var(--sp-crimson); background:var(--sp-info-bg); color:var(--sp-text); font-size:.7rem; }
.sp-date-event span { display:block; color:var(--sp-text-muted); }
.sp-project-pill { display:inline-block; margin:.12rem .2rem .12rem 0; padding:.15rem .4rem; border-radius:100px; background:var(--sp-grey-100); font-size:.72rem; white-space:nowrap; }