/* ============================================================
   Conscious Indi — Customer Panel Component System
   ------------------------------------------------------------
   Scoped to /customer/*.html ONLY. Do not link from admin/,
   vendor/, influencer/, or storefront pages.

   Load order: bharatcraft.css -> conscious-pages.css -> this file.
   This file extends the tokens already defined in bharatcraft.css
   (colors, radius, shadows, type) and the dashboard shell already
   defined in conscious-pages.css (sidebar, topbar, stat cards,
   chart card, widget cards, base table). It mirrors the sibling
   vendor-panel.css component library 1:1 for every class name the
   two panels share (status badges, alerts, forms, data table
   chrome, reviews, FAQ, dropdowns, mobile sidebar drawer,
   empty/loading states) so both panels stay visually identical,
   then adds the handful of components that are unique to the
   customer experience (order detail cards, shipment tracking
   timeline) that were never styled anywhere.
   ============================================================ */

:root {
  /* ---- Spacing scale (4/8/12/16/20/24/32) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---- Danger/semantic color ----
     bharatcraft.css has no red token; conscious-pages.css already
     hardcodes #e53e3e for negative stat trends, so this formalizes
     that exact color rather than introducing a second, different red. */
  --danger:       #E53E3E;
  --danger-dark:  #C53030;
  --danger-pale:  #FDEDED;

  /* ---- Neutral color (for "returned"/withdrawn-type states that
     are neither a success nor a failure) ---- */
  --neutral-dark: #57534E;
  --neutral-pale: #F1F0EE;
}

/* ============================================================
   1. STATUS BADGES
   ============================================================ */
.ci-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.ci-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ci-status-active,
.ci-status-delivered,
.ci-status-paid,
.ci-status-completed,
.ci-status-approved,
.ci-status-in-stock   { background: var(--green-pale);  color: var(--green-dark); }

.ci-status-pending,
.ci-status-draft,
.ci-status-low-stock  { background: var(--gold-pale);   color: var(--gold-dark); }

.ci-status-processing,
.ci-status-shipped,
.ci-status-in-transit { background: var(--navy-pale);   color: var(--navy); }

.ci-status-inactive,
.ci-status-cancelled,
.ci-status-rejected,
.ci-status-failed,
.ci-status-out-of-stock { background: var(--danger-pale); color: var(--danger-dark); }

/* Customer-only outcome: item went back to the vendor. Not a
   failure (that's "cancelled") and not a success green — a
   neutral slate reads correctly for both card and table use. */
.ci-status-returned { background: var(--neutral-pale); color: var(--neutral-dark); }

/* ============================================================
   2. ALERTS
   ============================================================ */
.ci-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.ci-alert i { font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.ci-alert-info    { background: var(--navy-pale);   color: var(--navy);       border-color: rgba(0,0,128,0.12); }
.ci-alert-success { background: var(--green-pale);  color: var(--green-dark); border-color: rgba(19,136,8,0.15); }
.ci-alert-warning { background: var(--gold-pale);   color: var(--gold-dark);  border-color: rgba(201,164,74,0.25); }
.ci-alert-danger  { background: var(--danger-pale); color: var(--danger-dark);border-color: rgba(229,62,62,0.2); }

/* ============================================================
   3. FORMS
   ============================================================ */
.ci-form-card {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--dash-border);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.ci-form-card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--dash-border);
}
.ci-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.ci-form-row.cols-1 { grid-template-columns: 1fr; }
.ci-form-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.ci-form-row > .ci-form-group { margin-bottom: 0; }
.ci-form-group:last-child { margin-bottom: 0; }

.ci-form-label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.ci-form-label .required { color: var(--danger); margin-left: 2px; }

.ci-form-input,
.ci-form-select,
.ci-form-textarea {
  width: 100%;
  padding: 11px var(--sp-4);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--dash-border);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ci-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B7355' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.ci-form-textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }

.ci-form-input:focus,
.ci-form-select:focus,
.ci-form-textarea:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px var(--saffron-pale);
}
.ci-form-input.error, .ci-form-select.error, .ci-form-textarea.error { border-color: var(--danger); }
.ci-form-input.error:focus, .ci-form-select.error:focus, .ci-form-textarea.error:focus { box-shadow: 0 0 0 3px var(--danger-pale); }
.ci-form-input:disabled, .ci-form-select:disabled, .ci-form-textarea:disabled { background: var(--dash-bg); color: var(--text-muted); cursor: not-allowed; }

.ci-form-hint { font-size: 0.78rem; color: var(--text-muted); }
.ci-form-hint.error { color: var(--danger); font-weight: 500; }

/* ----------------------------------------------------------
   .ci-form-card-head / .ci-form-card-body — a two-part variant
   of the form card used on profile.html, addresses.html,
   rewards.html and settings.html: a header row (title + an
   optional trailing action button, e.g. "Edit") followed by a
   body region. The title keeps its own divider only when it is
   NOT already inside a head row (which supplies its own).
   ---------------------------------------------------------- */
.ci-form-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--dash-border);
}
.ci-form-card-head .ci-form-card-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.ci-form-card-body { display: block; }
.ci-form-card-body + .ci-form-card-body { margin-top: var(--sp-5); }

/* ============================================================
   4. DATA TABLES
   ============================================================ */
.ci-data-table-card {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--dash-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.ci-data-table-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--dash-border);
}
.ci-data-table-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-4);
  border: 1.5px solid var(--dash-border);
  border-radius: var(--r-full);
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
}
.ci-data-table-search input { border: none; outline: none; font-size: 0.875rem; width: 100%; background: transparent; font-family: var(--font-body); }
.ci-data-table-search i { color: var(--text-muted); font-size: 0.85rem; }

.ci-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ci-table-wrap table { min-width: 640px; margin-bottom: 0; }
.ci-table-wrap thead th { position: sticky; top: 0; z-index: 2; }
.ci-table-wrap tbody tr { transition: background 0.15s; }
.ci-table-wrap tbody tr:hover { background: var(--dash-bg); }

.ci-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.ci-data-table thead th {
  background: var(--dash-bg);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--dash-border);
  white-space: nowrap;
}
.ci-data-table tbody td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--dash-border);
  color: var(--text-primary);
  vertical-align: middle;
}
.ci-data-table tbody tr:last-child td { border-bottom: none; }
.ci-data-table tbody td:first-child { font-weight: 600; color: var(--navy); }

.ci-table-product-cell { display: flex; align-items: center; gap: var(--sp-3); }
.ci-table-product-img { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--dash-bg); }
.ci-table-product-name { font-weight: 600; color: var(--text-primary); font-size: 0.875rem; }
.ci-table-product-sku { font-size: 0.75rem; color: var(--text-muted); }

.ci-table-actions { display: flex; align-items: center; gap: 6px; }
.ci-table-action-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--dash-border);
  background: #fff; color: var(--text-muted);
  transition: all 0.15s;
  cursor: pointer;
}
.ci-table-action-btn:hover { border-color: var(--saffron); color: var(--saffron-dark); background: var(--saffron-pale); }
.ci-table-action-btn.danger:hover { border-color: var(--danger); color: var(--danger-dark); background: var(--danger-pale); }

.ci-table-footer {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--dash-border);
}
.ci-table-showing { font-size: 0.8rem; color: var(--text-muted); }

.ci-pagination { display: flex; align-items: center; gap: 6px; }
.ci-page-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  background: #f1f5f9; color: var(--text-muted); border: none; cursor: pointer;
  transition: all 0.2s;
}
.ci-page-btn:hover:not(:disabled) { background: var(--dash-border); }
.ci-page-btn.active { background: var(--navy); color: #fff; }
.ci-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ci-activity-text { flex-grow: 1; }
.ci-activity-desc { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; color: var(--navy); }

/* ============================================================
   5. REVIEWS
   ============================================================ */
.ci-review-card { padding: var(--sp-5) 0; border-bottom: 1px solid var(--dash-border); }
.ci-review-card:last-child { border-bottom: none; }
.ci-review-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ci-reviewer-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-pale); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ci-reviewer-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.ci-reviewer-meta { font-size: 0.78rem; color: var(--text-muted); }
.ci-review-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 4px; }
.ci-review-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.ci-review-date { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }

/* ============================================================
   6. PAYMENT METHOD PICKER
   ============================================================ */
.ci-payment-method {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1.5px solid var(--dash-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: var(--sp-3);
}
.ci-payment-method:hover { border-color: var(--saffron); }
.ci-payment-method.selected { border-color: var(--saffron); background: var(--saffron-pale); }
.ci-payment-method-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.ci-payment-method-desc { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================================
   7. FAQ ACCORDION
   ============================================================ */
.ci-faq-item { border: 1px solid var(--dash-border); border-radius: var(--r-md); margin-bottom: var(--sp-3); overflow: hidden; }
.ci-faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: #fff; border: none; text-align: left;
  font-weight: 600; font-size: 0.9rem; color: var(--text-primary);
  cursor: pointer; font-family: var(--font-body);
}
.ci-faq-question i { transition: transform 0.25s var(--ease); color: var(--text-muted); }
.ci-faq-item.open .ci-faq-question i { transform: rotate(180deg); }
.ci-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s var(--ease); }
.ci-faq-item.open .ci-faq-answer { max-height: 400px; }
.ci-faq-answer-inner { padding: 0 var(--sp-5) var(--sp-5); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

/* ============================================================
   8. SIDEBAR SUB-MENU (expand/collapse under a nav item)
   ============================================================ */
.ci-sidebar-sub { max-height: 0; overflow: hidden; transition: max-height 0.25s var(--ease); }
.ci-sidebar-sub.open { max-height: 400px; }
.ci-sidebar-sub .ci-sidebar-nav-item { padding-left: 56px; font-size: 0.85rem; }

/* ============================================================
   9. TOPBAR — hamburger, search, notification + profile dropdown
   ============================================================ */
.ci-sidebar-hamburger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--dash-border);
  background: #fff; color: var(--navy);
  font-size: 1rem; cursor: pointer;
  flex-shrink: 0;
}

.ci-topbar-search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px var(--sp-4);
  border: 1.5px solid var(--dash-border);
  border-radius: var(--r-full);
  width: 260px;
  background: var(--dash-bg);
}
.ci-topbar-search input { border: none; outline: none; background: transparent; font-size: 0.85rem; width: 100%; font-family: var(--font-body); }
.ci-topbar-search i { color: var(--text-muted); font-size: 0.8rem; }

.ci-topbar-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--dash-border);
  background: #fff; color: var(--text-secondary);
  font-size: 1.05rem; cursor: pointer;
  transition: all 0.15s;
}
.ci-topbar-icon-btn:hover { background: var(--dash-bg); color: var(--navy); }
.ci-topbar-icon-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--saffron); color: #fff;
  border-radius: var(--r-full);
  font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.ci-topbar-dropdown { position: relative; }
.ci-dropdown-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 320px; max-width: 90vw;
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--dash-border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.2s var(--ease);
}
.ci-topbar-dropdown.open .ci-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.ci-dropdown-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--dash-border); font-weight: 700; font-size: 0.9rem; color: var(--navy); display: flex; justify-content: space-between; align-items: center; }
.ci-dropdown-head a { font-size: 0.78rem; font-weight: 600; color: var(--saffron-dark); text-decoration: none; }
.ci-dropdown-body { max-height: 360px; overflow-y: auto; }

.ci-notif-item { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid #f1f5f9; }
.ci-notif-item:last-child { border-bottom: none; }
.ci-notif-item.unread { background: var(--saffron-50); }
.ci-notif-icon { width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ci-notif-text { font-size: 0.83rem; color: var(--text-primary); line-height: 1.4; }
.ci-notif-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

.ci-profile-trigger { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; padding: 4px 10px 4px 4px; border-radius: var(--r-full); transition: background 0.15s; border: 1px solid var(--dash-border); background: #fff; }
.ci-profile-trigger:hover { background: var(--dash-bg); }
.ci-profile-trigger-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.ci-profile-trigger-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.ci-profile-dropdown-panel { width: 220px; padding: var(--sp-2); }
.ci-profile-menu-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; color: var(--text-primary); transition: background 0.15s; text-decoration: none; }
.ci-profile-menu-item:hover { background: var(--dash-bg); color: var(--text-primary); }
.ci-profile-menu-item i { width: 16px; color: var(--text-muted); }
.ci-profile-menu-divider { height: 1px; background: var(--dash-border); margin: var(--sp-2) 0; }

/* ============================================================
   10. MOBILE SIDEBAR DRAWER OVERLAY
   conscious-pages.css already defines the slide-in transform on
   .ci-dash-sidebar.open at <=1024px — this just adds the backdrop.
   ============================================================ */
.ci-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-overlay);
}
.ci-sidebar-overlay.show { display: block; }

/* ============================================================
   11. EMPTY / LOADING STATES
   ============================================================ */
.ci-empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); }
.ci-empty-state-icon { width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; background: var(--dash-bg); color: var(--text-light); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.ci-empty-state-title { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.ci-empty-state-text { font-size: 0.875rem; color: var(--text-muted); max-width: 340px; margin: 0 auto; }

@keyframes ci-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.ci-skeleton { background: linear-gradient(90deg, var(--dash-bg) 25%, #eef1f4 37%, var(--dash-bg) 63%); background-size: 200% 100%; animation: ci-shimmer 1.4s ease-in-out infinite; border-radius: var(--r-sm); }

/* ============================================================
   12. CARD TITLE ICON + SMALL BADGES / SUMMARY ROWS
   ============================================================ */
.step-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--saffron-pale);
  color: var(--saffron-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ci-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 600;
}

.ci-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--dash-border);
  color: var(--text-secondary);
}
.ci-summary-row:last-child { border-bottom: none; }
.ci-summary-row span:last-child { font-weight: 600; color: var(--text-primary); }

/* ============================================================
   13. ORDER DETAIL CARD
   Used on order-details.html: a plain white card with a header
   row (title + optional trailing link/button) — distinct from
   .ci-form-card-head because it carries its own bottom margin
   between stacked cards and a slightly larger title.
   ============================================================ */
.ci-order-detail-card {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--dash-border);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.ci-order-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--dash-border);
}
.ci-order-detail-head h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

/* ============================================================
   14. SHIPMENT TRACKING TIMELINE
   Vertical stepper used on tracking.html. Each step is a dot
   (with connecting line drawn through ::before on the dot itself)
   plus a label/date/note info block. Three dot states:
   .done (past, filled green), .current (in progress, saffron with
   pulse), .pending (upcoming, hollow/muted).
   ============================================================ */
.ci-tracking-timeline {
  position: relative;
  padding-left: 4px;
}

.ci-track-step {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
}
.ci-track-step:last-child { padding-bottom: 0; }

.ci-track-dot {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  z-index: 1;
}
/* Connecting line — drawn from the center of one dot to the next */
.ci-track-step:not(:last-child) .ci-track-dot::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% - 40px + var(--sp-6));
  background: var(--dash-border);
}

.ci-track-dot.done {
  background: var(--green-pale);
  color: var(--green-dark);
}
.ci-track-step:not(:last-child) .ci-track-dot.done::after {
  background: var(--green-light);
}

.ci-track-dot.current {
  background: var(--saffron);
  color: #fff;
  box-shadow: 0 0 0 5px var(--saffron-pale);
}

.ci-track-dot.pending {
  background: var(--dash-bg);
  color: var(--text-light);
  border: 1.5px dashed var(--dash-border);
}

.ci-track-info { flex-grow: 1; padding-top: 6px; }
.ci-track-label { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.ci-track-date { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.ci-track-note { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; max-width: 480px; }

/* ============================================================
   15. RESPONSIVE — extends the 1024px/768px rules already in
   conscious-pages.css with the breakpoints/behaviour it doesn't
   cover: topbar wrap, tables, forms, dropdowns, tight phones.
   ============================================================ */
@media (max-width: 1024px) {
  .ci-sidebar-hamburger { display: inline-flex; }
  .ci-topbar-search { display: none; }
}

@media (max-width: 768px) {
  .ci-dash-topbar { flex-wrap: wrap; row-gap: var(--sp-3); }
  .ci-dash-page-title { font-size: 1.25rem; }
  .ci-data-table-head { flex-direction: column; align-items: stretch; }
  .ci-data-table-search { max-width: none; }
  .ci-form-row { grid-template-columns: 1fr; }
  .ci-table-footer { flex-direction: column; align-items: flex-start; }
  .ci-order-detail-head { flex-wrap: wrap; }
  .ci-track-note { max-width: none; }
}

@media (max-width: 480px) {
  .ci-dash-main { padding: var(--sp-4); }
  .ci-dash-topbar { margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-5); padding: var(--sp-3) var(--sp-4); }
  .ci-stat-value { font-size: 1.5rem; }
  .ci-table-action-btn { width: 30px; height: 30px; }
  .ci-dropdown-panel { width: 280px; }
  .ci-profile-trigger-name { display: none; }
  .ci-form-card, .ci-chart-card, .ci-order-detail-card { padding: var(--sp-4); }
  .ci-track-dot { width: 34px; height: 34px; font-size: 0.85rem; }
  .ci-track-step:not(:last-child) .ci-track-dot::after { top: 34px; height: calc(100% - 34px + var(--sp-6)); }
}