/* ==========================================================================
   Staff area — login + request dashboard
   ========================================================================== */

.staff-body { background: var(--color-offwhite); }

/* ---------- Login ---------- */
.staff-login-wrap {
  min-height: 100dvh; padding: var(--space-7) var(--space-5);
}
/* The sign-in page gets the full brand graphic (wordmark, tagline, and the
   icon strip all included, nothing cropped off) as a real hero banner up
   top, since this is the one spot with room for it — everywhere else in the
   app it's the compact mark instead. */
.login-hero { display: flex; justify-content: center; margin-bottom: var(--space-7); }
.login-hero-logo { width: 100%; max-width: 560px; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.staff-login-card {
  width: 100%; max-width: 380px; margin-inline: auto; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-7) var(--space-6);
}
.staff-login-card h1 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--space-2); }

/* Wide, horizontal version — intro/toggle on one side, the active form on
   the other, instead of everything stacked in one tall narrow column. */
.staff-login-card-wide { max-width: 760px; margin-bottom: var(--space-7); }
.staff-login-card-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .staff-login-card-grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; } }
.staff-login-card-intro h1 { text-align: left; }
.staff-login-card-form { display: flex; flex-direction: column; justify-content: center; }

/* ---------- Sign-in page upsell row — three cards above the actual sign-in
   card, pitching the other NextStep Clients services to whoever lands here. ---------- */
.login-upsell-grid {
  display: grid; gap: var(--space-5); grid-template-columns: 1fr;
  max-width: 1100px; margin: 0 auto var(--space-7);
}
@media (min-width: 800px) { .login-upsell-grid { grid-template-columns: repeat(3, 1fr); } }

/* Non-interactive "preview" of a real site, built purely with CSS transforms
   — an iframe can't be scrolled programmatically once it's a different
   origin, so this fakes the motion by animating the whole (oversized, then
   scaled-down-to-fit) frame inside a clipped box instead. pointer-events:none
   keeps it from ever being clickable or scrollable by a visitor. */
.site-preview-frame {
  position: relative; width: 100%; height: 220px; overflow: hidden;
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-offwhite); margin-bottom: var(--space-4);
}
.site-preview-scaler {
  position: absolute; top: 0; left: 0; width: 1200px;
  transform: scale(0.29); transform-origin: top left; pointer-events: none;
}
.site-preview-frame iframe {
  display: block; width: 1200px; height: 3400px; border: 0;
  animation: sitePreviewScroll 60s ease-in-out infinite;
}
/* Fast down through the site itself, a long slow pass through the request
   form (the actual reason someone would want this website), on down to the
   true bottom of the page, a short hold there, then back up to the top to
   start the loop again. */
@keyframes sitePreviewScroll {
  0% { transform: translateY(0); }
  15% { transform: translateY(-500px); }
  55% { transform: translateY(-1400px); }
  75%, 88% { transform: translateY(-2450px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-preview-frame iframe { animation: none; }
}

/* ---------- Sticky header + countdown banner as one unit ----------
   Both pieces used to be independently `position: sticky; top: 0`, which
   made them fight for the exact same spot instead of stacking — the banner
   never actually followed the scroll below the topbar. Wrapping both in one
   sticky container fixes that with no offset math, regardless of how tall
   the topbar renders (it wraps on narrow screens). */
.sticky-header-group { position: sticky; top: 0; z-index: 50; }

.grace-countdown-banner {
  background: #c0392b; color: #fff;
  text-align: center; font-weight: 800; letter-spacing: 0.02em;
  font-size: clamp(1rem, 2.2vw, 1.35rem); padding: var(--space-3) var(--space-4);
  text-transform: uppercase;
}
.grace-countdown-banner #graceCountdownText { font-size: 1.15em; }

/* Shown right under the sticky header while a countdown is running — points
   at Download Backup (CSV) so it isn't missed, plus the Web3Forms fallback. */
.backup-guidance-callout { background: #eaf1fb; border-bottom: 1px solid #c7dcf5; padding: var(--space-3) 0; }
.backup-guidance-inner { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.backup-guidance-arrow {
  font-size: 1.4rem; font-weight: 800; color: var(--color-primary); line-height: 1;
  animation: guidanceBounce 1.4s ease-in-out infinite;
}
@keyframes guidanceBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.backup-guidance-text { flex: 1 1 320px; font-size: var(--fs-sm); color: var(--color-charcoal-soft); }
.backup-guidance-btn { min-height: 36px; padding: 0.4rem 0.9rem; font-size: var(--fs-xs); white-space: nowrap; }
.backup-guidance-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- Dashboard shell ---------- */
.staff-topbar {
  background: var(--color-charcoal); color: #fff;
  padding-block: var(--space-4);
}
.staff-topbar-inner { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.staff-topbar .brand { color: #fff; font-size: var(--fs-md); flex-shrink: 0; margin-top: 2px; }
.staff-role-badge {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.12); padding: 0.3rem 0.7rem; border-radius: 999px; color: #cfe0f5;
  text-align: center;
}

/* The topbar carries a lot of buttons. They're sorted into a few vertical
   stacks of related actions, divided by a faint rule, instead of one long
   run of pills across the top. Undo sits on its own, pinned to the corner. */
.staff-topbar-actions {
  display: flex; align-items: flex-start; gap: 0;
  flex-wrap: wrap; justify-content: flex-end;
  padding-right: 96px; /* clear space for the pinned Undo button */
}
.topbar-group {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 2px var(--space-4);
}
.topbar-group + .topbar-group { border-left: 1px solid rgba(255,255,255,0.28); }
.topbar-group:first-child { padding-left: 0; }
.topbar-group:last-of-type { padding-right: var(--space-2); }

.staff-topbar-actions .btn {
  position: relative;
  min-height: 30px !important;
  padding: 0.28rem 0.6rem !important;
  font-size: var(--fs-xs) !important;
  line-height: 1.15;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  border-width: 1px;
}
.topbar-group .staff-role-badge { margin-bottom: 2px; }

/* Undo: on its own in the top-right corner. The whole header is sticky, so
   it stays in reach the entire way down the page. Dim and quiet when there
   is nothing to undo; turns solid yellow the moment there is. */
#undoActionBtn {
  position: absolute; top: 0; right: 0;
  background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.25) !important;
  justify-content: center !important; text-align: center !important;
  font-weight: 700 !important;
}
#undoActionBtn:not([disabled]) {
  background: #f5b301; color: #1f2430;
  border-color: #f5b301 !important;
  box-shadow: 0 0 0 2px rgba(245,179,1,0.35);
}
#undoActionBtn:not([disabled]):hover { background: #ffc424; border-color: #ffc424 !important; }

@media (max-width: 900px) {
  .staff-topbar-actions { padding-right: 0; }
  #undoActionBtn { position: static; }
  .topbar-group + .topbar-group { border-left: none; }
}

.staff-main { padding-block: var(--space-6) var(--space-9); }

.staff-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}

/* Website Analytics + Money side by side — there's room, and it puts the
   whole top-line picture (traffic + earnings) on one screen at once. */
.two-panel-row { display: flex; gap: var(--space-5); margin-bottom: var(--space-5); align-items: stretch; }
.two-panel-row > .analytics-panel { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
@media (max-width: 900px) { .two-panel-row { flex-direction: column; } }
.analytics-panel { display: none; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.analytics-panel.show { display: flex; }
.analytics-stats { display: flex; flex-wrap: wrap; gap: var(--space-7); }
.analytics-num { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 700; color: var(--color-primary); }
.analytics-label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

.staff-view-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.staff-view-toggle button {
  border: 0; background: #fff; padding: 0.55rem 1rem; font-weight: 700; font-size: var(--fs-sm); color: var(--color-text-muted);
}
.staff-view-toggle button.active { background: var(--color-primary); color: #fff; }
.view-count { margin-left: 4px; opacity: 0.75; }
.view-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--fs-xs); }
.view-badge:empty { display: none; }
.view-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.view-badge-scheduled::before { background: var(--color-danger); }
.view-badge-requested::before { background: var(--color-accent-dark); }

.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip {
  border: 1.5px solid var(--color-border); background: #fff; border-radius: 999px;
  padding: 0.45rem 0.9rem; font-size: var(--fs-xs); font-weight: 700; color: var(--color-charcoal-soft);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.filter-group { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-group-label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.field-label-edit-btn {
  border: 0; background: none; color: var(--color-text-muted); cursor: pointer; padding: 0 2px;
  font-size: 11px; vertical-align: middle; opacity: 0.6;
}
.field-label-edit-btn:hover { opacity: 1; color: var(--color-primary); }
.field-label-edit-form { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: normal; }
.field-label-input { min-height: 26px; padding: 0.15rem 0.4rem; font-size: var(--fs-xs); font-weight: 400; }

.cm-expense-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.cm-expense-row .cm-expense-category { flex: 1.1; min-width: 0; }
.cm-expense-row .cm-expense-amount { flex: 0.8; min-width: 0; }
.cm-expense-row .cm-expense-receipt { flex: 1.3; min-width: 0; font-size: var(--fs-xs); }
.cm-expense-remove {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-danger-bg); color: var(--color-danger); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cm-expense-remove:hover { background: var(--color-danger); color: #fff; }

.report-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.report-table th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--color-border);
}
.report-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.report-table tbody tr:last-child td { border-bottom: 0; }
.report-table td.num, .report-table th.num { text-align: right; }

.job-expenses { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.job-expenses a { color: var(--color-primary); }

.updates-unread-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--color-charcoal);
}
@keyframes updatesBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.18); }
}
.updates-unread-badge.blinking { animation: updatesBlink 1.1s ease-in-out infinite; }

/* Chat-style "What's New" panel — messages feel like a texting thread rather
   than a plain changelog list, per the "make it look neat, get crafty" ask. */
.updates-modal-card { display: flex; flex-direction: column; max-height: 82vh; }
.updates-feed { background: var(--color-offwhite); flex: 1; }
.update-entry { display: flex; margin-bottom: var(--space-3); }
.update-entry:last-child { margin-bottom: 0; }
.update-entry-bubble {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  border-top-left-radius: 4px; padding: var(--space-3) var(--space-4); max-width: 100%;
  box-shadow: var(--shadow-sm);
}
.update-entry.unread .update-entry-bubble { border-color: var(--color-primary); background: #f2f7ff; }
.update-entry-message { white-space: pre-wrap; line-height: 1.5; }
.update-entry-date { margin-top: 6px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.update-entry-new {
  display: inline-block; background: var(--color-primary); color: #fff; font-weight: 700;
  font-size: 10px; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; margin-left: 4px;
}
.updates-compose {
  display: flex; gap: var(--space-2); align-items: flex-end; padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border); background: #fff;
  border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
}
.updates-compose textarea {
  flex: 1; resize: none; padding: 0.6rem 0.9rem; border: 1px solid var(--color-border);
  border-radius: 999px; font-family: inherit; font-size: var(--fs-sm); line-height: 1.4; max-height: 100px;
}
.updates-compose textarea:focus { outline: none; border-color: var(--color-primary); }
.updates-send-btn {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: filter var(--duration-fast) var(--ease-out);
}
.updates-send-btn:hover { filter: brightness(1.1); }
.updates-send-btn svg { width: 18px; height: 18px; }

.sort-select { min-height: 40px; padding: 0.4rem 2.2rem 0.4rem 0.8rem; font-size: var(--fs-sm); }

.chip-edit-wrap { position: relative; display: inline-flex; }
.chip-delete-btn {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-danger); color: #fff; border: 2px solid #fff; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  animation: chipDeletePulse 1.4s ease-in-out infinite;
}
@keyframes chipDeletePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214,69,55,0.45); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(214,69,55,0); }
}

.new-category-form { display: inline-flex; gap: 6px; align-items: center; }
.new-category-input {
  min-height: 34px; padding: 0.35rem 0.6rem; font-size: var(--fs-xs);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); width: 160px;
}

/* ---------- Request list ---------- */
.request-list { display: grid; gap: var(--space-4); }
.request-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: grid; gap: var(--space-3);
  border-left: 4px solid var(--color-border);
}
.request-card[data-status="new"] { border-left-color: var(--color-primary-light); }
.request-card[data-status="contacted"] { border-left-color: var(--color-star); }
.request-card[data-status="quoted"] { border-left-color: #8a5cd6; }
.request-card[data-status="scheduled"] { border-left-color: var(--color-success); }
.request-card[data-status="done"] { border-left-color: var(--color-text-muted); opacity: 0.7; }
.request-card[data-status="cancelled"] { border-left-color: var(--color-danger); opacity: 0.6; }
.request-card[data-status="no_answer"] { border-left-color: var(--color-star); opacity: 0.75; }
.request-card[data-priority="1"] { box-shadow: 0 0 0 2px rgba(217,104,47,0.35); }

.request-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.request-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-md); color: var(--color-charcoal); }
.request-sub { font-size: var(--fs-sm); color: var(--color-text-muted); }
.request-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700;
  padding: 0.25rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em;
}
.badge-status-new { background: #eaf1fb; color: var(--color-primary); }
.badge-status-contacted { background: #fdf3e2; color: #a3720c; }
.badge-status-quoted { background: #f1eafc; color: #6a3fb8; }
.badge-status-scheduled { background: var(--color-success-bg); color: var(--color-success); }
.badge-status-done { background: #eef0f2; color: var(--color-text-muted); }
.badge-status-cancelled { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-status-no_answer { background: #fdf3e2; color: #a3720c; }
.badge-priority { background: #fdece2; color: var(--color-accent-dark); }
.badge-category { background: #fff4d6; color: #9a6b00; }
.badge-city { background: #eef0f2; color: var(--color-charcoal-soft); }
.badge-value { background: var(--color-success-bg); color: var(--color-success); }

/* Quick status pills, right on the card */
.quick-status-row { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-status-pill {
  border: 1.5px solid var(--color-border); background: #fff; border-radius: 999px;
  padding: 0.3rem 0.75rem; font-size: var(--fs-xs); font-weight: 700; color: var(--color-charcoal-soft);
  text-transform: uppercase; letter-spacing: 0.02em; transition: all var(--duration-fast) var(--ease-out);
}
.quick-status-pill:hover { border-color: var(--color-primary-light); color: var(--color-primary); }
.quick-status-pill.active { background: var(--color-charcoal); border-color: var(--color-charcoal); color: #fff; cursor: default; }

.request-meta { display: grid; gap: var(--space-2); grid-template-columns: 1fr; font-size: var(--fs-sm); color: var(--color-text); }
@media (min-width: 640px) { .request-meta { grid-template-columns: repeat(2, 1fr); } }
.request-meta div strong { color: var(--color-text-muted); font-weight: 600; margin-right: 4px; }
.request-issue { font-size: var(--fs-sm); color: var(--color-text); background: var(--color-offwhite); border-radius: var(--radius-sm); padding: var(--space-3); }

.meta-link { color: var(--color-primary); font-weight: 600; }
.meta-link:hover { text-decoration: underline; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: #fff; color: var(--color-text-muted); vertical-align: middle;
  transition: all var(--duration-fast) var(--ease-out);
}
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn:hover { border-color: var(--color-primary-light); color: var(--color-primary); }
.icon-btn.copied { border-color: var(--color-success); color: var(--color-success); }

.request-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.request-actions .btn { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--fs-sm); }

.btn-danger-outline { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger-outline:hover { background: var(--color-danger-bg); }
.btn-danger-outline.btn-danger-armed { background: var(--color-danger); color: #fff; }

.empty-state {
  text-align: center; padding: var(--space-9) var(--space-5); color: var(--color-text-muted);
  background: #fff; border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
}

/* ---------- Calendar view ---------- */
.calendar-grid { background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.calendar-head-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 1px; }
.calendar-head { background: var(--color-charcoal); color: #fff; padding: var(--space-2); text-align: center; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 1px; position: relative; }
.calendar-week:last-child { margin-bottom: 0; }
.calendar-cell { background: #fff; min-height: 96px; padding: var(--space-2); transition: background var(--duration-fast) var(--ease-out), outline var(--duration-fast) var(--ease-out); }
.calendar-cell-today { background: #eaf1fb; }
.calendar-cell-today .calendar-date { color: var(--color-primary); font-weight: 800; }
.calendar-cell.empty { background: var(--color-offwhite); }
.calendar-cell.dragover { background: #eaf1fb; outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.calendar-cell-blocked { background: #f1e6fb; }
.calendar-cell-blocked .calendar-date { color: #7b2fd6; font-weight: 800; }
.calendar-blocked-label {
  font-size: 0.65rem; font-weight: 700; color: #7b2fd6; text-transform: uppercase; letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendar-cell-marking { cursor: pointer; }
.calendar-cell-marking:hover { outline: 2px dashed #7b2fd6; outline-offset: -2px; }
.calendar-cell-range-start { background: #f1e6fb; outline: 2px dashed #7b2fd6; outline-offset: -2px; }
.calendar-cell-range-start .calendar-blocked-label { color: #7b2fd6; }
.calendar-date { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); }
.calendar-cell-chips { display: flex; flex-direction: column; gap: 4px; }
.calendar-job {
  font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: #eaf1fb; color: var(--color-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab;
}
.calendar-job:active { cursor: grabbing; }
.calendar-job.dragging { opacity: 0.4; }
.calendar-job.status-scheduled { background: #eaf1fb; color: var(--color-primary); }
.calendar-job.status-done { background: var(--color-success-bg); color: var(--color-success); }
.calendar-job.requested { background: var(--color-danger-bg); color: var(--color-danger); }
.calendar-job.priority { box-shadow: inset 0 0 0 1.5px var(--color-accent-dark); }
.calendar-job-staff { font-weight: 700; color: #d97706; }
/* A job handed off and accepted elsewhere — its own color, never used for
   anything else, so it's never mistaken for one of your own statuses. Not
   draggable, since it's the other business running it now. */
.calendar-job.shared-out, .calendar-bar.shared-out { background: #ccfbf1; color: #0d9488; cursor: default; }
.calendar-job-shared { font-weight: 700; color: #0d9488; }

/* A small round badge per social link — Facebook, Instagram, Google
   reviews, whatever they've added — instead of a row of text buttons, so a
   profile with several links still reads at a glance. */
.social-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  font-size: 0.7rem; font-weight: 800; text-decoration: none; flex-shrink: 0;
}
.social-icon-btn:hover { opacity: 0.85; }

/* A multi-day job draws as one solid bar spanning every day it covers,
   instead of repeating as a separate chip per day — makes it easy to see
   at a glance how far out someone is booked, and who overlaps with whom. */
.calendar-bar {
  position: absolute; z-index: 2; display: flex; align-items: center;
  font-size: 0.7rem; font-weight: 700; padding: 0 6px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab; color: #fff;
}
.calendar-bar:active { cursor: grabbing; }
.calendar-bar.dragging { opacity: 0.4; }
.calendar-bar.status-scheduled { background: var(--color-primary); }
.calendar-bar.status-done { background: var(--color-success); }
.calendar-bar.requested { background: var(--color-danger); }
.calendar-bar.priority { box-shadow: inset 0 0 0 1.5px #fff; }

.calendar-trash {
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border);
  background: #fff; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
}
.calendar-trash svg { width: 18px; height: 18px; }
.calendar-trash.dragover { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }
.calendar-trash-confirm {
  display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm);
  background: var(--color-danger-bg); border: 1px solid #f3c9c3; border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.calendar-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-bottom: var(--space-3); font-size: var(--fs-xs); font-weight: 700; color: var(--color-charcoal-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.calendar-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.calendar-legend-dot.requested { background: var(--color-danger); }
.calendar-legend-dot.scheduled { background: var(--color-primary); }
.calendar-legend-dot.done { background: var(--color-success); }
.calendar-legend-dot.blocked { background: #7b2fd6; }

/* Its own boxed area, set apart from the status legend above it, so "what
   color means what status" and "whose job is this" never get read as the
   same kind of information. */
#staffColorLegend {
  background: #fff7ed; border: 1px solid #fde5c7; border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
}
.calendar-legend-label { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--color-charcoal-soft); }
.calendar-legend-star { color: #d97706; font-size: 0.9rem; line-height: 1; }

/* ---------- Edit modal ---------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(32,36,43,0.55); z-index: 200;
  align-items: flex-start; justify-content: center; padding: var(--space-5); overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-card {
  background: #fff; border-radius: var(--radius-lg); max-width: 640px; width: 100%;
  margin-block: var(--space-7); box-shadow: var(--shadow-lg);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.modal-head h2 { margin-bottom: 0; font-size: var(--fs-lg); }
.modal-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff; display: flex; align-items: center; justify-content: center; }
.modal-body { padding: var(--space-5); display: grid; gap: var(--space-4); max-height: 70vh; overflow-y: auto; }
.modal-footer { padding: var(--space-5); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }

.loading-note { text-align: center; padding: var(--space-6); color: var(--color-text-muted); }

/* Tablet & phone: force the same 2-column request-meta as desktop — the
   shrink-to-fit zoom itself lives in style.css and covers this page too. */
@media (max-width: 1199px) {
  .request-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Quote / Invoice panel (inside the Edit modal) ---------- */
.quote-panel {
  border-top: 2px solid var(--color-border);
  margin-top: var(--space-3); padding-top: var(--space-4);
}
/* When the panel is hosted in its own dedicated sheet, the modal header
   already names it — drop the divider and the extra "Quote / Invoice" line. */
.quote-panel-sheet { border-top: none; margin-top: 0; padding-top: 0; }
.quote-panel-sheet .quote-panel-head { display: none; }
.quote-panel-head {
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-md);
  margin-bottom: var(--space-3);
}
.quote-banner {
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-3);
}
/* ---- Follow-up reminders ---- */
.rem-add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rem-add #rem_title { flex: 1 1 200px; min-height: 36px; padding: 0.35rem 0.6rem; font-size: var(--fs-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rem-add #rem_date { min-height: 36px; padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rem-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.rem-list-done { opacity: 0.6; }
.rem-done-head { margin-top: var(--space-4); font-weight: 700; font-size: var(--fs-sm); color: var(--color-text-muted); }
.rem-item {
  display: flex; align-items: flex-start; gap: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
.rem-item.rem-overdue { border-color: var(--color-danger); background: var(--color-danger-bg); }
.rem-item.rem-today { border-color: var(--color-accent); background: #fdf1e7; }
.rem-check { padding-top: 2px; }
.rem-main { flex: 1; min-width: 0; }
.rem-title { font-weight: 600; font-size: var(--fs-sm); }
.rem-date { font-weight: 400; color: var(--color-text-muted); font-size: var(--fs-xs); }
.rem-cust { font-size: var(--fs-xs); color: var(--color-text-muted); }
.rem-note { font-size: var(--fs-xs); color: var(--color-charcoal-soft); margin-top: 2px; }
.rem-del { border: none; background: none; font-size: 1.1rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; }
.rem-del:hover { color: var(--color-danger); }
.calendar-reminder {
  font-size: 0.68rem; background: #fff3d6; border: 1px solid #f0d79a; color: #7a5c14;
  border-radius: 4px; padding: 1px 4px; margin-bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ---- Job photos panel (Edit window) ---- */
.job-photos-panel {
  border-top: 2px solid var(--color-border);
  margin-top: var(--space-3); padding-top: var(--space-4);
}
.job-photos-panel-modal { border-top: none; margin-top: 0; padding-top: 0; }
.job-photos-panel-modal .quote-panel-head { display: none; }
.jp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.jp-thumb { position: relative; }
.jp-thumb img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: block;
}
.jp-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; line-height: 1;
  border: none; border-radius: 50%; background: rgba(32,36,43,0.75); color: #fff;
  font-size: 0.85rem; cursor: pointer;
}
.jp-del:hover { background: var(--color-danger); }
.jp-meta { font-size: 0.62rem; color: var(--color-text-muted); margin-top: 2px; line-height: 1.2; }
.jp-add { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.jp-add .jp-cap {
  flex: 1 1 160px; min-height: 34px; padding: 0.35rem 0.6rem; font-size: var(--fs-xs);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.jp-warn {
  background: var(--color-danger-bg); border: 1px solid #f2c9c4; color: var(--color-danger);
  font-size: var(--fs-xs); padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); margin-bottom: var(--space-3);
}
.jp-section {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.jp-section-key { border-color: var(--color-accent); background: #fdf6f0; }
.jp-sec-head { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-primary-dark); }
.jp-sec-count {
  display: inline-block; min-width: 18px; text-align: center; font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 700; background: var(--color-offwhite); border-radius: 999px; padding: 0 5px; margin-left: 4px;
}
.jp-sec-guide { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0.25rem 0 var(--space-3); }
.jp-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: var(--space-2); }
.jp-chip {
  border: 1px solid var(--color-border); background: #fff; border-radius: 999px;
  padding: 0.2rem 0.6rem; font-size: 0.7rem; color: var(--color-text-muted); cursor: pointer;
}
.jp-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.jp-chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---- Quote cards across the top of the sheet ---- */
.q-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.q-tab {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; padding: 0.4rem 1.6rem 0.4rem 0.7rem; cursor: pointer; min-width: 110px;
}
.q-tab.active { border-color: var(--color-primary); background: #eef4fc; }
.q-tab-n { font-weight: 700; font-size: var(--fs-xs); }
.q-tab-meta { font-size: 0.68rem; color: var(--color-text-muted); }
.q-tab-when { font-size: 0.62rem; color: var(--color-text-muted); }
.q-tab-del {
  position: absolute; top: 2px; right: 5px; font-size: 0.9rem; line-height: 1;
  color: var(--color-text-muted);
}
.q-tab-del:hover { color: var(--color-danger); }
.q-tab-new, .q-tab-undo { justify-content: center; align-items: center; color: var(--color-primary); font-weight: 600; padding: 0.4rem 0.8rem; }
.q-tab-undo { color: var(--color-charcoal-soft); }
.q-tab-undo.is-empty { opacity: 0.4; }
.q-addsec { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); }
.q-addsec em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); }
.q-addsec select {
  min-height: 32px; padding: 0.3rem 1.8rem 0.3rem 0.6rem; font-size: var(--fs-xs);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: #fff;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b4f8c' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.4rem center;
}
.q-l-extra .q-l-custexp {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-text-muted); white-space: nowrap;
}
.q-line .q-l-field.q-l-cost { width: 130px; }
.q-line .q-l-field.q-l-cost em { color: var(--color-accent-dark); }
.q-line .q-l-field.q-l-supplier { width: 150px; }
.q-line .q-l-field.q-l-supplier em { color: var(--color-accent-dark); }
.q-line .q-l-field.q-l-partno { width: 130px; }
.q-line .q-l-field.q-l-partno em { color: var(--color-accent-dark); }

/* "Bought this before?" past-purchase suggestions under a line */
.q-l-hist {
  width: 100%; margin-top: -2px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  overflow: hidden;
}
.q-l-hist-head {
  padding: 0.4rem 0.6rem; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted); background: var(--color-offwhite);
  border-bottom: 1px solid var(--color-border);
}
.q-l-hist-item {
  display: block; width: 100%; text-align: left; border: none; background: #fff;
  padding: 0.5rem 0.6rem; cursor: pointer; border-bottom: 1px solid var(--color-border);
}
.q-l-hist-item:last-child { border-bottom: none; }
.q-l-hist-item:hover { background: #eaf1fb; }
.q-l-hist-desc { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--color-charcoal); }
.q-l-hist-meta { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-top: 2px; }
.q-ro-line.q-private { color: var(--color-accent-dark); font-size: var(--fs-xs); border-bottom: none; }
.pay-link-row .pay-label, .pay-link-row .pay-url { min-height: 40px; }

/* ---- Section-grouped editor: a bold header per category, rows under it ---- */
#q_sections { margin-top: var(--space-2); }
.q-sec {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); overflow: hidden;
}
.q-sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--color-offwhite); padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-md);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary-dark);
}
.q-sec-sub { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--color-charcoal); }
.q-sec-rows { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.q-sec-rows .q-line:not(:last-child) { border-bottom: 1px dashed var(--color-border); padding-bottom: var(--space-3); }
.q-sec-add {
  width: 100%; border: none; border-top: 1px dashed var(--color-border);
  background: #fff; color: var(--color-primary); font-weight: 600; font-size: var(--fs-xs);
  padding: 0.5rem; cursor: pointer;
}
.q-sec-add:hover { background: #eaf1fb; }

.q-line { display: flex; flex-direction: column; gap: var(--space-2); }
.q-l-main, .q-l-extra { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.q-line select, .q-line input[type="text"], .q-line input[type="number"] {
  min-height: 34px; padding: 0.3rem 0.5rem; font-size: var(--fs-xs);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: #fff;
}
.q-l-main .q-l-desc { flex: 1 1 150px; min-width: 0; }
/* Qty / Price / Bought-by each carry a tiny fixed label so there's no
   guessing which box is which. */
.q-line .q-l-field { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.q-line .q-l-field.q-l-qty-wrap { width: 64px; }
.q-line .q-l-field.q-l-price-wrap { width: 92px; }
.q-line .q-l-field.q-l-bought { width: 168px; }
.q-line .q-l-field em, .q-l-move em {
  font-style: normal; font-size: 0.7rem; font-weight: 600;
  color: var(--color-text-muted); flex-shrink: 0; white-space: nowrap;
}
.q-line .q-l-field input, .q-line .q-l-field select, .q-l-move select { width: 100%; min-width: 0; }
.q-l-move { display: inline-flex; align-items: center; gap: 4px; }
.q-l-move select { width: auto; min-width: 84px; }
/* Make every picker obviously a dropdown — chevron + room for it. */
.q-line select {
  appearance: none; -webkit-appearance: none;
  padding-right: 1.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b4f8c' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.4rem center;
}
.q-l-extra { font-size: 0.8rem; }
.q-l-extra .q-l-pocket, .q-l-extra .q-l-opt {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-text-muted); white-space: nowrap;
}
.q-l-add, .q-line .q-l-del {
  border: 1px solid var(--color-border); background: #fff; border-radius: var(--radius-sm);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; flex: 0 0 28px;
}
.q-l-add { margin-left: auto; font-weight: 700; }
.q-l-add:hover { background: #eaf1fb; color: var(--color-primary); border-color: var(--color-primary); }
.q-line .q-l-del:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.q-totals, .q-ro { margin-top: var(--space-3); }
/* Receipt-style grouped view (sent / approved / invoiced). */
.q-ro-group { margin-bottom: var(--space-3); }
.q-ro-cat {
  display: flex; justify-content: space-between; font-weight: 700;
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-primary-dark); border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.25rem; margin-bottom: 0.25rem;
}
.q-ro-line.q-ro-bullet { border-bottom: none; padding: 0.15rem 0 0.15rem 0.5rem; color: var(--color-text); }
.q-ro-line {
  display: flex; justify-content: space-between; font-size: var(--fs-sm);
  padding: 0.3rem 0; border-bottom: 1px dashed var(--color-border);
}
.q-ro-line.q-ro-total {
  border-bottom: none; border-top: 2px solid var(--color-charcoal);
  margin-top: 0.2rem; padding-top: 0.5rem; font-weight: 700; font-size: var(--fs-base);
  color: var(--color-primary-dark);
}
.q-tax-toggle {
  display: inline-block; margin-top: var(--space-2); padding: 0.25rem 0.6rem;
  border: 1px dashed var(--color-border); border-radius: 999px; background: #fff;
  font-size: var(--fs-xs); color: var(--color-text-muted); cursor: pointer;
}
.q-tax-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.q-tax-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 0.35rem; }
.q-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.q-link-row { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.q-link-row input {
  flex: 1; min-height: 36px; padding: 0.4rem 0.6rem; font-size: var(--fs-xs);
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: #f8fbff;
}
@media (max-width: 700px) {
  .q-line { grid-template-columns: 1fr 1fr; }
  .q-line .q-l-desc { grid-column: 1 / -1; }
}

/* ---- Toolbar search: results dropdown under the search box ---- */
.lookup-results {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: min(460px, 90vw); max-height: 360px; overflow-y: auto;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(15, 42, 74, 0.18);
}
.lookup-item {
  display: block; width: 100%; text-align: left; border: none; background: #fff;
  padding: 0.55rem 0.8rem; cursor: pointer; border-bottom: 1px solid var(--color-border);
}
.lookup-item:last-child { border-bottom: none; }
.lookup-item:hover { background: #eaf1fb; }
.lookup-item-name { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--color-charcoal); }
.lookup-item-phone { font-weight: 500; color: var(--color-text-muted); }
.lookup-item-meta { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.lookup-empty { padding: 0.75rem 0.8rem; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Job Photos: full-screen in-app takeover (behaves like its own page) ---- */
.jobphotos-page {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-offwhite);
  display: flex; flex-direction: column;
}
.jobphotos-page[hidden] { display: none; }
.jobphotos-page-bar {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-charcoal); color: #fff;
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}
.jobphotos-page-bar h2 { color: #fff; }
.jobphotos-page-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5) var(--space-4) var(--space-9); }
.jobphotos-page-inner { max-width: 900px; margin: 0 auto; }

/* ---- My Team: same full-screen in-app takeover pattern as Job Photos ---- */
.team-page {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-offwhite);
  display: flex; flex-direction: column;
}
.team-page[hidden] { display: none; }
.team-page-bar {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-charcoal); color: #fff;
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}
.team-page-bar h2 { color: #fff; }
.team-page-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5) var(--space-4) var(--space-9); }
.team-page-inner { max-width: 720px; margin: 0 auto; }
/* The Team Logins page runs wide so a whole crew fits with little or no
   scrolling — dense cards, grouped into position sections like quote lines. */
#teamLoginsPage .team-page-inner { max-width: 1180px; }

.team-section { margin-bottom: var(--space-5); }
.team-section-head { display: flex; align-items: center; gap: var(--space-2); padding-bottom: 4px; margin-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); }
.team-section-head > span:first-child { font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-charcoal); }
.team-section-count { background: var(--color-offwhite); border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; padding: 0 7px; color: var(--color-text-muted); }
.team-section-del { margin-left: auto; border: 1px solid var(--color-border); background: #fff; color: var(--color-danger); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; line-height: 1; font-size: 14px; }
.team-section-del:hover { background: var(--color-danger-bg); }

.team-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.team-card {
  border: 1px solid var(--color-border); border-left: 3px solid #d97706;
  border-radius: var(--radius-md); background: #fff;
  padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 6px;
}
.team-card-top { display: flex; align-items: center; gap: var(--space-2); }
.team-card-dot { width: 9px; height: 9px; border-radius: 50%; background: #d97706; flex-shrink: 0; }
.team-card-id { min-width: 0; }
.team-card-id strong { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-card-id span { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-card select, .team-card input[type="text"], .team-card input[type="number"] { font: inherit; font-size: var(--fs-xs); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 3px 6px; background: #fff; }
.team-card-pos { width: 100%; }
.team-card-perms { display: flex; flex-direction: column; gap: 2px; }
.team-card-perms label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--color-charcoal-soft); }
.team-card-perms input { margin: 0; flex-shrink: 0; }
.team-card-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.team-card-pay select { flex: 1 1 auto; min-width: 0; }
.team-card-pay span { display: inline-flex; align-items: center; gap: 3px; }
.team-card-pay input[type="number"] { width: 62px; }
.team-card-actions { display: flex; gap: 4px; }
.team-card-actions .btn { flex: 1 1 auto; min-height: 26px !important; padding: 2px 4px !important; font-size: var(--fs-xs) !important; }
.team-card-remove { color: var(--color-danger) !important; }
.team-card-paysave { min-height: 24px !important; padding: 2px 8px !important; font-size: var(--fs-xs) !important; }

.team-card-exp { width: 100%; }
.team-card-explabel {
  margin-left: auto; flex-shrink: 0; align-self: flex-start;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  background: #e6f0ff; color: #1b4f8c; border: 1px solid #c3dbf5; border-radius: 999px; padding: 1px 6px;
}
.team-exp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.team-exp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); background: var(--color-offwhite); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 2px 4px 2px 10px;
}
.team-exp-chip button { border: none; background: none; color: var(--color-danger); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }

.team-addbar { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-4); }
.team-addbar-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.team-addbar-row input, .team-addbar-row select { flex: 1 1 170px; font: inherit; font-size: var(--fs-sm); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; background: #fff; }
.team-addbar-row button { flex: 0 0 auto; }

/* ---- Team member scorecard page ---- */
#staffDetailPage .team-page-inner { max-width: 900px; }
.sd-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.sd-head-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-tag { font-size: var(--fs-xs); font-weight: 700; background: var(--color-offwhite); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 10px; }
.sd-tag-exp { background: #e6f0ff; color: #1b4f8c; border-color: #c3dbf5; }
.sd-periodbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.sd-periodbar-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.sd-period-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sd-period { font: inherit; font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--color-border); background: #fff; color: var(--color-charcoal); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.sd-period.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.sd-custom { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.sd-custom label { font-size: var(--fs-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.sd-custom input { font: inherit; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 8px; }
.sd-scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-5); }
.sd-stat { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; padding: var(--space-3); text-align: center; }
.sd-stat-num { font-size: var(--fs-xl); font-weight: 800; color: var(--color-primary-dark); line-height: 1.1; }
.sd-stat-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin-top: 4px; }
.sd-stat-sub { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }
.sd-block { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-4); }
.sd-block h4 { margin: 0 0 var(--space-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-charcoal); }
.sd-mix-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 3px 0; border-bottom: 1px dashed var(--color-border); }
.sd-jobs { display: flex; flex-direction: column; gap: var(--space-2); }
.sd-job { display: flex; justify-content: space-between; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: #fff; }
.sd-job-main { min-width: 0; }
.sd-job-main strong { display: block; font-size: var(--fs-sm); }
.sd-job-main span { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.sd-job-meta { flex-shrink: 0; text-align: right; font-size: var(--fs-xs); color: var(--color-text-muted); }
.sd-compare-wrap { overflow-x: auto; }
.sd-compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sd-compare th, .sd-compare td { border: 1px solid var(--color-border); padding: 6px 10px; text-align: center; }
.sd-compare th { background: var(--color-offwhite); font-size: var(--fs-xs); }
.sd-compare .sd-metric { text-align: left; font-weight: 700; background: var(--color-offwhite); white-space: nowrap; }
.sd-compare .sd-best { background: #e6f4ea; font-weight: 800; color: #1e7e34; }
.sd-compare-rm { border: none; background: none; color: var(--color-danger); cursor: pointer; font-size: 13px; line-height: 1; }
.sd-compare-add { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.sd-compare-add select { flex: 1 1 200px; font: inherit; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; background: #fff; }

/* ---- Ideas & Problems page ---- */
.feedback-note {
  background: #eef4ff; border: 1px solid #cfe0f5; border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-5); font-size: var(--fs-sm);
  color: var(--color-charcoal-soft);
}
.feedback-note p { margin: 0; }
.feedback-note p + p { margin-top: var(--space-3); }
.feedback-type-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
#feedbackForm .field { margin-bottom: var(--space-4); }
#feedbackForm label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; }
#feedbackForm input[type="text"],
#feedbackForm textarea {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
}
#feedbackForm textarea { resize: vertical; min-height: 140px; }
.feedback-shot-preview { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.feedback-shot-preview .shot {
  position: relative; width: 96px; height: 96px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--color-border); background: #fff;
}
.feedback-shot-preview .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feedback-shot-preview .shot button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.65); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
}