/* ==========================================================================
   Parcel Information Center — Frontend Stylesheet
   Design: Flat — no borders, no shadows
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── CSS Variables ────────────────────────────────────────────────────────── */
.pic-wrap {
  --pic-sidebar-w: 188px;
  --pic-sidebar-bg: #0f1117;
  --pic-sidebar-border: #1e2330;
  --pic-sidebar-text: #8b95a7;
  --pic-sidebar-text-active: #ffffff;
  --pic-sidebar-accent: #3b7cf0;

  --pic-bg: #f0f3fa;
  --pic-surface: #ffffff;
  --pic-border: transparent;
  --pic-text: #1a202c;
  --pic-text-muted: #64748b;

  --pic-primary: #3b7cf0;
  --pic-primary-dark: #2563eb;
  --pic-success: #10b981;
  --pic-warning: #f59e0b;
  --pic-danger: #ef4444;
  --pic-info: #6366f1;

  --pic-radius: 0px;
  --pic-radius-sm: 0px;
  --pic-shadow: none;
  --pic-shadow-lg: none;

  --pic-font: 'DM Sans', -apple-system, sans-serif;
  --pic-mono: 'JetBrains Mono', 'Courier New', monospace;

  font-family: var(--pic-font);
  color: var(--pic-text);
  box-sizing: border-box;
}

.pic-wrap *, .pic-wrap *::before, .pic-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Dashboard Layout ─────────────────────────────────────────────────────── */
.pic-dashboard-wrap {
  display: flex;
  min-height: 100vh;
  background: var(--pic-bg);
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.pic-sidebar {
  width: var(--pic-sidebar-w);
  background: var(--pic-sidebar-bg);
  border-right: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform 0.25s ease;
}

.pic-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-bottom: none;
}

.pic-brand-icon { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; color: #F6AE31; }
.pic-brand-icon i { color: #F6AE31; font-size: 1.6rem; }
.pic-brand-icon-lg { font-size: 3rem !important; }

.pic-sidebar-logo-img {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
}

.pic-brand-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.pic-brand-logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

.pic-brand-logo { display: none; }
.pic-brand-logo--lg { display: none; }

.pic-brand-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pic-sidebar-text-active);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pic-nav-list {
  list-style: none;
  padding: 12px 8px;
  flex: 1;
}

.pic-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--pic-radius-sm);
  color: var(--pic-sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}

.pic-nav-link:hover {
  background: rgba(255,255,255,0.06);
  color: var(--pic-sidebar-text-active);
}

.pic-nav-link.active {
  background: rgba(59,124,240,0.15);
  color: var(--pic-sidebar-accent);
  border-left: 3px solid var(--pic-sidebar-accent);
}

.pic-nav-icon { font-size: 1rem; flex-shrink: 0; display: flex; align-items: center; color: #ffffff; }
.pic-nav-icon i { font-size: 1rem; color: #ffffff; }

.pic-sidebar-footer {
  padding: 16px;
  border-top: none;
}

.pic-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pic-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--pic-sidebar-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pic-user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pic-sidebar-text-active);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pic-user-role {
  font-size: 0.7rem;
  color: var(--pic-sidebar-text);
}

/* ── Main content area ────────────────────────────────────────────────────── */
.pic-dashboard-wrap {
  /* Prevents the flex container itself from growing to fit an oversized
     child (e.g. a wide table), which is what was forcing the whole page
     off-screen at 100% browser zoom. */
  max-width: 100vw;
  overflow-x: hidden;
}

.pic-main {
  margin-left: var(--pic-sidebar-w);
  flex: 1;
  /* Flex items default to min-width: auto, meaning they refuse to shrink
     below their content's intrinsic width. With more table columns than
     before, that held the entire page open beyond the viewport. min-width:0
     lets .pic-main shrink to the available space so .pic-table-wrap's own
     overflow-x:auto can scroll the table internally instead. */
  min-width: 0;
  min-height: 100vh;
  padding: 32px;
}

.pic-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--pic-sidebar-bg);
  border-bottom: none;
  margin: -32px -32px 24px;
}

.pic-topbar-title { color: #fff; font-weight: 600; font-size: 0.95rem; }
.pic-hamburger {
  background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; padding: 4px;
}

/* ── Page header ──────────────────────────────────────────────────────────── */
.pic-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pic-page-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pic-text);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.pic-card {
  background: var(--pic-surface);
  border-radius: var(--pic-radius);
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.pic-card-header {
  padding: 16px 20px;
  border-bottom: none;
  background: #f4f7fc;
}

.pic-card-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pic-text);
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.pic-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.pic-stat-card {
  background: var(--pic-surface);
  border-radius: var(--pic-radius);
  border: none;
  box-shadow: none;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.pic-stat-card::before { display: none; }

.pic-stat-card--total::before  { background: var(--pic-primary); }
.pic-stat-card--transit::before { background: var(--pic-warning); }
.pic-stat-card--delivered::before { background: var(--pic-success); }
.pic-stat-card--exception::before { background: var(--pic-danger); }

.pic-stat-icon { font-size: 1.8rem; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 0; flex-shrink: 0; }
.pic-stat-icon i { font-size: 1.5rem; }

.pic-stat-icon--total    { background: color-mix(in srgb, var(--pic-primary) 12%, transparent); color: var(--pic-primary); }
.pic-stat-icon--transit  { background: rgba(245,158,11,0.12);  color: var(--pic-warning);  }
.pic-stat-icon--delivered { background: rgba(16,185,129,0.12); color: var(--pic-success);  }
.pic-stat-icon--exception { background: rgba(239,68,68,0.12);  color: var(--pic-danger);   }

.pic-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pic-text);
  font-family: var(--pic-mono);
  line-height: 1;
}

.pic-stat-label {
  font-size: 0.78rem;
  color: var(--pic-text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Infographic Panel ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

.pic-infographic-panel {
  display: flex;
  align-items: stretch;
  background: var(--pic-surface);
  border-radius: var(--pic-radius);
  border: none;
  box-shadow: none;
  overflow: hidden;
  min-height: 92px;
  font-family: 'Open Sans', sans-serif;
}

.pic-info-segment {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 22px 14px;
  position: relative;
  transition: background 0.18s ease;
}

.pic-info-segment:hover { background: #f4f7fc; }

.pic-info-seg-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pic-info-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
}
.pic-info-icon-wrap i { font-size: 1.15rem; }

.pic-info-icon-wrap--total    { background: rgba(26,32,44,0.07); color: #1A202C; }
.pic-info-icon-wrap--transit  { background: rgba(26,32,44,0.07); color: #1A202C; }
.pic-info-icon-wrap--delivered { background: rgba(26,32,44,0.07); color: #1A202C; }
.pic-info-icon-wrap--exception { background: rgba(26,32,44,0.07); color: #1A202C; }

.pic-info-data {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pic-info-value {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--pic-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.pic-info-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pic-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pic-info-bar-track {
  margin-top: 10px;
  height: 3px;
  background: #e8edf5;
  border-radius: 0;
  overflow: hidden;
}

.pic-info-bar {
  height: 100%;
  border-radius: 0;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.pic-info-bar--transit   { background: var(--pic-primary); }
.pic-info-bar--delivered { background: var(--pic-primary); }
.pic-info-bar--exception { background: var(--pic-primary); }

/* Vertical dividers between segments */
.pic-info-divider {
  width: 1px;
  background: #e8edf5;
  margin: 12px 0;
  flex-shrink: 0;
}

.pic-info-segment .pic-info-value { color: #1A202C; }

@media (max-width: 700px) {
  .pic-infographic-panel {
    flex-direction: column;
  }
  .pic-info-divider {
    width: auto;
    height: 1px;
    margin: 0 12px;
  }
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.pic-tab-pane { display: none; }
.pic-tab-pane.active { display: block; }

/* ── Filters bar ──────────────────────────────────────────────────────────── */
.pic-filters-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.pic-filters-bar #pic-search {
  flex: 1;
  min-width: 0;
}

.pic-filters-bar .pic-select {
  flex: 1;
  min-width: 0;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.pic-table-wrap {
  overflow-x: auto;
  /* Keeps scrollbar-drag/trackpad scrolling from chaining into the page's
     own vertical scroll once this element hits either horizontal edge. */
  overscroll-behavior-x: contain;
}

/* ── Table horizontal scroll buttons (1.17.0) ────────────────────────────
   Replaces the 1.16.0/1.16.1 wheel-to-horizontal-scroll attempt, which
   proved unreliable across different mice/browsers even after two fix
   passes (see CLAUDE.md) — a deterministic click control is simpler to get
   right and doesn't depend on hardware-specific wheel-event quirks. Buttons
   live in .pic-table-scroll-container (a plain, non-scrolling wrapper around
   .pic-table-wrap) so position:absolute here anchors to the whole card's
   visible edges rather than scrolling away with the table content. */
.pic-table-scroll-container {
  position: relative;
}
.pic-table-scroll-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Was near-white (rgba(255,255,255,0.92)) — blended into both the white
     table and the light-grey page background, making the button hard to
     spot at all (reported 2026-07-27). A visibly grey background reads as
     a distinct clickable control against both. */
  background: #dde3ec;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--pic-text-muted, #64748b);
  transition: color 0.15s ease, background 0.15s ease;
}
.pic-table-scroll-btn:hover { color: var(--pic-primary, #3b7cf0); background: #eef2f9; }
.pic-table-scroll-btn:disabled { opacity: 0; pointer-events: none; }
.pic-table-scroll-btn--left {
  left: 0;
  box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.12);
}
.pic-table-scroll-btn--right {
  right: 0;
  box-shadow: -6px 0 8px -6px rgba(15, 23, 42, 0.12);
}

.pic-table {
  /* width:100% used to force every column to compress to fit the viewport
     even though .pic-table-wrap is overflow-x:auto and could just scroll —
     with 20+ columns now that the full combined header set is shown, that
     meant ordinary short values (e.g. "In Transit", a couple of sub-tracking
     numbers) were being wrapped/cramped instead of just making the table
     wider. width:max-content (with min-width:100% so a short table still
     fills the card on a wide screen) lets every column size to its actual
     content first — the wrapper's scrollbar (and wheel-scroll, see
     bindParcelFilters() in pic-main.js) is what handles the overflow now. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.pic-table thead tr {
  background: #f4f7fc;
  border-bottom: none;
}

.pic-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pic-text-muted);
  /* Headers may wrap onto 2 lines — with table-layout:auto, a column's
     width is driven by whichever of its th/td needs more room, so a long
     label like "Delivery Agent Ref" forcing a single line was making
     columns far wider than their (usually short/blank) data ever needed.
     Letting the header wrap instead lets the actual data drive the column
     width — see .pic-table td's white-space below for the other half. */
  white-space: normal;
  vertical-align: bottom;
  cursor: pointer;
  user-select: none;
  /* Without a floor, a column whose data is blank on every visible row
     (several of the newer reference/date columns, routinely) had nothing
     else giving it width — table-layout:auto shrank it toward zero, and
     with no minimum, wrapping degraded past "2 lines" into breaking
     individual words letter-by-letter into vertical text (reported
     2026-07-27). Comfortably wider than the longest single word used in any
     header here ("Reference", "Dispatched"), so a word never has to break
     internally. */
  min-width: 100px;
}

.pic-table th:hover { color: var(--pic-primary); }

.pic-th-label {
  /* Previously capped a wrapped header at exactly 2 lines with an ellipsis
     past that (2026-07-27) — with the column count now routinely 20+ and a
     5th milestone date added (2026-07-29, "Carrier Dispatch Date"), several
     longer headers ("Received in Carrier HUB", "Carrier Dispatch Date")
     were getting cut off mid-word even at 2 lines. Client's own call: since
     the table already has horizontal-scroll buttons (2026-07-27) for
     reaching columns that don't fit on screen, there's no need to also
     truncate the header text that IS visible — let a header wrap onto as
     many lines as it needs instead. The min-width floor on .pic-table th
     above still does its job independently (stops the pre-2-line-cap
     letter-by-letter collapse on blank-data columns), so removing the line
     cap here doesn't reintroduce that bug. */
}

.pic-table td {
  padding: 11px 14px;
  border-bottom: none;
  color: var(--pic-text);
  vertical-align: middle;
  /* Data stays on one line — column width follows the (usually short)
     data instead of the (often longer) wrapped header above. Elements that
     deliberately still wrap when they need to (.pic-status-badge for a
     genuinely long status, .pic-sub-tracking-cell's badges once there are
     more than fit) set their own white-space and win over this. */
  white-space: nowrap;
}

.pic-table tbody tr { background: #ffffff; }
.pic-table tbody tr:nth-child(even) { background: #f9fbfd; }
.pic-table tbody tr:hover { background: #f0f4fb; }
.pic-table tbody tr:last-child td { border-bottom: none; }

.pic-table td.pic-tracking-cell {
  font-family: var(--pic-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pic-primary);
}

/* ── Status badges ────────────────────────────────────────────────────────── */
.pic-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: normal;
  /* Raised from 220px (1.7.1) now that .pic-table lets columns size to
     content instead of forcing width:100% — an ordinary short status like
     "In Transit" no longer needs to wrap at all. Still capped, not removed:
     a genuinely very long free-text status (the original 1.7.1 problem)
     should still wrap rather than stretch its column indefinitely. */
  max-width: 320px;
  line-height: 1.4;
}
/* .pic-status-badge is shared with the public tracking page (templates/
   tracking.php) and the Overview tab's small "recent parcels" table — the
   wrap-capable base rule above is correct for those. Only the big Parcel
   Management table (#pic-parcels-table) needs single-line status text now
   that .pic-table td is nowrap by default; scoped here rather than changed
   on the shared class, per the existing 1.7.1 note on this class. */
#pic-parcels-table .pic-status-badge {
  white-space: nowrap;
  max-width: none;
}

.pic-status-badge--delivered  { background: #d1fae5; color: #065f46; }
.pic-status-badge--transit    { background: #dbeafe; color: #1e40af; }
.pic-status-badge--exception  { background: #fee2e2; color: #991b1b; }
.pic-status-badge--depot      { background: #fef3c7; color: #92400e; }
.pic-status-badge--default    { background: #f1f5f9; color: #475569; }

/* ── Action required flag ─────────────────────────────────────────────────── */
.pic-action-flag {
  display: inline-block;
  background: #fef2f2;
  color: var(--pic-danger);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0;
  border: none;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pic-pagination {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: none;
  background: #f4f7fc;
  border-radius: 0;
  font-size: 0.82rem;
  color: var(--pic-text-muted);
}

.pic-page-buttons { display: flex; gap: 4px; }

.pic-page-btn {
  padding: 5px 10px;
  border: none;
  border-radius: var(--pic-radius-sm);
  background: #e8edf5;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--pic-text);
  transition: all 0.15s;
}

.pic-page-btn:hover { background: #dce4f2; color: var(--pic-primary); }
.pic-page-btn.active { background: var(--pic-primary); color: #fff; }
.pic-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.pic-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; }

.pic-form-group { display: flex; flex-direction: column; gap: 6px; }

.pic-form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pic-text);
}

.pic-form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.pic-form-row > * { flex: 1; min-width: 160px; }
.pic-form-row--split { justify-content: space-between; align-items: center; }

.pic-input, .pic-select, textarea.pic-input {
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--pic-radius-sm);
  font-size: 0.85rem;
  font-family: var(--pic-font);
  color: var(--pic-text);
  background: #f0f3fa;
  transition: background 0.15s;
  appearance: none;
  box-sizing: border-box;
}

.pic-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: #f0f3fa;
  padding-right: 30px;
}

.pic-input:focus, .pic-select:focus, textarea.pic-input:focus {
  outline: none;
  background: #e6ecf8;
}

.pic-password-wrap { position: relative; }
.pic-toggle-pw {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0;
}

.pic-checkbox-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; cursor: pointer; color: var(--pic-text-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.pic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--pic-radius-sm);
  font-size: 0.85rem;
  font-family: var(--pic-font);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.pic-btn--primary {
  background: var(--pic-primary);
  color: #fff;
}
.pic-btn--primary:hover { background: var(--pic-primary-dark); }

.pic-btn--ghost {
  background: #e8edf5;
  color: var(--pic-text-muted);
}
.pic-btn--ghost:hover { background: #dce4f2; color: var(--pic-primary); }

.pic-btn--danger { background: var(--pic-danger); color: #fff; }
.pic-btn--danger:hover { background: #dc2626; }

.pic-btn--sm { padding: 6px 12px; font-size: 0.78rem; }
.pic-btn--full { width: 100%; }

.pic-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.pic-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pic-spin 0.6s linear infinite;
}

.pic-btn--ghost .pic-spinner {
  border-color: rgba(100,116,139,0.3);
  border-top-color: var(--pic-text-muted);
}

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

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.pic-alert {
  padding: 10px 14px;
  border-radius: var(--pic-radius-sm);
  font-size: 0.83rem;
  line-height: 1.5;
}

.pic-alert--error   { background: #fef2f2; color: #991b1b; border: none; }
.pic-alert--success { background: #f0fdf4; color: #166534; border: none; }
.pic-alert--warning { background: #fffbeb; color: #92400e; border: none; }

/* ── Drop zone ────────────────────────────────────────────────────────────── */
.pic-drop-zone {
  border: none;
  border-radius: var(--pic-radius);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  background: #f0f3fa;
}

.pic-drop-zone:hover,
.pic-drop-zone.dragover {
  background: #e6ecf8;
}

.pic-drop-icon { font-size: 2.5rem; margin-bottom: 12px; }

.pic-drop-zone p {
  font-size: 0.875rem;
  color: var(--pic-text-muted);
  line-height: 1.6;
}

.pic-drop-zone p strong { color: var(--pic-primary); }

.pic-file-input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

.pic-file-selected {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #e0f2fe;
  border: none;
  border-radius: var(--pic-radius-sm);
  font-size: 0.83rem;
  color: #0369a1;
}

/* ── Upload result ────────────────────────────────────────────────────────── */
.pic-import-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  padding: 20px;
}

.pic-import-stat {
  text-align: center;
  padding: 12px;
  border-radius: var(--pic-radius-sm);
  background: #f4f7fc;
}

.pic-import-stat .pic-stat-value { font-size: 1.5rem; }

.pic-import-errors {
  padding: 0 20px 20px;
  max-height: 200px;
  overflow-y: auto;
}

.pic-import-errors ul {
  list-style: none;
  font-size: 0.8rem;
  color: var(--pic-danger);
}

.pic-import-errors li { padding: 3px 0; border-bottom: none; background: transparent; }

.pic-import-warnings {
  padding: 0 20px 16px;
  max-height: 200px;
  overflow-y: auto;
}

.pic-import-warnings ul {
  list-style: none;
  font-size: 0.8rem;
  color: var(--pic-text);
}

.pic-import-warnings li { padding: 3px 0; margin-bottom: 6px; border-bottom: none; background: transparent; }

/* ── Upload logs table ────────────────────────────────────────────────────── */
.pic-logs-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pic-logs-table th, .pic-logs-table td { padding: 10px 14px; text-align: left; border-bottom: none; }
.pic-logs-table th { background: #f4f7fc; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--pic-text-muted); }
.pic-logs-table tbody tr:nth-child(even) td { background: #f9fbfd; }

/* ── Charts ───────────────────────────────────────────────────────────────── */
.pic-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.pic-chart-card canvas { padding: 20px; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.pic-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: pic-fade-in 0.15s ease;

  --pic-primary:      #3b7cf0;
  --pic-primary-dark: #2563eb;
  --pic-danger:       #ef4444;
  --pic-success:      #10b981;
  --pic-warning:      #f59e0b;
  --pic-surface:      #ffffff;
  --pic-border:       transparent;
  --pic-text:         #1a202c;
  --pic-text-muted:   #64748b;
  --pic-radius:       0px;
  --pic-radius-sm:    0px;
  --pic-font:         'DM Sans', -apple-system, sans-serif;
  --pic-mono:         'JetBrains Mono', 'Courier New', monospace;
}

@keyframes pic-fade-in { from { opacity: 0; } to { opacity: 1; } }

.pic-modal {
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: pic-slide-up 0.2s ease;
}

.pic-modal--lg { max-width: 800px; }

@keyframes pic-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pic-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: none;
  background: #f4f7fc;
}

.pic-modal-header h3 { font-size: 1rem; font-weight: 700; }

.pic-modal-close {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--pic-text-muted); padding: 4px; border-radius: 0;
  transition: background 0.15s;
}
.pic-modal-close:hover { background: #e8edf5; }

.pic-modal-body { padding: 20px; }
.pic-modal-footer { padding: 14px 20px; border-top: none; background: #f4f7fc; display: flex; gap: 8px; justify-content: flex-end; border-radius: 0; }

/* ── Parcel detail modal layout ──────────────────────────────────────────── */
.pic-parcel-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.pic-detail-field { display: flex; flex-direction: column; gap: 4px; }
.pic-detail-field .pic-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pic-text-muted); font-weight: 600; }
.pic-detail-field .pic-value { font-size: 0.875rem; color: var(--pic-text); }
.pic-detail-field .pic-value--mono { font-family: var(--pic-mono); font-size: 0.82rem; color: var(--pic-primary); }

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.pic-timeline { position: relative; padding-left: 20px; }
.pic-timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: #e8edf5; }

.pic-timeline-item {
  position: relative;
  margin-bottom: 16px;
  padding-left: 20px;
}

.pic-timeline-item::before {
  content: ''; position: absolute; left: -14px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pic-primary); border: 2px solid #ffffff;
}

.pic-timeline-date { font-size: 0.72rem; color: var(--pic-text-muted); }
.pic-timeline-status { font-size: 0.85rem; font-weight: 600; color: var(--pic-text); margin-top: 2px; }
.pic-timeline-location { font-size: 0.78rem; color: var(--pic-text-muted); }

/* ── Login page ───────────────────────────────────────────────────────────── */
.pic-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #373737;
  padding: 20px;
}

.pic-login-card {
  background: var(--pic-surface);
  border-radius: 0;
  box-shadow: none;
  padding: 40px;
  width: 100%;
  max-width: 400px;
}

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

.pic-login-brand h1 { font-size: 1.3rem; font-weight: 700; color: var(--pic-text); }
.pic-login-brand p { font-size: 0.82rem; color: var(--pic-text-muted); margin-top: 6px; }

.pic-link { font-size: 0.82rem; color: var(--pic-primary); text-decoration: none; }
.pic-link:hover { text-decoration: underline; }

/* ── Public tracking page ─────────────────────────────────────────────────── */
.pic-tracking-wrap { max-width: 700px; margin: 0 auto; padding: 40px 20px; }

.pic-tracking-hero {
  text-align: center;
  margin-bottom: 32px;
  background: #373737;
  border-radius: 0;
  padding: 48px 32px;
  color: #ffffff;
}

.pic-tracking-hero h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; color: #ffffff !important; }
.pic-tracking-hero p  { font-size: 0.9rem; color: rgba(255,255,255,0.7) !important; margin-bottom: 24px; }

.pic-track-form { width: 100%; }

.pic-track-input-row {
  display: flex;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.pic-track-input-row input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 0;
  border: none;
  font-size: 0.95rem;
  font-family: var(--pic-mono, monospace);
  background: rgba(255,255,255,0.12);
  color: #ffffff !important;
  outline: none;
}
.pic-track-input-row input::placeholder { color: rgba(255,255,255,0.55) !important; opacity: 1; }
.pic-track-input-row input:focus { background: rgba(255,255,255,0.18); }

.pic-track-matches {
  background: var(--pic-surface);
  border-radius: var(--pic-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.pic-track-matches-intro {
  font-size: 0.85rem;
  color: var(--pic-text-muted);
  margin: 0 0 12px;
}
.pic-track-matches-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pic-track-match-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pic-track-match-item:hover {
  border-color: var(--pic-primary, #1a6fce);
  background: #f8fafc;
}
.pic-track-match-number {
  font-family: var(--pic-mono, monospace);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pic-text, #1e293b);
}
.pic-track-match-recipient {
  flex: 1;
  font-size: 0.85rem;
  color: var(--pic-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pic-track-result {
  background: var(--pic-surface);
  border-radius: var(--pic-radius);
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.pic-track-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  background: #f4f7fc;
}

.pic-track-number .pic-label { font-size: 0.7rem; color: var(--pic-text-muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 4px; }
.pic-track-id { font-family: var(--pic-mono); font-size: 1.1rem; font-weight: 700; color: var(--pic-primary); }

.pic-track-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.pic-detail-item {
  padding: 16px 20px;
  border-bottom: none;
  border-right: none;
  background: #ffffff;
}

.pic-detail-item:nth-child(odd) { background: #f9fbfd; }
.pic-detail-item:nth-child(2n) { border-right: none; }

.pic-label { font-size: 0.7rem; color: var(--pic-text-muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 4px; font-weight: 600; }

.pic-track-history { padding: 20px; border-top: none; }
.pic-track-history h3 { margin-bottom: 16px; font-size: 0.95rem; font-weight: 700; }

/* ── Couriers list ────────────────────────────────────────────────────────── */
.pic-couriers-grid {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.pic-courier-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: none;
  border-radius: var(--pic-radius-sm);
  background: #f4f7fc;
}

.pic-courier-name { font-weight: 600; font-size: 0.9rem; }
.pic-courier-meta { font-size: 0.75rem; color: var(--pic-text-muted); margin-top: 2px; }
.pic-courier-actions { display: flex; gap: 6px; }

/* ── Loading / empty states ──────────────────────────────────────────────── */
.pic-loading {
  padding: 32px;
  text-align: center;
  color: var(--pic-text-muted);
  font-size: 0.875rem;
}

.pic-empty {
  padding: 40px;
  text-align: center;
  color: var(--pic-text-muted);
  font-size: 0.875rem;
}

.pic-notice {
  padding: 12px 16px;
  background: #e0f2fe;
  border: none;
  border-radius: var(--pic-radius-sm);
  font-size: 0.875rem;
  color: #0369a1;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pic-sidebar {
    transform: translateX(-100%);
  }
  .pic-sidebar.open {
    transform: translateX(0);
  }
  .pic-main {
    margin-left: 0;
    padding: 0 16px 32px;
  }
  /* The base .pic-topbar rule's -32px margin is sized to counteract
     .pic-main's *desktop* padding (32px all round) — harmless there since
     the topbar is display:none on desktop anyway. At this breakpoint
     .pic-main's own padding changes to `0 16px 32px` (see above), so that
     same -32px top margin was dragging the topbar 32px above its own
     container's actual top edge — straight up into whatever precedes PIC's
     content on the page (e.g. the theme's own header), regardless of that
     header's height. Match the offset to *this* padding instead. */
  .pic-topbar { display: flex; margin: 0 -16px 24px; }
  .pic-charts-grid { grid-template-columns: 1fr; }
  .pic-parcel-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .pic-stats-grid { grid-template-columns: 1fr 1fr; }
  .pic-track-input-row { flex-direction: column; }
  .pic-track-details-grid { grid-template-columns: 1fr; }
  .pic-detail-item { border-right: none; }
  .pic-filters-bar { gap: 6px; flex-wrap: nowrap; }
  .pic-filters-bar select { min-width: 0; }
}

/* ── Action buttons in table ─────────────────────────────────────────────── */
.pic-table-actions { display: flex; gap: 4px; }
.pic-table-actions .pic-btn { padding: 4px 10px; font-size: 0.72rem; }

/* ── Sidebar overlay on mobile ────────────────────────────────────────────── */
.pic-sidebar-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 99;
}
.pic-sidebar-overlay.active { display: block; }

/* ── Parcel edit modal — wider + sectioned ────────────────────────────────── */
.pic-modal--lg { max-width: 860px; }

.pic-edit-section {
  border-top: none;
  padding: 16px 20px;
  background: #ffffff;
}
.pic-edit-section:nth-child(even) { background: #f9fbfd; }
.pic-edit-section:first-child { border-top: none; }

.pic-edit-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  margin-bottom: 12px;
}

.pic-input--mono { font-family: var(--pic-mono, monospace); font-size: 0.82rem; }

#pic-parcel-edit-form .pic-form-row { margin-bottom: 0; }
#pic-parcel-edit-form .pic-form-group { margin-bottom: 12px; }
#pic-parcel-edit-form label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 4px; display: block; }
#pic-parcel-edit-form .pic-input,
#pic-parcel-edit-form .pic-select { font-size: 0.85rem; padding: 7px 10px; }

/* ── Sub-tracking numbers ─────────────────────────────────────────────────── */
#pic-sub-tracking-section {
  border-top: 2px solid #e0ecff;
  background: #f0f6ff;
}
#pic-sub-tracking-section .pic-edit-section-title {
  color: #1a6fce;
}
.pic-sub-tracking-row {
  align-items: center;
}
.pic-sub-tracking-row:last-child {
  border-bottom: none !important;
}
.pic-sub-tracking-add .pic-input {
  font-size: 0.84rem;
  padding: 7px 10px;
}
#pic-sub-tracking-list {
  min-height: 24px;
}

/* ── Sub-tracking table column ────────────────────────────────────────────── */
/* No max-width on .pic-sub-tracking-cell (dropped the 180px/320px caps used
   before) — .pic-table td is now white-space:nowrap, which keeps every
   .pic-sub-num badge on one line without a cap needed; a max-width here
   without matching overflow handling would just let badges spill past the
   cell edge instead of wrapping, which is worse. The column just grows to
   fit them, same as every other data column now. */
.pic-sub-num {
  display: inline-block;
  font-family: var(--pic-mono, monospace);
  font-size: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 5px;
  margin: 1px 2px 1px 0;
  white-space: nowrap;
}
.pic-sub-num-empty {
  color: #cbd5e1;
  font-size: 0.8rem;
}

/* ── Tracking Numbers module (top of modal) ───────────────────────────────── */
.pic-edit-section--tracking {
  background: #f0f6ff !important;
  border-bottom: 2px solid #dbeafe;
}
.pic-edit-section--tracking .pic-edit-section-title {
  color: #1a6fce;
}

/* ── ibundle courier badge ────────────────────────────────────────────────── */
.pic-badge-ibundle {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #f59e0b;
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Settings Page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar Settings Button ────────────────────────────────────────────── */
.pic-btn--sidebar-settings {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  color: var(--pic-sidebar-text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--pic-radius-sm);
  font-size: 0.8rem;
  font-family: var(--pic-font);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 8px;
  text-align: left;
}
.pic-btn--sidebar-settings:hover,
.pic-btn--sidebar-settings.active {
  background: var(--pic-sidebar-accent);
  color: #fff;
  border-color: transparent;
}
.pic-btn--sidebar-settings i {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.pic-version-badge {
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  user-select: none;
}

/* ── Settings Group Card ────────────────────────────────────────────────── */
.pic-settings-group {
  background: var(--pic-surface);
  border-radius: var(--pic-radius);
  box-shadow: var(--pic-shadow);
  overflow: hidden;
}

.pic-settings-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid #eef0f5;
}

.pic-settings-group-header > i {
  font-size: 1.2rem;
  color: var(--pic-primary);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(59,124,240,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pic-settings-group-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pic-text);
}

.pic-settings-group-desc {
  font-size: 0.78rem;
  color: var(--pic-text-muted);
  margin-top: 2px;
}

.pic-settings-group-body {
  padding: 0;
}

/* ── Setting Row ─────────────────────────────────────────────────────────── */
.pic-setting-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
}

.pic-setting-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.pic-setting-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pic-text);
}

.pic-setting-hint {
  font-size: 0.75rem;
  color: var(--pic-text-muted);
}

.pic-setting-control {
  flex-shrink: 0;
}

.pic-setting-divider {
  height: 1px;
  background: #eef0f5;
  margin: 0 24px;
}

/* ── Colour Picker ───────────────────────────────────────────────────────── */
.pic-colour-picker-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pic-colour-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pic-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pic-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.pic-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--pic-primary), 0 2px 8px rgba(0,0,0,0.2);
  transform: scale(1.1);
}

.pic-swatch--custom {
  background: #e8edf5;
  color: var(--pic-text-muted);
  font-size: 0.7rem;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.pic-swatch--custom input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  padding: 0;
}
.pic-swatch--custom i {
  pointer-events: none;
}

.pic-colour-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pic-colour-preview-chip {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--pic-primary);
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.pic-colour-preview-hex {
  font-family: var(--pic-mono);
  font-size: 0.78rem;
  color: var(--pic-text-muted);
  min-width: 62px;
}

/* ── Export Options ──────────────────────────────────────────────────────── */
.pic-export-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pic-select--sm {
  padding: 5px 10px;
  font-size: 0.78rem;
  height: auto;
}

/* ── Settings Notice ─────────────────────────────────────────────────────── */
.pic-settings-notice {
  margin: 0 24px 16px;
  padding: 10px 14px;
  border-radius: var(--pic-radius-sm);
  font-size: 0.82rem;
}
.pic-settings-notice--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.pic-settings-notice--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.pic-settings-notice--info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.pic-sidebar-logo-empty {
  display: block;
  width: 100%;
  height: 40px;
}

/* ── Import controls ─────────────────────────────────────────────────────── */
.pic-import-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pic-import-csv-label,
.pic-import-backup-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pic-import-filename {
  font-size: 0.8rem;
  color: var(--pic-text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pic-import-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.pic-import-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--pic-border);
  border-radius: 99px;
  overflow: hidden;
}
.pic-import-progress-fill {
  height: 100%;
  background: var(--pic-primary);
  border-radius: 99px;
  transition: width 0.25s ease;
  width: 0%;
}
#pic-import-progress-label {
  font-size: 0.78rem;
  color: var(--pic-text-muted);
  white-space: nowrap;
  min-width: 14ch;
}


.pic-logo-upload-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pic-logo-preview-area {
  width: 180px;
  height: 72px;
  border-radius: var(--pic-radius-sm);
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.pic-logo-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 8px;
}
.pic-logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 0.75rem;
}
.pic-logo-placeholder i {
  font-size: 1.25rem;
}
.pic-logo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pic-logo-upload-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pic-logo-upload-label[disabled] {
  opacity: .55;
  pointer-events: none;
}
#pic-logo-status {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--pic-radius-sm);
  font-size: 0.82rem;
}



/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pic-setting-row {
    flex-direction: column;
    gap: 12px;
  }
  .pic-setting-control {
    width: 100%;
  }
  .pic-colour-picker-wrap {
    align-items: flex-start;
  }
  .pic-export-options {
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   User Management
   ═══════════════════════════════════════════════════════════════════════════ */

.pic-users-table {
  width: 100%;
  border-collapse: collapse;
}

.pic-users-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pic-text-muted);
  padding: 10px 24px;
  border-bottom: 1px solid #eef0f5;
  background: #f8fafc;
}

.pic-users-table td {
  padding: 14px 24px;
  font-size: 0.85rem;
  color: var(--pic-text);
  border-bottom: 1px solid #f1f4f9;
  vertical-align: middle;
}

.pic-users-table tr:last-child td { border-bottom: none; }
.pic-users-table tr:hover td { background: #f8fafc; }

.pic-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--pic-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 10px;
  vertical-align: middle;
}

.pic-user-name-cell {
  display: flex;
  align-items: center;
}

.pic-user-name-wrap {
  display: flex;
  flex-direction: column;
}

.pic-user-display { font-weight: 600; font-size: 0.85rem; }
.pic-user-login   { font-size: 0.72rem; color: var(--pic-text-muted); font-family: var(--pic-mono); }

.pic-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}
.pic-role-badge--admin     { background: rgba(99,102,241,0.1); color: #4338ca; }
.pic-role-badge--pic-admin { background: rgba(59,124,240,0.1); color: var(--pic-primary); }
.pic-role-badge--agent     { background: rgba(16,185,129,0.1); color: #047857; }
.pic-role-badge--wp-admin  { background: rgba(245,158,11,0.1); color: #b45309; }

.pic-users-table .pic-table-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pic-user-current-tag {
  font-size: 0.68rem;
  color: var(--pic-text-muted);
  font-style: italic;
  margin-left: 4px;
}

/* ── Bulk Selection ───────────────────────────────────────────────────────── */
.pic-col-check {
  width: 36px;
  text-align: center;
  padding: 0 4px;
}
.pic-col-check input[type="checkbox"],
.pic-row-check {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--pic-primary, #3b7cf0);
}

/* Highlight selected rows */
#pic-parcels-tbody tr:has(.pic-row-check:checked) {
  background: rgba(59, 124, 240, 0.06);
}

/* Bulk action bar */
.pic-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 10px;
  background: rgba(59, 124, 240, 0.08);
  border: 1px solid rgba(59, 124, 240, 0.25);
  border-radius: var(--pic-radius, 8px);
  font-size: 0.84rem;
}
.pic-bulk-count {
  font-weight: 600;
  color: var(--pic-primary, #3b7cf0);
  min-width: 80px;
}

/* ── Analytics compact grid ────────────────────────────────────────────── */
.pic-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.pic-analytics-grid--halves {
  grid-template-columns: 1fr 1fr;
}
.pic-card-header--compact {
  padding: 6px 12px;
  border-bottom: 1px solid var(--pic-border, #e2e8f0);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pic-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pic-chart-card canvas {
  padding: 8px 10px 4px;
}
.pic-chart-wrap {
  position: relative;
  height: 160px;
  padding: 6px 8px 4px;
}

/* ── Analytics stat pills ──────────────────────────────────────────────── */
.pic-analytics-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pic-apill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--pic-surface-alt, #f8fafc);
  border: 1px solid var(--pic-border, #e2e8f0);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--pic-text-muted, #64748b);
  white-space: nowrap;
}
.pic-apill b {
  color: var(--pic-text, #1e293b);
  font-weight: 700;
}
.pic-apill--accent {
  border-color: var(--pic-primary, #3b7cf0);
  background: rgba(59,124,240,0.06);
}
.pic-apill--accent b {
  color: var(--pic-primary, #3b7cf0);
}

/* ── Compact table variant ──────────────────────────────────────────────── */
.pic-table--compact td,
.pic-table--compact th {
  padding: 4px 8px;
  font-size: 0.76rem;
}

/* The Parcels table's row height is often governed by the View/Delete
   buttons and the Status badge, not the <td> padding around them — on the
   analytics tables this class was originally written for, cells only ever
   hold plain text, so this was never needed there. Without shrinking these
   too, toggling "Compact Rows" on the Parcels table barely changes row
   height, since the buttons/badge still take up the same space regardless
   of how much the surrounding cell padding shrinks. */
.pic-table--compact .pic-btn--sm {
  padding: 3px 8px;
  font-size: 0.7rem;
}
.pic-table--compact .pic-status-badge {
  padding: 1px 8px;
  font-size: 0.68rem;
}

@media (max-width: 700px) {
  .pic-analytics-grid,
  .pic-analytics-grid--halves { grid-template-columns: 1fr; }
}

/* ── Nav Visibility Toggles ─────────────────────────────────────────────── */
[data-nav].pic-nav-hidden { display: none !important; }

.pic-nav-vis-list {
  padding: 12px 24px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pic-nav-vis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  /* Deliberately a literal colour, not var(--pic-border, #e2e8f0) — this
     theme sets --pic-border: transparent at :root (its "flat design, no
     borders" default), which silently defeats any var(...) fallback here
     too, same bug class as .pic-toggle-track's off-state background (see
     that rule's own comment below). Row separators are functionally
     necessary here (this list can run to 20+ rows), not decorative, so it
     needs a real colour like the toggle track did. */
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}
.pic-nav-vis-row:last-child { border-bottom: none; }
.pic-nav-vis-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pic-text, #1e293b);
}

/* Toggle switch */
.pic-toggle-switch { position: relative; display: inline-flex; align-items: center; }
.pic-toggle-switch input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.pic-toggle-track {
  display: inline-block;
  width: 40px; height: 22px;
  /* Deliberately a literal colour, not var(--pic-border, #cbd5e1) — this
     theme defines --pic-border as `transparent` elsewhere, so that fallback
     never actually took effect and every "off" toggle rendered invisible
     against a white panel. */
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
.pic-toggle-switch input:checked + .pic-toggle-track {
  background: var(--pic-primary, #3b7cf0);
}
.pic-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: left 0.2s;
}
.pic-toggle-switch input:checked + .pic-toggle-track .pic-toggle-thumb {
  left: 21px;
}

/* Status notice inline */
.pic-settings-notice {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ── Admin Delete-All Bar ────────────────────────────────────────────────── */
.pic-admin-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 0 8px;
}

.pic-btn--danger-outline {
  background: transparent;
  color: var(--pic-danger, #dc2626);
  border: 1.5px solid var(--pic-danger, #dc2626);
}
.pic-btn--danger-outline:hover:not(:disabled) {
  background: var(--pic-danger, #dc2626);
  color: #fff;
}

/* ── Analytics: Printable Report ─────────────────────────────────────────── */
.pic-report-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 2px;
}
.pic-report-controls-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pic-muted, #64748b);
}
.pic-report-controls-field .pic-input {
  padding: 6px 10px;
  font-size: 0.85rem;
}
.pic-report-controls-hint {
  font-size: 0.76rem;
  color: var(--pic-muted, #94a3b8);
}

/* Off-screen until a print is triggered — kept as a body-level sibling
   (see bindSidebar() in pic-main.js) so it isn't nested inside a tab-pane
   that's fighting its own display:none rules. */
#pic-print-report {
  display: none;
}

@media print {
  /* Print only the report — hide everything else on the page, including
     the sidebar/topbar chrome and whichever tab happens to be active. */
  body * {
    visibility: hidden;
  }
  #pic-print-report,
  #pic-print-report * {
    visibility: visible;
  }
  #pic-print-report {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #111;
  }

  .pic-report-header h1 {
    font-size: 20px;
    margin: 0 0 6px;
  }
  .pic-report-meta {
    display: flex;
    gap: 20px;
    font-size: 11px;
    color: #444;
    margin-bottom: 16px;
  }

  .pic-report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
  }
  .pic-report-stat {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 14px;
    min-width: 110px;
  }
  .pic-report-stat span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #666;
  }
  .pic-report-stat strong {
    display: block;
    font-size: 16px;
    margin-top: 2px;
  }

  .pic-report-footnote {
    font-size: 10px;
    color: #666;
    margin: 0 0 18px;
  }

  #pic-print-report h2 {
    font-size: 14px;
    border-bottom: 1px solid #999;
    padding-bottom: 4px;
    margin: 18px 0 8px;
    page-break-after: avoid;
  }

  #pic-print-report table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 11px;
    page-break-inside: auto;
  }
  #pic-print-report th,
  #pic-print-report td {
    border: 1px solid #ccc;
    padding: 4px 7px;
    text-align: left;
  }
  #pic-print-report th {
    background: #f1f5f9;
  }
  #pic-print-report tr {
    page-break-inside: avoid;
  }
}