/* =========================================================
   DesignX - Fashion Design Management System
   Dark-only UI theme via CSS variables (23rd revision: the
   light theme + toggle were removed at Ha_Designers' request —
   dark is now the only mode, no per-user preference)
   Compact density + Inter/Outfit type system
   ========================================================= */

:root {
  --brand: #6d5efc;
  --brand-2: #ff5ca8;
  --brand-gradient: linear-gradient(135deg, #6d5efc 0%, #ff5ca8 100%);

  --bg: #0c0b18;
  --surface: #16152e;
  --surface-2: #1b1a38;
  --surface-3: #232152;
  --border: #292852;
  --text: #f4f4fc;
  --text-muted: #9997c2;
  --sidebar-bg: #0b0a1a;
  --sidebar-text: #9997c2;
  --sidebar-active: #ffffff;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
  --shadow: 0 6px 22px rgba(0, 0, 0, .38);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, .48);

  --success: #16c98d;
  --warning: #ffb547;
  --danger: #ff5c7a;
  --info: #3ea6ff;
  --radius: 16px;
  --radius-sm: 10px;

  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-head: 'Outfit', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* Compact density baseline — Bootstrap's rem-based spacing/type scales down with this */
html { font-size: 14px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  transition: background .25s ease, color .25s ease;
}

h1, h2, h3, h4, h5, h6,
.page-title, .sidebar-brand .name, .logo-mark,
.stat-value, .modal-title, .login-card h3 {
  font-family: var(--font-head);
}

a { text-decoration: none; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 226px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 1000;
  transition: transform .25s ease;
  border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 16px;
}
.sidebar-brand .logo-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13.5px;
  box-shadow: 0 4px 14px rgba(109,94,252,.4);
}
.sidebar-brand .company-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-2); line-height: 1.3; }
.sidebar-brand .name { color: #fff; font-weight: 700; font-size: 16.5px; letter-spacing: .2px; line-height: 1.1; }
.sidebar-brand .slogan { font-size: 10px; color: var(--sidebar-text); opacity: .75; }

.nav-section-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 600;
  color: #5f5d84; padding: 15px 20px 6px;
}
.sidebar .nav-link {
  display: flex; align-items: center; gap: 10px;
  color: var(--sidebar-text); padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  margin: 1px 10px; border-radius: 9px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sidebar .nav-link i { font-size: 15px; width: 18px; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(2px); }
.sidebar .nav-link.active {
  background: var(--brand-gradient); color: #fff;
  box-shadow: 0 4px 14px rgba(109,94,252,.35);
}
.sidebar .nav-link.active i { color: #fff; }

.main-wrap { margin-left: 226px; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; position: sticky; top: 0; z-index: 900;
}
.topbar .page-title { font-size: 17px; font-weight: 700; }
.topbar .page-sub { font-size: 11.5px; color: var(--text-muted); }

.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text); transition: transform .15s ease;
}
.theme-toggle:hover { transform: rotate(20deg); }

.content { padding: 20px 22px 8px; flex: 1; }

/* ---------- Cards ---------- */
.card-x {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Fixed-height wrapper for every Chart.js canvas — required so charts stay a stable size
   (Chart.js "responsive" resizing needs a container with a real height, not one that's sized
   by the canvas itself, otherwise a reflow — e.g. the theme toggle — can collapse the chart). */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { width: 100% !important; height: 100% !important; }

/* Stat tile — icon + value + label, with an always-on color accent bar so each
   metric reads as its own "color" at a glance (not just on hover) and a
   modernized, slightly larger numeral. Accent color defaults to the brand
   gradient; pair with an .accent-* modifier (or --accent-color inline) to
   match the metric's semantic color (success/warning/danger/info). */
.stat-card { padding: 18px 20px 16px; border-radius: var(--radius); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; box-shadow: var(--shadow-sm); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-color, var(--brand-gradient)); opacity: .85; transition: opacity .15s ease, height .15s ease;
}
.stat-card:hover::before { opacity: 1; height: 4px; }
.stat-card.accent-success { --accent-color: var(--success); }
.stat-card.accent-warning { --accent-color: var(--warning); }
.stat-card.accent-danger  { --accent-color: var(--danger); }
.stat-card.accent-info    { --accent-color: var(--info); }
.stat-card .stat-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 13px;
}
.stat-card .stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stat-card .stat-value { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.3px; }
.stat-card .stat-label { color: var(--text-muted); font-size: 12px; margin-top: 6px; font-weight: 500; }
.stat-card .stat-delta {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
  padding: 3px 7px; border-radius: 20px; margin-top: 10px;
}
.stat-card .stat-delta.up { background: rgba(22,201,141,.13); color: var(--success); }
.stat-card .stat-delta.down { background: rgba(255,92,122,.13); color: var(--danger); }
.stat-card .stat-delta.flat { background: var(--surface-2); color: var(--text-muted); }

.bg-soft-brand   { background: rgba(109,94,252,.12); color: var(--brand); }
.bg-soft-success { background: rgba(22,201,141,.12); color: var(--success); }
.bg-soft-warning { background: rgba(255,181,71,.14); color: #d98214; }
.bg-soft-danger  { background: rgba(255,92,122,.12); color: var(--danger); }
.bg-soft-info    { background: rgba(62,166,255,.12); color: var(--info); }

/* ---------- Chart card — consistent header (icon + title + subtitle + trailing action/chip)
   layered on top of the existing .card-x surface/border/radius/shadow. Use as
   <div class="card-x chart-card p-4"> … <div class="chart-card-head">…</div> … */
.chart-card { transition: box-shadow .18s ease, transform .18s ease; }
.chart-card:hover { box-shadow: var(--shadow-lg); }
.chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.chart-card-title-wrap { display: flex; align-items: center; gap: 11px; min-width: 0; }
.chart-card-icon {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15.5px;
}
.chart-card-title { font-weight: 700; font-size: 14px; font-family: var(--font-head); line-height: 1.25; }
.chart-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; font-weight: 500; }
.chart-card-action {
  font-size: 12px; color: var(--brand); font-weight: 600; white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.chart-card-action:hover { color: var(--brand); text-decoration: underline; }
.chart-card-chip {
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  background: var(--surface-2); color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
/* Inline legend key — small colored dot + label, used beside chart-card titles
   or under a chart as a compact alternative/supplement to the Chart.js legend. */
.chart-key-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.chart-key-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Badges ---------- */
.badge-x { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
.badge-secondary { background: var(--surface-2); color: var(--text-muted); }
.badge-warning { background: rgba(255,181,71,.15); color: #d98214; }
.badge-danger { background: rgba(255,92,122,.15); color: var(--danger); }
.badge-info { background: rgba(62,166,255,.15); color: var(--info); }
.badge-success { background: rgba(22,201,141,.15); color: var(--success); }
.badge-primary { background: rgba(109,94,252,.15); color: var(--brand); }

/* ---------- Buttons ---------- */
.btn-brand {
  background: var(--brand-gradient); border: none; color: #fff;
  font-weight: 600; font-size: 13.5px; border-radius: var(--radius-sm); padding: 8px 16px;
  box-shadow: 0 6px 16px rgba(109,94,252,.28); transition: opacity .15s ease, transform .1s ease;
}
.btn-brand:hover { color: #fff; opacity: .92; }
.btn-brand:active { transform: scale(.98); }
.btn-outline-x { border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); background: transparent; font-size: 13.5px; }
.btn-outline-x:hover { background: var(--surface-2); color: var(--text); }
.btn { font-size: 13.5px; }
.btn-sm { font-size: 12px; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px;
}
.form-control:focus, .form-select:focus {
  background: var(--surface-2); color: var(--text); border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(109,94,252,.15);
}
.form-control:disabled, .form-control[readonly],
.form-select:disabled, .form-select[readonly] {
  background: var(--surface-3, var(--surface-2)); color: var(--text-muted);
  border-color: var(--border); opacity: 1; cursor: not-allowed;
}
label.form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }

/* ---------- Table ---------- */
.table-x { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-x th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted);
  padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left;
}
.table-x td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.table-x tr:last-child td { border-bottom: none; }
.table-x tr:hover td { background: var(--surface-2); }

/* ---------- Designer Leaderboard (KPI & Reports, 25th revision) ---------- */
.stat-card.accent-secondary { --accent-color: var(--brand-2); }
.bg-soft-secondary { background: rgba(255,92,168,.13); color: var(--brand-2); }
.lb-table th.lb-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease; }
.lb-table th.lb-sortable:hover { color: var(--text); }
.lb-table th.lb-sortable.active { color: var(--brand); }
.lb-sort-icon { font-size: 9px; margin-left: 3px; opacity: .55; }
.lb-table th.lb-sortable.active .lb-sort-icon { opacity: 1; }
.lb-rank { font-weight: 800; font-size: 13px; color: var(--text-muted); text-align: center; }
.lb-brands { font-size: 11px; color: var(--text-muted); max-width: 190px; display: flex; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.lb-rate-track { width: 64px; height: 6px; background: var(--surface-2); border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.lb-rate-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 6px; }
.lb-table tr.lb-top1 td:first-child { box-shadow: inset 3px 0 0 #f5c451; }
.lb-table tr.lb-top2 td:first-child { box-shadow: inset 3px 0 0 #b8c0d0; }
.lb-table tr.lb-top3 td:first-child { box-shadow: inset 3px 0 0 #d38a54; }
.lb-table tr.lb-top1 .lb-rank { color: #f5c451; }
.lb-table tr.lb-top2 .lb-rank { color: #b8c0d0; }
.lb-table tr.lb-top3 .lb-rank { color: #d38a54; }

/* ---------- Login ---------- */
.login-shell {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 20% 20%, #6d5efc22, transparent 45%), radial-gradient(circle at 80% 80%, #ff5ca822, transparent 45%), var(--bg);
  padding: 20px;
}
.login-card { width: 100%; max-width: 360px; }

/* ---------- Image thumbnails ---------- */
.design-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); }
.thumb-sm { width: 48px; height: 48px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); }

/* Clickable review images (Design Review screen) */
.design-thumb.review-img { cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.design-thumb.review-img:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(109,94,252,.28); }
.design-thumb.review-img.img-selected { box-shadow: 0 0 0 3px var(--brand), 0 10px 22px rgba(109,94,252,.35); }
.img-review-wrap { position: relative; }
.img-zoom-btn {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15,14,30,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; backdrop-filter: blur(2px);
}
.img-zoom-btn:hover { background: rgba(15,14,30,.8); color: #fff; }
.img-slot-tag {
  position: absolute; bottom: 8px; left: 8px; padding: 2px 8px; border-radius: 6px;
  background: rgba(15,14,30,.55); color: #fff; font-size: 10px; font-weight: 700; backdrop-filter: blur(2px);
}
.fb-count-badge {
  position: absolute; top: 8px; left: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--brand-gradient); color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(109,94,252,.4);
}

/* ---------- Numbered per-image feedback badge ---------- */
.pin-composer-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-gradient); color: #fff; font-size: 10px; font-weight: 800; margin-right: 6px; flex-shrink: 0;
}
.pin-composer-badge.stage-director { background: linear-gradient(135deg, #17b26a, #0a8f57); }

/* ---------- Figma-style position pins on review images ---------- */
.img-review-wrap.pin-canvas img.review-img { cursor: crosshair; }
.img-pin {
  position: absolute; width: 25px; height: 25px; border-radius: 50% 50% 50% 4px;
  background: var(--brand-gradient); color: #fff; border: 2px solid #fff; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800;
  transform: translate(-50%, -100%) rotate(-45deg); cursor: pointer; z-index: 5; line-height: 1;
  box-shadow: 0 3px 10px rgba(15,14,30,.35); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.img-pin > span { transform: rotate(45deg); display: block; }
.img-pin:hover { transform: translate(-50%, -100%) rotate(-45deg) scale(1.18); box-shadow: 0 6px 18px rgba(15,14,30,.5); }
.img-pin.pin-director { background: linear-gradient(135deg, #17b26a, #0a8f57); }
.img-pin.pin-resolved { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); opacity: .6; }
.img-pin.pin-resolved:hover { opacity: 1; }
.img-pin.pin-active { box-shadow: 0 0 0 4px rgba(109,94,252,.35), 0 6px 18px rgba(15,14,30,.5); }

.pin-ghost {
  position: absolute; width: 25px; height: 25px; border-radius: 50% 50% 50% 4px;
  background: rgba(109,94,252,.45); border: 2px dashed #fff;
  transform: translate(-50%, -100%) rotate(-45deg); pointer-events: none; z-index: 6;
  animation: pinPulse 1.1s ease-in-out infinite;
}
@keyframes pinPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- Figma-style floating comment popover (new pin composer + existing pin thread) ---------- */
.pin-popover {
  position: fixed; width: 300px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 48px rgba(15,14,30,.32); z-index: 3200;
  opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.pin-popover.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.pin-popover-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pin-popover-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; min-width: 0; }
.pin-popover-close { border: none; background: transparent; color: var(--text-muted); font-size: 19px; line-height: 1; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pin-popover-close:hover { background: var(--surface-2); color: var(--text); }
.pin-popover-body { padding: 10px 12px; overflow-y: auto; flex: 1 1 auto; }
.pin-resolve-chip { font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: .3px; text-transform: uppercase; flex-shrink: 0; }
.pin-resolve-chip.status-open { background: rgba(255,181,71,.15); color: #d98214; }
.pin-resolve-chip.status-resolved { background: rgba(22,201,141,.15); color: var(--success); }

.pin-thread-msg { display: flex; gap: 8px; margin-bottom: 12px; }
.pin-thread-msg:last-child { margin-bottom: 0; }
.pin-avatar {
  width: 25px; height: 25px; border-radius: 50%; background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.pin-avatar.avatar-owner { background: linear-gradient(135deg, #ffb547, #ff8a3d); }
.pin-msg-body { flex: 1; min-width: 0; }
.pin-msg-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.pin-msg-name { font-size: 11.5px; font-weight: 700; }
.pin-msg-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.pin-msg-text { font-size: 12.5px; margin-top: 2px; word-wrap: break-word; white-space: pre-wrap; }
.pin-msg-role { font-size: 9.5px; color: var(--text-muted); }

.pin-popover-footer { padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.pin-popover-footer textarea {
  width: 100%; font-size: 12.5px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--surface-2); color: var(--text); resize: none; margin-bottom: 8px;
}
.pin-popover-actions { display: flex; gap: 8px; }
.pin-popover-actions .btn { flex: 1; }
.imgfb-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 10px 0; }

/* Connector line (SVG, drawn between a feedback comment and its pin) */
.connector-marching { animation: connDash .6s linear infinite; }
@keyframes connDash { to { stroke-dashoffset: -28; } }
.connector-dot { animation: connDotIn .22s ease; transform-origin: center; transform-box: fill-box; }
@keyframes connDotIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* ---------- In-page lightbox (modern zoom, never opens a new tab) ---------- */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(8,7,18,.88); z-index: 3000;
  display: none; align-items: center; justify-content: center; padding: 40px;
  backdrop-filter: blur(3px);
}
.lightbox-overlay.open { display: flex; animation: lightboxFade .18s ease; }
@keyframes lightboxFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-overlay iframe {
  width: 90vw; height: 90vh; max-width: 1000px; border: 0; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff;
}
.lightbox-close {
  position: absolute; top: 22px; right: 28px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }

/* ---------- Per-image feedback list (Design Review) ---------- */
.fb-list-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.fb-list-item:hover { border-color: var(--brand); }
.fb-list-item.fb-active { border-color: var(--brand); background: rgba(109,94,252,.08); }
.fb-list-item.fb-resolved { opacity: .62; }
.fb-list-item .fb-reply-count { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

/* Review panel — always-visible overall decision card (click images directly to pin feedback) */
.review-tip {
  border: 1.5px dashed var(--border); border-radius: 10px; padding: 10px 12px;
  color: var(--text-muted); font-size: 12px; margin-bottom: 14px;
}
.review-tip i { color: var(--brand); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item::before {
  content: ''; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-gradient); border: 3px solid var(--surface);
}

/* ---------- Misc ---------- */
.brand-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gradient);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px;
  flex-shrink: 0;
}
/* Real uploaded profile photo — falls back to .avatar-circle above when no photo is set */
.avatar-photo-wrap { position: relative; border-radius: 50%; flex-shrink: 0; }
.avatar-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); display: block; background: var(--surface-2); }
.avatar-zoom-btn {
  position: absolute; bottom: -4px; right: -4px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 2px solid var(--surface); box-shadow: 0 2px 8px rgba(15,14,30,.35); cursor: pointer;
}
.avatar-zoom-btn:hover { color: #fff; opacity: .9; }
.sidebar-toggle-btn { display: none; }

/* ---------- Designer-wise KPI grid (Head/Director/Admin dashboards + KPI & Reports) ---------- */
.designer-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.designer-kpi-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface-2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.designer-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.dk-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-brand { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; }
.dk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.dk-stat { text-align: center; background: var(--surface); border-radius: 8px; padding: 7px 2px; }
.dk-stat-val { display: block; font-weight: 800; font-size: 14.5px; font-family: var(--font-head); }
.dk-stat-label { display: block; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 1px; }

/* ---------- Trim / Tag Pack tick grid ---------- */
.trim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.trim-pick { cursor: pointer; }
.trim-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.trim-pick-card {
  display: block; position: relative; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 10px; text-align: center; transition: border-color .15s ease, background .15s ease;
}
.trim-pick-thumb { width: 100%; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); margin-bottom: 6px; }
.trim-pick-name { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.trim-pick-type { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.trim-pick .check-icon {
  position: absolute; top: 7px; right: 7px; color: var(--brand); font-size: 15px; opacity: 0; transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease; background: var(--surface); border-radius: 50%;
}
.trim-pick input:checked + .trim-pick-card { border-color: var(--brand); background: rgba(109,94,252,.08); }
.trim-pick input:checked + .trim-pick-card .check-icon { opacity: 1; transform: scale(1); }
.trim-pick input:focus-visible + .trim-pick-card { box-shadow: 0 0 0 3px rgba(109,94,252,.25); }

/* ---------- Notifications ---------- */
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-dropdown {
  width: 320px; max-height: 380px; overflow-y: auto; padding: 10px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.notif-item { display: block; padding: 9px 16px; border-left: 3px solid transparent; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { border-left-color: var(--brand); background: rgba(109,94,252,.05); }

/* ---------- Profile/Logout menu (Bootstrap dropdown, themed dark) ---------- */
.dropdown-menu {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; min-width: 180px;
}
.dropdown-item {
  color: var(--text); border-radius: 8px; padding: 8px 12px; font-size: 13px;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }
.dropdown-item.text-danger { color: var(--danger) !important; }
.dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus { background: rgba(255,92,122,.12); color: var(--danger) !important; }
.dropdown-divider { border-top: 1px solid var(--border); opacity: 1; }

/* ---------- Site footer (all pages) ---------- */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 22px; padding: 14px 22px;
  text-align: center; color: var(--text-muted); font-size: 11.5px;
}
.site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; }
.site-footer-inner .divider { opacity: .4; }
.site-footer-inner strong { color: var(--text); font-weight: 700; }
.site-footer-inner i { margin-right: 3px; }
.login-shell .site-footer { border-top: none; margin-top: 26px; padding: 0; }

@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-wrap { margin-left: 0; }
  .sidebar-toggle-btn { display: flex; }
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* ---------- Modern file dropzones (New/Edit Design — images + tag pack file) ----------
   Whole box is click-to-browse (a <label> wrapping a visually-hidden file input) and
   drag & drop — no separate "Choose File" button, no separate "Upload" button; the
   existing Save Draft / Submit buttons perform the actual upload on form submit. */
.dropzone {
  position: relative; display: block; cursor: pointer;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-2); transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.dropzone:hover { border-color: var(--brand); background: rgba(109,94,252,.05); }
.dropzone.drag-over { border-color: var(--brand); background: rgba(109,94,252,.1); transform: scale(1.01); }
.dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.dropzone-slot { padding: 12px 10px 10px; text-align: center; }
.dropzone-slot .dz-thumb-wrap { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 9px; overflow: hidden; background: var(--surface); margin-bottom: 7px; }
.dropzone-slot .dz-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--text-muted); }
.dz-placeholder i { font-size: 22px; }
.dz-placeholder span { font-size: 10.5px; font-weight: 600; }
.dz-slot-num {
  position: absolute; top: 6px; left: 6px; width: 19px; height: 19px; border-radius: 50%;
  background: rgba(15,14,30,.6); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; z-index: 2; backdrop-filter: blur(2px);
}
.dz-check {
  position: absolute; top: 6px; right: 6px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; z-index: 2;
}
.dropzone-slot.has-file .dz-check { opacity: 1; transform: scale(1); }
.dz-hover-overlay {
  position: absolute; inset: 0; background: rgba(15,14,30,.5); color: #fff; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.dropzone-slot.has-file .dz-thumb-wrap:hover .dz-hover-overlay { opacity: 1; }
.dz-filename { display: block; font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Wide single dropzone (tag pack composite/reference file) */
.dropzone-wide { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.dropzone-wide .dz-icon {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(109,94,252,.12); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.dropzone-wide .dz-text { min-width: 0; flex: 1; }
.dropzone-wide .dz-text-main { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropzone-wide .dz-text-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.dropzone-wide .dz-check { position: static; opacity: 1; transform: none; flex-shrink: 0; }

/* Image-readiness mini progress bar (design form sidebar) */
.img-progress-track { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.img-progress-fill { height: 100%; background: var(--brand-gradient); transition: width .25s ease; }

/* ---------- Design Images / Techpack Upload tab bar (2026-08-25 follow-up) ----------
   The "Design Images" card now has 2 tabs — Design Images (2 slots, was 3) and a new
   Techpack Upload tab: one large, modern dropzone for the design's technical spec sheet,
   image or PDF. Pure client-side show/hide, no page reload — both panes always post with
   the form, whichever is visible. */
.imgtab-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.imgtab {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 9px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.imgtab:hover { color: var(--text); }
.imgtab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.imgtab-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-left: 6px; vertical-align: middle; }

/* Large Techpack Upload dropzone — bigger and more prominent than the wide Tag Pack File
   dropzone, since a technical spec sheet is the more important attachment of the two. */
.dropzone-techpack {
  padding: 30px 20px; min-height: 190px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 4px;
}
.dropzone-techpack .dz-icon-lg {
  width: 60px; height: 60px; border-radius: 16px; background: rgba(109,94,252,.12); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 10px;
  transition: background .15s ease, color .15s ease;
}
.dropzone-techpack.has-file .dz-icon-lg { background: rgba(60,200,140,.15); color: var(--success); }
.dropzone-techpack .dz-text-main { font-size: 14px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-techpack .dz-text-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.dropzone-techpack .dz-check {
  position: absolute; top: 12px; right: 12px; opacity: 0; transition: opacity .15s ease, transform .15s ease; transform: scale(.5);
}
.dropzone-techpack.has-file .dz-check { opacity: 1; transform: scale(1); }

/* ---------- My Designs — search box + hover-zoom cards ---------- */
.search-box { position: relative; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; }
.search-box input { padding-left: 32px; }
.design-card-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 11px; overflow: hidden; margin-bottom: 10px; background: var(--surface-2); }
.design-card-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.design-card:hover .design-card-thumb-wrap img { transform: scale(1.06); }
.design-card { transition: transform .15s ease, box-shadow .15s ease; }
.design-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30,25,80,.14); }
.filter-count { opacity: .75; font-size: 10.5px; margin-left: 2px; }
.empty-state-icon {
  width: 56px; height: 56px; border-radius: 16px; background: rgba(109,94,252,.1); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 14px;
}

/* ---------- Monthly Plan — Design Plan by Brand & Category + Mood Board ---------- */
.bc-entry-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: var(--surface); }
.bc-entry-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.bc-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.bc-meta-item { font-size: 12px; }
.bc-meta-label { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.bc-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 10px; }
.bc-image-thumb-wrap { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.bc-image-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.bc-image-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(15,14,30,.65); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; border: none; cursor: pointer; }
.bc-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.moodboard-swatch {
  min-width: 88px; height: 54px; border-radius: 8px; padding: 6px 8px; display: flex; align-items: flex-end;
  font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); position: relative;
  box-shadow: 0 2px 6px rgba(15,14,30,.12);
}
.moodboard-swatch .swatch-del {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.35);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; border: none; cursor: pointer; line-height: 1;
}
.bc-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.bc-inline-form input[type="color"] { width: 40px; height: 34px; padding: 2px; border-radius: 8px; }

/* ---------- Designer Plan (Qty -> Styles Needed) ---------- */
.dplan-list-card { cursor: pointer; }
.dplan-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dplan-mini-stats > div { text-align: center; }
.dplan-mini-val { font-size: 17px; font-weight: 800; line-height: 1.1; }
.dplan-mini-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }
.dplan-styles-pill {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 4px 11px;
  border-radius: 20px; background: rgba(109,94,252,.13); color: var(--brand);
}
.dplan-preview-box {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  text-align: center; margin-bottom: 4px;
}
.dplan-quickadd-cat { margin-top: 12px; }
.dplan-quickadd-cat form#i_newcat_row { display: flex; }
.dplan-milestone-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dplan-milestone-chip {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 12px; white-space: nowrap; cursor: default; border: none;
}
.dplan-milestone-chip.badge-success { background: rgba(22,201,141,.15); color: var(--success); }
.dplan-milestone-chip.badge-danger { background: rgba(255,92,122,.15); color: var(--danger); }
.dplan-milestone-chip.badge-secondary { background: var(--surface-2); color: var(--text-muted); }
button.dplan-milestone-chip { cursor: pointer; transition: filter .15s; }
button.dplan-milestone-chip:hover { filter: brightness(1.15); }
.dplan-milestone-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px;
  font-size: 12.5px; background: var(--surface-2);
}
.dplan-milestone-list-row form { margin: 0; }
.dplan-history-row {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px;
  background: var(--surface-2);
}
.dplan-history-row:last-child { margin-bottom: 0; }
/* Started vs Completed are two separate batch logs with their own progress bar each
   (32nd revision) — Started uses a distinct accent so the two rows read apart at a glance. */
.dplan-progress-track-row { display: flex; align-items: flex-start; gap: 8px; }
.dplan-fill-started { background: var(--info, #4f8cff); }
.dplan-cat-manager-brand { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--surface); }
.dplan-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dplan-cat-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 6px 5px 11px;
  border-radius: 20px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.dplan-cat-chip form { display: contents; }
.dplan-cat-chip button {
  width: 17px; height: 17px; border-radius: 50%; border: none; background: var(--surface-3); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; line-height: 1;
}
.dplan-cat-chip button:hover { background: var(--danger); color: #fff; }
.dplan-inline-add-form { display: flex; gap: 8px; }

/* ---------- Work Schedule Calendar ---------- */
.wsched-weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px; }
.wsched-weekday-label { text-align: center; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.wsched-week-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px; background: var(--surface-2); border-radius: 10px; margin-top: 12px; margin-bottom: 6px;
}
.wsched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wsched-day-cell {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-height: 92px; background: var(--surface);
  display: flex; flex-direction: column; gap: 4px;
}
.wsched-day-cell.is-muted { opacity: .4; }
.wsched-day-num { font-size: 12px; font-weight: 700; }
.wsched-entry-chip {
  font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: var(--surface-2);
  display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wsched-entry-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.wsched-add-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--border); background: transparent;
  color: var(--text-muted); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 768px) {
  .wsched-weekday-row, .wsched-grid { grid-template-columns: repeat(7, minmax(38px, 1fr)); }
  .wsched-day-cell { min-height: 64px; padding: 4px; }
  .wsched-entry-chip { font-size: 9px; }
}

/* ---------- Reports (27th revision) ---------- */
/* "Passport size" design photo used on all three report tables — a small fixed portrait
   tile (roughly the same 35:45mm ratio as an actual passport photo), object-fit:contain
   on a white backing so the whole design image is visible rather than cropped, matching
   the same contain+white-background choice already used for brand logo tiles. */
.passport-photo {
  width: 62px; height: 80px; object-fit: contain; background: #fff; border-radius: 6px;
  border: 1px solid var(--border); flex: none;
}
.passport-photo-empty {
  width: 62px; height: 80px; border-radius: 6px; border: 1px dashed var(--border);
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 10px; flex: none;
}
.report-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.report-tab {
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.report-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.report-tab .count-pill {
  background: rgba(255,255,255,.25); border-radius: 999px; padding: 1px 7px; font-size: 11px;
}
.report-tab:not(.active) .count-pill { background: var(--surface-3, var(--surface)); }

/* Designer-wise grouping + report header/footer (2026-08-24 follow-up) — each report is now
   sectioned into one block per designer, and the report content carries its own title,
   per-section "User Name / Date From / Date To" header, and a closing company footer, so
   the printed/exported output is self-explanatory without the app chrome around it. */
.report-doc-title {
  font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 800; font-size: 17px;
  padding: 10px 12px 4px; color: var(--text);
}
.report-group-row td { padding: 0; border: none; background: transparent; }
.report-group-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  padding: 9px 12px; margin: 6px 0 2px; background: var(--surface-2); border-radius: 8px;
  border: 1px solid var(--border);
}
.report-group-header .rg-names { display: flex; flex-direction: column; gap: 2px; }
.report-group-header .rg-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.report-group-header .rg-name i { color: var(--brand); margin-right: 4px; }
.report-group-header .rg-name-secondary { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.report-group-header .rg-dates { font-size: 12px; color: var(--text-muted); }
.report-footer { text-align: center; padding: 18px 10px 12px; margin-top: 8px; border-top: 1px dashed var(--border); }
.report-footer .rf-brand {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-2); font-weight: 700;
}
.report-footer .rf-app { font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 800; font-size: 16px; color: var(--text); }
.report-footer .rf-tag { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Print/Export PDF — hides app chrome and filters, keeps only the report content + table,
   and forces a plain light/black-on-white layout regardless of the app's dark-only theme
   so a printed page (or "Save as PDF") doesn't waste toner on a dark background. */
@media print {
  .sidebar, .topbar, .site-footer, .no-print { display: none !important; }
  .main-wrap { margin: 0 !important; }
  .content { padding: 0 !important; }
  body, .app-shell, .content, .card-x, .chart-card {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
  }
  .card-x, .chart-card { border: 1px solid #ccc !important; }
  .table-x th, .table-x td { color: #000 !important; border-color: #ddd !important; }
  .passport-photo, .passport-photo-empty { border-color: #ccc !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .report-doc-title { color: #000 !important; }
  .report-group-header { background: #f2f2f2 !important; border-color: #ccc !important; }
  .report-group-header .rg-name, .report-group-header .rg-dates { color: #000 !important; }
  .report-footer { border-top-color: #ccc !important; }
  .report-footer .rf-brand, .report-footer .rf-app, .report-footer .rf-tag { color: #000 !important; }
}