/* ==========================================================================
   public/assets/css/main.css
   Yiwu Baabde Logistics Portal — Design System
   Version 1.1 · May 2026
   ========================================================================== */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
  /* ── Brand Colours ─────────────────────────────────────────────────────── */
  --color-primary:        #C8662A;
  --color-primary-dark:   #A0511E;
  --color-primary-light:  #FFD8B0;

  /* ── Surface / Background ──────────────────────────────────────────────── */
  --color-bg:             #FFF8F0;
  --color-surface:        #FFFFFF;
  --color-sidebar-bg:     #F5EDE8;
  --color-dark-bg:        #3D2B3D;

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --color-text-primary:   #212121;
  --color-text-secondary: #616161;
  --color-text-muted:     #9E9E9E;

  /* ── Border ────────────────────────────────────────────────────────────── */
  --color-border:         #E0E0E0;

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --color-success:        #2E7D32;
  --color-success-light:  #E8F5E9;
  --color-warning:        #F57F17;
  --color-warning-light:  #FFF8E1;
  --color-danger:         #C62828;
  --color-danger-light:   #FFEBEE;
  --color-info:           #1565C0;
  --color-info-light:     #E3F2FD;

  /* ── Shipment Type Badges ──────────────────────────────────────────────── */
  --color-sea:            #C8662A;
  --color-air:            #1565C0;

  /* ── Tracking Bar ──────────────────────────────────────────────────────── */
  --color-track-done:     #2E7D32;
  --color-track-active:   #C8662A;
  --color-track-pending:  #BDBDBD;

  /* ── Spacing (4 px base unit) ──────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --space-13: 72px;
  --space-14: 80px;
  --space-15: 96px;
  --space-16: 128px;

  /* ── Border Radius ─────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Box Shadow ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* ── Typography Scale ──────────────────────────────────────────────────── */
  --text-xs:  11px;
  --text-sm:  13px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  26px;
  --text-2xl: 34px;

  /* ── Breakpoints (reference — use inside @media only) ─────────────────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ── Transition ────────────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Tracking bar geometry ─────────────────────────────────────────────── */
  --track-circle-size: 36px;
  --track-line-height: 3px;
}


/* ==========================================================================
   2. CSS RESET
   ========================================================================== */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: "Inter", "Noto Sans SC", sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   3. TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

.text-xs   { font-size: var(--text-xs);   }
.text-sm   { font-size: var(--text-sm);   }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md);   }
.text-lg   { font-size: var(--text-lg);   font-weight: 600; }
.text-xl   { font-size: var(--text-xl);   font-weight: 700; }
.text-2xl  { font-size: var(--text-2xl);  font-weight: 700; }

.text-primary   { color: var(--color-text-primary);   }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted);     }
.text-brand     { color: var(--color-primary);        }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }
.font-extrabold { font-weight: 800; }


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* ── Shared base ─────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 80px;
  padding: 10px 20px;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast),
    box-shadow       var(--transition-fast),
    opacity          var(--transition-fast);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* ── Primary ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color: #ffffff;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color:     var(--color-primary-dark);
  color: #ffffff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.btn-primary:active:not(:disabled) {
  background-color: #8a4219;
  border-color:     #8a4219;
}

/* ── Secondary (outlined) ────────────────────────────────────────────────── */
.btn-secondary {
  background-color: transparent;
  border-color:     var(--color-primary);
  color:            var(--color-primary);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  text-decoration: none;
}
.btn-secondary:active:not(:disabled) {
  background-color: #f5c98a;
}

/* ── Danger ──────────────────────────────────────────────────────────────── */
.btn-danger {
  background-color: var(--color-danger);
  border-color:     var(--color-danger);
  color: #ffffff;
}
.btn-danger:hover:not(:disabled) {
  background-color: #a52020;
  border-color:     #a52020;
  color: #ffffff;
  text-decoration: none;
}
.btn-danger:active:not(:disabled) {
  background-color: #8b1a1a;
}

/* ── Ghost ───────────────────────────────────────────────────────────────── */
.btn-ghost {
  background-color: transparent;
  border-color:     transparent;
  color:            var(--color-text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-text-primary);
  text-decoration: none;
}
.btn-ghost:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.10);
}

/* ── Ghost White (for dark backgrounds) ─────────────────────────────────── */
.btn-ghost-white {
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: var(--text-base);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}
.btn-ghost-white:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-decoration: none;
}

/* ── Disabled state (all buttons) ───────────────────────────────────────── */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-ghost:disabled,
.btn-ghost-white:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Loading spinner (add .btn--loading via JS) ─────────────────────────── */
.btn--loading {
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
}
.btn-secondary.btn--loading::after,
.btn-ghost.btn--loading::after {
  border-color: rgba(200, 102, 42, 0.3);
  border-top-color: var(--color-primary);
}

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

/* ── Size modifiers ──────────────────────────────────────────────────────── */
.btn-sm {
  padding: 6px 14px;
  font-size: var(--text-sm);
  min-width: 60px;
}
.btn-lg {
  padding: 14px 28px;
  font-size: var(--text-md);
  min-width: 120px;
  border-radius: var(--radius-lg);
}


/* ==========================================================================
   5. STATUS BADGES
   ========================================================================== */

/* ── Shared badge base ───────────────────────────────────────────────────── */
[class^="badge-"],
[class*=" badge-"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Payment status ──────────────────────────────────────────────────────── */
.badge-paid {
  background-color: var(--color-success-light);
  color: var(--color-success);
}
.badge-unpaid {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

/* ── Shipment tracking status ────────────────────────────────────────────── */
.badge-shipping {
  background-color: var(--color-info-light);
  color: var(--color-info);
}
.badge-arrived {
  background-color: var(--color-success-light);
  color: var(--color-success);
}
.badge-in-china {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.badge-loading {
  background-color: #FFF3E0;
  color: #E65100;
}

.badge-delivered {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* ── Shipment type ───────────────────────────────────────────────────────── */
.badge-sea {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.badge-air {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

/* ── Generic semantic ────────────────────────────────────────────────────── */
.badge-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}
.badge-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}
.badge-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}
.badge-info {
  background-color: var(--color-info-light);
  color: var(--color-info);
}


/* ==========================================================================
   6. CARD
   ========================================================================== */

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card--bordered {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* Shipment card — left accent border */
.card--shipment {
  border-left: 4px solid var(--color-primary);
}

/* Stats card — coloured top border */
.card--stat {
  border-top: 3px solid var(--color-primary);
  text-align: center;
}
.card--stat .card__number {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}
.card--stat .card__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.card__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-primary);
}


/* ==========================================================================
   7. TABLE
   ========================================================================== */

/* Horizontal scroll wrapper */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.table-wrapper table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  border-spacing: 0;
}

/* ── Head ────────────────────────────────────────────────────────────────── */
.table-wrapper thead,
table.data-table thead {
  background-color: var(--color-dark-bg);
}

.table-wrapper thead th,
table.data-table thead th {
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
}

/* Sortable column header */
.table-wrapper thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.table-wrapper thead th.sortable:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.table-wrapper thead th.sort-asc::after  { content: " ▲"; font-size: 10px; color: var(--color-primary-light); }
.table-wrapper thead th.sort-desc::after { content: " ▼"; font-size: 10px; color: var(--color-primary-light); }

/* ── Body ────────────────────────────────────────────────────────────────── */
.table-wrapper tbody tr,
table.data-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

/* Alternating row stripes */
.table-wrapper tbody tr:nth-child(odd),
table.data-table tbody tr:nth-child(odd) {
  background-color: var(--color-surface);
}
.table-wrapper tbody tr:nth-child(even),
table.data-table tbody tr:nth-child(even) {
  background-color: var(--color-bg);
}

/* Hover */
.table-wrapper tbody tr:hover,
table.data-table tbody tr:hover {
  background-color: #FFF0E6;
}

.table-wrapper tbody td,
table.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  vertical-align: middle;
}

/* ── Footer row ──────────────────────────────────────────────────────────── */
.table-wrapper tfoot tr,
table.data-table tfoot tr {
  background-color: var(--color-surface);
  border-top: 2px solid var(--color-border);
}
.table-wrapper tfoot td,
table.data-table tfoot td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.table-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* ==========================================================================
   8. FORM COMPONENTS
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.form-label .required {
  color: var(--color-danger);
  margin-left: 2px;
}

/* ── Shared input / select / textarea base ───────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Focus ring using primary colour */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200, 102, 42, 0.18);
}

/* Error state */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.18);
}

/* Success state */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
  border-color: var(--color-success);
}

/* Disabled */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: #f5f5f5;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Select — custom arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Inline field error message */
.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: 2px;
}

/* Helper text */
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Input with icon ─────────────────────────────────────────────────────── */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrapper .form-input {
  padding-left: 40px;
}
.input-icon {
  position: absolute;
  left: 12px;
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* ── Checkbox / Radio ────────────────────────────────────────────────────── */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.form-check-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}


/* ==========================================================================
   9. ALERT / NOTIFICATION BANNERS
   ========================================================================== */

.alert-success,
.alert-error,
.alert-warning,
.alert-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  border-left: 4px solid transparent;
}

.alert-success {
  background-color: var(--color-success-light);
  color: #1B5E20;
  border-left-color: var(--color-success);
}
.alert-error {
  background-color: var(--color-danger-light);
  color: #B71C1C;
  border-left-color: var(--color-danger);
}
.alert-warning {
  background-color: var(--color-warning-light);
  color: #E65100;
  border-left-color: var(--color-warning);
}
.alert-info {
  background-color: var(--color-info-light);
  color: #0D47A1;
  border-left-color: var(--color-info);
}

.alert-success strong,
.alert-error strong,
.alert-warning strong,
.alert-info strong {
  font-weight: 700;
}


/* ==========================================================================
   10. SHIPMENT TRACKING PROGRESS BAR
   ========================================================================== */

/*
 * 6-step horizontal bar:
 *   China  →  Loading  →  Shipping  →  At Stop  →  Arrived  →  Delivered
 *
 * Each step:  .track-step
 *   ├─ .track-circle   (circle icon)
 *   ├─ .track-line     (connecting line to the right, except last step)
 *   └─ .track-label    (text below circle)
 *
 * State modifiers on .track-step:
 *   .is-done    — completed step
 *   .is-active  — current step (animated pulse)
 *   (default)   — pending
 */

/* ── Outer bar container ─────────────────────────────────────────────────── */
.tracking-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  position: relative;
  padding: var(--space-2) 0 var(--space-8);
  overflow-x: auto;
}

/* ── Each step wrapper ───────────────────────────────────────────────────── */
.track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 64px;
}

/* ── Connecting line drawn as a pseudo-element on each step (except last) ── */
.track-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--track-circle-size) / 2 - var(--track-line-height) / 2);
  left: calc(50% + var(--track-circle-size) / 2);
  right: calc(-50% + var(--track-circle-size) / 2);
  height: var(--track-line-height);
  background-color: var(--color-track-pending);
  border-radius: var(--radius-full);
  z-index: 0;
  transition: background-color var(--transition-slow);
}

/* Completed steps: line turns green */
.track-step.is-done:not(:last-child)::after {
  background-color: var(--color-track-done);
}

/* ── Circle ──────────────────────────────────────────────────────────────── */
.track-circle {
  width:  var(--track-circle-size);
  height: var(--track-circle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition:
    background-color var(--transition-base),
    border-color     var(--transition-base),
    box-shadow       var(--transition-base);
  flex-shrink: 0;

  /* Default / pending */
  background-color: var(--color-surface);
  border: 2.5px solid var(--color-track-pending);
}

/* Circle icon / checkmark */
.track-circle svg,
.track-circle .track-icon {
  width: 16px;
  height: 16px;
  color: var(--color-track-pending);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── Done state ──────────────────────────────────────────────────────────── */
.track-step.is-done .track-circle {
  background-color: var(--color-track-done);
  border-color: var(--color-track-done);
}
.track-step.is-done .track-circle svg,
.track-step.is-done .track-circle .track-icon {
  color: #ffffff;
  opacity: 1;
}

/* ── Active state ────────────────────────────────────────────────────────── */
.track-step.is-active .track-circle {
  background-color: var(--color-track-active);
  border-color: var(--color-track-active);
  box-shadow: 0 0 0 0 rgba(200, 102, 42, 0.45);
  animation: track-pulse 1.8s ease-out infinite;
}
.track-step.is-active .track-circle svg,
.track-step.is-active .track-circle .track-icon {
  color: #ffffff;
  opacity: 1;
}

@keyframes track-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(200, 102, 42, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(200, 102, 42, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(200, 102, 42, 0);    }
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.track-label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}

.track-step.is-done  .track-label { color: var(--color-track-done);    font-weight: 600; }
.track-step.is-active .track-label { color: var(--color-track-active); font-weight: 700; }

/* ── Sub-date label (optional) ───────────────────────────────────────────── */
.track-date {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 2px;
}


/* ── Mini tracking bar (for table rows) ─────────────────────────────────── */
.tracking-bar--mini {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
}
.tracking-bar--mini .track-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-track-pending);
  flex-shrink: 0;
}
.tracking-bar--mini .track-dot.is-done   { background-color: var(--color-track-done);    }
.tracking-bar--mini .track-dot.is-active { background-color: var(--color-track-active);  }
.tracking-bar--mini .track-line-mini {
  flex: 1;
  height: 2px;
  background-color: var(--color-track-pending);
  border-radius: var(--radius-full);
}
.tracking-bar--mini .track-line-mini.is-done { background-color: var(--color-track-done); }


/* ==========================================================================
   11. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-sm { max-width: 800px;  margin: 0 auto; padding: 0 var(--space-6); }
.container-md { max-width: 960px;  margin: 0 auto; padding: 0 var(--space-6); }

.section {
  padding: var(--space-14) 0;
}

.section__heading {
  text-align: center;
  margin-bottom: var(--space-10);
}
.section__heading h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}
.section__heading .accent {
  width: 40px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
  margin: 10px auto 12px;
}
.section__heading p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  max-width: 560px;
  margin: 0 auto;
}

/* Flex helpers */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1        { flex: 1; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* Spacing helpers */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Visibility */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}


/* ==========================================================================
   12. PORTAL LAYOUT SHELL
   ========================================================================== */

/* Two-column portal: fixed sidebar + fluid main */
.portal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.portal-sidebar {
  background-color: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.portal-main {
  background-color: var(--color-bg);
  min-height: 100vh;
  padding: var(--space-8);
}

/* Sidebar nav link */
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  margin: 2px var(--space-2);
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
  background-color: var(--color-dark-bg);
  color: #ffffff;
  text-decoration: none;
}
.sidebar-nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Admin layout: narrower sidebar */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.admin-sidebar {
  background-color: var(--color-dark-bg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-main {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.admin-main__content {
  padding: var(--space-8);
  flex: 1;
}


/* ==========================================================================
   13. MISCELLANEOUS COMPONENTS
   ========================================================================== */

/* ── Toast notification ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  pointer-events: all;
  animation: toast-in 0.3s ease;
  max-width: 360px;
}
.toast__item--success { background-color: var(--color-success); color: #fff; }
.toast__item--error   { background-color: var(--color-danger);  color: #fff; }
.toast__item--warning { background-color: var(--color-warning); color: #fff; }
.toast__item--info    { background-color: var(--color-info);    color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.modal__close:hover {
  color: var(--color-text-primary);
  background-color: rgba(0,0,0,0.06);
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.88);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* ── Avatar circle ───────────────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.avatar-sm  { width: 32px;  height: 32px;  font-size: var(--text-xs);  }
.avatar-md  { width: 48px;  height: 48px;  font-size: var(--text-sm);  }
.avatar-lg  { width: 64px;  height: 64px;  font-size: var(--text-md);  }
.avatar-xl  { width: 80px;  height: 80px;  font-size: var(--text-lg);  }

/* ── Pill / chip ─────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 12px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-14) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state svg {
  width: 56px;
  height: 56px;
  color: var(--color-border);
  margin: 0 auto var(--space-4);
}
.empty-state h3 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.empty-state p {
  font-size: var(--text-sm);
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.page-header__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}
.page-header__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* ── Filter chips row ────────────────────────────────────────────────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.filter-chip {
  padding: 5px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.filter-chip:hover,
.filter-chip.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}


/* ==========================================================================
   14. RESPONSIVE — MOBILE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
  /* Admin/portal sidebar collapse */
  .portal-layout,
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .portal-sidebar,
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 7000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .portal-sidebar.is-open,
  .admin-sidebar.is-open {
    transform: translateX(0);
  }

  .portal-main,
  .admin-main {
    min-height: 100vh;
  }
}

@media (max-width: 768px) {
  .container,
  .container-sm,
  .container-md {
    padding: 0 var(--space-4);
  }

  .section {
    padding: var(--space-10) 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .portal-main,
  .admin-main__content {
    padding: var(--space-5);
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── Tracking bar → vertical timeline on mobile ────────────────────────── */
  .tracking-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 var(--space-4) var(--space-2);
    overflow-x: visible;
    gap: 0;
  }

  .track-step {
    flex-direction: row;
    align-items: flex-start;
    flex: none;
    width: 100%;
    min-width: unset;
    padding: 0 0 var(--space-6) 0;
    position: relative;
  }

  /* Vertical connecting line */
  .track-step:not(:last-child)::after {
    /* Reset horizontal line */
    top:   calc(var(--track-circle-size));
    left:  calc(var(--track-circle-size) / 2 - var(--track-line-height) / 2);
    right: unset;
    width: var(--track-line-height);
    height: calc(100% - var(--track-circle-size) + var(--space-6));
    border-radius: var(--radius-full);
  }

  .track-label {
    text-align: left;
    margin-top: 8px;
    margin-left: var(--space-3);
    white-space: normal;
  }

  .track-date {
    text-align: left;
    margin-left: var(--space-3);
  }

  .track-circle {
    flex-shrink: 0;
  }

  /* Table scroll hint */
  .table-wrapper::before {
    content: "← scroll →";
    display: block;
    text-align: center;
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 4px 0;
  }
}

@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    width: 100%;
    justify-content: center;
  }

  .modal {
    padding: var(--space-5);
  }

  .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }
  .toast__item {
    max-width: 100%;
  }
}


/* ==========================================================================
   15. PRINT
   ========================================================================== */

@media print {
  .portal-sidebar,
  .admin-sidebar,
  .site-nav,
  .top-bar,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-ghost {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}