/* ==========================================================================
   Flipkart Hub Manager — Design System
   "Dispatch console" aesthetic: dark sidebar, light/dark content area,
   monospace tabular figures for IDs/amounts so columns scan like a ledger.
   ========================================================================== */

:root {
  /* Brand palette */
  --hm-navy:        #0F172A;   /* sidebar / header */
  --hm-navy-soft:   #1E293B;
  --hm-blue:        #2563EB;   /* primary actions */
  --hm-blue-soft:   #DBEAFE;
  --hm-green:       #10B981;   /* success / collected */
  --hm-green-soft:  #D1FAE5;
  --hm-amber:       #F59E0B;   /* pending / warning */
  --hm-amber-soft:  #FEF3C7;
  --hm-red:         #EF4444;   /* shortage / failed */
  --hm-red-soft:    #FEE2E2;
  --hm-slate-50:    #F8FAFC;
  --hm-slate-100:   #F1F5F9;
  --hm-slate-200:   #E2E8F0;
  --hm-slate-400:   #94A3B8;
  --hm-slate-600:   #475569;
  --hm-slate-900:   #0F172A;

  --hm-font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hm-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  --hm-bg: var(--hm-slate-50);
  --hm-surface: #FFFFFF;
  --hm-text: #1E293B;
  --hm-text-muted: var(--hm-slate-600);
  --hm-border: var(--hm-slate-200);
  --hm-radius: 10px;
  --hm-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
  --hm-shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08);
}

/* ---- Dark mode overrides --------------------------------------------- */
[data-theme="dark"] {
  --hm-bg: #0B1220;
  --hm-surface: #131C2E;
  --hm-text: #E5E9F0;
  --hm-text-muted: #94A3B8;
  --hm-border: #243047;
  --hm-slate-100: #1A2436;
  --hm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --hm-shadow-md: 0 4px 16px -2px rgb(0 0 0 / 0.5);
}

* { box-sizing: border-box; }

html, body {
  font-family: var(--hm-font-ui);
  background: var(--hm-bg);
  color: var(--hm-text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* Tabular figures everywhere numbers matter — the signature detail */
.tnum, .table td.num, .table th.num, .money, .runsheet-id, .kpi-value, code, .badge-count {
  font-family: var(--hm-font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* ---- App shell --------------------------------------------------------- */
.hm-shell { display: flex; min-height: 100vh; }

.hm-sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--hm-navy);
  color: #CBD5E1;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1030;
  transition: transform 0.2s ease;
}

.hm-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hm-sidebar-brand .mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--hm-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 14px;
  flex-shrink: 0;
}
.hm-sidebar-brand .name {
  font-weight: 600; color: #fff; font-size: 0.95rem; line-height: 1.2;
}
.hm-sidebar-brand .sub { font-size: 0.7rem; color: var(--hm-slate-400); }

.hm-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.hm-nav-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hm-slate-400);
  padding: 14px 12px 6px;
}
.hm-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #CBD5E1;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2px;
}
.hm-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.hm-nav a.active { background: var(--hm-blue); color: #fff; }
.hm-nav a i { width: 18px; text-align: center; font-size: 0.95rem; opacity: 0.9; }

.hm-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
  color: var(--hm-slate-400);
}

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

.hm-topbar {
  background: var(--hm-surface);
  border-bottom: 1px solid var(--hm-border);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.hm-topbar .hub-pill {
  background: var(--hm-blue-soft);
  color: var(--hm-blue);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
[data-theme="dark"] .hm-topbar .hub-pill { background: rgba(37,99,235,0.18); }

.hm-content { padding: 22px; flex: 1; }

.hm-sidebar-toggle { display: none; }

@media (max-width: 991.98px) {
  .hm-sidebar { transform: translateX(-100%); }
  .hm-sidebar.show { transform: translateX(0); }
  .hm-main { margin-left: 0; }
  .hm-sidebar-toggle { display: inline-flex; }
}

/* ---- Cards / KPI -------------------------------------------------------- */
.hm-card {
  background: var(--hm-surface);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-sm);
}
.hm-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hm-border);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hm-card-body { padding: 18px; }

.kpi-card {
  background: var(--hm-surface);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.kpi-card .kpi-label {
  font-size: 0.76rem;
  color: var(--hm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.kpi-card .kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.2;
}
.kpi-card .kpi-icon {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.kpi-icon.blue   { background: var(--hm-blue-soft); color: var(--hm-blue); }
.kpi-icon.green  { background: var(--hm-green-soft); color: #047857; }
.kpi-icon.amber  { background: var(--hm-amber-soft); color: #B45309; }
.kpi-icon.red    { background: var(--hm-red-soft); color: #B91C1C; }
[data-theme="dark"] .kpi-icon.blue  { background: rgba(37,99,235,0.18); }
[data-theme="dark"] .kpi-icon.green { background: rgba(16,185,129,0.16); color: #34D399; }
[data-theme="dark"] .kpi-icon.amber { background: rgba(245,158,11,0.16); color: #FBBF24; }
[data-theme="dark"] .kpi-icon.red   { background: rgba(239,68,68,0.16); color: #F87171; }

/* ---- Tables ------------------------------------------------------------- */
.table { color: var(--hm-text); }
.table > :not(caption) > * > * { background: transparent; }
.hm-table-wrap {
  background: var(--hm-surface);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius);
  overflow: hidden;
}
.table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hm-text-muted);
  border-bottom: 1px solid var(--hm-border);
  font-weight: 600;
  white-space: nowrap;
}
.table td { border-color: var(--hm-border); vertical-align: middle; }
.table td.num, .table th.num { text-align: right; }
.table-hover tbody tr:hover { background: var(--hm-slate-100); }

.badge-status { font-weight: 600; font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; }
.badge-status.active, .badge-status.present, .badge-status.cleared { background: var(--hm-green-soft); color: #047857; }
.badge-status.inactive, .badge-status.absent { background: var(--hm-red-soft); color: #B91C1C; }
.badge-status.pending, .badge-status.open, .badge-status.draft { background: var(--hm-amber-soft); color: #B45309; }
[data-theme="dark"] .badge-status.active { background: rgba(16,185,129,0.16); color: #34D399; }
[data-theme="dark"] .badge-status.inactive { background: rgba(239,68,68,0.16); color: #F87171; }
[data-theme="dark"] .badge-status.pending { background: rgba(245,158,11,0.16); color: #FBBF24; }

/* ---- Forms --------------------------------------------------------------- */
.form-label { font-weight: 600; font-size: 0.86rem; }
.form-control, .form-select {
  background: var(--hm-surface);
  border-color: var(--hm-border);
  color: var(--hm-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hm-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--hm-slate-100); }

textarea.runsheet-paste {
  font-family: var(--hm-font-mono);
  font-size: 0.88rem;
}

/* Visible focus ring everywhere (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--hm-blue);
  outline-offset: 2px;
}

/* ---- Buttons -------------------------------------------------------------- */
.btn-primary { background: var(--hm-blue); border-color: var(--hm-blue); }
.btn-primary:hover { background: #1D4ED8; border-color: #1D4ED8; }

/* ---- Parsed runsheet preview table ----------------------------------------- */
.runsheet-preview-table .runsheet-id { font-weight: 600; }
.runsheet-summary-strip {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.runsheet-summary-strip .pill {
  background: var(--hm-slate-100);
  border: 1px solid var(--hm-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
}
.runsheet-summary-strip .pill strong { font-family: var(--hm-font-mono); }

/* ---- Login page ----------------------------------------------------------- */
.hm-guest-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--hm-navy) 0%, #1E3A5F 100%);
  padding: 20px;
}
.hm-login-card {
  background: var(--hm-surface);
  border-radius: 14px;
  box-shadow: var(--hm-shadow-md);
  width: 100%;
  max-width: 400px;
  padding: 36px 32px;
}

/* ---- Utility -------------------------------------------------------------- */
.text-muted-sm { font-size: 0.8rem; color: var(--hm-text-muted); }
.divider-label {
  text-align: center;
  position: relative;
  font-size: 0.72rem;
  color: var(--hm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0;
}

@media print {
  .hm-sidebar, .hm-topbar, .no-print { display: none !important; }
  .hm-main { margin-left: 0 !important; }
}

/* ---- Print styles -------------------------------------------------------- */
@media print {
  .hm-sidebar,
  .hm-topbar,
  .no-print,
  .btn,
  nav.pagination,
  .dropdown { display: none !important; }

  .hm-main { margin-left: 0 !important; }
  .hm-content { padding: 0 !important; }
  .hm-table-wrap { border: none !important; box-shadow: none !important; }

  body { font-size: 12px; color: #000 !important; background: #fff !important; }
  .table { font-size: 11px; }
  .table td, .table th { border-color: #ccc !important; padding: 4px 6px !important; }
  .kpi-card { border: 1px solid #ccc; page-break-inside: avoid; }
  .money, .runsheet-id { font-family: monospace; }

  /* Force table headers to repeat on each printed page */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
}

/* ---- Alert auto-dismiss animation ---------------------------------------- */
@keyframes hmFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* ---- Sticky table columns (for wide cycle report) ------------------------ */
.table-sticky-first td:first-child,
.table-sticky-first th:first-child {
  position: sticky;
  left: 0;
  background: var(--hm-surface);
  z-index: 1;
}

/* ---- Money input alignment ----------------------------------------------- */
input.money-input { text-align: right; font-family: var(--hm-font-mono); }

/* ---- Tooltip helper ------------------------------------------------------- */
.hm-tooltip { cursor: help; border-bottom: 1px dashed var(--hm-slate-400); }

/* ---- Loading spinner overlay --------------------------------------------- */
.hm-spinner-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  display: none;
}
.hm-spinner-overlay.show { display: flex; }

/* ---- DataTables overrides for dark mode ---------------------------------- */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--hm-surface);
  border-color: var(--hm-border);
  color: var(--hm-text);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--hm-text) !important;
}
[data-theme="dark"] table.dataTable tbody tr {
  background: var(--hm-surface);
}
[data-theme="dark"] table.dataTable tbody tr.odd {
  background: var(--hm-slate-100);
}