/* ============================================================
   Druk Hospitality — Bhutan · Dzong theme
   Override of theme.css tokens. Load AFTER theme.css.
   ============================================================ */
:root {
  /* Bhutan-informed palette */
  --chora-cream:   #F7F0E3;
  --dzong-white:   #EDE6D3;
  --dzong-paper:   #FBF6EA;
  --namkha:        #7A1E24;   /* monastic-robe crimson */
  --namkha-dark:   #5B1319;
  --namkha-deep:   #3E0C10;
  --ser-kyi:       #C89B2A;   /* aged brass gold */
  --ser-kyi-soft:  #E5C169;
  --yudru:         #1F3A63;   /* ceremonial banner blue */
  --ink:           #1B1712;
  --ink-soft:      #4A3F31;

  /* Remap existing theme.css tokens so ALL existing views pick up the new palette */
  --brand-primary:      var(--namkha);
  --brand-primary-600:  var(--namkha-dark);
  --brand-primary-700:  var(--namkha-deep);
  --brand-accent:       var(--ser-kyi);
  --brand-success:      #2E6A44;
  --brand-warning:      #B47318;
  --brand-danger:       #9A2222;
  --brand-info:         var(--yudru);

  --sidebar-bg:         var(--namkha);
  --sidebar-bg-hover:   rgba(0,0,0,0.18);
  --sidebar-fg:         rgba(247,240,227,0.85);
  --sidebar-fg-muted:   rgba(247,240,227,0.5);
  --sidebar-active-bg:  rgba(0,0,0,0.30);
  --sidebar-active-fg:  var(--ser-kyi-soft);

  --content-bg:         var(--chora-cream);
  --card-bg:            var(--dzong-paper);
  --card-border:        rgba(122,30,36,0.18);
  --text-primary:       var(--ink);
  --text-secondary:     var(--ink-soft);
  --text-muted:         rgba(74,63,49,0.6);

  --rule:               rgba(122,30,36,0.18);

  --font-display: "Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
}

/* ---------- Typography overlays ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--content-bg);
  color: var(--text-primary);
}
h1,h2,h3,.page-title { font-family: var(--font-display); font-weight: 500; color: var(--namkha); letter-spacing: 0.01em; }
.card-elev-header h5,
.card-elev-header h4,
.card-elev-header h6 { font-family: var(--font-display); font-weight: 500; color: var(--namkha); letter-spacing: 0.01em; }
.eyebrow, .breadcrumbs {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--namkha); font-weight: 600;
}
.dzongkha { font-family: var(--font-display); font-style: italic; color: var(--ser-kyi); }

/* ---------- Sidebar (Druk + tenant hierarchy) ---------- */
.app-sidebar {
  background: linear-gradient(180deg, var(--namkha) 0%, var(--namkha-dark) 100%);
  color: var(--sidebar-fg);
}
.sidebar-brand {
  background: rgba(0,0,0,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 20px;
}
.sidebar-brand-text {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  letter-spacing: 0.04em !important;
  color: var(--ser-kyi-soft) !important;
  font-weight: 500 !important;
  line-height: 1.1;
}
.sidebar-brand-text small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: rgba(247,240,227,0.5);
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 500;
}
.sidebar-section-title {
  padding: 12px 20px 6px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ser-kyi-soft); font-weight: 600; opacity: 0.75;
}
.sidebar-link {
  border-left: 3px solid transparent;
  padding: 9px 20px !important;
  color: var(--sidebar-fg) !important;
  font-size: 13px;
}
.sidebar-link:hover { background: var(--sidebar-bg-hover) !important; color: #fff !important; }
.sidebar-link.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--ser-kyi-soft) !important;
  border-left-color: var(--ser-kyi) !important;
}
.sidebar-link i { color: currentColor; opacity: 0.85; }
.sidebar-link.active i { color: var(--ser-kyi-soft); opacity: 1; }

.sidebar-footer, .sidebar-user {
  color: rgba(247,240,227,0.55) !important;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ---------- Topbar / page headers ---------- */
.app-topbar { background: var(--dzong-paper); border-bottom: 1px solid var(--rule); }
.page-header { border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 20px; }
.page-title { font-size: 30px !important; margin: 0 !important; }
.page-subtitle { color: var(--text-secondary); font-size: 13px; }
.breadcrumbs a { color: var(--namkha); }
.breadcrumbs .sep { color: var(--ser-kyi); margin: 0 6px; }

/* ---------- Cards ---------- */
.card-elev, .card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm, 4px);
  position: relative;
}
.card-elev::before,
.card::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px;
  background: var(--ser-kyi);
}
.card-elev-header {
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
}
.card-elev-body { padding: 20px 22px; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--namkha) !important;
  border-color: var(--namkha) !important;
  color: var(--chora-cream) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--namkha-dark) !important;
  border-color: var(--namkha-dark) !important;
}
.btn-outline-primary {
  color: var(--namkha) !important;
  border-color: var(--namkha) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
}
.btn-outline-primary:hover { background: var(--namkha) !important; color: var(--chora-cream) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--dzong-paper);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--namkha);
  box-shadow: 0 0 0 3px rgba(122,30,36,0.10);
}
.form-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--namkha); font-weight: 600; }

/* ---------- Tables ---------- */
.table thead th {
  background: var(--dzong-white);
  color: var(--ink-soft);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.table tbody td { border-bottom: 1px solid var(--rule); }
.table-hover tbody tr:hover { background: rgba(122,30,36,0.04); }

/* ---------- Alerts ---------- */
.alert-success { background: rgba(46,106,68,0.14); color: #2E6A44; border-color: rgba(46,106,68,0.25); }
.alert-danger  { background: rgba(154,34,34,0.14); color: #9A2222; border-color: rgba(154,34,34,0.25); }
.alert-warning { background: rgba(180,115,24,0.16); color: #B47318; border-color: rgba(180,115,24,0.25); }
.alert-info    { background: rgba(31,58,99,0.14); color: var(--yudru); border-color: rgba(31,58,99,0.25); }

/* ---------- Badges / pills ---------- */
.badge.bg-primary { background: var(--namkha) !important; color: var(--chora-cream) !important; }
.badge.bg-success { background: #2E6A44 !important; }
.badge.bg-warning { background: #B47318 !important; color: #fff !important; }
.badge.bg-danger  { background: #9A2222 !important; }
.badge.bg-info    { background: var(--yudru) !important; color: var(--chora-cream) !important; }
.badge.bg-secondary { background: var(--ink-soft) !important; }

/* ---------- Topbar Bhutanese greeting ---------- */
.topbar-greeting {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px; margin: 0 6px 0 0;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.topbar-greeting-text { line-height: 1.1; }
.topbar-greeting-text .dzongkha {
  display: block;
  font-family: var(--font-display); font-style: italic;
  color: var(--namkha); font-size: 15px; font-weight: 500;
  letter-spacing: 0.01em;
}
.topbar-greeting-text small {
  display: block; font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 1px;
}
@@media (max-width: 900px) {
  .topbar-greeting-text { display: none; }
}

/* ---------- Cloud-scroll divider under every page-header (subtle Bhutan cue) ---------- */
.page-header {
  border-bottom: none;
  padding-bottom: 10px;
  position: relative;
}
.page-header::after {
  content: "";
  display: block;
  height: 12px;
  margin-top: 6px;
  background:
    linear-gradient(90deg, transparent 0%, var(--rule) 20%, var(--rule) 80%, transparent 100%) center 6px/100% 1px no-repeat,
    radial-gradient(circle at 50% 3px, var(--ser-kyi) 2px, transparent 3px),
    radial-gradient(circle at calc(50% - 40px) 6px, var(--namkha) 1.5px, transparent 2px),
    radial-gradient(circle at calc(50% + 40px) 6px, var(--namkha) 1.5px, transparent 2px);
  background-repeat: no-repeat;
}

/* Sidebar section titles get a small ashtamangala flourish */
.sidebar-section-title {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-section-title::before {
  content: "";
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ser-kyi-soft);
  box-shadow: 6px 0 0 var(--ser-kyi-soft);
  margin-right: 2px;
}

/* Reusable ashta accent classes */
.ashta-accent {
  display: inline-block; vertical-align: middle;
  color: var(--ser-kyi);
  opacity: 0.9;
}
.ashta-accent svg { display: block; }

/* ---------- Ensure every post-login surface honours the theme ---------- */
.app-main, .app-content { background: var(--content-bg) !important; color: var(--text-primary); }
.app-topbar {
  background: var(--dzong-paper) !important;
  border-bottom: 1px solid var(--rule) !important;
  color: var(--namkha);
}
.app-topbar a, .app-topbar .btn-link { color: var(--namkha) !important; }
.text-primary { color: var(--namkha) !important; }
.text-muted, .text-muted-2 { color: var(--text-muted) !important; }
.bg-primary { background-color: var(--namkha) !important; color: var(--chora-cream) !important; }
.bg-light, .bg-white { background-color: var(--dzong-paper) !important; }
.border-primary { border-color: var(--namkha) !important; }

/* Bootstrap links throughout */
a { color: var(--namkha); }
a:hover { color: var(--namkha-dark); }

/* Modals */
.modal-content { background: var(--dzong-paper); border: 1px solid var(--rule); }
.modal-header { border-bottom: 1px solid var(--rule); background: var(--dzong-white); }
.modal-header .modal-title { font-family: var(--font-display); color: var(--namkha); font-weight: 500; }
.modal-footer { border-top: 1px solid var(--rule); }

/* Nav pills / tabs */
.nav-pills .nav-link.active, .nav-tabs .nav-link.active {
  background: var(--namkha) !important; color: var(--chora-cream) !important; border-color: var(--namkha) !important;
}

/* Progress bars */
.progress-bar { background: var(--namkha); }
.progress-bar.bg-success { background: #2E6A44 !important; }
.progress-bar.bg-warning { background: #B47318 !important; }

/* Focus ring for accessibility */
*:focus-visible { outline: 2px solid var(--ser-kyi); outline-offset: 2px; }

/* Rounded pills used across the app */
.rounded-pill { background: var(--namkha-dark); color: var(--chora-cream); }

/* ---------- Stat icons (dashboard) ---------- */
.stat-icon { background: rgba(122,30,36,0.08); color: var(--namkha); border-radius: 4px; }
.stat-icon.icon-amber, .stat-icon.icon-warning { background: rgba(180,115,24,0.14); color: #B47318; }
.stat-icon.icon-emerald, .stat-icon.icon-success { background: rgba(46,106,68,0.14); color: #2E6A44; }
.stat-icon.icon-cyan, .stat-icon.icon-info { background: rgba(31,58,99,0.14); color: var(--yudru); }
.stat-icon.icon-rose, .stat-icon.icon-danger { background: rgba(154,34,34,0.14); color: #9A2222; }
.stat-icon.icon-violet { background: rgba(200,155,42,0.16); color: var(--ser-kyi); }

/* ---------- Login screen (Druk brand door) ---------- */
.druk-login {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--chora-cream);
}
@media (max-width: 900px) { .druk-login { grid-template-columns: 1fr; } }

.druk-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(200,155,42,0.14), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(31,58,99,0.14), transparent 55%),
    linear-gradient(180deg, #5B1319 0%, #7A1E24 55%, #3E0C10 100%);
  color: var(--chora-cream);
  padding: 44px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  overflow: hidden; min-height: 620px;
}
.druk-corner { position: absolute; width: 54px; height: 54px; opacity: 0.35; pointer-events: none; color: var(--ser-kyi-soft); }
.druk-corner.tl { top: 18px; left: 18px; }
.druk-corner.tr { top: 18px; right: 18px; transform: scaleX(-1); }
.druk-corner.bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.druk-corner.br { bottom: 18px; right: 18px; transform: scale(-1,-1); }

.druk-brand-row {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); color: var(--ser-kyi-soft); letter-spacing: 0.04em;
}
.druk-brand-row .wm { font-size: 22px; line-height: 1; }
.druk-brand-row .wm small {
  display: block; font-family: 'Inter', sans-serif; font-size: 9.5px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(247,240,227,0.55); font-weight: 500; margin-top: 5px;
}

/* Center block: emblem + wordmark + tagline as one unit — hard-centered */
.druk-center {
  text-align: center;
  width: 100%;
  padding: 0;
}
.druk-emblem {
  display: block !important;
  width: 190px !important; height: 190px !important;
  margin: 0 auto 24px auto !important;
  padding: 14px 0;                        /* room for the top/bottom rule accents */
  border-top: 1px solid rgba(229,193,105,0.28);
  border-bottom: 1px solid rgba(229,193,105,0.28);
  position: relative;
}
.druk-emblem svg {
  width: 190px !important; height: 190px !important;
  max-width: 100%; max-height: 100%;
  display: block !important;
  margin: 0 auto !important;
  overflow: visible;
}

/* Wordmark stack under the emblem — normal block flow, no flex quirks */
.druk-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 48px; line-height: 1;
  letter-spacing: 0.08em;
  color: var(--chora-cream); font-weight: 500;
}
.druk-sub {
  margin: 0 0 24px;
  font-size: 12px; letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(247,240,227,0.7);
}
.druk-tagline {
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--ser-kyi-soft);
  line-height: 1.35; text-wrap: balance;
}
.druk-foot { text-align: center; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(247,240,227,0.45); }
.druk-foot b { color: var(--ser-kyi-soft); font-weight: 500; letter-spacing: 0.3em; }

.druk-signin { padding: 60px; display: flex; flex-direction: column; justify-content: center; max-width: 520px; }
.druk-signin .top {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--namkha); font-weight: 600; margin-bottom: 22px;
}
.druk-signin .top::before, .druk-signin .top::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.druk-signin h1 { font-family: var(--font-display); font-size: 34px; font-weight: 500; color: var(--namkha); margin: 0 0 6px; letter-spacing: 0.01em; text-wrap: balance; }
.druk-signin .lead { color: var(--ink-soft); font-size: 14px; margin: 0 0 32px; max-width: 42ch; }
.druk-signin .assist { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.druk-signin .assist b { color: var(--namkha); font-weight: 600; }
.druk-tenant-note {
  display: flex; gap: 10px; align-items: center; margin-top: 12px;
  padding: 10px 12px; background: rgba(122,30,36,0.04); border-left: 3px solid var(--ser-kyi);
  font-size: 11.5px;
}
</content>