/**
 * HotelHub brand theme — hospitality navy (not clinic green).
 * Deep ink-blue reads as lodging / reception, with a warm bronze accent.
 */

:root {
  --htl-primary: #1e4d7b;
  --htl-primary-dark: #153a5c;
  --htl-primary-hover: #2563a8;
  --htl-primary-mid: #2a6a9e;
  --htl-primary-soft: #e8f0f7;
  --htl-primary-soft-2: #d6e4f0;
  --htl-primary-muted: #5a7fa3;
  --htl-accent-warm: #b8956c;
  --htl-ink: #142433;

  --app-primary: var(--htl-primary);
  --app-primary-dark: var(--htl-primary-dark);
  --bx-primary: var(--htl-primary);
  --bx-primary-dark: var(--htl-primary-dark);
  --bx-primary-soft: var(--htl-primary-soft);
  --brand-primary: var(--htl-primary);
  --brand-primary-dark: var(--htl-primary-dark);
}

/* Top accent strip */
body.medic-shell-body::before {
  background: linear-gradient(90deg, #153a5c 0%, #1e4d7b 40%, #b8956c 100%) !important;
}

/* Sidebar brand — initials get navy; uploaded logos stay on clean white */
.sidebar-brand-mark:not(.sidebar-brand-mark--logo) {
  background: linear-gradient(145deg, #2a6a9e 0%, #1e4d7b 100%) !important;
}
.sidebar-brand-mark--logo {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
}
.htl-sidebar .sidebar-menu-item.active,
#sidebar.htl-sidebar .sidebar-menu-item.active {
  background: var(--htl-primary) !important;
}
.htl-tab.is-active {
  color: var(--htl-primary) !important;
  background: var(--htl-primary-soft) !important;
}

/* Avatar / user chrome */
.app-user-btn .avatar,
.bx-topbar .avatar {
  background: linear-gradient(135deg, #2a6a9e, #1e4d7b) !important;
}

/* ── Tailwind emerald (legacy brand) → navy ── */
.bg-emerald-600,
.bg-emerald-500,
.from-emerald-400,
.from-emerald-500,
.to-emerald-600,
.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  background-color: var(--htl-primary) !important;
}
.from-emerald-400,
.from-emerald-500 {
  --tw-gradient-from: #2a6a9e var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(42 106 158 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-emerald-600 {
  --tw-gradient-to: #1e4d7b var(--tw-gradient-to-position) !important;
}
.hover\:bg-emerald-700:hover {
  background-color: var(--htl-primary-dark) !important;
}
.text-emerald-600,
.text-emerald-700,
.text-emerald-800 {
  color: var(--htl-primary) !important;
}
.text-emerald-100,
.text-emerald-200 {
  color: #dbe7f2 !important;
}
.border-emerald-100,
.border-emerald-200 {
  border-color: var(--htl-primary-soft-2) !important;
}
.bg-emerald-50,
.bg-emerald-100,
.file\:bg-emerald-50 {
  background-color: var(--htl-primary-soft) !important;
}
.file\:text-emerald-700 {
  color: var(--htl-primary) !important;
}
.ring-emerald-200 {
  --tw-ring-color: var(--htl-primary-soft-2) !important;
}

/* Soft success flashes stay readable in navy wash */
.bg-emerald-50.text-emerald-800,
.border-emerald-200.bg-emerald-50 {
  color: #1e3a5f !important;
}

/* ── Tailwind green brand surfaces → navy ── */
.bg-green-500,
.bg-green-600,
.from-green-500,
.to-green-600,
.from-green-600,
.to-green-700 {
  background-color: var(--htl-primary) !important;
}
.from-green-500,
.from-green-600 {
  --tw-gradient-from: #2a6a9e var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(42 106 158 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-green-600,
.to-green-700 {
  --tw-gradient-to: #1e4d7b var(--tw-gradient-to-position) !important;
}
.from-green-50\/80 {
  --tw-gradient-from: rgb(232 240 247 / 0.8) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(232 240 247 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.bg-green-50,
.bg-green-100 {
  background-color: var(--htl-primary-soft) !important;
}
.bg-green-400\/30 {
  background-color: rgb(42 106 158 / 0.3) !important;
}
.text-green-100,
.text-green-200 {
  color: #dbe7f2 !important;
}
.text-green-600,
.text-green-700,
.text-green-800 {
  color: var(--htl-primary) !important;
}
.border-green-200 {
  border-color: var(--htl-primary-soft-2) !important;
}

/* Medic-style page buttons */
.medic-page-btn-primary-green {
  background: var(--htl-primary) !important;
  border-color: var(--htl-primary) !important;
  color: #fff !important;
}
.medic-page-btn-primary-green:hover {
  background: var(--htl-primary-dark) !important;
  border-color: var(--htl-primary-dark) !important;
  color: #fff !important;
}

/* Boxed theme leftovers */
.bx-pill--ok {
  background: var(--htl-primary-soft) !important;
  color: var(--htl-primary-dark) !important;
}
.bx-stat .delta.up {
  color: var(--htl-primary) !important;
}

/* Login panel */
.login-page {
  background: linear-gradient(160deg, #f8fafc 0%, #e8f0f7 45%, #f3f4f6 100%) !important;
}
.login-brand .mark,
.login-form button {
  background: var(--htl-primary) !important;
}
.login-form button:hover {
  background: var(--htl-primary-dark) !important;
}
.login-form input:focus,
.login-form input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--htl-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 77, 123, 0.18) !important;
}
.login-side {
  background: linear-gradient(160deg, #153a5c 0%, #1e4d7b 55%, #2a6a9e 100%) !important;
}

/* Rooms / dash-home CSS vars that still point at emerald */
.rooms-page,
.rm-page,
[class*="rooms"] {
  --rm-ok: var(--htl-primary);
  --rm-ok-soft: var(--htl-primary-soft);
}
.dash-home {
  --dh-good: var(--htl-primary-dark);
}
.owner-home,
.odash {
  --oh-accent: var(--htl-primary-dark);
}

/* Forms / accents */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--htl-primary);
}