/*
 * Shared design system for the GST Invoice System.
 * Layered over Bootstrap 5's existing classes (same class names, no
 * structural HTML changes required) - color/type/shadow/radius tokens
 * mirror the sibling hospital-management app for visual consistency across
 * both products.
 */

:root {
  --bx-primary: #1565C0;
  --bx-primary-dark: #0B3C74;
  --bx-primary-darker: #082B54;
  --bx-primary-light: #4F94E0;
  --bx-primary-soft: #EAF2FC;
  --bx-accent: #00ACC1;
  --bx-bg: #F3F6FB;
  --bx-surface: #FFFFFF;
  --bx-border: #E1E8F2;
  --bx-text: #1B2A41;
  --bx-text-muted: #66768E;
  --bx-success: #17A673;
  --bx-danger: #E23838;
  --bx-warning: #E0A100;
  --bx-radius: 10px;
  --bx-shadow: 0 1px 3px rgba(16, 42, 89, .06), 0 1px 2px rgba(16, 42, 89, .08);
  --bx-shadow-md: 0 4px 16px rgba(16, 42, 89, .08);
}

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bx-bg);
  color: var(--bx-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--bx-text);
}

/* ---------- Navbar ---------- */

.navbar.bg-primary {
  background: linear-gradient(120deg, var(--bx-primary-darker) 0%, var(--bx-primary-dark) 100%) !important;
}

.navbar .nav-link, .navbar-brand {
  font-weight: 500;
}

.navbar .dropdown-menu {
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow-md);
  padding: 6px;
}

.navbar .dropdown-item {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: .9rem;
}

.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
  background-color: var(--bx-primary-soft);
  color: var(--bx-primary-dark);
}

.nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bx-accent) 0%, var(--bx-primary-light) 100%);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  margin-right: 6px;
}

/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow);
}

.card-header {
  background-color: var(--bx-surface);
  border-bottom: 1px solid var(--bx-border);
  font-weight: 600;
  border-top-left-radius: var(--bx-radius) !important;
  border-top-right-radius: var(--bx-radius) !important;
}

/* Dashboard-style stat tiles */
.stat-card {
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow);
  background: var(--bx-surface);
  padding: 20px;
  transition: transform .15s, box-shadow .15s;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bx-shadow-md);
}

.stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, var(--bx-primary) 0%, var(--bx-primary-dark) 100%);
  margin-bottom: 12px;
}

.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bx-text);
}

.stat-card .stat-label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bx-text-muted);
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: 7px;
  font-weight: 500;
  transition: box-shadow .15s, transform .05s, background-color .15s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: var(--bx-primary);
  border-color: var(--bx-primary);
}

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

.btn-outline-primary {
  color: var(--bx-primary);
  border-color: var(--bx-primary);
}

.btn-outline-primary:hover {
  background-color: var(--bx-primary);
  border-color: var(--bx-primary);
}

/* ---------- Tables ---------- */

.table thead th {
  background-color: var(--bx-primary-soft);
  color: var(--bx-primary-dark);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--bx-border);
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: var(--bx-primary-soft);
}

/* ---------- Forms ---------- */

.form-control, .form-select {
  border: 1px solid var(--bx-border);
  border-radius: 7px;
}

.form-control:focus, .form-select:focus {
  border-color: var(--bx-primary-light);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, .15);
}

.form-label {
  font-weight: 500;
  font-size: .85rem;
  color: var(--bx-text);
}

/* ---------- Badges / Alerts ---------- */

.badge {
  border-radius: 20px;
  font-weight: 600;
}

.alert {
  border: none;
  border-radius: var(--bx-radius);
}

.alert-success { background-color: #E7F7F1; color: var(--bx-success); }
.alert-danger { background-color: #FDEAEA; color: var(--bx-danger); }
.alert-warning { background-color: #FDF3DC; color: #8A6100; }

/* ---------- Modals ---------- */

.modal-content {
  border: none;
  border-radius: var(--bx-radius);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(120deg, var(--bx-primary-darker) 0%, var(--bx-primary-dark) 100%);
  color: #fff;
  border-bottom: none;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Scrollbars ---------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #C3D3E8;
  border-radius: 6px;
}

/* ---------- Backend admin sub-theme (dark navy / amber) ---------- */

.backend-shell {
  background-color: #0B1F33;
  min-height: 100vh;
}

.backend-navbar {
  background-color: #0B1F33 !important;
  border-bottom: 1px solid #1E3A57;
}

.backend-navbar .navbar-brand {
  color: #E8A33D !important;
  font-weight: 700;
}

.backend-panel {
  background: var(--bx-surface);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow);
  border: 1px solid var(--bx-border);
  overflow: hidden;
}

.btn-backend {
  background-color: #E8A33D;
  border-color: #E8A33D;
  color: #1B2A41;
  font-weight: 600;
}

.btn-backend:hover {
  background-color: #D6922E;
  border-color: #D6922E;
  color: #1B2A41;
}