/* ============================================
   ProShot Command — Design System Stylesheet
   Font: Plus Jakarta Sans
   Primary: #D72028 | Charcoal: #1A1A1A
   ============================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #1A1A1A;
  background: #F9FAFB;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Layout Shell ---------- */
.main-wrapper {
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Notifications bell — fixed top-right. Sits to the LEFT of the clock-in
   pill so the two don't overlap. Click toggles a dropdown. */
.notif-bell-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 401;
}
.notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E5E5EA;
  color: #4B5563;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.notif-bell-btn:hover { background: #F5F5F7; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10); }
.notif-bell-btn.has-unread { color: #1D1D1F; }
.notif-bell-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #DC2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 100px;
  text-align: center;
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: 92vw;
  max-height: 70vh;
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #F2F2F7;
}
.notif-mark-all {
  background: none;
  border: none;
  color: #007AFF;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.notif-body {
  flex: 1;
  overflow-y: auto;
  min-height: 60px;
}
.notif-empty {
  padding: 28px 14px;
  text-align: center;
  color: #9CA3AF;
  font-size: 13px;
}
.notif-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid #F5F5F7;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #FBFBFD; }
.notif-item.is-unread { background: #EFF6FF; }
.notif-item.is-unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #007AFF;
}
.notif-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #1D1D1F;
  margin-left: 10px;
}
.notif-item-body {
  font-size: 12px;
  color: #6B7280;
  margin-top: 3px;
  margin-left: 10px;
  line-height: 1.4;
}
.notif-item-time {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 4px;
  margin-left: 10px;
}

/* Always-visible "clocked in" pill — top-right corner. Tap to clock out. */
[x-cloak].clkp-pill { display: none !important; }
.clkp-pill {
  position: fixed;
  top: 16px;
  right: 64px;             /* leaves room for the notifications bell at 16px */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #1D1D1F;
  color: #fff;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  z-index: 400;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  font-family: inherit;
}
.clkp-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
/* Break state — amber, signals "paused, not earning" */
.clkp-pill.clkp-on-break {
  background: #F59E0B;
  color: #1D1D1F;
}
.clkp-pill.clkp-on-break:hover {
  background: #D97706;
  color: #fff;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}
/* Clocked-out state — green "Clock in" CTA. Pill stays visible at all
   times now, so when she's not clocked in this is her one-tap entry. */
.clkp-pill.clkp-out {
  background: #16A34A;
  color: #fff;
}
.clkp-pill.clkp-out:hover {
  background: #15803D;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}
.clkp-pill.clkp-out .clkp-cta {
  display: inline;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
.clkp-pill.clkp-busy {
  opacity: 0.7;
  cursor: progress;
}

.clkp-pill:hover .clkp-cta { display: inline; }
.clkp-pill:hover .clkp-time { opacity: 0.7; }
.clkp-icon { flex-shrink: 0; }
.clkp-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.clkp-cta {
  display: none;
  font-weight: 700;
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: 8px;
  margin-left: 2px;
}
/* On touch devices the hover never fires — show the CTA all the time */
@media (hover: none) {
  .clkp-cta { display: inline; }
  .clkp-time { opacity: 0.85; }
}

/* Clock-in nudge modal — fires once per session on landing for clock-in roles */
[x-cloak].clkn-overlay { display: none !important; }
.clkn-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: clknFadeIn 0.2s ease;
}
@keyframes clknFadeIn { from { opacity: 0; } to { opacity: 1; } }
.clkn-card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px 28px;
  text-align: center;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  animation: clknScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes clknScaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.clkn-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6B7280;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.clkn-title {
  font-size: 26px;
  font-weight: 800;
  color: #1D1D1F;
  margin: 0 0 26px;
  letter-spacing: -0.01em;
}
.clkn-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.clkn-btn {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.clkn-btn-primary { background: #1D1D1F; color: #fff; }
.clkn-btn-primary:hover:not(:disabled) { background: #000; }
.clkn-btn-primary:disabled { opacity: 0.6; cursor: wait; }
.clkn-btn-ghost { background: #F5F5F7; color: #6B7280; }
.clkn-btn-ghost:hover { background: #E5E7EB; }

.main-content {
  flex: 1;
  padding: 56px 40px 32px;
  max-width: 1200px;
  width: 100%;
}

.main-content-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-header {
  padding: 24px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-close {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  color: #6B7280;
}

.sidebar-close:hover {
  background: #F3F4F6;
}

.sidebar-logo,
.login-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 0;
}

.logo-pro {
  color: #1A1A1A;
}

.logo-shot {
  color: #D72028;
}

.logo-os {
  font-size: 12px;
  font-weight: 700;
  color: #9CA3AF;
  margin-left: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  transition: all 0.15s ease;
  min-height: 44px;
  border-left: 3px solid transparent;
  margin-left: -3px;
}

.nav-item:hover {
  background: #F9FAFB;
  color: #1A1A1A;
}

.nav-item.active {
  background: #FEF2F2;
  color: #D72028;
  font-weight: 600;
  border-left-color: #D72028;
}

.nav-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.nav-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 8px 12px;
}

.sidebar-footer {
  padding: 16px 16px 20px;
  border-top: 1px solid #E5E7EB;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #1A1A1A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 500;
}

.sidebar-signout {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  color: #9CA3AF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.sidebar-signout:hover {
  background: #F3F4F6;
  color: #6B7280;
}

/* ---------- Top Header ---------- */
/* Header is hidden on desktop — only shown on mobile for hamburger */
.top-header {
  display: none;
  align-items: center;
  padding: 12px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  position: sticky;
  top: 0;
  z-index: 50;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger:hover {
  background: #F3F4F6;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
  white-space: nowrap;
}

.btn-primary {
  background: #1A1A1A;
  color: #FFFFFF;
}

.btn-primary:hover {
  background: #333333;
}

.btn-danger {
  background: #D72028;
  color: #FFFFFF;
}

.btn-danger:hover {
  background: #C11B22;
}

.btn-secondary {
  background: transparent;
  color: #1A1A1A;
  border: 1.5px solid #E5E7EB;
}

.btn-secondary:hover {
  border-color: #1A1A1A;
}

.btn-ghost {
  background: transparent;
  color: #6B7280;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
}

.btn-ghost:hover {
  color: #1A1A1A;
  background: #F3F4F6;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
  min-height: 36px;
}

.btn-full {
  width: 100%;
}

/* ---------- Cards ---------- */
.card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ---------- Forms ---------- */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #1A1A1A;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9CA3AF;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1A1A1A;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* ---------- Login Page ---------- */
.login-body {
  background: #F9FAFB;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.login-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 40px 32px 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo {
  justify-content: center;
  font-size: 28px;
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 15px;
  color: #6B7280;
}

.login-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #D72028;
  font-weight: 500;
}

.login-form {
  margin-top: 0;
}

.login-form .btn {
  margin-top: 4px;
}

.login-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: #9CA3AF;
  font-weight: 500;
}

/* ---------- Flash Messages ---------- */
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #D72028;
}

.flash-success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #16A34A;
}

.flash-info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #2563EB;
}

.flash-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: inherit;
  opacity: 0.6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flash-close:hover {
  opacity: 1;
}

.flash-leave {
  opacity: 0;
  transform: translateY(-8px);
}

/* ---------- Dashboard ---------- */
.dashboard-welcome {
  margin-bottom: 32px;
}

.welcome-heading {
  font-size: 28px;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.welcome-sub {
  font-size: 16px;
  color: #6B7280;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease;
}

.stat-card:hover {
  border-color: #D72028;
}

.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  color: #1A1A1A;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.stat-detail {
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

/* Dashboard Sections */
.dashboard-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 12px;
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: 32px 20px;
}

.empty-state-text {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 4px;
}

.empty-state-sub {
  font-size: 14px;
  color: #9CA3AF;
}

/* Queue List */
.queue-list {
  display: flex;
  flex-direction: column;
}

.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #F3F4F6;
  min-height: 44px;
}

.queue-item:last-child {
  border-bottom: none;
}

.queue-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.queue-item-name {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
}

.queue-item-meta {
  font-size: 13px;
  color: #9CA3AF;
  font-weight: 500;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 16px;
  white-space: nowrap;
}

.badge-upcoming {
  background: #EFF6FF;
  color: #2563EB;
}

.badge-progress {
  background: #FEF2F2;
  color: #D72028;
}

.badge-pending {
  background: #F3F4F6;
  color: #6B7280;
}

.badge-complete {
  background: #F0FDF4;
  color: #16A34A;
}

/* ---------- Sidebar Overlay (Mobile) ---------- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 90;
}

.overlay-enter {
  transition: opacity 0.2s ease;
}

.overlay-leave {
  transition: opacity 0.2s ease;
  opacity: 0;
}

/* ---------- Responsive ---------- */

/* Tablet / iPad */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
  }

  .sidebar-close {
    display: flex;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .top-header {
    display: flex;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-content {
    padding: 24px 24px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: 20px 16px;
  }

  .welcome-heading {
    font-size: 24px;
  }

  .stat-value {
    font-size: 28px;
  }

  .login-card {
    padding: 32px 24px 24px;
  }
}

/* ============================================
   Upload Module
   ============================================ */

/* Hide Alpine x-cloak elements until ready */
[x-cloak] { display: none !important; }

/* ── Connect Screen ── */
.upload-connect-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 40px 0;
}

.upload-connect-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
}

.upload-connect-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.upload-connect-sub {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 28px;
}

.upload-field-hint {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 4px;
}

.upload-error {
  font-size: 13px;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* ── Status Bar ── */
.upload-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 13px;
  color: #15803d;
}

.upload-status-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

/* ── Drop Zone ── */
.upload-dropzone-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 280px);
  padding: 40px 0;
}

.upload-dropzone {
  width: 100%;
  max-width: 700px;
  border: 2px dashed #D1D5DB;
  border-radius: 12px;
  padding: 80px 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.upload-dropzone:hover,
.upload-dropzone-active {
  border-color: #D72028;
  background: #FEF2F2;
}

.upload-dropzone-icon {
  margin-bottom: 20px;
}

.upload-dropzone-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.upload-dropzone-sub {
  font-size: 15px;
  color: #6B7280;
  margin-bottom: 24px;
}

.upload-dropzone-formats {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 16px;
}

/* ── Review Screen ── */
.upload-review-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
}

.upload-review-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  z-index: 10;
}

.upload-review-counter {
  font-size: 14px;
  font-weight: 600;
}

.upload-review-filename {
  font-size: 13px;
  color: #9CA3AF;
}

.upload-review-progress-bar {
  height: 3px;
  background: #374151;
}

.upload-review-progress-fill {
  height: 100%;
  background: #D72028;
  transition: width 0.3s;
}

.upload-review-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.upload-review-image-container.dragging {
  cursor: grabbing;
}

.upload-review-image-container img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.upload-review-image-container img.no-transition {
  transition: none;
}

/* Loading spinner */
.upload-review-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
}

.upload-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: upload-spin 0.8s linear infinite;
}

@keyframes upload-spin {
  to { transform: rotate(360deg); }
}

.upload-review-loading-text {
  color: #9CA3AF;
  font-size: 13px;
}

/* Placeholder for unsupported formats */
.upload-review-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #6B7280;
}

.upload-review-placeholder-name {
  font-size: 15px;
  font-weight: 600;
  color: #9CA3AF;
}

.upload-review-placeholder-note {
  font-size: 13px;
  color: #6B7280;
}

/* Zoom controls */
.upload-zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 20px;
  display: flex;
  gap: 4px;
  z-index: 10;
  background: #1E1E1E;
  border: 1px solid #2A2A2A;
  border-radius: 10px;
  padding: 4px;
}

.upload-zoom-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #9CA3AF;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.15s;
  font-family: inherit;
}

.upload-zoom-btn:hover {
  background: #2A2A2A;
  color: #fff;
}

.upload-zoom-fit {
  font-size: 12px;
  width: auto;
  padding: 0 12px;
}

.upload-zoom-level {
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

/* Keyboard hints */
.upload-review-hints {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 6px;
  background: #111;
  color: #6B7280;
  font-size: 11px;
  flex-shrink: 0;
}

.upload-review-hints kbd {
  display: inline-block;
  padding: 2px 7px;
  background: #2A2A2A;
  border: 1px solid #3A3A3A;
  border-radius: 4px;
  color: #9CA3AF;
  font-family: inherit;
  font-size: 10px;
  margin-right: 3px;
}

/* Review actions */
.upload-review-actions {
  display: flex;
  gap: 10px;
  padding: 14px 24px;
  background: #161616;
  border-top: 1px solid #2A2A2A;
  justify-content: center;
  flex-shrink: 0;
}

.upload-btn-approve {
  padding: 12px 48px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  transition: all 0.15s;
}

.upload-btn-approve:hover {
  background: #15803d;
}

.upload-btn-flag {
  padding: 11px 36px;
  border: 1.5px solid #DC2626;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #DC2626;
  transition: all 0.15s;
  letter-spacing: -0.2px;
}

.upload-btn-flag:hover {
  background: #DC2626;
  color: #fff;
}

.upload-btn-skip {
  padding: 11px 36px;
  border: 1.5px solid #4B5563;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #9CA3AF;
  transition: all 0.15s;
  letter-spacing: -0.2px;
}

.upload-btn-skip:hover {
  background: #374151;
  color: #fff;
  border-color: #374151;
}

/* ── Flag Modal ── */
.upload-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-modal {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 480px;
}

.upload-modal h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.upload-modal p {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 16px;
}

.upload-modal textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 16px;
}

.upload-modal textarea:focus {
  outline: none;
  border-color: #D72028;
  box-shadow: 0 0 0 3px rgba(215, 32, 40, 0.08);
}

.upload-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.upload-btn-modal-flag {
  padding: 10px 24px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #DC2626;
  color: #fff;
  transition: background 0.15s;
}

.upload-btn-modal-flag:hover {
  background: #B91C1C;
}

/* ── Results Screen ── */
.upload-results-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 0;
}

.upload-results-card {
  width: 100%;
}

.upload-results-heading {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.upload-results-pass-color { color: #16a34a; }
.upload-results-fail-color { color: #DC2626; }

.upload-results-sub {
  font-size: 15px;
  color: #6B7280;
  margin-bottom: 32px;
}

.upload-results-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.upload-stat-box {
  padding: 20px 28px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  text-align: center;
}

.upload-stat-num {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.upload-stat-label {
  font-size: 13px;
  color: #6B7280;
  font-weight: 600;
}

.upload-stat-approved .upload-stat-num { color: #16a34a; }
.upload-stat-flagged .upload-stat-num { color: #DC2626; }
.upload-stat-total .upload-stat-num { color: #1A1A1A; }

/* Flagged list */
.upload-flagged-list {
  margin-bottom: 32px;
}

.upload-flagged-list h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.upload-flagged-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  margin-bottom: 8px;
}

.upload-flagged-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.upload-flagged-placeholder {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
  border-radius: 6px;
  flex-shrink: 0;
}

.upload-flagged-info {
  flex: 1;
  min-width: 0;
}

.upload-flagged-name {
  font-size: 14px;
  font-weight: 700;
}

.upload-flagged-note {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* ── Upload Progress ── */
.upload-progress-wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 0;
}

.upload-progress-card {
  width: 100%;
}

.upload-progress-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.upload-progress-sub {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 24px;
}

.upload-overall-bar {
  width: 100%;
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}

.upload-overall-fill {
  height: 100%;
  background: #16a34a;
  border-radius: 4px;
  transition: width 0.3s;
}

.upload-progress-status {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 24px;
}

.upload-file-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  margin-bottom: 24px;
}

.upload-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid #F3F4F6;
}

.upload-file-item:last-child {
  border-bottom: none;
}

.upload-file-name {
  font-weight: 600;
}

.upload-file-status {
  color: #6B7280;
}

.upload-fstatus-done {
  color: #16a34a !important;
  font-weight: 600;
}

.upload-fstatus-error {
  color: #DC2626 !important;
  font-weight: 600;
}

.upload-fstatus-uploading {
  color: #D72028 !important;
  font-weight: 600;
}

.upload-btn-cancel {
  padding: 10px 28px;
  border: 2px solid #DC2626;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: none;
  color: #DC2626;
  transition: all 0.15s;
}

.upload-btn-cancel:hover {
  background: #DC2626;
  color: #fff;
}

.upload-done-section {
  margin-top: 24px;
}

.upload-done-message {
  font-size: 16px;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 16px;
}

/* ── Project loading indicator ── */
.upload-project-loading {
  font-size: 13px;
  color: #9CA3AF;
  padding: 8px 0;
}

/* ── Responsive for Upload Module ── */
@media (max-width: 640px) {
  .upload-dropzone {
    padding: 60px 24px;
  }

  .upload-dropzone-heading {
    font-size: 22px;
  }

  .upload-results-stats {
    flex-direction: column;
    gap: 12px;
  }

  .upload-review-actions {
    flex-direction: column;
    padding: 12px 16px;
  }

  .upload-btn-approve,
  .upload-btn-flag,
  .upload-btn-skip {
    padding: 12px 24px;
    width: 100%;
  }

  .upload-status-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ============================================
   SETTINGS MODULE
   ============================================ */

.settings-section {
  margin-bottom: 40px;
}

.settings-section-header {
  margin-bottom: 20px;
}

.settings-section-header h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.settings-section-header p {
  font-size: 14px;
  color: #6B7280;
}

.settings-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 28px;
}

.settings-form .form-group {
  margin-bottom: 20px;
}

.settings-form .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.settings-form .form-group input {
  width: 100%;
  max-width: 440px;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
}

.settings-form .form-group input:focus {
  outline: none;
  border-color: #D72028;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 4px;
}

.settings-form-error {
  font-size: 13px;
  color: #DC2626;
  margin-bottom: 16px;
}

.settings-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-row {
  display: flex;
  gap: 16px;
}

/* ── Team Table ── */
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.team-table thead th {
  text-align: left;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.team-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

.team-table tbody tr:last-child td {
  border-bottom: none;
}

.team-table tbody tr:hover {
  background: #FAFAFA;
}

.team-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #1A1A1A;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.team-you-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #EFF6FF;
  color: #2563EB;
}

.team-username {
  color: #9CA3AF;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
}

.team-role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.team-role-admin {
  background: #1A1A1A;
  color: #fff;
}

.team-role-editor {
  background: #F0FDF4;
  color: #16A34A;
}

.team-role-photographer {
  background: #EFF6FF;
  color: #2563EB;
}

.team-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.team-module-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #F3F4F6;
  color: #6B7280;
}

/* ── Edit Modal ── */
.team-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-modal {
  background: #fff;
  border-radius: 16px;
  width: 520px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.team-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E7EB;
}

.team-modal-header h3 {
  font-size: 18px;
  font-weight: 700;
}

.team-modal-body {
  padding: 20px 24px;
}

/* Module toggles */
.team-module-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.team-module-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
}

.team-module-toggle:hover {
  border-color: #1A1A1A;
  color: #1A1A1A;
}

.team-module-toggle.is-on {
  border-color: #1A1A1A;
  background: #F9FAFB;
  color: #1A1A1A;
}

.team-module-toggle.is-locked {
  opacity: 0.5;
  cursor: default;
}

.team-module-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1A1A1A;
  cursor: pointer;
}

.team-danger-zone {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #FEE2E2;
}

/* Connected state */
.nc-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nc-connected-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nc-connected-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

.nc-connected-label {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}

.nc-connected-detail {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

.nc-connected-actions {
  display: flex;
  gap: 8px;
}

.nc-test-result {
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.nc-test-result.success {
  background: #F0FDF4;
  color: #16a34a;
}

.nc-test-result.error {
  background: #FEF2F2;
  color: #DC2626;
}

/* Button variants for settings */
.btn-sm {
  padding: 6px 16px;
  font-size: 13px;
}

.btn-outline {
  background: none;
  border: 1.5px solid #E5E7EB;
  color: #1A1A1A;
  border-radius: 7px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-outline:hover {
  border-color: #1A1A1A;
}

.btn-ghost {
  background: none;
  border: none;
  color: #6B7280;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 7px;
  transition: all 0.15s;
}

.btn-ghost:hover {
  color: #1A1A1A;
  background: #F3F4F6;
}

/* ============================================
   PROJECTS MODULE
   ============================================ */

/* ── List view ── */
.proj-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.proj-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.proj-sub {
  font-size: 15px;
  color: #6B7280;
}

.proj-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.proj-stats {
  display: flex;
  gap: 2px;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 3px;
}

.proj-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  color: #6B7280;
}

.proj-stat:hover {
  color: #374151;
  background: rgba(255,255,255,0.5);
}

.proj-stat.active {
  background: #fff;
  color: #1A1A1A;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.proj-stat-num {
  font-size: 13px;
  font-weight: 700;
}

.proj-stat-label {
  font-size: 13px;
  font-weight: 500;
}

.proj-stat.active .proj-stat-label {
  color: #1A1A1A;
}

.proj-search-bar {
  margin-left: auto;
}

.proj-search-bar input {
  width: 220px;
  padding: 7px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.15s;
  background: #fff;
}

.proj-search-bar input:focus {
  outline: none;
  border-color: #9CA3AF;
  width: 300px;
}

.proj-search-bar input::placeholder {
  color: #C0C5CC;
}

/* ── Project table ── */
.proj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.proj-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.proj-table tbody td {
  padding: 18px 16px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

.proj-table tbody tr:last-child td {
  border-bottom: none;
}

.proj-table tbody tr:hover td {
  background: #F5F5F5;
}

/* Acquisition source pills — quick visual scan on the Clients list.
   Colors are intentionally muted so the row stays the focus. Free
   channels (referral, word of mouth) lean green; paid-effort channels
   (cold outreach, search) lean blue/violet. */
.src-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.src-pill-cold_outreach { background: #DBEAFE; color: #1E3A8A; }
.src-pill-referral      { background: #D1FAE5; color: #065F46; }
.src-pill-word_of_mouth { background: #ECFCCB; color: #3F6212; }
.src-pill-search        { background: #FEF3C7; color: #92400E; }
.src-pill-other         { background: #F3F4F6; color: #4B5563; }

/* Left status bar */
.proj-table tbody tr td:first-child { border-left: 3px solid transparent; }
.proj-table tbody tr.sbar-needs_revision td:first-child { border-left-color: #DC2626; }
.proj-table tbody tr.sbar-editing td:first-child { border-left-color: #D97706; }
.proj-table tbody tr.sbar-qc td:first-child { border-left-color: #D97706; }
.proj-table tbody tr.sbar-shooting td:first-child { border-left-color: #3B82F6; }
.proj-table tbody tr.sbar-shoot_done td:first-child { border-left-color: #3B82F6; }
.proj-table tbody tr.sbar-awaiting_shooting td:first-child { border-left-color: #3B82F6; }
.proj-table tbody tr.sbar-deposit_paid td:first-child { border-left-color: #16A34A; }
.proj-table tbody tr.sbar-complete td:first-child { border-left-color: #86EFAC; }
.proj-table tbody tr.sbar-delivered td:first-child { border-left-color: #86EFAC; }

.proj-name {
  font-weight: 600;
  color: #1A1A1A;
}

.proj-company {
  font-size: 12px;
  color: #9CA3AF;
}

.proj-email {
  font-size: 12px;
  color: #9CA3AF;
}

.proj-date {
  font-size: 13px;
  color: #6B7280;
}

/* Status with dot */
.proj-status-dot-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.proj-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sdot-needs_revision { background: #DC2626; }
.sdot-editing { background: #D97706; }
.sdot-qc { background: #D97706; }
.sdot-shooting { background: #3B82F6; }
.sdot-shoot_done { background: #3B82F6; }
.sdot-awaiting_shooting { background: #3B82F6; }
.sdot-deposit_paid { background: #16A34A; }

.proj-status-text {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

/* Payment text */
.proj-pay-text {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

.payt-none { color: #9CA3AF; }
.payt-invoice_created { color: #D97706; }
.payt-deposit_paid { color: #2563EB; }
.payt-paid_in_full { color: #16A34A; }

/* Deadline cell */
.proj-deadline-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.proj-deadline-date {
  font-size: 13px;
  color: #374151;
}

.proj-turnaround-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
}

.tag-rush_3_5 { background: #FEF3C7; color: #D97706; }
.tag-rush_1_2 { background: #FEF2F2; color: #DC2626; }

/* ── Project Detail ── */
.pd-topbar {
  margin-bottom: 8px;
}

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  transition: color 0.15s;
}

.pd-back:hover {
  color: #1A1A1A;
}

.pd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pd-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.pd-meta {
  font-size: 14px;
  color: #6B7280;
}

.pd-meta-email {
  margin-left: 12px;
  color: #9CA3AF;
}

.pd-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Status flow */
.pd-flow {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  overflow-x: auto;
}

.pd-flow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #9CA3AF;
  border-bottom: 3px solid #E5E7EB;
  white-space: nowrap;
  flex-shrink: 0;
}

.pd-flow-step.done {
  color: #16A34A;
  border-color: #16A34A;
}

.pd-flow-step.active {
  color: #1A1A1A;
  border-color: #1A1A1A;
}

.pd-flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E5E7EB;
  flex-shrink: 0;
}

.pd-flow-step.done .pd-flow-dot { background: #16A34A; }
.pd-flow-step.active .pd-flow-dot { background: #1A1A1A; }

/* Info cards */
.pd-info-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.pd-info-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px 20px;
}

.pd-info-label {
  font-size: 12px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.pd-info-value {
  font-size: 20px;
  font-weight: 800;
}

/* Actions */
.pd-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.pd-status-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sections */
.pd-section {
  margin-bottom: 32px;
}

.pd-section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
}

/* Shot cards */
.pd-shot-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.pd-shot-card-header {
  background: #333;
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
}

.pd-shot-subtype {
  font-weight: 400;
  opacity: 0.6;
  margin-left: 6px;
}

.pd-shot-card-body {
  padding: 16px 20px;
}

.pd-variant-block {
  padding: 12px 0;
  border-bottom: 1px solid #F3F4F6;
}

.pd-variant-block:last-child {
  border-bottom: none;
}

.pd-variant-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.pd-variant-name {
  font-weight: 600;
  font-size: 15px;
}

.pd-variant-settings {
  font-size: 13px;
  color: #6B7280;
  margin-left: 28px;
  margin-bottom: 8px;
}

.pd-shot-list {
  margin-left: 28px;
}

.pd-shot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
}

.pd-shot-prefix {
  font-weight: 600;
  color: #6B7280;
}

.pd-ref-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #EFF6FF;
  color: #2563EB;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}

.pd-ref-tag:hover {
  background: #DBEAFE;
}

/* Checkboxes (CSS-only, print-friendly) */
.pd-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #D1D5DB;
  border-radius: 4px;
  flex-shrink: 0;
}

.pd-checkbox-sm {
  width: 16px;
  height: 16px;
}

/* Subsections */
.pd-subsection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid #E5E7EB;
}

.pd-subsection-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6B7280;
  margin-bottom: 12px;
}

/* Pricing card */
.pd-pricing-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 20px;
  max-width: 500px;
}

.pd-pricing-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #F3F4F6;
}

.pd-pricing-discount {
  color: #16A34A;
}

.pd-pricing-total {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 0;
  font-size: 16px;
  font-weight: 800;
}

/* Ref grid */
.pd-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.pd-ref-wrap {
  position: relative;
}
.pd-ref-wrap:hover .pd-ref-delete {
  opacity: 1;
}
.pd-ref-img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  object-fit: cover;
  aspect-ratio: 1;
}
.pd-ref-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-ref-delete:hover {
  background: #DC2626;
}

/* Notes */
.pd-notes {
  width: 100%;
  min-height: 100px;
  padding: 14px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.15s;
}

.pd-notes:focus {
  outline: none;
  border-color: #1A1A1A;
}

/* Danger zone */
.pd-danger {
  padding-top: 20px;
  border-top: 1px solid #FEE2E2;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pd-info-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .proj-filter-bar {
    flex-wrap: wrap;
  }

  .proj-stat {
    padding: 5px 10px;
    gap: 4px;
  }

  .proj-stat-label,
  .proj-stat-num {
    font-size: 12px;
  }

  .proj-search-bar {
    width: 100%;
    margin-left: 0;
  }

  .proj-search-bar input {
    width: 100%;
  }

  .proj-search-bar input:focus {
    width: 100%;
  }

  .pd-flow {
    gap: 0;
  }

  .pd-flow-step {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ============================================
   QC REVIEW MODULE
   ============================================ */

/* ── Batch List ── */
.qc-list-header {
  margin-bottom: 24px;
}

.qc-list-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.qc-list-sub {
  font-size: 15px;
  color: #6B7280;
}

.qc-filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 0;
}

.qc-filter-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}

.qc-filter-tab:hover {
  color: #1A1A1A;
}

.qc-filter-tab.active {
  color: #1A1A1A;
  border-bottom-color: #D72028;
}

.qc-loading {
  text-align: center;
  padding: 60px 20px;
  color: #9CA3AF;
  font-size: 14px;
}

.qc-empty {
  text-align: center;
  padding: 80px 20px;
  color: #9CA3AF;
}

.qc-empty svg {
  margin: 0 auto 16px;
}

.qc-empty p {
  font-size: 15px;
}

.qc-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.qc-batch-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px 24px;
  cursor: pointer;
  transition: all 0.15s;
}

.qc-batch-card:hover {
  border-color: #1A1A1A;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.qc-batch-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.qc-batch-client {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.3;
}

.qc-batch-meta {
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: #9CA3AF;
}

/* Status badges */
.qc-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.qc-badge-pending {
  background: #FEF3C7;
  color: #92400E;
}

.qc-badge-in_review {
  background: #FEF3C7;
  color: #92400E;
}

.qc-badge-approved {
  background: #F0FDF4;
  color: #16a34a;
}

.qc-badge-needs_revision {
  background: #FEF2F2;
  color: #DC2626;
}

/* Tab count badge */
.qc-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  background: #DC2626;
  color: #fff;
  margin-left: 6px;
}

/* Urgent batch card (needs review) */
.qc-batch-card-urgent {
  border-color: #FCD34D;
  background: #FFFBEB;
}

.qc-batch-card-urgent:hover {
  border-color: #F59E0B;
}

/* ── Project cards (new, primary view) ────────────────────────────────── */
.qc-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.qc-project-card {
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.qc-project-card:hover {
  border-color: #C7C7CC;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.qc-project-card:active { transform: scale(0.997); }

.qc-project-card-urgent {
  border-color: #FED7AA;
  background: #FFFBEB;
}
.qc-project-card-urgent:hover { border-color: #F59E0B; }

.qc-project-card-flagged {
  border-color: #FECACA;
  background: #FEF2F2;
}
.qc-project-card-flagged:hover { border-color: #F87171; }

.qc-project-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.qc-project-name {
  font-size: 16px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.qc-project-client {
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}
.qc-project-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.qc-project-status-open      { background: #FEF3C7; color: #92400E; }
.qc-project-status-sent_back { background: #FEE2E2; color: #991B1B; }
.qc-project-status-approved  { background: #D1FAE5; color: #065F46; }
.qc-project-status-other     { background: #F3F4F6; color: #6B7280; }

.qc-project-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}
.qc-project-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.qc-project-stat-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: #1D1D1F;
  letter-spacing: -0.02em;
}
.qc-project-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.qc-project-stat-open .qc-project-stat-num    { color: #B45309; }
.qc-project-stat-flagged .qc-project-stat-num { color: #B91C1C; }
.qc-project-stat-approved .qc-project-stat-num { color: #065F46; }

.qc-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 500;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.qc-project-card-urgent .qc-project-meta { border-top-color: rgba(180, 83, 9, 0.15); }
.qc-project-card-flagged .qc-project-meta { border-top-color: rgba(185, 28, 28, 0.15); }

/* Revision tags */
.qc-batch-revision-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  background: #EFF6FF;
  color: #2563EB;
}

/* Review top bar batch name */
.qc-review-batch-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-left: 4px;
  letter-spacing: -0.3px;
}

/* File info bar (counter + filename) */
.qc-review-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
}

/* View toggle button */
.qc-view-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #3A3A3A;
  border-radius: 8px;
  background: #1E1E1E;
  cursor: pointer;
  color: #6B7280;
  transition: all 0.15s;
}

.qc-view-toggle:hover,
.qc-view-toggle.active {
  border-color: #fff;
  color: #fff;
}

/* Gallery grid */
.qc-gallery {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.qc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.qc-gallery-item {
  background: #1E1E1E;
  border: 2px solid #2A2A2A;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
}

.qc-gallery-item:hover {
  border-color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.qc-gallery-item-active {
  border-color: #D72028;
}

.qc-gallery-thumb {
  aspect-ratio: 1;
  background: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qc-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qc-gallery-name {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-revised-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(37, 99, 235, 0.2);
  color: #93C5FD;
  margin-left: 8px;
}

.qc-revised-badge svg {
  flex-shrink: 0;
}

/* ── Review Screen ── */
.qc-review-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0A0A0A;
  display: flex;
  flex-direction: column;
}

.qc-review-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  background: #161616;
  border-bottom: 1px solid #2A2A2A;
  color: #fff;
  z-index: 10;
  flex-shrink: 0;
}

.qc-review-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qc-review-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* File info bar */
.qc-review-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 40px;
  background: #111;
  border-bottom: 1px solid #1F1F1F;
  flex-shrink: 0;
}

.qc-review-counter {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #2A2A2A;
  padding: 3px 10px;
  border-radius: 5px;
}

.qc-review-filename {
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

/* Image container */
.qc-review-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.qc-review-image-container.dragging {
  cursor: grabbing;
}

.qc-image-wrapper {
  position: relative;
  display: inline-block;
  transform-origin: center center;
  transition: transform 0.15s ease;
}

.qc-image-wrapper.no-transition {
  transition: none;
}

.qc-image-wrapper img {
  max-width: 92vw;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  border-radius: 4px;
}

/* Markup canvas */
.qc-markup-canvas {
  position: absolute;
  top: 0;
  left: 0;
  cursor: crosshair;
  z-index: 5;
}

/* ── Flag Panel ── */
.qc-flag-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  background: #161616;
  z-index: 210;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  border-left: 1px solid #2A2A2A;
}

.qc-flag-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #2A2A2A;
}

.qc-flag-panel-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* Markup toolbar */
.qc-markup-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid #2A2A2A;
}

.qc-markup-tool {
  width: 40px;
  height: 40px;
  border: 1.5px solid #3A3A3A;
  border-radius: 8px;
  background: #1E1E1E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  transition: all 0.15s;
}

.qc-markup-tool:hover {
  border-color: #fff;
  color: #fff;
}

.qc-markup-tool.active {
  background: #DC2626;
  border-color: #DC2626;
  color: #fff;
}

.qc-markup-divider {
  width: 1px;
  height: 28px;
  background: #3A3A3A;
  margin: 0 4px;
}

/* Notes section */
.qc-flag-notes {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}

.qc-flag-notes label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #D1D5DB;
}

.qc-flag-notes textarea {
  flex: 1;
  width: 100%;
  border: 1px solid #3A3A3A;
  border-radius: 8px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  min-height: 100px;
  background: #1E1E1E;
  color: #fff;
}

.qc-flag-notes textarea:focus {
  outline: none;
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.qc-flag-notes textarea::placeholder {
  color: #6B7280;
}

.qc-flag-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 12px;
  font-size: 13px;
  color: #D1D5DB;
  cursor: pointer;
}

.qc-flag-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #DC2626;
  cursor: pointer;
}

/* Flag actions */
.qc-flag-actions {
  padding: 16px 20px;
  border-top: 1px solid #2A2A2A;
}

.qc-btn-flag-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: #DC2626;
  color: #fff;
  transition: background 0.15s;
}

.qc-btn-flag-submit:hover {
  background: #B91C1C;
}

/* Bottom action buttons */
.qc-btn-approve {
  padding: 11px 40px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  transition: all 0.15s;
  letter-spacing: -0.2px;
}

.qc-btn-approve:hover {
  background: #15803d;
}

.qc-btn-send-back {
  padding: 11px 40px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #DC2626;
  color: #fff;
  transition: all 0.15s;
  letter-spacing: -0.2px;
}

.qc-btn-send-back:hover {
  background: #B91C1C;
}

.qc-notes-count {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(220, 38, 38, 0.25);
  color: #FCA5A5;
}

/* ── Editor Flagged Items ── */
.section-sub {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 16px;
}

.editor-flagged-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor-flagged-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #FCA5A5;
  border-radius: 10px;
}

.editor-flagged-thumb {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FEF2F2;
  border-radius: 8px;
  flex-shrink: 0;
}

.editor-flagged-info {
  flex: 1;
  min-width: 0;
}

.editor-flagged-name {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
}

.editor-flagged-project {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 1px;
}

.editor-flagged-note {
  font-size: 13px;
  color: #DC2626;
  margin-top: 4px;
  line-height: 1.4;
}

.badge-flagged {
  background: #FEF2F2;
  color: #DC2626;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── QC Responsive ── */
@media (max-width: 768px) {
  .qc-batch-grid {
    grid-template-columns: 1fr;
  }

  .qc-flag-panel {
    width: 100%;
    top: auto;
    height: 60vh;
    border-radius: 16px 16px 0 0;
  }

  .qc-review-topbar {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .qc-review-topbar-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ============================================
   Revisions Page
   ============================================ */

.rev-empty {
  text-align: center;
  padding: 80px 20px;
}

.rev-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.rev-batch-card {
  background: #fff;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rev-batch-card:hover {
  border-color: #DC2626;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.08);
}

.rev-batch-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rev-batch-client {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 4px;
}

.rev-batch-meta {
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
}

/* ── Detail mode ── */
.rev-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.rev-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A1A;
}

.rev-detail-sub {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 20px;
}

.rev-loading {
  text-align: center;
  padding: 60px 20px;
}

.rev-file-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rev-file-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rev-file-images {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.rev-file-image-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 360px;
  border-radius: 8px;
  overflow: hidden;
  background: #F3F4F6;
}

.rev-image-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.6);
  color: #D1D5DB;
}

.rev-image-label-new {
  background: rgba(22, 163, 74, 0.85);
  color: #fff;
}

.rev-file-image {
  display: block;
  width: 100%;
  height: auto;
}

.rev-file-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.rev-file-info {
  flex: 1;
  min-width: 0;
}

.rev-file-name {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8px;
  word-break: break-all;
}

/* ── QC Notes section ── */
.rev-notes-section {
  margin-bottom: 32px;
}

.rev-notes-heading {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 16px;
}

.rev-notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rev-note-card {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.rev-note-image-wrap {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  border-radius: 8px;
  overflow: hidden;
  background: #F3F4F6;
}

.rev-note-image {
  display: block;
  width: 100%;
  height: auto;
}

.rev-note-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.rev-note-filename {
  font-size: 11px;
  color: #6B7280;
  padding: 6px 8px;
  background: #F9FAFB;
  word-break: break-all;
}

.rev-note-text {
  font-size: 15px;
  color: #DC2626;
  line-height: 1.6;
  font-weight: 500;
}

.rev-note-body {
  flex: 1;
  min-width: 0;
}

.rev-note-card-all {
  background: #FFFBEB;
  border-color: #FCD34D;
}

.rev-note-all-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  background: #FEF3C7;
  color: #92400E;
}

/* Uploaded file highlight */
.rev-grid-item-new {
  border-color: #16A34A;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.rev-grid-item-new .rev-grid-name {
  color: #16A34A;
  font-weight: 700;
}

/* Submit section */
.rev-submit-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #E5E7EB;
}

/* ── Files grid (Finder-style) ── */
.rev-files-section {
  margin-bottom: 32px;
}

.rev-files-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.rev-files-heading {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
}

.rev-files-count {
  font-size: 13px;
  color: #9CA3AF;
}

.rev-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.rev-grid-item {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.rev-grid-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.rev-grid-thumb {
  aspect-ratio: 1;
  background: #F3F4F6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rev-grid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rev-grid-name {
  padding: 8px;
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Actions section ── */
.rev-actions-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #E5E7EB;
}

.rev-reupload-hint {
  font-size: 13px;
  color: #9CA3AF;
  margin-top: 10px;
}

.rev-progress-wrap {
  max-width: 500px;
}

.rev-progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 10px;
}

.rev-progress-bar {
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}

.rev-progress-fill {
  height: 100%;
  background: #1A1A1A;
  border-radius: 3px;
  transition: width 0.3s;
}

.rev-done-wrap {
  padding: 16px 0;
}

.rev-done-msg {
  font-size: 15px;
  font-weight: 600;
  color: #16A34A;
}

/* ── Revisions responsive ── */
@media (max-width: 768px) {
  .rev-batch-grid {
    grid-template-columns: 1fr;
  }

  .rev-note-card {
    flex-direction: column;
  }

  .rev-note-image-wrap {
    width: 100%;
  }

  .rev-file-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* ============================================
   Retouch Instructions — mirrors Electron app
   ============================================ */
.rt-page {
  background: #F2F2F7;
  min-height: calc(100vh - 65px);
  padding: 20px;
  margin: -32px -40px;
}

.rt-wrap {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.rt-wrap h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #1C1C1E;
}

.rt-card {
  background: #F9F9F9;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid #E5E5EA;
}

.rt-card h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1C1C1E;
}

/* Section header with note toggle */
.rt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.rt-header h2 {
  margin-bottom: 0;
}

.rt-note-btn {
  background: none;
  border: none;
  color: #007AFF;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.rt-note-btn:hover { color: #0051D5; }
.rt-note-btn.active { color: #007AFF; }

/* Radios */
.rt-radios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rt-radios label,
.rt-chk {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}

.rt-radios input[type="radio"],
.rt-chk input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

/* Sub-options */
.rt-sub {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E5EA;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rt-sub label {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.rt-sub input[type="radio"],
.rt-sub input[type="checkbox"] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.rt-sub-sub {
  margin-top: 12px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rt-sub-sub label {
  font-size: 14px;
  font-weight: 500;
}

.rt-sub-sub select {
  width: auto;
  padding: 8px 12px;
}

/* Color picker */
.rt-color-pick {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rt-color-pick input[type="color"] {
  width: 60px;
  height: 40px;
  border: 1px solid #C7C7CC;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
}

.rt-color-pick span {
  font-family: monospace;
  font-size: 14px;
  color: #666;
}

/* Inputs */
.rt-card select,
.rt-card input[type="text"],
.rt-card input[type="date"],
.rt-card textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #C7C7CC;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #1C1C1E;
  transition: border-color 0.2s;
}

.rt-card select:focus,
.rt-card input:focus,
.rt-card textarea:focus {
  outline: none;
  border-color: #007AFF;
}

.rt-card textarea {
  min-height: 100px;
  resize: vertical;
}

/* Note area */
.rt-note-area {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E5E5EA;
}

.rt-note-area textarea {
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  border: 1px solid #C7C7CC;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  color: #1C1C1E;
}

.rt-note-area textarea:focus {
  outline: none;
  border-color: #007AFF;
}

/* Buttons */
.rt-sec-btn {
  padding: 8px 16px;
  background: #E5E5EA;
  color: #1C1C1E;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.rt-sec-btn:hover:not(:disabled) { background: #D1D1D6; }
.rt-sec-btn:disabled { background: #F2F2F7; color: #999; cursor: not-allowed; }

.rt-primary-btn {
  width: 100%;
  padding: 14px 24px;
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
}

.rt-primary-btn:hover { background: #0051D5; }

.rt-gen-btn {
  width: 100%;
  padding: 16px 50px;
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 20px;
}

.rt-gen-btn:hover:not(:disabled) { background: #0051D5; }
.rt-gen-btn:disabled { background: #C7C7CC; cursor: not-allowed; }

/* Image list */
.rt-image-list {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #C7C7CC;
  border-radius: 12px;
  font-size: 14px;
  color: #666;
}

/* Status */
.rt-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.rt-status.success {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}

.rt-status.error {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #EF9A9A;
}

/* Disabled radio/checkbox labels */
.rt-radios input:disabled + span,
.rt-chk input:disabled + span {
  color: #999;
}

/* Destination modal */
.rt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

.rt-modal {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 440px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.rt-modal h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1C1C1E;
}

/* Success modal — appears after instructions are saved */
.rt-success-modal {
  text-align: center;
  padding: 36px 32px 28px;
}
.rt-success-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #16A34A;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rt-success-title {
  font-size: 22px;
  font-weight: 700;
  color: #1D1D1F;
  margin: 0 0 10px;
  line-height: 1.2;
}
.rt-success-sub {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
  margin: 0 0 24px;
}
.rt-success-sub strong { color: #1D1D1F; font-weight: 600; }
.rt-success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rt-success-actions .rt-gen-btn,
.rt-success-actions .rt-sec-btn {
  width: 100%;
}
.rt-text-btn {
  background: none;
  border: none;
  color: #6B7280;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px;
  cursor: pointer;
  margin-top: 2px;
}
.rt-text-btn:hover { color: #1D1D1F; }

.rt-modal select,
.rt-modal input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #C7C7CC;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #1C1C1E;
}

.rt-modal select:focus,
.rt-modal input:focus {
  outline: none;
  border-color: #007AFF;
}

/* ── Project Detail v2 — condensed header + tabs ── */
.pd2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pd2-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
  color: #1A1A1A;
}
.pd2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd2-metaline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 20px;
}
.pd2-metaline .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #D1D5DB;
  flex-shrink: 0;
}
.pd2-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #374151;
}
.pd2-status-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9CA3AF;
}
.pd2-status-dot.s-awaiting_payment::before { background: #F59E0B; }
.pd2-status-dot.s-deposit_paid::before { background: #3B82F6; }
.pd2-status-dot.s-shooting::before { background: #8B5CF6; }
.pd2-status-dot.s-editing::before { background: #EC4899; }
.pd2-status-dot.s-qc::before { background: #F59E0B; }
.pd2-status-dot.s-complete::before { background: #10B981; }
.pd2-status-dot.s-delivered::before { background: #10B981; }

.pd2-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 24px;
  overflow-x: auto;
}
.pd2-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.pd2-tab:hover {
  color: #1A1A1A;
}
.pd2-tab.active {
  color: #1A1A1A;
  border-bottom-color: #1A1A1A;
}
.pd2-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #F3F4F6;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
}
.pd2-tab.active .pd2-tab-count {
  background: #1A1A1A;
  color: #fff;
}

.pd2-tabpanel {
  min-height: 200px;
}
.pd2-empty {
  padding: 60px 20px;
  text-align: center;
  color: #9CA3AF;
  font-size: 14px;
}
.pd2-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.pd2-over-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px 18px;
}
.pd2-over-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9CA3AF;
  margin-bottom: 6px;
}
.pd2-over-value {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.4;
}
.pd2-over-sub {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* ── Project Detail v3 — Mockup C "Finder" ── */
.pdc-back { font-size: 13px; color: #86868B; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.pdc-back:hover { color: #1D1D1F; }

.pdc-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* Toolbar */
.pdc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #F2F2F7;
  gap: 16px;
}
.pdc-tb-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.pdc-tb-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: linear-gradient(135deg, #FF9F0A, #FF453A);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.pdc-tb-title { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; color: #1D1D1F; }
.pdc-tb-sub { font-size: 14px; color: #86868B; margin-top: 2px; }
.pdc-shoot-time {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 10px;
  background: #F5F5F7;
  border-radius: 100px;
  color: #6B7280;
  font-size: 12px;
  font-weight: 500;
}
.pdc-shoot-time strong { color: #1D1D1F; font-weight: 700; margin-left: 2px; }
.pdc-st-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdc-st-active { background: #DCFCE7; color: #166534; }
.pdc-st-paused { background: #FEF3C7; color: #92400E; }
.pdc-tb-right { display: flex; align-items: center; gap: 8px; }
.pdc-ico-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #86868B; font-size: 17px;
}
.pdc-ico-btn:hover { background: #F2F2F7; color: #1D1D1F; }
.pdc-pri-btn {
  padding: 7px 14px; background: #1D1D1F; color: #fff;
  border-radius: 100px; border: none;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.pdc-pri-btn:hover { background: #000; }

/* Status strip */
.pdc-status-pill {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 7px 28px 7px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23666' d='M1 1l4 4 4-4'/></svg>");
}
.pdc-status-pill.pill-amber  { background-color: #FFF4E5; color: #B45309; }
.pdc-status-pill.pill-blue   { background-color: #E5F0FF; color: #1D4ED8; }
.pdc-status-pill.pill-purple { background-color: #F1E8FF; color: #6D28D9; }
.pdc-status-pill.pill-green  { background-color: #E8F8EE; color: #248A3D; }
.pdc-status-pill.pill-red    { background-color: #FEF2F2; color: #DC2626; }
.pdc-status-pill.pill-gray   { background-color: #F2F2F7; color: #1D1D1F; }

/* Body */
.pdc-body { display: grid; grid-template-columns: 1fr 320px; }
.pdc-left { padding: 36px 40px; border-right: 1px solid #F2F2F7; min-width: 0; }
.pdc-right { padding: 36px 32px; }

/* Tabs */
.pdc-tabs { display: flex; gap: 4px; margin-bottom: 28px; flex-wrap: wrap; }
.pdc-tab {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #86868B;
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
}
.pdc-tab:hover { color: #1D1D1F; }
.pdc-tab.active { background: #F2F2F7; color: #1D1D1F; font-weight: 600; }
/* Primary tab — Overview, the default destination */
.pdc-tab-primary { color: #1D1D1F; font-weight: 600; }
/* Muted tabs — Shot List, References, Files, etc. Available but de-emphasized
   so the photographer's eye goes to Overview / "Start Shoot" first. */
.pdc-tab-muted { font-size: 13px; color: #B0B0B5; font-weight: 400; }
.pdc-tab-muted:hover { color: #6B7280; }
.pdc-tab-muted.active { color: #1D1D1F; font-weight: 500; background: #F2F2F7; }

/* ── Overview tab ──────────────────────────────────────── */
.pd-overview {
  background: #fff;
  border: 1px solid #F2F2F7;
  border-radius: 18px;
  padding: 28px 32px;
}
.pd-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.pd-overview-title {
  font-size: 24px;
  font-weight: 700;
  color: #1D1D1F;
  margin: 0 0 6px;
  line-height: 1.2;
}
.pd-overview-sub {
  font-size: 14px;
  color: #6B7280;
}
.pd-overview-dot { color: #D1D5DB; margin: 0 4px; }
.pd-overview-status-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  background: #F5F5F7;
  color: #6B7280;
  white-space: nowrap;
  flex-shrink: 0;
}
.pdov-status-shooting,
.pdov-status-shoot_done { background: #DBEAFE; color: #1E40AF; }
.pdov-status-deposit_paid { background: #D1FAE5; color: #065F46; }
.pdov-status-editing,
.pdov-status-qc { background: #FEF3C7; color: #92400E; }
.pdov-status-complete,
.pdov-status-delivered { background: #D1FAE5; color: #065F46; }

/* One-line digest — replaces the 3 numeric stat cards. */
.pd-ov-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F2F2F7;
}
.pd-ov-sum-key {
  font-size: 18px;
  font-weight: 800;
  color: #1D1D1F;
  letter-spacing: -0.01em;
}
.pd-ov-sum-lbl { font-weight: 500; }
.pd-ov-sep { color: #D1D5DB; margin: 0 2px; }
.pd-ov-setups { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-ov-setup-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4B5563;
  background: #F3F4F6;
  padding: 3px 9px;
  border-radius: 100px;
}

/* Visual product strip — what she's shooting, with reference thumbnails.
   Wrapped in a block with a header that doubles as the Preview entry point. */
.pd-ov-products-block {
  margin-bottom: 22px;
}
.pd-ov-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pd-ov-products-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #86868B;
}
.pd-ov-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-ov-product {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px 10px 10px;
  background: #FFF;
  border: 1px solid #F0F0F4;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.pd-ov-product:hover {
  border-color: #D1D5DB;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.pd-ov-product:active { transform: scale(0.997); }
.pd-ov-product-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #F5F5F7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-ov-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-ov-product-thumb.is-empty {
  background: linear-gradient(135deg, #F5F5F7 0%, #E5E7EB 100%);
}
.pd-ov-product-thumb-fallback {
  font-size: 22px;
  font-weight: 700;
  color: #9CA3AF;
}
.pd-ov-product-body {
  flex: 1;
  min-width: 0;
}
.pd-ov-product-name {
  font-size: 15px;
  font-weight: 700;
  color: #1D1D1F;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-ov-product-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}
.pd-ov-product-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4B5563;
  background: #F3F4F6;
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 4px;
}
.pd-ov-product-preview {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: #007AFF;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(0, 122, 255, 0.08);
  transition: background 0.15s ease;
}
.pd-ov-product:hover .pd-ov-product-preview {
  background: rgba(0, 122, 255, 0.16);
}

/* Reference gallery — modal with prev/next nav + thumbnail strip. */
.pd-ref-gallery {
  position: relative;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-ref-gallery-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  object-fit: contain;
}
.pd-ref-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #E5E5EA;
  color: #1D1D1F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, transform 0.05s ease;
  z-index: 2;
}
.pd-ref-nav:hover { background: #fff; }
.pd-ref-nav:active { transform: translateY(-50%) scale(0.96); }
.pd-ref-nav-prev { left: 16px; }
.pd-ref-nav-next { right: 16px; }
.pd-ref-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  overflow-x: auto;
  border-top: 1px solid #F2F2F7;
}
.pd-ref-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #F5F5F7;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.pd-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-ref-thumb.is-active { border-color: #007AFF; }
.pd-ref-thumb:hover { transform: translateY(-1px); }

.pd-overview-cta-block {
  margin-top: 8px;
}
.pd-overview-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #007AFF;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 24px;
  border-radius: 14px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.28);
}
.pd-overview-cta:hover {
  background: #0062CC;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.36);
}
.pd-overview-cta-arrow {
  font-size: 22px;
  line-height: 1;
}
.pd-overview-cta-resume { background: #1E40AF; box-shadow: 0 4px 14px rgba(30, 64, 175, 0.25); }
.pd-overview-cta-resume:hover { background: #1E3A8A; }
.pd-overview-cta-prep {
  background: #16A34A;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
  margin-bottom: 10px;
}
.pd-overview-cta-prep:hover { background: #15803D; }

/* Deadline pill — sits in the right side of the toolbar. Orange by default,
   red when overdue. Two-line layout (eyebrow + date) so it reads quickly. */
.pdc-deadline-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 14px;
  background: #FFF4E5;
  color: #B45309;
  border: 1px solid #FED7AA;
}
.pdc-deadline-pill-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.pdc-deadline-pill-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.pdc-deadline-pill-date {
  font-size: 15px;
  font-weight: 700;
}
.pdc-deadline-pill.is-overdue {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FECACA;
}

/* Notes callout in overview — orange card, prominent enough that the
   photographer reads it before tapping Start Shoot. */
.pd-overview-notes {
  background: #FFF4E5;
  border: 1px solid #FED7AA;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pd-overview-notes-label {
  font-size: 11px;
  font-weight: 700;
  color: #B45309;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.pd-overview-notes-body {
  font-size: 15px;
  line-height: 1.5;
  color: #1D1D1F;
  white-space: pre-wrap;
}

/* Preview modal — read-only references + shot list. */
.pd-preview-modal {
  max-width: 860px;
  width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.pd-preview-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.pd-preview-section + .pd-preview-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #F2F2F7;
}
.pd-preview-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #86868B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px 0;
}
.pd-preview-count {
  color: #C7C7CC;
  font-weight: 600;
  margin-left: 4px;
}
.pd-preview-refs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.pd-preview-ref {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F5F5F7;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
}
.pd-preview-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-preview-ref-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-preview-empty {
  padding: 32px 12px;
  text-align: center;
  color: #9CA3AF;
  font-size: 14px;
  background: #FBFBFD;
  border-radius: 10px;
}
.pd-preview-group + .pd-preview-group {
  margin-top: 20px;
}
.pd-preview-group-head {
  font-size: 15px;
  font-weight: 700;
  color: #1D1D1F;
  margin-bottom: 8px;
}
.pd-preview-subtype {
  font-size: 13px;
  font-weight: 500;
  color: #86868B;
  margin-left: 6px;
}
.pd-preview-variant {
  margin: 10px 0 14px 0;
  padding: 10px 14px;
  background: #FBFBFD;
  border: 1px solid #F2F2F7;
  border-radius: 10px;
}
.pd-preview-variant-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 6px;
}
.pd-preview-variant-meta {
  font-size: 12px;
  font-weight: 500;
  color: #86868B;
}
.pd-preview-shots {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-preview-shots li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #1D1D1F;
  border-bottom: 1px solid #F5F5F7;
}
.pd-preview-shots li:last-child { border-bottom: none; }
.pd-preview-tag {
  font-size: 10px;
  font-weight: 700;
  color: #6D28D9;
  background: #F1E8FF;
  padding: 2px 7px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pd-preview-ref-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #1D1D1F;
  background: #F5F5F7;
  padding: 3px 8px;
  border-radius: 100px;
  cursor: zoom-in;
  letter-spacing: 0.06em;
}

.pd-overview-prep-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #ECFDF5;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  margin-bottom: 14px;
}
.pd-overview-prep-check {
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background: #16A34A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.pd-overview-prep-title {
  font-size: 14px;
  font-weight: 700;
  color: #065F46;
}
.pd-overview-prep-sub {
  font-size: 12px;
  color: #16A34A;
  margin-top: 1px;
}

.pd-overview-blocked-prep {
  background: #FEF3C7;
}
.pd-overview-blocked-prep .pd-overview-blocked-title { color: #92400E; }
.pd-overview-blocked-prep .pd-overview-blocked-sub { color: #92400E; }
.pd-overview-cta-secondary {
  background: #F5F5F7;
  color: #1D1D1F;
  font-size: 15px;
  padding: 14px 20px;
  box-shadow: none;
  margin-top: 12px;
}
.pd-overview-cta-secondary:hover { background: #E5E5EA; box-shadow: none; }

.pd-overview-done {
  text-align: center;
}
.pd-overview-done-banner {
  display: inline-block;
  background: #D1FAE5;
  color: #065F46;
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
}

.pd-overview-blocked {
  text-align: center;
  padding: 28px 24px;
  background: #FEF3C7;
  border-radius: 14px;
}
.pd-overview-blocked-title {
  font-size: 16px;
  font-weight: 700;
  color: #92400E;
  margin-bottom: 4px;
}
.pd-overview-blocked-sub {
  font-size: 13px;
  color: #92400E;
  opacity: 0.8;
}

/* Right rail */
.pdc-rail-section + .pdc-rail-section { margin-top: 26px; padding-top: 26px; border-top: 1px solid #F2F2F7; }
.pdc-rail-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: #86868B; margin-bottom: 12px;
}
.pdc-rail-row {
  display: flex; justify-content: space-between;
  padding: 7px 0; font-size: 14px;
  gap: 12px;
}
.pdc-rail-row .k { color: #86868B; flex-shrink: 0; }
.pdc-rail-row .v { color: #1D1D1F; font-weight: 500; text-align: right; word-break: break-word; }

.pdc-rail-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 100px;
  font-size: 13px; font-weight: 600;
}
.pdc-rail-pill.editing { background: #FFF4E5; color: #B45309; }
.pdc-rail-pill.editing::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FF9F0A; }
.pdc-rail-pill.ready { background: #E8F8EE; color: #248A3D; }
.pdc-rail-pill.ready::before { content: '✓'; font-size: 11px; }
.pdc-rail-pill.unpaid { background: #FFEBEB; color: #C73E3E; }

.pdc-rail-actions { display: flex; flex-direction: column; gap: 8px; }
.pdc-rail-btn {
  padding: 11px 14px;
  background: #F2F2F7;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
  text-decoration: none;
}
.pdc-rail-btn:hover { background: #E5E5EA; }
.pdc-rail-btn.primary { background: #1D1D1F; color: #fff; font-weight: 600; }
.pdc-rail-btn.danger { background: #FFEBEB; color: #C73E3E; }
.pdc-rail-btn.danger:hover { background: #FFD9D9; }

.pdc-rail-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E5E5EA;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: #1D1D1F;
}

.pdc-empty { padding: 60px 20px; text-align: center; color: #9CA3AF; font-size: 14px; }

/* Notes textarea inside left pane */
.pdc-notes {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border: 1px solid #E5E5EA;
  border-radius: 11px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #FBFBFD;
}
.pdc-notes:focus { outline: none; border-color: #1D1D1F; background: #fff; }

/* Collapsed-notes toggle in the rail. Sits flat against the section so it
   takes almost no visual weight when there's nothing to say. */
.pdc-notes-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  color: #6B7280;
  border: 1px dashed #D1D5DB;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pdc-notes-toggle:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
  border-style: solid;
  color: #1D1D1F;
}
.pdc-notes-toggle-meta {
  margin-left: auto;
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 500;
}


.pdc-assign-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: #FBFBFD;
  color: #1D1D1F;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.pdc-assign-select:focus {
  outline: none;
  border-color: #1D1D1F;
  background-color: #fff;
}
.pdc-assign-select:disabled { opacity: 0.55; cursor: wait; }

.pdc-deadline-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: #FBFBFD;
  color: #1D1D1F;
  cursor: text;
}
.pdc-deadline-input:focus {
  outline: none;
  border-color: #1D1D1F;
  background: #fff;
}
.pdc-deadline-input:disabled { opacity: 0.55; }

/* ── Assistant Prep Guide ─────────────────────────────── */
.sgp-root { max-width: 720px; margin: 0 auto; }
.sgp-saving-pill {
  background: #F3F4F6;
  color: #6B7280;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 100px;
}
.sgp-ready-pill {
  background: #16A34A;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
}

.sgp-section {
  background: #fff;
  border: 1px solid #F2F2F7;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 14px;
}
.sgp-section-head { margin-bottom: 16px; }
.sgp-section-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1D1D1F;
  margin: 0 0 4px;
}
.sgp-section-head p {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
  line-height: 1.4;
}
.sgp-empty {
  font-size: 13px;
  color: #9CA3AF;
  padding: 14px;
  text-align: center;
  background: #FAFAFB;
  border-radius: 10px;
}

/* Count check table */
.sgp-count-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sgp-count-head {
  display: grid;
  grid-template-columns: 1fr 90px 110px;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9CA3AF;
  padding: 0 12px 6px;
}
.sgp-count-row {
  display: grid;
  grid-template-columns: 1fr 90px 110px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #FAFAFB;
  border: 1px solid #F2F2F7;
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sgp-count-row.sgp-count-mismatch {
  background: #FEF3C7;
  border-color: #FDE68A;
}
.sgp-count-row.sgp-count-zero {
  background: #FEE2E2;
  border-color: #FECACA;
}
.sgp-count-product {
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
}
.sgp-count-expected {
  font-size: 14px;
  color: #6B7280;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sgp-count-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  background: #fff;
  color: #1D1D1F;
}
.sgp-count-input:focus { outline: none; border-color: #1D1D1F; }

.sgp-extras-input {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  background: #FAFAFB;
  color: #1D1D1F;
  resize: vertical;
}
.sgp-extras-input:focus { outline: none; border-color: #1D1D1F; background: #fff; }

/* Per-product + studio prep checklists */
.sgp-prep-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sgp-prep-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #FAFAFB;
  border: 1px solid #F2F2F7;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sgp-prep-row:hover { background: #F4F4F7; }
.sgp-prep-row.done {
  background: #ECFDF5;
  border-color: #BBF7D0;
}
.sgp-check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}
.sgp-prep-row.done .sgp-check-box {
  background: #16A34A;
  border-color: #16A34A;
}
.sgp-prep-label {
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  flex: 1;
  cursor: pointer;
  user-select: none;
}

/* Studio Ready button */
.sgp-ready-block { margin-top: 22px; }
.sgp-ready-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #1D1D1F;
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 24px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 29, 31, 0.18);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sgp-ready-btn:hover:not(:disabled) {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(29, 29, 31, 0.25);
}
.sgp-ready-btn:disabled {
  background: #C7C7CC;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}
.sgp-ready-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #6B7280;
  line-height: 1.4;
}

.sgp-ready-confirm {
  background: #ECFDF5;
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sgp-ready-confirm-line {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sgp-ready-confirm-check {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: #16A34A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.sgp-ready-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: #065F46;
}
.sgp-ready-confirm-sub {
  font-size: 12px;
  color: #16A34A;
}
.sgp-ready-undo {
  background: transparent;
  border: 1px solid #BBF7D0;
  color: #065F46;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  cursor: pointer;
}
.sgp-ready-undo:hover { background: #fff; }

.sgp-discrepancies {
  margin-top: 16px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 14px 18px;
}
.sgp-discrepancies-title {
  font-size: 13px;
  font-weight: 700;
  color: #92400E;
  margin-bottom: 6px;
}
.sgp-discrepancies ul {
  margin: 0 0 8px;
  padding-left: 22px;
}
.sgp-discrepancies li {
  font-size: 13px;
  color: #78350F;
  line-height: 1.5;
}
.sgp-discrepancies-note {
  font-size: 12px;
  color: #92400E;
  opacity: 0.8;
  margin: 0;
  line-height: 1.4;
}
.pdc-assign-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
}

/* Notes block inside the References tab */
.pd-refs-notes-block {
  margin-bottom: 18px;
}
.pd-refs-notes-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-bottom: 6px;
}
.pd-refs-notes-input {
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #E5E5EA;
  border-radius: 11px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  background: #FBFBFD;
  color: #1D1D1F;
}
.pd-refs-notes-input:focus {
  outline: none;
  border-color: #1D1D1F;
  background: #fff;
}
.pd-refs-notes-input::placeholder { color: #9CA3AF; }

@media (max-width: 980px) {
  .pdc-body { grid-template-columns: 1fr; }
  .pdc-right { border-top: 1px solid #F2F2F7; }
  .pdc-strip { display: none; }
}

/* ─── Action Buttons (shared: delivery, emails, etc.) ─── */
.dlv-btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: inherit;
}
.dlv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dlv-btn-primary {
  background: #374151;
  color: #fff;
}
.dlv-btn-primary:hover:not(:disabled) {
  background: #1F2937;
}
.dlv-btn-ghost {
  background: #F3F4F6;
  color: #374151;
}
.dlv-btn-ghost:hover:not(:disabled) {
  background: #E5E7EB;
}