/* =============================================================================
   WarERP — Main Stylesheet
   Brand: WareMates | Palette A — soft sage + butter pastel + slate accents
   (sesión 7 — softer than original, professional, less saturated)
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Design Tokens
   ---------------------------------------------------------------------------- */
:root {
  /* Brand palette — soft sage */
  --c-primary:        #7FA88A;
  --c-primary-dark:   #5E8B6E;
  --c-primary-light:  #E5EFE7;
  --c-primary-muted:  #A0C4A8;

  /* Accent — muted slate blue */
  --c-accent:         #5577A0;
  --c-accent-dark:    #445F82;
  --c-accent-light:   #E5EBF2;

  /* Backgrounds — pastel butter yellow + white surfaces */
  --c-bg:             #FEFCE8;
  --c-bg-white:       #FFFFFF;
  --c-surface:        #FFFFFF;

  /* Status colors — softer pastels */
  --c-success:        #5FA374;
  --c-success-bg:     #E8F0EA;
  --c-warning:        #C18838;
  --c-warning-bg:     #FAF1DC;
  --c-danger:         #B65656;
  --c-danger-bg:      #FAE7E7;
  --c-info:           #5577A0;
  --c-info-bg:        #E5EBF2;

  /* Text — slate (replaces former olive-tinted text) */
  --c-text:           #2D3748;
  --c-text-light:     #5A6470;
  --c-text-muted:     #8A92A0;
  --c-border:         #E8E0BF;
  --c-row-alt:        #FAF8E8;

  /* Sidebar — deeper sage for white-text contrast (~5.4:1, passes WCAG AA) */
  --c-sidebar-bg:     #4A7058;
  --c-sidebar-text:   rgba(255,255,255,0.9);
  --c-sidebar-muted:  rgba(255,255,255,0.55);
  --c-sidebar-active: #445F82;
  --c-sidebar-hover:  rgba(255,255,255,0.14);
  --sidebar-width:    240px;

  /* Layout */
  --topbar-height:    60px;
  --radius:           8px;
  --radius-sm:        4px;
  --radius-lg:        12px;

  /* Shadow */
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  --shadow:           0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.10);

  /* Typography */
  --font:             'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:        'Courier New', Courier, monospace;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100vh;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

ul { list-style: none; }

/* ----------------------------------------------------------------------------
   Layout — Sidebar + Main
   ---------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--c-sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  transition: transform 0.25s ease;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sidebar__logo {
  color: #fff;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Optional uploaded logo (warehouse_logo_url config). Constrained to fit
   alongside the warehouse name without breaking the brand row layout. */
.sidebar__logo-img {
  max-width: 24px;
  max-height: 24px;
  width: auto;
  height: auto;
  display: block;
}

.sidebar__name {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.sidebar__nav {
  flex: 1;
  padding: 12px 0;
}

.sidebar__item { display: block; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--c-sidebar-text);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.sidebar__link:hover {
  background: var(--c-sidebar-hover);
  color: #fff;
  text-decoration: none;
}

.sidebar__link--active {
  background: var(--c-sidebar-active);
  color: #fff;
}

.sidebar__link--active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #fff;
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Pulsing red badge for Review Queue */
.nav-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--c-danger);
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
  animation: badge-pulse 1.8s ease-in-out infinite;
}

.nav-badge--mobile {
  position: absolute;
  top: 4px;
  right: 8px;
  width: 8px;
  height: 8px;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.4); }
}

.sidebar__footer {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 14px 20px;
  /* Force vertical stack: some mobile renders were collapsing the <a>
     children onto a single line despite display:flex on each link. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-sidebar-text);
  font-size: 0.825rem;
  margin-bottom: 10px;
}

.sidebar__role {
  margin-left: auto;
  font-size: 0.7rem;
  background: rgba(255,255,255,0.18);
  padding: 1px 7px;
  border-radius: 20px;
  text-transform: capitalize;
}

/* Compact links shown in the sidebar footer (Settings / Development /
   Change Password / Logout). Less prominent than nav items but still
   readable on the dark sidebar background. */
.sidebar__footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-sidebar-muted);
  font-size: 0.85rem;
  transition: color 0.15s, background 0.15s;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  position: relative;
}
.sidebar__footer-link:hover {
  color: #fff;
  background: var(--c-sidebar-hover);
  text-decoration: none;
}
.sidebar__footer-link--active {
  color: #fff;
  background: var(--c-sidebar-active);
}

.sidebar__logout {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-sidebar-muted);
  font-size: 0.85rem;
  transition: color 0.15s;
  padding: 4px 0;
}

.sidebar__logout:hover { color: #fff; text-decoration: none; }

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 190;
}

.sidebar-overlay.is-visible { display: block; }

/* Main area */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-height);
  background: var(--c-bg-white);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.topbar__menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text);
  padding: 4px;
  border-radius: var(--radius-sm);
}

.topbar__menu-btn:hover { background: var(--c-bg); }

.topbar__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
}

.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar__date {
  font-size: 0.8rem;
  color: var(--c-text-muted);
}

/* Main content */
.main-content {
  flex: 1;
  padding: 24px;
}

/* Mobile bottom nav (hidden on desktop) */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--c-bg-white);
  border-top: 1px solid var(--c-border);
  justify-content: space-around;
  align-items: center;
  z-index: 200;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--c-text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
  text-decoration: none;
}

.bottom-nav__item:hover,
.bottom-nav__item--active { color: var(--c-primary); text-decoration: none; }

/* ----------------------------------------------------------------------------
   Flash Alerts
   ---------------------------------------------------------------------------- */
.flash-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  margin: 0 24px 0;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  animation: flash-slide-in 0.25s ease;
}

@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.flash-alert--success { background: var(--c-success-bg); color: var(--c-success); border: 1px solid #A5D6A7; }
.flash-alert--error   { background: var(--c-danger-bg);  color: var(--c-danger);  border: 1px solid #FFCDD2; }
.flash-alert--info    { background: var(--c-info-bg);    color: var(--c-info);    border: 1px solid #B3E5FC; }
.flash-alert--warning { background: var(--c-warning-bg); color: var(--c-warning); border: 1px solid #FFCC80; }

.flash-alert__close {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  color: inherit;
  font-size: 1rem;
  opacity: 0.6;
  padding: 0 2px;
}

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

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

.page-header__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-text);
}

.page-header__subtitle {
  font-size: 0.875rem;
  color: var(--c-text-light);
  margin-top: 2px;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ----------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
}

.card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card__body { padding: 20px; }

/* KPI Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--c-surface);
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-primary);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.kpi-card--accent  { border-top-color: var(--c-accent); }
.kpi-card--success { border-top-color: var(--c-success); }
.kpi-card--warning { border-top-color: var(--c-warning); }
.kpi-card--danger  { border-top-color: var(--c-danger); }

.kpi-card__label {
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.kpi-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.1;
}

.kpi-card__sub {
  font-size: 0.775rem;
  color: var(--c-text-muted);
  margin-top: 4px;
}

/* ----------------------------------------------------------------------------
   Tables
   ---------------------------------------------------------------------------- */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  font-size: 0.875rem;
}

.admin-table thead tr {
  /* No background here: each <th> owns its own (sticky) background. If the
     <tr> also painted a background, the gap between the sticky cells and the
     non-sticky <tr> would show as a stray green strip when scrolling. */
  color: #fff;
}

.admin-table th {
  padding: 11px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.775rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.admin-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

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

.admin-table tbody tr:nth-child(even) td { background: var(--c-row-alt); }

.admin-table tbody tr:hover td { background: var(--c-primary-light); }

.admin-table .col-sku  { font-family: var(--font-mono); font-size: 0.8rem; }
.admin-table .col-actions { white-space: nowrap; text-align: right; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--c-text-muted);
}

.empty-state__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  opacity: 0.35;
}

.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text-light);
  margin-bottom: 6px;
}

/* ----------------------------------------------------------------------------
   Badges / Status Labels
   ---------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Operational status badges */
.badge--pending       { background: #E3F2FD; color: #1565C0; }
.badge--cleaning      { background: #E8F5E9; color: #2E7D32; }
.badge--repair        { background: #FFF8E1; color: #F57F17; }
.badge--price-check   { background: #F3E5F5; color: #6A1B9A; }
.badge--returned      { background: #FBE9E7; color: #BF360C; }
.badge--ready         { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.badge--sold          { background: #1B5E20; color: #fff; }
.badge--default       { background: var(--c-bg); color: var(--c-text-light); }

/* Commercial condition badges */
.badge--cond-new        { background: #E3F2FD; color: #1565C0; }
.badge--cond-factory    { background: #E8EAF6; color: #283593; }
.badge--cond-refurb     { background: #F3E5F5; color: #6A1B9A; }
.badge--cond-used       { background: #FFF8E1; color: #E65100; }
.badge--cond-returned   { background: #FBE9E7; color: #BF360C; }

/* ----------------------------------------------------------------------------
   Aging indicators — Age column dot
   The dot pulses yellow or red based on the aging bucket. Replaces the older
   row-level blinking pattern: alerts now live only in the Age cell so the
   surrounding rows stay calm and readable.
   ---------------------------------------------------------------------------- */
.age-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.age-cell__value { font-size: 0.85rem; color: var(--c-text-light); }

/* display: inline-block is required so width/height apply in any context
   (some inline-flex parents collapse <span> children to inline width:0). */
.age-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  vertical-align: middle;
}
.age-dot--warn {
  background: #F59E0B;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.65);
  animation: age-dot-pulse-warn 1.8s ease-in-out infinite;
}
.age-dot--overdue {
  background: #DC2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: age-dot-pulse-overdue 1.3s ease-in-out infinite;
}

@keyframes age-dot-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0    rgba(245, 158, 11, 0.65); transform: scale(1);    }
  50%       { box-shadow: 0 0 0 7px  rgba(245, 158, 11, 0);    transform: scale(1.30); }
}
@keyframes age-dot-pulse-overdue {
  0%, 100% { box-shadow: 0 0 0 0    rgba(220, 38, 38, 0.70); transform: scale(1);    }
  50%       { box-shadow: 0 0 0 8px  rgba(220, 38, 38, 0);    transform: scale(1.35); }
}

/* Legacy aging-badge used in older Review Queue / Aging tables.
   Kept as a non-blinking pill style; row-level backgrounds removed
   so alerts only surface through .age-dot above. */
.aging-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--c-bg);
  color: var(--c-text-muted);
}
.aging-badge.aging--yellow { background: #FFF8E1; color: #E65100; }
.aging-badge.aging--red    { background: #FFEBEE; color: #C62828; }

/* Inline price form in review queue */
.form-control--sm {
  padding: 5px 10px;
  font-size: 0.85rem;
  height: 32px;
}

/* ----------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

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

.btn--accent {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.btn--accent:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }

.btn--outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--outline:hover { background: var(--c-primary-light); }

.btn--outline-accent {
  background: transparent;
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.btn--outline-accent:hover { background: var(--c-accent-light); }

.btn--danger {
  background: var(--c-danger);
  color: #fff;
  border-color: var(--c-danger);
}
.btn--danger:hover { background: #B71C1C; border-color: #B71C1C; }

.btn--ghost {
  background: transparent;
  color: var(--c-text-light);
  border-color: var(--c-border);
}
.btn--ghost:hover { background: var(--c-bg); color: var(--c-text); }

/* Action-aligned button colors (consistent across all pages):
     btn--export → solid blue with darker outline
     btn--print  → solid dark slate with even darker outline (clearly distinct
                   from the blue export button on every monitor calibration). */
.btn--export {
  background: var(--c-accent);
  color: #fff;
  border: 1px solid var(--c-accent-dark);
}
.btn--export:hover {
  background: var(--c-accent-dark);
  border-color: #2E456B;
  color: #fff;
}

.btn--print {
  background: #4B5563;
  color: #fff;
  border: 1px solid #1F2937;
}
.btn--print:hover {
  background: #374151;
  border-color: #111827;
  color: #fff;
}

.btn--sm { padding: 5px 12px; font-size: 0.8rem; }
.btn--lg { padding: 11px 24px; font-size: 0.95rem; }

.btn:disabled,
.btn[disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ----------------------------------------------------------------------------
   Forms
   ---------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.form-grid--2col { grid-template-columns: 1fr 1fr; }
.form-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.form-grid--full { grid-template-columns: 1fr; }

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

.form-group--span2 { grid-column: span 2; }
.form-group--span3 { grid-column: span 3; }
.form-group--full  { grid-column: 1 / -1; }

label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--c-text);
  background: var(--c-bg-white);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(61, 107, 69, 0.12);
}

.form-control::placeholder { color: var(--c-text-muted); }

.form-control[readonly],
.form-control:disabled {
  background: var(--c-bg);
  color: var(--c-text-muted);
  cursor: not-allowed;
}

select.form-control {
  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 d='M1 1l5 5 5-5' stroke='%235A6B5C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

textarea.form-control { min-height: 90px; resize: vertical; }

.form-hint {
  font-size: 0.775rem;
  color: var(--c-text-muted);
  margin-top: 2px;
}

.form-error {
  background: var(--c-danger-bg);
  border: 1px solid #FFCDD2;
  color: var(--c-danger);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Checkbox / Toggle */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.form-check__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

/* ----------------------------------------------------------------------------
   OCR pre-filled field highlight
   ---------------------------------------------------------------------------- */
.ocr-prefilled {
  border-color: var(--c-primary) !important;
  background: #f0f7f1 !important;
  transition: border-color 0.3s, background 0.3s;
}

/* ----------------------------------------------------------------------------
   Section / Divider
   ---------------------------------------------------------------------------- */
.section-divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 24px 0;
}

.section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* ----------------------------------------------------------------------------
   Filters / Search Bar
   ---------------------------------------------------------------------------- */
.filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.filters-bar .form-control { max-width: 200px; }

.filter-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

.filter-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}

.filter-search .form-control { padding-left: 34px; }

/* ----------------------------------------------------------------------------
   Status Timeline (for unit-detail)
   ---------------------------------------------------------------------------- */
.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--c-border);
}

.timeline__item {
  position: relative;
  padding-bottom: 20px;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 2px solid var(--c-bg-white);
  box-shadow: 0 0 0 2px var(--c-primary);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__meta {
  font-size: 0.775rem;
  color: var(--c-text-muted);
  margin-bottom: 2px;
}

.timeline__content {
  font-size: 0.875rem;
  color: var(--c-text);
}

/* ----------------------------------------------------------------------------
   Login Page (standalone — no sidebar)
   ---------------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}

.login-card__header {
  background: var(--c-primary);
  padding: 28px 32px 24px;
  text-align: center;
}

.login-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  margin-bottom: 6px;
}

.login-card__logo svg { flex-shrink: 0; }

.login-card__brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.login-card__subtitle {
  font-size: 0.825rem;
  color: rgba(255,255,255,0.75);
}

.login-card__body {
  padding: 28px 32px;
}

.login-card__body .form-group { margin-bottom: 16px; }
.login-card__body label { color: var(--c-text-light); }

.login-card__body .btn--primary {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  padding: 11px;
  font-size: 0.95rem;
}

.login-lockout {
  background: var(--c-danger-bg);
  border: 1px solid #FFCDD2;
  color: var(--c-danger);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  text-align: center;
}

/* ----------------------------------------------------------------------------
   Barcode Print Page (standalone)
   ---------------------------------------------------------------------------- */
.barcode-print-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #fff;
  padding: 24px;
  font-family: var(--font-mono);
}

.barcode-print-page svg { max-width: 280px; }

.barcode-human {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 6px;
  text-align: center;
}

.barcode-sku {
  font-size: 0.75rem;
  color: #555;
  margin-top: 3px;
  text-align: center;
}

/* ----------------------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------------------- */
.text-muted   { color: var(--c-text-muted); }
.text-success { color: var(--c-success); }
.text-danger  { color: var(--c-danger); }
.text-warning { color: var(--c-warning); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-mono    { font-family: var(--font-mono); font-size: 0.85em; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.d-flex         { display: flex; }
.align-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.gap-8          { gap: 8px; }
.gap-12         { gap: 12px; }
.gap-16         { gap: 16px; }
.flex-wrap      { flex-wrap: wrap; }

.w-100 { width: 100%; }

/* ----------------------------------------------------------------------------
   Responsive — Mobile
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

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

  .main-wrapper {
    margin-left: 0;
    padding-bottom: 70px; /* Space for bottom nav */
  }

  .topbar__menu-btn { display: flex; }

  .topbar { padding: 0 16px; }
  .topbar__date { display: none; }

  .main-content { padding: 16px; }

  .bottom-nav { display: flex; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1; justify-content: center; }

  .form-grid { grid-template-columns: 1fr; }
  .form-grid--2col,
  .form-grid--3col { grid-template-columns: 1fr; }
  .form-group--span2,
  .form-group--span3 { grid-column: 1; }

  .kpi-grid { grid-template-columns: 1fr 1fr; }

  .filters-bar { gap: 8px; }
  .filters-bar .form-control { max-width: 100%; flex: 1; }
  .filter-search { max-width: 100%; flex: 1 1 100%; }

  .flash-alert { margin: 0 16px 0; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .login-card__body { padding: 20px; }
  .login-card__header { padding: 20px; }
}

/* ----------------------------------------------------------------------------
   Print Styles
   ---------------------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .bottom-nav, .flash-alert,
  .btn, .page-header__actions { display: none !important; }
  .main-wrapper { margin-left: 0; }
  .main-content { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }

  /* Barcode print page */
  body.barcode-print { margin: 0; background: #fff; }
}

/* ----------------------------------------------------------------------------
   Sidebar item visibility — mobile-only items hidden on desktop
   (used for Scanner: in mobile we surface it in the sidebar; on desktop the
   FAB doesn't show but the sidebar shouldn't either — the scanner is camera-
   driven and not useful on a desktop without a webcam in this workflow).
   ---------------------------------------------------------------------------- */
.sidebar__item--mobile-only { display: none; }
@media (max-width: 768px) {
  .sidebar__item--mobile-only { display: block; }
}

/* ----------------------------------------------------------------------------
   Scanner FAB — mobile only
   ---------------------------------------------------------------------------- */
.scan-fab {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 80px; /* above bottom-nav */
  right: 20px;
  z-index: 200;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .scan-fab { display: flex; }
}

.scan-fab__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: background 0.2s, transform 0.2s;
}
.scan-fab__btn:hover { background: var(--c-primary-dark); transform: scale(1.05); }

.scan-fab__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
}

.scan-fab__menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  pointer-events: none;
}
.scan-fab__menu--open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scan-fab__option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 28px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  white-space: nowrap;
  transition: background 0.15s;
}
.scan-fab__option:hover { background: var(--c-primary-light); }

.scan-fab__option-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   Table header fill — paint applied to <th> cells (not <tr>) because
   sticky positioning, when ever re-introduced, only honours backgrounds set
   on the cells themselves.
   Sticky thead was tried in session 7 but conflicts with .table-container's
   `overflow-x: auto`: that overflow makes the container a scroll context for
   sticky, which then offsets the thead 60px below the container's top edge
   instead of pinning to the viewport. Pagination handles long lists, so the
   sticky behaviour was removed in session 8.
   ---------------------------------------------------------------------------- */
.admin-table thead th {
  background: var(--c-primary);
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* ----------------------------------------------------------------------------
   Pagination — used on long table pages (Inventory, Aging, Review Queue)
   Rendered top + bottom of the table by createPaginator() in app-common.js.
   ---------------------------------------------------------------------------- */
.paginator {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 4px;
  font-size: 0.825rem;
  color: var(--c-text-light);
}

.paginator__info {
  font-weight: 500;
  color: var(--c-text-muted);
  margin-right: auto;
}

.paginator__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.paginator__btn,
.paginator__page {
  appearance: none;
  background: var(--c-bg-white);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 32px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.paginator__btn:hover:not(:disabled),
.paginator__page:hover:not(.paginator__page--active) {
  background: var(--c-primary-light);
  border-color: var(--c-primary);
  color: var(--c-text);
}

.paginator__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.paginator__page--active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary-dark);
  cursor: default;
}

.paginator__goto,
.paginator__size {
  display: flex;
  align-items: center;
}

.paginator__goto label,
.paginator__size label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.paginator__goto-input {
  width: 62px;
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-mono);
  text-align: center;
}

.paginator__size-select {
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--c-bg-white);
  cursor: pointer;
}

@media (max-width: 768px) {
  .paginator { gap: 8px; font-size: 0.78rem; }
  .paginator__info { width: 100%; margin-right: 0; }
  .paginator__btn,
  .paginator__page { padding: 4px 8px; font-size: 0.75rem; min-width: 28px; }
}

/* ----------------------------------------------------------------------------
   Subtle keyboard hint shown on inventory pages — pressing "/" focuses search.
   Hidden on touch devices via media query.
   ---------------------------------------------------------------------------- */
.kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--c-border);
  vertical-align: 1px;
}
@media (hover: none) {
  .kbd { display: none; }
}