/* ==========================================================================
   Design tokens — shared across the whole app.
   This file is loaded by every layout (_Layout, _Layout2, _LayoutAdmin) and
   the standalone Auth views, so these variables are the single source of
   truth for color / type / spacing / motion. Page-specific stylesheets
   should read these vars instead of hard-coding their own hex values.
   ========================================================================== */
:root {
  /* Brand — Mpumalanga Dept. of Health: provincial green (from the "Pioneering
     Spirit" identity, agriculture) as the primary brand color, gold (rising
     sun / mineral wealth) as the accent. Kept distinct from --app-success so
     "brand color" and "confirmed" states can still be told apart in context. */
  --app-primary: #0b5c38;
  --app-primary-hover: #083f27;
  --app-primary-text: #ffffff;
  --app-brand-gold: #c98a1e;
  --app-brand-gold-hover: #8f5d10; /* dark enough for white text at AA (5.6:1); #a86f14 only hit ~4.2:1 */

  /* Semantic status colors (one definition, used everywhere) */
  --app-success: #0d5e3a;
  --app-success-hover: #0a4a2e;
  --app-success-soft-bg: #ecfdf5;
  --app-success-soft-border: #a7f3d0;
  --app-success-soft-text: #047857;

  --app-warning: #d79a1e;
  --app-warning-hover: #8a6116;
  --app-warning-soft-bg: #fffbeb;
  --app-warning-soft-border: #fde68a;
  --app-warning-soft-text: #b45309;

  --app-danger: #dc3545;
  --app-danger-hover: #941b25;
  --app-danger-soft-bg: #fff5f5;
  --app-danger-soft-border: #f5b5b5;
  --app-danger-soft-text: #b4232f;

  --app-info: #0d9488;
  --app-info-accessible: #0f6d63;  /* AA-passing (6.2:1) teal for white text on a solid fill — #0d9488 itself only hits ~3.7:1 */
  --app-info-hover: #0b544c;
  --app-info-soft-bg: #ecfdfa;
  --app-info-soft-border: #99e6dc;
  --app-info-soft-text: #0f6d63;

  /* "Normal" priority / neutral status marker — distinct from --app-info (teal
     brand accent). Several files used raw unthemed Bootstrap blue (#007bff)
     for this; this is the one blue the app should use for it. */
  --app-neutral-status: #2563eb;
  --app-neutral-status-hover: #1d4ed8;

  /* Neutrals / text */
  --app-text: #212529;
  --app-text-muted: #5f6b7a;   /* AA-compliant replacement for #999/#95a5a6 on white */
  --app-border: #dee2e6;
  --app-bg-subtle: #f4f4f4;

  /* Typography */
  --app-font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  /* Motion */
  --app-transition-fast: 120ms ease;   /* icon/color swaps, tiny state flips */
  --app-transition: 180ms ease;        /* buttons, links, form controls (default) */
  --app-transition-slow: 300ms ease;   /* cards, panels, larger movement */
  --app-spinner-duration: 0.8s;        /* every loading spinner in the app */

  /* Focus ring */
  --app-focus-ring: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb;
}

/* ==========================================================================
   Shared loading spinner — single @keyframes definition for the whole app.
   Several stylesheets each declared their own @keyframes spin at different
   speeds (1s, 0.6s, unspecified); since keyframe names are global once any
   loaded stylesheet defines them, this is now the one source and the
   duplicates were removed from their files, keeping their `animation: spin
   ...` references intact but pointed at this definition and duration.
   ========================================================================== */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.app-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin var(--app-spinner-duration) linear infinite;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: var(--app-font-family);
  color: var(--app-text);
}

/* ==========================================================================
   Shared interactive states
   ========================================================================== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus,
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  box-shadow: var(--app-focus-ring);
  outline: none;
}

.btn {
  transition: background-color var(--app-transition), border-color var(--app-transition),
              color var(--app-transition), box-shadow var(--app-transition), opacity var(--app-transition);
}

.btn:disabled, .btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-outline-success {
  border-radius: 20px;
}

/* Bootstrap ships its own blue for .btn-primary/.bg-primary/.text-primary —
   16+ views use these raw, which leaked unthemed Bootstrap blue into an
   otherwise green/gold app. Re-point Bootstrap's own "primary" to ours so
   any current or future `bg-primary`/`btn-primary`/`text-primary` usage
   picks up the brand color automatically. */
.btn-primary {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-primary-text);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: var(--app-primary-text);
}

.bg-primary {
  background-color: var(--app-primary) !important;
}

.text-primary {
  color: var(--app-primary) !important;
}

.border-primary {
  border-color: var(--app-primary) !important;
}

/* App "primary" action button — replaces the ad hoc
   style="background:#212529;border-color:#212529;color:#fff" copies that
   were duplicated across several admin views. Use class="btn btn-app-primary". */
.btn-app-primary {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-primary-text);
}

.btn-app-primary:hover,
.btn-app-primary:focus {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: var(--app-primary-text);
}

.btn-app-primary:disabled,
.btn-app-primary.disabled {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  opacity: 0.6;
}

/* Soft status badges shared across list/table pages */
.badge-soft-success,
.badge-soft-warning,
.badge-soft-danger,
.badge-soft-info,
.badge-soft-secondary {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-block;
}

.badge-soft-success {
  background-color: var(--app-success-soft-bg);
  border: 1px solid var(--app-success-soft-border);
  color: var(--app-success-soft-text);
}

.badge-soft-warning {
  background-color: var(--app-warning-soft-bg);
  border: 1px solid var(--app-warning-soft-border);
  color: var(--app-warning-soft-text);
}

.badge-soft-danger {
  background-color: var(--app-danger-soft-bg);
  border: 1px solid var(--app-danger-soft-border);
  color: var(--app-danger-soft-text);
}

.badge-soft-info {
  background-color: var(--app-info-soft-bg);
  border: 1px solid var(--app-info-soft-border);
  color: var(--app-info-soft-text);
}

.badge-soft-secondary {
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.btn-action-delete {
  color: var(--app-danger-soft-text);
  background-color: var(--app-danger-soft-bg);
  border-color: var(--app-danger-soft-border);
}

.btn-action-delete:hover {
  background-color: var(--app-danger-soft-border);
  color: var(--app-danger-hover);
}

/* ==========================================================================
   Shared page header — used by list/management pages (Room, User, Queue
   Transfer Rules, Categories, File History, ...) so the title/subtitle no
   longer needs to be re-styled with a duplicated inline style on every view.
   ========================================================================== */
.page-header-title {
  font-weight: 800;
  color: var(--app-primary);
  letter-spacing: -0.02em;
}

.page-header-subtitle {
  color: var(--app-text-muted);
}

/* ==========================================================================
   Ticket / queue printout card
   ========================================================================== */
.ticket-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-color: var(--app-bg-subtle);
}

.ticket-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

.brand-name {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.brand-accent {
    color: var(--app-info);
    font-weight: bold;
}

.clinic-info {
    margin-bottom: 1rem;
}

.ticket-label {
    font-size: 1.1rem;
    color: var(--app-text-muted);
}

.ticket-number .number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--app-info);
    margin: 1rem 0;
    display: block;
}

.instructions .primary-message {
    font-weight: bold;
    font-size: 1.2rem;
}

.instructions .secondary-message {
    color: var(--app-text-muted);
}

.timestamp {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--app-text-muted);
}

.red{
    color: var(--app-danger) !important;
}

/* Two distinct severities need two distinct colors — amber was previously
   rendered identically to red, making the flag meaningless. */
.ticket-card.flagged-card-amber {
    border-color: var(--app-warning);
    background: var(--app-warning-soft-bg);
}

.ticket-card.flagged-card-red {
    border-color: var(--app-danger);
    background: var(--app-danger-soft-bg);
}

@media print {
    .no-print {
        display: none !important;
    }
}