/* ==========================================================================
   HMS - Hostel OS design system
   ========================================================================== */

:root{
  --bg:#f4f1ea;
  --surface:#ffffff;
  --surface-border:#e7e2d6;
  --ink:#1c1c1a;
  --ink-soft:#4a4944;
  --muted:#8b887f;
  --navy:#171b26;
  --navy-soft:#20263650;
  --amber:#bd8640;
  --amber-soft:#f2e2c8;
  --amber-strong:#a86f2c;
  --green:#2f7d5d;
  --green-soft:#e1efe7;
  --blue:#3b6fa6;
  --blue-soft:#e2ebf5;
  --red:#c0392b;
  --red-soft:#f7e3e0;
  --grey-soft:#eceae4;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,20,10,.04), 0 1px 12px rgba(20,20,10,.03);
}

*{box-sizing:border-box;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14.5px;
  line-height:1.5;
}

.font-serif{font-family:'Fraunces','Lora',Georgia,serif;}
.font-mono{font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;}

h1,h2,h3,.hms-heading{font-family:'Fraunces','Lora',Georgia,serif; font-weight:600; letter-spacing:-.01em; color:var(--ink);}

a{color:inherit; text-decoration:none;}

/* ---------- App shell ---------- */
.hms-shell{display:flex; min-height:100vh;}

.hms-sidebar{
  width:248px; flex:0 0 248px; background:var(--navy); color:#c9cad3;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.hms-sidebar-brand{padding:22px 22px 16px; display:flex; align-items:center; gap:11px;}
.hms-sidebar-brand .mark{
  width:36px; height:36px; border-radius:9px; background:var(--amber);
  display:flex; align-items:center; justify-content:center; color:#211405; font-size:18px;
}
.hms-sidebar-brand .brand-name{font-family:'Fraunces','Lora',serif; font-weight:700; color:#fff; font-size:19px; line-height:1.1;}
.hms-sidebar-brand .brand-sub{font-size:10px; letter-spacing:.14em; color:#7d8194; text-transform:uppercase;}

.hms-nav{flex:1; padding:6px 12px 16px;}
.hms-nav-group{margin-top:18px;}
.hms-nav-group:first-child{margin-top:4px;}
.hms-nav-label{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#5c6178;
  padding:0 10px 6px; font-weight:600;
}
.hms-nav-link{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px;
  color:#c9cad3; font-size:13.6px; margin-bottom:2px; transition:background .12s, color .12s;
}
.hms-nav-link:hover{background:#232a3b; color:#fff;}
.hms-nav-link.active{background:var(--amber); color:#211405; font-weight:600;}
.hms-nav-link i{width:17px; text-align:center; font-size:14.5px; opacity:.9;}
.hms-nav-link .badge-count{
  margin-left:auto; font-size:10.5px; padding:2px 7px; border-radius:20px;
  background:#2c3346; color:#c9cad3; font-family:'Inter',sans-serif; font-weight:600;
}
.hms-nav-link.active .badge-count{background:#211405; color:var(--amber-soft);}
.hms-nav-link .badge-count.live{background:#c0392b; color:#fff;}

.hms-sidebar-footer{padding:14px 18px; border-top:1px solid #262c3d; display:flex; align-items:center; gap:10px;}
.hms-sidebar-footer .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:0 0 34px;
}
.hms-sidebar-footer .name{font-size:13px; font-weight:600; color:#fff;}
.hms-sidebar-footer .role{font-size:11px; color:#8489a0;}

/* ---------- Main column ---------- */
.hms-main{flex:1; min-width:0;}
.hms-topbar{
  display:flex; align-items:center; gap:20px; padding:18px 28px; background:var(--bg);
  border-bottom:1px solid var(--surface-border);
}
.hms-topbar .titles{flex:1; min-width:0;}
.hms-topbar h1{font-size:23px; margin:0; line-height:1.2;}
.hms-topbar .subtitle{font-size:12.5px; color:var(--muted); margin-top:2px;}
.hms-search{
  width:280px; background:var(--surface); border:1px solid var(--surface-border); border-radius:9px;
  padding:9px 12px; font-size:12.5px; display:flex; align-items:center; gap:8px; color:var(--muted);
}
.hms-search input{border:0; outline:0; background:transparent; font-size:12.5px; width:100%; color:var(--ink);}
.hms-icon-btn{
  width:38px; height:38px; border-radius:9px; background:var(--surface); border:1px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center; position:relative; color:var(--ink-soft);
}
.hms-icon-btn .dot{position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--red); border:1.5px solid var(--bg);}

.hms-content{padding:26px 28px 60px;}

/* ---------- Cards ---------- */
.hms-card{
  background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px;
}
.hms-card-title{font-size:15px; font-weight:600; font-family:'Fraunces','Lora',serif;}
.hms-card-flat{padding:0; overflow:hidden;}

.hms-kpi-label{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px;}
.hms-kpi-value{font-family:'Fraunces','Lora',serif; font-size:30px; font-weight:600; margin:6px 0 2px;}
.hms-kpi-sub{font-size:11.5px; color:var(--muted);}
.hms-kpi-sub.up{color:var(--green);}
.hms-kpi-sub.down{color:var(--red);}

/* ---------- Badges / pills ---------- */
.hms-pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:600;
}
.hms-pill .dot{width:6px; height:6px; border-radius:50%;}
.hms-pill-success{background:var(--green-soft); color:var(--green);}
.hms-pill-success .dot{background:var(--green);}
.hms-pill-info{background:var(--blue-soft); color:var(--blue);}
.hms-pill-info .dot{background:var(--blue);}
.hms-pill-warning{background:var(--amber-soft); color:var(--amber-strong);}
.hms-pill-warning .dot{background:var(--amber-strong);}
.hms-pill-danger{background:var(--red-soft); color:var(--red);}
.hms-pill-danger .dot{background:var(--red);}
.hms-pill-secondary{background:var(--grey-soft); color:var(--ink-soft);}
.hms-pill-secondary .dot{background:var(--muted);}
.hms-pill-dark{background:#20263650; color:var(--navy);}
.hms-pill-dark .dot{background:var(--navy);}

/* ---------- Buttons ---------- */
.btn-hms-amber{background:var(--amber); border-color:var(--amber); color:#211405; font-weight:600;}
.btn-hms-amber:hover{background:var(--amber-strong); border-color:var(--amber-strong); color:#211405;}
.btn-hms-navy{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600;}
.btn-hms-navy:hover{background:#0f1320; border-color:#0f1320; color:#fff;}
.btn-outline-hms{background:#fff; border:1px solid var(--surface-border); color:var(--ink); font-weight:500;}
.btn-outline-hms:hover{background:var(--grey-soft);}

/* ---------- Tables ---------- */
.hms-table{width:100%; border-collapse:collapse; font-size:13.3px;}
.hms-table thead th{
  text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:10px 22px; border-bottom:1px solid var(--surface-border);
}
.hms-table tbody td{padding:13px 22px; border-bottom:1px solid #f1efe8; vertical-align:middle;}
.hms-table tbody tr:last-child td{border-bottom:0;}
.hms-table tbody tr:hover{background:#faf9f5;}

/* Breadcrumb style path (UNIVERSITY -> CAMPUS -> ...) */
.hms-path{font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--amber-strong); text-transform:uppercase;}

/* Progress bars */
.hms-progress{height:8px; border-radius:20px; background:var(--grey-soft); overflow:hidden;}
.hms-progress > span{display:block; height:100%; background:var(--green);}

/* Bed chips for room matrix */
.bed-chip{width:30px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:600; cursor:pointer; border:0;}
.bed-occupied{background:var(--green);}
.bed-vacant{background:var(--blue);}
.bed-reserved{background:var(--amber-strong);}
.bed-maintenance{background:var(--red);}
.bed-blocked{background:#9a978d;}

.room-card{background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius); padding:14px 16px;}
.room-card .head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.room-card .head .num{font-weight:700; font-size:14px;}
.room-card .head .type{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}

/* Forms */
.form-label{font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.form-control, .form-select{
  border:1px solid var(--surface-border); border-radius:8px; font-size:13.5px; padding:9px 12px;
}
.form-control:focus, .form-select:focus{border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft);}

.hms-section-title{font-size:20px; margin-bottom:4px;}
.hms-section-sub{color:var(--muted); font-size:13px; margin-bottom:20px;}

.hms-tabs{display:flex; gap:4px; border-bottom:1px solid var(--surface-border); margin-bottom:20px; flex-wrap:wrap;}
.hms-tabs a{padding:10px 14px; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent;}
.hms-tabs a.active{color:var(--ink); border-color:var(--amber);}

.stat-tile{background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius); padding:16px 18px;}

@media (max-width: 992px){
  .hms-sidebar{position:fixed; z-index:40; transform:translateX(-100%); transition:transform .2s;}
  .hms-sidebar.open{transform:translateX(0);}
  .hms-search{width:180px;}
}

.print-only{display:none;}
@media print{
  .hms-sidebar, .hms-topbar, .no-print{display:none !important;}
  .hms-content{padding:0;}
  .print-only{display:block;}
  body{background:#fff;}
}