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

/* ── Sidebar — desktop ────────────────────────────────────────────────────── */
#sidebar {
  min-width: 240px;
  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; }

/* Sub-menu items: prevent text wrapping for consistent alignment */
#sidebar .nav.flex-column .nav-link {
  white-space: nowrap;
}

/* ── 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;
  }
}

/* ── Inventory filter: prevent Collection dropdown from clipping ──────────── */
.inventory-filters,
.inventory-filters .d-flex {
  overflow: visible !important;
}
.collection-filter-wrap {
  position: relative;
  overflow: visible;
}

/* ── 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; }
}

/* ── Invoice layouts (from Settings > Branding) ─────────────────────────── */
.invoice-logo {
  display: block;
}

.invoice-layout-modern .card-header {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.invoice-layout-modern .card {
  border-radius: 0.5rem;
}

.invoice-layout-minimal .card-body {
  padding: 0.75rem 1rem;
}
.invoice-layout-minimal .card-header {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.invoice-layout-minimal .table {
  font-size: 0.8rem;
}

/* Phoera-style Tax Invoice layout (matches example exactly) ────────────────── */
.phoera-invoice-wrapper {
  background: #fff;
  padding: 1.5rem;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
}
.invoice-total-bar, .total-due-bar {
  background: #ddd;
  padding: 0.5rem 1rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phoera-table-header {
  background: #ddd;
  font-weight: bold;
  padding: 8px 12px;
  font-size: 0.875rem;
}
.phoera-table-header th { text-align: left; }
.phoera-table-header th.text-end { text-align: right; }
.phoera-label { color: #666; }
.phoera-value { text-align: right; font-weight: 600; }
.phoera-invoice .tax-invoice-title { font-size: 1.75rem; font-weight: bold; margin: 0 0 1rem 0; }
.phoera-invoice .seller-name { font-weight: bold; }
.phoera-invoice .seller-address { color: #555; font-size: 0.875rem; white-space: pre-line; margin-top: 4px; }
.phoera-invoice .seller-vat { color: #555; font-size: 0.875rem; margin-top: 4px; }
.phoera-invoice .line-items-table th { text-align: left; }
.phoera-invoice .line-items-table th.text-end { text-align: right; }
.phoera-invoice .line-items-table td { border-bottom: 1px solid #eee; padding: 8px 12px; font-size: 0.875rem; }