/* ── General ──────────────────────────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Sidebar — desktop ────────────────────────────────────────────────────── */
#sidebar {
  min-width: 220px;
  min-height: 100vh;
  transition: transform 0.25s ease;
}

#sidebar .nav-link {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  transition: background 0.15s;
}
#sidebar .nav-link:hover  { background: rgba(255,255,255,0.1); }
#sidebar .nav-link.active { background: rgba(255,255,255,0.2); font-weight: 600; }

/* ── Sidebar — mobile (hidden off-screen, slides in) ─────────────────────── */
@media (max-width: 767.98px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1050;
    transform: translateX(-100%);
    min-height: 100%;
    overflow-y: auto;
  }
  #sidebar.sidebar-open {
    transform: translateX(0);
  }
  /* Main content takes full width on mobile */
  #wrapper > .flex-grow-1 {
    width: 100%;
    min-width: 0;
  }
}

/* ── Sidebar overlay (darkens page when sidebar is open on mobile) ────────── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  transition: box-shadow 0.2s;
}
.card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table tbody tr:hover {
  background-color: rgba(13,110,253,0.04);
}

/* Mobile: make table cells wrap better */
@media (max-width: 575.98px) {
  .table-responsive .table td,
  .table-responsive .table th {
    white-space: nowrap;
  }
}

/* ── Touch-friendly buttons on mobile ────────────────────────────────────── */
@media (max-width: 767.98px) {
  .btn {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 34px;
  }
  /* Larger form inputs on mobile */
  .form-control, .form-select {
    font-size: 16px; /* prevents iOS auto-zoom */
  }
}

/* ── Badge pills ──────────────────────────────────────────────────────────── */
.badge.rounded-pill {
  font-size: 0.8rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
header {
  border-bottom: 1px solid #e9ecef;
}

/* ── Scrollable log ───────────────────────────────────────────────────────── */
.log-scroll {
  max-height: 400px;
  overflow-y: auto;
}

/* ── Status dot ───────────────────────────────────────────────────────────── */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.success { background: #198754; }
.status-dot.failed  { background: #dc3545; }
.status-dot.running { background: #ffc107; animation: pulse 1s infinite; }
.status-dot.never   { background: #adb5bd; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Mobile KPI cards: full width on xs ──────────────────────────────────── */
@media (max-width: 575.98px) {
  .kpi-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Invoice / form pages: stack columns on mobile ───────────────────────── */
@media (max-width: 767.98px) {
  .row.g-3 > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Line items table: ensure horizontal scroll works cleanly ─────────────── */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ── Chart height: shorter on mobile ─────────────────────────────────────── */
@media (max-width: 575.98px) {
  .chart-container {
    height: 200px !important;
  }
}

/* ── Operational pages (dispatch/receiving/stocktake): bigger scan input ──── */
@media (max-width: 767.98px) {
  #scanInput {
    font-size: 18px;
    height: 52px;
  }
  #scanBtn {
    min-width: 70px;
  }
}

/* ── Orders/Inventory tables: hide less-important columns on mobile ───────── */
@media (max-width: 575.98px) {
  .hide-xs { display: none !important; }
}
@media (max-width: 767.98px) {
  .hide-sm { display: none !important; }
}