/* ═══════════════════════════════════════════════════════════
   HOSP DESIGN SYSTEM — Dark Premium Theme
   Place at: static/css/hosp-theme.css
   ═══════════════════════════════════════════════════════════ */

body,
#wrapper,
#content-wrapper,
#page-wrapper,
.sb-nav-fixed #layoutSidenav_content,
.content-wrapper,
.main-content { background: #0b0d13 !important; color: #eef2f7; }

:root {
  --bg:  #0b0d13;
  --s1:  #111520;
  --s2:  #171b28;
  --s3:  #1e2336;
  --brd: rgba(255,255,255,.07);
  --brd2:rgba(255,255,255,.13);
  --tx1: #eef2f7;
  --tx2: #8894a8;
  --tx3: #4a5567;

  --g:  #4ade80; --gd: rgba(74,222,128,.13);
  --b:  #60a5fa; --bd: rgba(96,165,250,.13);
  --a:  #fbbf24; --ad: rgba(251,191,36,.13);
  --r:  #f87171; --rd: rgba(248,113,113,.13);
  --p:  #c084fc; --pd: rgba(192,132,252,.13);
  --t:  #2dd4bf; --td: rgba(45,212,191,.13);
  --i:  #818cf8; --id: rgba(129,140,248,.13);
  --br: #f59e0b; --brd3:rgba(245,158,11,.13);
  --gy: #64748b; --gyd:rgba(100,116,139,.13);

  --rad:    .75rem;
  --rad-sm: .5rem;
}

/* ── Card ──────────────────────────────────── */
.dc {
  background: var(--s1); border: 1px solid var(--brd);
  border-radius: var(--rad); overflow: hidden;
  transition: border-color .2s;
}
.dc:hover { border-color: var(--brd2); }
.dc-hd {
  padding: .7rem 1rem; border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.dc-hd-title {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); white-space: nowrap;
}
.dc-bd { padding: .875rem; }

/* ── KPI strip ─────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .625rem;
}
.kc {
  background: var(--s1); border: 1px solid var(--brd); border-radius: var(--rad);
  padding: .875rem 1rem; display: flex; align-items: center; gap: .75rem;
  transition: border-color .15s, transform .12s;
}
.kc:hover { border-color: var(--brd2); transform: translateY(-1px); }
.kc-ico {
  width: 36px; height: 36px; border-radius: .5rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .875rem;
}
.kc-num  { font-size: 1.5rem; font-weight: 800; color: var(--tx1); line-height: 1; }
.kc-lbl  { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); margin-top: .2rem; }
.kc-sub  { font-size: .63rem; color: var(--tx3); margin-top: .1rem; }
.kc-prog { height: 3px; border-radius: 99px; background: var(--s3); overflow: hidden; margin-top: .5rem; }
.kc-prog-f { height: 100%; border-radius: 99px; }

/* Icon colour helpers */
.ci-g  { background: var(--gd);   color: var(--g); }
.ci-b  { background: var(--bd);   color: var(--b); }
.ci-a  { background: var(--ad);   color: var(--a); }
.ci-r  { background: var(--rd);   color: var(--r); }
.ci-p  { background: var(--pd);   color: var(--p); }
.ci-t  { background: var(--td);   color: var(--t); }
.ci-i  { background: var(--id);   color: var(--i); }
.ci-br { background: var(--brd3); color: var(--br); }
.ci-gy { background: var(--gyd);  color: var(--gy); }

/* ── Tab system ────────────────────────────── */
.tab-strip { display: flex; gap: .2rem; flex-wrap: nowrap; overflow-x: auto; }
.tab-strip::-webkit-scrollbar { display: none; }
.tb {
  padding: .22rem .55rem; border-radius: .375rem;
  font-size: .68rem; font-weight: 600; color: var(--tx3);
  background: transparent; border: none; cursor: pointer;
  transition: background .1s, color .1s; white-space: nowrap;
}
.tb:hover { background: var(--s3); color: var(--tx2); }
.tb.on    { background: var(--s3); color: var(--tx1); }
.tb-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 99px;
  background: var(--bd); color: var(--b);
  font-size: .58rem; font-weight: 700; margin-left: .3rem; padding: 0 .3rem;
}
.tb-badge.warn { background: var(--rd); color: var(--r); }

/* ── Feed rows ─────────────────────────────── */
.fr {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .45rem 0; border-bottom: 1px solid var(--brd);
}
.fr:last-child { border-bottom: none; }
.fr-av {
  width: 28px; height: 28px; border-radius: .375rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .65rem;
}
.fr-body { flex: 1; min-width: 0; }
.fr-title {
  font-size: .79rem; font-weight: 600; color: var(--tx1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-meta  { font-size: .67rem; color: var(--tx3); margin-top: .1rem; }
.fr-side  { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }

/* ── Queue items ───────────────────────────── */
.qi {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .625rem; border-radius: var(--rad-sm);
  background: var(--s2); margin-bottom: .3rem;
  text-decoration: none; color: inherit;
  border-left: 2px solid transparent;
  transition: background .1s;
}
.qi:hover { background: var(--s3); color: inherit; text-decoration: none; }
.qi-body  { flex: 1; min-width: 0; }
.qi-title { font-size: .77rem; font-weight: 600; color: var(--tx1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-sub   { font-size: .67rem; color: var(--tx3); }
.qi.qt  { border-left-color: var(--i); }
.qi.qf  { border-left-color: var(--g); }
.qi.qs  { border-left-color: var(--t); }
.qi.qc  { border-left-color: var(--p); }

/* ── Staff row ─────────────────────────────── */
.sr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .375rem 0; border-bottom: 1px solid var(--brd); font-size: .78rem;
}
.sr:last-child { border-bottom: none; }

/* ── Staff row link wrapper ────────────────── */
.sr-link {
  display: block; text-decoration: none; color: inherit;
  transition: background .1s;
  border-radius: var(--rad-sm);
  padding: 0 .4rem; margin: 0 -.4rem;
}
.sr-link:hover { background: var(--s2); text-decoration: none; color: inherit; }
.sr-link:hover .sr { border-bottom-color: transparent; }
.sr-link:last-child .sr { border-bottom: none; }

/* ── Pills ─────────────────────────────────── */
.pl {
  display: inline-flex; align-items: center;
  padding: .14rem .44rem; border-radius: 99px;
  font-size: .59rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.pl-g  { background: var(--gd);   color: var(--g); }
.pl-b  { background: var(--bd);   color: var(--b); }
.pl-a  { background: var(--ad);   color: var(--a); }
.pl-r  { background: var(--rd);   color: var(--r); }
.pl-p  { background: var(--pd);   color: var(--p); }
.pl-t  { background: var(--td);   color: var(--t); }
.pl-i  { background: var(--id);   color: var(--i); }
.pl-br { background: var(--brd3); color: var(--br); }
.pl-gy { background: var(--gyd);  color: var(--gy); }

/* badge- compatibility for status_class pass-through */
.badge-food-order      { background: var(--gd)   !important; color: var(--g)  !important; border:none !important; }
.badge-service-request { background: var(--td)   !important; color: var(--t)  !important; border:none !important; }
.badge-custom-request  { background: var(--pd)   !important; color: var(--p)  !important; border:none !important; }
.badge-event           { background: var(--bd)   !important; color: var(--b)  !important; border:none !important; }
.badge-premise         { background: var(--brd3) !important; color: var(--br) !important; border:none !important; }

/* ── Eye button ────────────────────────────── */
.eb {
  width: 24px; height: 24px; border-radius: .35rem;
  border: 1px solid var(--brd2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .6rem; color: var(--tx3); text-decoration: none; flex-shrink: 0;
  transition: background .1s, color .1s, border-color .1s;
}
.eb:hover { background: var(--b); border-color: var(--b); color: #fff; text-decoration: none; }

/* ── Quick links ───────────────────────────── */
.ql-g { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ql-a {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .625rem; border-radius: var(--rad-sm);
  background: var(--s2); border: 1px solid var(--brd);
  font-size: .74rem; font-weight: 600; color: var(--tx2); text-decoration: none;
  transition: background .1s, border-color .1s, color .1s;
}
.ql-a:hover { background: var(--bd); border-color: var(--b); color: var(--b); text-decoration: none; }

/* ── Notification row ──────────────────────── */
.nr {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .44rem 0; border-bottom: 1px solid var(--brd);
  text-decoration: none; color: inherit;
}
.nr:last-child { border-bottom: none; }
.nr:hover { color: inherit; text-decoration: none; }
.nr-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--b); margin-top: .38rem; flex-shrink: 0; opacity: 0;
}
.nr.unread .nr-dot { opacity: 1; }
.nr-ttl { font-size: .77rem; font-weight: 600; color: var(--tx1); }
.nr-msg { font-size: .67rem; color: var(--tx3); margin-top: .05rem; }
.nr-age { font-size: .62rem; color: var(--tx3); white-space: nowrap; }

/* ── Hotel info ────────────────────────────── */
.hi { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .45rem; }
.hi:last-child { margin-bottom: 0; }
.hi-k { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); min-width: 56px; flex-shrink: 0; }
.hi-v { font-size: .77rem; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Property stat tile ────────────────────── */
.st { background: var(--s2); border: 1px solid var(--brd); border-radius: var(--rad-sm); padding: .75rem; text-align: center; }
.st-num { font-size: 1.375rem; font-weight: 800; color: var(--tx1); line-height: 1; }
.st-lbl { font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); margin-top: .25rem; }

/* ── Scrollable panel ──────────────────────── */
.sp { max-height: 420px; overflow-y: auto; }
.sp::-webkit-scrollbar { width: 3px; }
.sp::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 2px; }

/* ── Empty state ───────────────────────────── */
.emp { text-align: center; padding: 1.75rem 1rem; color: var(--tx3); }
.emp i { font-size: 1.375rem; margin-bottom: .5rem; display: block; opacity: .3; }
.emp p { font-size: .78rem; font-weight: 600; margin: 0; }
.emp small { font-size: .68rem; opacity: .6; }

/* ═══════════════════════════════════════════════════════════
   BOOTSTRAP DARK OVERRIDES — Auto-darkens existing templates
   ═══════════════════════════════════════════════════════════ */

/* Cards */
.card { background: var(--s1) !important; border: 1px solid var(--brd) !important; color: var(--tx1) !important; }
.card-header, .card-footer { background: transparent !important; border-color: var(--brd) !important; color: var(--tx2) !important; }
.card-title { color: var(--tx1) !important; }
.card-body { color: var(--tx1) !important; }

/* Tables */
.table { color: var(--tx1) !important; --bs-table-bg: transparent; --bs-table-color: var(--tx1); --bs-table-border-color: var(--brd); --bs-table-striped-bg: var(--s2); --bs-table-hover-bg: var(--s2); }
.table > :not(caption) > * > * { background-color: transparent !important; color: var(--tx1) !important; border-bottom-color: var(--brd) !important; }
.table thead th { color: var(--tx3) !important; font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; border-bottom: 1px solid var(--brd2) !important; }
.table-hover tbody tr:hover > * { background-color: var(--s2) !important; }
.table-striped tbody tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.02) !important; }

/* Forms */
.form-control, .form-select, textarea.form-control {
  background: var(--s2) !important; border: 1px solid var(--brd) !important; color: var(--tx1) !important;
}
.form-control:focus, .form-select:focus { background: var(--s2) !important; border-color: var(--b) !important; box-shadow: 0 0 0 .2rem rgba(96,165,250,.15) !important; color: var(--tx1) !important; }
.form-control::placeholder { color: var(--tx3) !important; }
.form-label { color: var(--tx2) !important; font-weight: 600; font-size: .8rem; }
.form-text { color: var(--tx3) !important; }
.form-check-input { background-color: var(--s2); border-color: var(--brd2); }
.form-check-input:checked { background-color: var(--b); border-color: var(--b); }
.form-check-label { color: var(--tx2); }
.input-group-text { background: var(--s3) !important; border: 1px solid var(--brd) !important; color: var(--tx2) !important; }

/* Modals */
.modal-content { background: var(--s1) !important; border: 1px solid var(--brd) !important; color: var(--tx1) !important; }
.modal-header, .modal-footer { border-color: var(--brd) !important; }
.modal-title { color: var(--tx1) !important; }
.btn-close { filter: invert(1) brightness(.7); }

/* Dropdowns */
.dropdown-menu { background: var(--s1) !important; border: 1px solid var(--brd) !important; color: var(--tx1) !important; }
.dropdown-item { color: var(--tx2) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--s2) !important; color: var(--tx1) !important; }
.dropdown-divider { border-color: var(--brd) !important; }
.dropdown-header { color: var(--tx3) !important; }

/* Buttons — keep brand colors but soften neutrals */
.btn-secondary { background: var(--s3) !important; border-color: var(--brd2) !important; color: var(--tx1) !important; }
.btn-secondary:hover { background: var(--s2) !important; }
.btn-light { background: var(--s2) !important; border-color: var(--brd) !important; color: var(--tx1) !important; }
.btn-outline-secondary { color: var(--tx2) !important; border-color: var(--brd2) !important; }
.btn-outline-secondary:hover { background: var(--s3) !important; color: var(--tx1) !important; }

/* Alerts */
.alert { border-color: var(--brd) !important; }
.alert-info    { background: var(--bd) !important; color: var(--b) !important; }
.alert-success { background: var(--gd) !important; color: var(--g) !important; }
.alert-warning { background: var(--ad) !important; color: var(--a) !important; }
.alert-danger  { background: var(--rd) !important; color: var(--r) !important; }

/* List groups */
.list-group-item { background: var(--s1) !important; border-color: var(--brd) !important; color: var(--tx1) !important; }
.list-group-item:hover { background: var(--s2) !important; }

/* Pagination */
.page-link { background: var(--s2) !important; border-color: var(--brd) !important; color: var(--tx2) !important; }
.page-link:hover { background: var(--s3) !important; color: var(--tx1) !important; }
.page-item.active .page-link { background: var(--b) !important; border-color: var(--b) !important; color: #fff !important; }
.page-item.disabled .page-link { background: var(--s1) !important; color: var(--tx3) !important; }

/* Breadcrumbs */
.breadcrumb { background: transparent !important; }
.breadcrumb-item { color: var(--tx3) !important; }
.breadcrumb-item.active { color: var(--tx1) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--tx3) !important; }

/* Tabs/Nav */
.nav-tabs { border-bottom-color: var(--brd) !important; }
.nav-tabs .nav-link { color: var(--tx2) !important; border: none !important; }
.nav-tabs .nav-link:hover { color: var(--tx1) !important; background: var(--s2) !important; }
.nav-tabs .nav-link.active { background: var(--s2) !important; color: var(--tx1) !important; border-bottom: 2px solid var(--b) !important; }

/* Badges (Bootstrap) — auto-styled by class */
.badge.bg-primary   { background: var(--bd) !important; color: var(--b) !important; }
.badge.bg-success   { background: var(--gd) !important; color: var(--g) !important; }
.badge.bg-warning   { background: var(--ad) !important; color: var(--a) !important; }
.badge.bg-danger    { background: var(--rd) !important; color: var(--r) !important; }
.badge.bg-info      { background: var(--td) !important; color: var(--t) !important; }
.badge.bg-secondary { background: var(--gyd) !important; color: var(--gy) !important; }
.badge.bg-light     { background: var(--s3) !important; color: var(--tx2) !important; }
.badge.bg-dark      { background: var(--s3) !important; color: var(--tx1) !important; }

/* Text utility overrides */
.text-muted { color: var(--tx3) !important; }
.text-secondary { color: var(--tx2) !important; }
.text-dark { color: var(--tx1) !important; }
.bg-light { background: var(--s2) !important; }
.bg-white { background: var(--s1) !important; }
.bg-dark { background: var(--bg) !important; }
hr { border-color: var(--brd) !important; }

/* Headings inside content */
.main-content h1, .main-content h2, .main-content h3,
.main-content h4, .main-content h5, .main-content h6 { color: var(--tx1); }

/* Prevent horizontal scrollbar */
body { overflow-x: hidden; }
.dash-root { overflow-x: hidden; }
.dash-root .row { margin-left: 0; margin-right: 0; }
.dash-root .row > [class*="col-"] { padding-left: .5rem; padding-right: .5rem; }

@media (max-width: 767.98px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kc-num    { font-size: 1.25rem; }
}

/* ── Notification dropdown overflow fix ────── */
.notification-dropdown {
    width: 360px !important;
    max-width: 95vw !important;
    overflow-x: hidden !important;
}

/* Force flex children to allow shrink so text-truncate works */
.notification-dropdown .flex-grow-1,
.notification-dropdown .d-flex,
.notification-dropdown .notification-item {
    min-width: 0;
}

/* Truncate long titles with ellipsis */
.notification-dropdown .notification-item .fw-bold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.notification-dropdown .notification-item .small.text-truncate {
    max-width: 100%;
}