/* 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-nav-more {
  position: relative;
  flex-shrink: 0;
}
.sp-nav-more > summary {
  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;
  cursor: pointer;
  list-style: none;
}
.sp-nav-more > summary::-webkit-details-marker { display: none; }
.sp-nav-more > summary::after { content: " ▾"; }
.sp-nav-more > summary:hover,
.sp-nav-more > summary.active,
.sp-nav-more[open] > summary {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.sp-nav-menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  min-width: 190px;
  padding: 0.35rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow);
}
.sp-nav-menu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text);
  font-size: 0.82rem;
  white-space: nowrap;
}
.sp-nav-menu a:hover {
  color: var(--sp-crimson-dark);
  background: var(--sp-page);
  text-decoration: none;
}

.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-user .compact-name { display: none; }

@media (max-width: 1360px) {
  .sp-user .full-name { display: none; }
  .sp-user .compact-name { display: inline; }
}

.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-code-block {
  display: block;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  background: var(--sp-bg);
  color: var(--sp-text);
  overflow-wrap: anywhere;
}

.sp-token-secret {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  background: #fff;
}

.sp-token-secret code {
  flex: 1;
  overflow-wrap: anywhere;
}

.sp-mcp-grid {
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 1fr);
}

@media (max-width: 720px) {
  .sp-mcp-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .sp-token-secret { align-items: stretch; flex-direction: column; }
}

.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, .sp-swatch { --leave-color: #64748b; }
.sp-cal td.leave-vacation, .sp-swatch.leave-vacation { --leave-color: #15803d; }
.sp-cal td.leave-sick, .sp-swatch.leave-sick { --leave-color: #b91c1c; }
.sp-cal td.away, .sp-swatch[class*="leave-"] { background: var(--leave-color); }
.sp-cal-marker { font-size: .65rem; font-weight: 700; color: #111827; text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white; }
.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 ------------------------------------------------------------ */

/* Keep accessible labels in the accessibility tree without affecting layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.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;
}
.sp-timer .hint {
  display: flex;
  gap: 0.35rem 0.7rem;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 0.45rem;
  color: var(--sp-text-muted);
  font-size: 0.76rem;
}
.sp-timer-persistence { font-weight: 600; color: var(--sp-text); }
@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-legend { display:flex; gap:.8rem; flex-wrap:wrap; color:var(--sp-text-muted); font-size:.75rem; }
.sp-month-legend span { display:inline-flex; align-items:center; gap:.3rem; }
.sp-month-legend i { width:.65rem; height:.65rem; border-radius:2px; background:var(--sp-grey-300); }
.sp-month-legend i.worked,.sp-month-progress i.worked { background:var(--sp-ok); }
.sp-month-legend i.leave,.sp-month-progress i.leave { background:#7c5ce7; }
.sp-month-legend i.missing { background:var(--sp-grey-300); }
.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 #7c5ce7; }
.sp-month-date { display:block; font-weight:700; margin-bottom:.4rem; }
.sp-month-progress { display:flex; width:100%; height:.38rem; margin:-.1rem 0 .45rem; overflow:hidden; border-radius:999px; background:var(--sp-grey-200); }
.sp-month-progress i { display:block; height:100%; }
.sp-month-absence { display:block; margin-bottom:.25rem; padding:.18rem .35rem; overflow:hidden; border-radius:var(--sp-radius-sm); background:#f0ecff; color:#50379d; font-size:.75rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.sp-month-absence small { font-size:inherit; font-weight:500; }
.sp-month-hours { position:absolute; right:.5rem; bottom:.45rem; font-size:.78rem; }
.sp-month-no-time { color:var(--sp-danger); font-size:.78rem; font-weight:600; }
.sp-month-missing { display:block; color:var(--sp-danger); font-size:.72rem; }
.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, .sp-swatch.pending {
  background: repeating-linear-gradient(45deg,var(--leave-color),var(--leave-color) 3px,transparent 3px,transparent 6px);
}
/* Size the same solid/striped fill so pending half days keep both indicators. */
.sp-cal td.half-morning, .sp-swatch.half-morning,
.sp-cal td.half-afternoon, .sp-swatch.half-afternoon,
.sp-cal td.half-hours, .sp-swatch.half-hours {
  background-image: linear-gradient(var(--leave-color),var(--leave-color));
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 50%;
  background-position: top;
}
.sp-cal td.pending.half {
  background-image: repeating-linear-gradient(45deg,var(--leave-color),var(--leave-color) 3px,transparent 3px,transparent 6px);
}
.sp-cal td.half-afternoon, .sp-swatch.half-afternoon { background-position: bottom; }
.sp-cal td.half-hours, .sp-swatch.half-hours { background-size: 100% 40%; background-position: center; }
.sp-cal td.holiday { background:#fff3cd; }

/* --- In-app help ------------------------------------------------------- */

.sp-help-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.28fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.sp-help-toc {
  position: sticky;
  top: 74px;
  padding: 1rem;
}
.sp-help-toc h2 { font-size: 1rem; }
.sp-help-toc nav { display: grid; gap: 0.2rem; }
.sp-help-toc a {
  display: block;
  padding: 0.42rem 0.55rem;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.sp-help-toc a:hover {
  background: var(--sp-grey-100);
  color: var(--sp-crimson-dark);
  text-decoration: none;
}
.sp-help-content section { scroll-margin-top: 74px; }
.sp-help-content p:first-child { margin-top: 0; }
.sp-help-content p:last-child { margin-bottom: 0; }
.sp-help-cards,
.sp-help-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.sp-help-action,
.sp-help-facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-page);
  color: var(--sp-text);
}
.sp-help-action:hover {
  border-color: var(--sp-grey-300);
  background: var(--sp-info-bg);
  text-decoration: none;
}
.sp-help-action span,
.sp-help-facts span { color: var(--sp-text-muted); font-size: 0.8rem; }
.sp-help-steps { margin: 0; padding-left: 1.45rem; }
.sp-help-steps li + li { margin-top: 0.55rem; }
.sp-help-faq details {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--sp-border);
}
.sp-help-faq details:first-child { padding-top: 0; }
.sp-help-faq details:last-child { padding-bottom: 0; border-bottom: 0; }
.sp-help-faq summary { cursor: pointer; font-weight: 700; }
.sp-help-faq p { margin: 0.55rem 0 0; color: var(--sp-text-muted); }

@media (max-width: 820px) {
  .sp-help-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-help-toc { position: static; }
  .sp-help-toc nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sp-help-cards,
  .sp-help-facts,
  .sp-help-toc nav { grid-template-columns: minmax(0, 1fr); }
}

/* --- 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; }

/* Recording leave for someone from the team calendar */
.sp-cal td[data-book-person], .sp-cal td[data-leave] { cursor: pointer; }
.sp-cal td[data-leave]:hover,
.sp-cal td[data-leave]:focus-visible { outline: 2px solid var(--sp-crimson-dark); outline-offset: -2px; }
.sp-dialog-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.sp-dialog-facts dt { color: var(--sp-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sp-dialog-facts dd { margin: 0; overflow-wrap: anywhere; }
.sp-dialog-foot form { margin: 0; }
.sp-dialog [hidden] { display: none !important; }
.sp-cal td[data-book-person]:hover,
.sp-cal td[data-book-person]:focus-visible { outline: 2px solid var(--sp-crimson-dark); outline-offset: -2px; }
.sp-dialog { width: min(480px, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--sp-border); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-lg); background: var(--sp-surface); color: var(--sp-text); }
.sp-dialog::backdrop { background: rgba(25, 25, 25, 0.35); }
.sp-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem 0.6rem; }
.sp-dialog-head h2 { margin: 0 0 0.15rem; font-size: 1.1rem; }
.sp-dialog-body { display: grid; gap: 0.75rem; padding: 0.4rem 1.1rem 1rem; }
.sp-dialog-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.8rem 1.1rem; border-top: 1px solid var(--sp-border); }
.sp-check { display: flex; align-items: center; gap: 0.45rem; font-weight: 500; }

/* Team calendar: the whole month fits the page width, so nobody scrolls
   sideways to reach the end of the month. Below tablet width the grid keeps
   a readable minimum and scrolls instead. */
.sp-cal-month { table-layout: fixed; min-width: 900px; }
.sp-cal-month th, .sp-cal-month td { min-width: 0; }
.sp-cal-month th { padding: 0.4rem 0; font-size: 0.56rem; letter-spacing: 0; overflow: hidden; }
/* Weekday labels: "MON" needs about 24px per column, "MO" about 17px, which
   the 900px minimum always leaves. Switch on the calendar's own width and its
   column count (35 or 42 days), not the screen size: 140px names + 24px days. */
.sp-calendar-scroll { container: sp-calendar / inline-size; }
.sp-cal-month .dow-short { display: none; }
@container sp-calendar (max-width: 1150px) {
  .sp-cal-month.cols-42 .dow-full { display: none; }
  .sp-cal-month.cols-42 .dow-short { display: inline; }
}
@container sp-calendar (max-width: 982px) {
  .sp-cal-month.cols-35 .dow-full { display: none; }
  .sp-cal-month.cols-35 .dow-short { display: inline; }
}
.sp-cal-month th.person-col, .sp-cal-month td.person-col { width: 140px; min-width: 140px; }
.sp-cal-month td.person-col { padding: 0.3rem 0.5rem; font-size: 0.78rem; overflow-wrap: anywhere; }