/* StayKada back office — Metronic 8 demo1 layout pattern (dark sidebar + light content).
   Metronic's full asset bundle is staged under /assets for phase-1 component adoption;
   this sheet keeps the shell fully styled standalone. */
:root {
  --adm-sidebar: #1e1e2d;          /* Metronic demo1 aside color */
  --adm-sidebar-active: #2a2a3c;
  --adm-primary: #009ef7;          /* Metronic primary blue */
  --adm-ink: #181c32;
  --adm-muted: #a1a5b7;
  --adm-border: #eff2f5;
  --adm-bg: #f5f8fa;
  --adm-font: 'Inter', system-ui, sans-serif;
}
html, body { font-family: var(--adm-font); background: var(--adm-bg); color: var(--adm-ink); }

.adm-wrapper { display: flex; min-height: 100vh; }
.adm-aside { width: 265px; background: var(--adm-sidebar); color: #fff; flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.adm-logo { padding: 1.4rem 1.5rem; font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -.5px; border-bottom: 1px solid #2b2b40; }
.adm-logo span { color: var(--adm-primary); }
.adm-menu { padding: 1rem .75rem; overflow-y: auto; flex: 1; }
.adm-menu .section { color: #565674; font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; padding: .9rem .75rem .35rem; font-weight: 700; }
.adm-menu a { display: flex; align-items: center; gap: .7rem; color: #9899ac; padding: .6rem .75rem; border-radius: 8px; text-decoration: none; font-size: .95rem; }
.adm-menu a i { width: 20px; text-align: center; }
.adm-menu a:hover { color: #fff; background: var(--adm-sidebar-active); }
.adm-menu a.active { color: #fff; background: var(--adm-sidebar-active); }
.adm-menu a.active i { color: var(--adm-primary); }
.adm-rolebadge { margin: 0 1rem 1rem; background: #2b2b40; border-radius: 10px; padding: .7rem .9rem; font-size: .8rem; color: #9899ac; }
.adm-rolebadge strong { color: #fff; display: block; }

.adm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.adm-header { background: #fff; border-bottom: 1px solid var(--adm-border); padding: .9rem 1.8rem; display: flex; align-items: center; justify-content: space-between; }
.adm-content { padding: 1.8rem; }

.adm-card { background: #fff; border-radius: 12px; box-shadow: 0 0 20px rgba(76,87,125,.02); border: 1px solid var(--adm-border); padding: 1.5rem; }
.adm-kpi .value { font-size: 1.9rem; font-weight: 800; }
.adm-kpi .label { color: var(--adm-muted); font-size: .85rem; }
.adm-kpi i { font-size: 1.6rem; color: var(--adm-primary); }

.table.adm-table th { color: var(--adm-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px dashed var(--adm-border); }
.table.adm-table td { border-bottom: 1px dashed var(--adm-border); vertical-align: middle; }

.badge-lightish { border-radius: 6px; padding: .35rem .65rem; font-size: .78rem; font-weight: 700; }
.b-active, .b-succeeded, .b-confirmed, .b-approved { background: #e8fff3; color: #50cd89; }
.b-pendingreview, .b-pending, .b-quoted, .b-open, .b-pendingpayment { background: #fff8dd; color: #ffc700; }
.b-suspended, .b-cancelled, .b-failed, .b-rejected { background: #fff5f8; color: #f1416c; }
.b-completed, .b-checkedin, .b-draft { background: #f1faff; color: #009ef7; }

.btn-adm { background: var(--adm-primary); color: #fff; border: 0; border-radius: 8px; padding: .5rem 1rem; font-weight: 600; }
.btn-adm:hover { background: #0095e8; color: #fff; }
.btn-adm-light { background: #f5f8fa; color: #7e8299; border: 0; border-radius: 8px; padding: .5rem 1rem; font-weight: 600; }
.btn-adm-light:hover { background: #eff2f5; color: var(--adm-ink); }

.adm-login { max-width: 420px; margin: 10vh auto; }
.chart-bars { display: flex; gap: 14px; align-items: flex-end; height: 180px; }
.chart-bars .bar { flex: 1; background: linear-gradient(180deg, #009ef7, #0077c2); border-radius: 6px 6px 0 0; min-height: 6px; position: relative; }
.chart-bars .bar .lbl { position: absolute; bottom: -24px; width: 100%; text-align: center; font-size: .75rem; color: var(--adm-muted); }
.chart-bars .bar .val { position: absolute; top: -22px; width: 100%; text-align: center; font-size: .75rem; font-weight: 700; }

/* ══════════════ v6 PREMIUM BACK OFFICE ══════════════ */
:root { --adm-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
        --adm-shadow-lg: 0 8px 30px rgba(16,24,40,.12); }

.adm-aside { box-shadow: inset -1px 0 0 rgba(255,255,255,.04); }
.adm-logo { display: flex; align-items: center; gap: .6rem; }
.adm-menu a { position: relative; }
.adm-menu a.active::before { content: ""; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--adm-primary); }
.adm-menu .badge-count { margin-left: auto; background: #f1416c; color: #fff; border-radius: 8px; padding: 1px 7px;
  font-size: .68rem; font-weight: 800; }

.adm-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(255,255,255,.9); }
.adm-search { display: flex; align-items: center; gap: .5rem; background: var(--adm-bg); border: 1px solid var(--adm-border);
  border-radius: 10px; padding: .45rem .8rem; min-width: 280px; }
.adm-search input { border: 0; background: transparent; outline: none; font-size: .9rem; flex: 1; }

.adm-card { box-shadow: var(--adm-shadow); transition: box-shadow .18s; }
.adm-card:hover { box-shadow: var(--adm-shadow-lg); }
.adm-kpi { position: relative; overflow: hidden; }
.adm-kpi .icon-wrap { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #f1faff; color: var(--adm-primary); font-size: 1.15rem; margin-bottom: .7rem; }
.adm-kpi.warn .icon-wrap { background: #fff8dd; color: #ffc700; }
.adm-kpi.ok .icon-wrap { background: #e8fff3; color: #50cd89; }
.adm-kpi.danger .icon-wrap { background: #fff5f8; color: #f1416c; }
.adm-kpi .value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.9px; line-height: 1.1; }
.adm-kpi .label { color: var(--adm-muted); font-size: .82rem; font-weight: 600; }
.adm-kpi .trend { font-size: .78rem; font-weight: 700; margin-top: .35rem; }
.adm-kpi .trend.up { color: #50cd89; } .adm-kpi .trend.down { color: #f1416c; }

.table.adm-table thead th { background: #fcfcfd; }
.table.adm-table tbody tr { transition: background .12s; }
.table.adm-table tbody tr:hover { background: #fbfcfe; }
.adm-avatar { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#009ef7,#0077c2);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; }

.chart-bars .bar { position: relative; transition: filter .15s; cursor: default; }
.chart-bars .bar:hover { filter: brightness(1.15); }
.donut { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; }
.donut .hole { width: 92px; height: 92px; background: #fff; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 1.25rem; }
.legend-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .25rem 0; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }

.adm-toast-stack { position: fixed; top: 76px; right: 22px; z-index: 2100; display: flex; flex-direction: column; gap: .6rem; }
.adm-toast { display: flex; gap: .7rem; background: #fff; border-radius: 12px; box-shadow: var(--adm-shadow-lg);
  border-left: 4px solid var(--adm-primary); padding: .85rem 1.1rem; min-width: 280px; font-size: .9rem;
  animation: admToastIn .25s ease; }
@keyframes admToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.queue-item { display: flex; gap: .85rem; padding: .9rem 0; border-bottom: 1px dashed var(--adm-border); }
.queue-item:last-child { border-bottom: 0; }
.risk-bar { height: 6px; border-radius: 3px; background: var(--adm-border); overflow: hidden; width: 90px; }
.risk-bar div { height: 100%; border-radius: 3px; }
.empty-adm { text-align: center; padding: 3rem 1rem; color: var(--adm-muted); }
.empty-adm .glyph { width: 68px; height: 68px; border-radius: 50%; background: #f1faff; color: var(--adm-primary);
  display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto 1rem; }

.queue-item .badge-lightish { flex-shrink: 0; white-space: nowrap; font-size: .68rem; padding: .3rem .5rem; }
.queue-item { align-items: center; }
.adm-logo img { display: block; }
.adm-logo { border-bottom: 1px solid #2b2b40; }