/* ══════════════════════════════════════════════════════════
   SAMA CAISSE — Thème bleu marine (dark) inspiré du dashboard
   Appliqué globalement ; le ticket de caisse reste blanc (reçu).
══════════════════════════════════════════════════════════ */
:root {
  --sc-bg:#0E1A30; --sc-bg-2:#0A1424; --sc-panel:#16264A; --sc-card:#1B2E56;
  --sc-line:rgba(255,255,255,.09); --sc-line-2:rgba(255,255,255,.16);
  --sc-text:#EAF1FB; --sc-text-2:#9FB4D6; --sc-text-3:#6C82A8;
  --sc-accent:#2F80ED; --sc-accent-2:#4C9BFF; --sc-glow:rgba(56,142,247,.45);
}

[data-bs-theme="dark"] {
  --bs-body-bg:var(--sc-bg);
  --bs-body-bg-rgb:14,26,48;
  --bs-body-color:var(--sc-text);
  --bs-body-color-rgb:234,241,251;
  --bs-secondary-color:var(--sc-text-2);
  --bs-tertiary-color:var(--sc-text-3);
  --bs-emphasis-color:#ffffff;
  --bs-border-color:var(--sc-line);
  --bs-border-color-translucent:var(--sc-line);
  --bs-primary:var(--sc-accent);
  --bs-primary-rgb:47,128,237;
  --bs-link-color:var(--sc-accent-2);
  --bs-link-color-rgb:76,155,255;
  --bs-link-hover-color:#7fb6ff;
  --bs-card-bg:var(--sc-panel);
  --bs-card-border-color:var(--sc-line);
  --bs-secondary-bg:#16264A;
  --bs-tertiary-bg:#12213E;
  --bs-heading-color:#ffffff;
}

/* ── Global ── */
body {
  font-size: 0.875rem;
  background:
    radial-gradient(1100px 520px at 80% -10%, #17305c 0%, var(--sc-bg) 55%, var(--sc-bg-2) 100%) fixed;
  min-height: 100vh;
}

/* Neutralise les utilitaires clairs codés en dur dans les templates */
[data-bs-theme="dark"] .bg-white { background-color: var(--sc-panel) !important; }
[data-bs-theme="dark"] .bg-light { background-color: #12213E !important; }
[data-bs-theme="dark"] .table-light {
  --bs-table-bg:#1a2c53; --bs-table-color:var(--sc-text-2); --bs-table-border-color:var(--sc-line);
}

/* ── Tables ── */
.table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--sc-text-3);
}
.table td { vertical-align: middle; }
.table { --bs-table-hover-bg: rgba(47,128,237,.08); }
.font-monospace { font-size: 0.82rem; color: var(--sc-accent-2); }

/* ── Navbar ── */
.navbar-brand { letter-spacing: -0.02em; }
.navbar.bg-primary {
  background: #0B1526 !important;
  border-bottom: 1px solid var(--sc-line);
}
.navbar .nav-link { color: var(--sc-text-2) !important; border-radius: 8px; padding-inline: .7rem; }
.navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.05); }
.navbar .nav-link.active {
  color: #fff !important;
  background: rgba(47,128,237,.18);
  box-shadow: inset 0 0 0 1px rgba(76,155,255,.3);
}

/* ── Cards ── */
.card {
  border-radius: 14px;
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  box-shadow: 0 18px 40px -30px rgba(0,0,0,.85);
}
.card.shadow-sm { box-shadow: 0 14px 34px -28px rgba(0,0,0,.9) !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sc-line);
  border-radius: 14px 14px 0 0 !important;
  font-size: 0.9rem;
}

/* ── Boutons ── */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary {
  --bs-btn-bg:var(--sc-accent); --bs-btn-border-color:var(--sc-accent);
  --bs-btn-hover-bg:#2b73d6; --bs-btn-hover-border-color:#2b73d6;
  --bs-btn-active-bg:#2569c4;
  box-shadow: 0 10px 24px -10px var(--sc-glow);
}
.btn-success { box-shadow: 0 10px 24px -10px rgba(51,196,141,.4); }
.btn-danger  { box-shadow: 0 10px 24px -10px rgba(255,93,108,.4); }

/* ── Formulaires ── */
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus {
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 0.2rem rgba(47,128,237,.22);
}

/* ── Modales / dialogues ── */
.modal-content {
  border-radius: 18px;
  border: 1px solid var(--sc-line-2);
  background: #16264A;
  box-shadow: 0 40px 90px -25px #000;
}
.modal-header, .modal-footer { border-color: var(--sc-line); }

/* ── Badges ── */
.badge { font-weight: 600; letter-spacing: 0.02em; }

/* ── Dropdowns ── */
.dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--sc-line-2);
  box-shadow: 0 24px 60px -20px #000;
}

/* ── Modes de règlement (facture) : cartes cliquables épurées ── */
.mode-paiement .form-check {
  background: var(--sc-card);
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  padding: 12px 12px 12px 40px;
  margin: 0;
  transition: .15s;
}
.mode-paiement .form-check:hover { border-color: var(--sc-line-2); }
.mode-paiement .form-check:has(.form-check-input:checked) {
  border-color: var(--sc-accent);
  background: linear-gradient(180deg, rgba(47,128,237,.18), rgba(47,128,237,.04));
  box-shadow: 0 0 0 1px var(--sc-accent), 0 10px 26px -10px var(--sc-glow);
}

/* ── Pagination ── */
.page-link { color: var(--sc-accent-2); }

/* ── Alerts ── */
.alert { position: relative; border-radius: 12px; }

/* ═══════════════════════════════════════════
   TICKET DE CAISSE — reste blanc (reçu 80 mm)
═══════════════════════════════════════════ */
.ticket-paper {
  width: 280px; background: #fff; border: 1px dashed #ccc; border-radius: 4px;
  padding: 16px 14px 20px; font-family: 'Courier New', Courier, monospace;
  font-size: 12px; line-height: 1.55; box-shadow: 0 2px 12px rgba(0,0,0,.08); color: #111;
}
.ticket-header { text-align: center; margin-bottom: 6px; }
.ticket-company { font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.ticket-subtitle { font-size: 11px; color: #555; letter-spacing: .08em; }
.ticket-sep { text-align: center; color: #999; margin: 4px 0; font-size: 11px; overflow: hidden; white-space: nowrap; }
.ticket-row { display: flex; justify-content: space-between; gap: 6px; margin: 2px 0; flex-wrap: wrap; }
.ticket-label { color: #555; white-space: nowrap; flex-shrink: 0; min-width: 80px; }
.ticket-value { text-align: right; word-break: break-word; }
.ticket-montant { text-align: center; font-size: 18px; font-weight: 700; margin: 8px 0; letter-spacing: -.01em; }
.ticket-footer { text-align: center; font-style: italic; font-size: 10.5px; color: #666; margin-top: 4px; }

/* ── Responsive ── */
@media (max-width: 576px) {
  .ticket-paper { width: 100%; max-width: 280px; }
}