/* ============================================================
   Waiting Line Management System — brand palette
   Gradient background : #0f5b73 -> #1581a3
   Surface (cards/btn) : #093442
   Text                : white on dark surfaces, #0f1d24 on white
   ============================================================ */

:root {
  --wlms-bg-start:  #0f5b73;
  --wlms-bg-end:    #1581a3;
  --wlms-surface:   #093442;
  --wlms-surface-2: #0c4559;   /* hover / header tint */
  --wlms-ink-dark:  #0f1d24;   /* dark text on light */
  --wlms-ink-soft:  rgba(255,255,255,0.72);
  --wlms-border:    rgba(255,255,255,0.08);
}

/* ---------- Page shell ---------- */
html, body { color: #ffffff; }
body {
  background: linear-gradient(135deg, var(--wlms-bg-start) 0%, var(--wlms-bg-end) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 { color: inherit; }
a        { color: #9ed8ec; }
a:hover  { color: #d5eef7; }

/* ---------- Navbar & footer (solid dark surface) ---------- */
.navbar.bg-primary,
.navbar {
  background: var(--wlms-surface) !important;
  border-bottom: 1px solid var(--wlms-border);
}
.navbar .nav-link,
.navbar .navbar-brand { color: #fff !important; }
.navbar .nav-link:hover { color: #9ed8ec !important; }

footer.bg-light,
footer {
  background: var(--wlms-surface) !important;
  color: var(--wlms-ink-soft) !important;
  border-top: 1px solid var(--wlms-border) !important;
}

/* ---------- Cards (dark by default) ---------- */
.card {
  background: var(--wlms-surface);
  color: #ffffff;
  border: 1px solid var(--wlms-border);
  border-radius: 0.8rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.card-header,
.card-footer {
  background: var(--wlms-surface-2);
  color: #ffffff;
  border-color: var(--wlms-border);
}
.card .text-muted,
.card small.text-muted,
.card .small.text-muted { color: var(--wlms-ink-soft) !important; }

.text-muted { color: var(--wlms-ink-soft) !important; }

.card-light {
  background: #ffffff;
  color: var(--wlms-ink-dark);
}
.card-light .text-muted { color: #6c757d !important; }

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--wlms-surface);
  border-color: var(--wlms-surface);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--wlms-surface-2) !important;
  border-color: var(--wlms-surface-2) !important;
  color: #ffffff !important;
}
.btn-outline-primary {
  color: #ffffff;
  border-color: #ffffff;
  background: transparent;
}
.btn-outline-primary:hover {
  background: #ffffff;
  color: var(--wlms-surface);
}
.btn-light {
  background: #ffffff;
  color: var(--wlms-ink-dark);
  border-color: #ffffff;
}

/* Inside the (white) tables, outline buttons need the dark palette so they
   stay visible. Without this override the Edit button would be white-on-white. */
.table .btn-outline-primary {
  color: var(--wlms-surface);
  border-color: var(--wlms-surface);
  background: transparent;
}
.table .btn-outline-primary:hover {
  background: var(--wlms-surface);
  color: #ffffff;
}
.table .btn-outline-secondary {
  color: #495057;
  border-color: #adb5bd;
}
.table .btn-outline-secondary:hover {
  background: #495057;
  color: #ffffff;
}
.table .btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}
.table .btn-outline-danger:hover {
  background: #dc3545;
  color: #ffffff;
}

/* ---------- Tables (always white with dark text) ---------- */
.table {
  background: #ffffff;
  color: var(--wlms-ink-dark);
  border-radius: 0.6rem;
  overflow: hidden;
  margin-bottom: 0;
}
.table > thead {
  background: #eef2f5;
  color: var(--wlms-ink-dark);
}
.table > thead th {
  border-bottom: 2px solid #dde3e8;
  font-weight: 600;
}
.table > tbody > tr > td,
.table > tbody > tr > th { color: var(--wlms-ink-dark); }
.table-hover > tbody > tr:hover > * {
  background-color: #f4f7fa;
  color: var(--wlms-ink-dark);
}
.table .text-muted { color: #6c757d !important; }

.card > .table-responsive,
.card > .table {
  background: #ffffff;
  border-radius: 0.6rem;
  overflow: hidden;
}

/* ---------- Forms (inputs stay white with dark text) ---------- */
.form-control,
.form-select,
textarea.form-control {
  background-color: #ffffff;
  color: var(--wlms-ink-dark);
  border: 1px solid #cfd8de;
}
.form-control:focus,
.form-select:focus {
  background-color: #ffffff;
  color: var(--wlms-ink-dark);
  border-color: var(--wlms-bg-end);
  box-shadow: 0 0 0 0.2rem rgba(21, 129, 163, 0.25);
}
.form-label,
.form-check-label,
.col-form-label { color: #ffffff; }
.form-text { color: var(--wlms-ink-soft); }
.input-group-text {
  background: var(--wlms-surface-2);
  color: #ffffff;
  border-color: var(--wlms-border);
}

/* ---------- Alerts ---------- */
.alert { border: none; }
.alert-info    { background: #cfecf6; color: #073a4a; }
.alert-success { background: #d1e7dd; color: #0a3622; }
.alert-warning { background: #fff3cd; color: #664d03; }
.alert-danger  { background: #f8d7da; color: #58151c; }

/* ---------- Status badges ---------- */
.badge-status-waiting    { background: #6c757d; color:#fff; }
.badge-status-called     { background: #1581a3; color:#fff; }
.badge-status-in_service { background: #ffc107; color: #000; }
.badge-status-served     { background: #198754; color:#fff; }
.badge-status-absent     { background: #dc3545; color:#fff; }
.badge-status-cancelled  { background: #6f42c1; color:#fff; }
.badge-status-expired    { background: #495057; color:#fff; }

/* ---------- Ticket card (client view) ---------- */
.ticket-card {
  background: var(--wlms-surface);
  color: #ffffff;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.ticket-code {
  font-family: "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #fff;
}

/* ---------- Queue items ---------- */
.queue-item { transition: background 0.2s; }
.queue-item:hover { background: var(--wlms-surface-2); }

/* ---------- Metric & snapshot cards ---------- */
.metric-card { transition: transform 0.15s; }
.metric-card:hover { transform: translateY(-2px); }
.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
}

.snapshot-card { border-left: 4px solid var(--wlms-bg-end); }
.snapshot-card.closed { border-left-color: #dc3545; opacity: 0.75; }

.big-number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}
.card .text-primary,
.ticket-card .text-primary { color: #9ed8ec !important; }

/* ---------- Live-pulse dot ---------- */
.pulse-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse 2s infinite;
  margin-right: 6px;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ---------- Service tiles ---------- */
.service-tile { cursor: pointer; transition: transform 0.15s; }
.service-tile:hover { transform: translateY(-3px); }

/* ---------- Bootstrap overrides ---------- */
.bg-light  { background: var(--wlms-surface-2) !important; color: #fff !important; }
.bg-white  { background: #ffffff !important; color: var(--wlms-ink-dark) !important; }
.text-dark { color: var(--wlms-ink-dark) !important; }

.progress { background: rgba(255,255,255,0.15); }

.list-group-item {
  background: transparent;
  color: #ffffff;
  border-color: var(--wlms-border);
}

hr { border-color: var(--wlms-border); }