/* ============================================================
   HOSTEL DESK - the floor plan
   White space, black walls, one red. The building is drawn floor by floor;
   a taken bed is red. Wide Archivo for headings, like signage on a plan.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap');

:root {
  --bg: #FFFFFF; --wash: #F6F6F4; --ink: #111111; --ink2: #2A2A2A; --line: #E4E4E0; --line2: #CFCFCA;
  --red: #E02424; --red-dk: #A91616; --red-bg: #FDEDED; --muted: #6B6B66;
  --font: 'Archivo', system-ui, sans-serif;
  --r: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.mono { font-variant-numeric: tabular-nums; }
body.hs { padding-left: 104px; min-height: 100vh; }
.wide { font-stretch: 125%; }

/* ---------- slim white sidebar ---------- */
.sb { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 104px; display: flex; flex-direction: column; align-items: center; padding: 18px 0 16px; background: #fff; border-right: 1px solid var(--line); overflow: hidden auto; scrollbar-width: none; }
.sb::-webkit-scrollbar { display: none; }
.sb__brand img { display: block; width: 44px; height: 44px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; }
.sb__nav { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 22px; padding: 0 10px; }
.sb__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0 8px; border-radius: 12px; text-decoration: none; color: var(--red); transition: background .15s; }
.sb__ic { display: grid; place-items: center; width: 46px; height: 40px; border-radius: 10px; }
.sb__lbl { font-size: 11.5px; font-weight: 600; color: var(--ink2); }
.sb__item:hover { background: var(--wash); }
.sb__item.is-on { background: var(--red); color: #fff; }
.sb__item.is-on .sb__lbl { color: #fff; }
.sb__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 14px; }
.sb__who { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; }
.sb__out { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); }
.sb__out:hover { background: var(--red-bg); color: var(--red); }
.mtop, .dock { display: none; }
.sb__item.is-loading .sb__ic svg, .dock__item.is-loading svg { visibility: hidden; }
.sb__item.is-loading .sb__ic { position: relative; }
.sb__item.is-loading .sb__ic::after, .dock__item.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: hspin .7s linear infinite; }
@keyframes hspin { to { transform: rotate(360deg); } }
.pgload { position: fixed; inset: 0 0 auto 0; z-index: 999; height: 3px; pointer-events: none; }
.pgload[hidden] { display: none; }
.pgload i { display: block; height: 100%; width: 0; background: var(--red); }
.pgload.is-go i { animation: pgload 8s cubic-bezier(.08,.8,.2,1) forwards; }
@keyframes pgload { 0% { width: 0; } 10% { width: 35%; } 40% { width: 65%; } 100% { width: 92%; } }
.pg-busy, .pg-busy * { cursor: progress; }

/* ---------- page frame ---------- */
.wrap { max-width: 1260px; margin: 0 auto; padding: 40px 44px 80px; }
.plate { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.plate small { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--red); }
.plate small::before { content: ""; width: 18px; height: 3px; background: var(--red); }
.plate h1 { margin: 6px 0 0; font-size: clamp(36px, 4.6vw, 58px); font-weight: 850; font-stretch: 125%; line-height: 1; letter-spacing: -.02em; }
.plate h1 i { font-style: normal; color: var(--red); }
.plate .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card__head h2 { margin: 0; font-size: 21px; font-weight: 800; font-stretch: 115%; letter-spacing: -.01em; }
.muted { color: var(--muted); font-size: 13.5px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
.sub { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

/* ---------- fields ---------- */
.fld { display: block; min-width: 0; }
.fld > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.req { color: var(--red); font-style: normal; }
.ctl { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--line2); border-radius: 10px; background: #fff; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
textarea.ctl { height: auto; padding: 12px 14px; }
select.ctl { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.ctl:hover { border-color: #A9A9A4; }
.ctl:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 4px rgba(224,36,36,.14); }
.ctl[readonly] { background: var(--wash); border-color: var(--line); color: #3D3D3A; }
input[type=file].ctl { padding: 10px 12px; height: auto; }
.check { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1.5px dashed var(--line2); border-radius: 10px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 650; font-size: 14.5px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.btn:hover { background: var(--ink); color: #fff; }
.btn--brass, .btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--brass:hover, .btn--red:hover { background: var(--red-dk); border-color: var(--red-dk); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }
.btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }

/* ---------- notices ---------- */
.notice { margin-bottom: 20px; padding: 14px 18px; border-radius: 10px; background: var(--wash); font-weight: 600; border-left: 5px solid var(--ink); }
.notice.ok { border-left-color: var(--ink); }
.notice.bad { background: var(--red-bg); border-left-color: var(--red); color: var(--red-dk); }
.notice.warn { background: #FFF6E6; border-left-color: var(--red); }

/* ---------- figures (no boxes: numbers on the page, split by thin rules) ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpi { padding: 20px 24px 18px; border-left: 1px solid var(--line); min-width: 0; }
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kpi b { display: block; margin: 6px 0 4px; font-size: clamp(30px, 3vw, 42px); font-weight: 800; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 12.5px; }
.kpi.is-red b { color: var(--red); }
.kpi.is-ink b small { font-size: .45em; color: var(--muted); font-weight: 600; }
.kpi__bar { height: 6px; margin: 10px 0 6px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.kpi__fill { height: 100%; background: var(--red); }

/* ---------- tables ---------- */
.dt-wrap { overflow-x: auto; margin: 0 -26px -24px; border-top: 1px solid var(--line); }
.dt { width: 100%; border-collapse: collapse; font-size: 14px; }
.dt th { padding: 12px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.dt td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tr th:first-child, .dt tr td:first-child { padding-left: 26px; }
.dt tr th:last-child, .dt tr td:last-child { padding-right: 26px; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt .r { text-align: right; font-variant-numeric: tabular-nums; }
.dt .m { font-variant-numeric: tabular-nums; }
.dt tbody tr:hover td { background: #FBFBFA; }
.empty-row td { padding: 34px 16px; text-align: center; color: var(--muted); }
.pillst { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--wash); color: var(--ink2); text-decoration: none; }
.pillst::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pillst.ok { background: #EFEFEC; color: var(--ink); }
.pillst.due { background: var(--red-bg); color: var(--red); }

/* ---------- the floor plan ---------- */
.plan { display: flex; flex-direction: column; gap: 26px; }
.floor { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: start; }
.floor__name { padding-top: 8px; }
.floor__name b { display: block; font-size: 30px; font-weight: 850; font-stretch: 125%; line-height: 1; }
.floor__name span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* the corridor: rooms sit along a hatched hallway line */
.corridor { position: relative; display: flex; flex-wrap: wrap; gap: 0; padding-bottom: 16px; }
.corridor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(-45deg, #DADAD5 0 2px, transparent 2px 7px); border-top: 3px solid var(--ink); }
.room { position: relative; min-width: 128px; margin-right: -3px; padding: 12px 52px 36px 14px; border: 3px solid var(--ink); border-bottom: 0; background: #fff; }
/* door: a gap in the bottom wall with a swing arc */
.room::before { content: ""; position: absolute; right: 16px; bottom: -3px; width: 30px; height: 3px; background: #fff; z-index: 1; }
.room::after { content: ""; position: absolute; right: 16px; bottom: 0; width: 28px; height: 28px; border-top: 1.5px dashed #9A9A95; border-left: 1.5px dashed #9A9A95; border-radius: 28px 0 0 0; }
.room__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.room__top b { font-size: 22px; font-weight: 850; font-stretch: 120%; line-height: 1; }
.room__top span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.beds { display: flex; flex-wrap: wrap; gap: 7px; max-width: 220px; }
/* a bed seen from above: frame with a pillow */
.bed { position: relative; display: grid; place-items: end center; width: 26px; height: 40px; padding-bottom: 3px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 700; text-decoration: none; }
.bed::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 8px; border-radius: 2px; border: 1.5px solid currentColor; }
a.bed:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.bed.is-full { background: var(--red); border-color: var(--red); color: #fff; cursor: default; }
.bed.is-full::before { border-color: rgba(255,255,255,.85); }
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 18px; margin-right: 7px; border: 2px solid var(--ink); border-radius: 3px; vertical-align: -4px; background: #fff; }
.legend i.f { background: var(--red); border-color: var(--red); }

/* ---------- lists and side panel ---------- */
.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list b { display: block; font-weight: 650; } .list small { color: var(--muted); }
.list .amt { margin-left: auto; text-align: right; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.list .amt.due { color: var(--red); }
.ini { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wash); color: var(--ink); font-weight: 800; font-size: 16px; }
.cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--wash); }
.seg button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.seg button.is-on { background: var(--ink); color: #fff; }
.sum { position: sticky; top: 24px; padding: 24px; color: #fff; background: var(--ink); border-radius: var(--r); }
.sum__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FF7070; }
.sum__name { margin: 6px 0 2px; font-size: 26px; font-weight: 800; font-stretch: 115%; line-height: 1.1; word-break: break-word; }
.sum__meta { font-size: 13px; color: #A9A9A4; }
.sum__rows { margin: 16px 0 6px; border-top: 1px solid #333; }
.sum__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #333; font-size: 14px; color: #D4D4CF; }
.sum__rows > div > span { font-size: 14px; }
.sum__rows b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.sum__total { display: flex; align-items: flex-end; justify-content: space-between; margin: 14px 0 16px; }
.sum__total > span { font-size: 13px; font-weight: 600; color: #D4D4CF; }
.sum__total b { font-size: 40px; font-weight: 850; font-stretch: 115%; line-height: 1; font-variant-numeric: tabular-nums; }
.sum .ctl { background: #1D1D1D; border-color: #3A3A3A; color: #fff; }
.sum .ctl[readonly] { background: #191919; border-color: #2E2E2E; color: #D4D4CF; }
.sum .ctl:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(224,36,36,.25); }
.sum .fld > span { color: #A9A9A4; }
.sum .check { border-color: #444; color: #EDEDE8; }
.sum__save { width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font-size: 16px; font-weight: 750; cursor: pointer; transition: background .15s; }
.sum__save:hover { background: #F23B3B; }
.sum__back { display: block; margin-top: 12px; text-align: center; color: #A9A9A4; font-size: 13px; }
.toast { position: fixed; left: 50%; top: 22px; z-index: 900; transform: translateX(-50%); display: none; padding: 12px 20px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; }
.toast.show { display: block; }

/* mobile-number picker (Payment) */
.mobile-search-box { position: relative; }
#mobileDropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; max-height: 240px; overflow-y: auto; margin-top: 6px; background: #fff; border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.mobile-option { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.mobile-option:last-child { border-bottom: 0; }
.mobile-option:hover { background: var(--red-bg); }
.mobile-option small { color: var(--muted); font-size: 13px; }

/* ---------- sign-in ---------- */
.gate { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; }
.gate__art { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: clamp(28px, 5vw, 64px); color: #fff; overflow: hidden; background: var(--ink) url('hostel.jpeg') center / cover no-repeat; }
.gate__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,17,17,.55), rgba(17,17,17,.94) 80%); }
.gate__brand { display: flex; align-items: center; gap: 12px; width: fit-content; text-decoration: none; }
.gate__brand img { width: 44px; height: 44px; padding: 5px; background: #fff; border-radius: 10px; }
.gate__brand b { font-size: 20px; font-weight: 800; font-stretch: 120%; }
.gate__copy h2 { margin: 0; font-size: clamp(52px, 7.5vw, 104px); font-weight: 900; font-stretch: 125%; line-height: .92; letter-spacing: -.03em; }
.gate__copy h2 i { font-style: normal; color: var(--red); }
.gate__copy p { margin: 18px 0 0; max-width: 40ch; color: #E2E2DD; font-size: 16px; }
/* a little floor plan instead of key tags */
.gate__keys { display: flex; margin-top: 26px; }
.gate__keys i { position: relative; width: 64px; height: 50px; margin-right: -2px; border: 2.5px solid #fff; border-bottom-width: 0; }
.gate__keys i::before { content: ""; position: absolute; left: 10px; bottom: 6px; width: 12px; height: 20px; border: 2px solid #fff; border-radius: 3px; }
.gate__keys i::after { content: attr(data-n); position: absolute; right: 7px; top: 5px; font-size: 11px; font-weight: 700; }
.gate__keys i:nth-child(2)::before, .gate__keys i:nth-child(4)::before { background: var(--red); border-color: var(--red); }
.gate__foot { font-size: 13px; color: #A9A9A4; }
.gate__form { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 84px); max-width: 560px; width: 100%; margin: 0 auto; }
.gate__form h1 { margin: 0; font-size: clamp(40px, 4.4vw, 56px); font-weight: 850; font-stretch: 125%; line-height: 1; letter-spacing: -.02em; }
.gate__form .sub2 { margin: 10px 0 26px; color: var(--muted); }
.gate__form form { display: grid; gap: 16px; }
.pw { position: relative; }
.pw button { position: absolute; right: 7px; top: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--wash); font-size: 12px; font-weight: 700; cursor: pointer; }
.gate__err { padding: 13px 16px; border-radius: 10px; border-left: 5px solid var(--red); background: var(--red-bg); color: var(--red-dk); font-weight: 600; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; } .sum { position: static; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; padding-left: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols { grid-template-columns: 1fr; }
  .wrap { padding: 30px 26px 70px; }
}
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } .gate__art { min-height: 46vh; } }
@media (max-width: 760px) {
  body.hs { padding-left: 0; padding-bottom: 78px; }
  .sb { display: none; }
  .mtop { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
  .mtop__brand { display: flex; align-items: center; gap: 9px; flex: 1; text-decoration: none; }
  .mtop__brand img { width: 32px; height: 32px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; }
  .mtop__brand b { font-size: 18px; font-weight: 850; font-stretch: 125%; }
  .mtop__user { font-size: 12px; color: var(--muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtop__out { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); }
  .dock { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; gap: 2px; height: 68px; padding: 6px 6px 8px; background: #fff; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .dock::-webkit-scrollbar { display: none; }
  .dock__item { position: relative; flex: 1 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: var(--red); text-decoration: none; font-size: 10.5px; font-weight: 600; }
  .dock__item span { color: var(--ink2); }
  .dock__item.is-on { background: var(--red); color: #fff; } .dock__item.is-on span { color: #fff; }
  .dock__item.is-loading::after { top: 10px; bottom: auto; left: calc(50% - 9px); margin: 0; }
  .wrap { padding: 22px 16px 40px; }
  .plate { margin-bottom: 24px; }
  .card { padding: 18px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; } .span2, .span3 { grid-column: auto; }
  .kpis, .kpis[style] { grid-template-columns: 1fr 1fr !important; }
  .kpi { padding: 14px 12px; } .kpi b { font-size: 28px; }
  .floor { grid-template-columns: 1fr; gap: 8px; }
  .floor__name { display: flex; align-items: baseline; gap: 10px; padding-top: 0; }
  .floor__name b { font-size: 22px; }
  .room { min-width: 0; flex: 1 1 140px; }
  .dt-wrap { overflow: visible; margin: 0 -18px -18px; }
  .dt thead { display: none; }
  .dt, .dt tbody, .dt tr, .dt td { display: block; width: 100%; }
  .dt tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .dt td, .dt tr td:first-child, .dt tr td:last-child { display: flex; justify-content: space-between; gap: 12px; padding: 3px 18px; border: 0; text-align: right; }
  .dt td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; }
  .dt td[data-label="Action"], .dt td[data-label="Status"] { align-items: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .pgload.is-go i { width: 70%; } }
@media (max-width: 760px) {
  .room { padding: 10px 12px 30px; }
  .room::after { width: 20px; height: 20px; right: 10px; } .room::before { right: 10px; width: 22px; }
  .room__top b { font-size: 19px; }
}

/* ============================================================
   Rebuild additions (same white / black / one red look)
   ============================================================ */
/* member picker: the dropdown used for students, expense accounts and cities */
.pick { position: relative; }
.pick .ctl { padding-right: 40px; }
.pick__caret { position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); pointer-events: none; }
.pick__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1.5px solid var(--line2); border-radius: 10px; box-shadow: 0 16px 34px rgba(0,0,0,.14); }
.pick__list[hidden] { display: none; }
.pick__list li[data-id] { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.pick__list li[data-id]:hover, .pick__list li.is-act { background: var(--red-bg); }
.pick__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; }
.pick__txt { flex: 1; min-width: 0; }
.pick__txt b { display: block; font-size: 15px; font-weight: 650; text-transform: capitalize; }
.pick__txt small { display: block; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pick__due { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--wash); font-size: 12px; font-weight: 700; }
.pick__due.is-due { background: var(--red-bg); color: var(--red); }
.pick__none { padding: 12px; color: var(--muted); }
.card:has(.pick), .main:has(.pick) { overflow: visible; }

/* bed tiles inside a form: pick one for the chosen dates */
.bedpick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 46px; }
button.bed { border: 2px solid var(--ink); background: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
button.bed:hover:not(:disabled) { background: var(--red-bg); border-color: var(--red); color: var(--red); }
button.bed.is-pick { background: var(--ink); border-color: var(--ink); color: #fff; }
button.bed.is-pick::before { border-color: rgba(255,255,255,.85); }
button.bed:disabled { cursor: not-allowed; }
.lens { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lens button { height: 32px; padding: 0 14px; border: 1.5px solid var(--line2); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 650; cursor: pointer; }
.lens button:hover { border-color: var(--ink); }

/* Cash / UPI / Bank */
.seg3 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--wash); }
.seg3 label { position: relative; display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 999px; font-size: 14px; font-weight: 650; cursor: pointer; }
.seg3 input { position: absolute; opacity: 0; pointer-events: none; }
.seg3 label:has(input:checked) { background: var(--ink); color: #fff; }
.sum .seg3 { background: #1D1D1D; }
.sum .seg3 label { color: #D4D4CF; }
.sum .seg3 label:has(input:checked) { background: #fff; color: var(--ink); }
.sum__line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #2A2A2A; font-size: 14px; color: #D4D4CF; }
.sum__line b { color: #fff; font-variant-numeric: tabular-nums; }
.sum__bal { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: #1D1D1D; color: #D4D4CF; font-size: 14px; }
.sum__bal b { color: #fff; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sum__bal.is-clear b { color: #7BE08F; }
.sum__lbl { display: block; margin: 12px 0 6px; font-size: 12.5px; font-weight: 600; color: #A9A9A4; }
.sum__save.is-busy { opacity: .8; cursor: progress; }

/* warning before adding a second stay by mistake */
.openwarn { border: 2px solid var(--red); background: var(--red-bg); }
.openwarn[hidden] { display: none; }
.openwarn h2 { color: var(--red); }
.openwarn p { margin: 6px 0 0; }
.openwarn__pay { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px !important; }
.openwarn__pay span { color: var(--muted); font-size: 13px; }
.openwarn .check { margin-top: 14px; background: #fff; border-style: solid; }

/* status tags */
.tag-st { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--wash); }
.tag-st.staying { background: #111; color: #fff; }
.tag-st.ending, .tag-st.due { background: var(--red-bg); color: var(--red); }
.tag-st.left { background: #EFEFEC; color: var(--muted); }
.tag-st.upcoming { background: #fff; border: 1.5px solid var(--ink); }
.who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--line2); border-radius: 10px; }
.who.is-empty { color: var(--muted); }
.who b { display: block; } .who small { color: var(--muted); }
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; gap: 12px; align-items: end; }
@media (max-width: 760px) { .filters, .filters[style] { grid-template-columns: 1fr 1fr !important; } .filters .fld { grid-column: span 2; } }
.facts { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); font-weight: 600; } .facts dd { margin: 0; word-break: break-word; }
.link-btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; text-decoration: underline; cursor: pointer; }
.inline-form { display: inline; margin: 0; }
/* student page: owner removes a stay entered by mistake */
.rmsub-cell { position: relative; white-space: nowrap; }
.rmsub summary { list-style: none; cursor: pointer; }
.rmsub summary::-webkit-details-marker { display: none; }
.rmsub__form { position: absolute; right: 8px; top: calc(100% - 6px); z-index: 30; width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 0 16px 34px rgba(0,0,0,.16); white-space: normal; text-align: left; }
.rmsub__form p { margin: 0; font-size: 13px; color: var(--muted); }
.card:has(.rmsub[open]), .dt-wrap:has(.rmsub[open]) { overflow: visible; }
@media (max-width: 760px) { .rmsub__form { position: static; width: auto; margin-top: 8px; } }

/* ---------- accounts: expenses, books, voucher slip ---------- */
/* phone bottom bar scrolls sideways once the accounts icons are added */

.booktabs { display: flex; gap: 0; margin: 0 0 16px; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; width: max-content; max-width: 100%; box-shadow: none; }
.booktabs a { padding: 11px 22px; background: #fff; color: var(--ink); font: 800 14px inherit; text-decoration: none; white-space: nowrap; }
.booktabs a + a { border-left: 2px solid var(--ink); }
.booktabs a.is-on { background: var(--ink); color: #fff; }
.dt.book tr.is-out td:nth-last-child(2), .dt.book tr.is-out td.r:last-child:not(:first-child) { color: inherit; }
.dt.book tr.is-in td[data-label="Receipt (in)"] { color: #17643a; font-weight: 700; }
.dt.book tr.is-out td[data-label="Payment (out)"] { color: var(--red); font-weight: 700; }
.dt.book .book__open td, .dt.book .book__close td { background: #EEF0EC; font: 700 14px inherit; }
.dt.book .book__close td { border-top: 2px solid var(--ink); }
.dt.book .book__daytot td { background: #F6F2F1; font: 600 13px inherit; color: var(--muted); }
.dt tr.is-void td { opacity: .55; }
.print-only { display: none; }

.xsum { padding: 12px 0; border-top: 1px solid #e3e5e0; }
.xsum:first-of-type { border-top: 0; padding-top: 0; }
.xsum__head, .xsum__grp, .xsum__acct { display: flex; justify-content: space-between; gap: 10px; }
.xsum__head { font: 800 16px inherit; margin-bottom: 6px; }
.xsum__grp { font: 700 14px inherit; margin-top: 6px; }
.xsum__acct { font: 400 13px inherit; color: var(--muted); padding-left: 12px; }

/* voucher slip */
.vslip-pg { background: #F6F6F4; padding: 24px 16px 48px; }
.vslip-bar { max-width: 760px; margin: 0 auto 14px; display: flex; justify-content: space-between; gap: 10px; }
.vslip { position: relative; max-width: 760px; margin: 0 auto; background: #fff; border: 2px solid var(--ink); border-radius: 4px; box-shadow: none; padding: 28px 30px 22px; overflow: hidden; }
.vslip__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 3px solid var(--red); }
.vslip__brand { display: flex; align-items: center; gap: 10px; }
.vslip__brand img { width: 42px; height: 42px; }
.vslip__brand b { display: block; font: 900 22px inherit; text-transform: uppercase; }
.vslip__brand small { color: var(--muted); font-size: 12px; }
.vslip__title { text-align: right; }
.vslip__title h1 { margin: 0; font: 900 30px/1 inherit; text-transform: uppercase; }
.vslip__title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.vslip__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.vslip__meta span, .vslip__words span, .vslip__to span { display: block; font: 700 11px inherit; color: var(--muted); }
.vslip__meta b { font-size: 17px; }
.vslip__lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.vslip__lines th { background: var(--ink); color: #fff; text-align: left; padding: 8px 10px; font: 700 12px inherit; }
.vslip__lines td { padding: 10px; border-bottom: 1px solid #dcdfd9; vertical-align: top; }
.vslip__lines tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 800; }
.vslip__lines .r { text-align: right; }
.vslip__words, .vslip__to { margin: 14px 0 0; font-size: 14px; }
.vslip__sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; }
.vslip__sign i { display: block; border-top: 1.5px solid var(--ink); margin-bottom: 6px; }
.vslip__sign span { font: 700 12px inherit; color: var(--muted); }
.vslip__foot { margin: 22px 0 0; font-size: 11px; color: var(--muted); }
.vslip__void { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); border: 4px solid var(--red); color: var(--red); padding: 6px 22px; font: 900 46px/1 inherit; text-align: center; opacity: .8; background: rgba(255,255,255,.85); }
.vslip__void small { display: block; font: 700 12px inherit; margin-top: 4px; }
@media (max-width: 560px) { .vslip { padding: 20px 16px; } .vslip__top { flex-direction: column; } .vslip__title { text-align: left; } .vslip__meta, .vslip__sign { grid-template-columns: 1fr 1fr; } }

@media print {
  @page { margin: 12mm; }
  body, body.billing { background: #fff !important; padding: 0 !important; }
  .side, .topline, .dock, .pgload, .no-print, .vslip-bar { display: none !important; }
  .wrap { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .print-only { display: block; margin: 0 0 10px; }
  .phead { display: none; }
  .card, .kpi, .vslip { box-shadow: none !important; }
  .kpis { grid-template-columns: repeat(4, 1fr) !important; }
  .dt a { color: inherit; text-decoration: none; }
  .vslip { border: 1.5px solid #000; }
}

/* gym-style pieces used by the accounts pages */
.stack { display: flex; flex-direction: column; gap: 24px; }
.xsum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; }
.xsum-grid .xsum { border-top: 0; padding-top: 0; }
.card--pay .amt { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 16px; border: 1.5px solid var(--line2); border-radius: 10px; }
.card--pay .amt i { font-style: normal; font-size: 24px; font-weight: 800; color: var(--muted); }
.card--pay .amt input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; background: transparent; }
.card--pay .amt:focus-within { border-color: var(--red); box-shadow: 0 0 0 4px rgba(224,36,36,.14); }
.card--pay .fld + .fld, .card--pay .amt + * { margin-top: 12px; }
.sum__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sum__acts a { color: #A9A9A4; text-align: center; font-size: 13px; }
.books-pg .booktabs { border-width: 1.5px; border-radius: 999px; }
.books-pg .booktabs a { padding: 10px 22px; font-weight: 650; }
.vslip__title h1, .vslip__brand b { font-stretch: 125%; }
.kpi .tag-st { display: inline-flex; width: auto; }

/* ---------- printing (cash / bank / day book, vouchers list, any table page) ----------
   Paper is narrow, so without this the phone layout was used: stacked cards, cut-off totals. */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sb, .mtop, .dock, .pgload, .no-print { display: none !important; }
  body, body.hs { padding: 0 !important; background: #fff !important; font-size: 11px; }
  .wrap { padding: 0 !important; max-width: none !important; }
  .plate { display: none !important; }
  .card { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  .dt-wrap { margin: 0 !important; overflow: visible !important; border: 0 !important; }
  .dt { display: table !important; width: 100% !important; border-collapse: collapse; font-size: 10.5px; }
  .dt thead { display: table-header-group !important; }
  .dt tbody { display: table-row-group !important; }
  .dt tfoot { display: table-footer-group !important; }
  .dt tr, .dt tr.grp, .dt tr.empty-row { display: table-row !important; padding: 0 !important; border: 0 !important; break-inside: avoid; }
  .dt th, .dt td, .dt tr.grp td { display: table-cell !important; width: auto !important; padding: 4px 6px !important; border-bottom: 1px solid #bbb !important; white-space: normal !important; vertical-align: top; }
  .dt tr th:first-child, .dt tr td:first-child { padding-left: 6px !important; }
  .dt td::before { content: none !important; display: none !important; }
  .dt th, .dt td { text-align: left !important; } .dt th.r, .dt td.r { text-align: right !important; }
  .dt thead th { background: #e9e9e9 !important; color: #000 !important; font-size: 10px; }
  .dt tr.grp.mon td, .dt tr.grp td { background: #f2f2f2 !important; color: #000 !important; font-family: inherit !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
  .dt small, .dt .muted { color: #444 !important; font-size: 9.5px; }
  .kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; margin: 0 0 10px !important; border: 0 !important; }
  .kpi, .kpi.is-ink, .kpi.is-red, .kpi.is-dark { padding: 6px 8px !important; border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }
  .kpi span { font-size: 9.5px !important; color: #333 !important; }
  .kpi b { font-size: 15px !important; margin: 2px 0 0 !important; white-space: nowrap; color: #000 !important; }
  .kpi.is-red b { color: #b00 !important; }
  .print-only { display: block !important; font-size: 13px; margin: 0 0 8px !important; }
  .notice, .booktabs, .filters { display: none !important; }
}
/* expense accounts: the picked expense, its group/head and its row stand out */
.ctl.is-hl { border-color: var(--red); box-shadow: 0 0 0 4px rgba(224,36,36,.16); background: #FFF6DA; }
.dt tr.is-hl td { background: #FFF1C9 !important; }
.fld[hidden] { display: none !important; }

/* sidebar: a thin scrollbar so staff can see there is more below */
.sb { scrollbar-width: thin; scrollbar-color: #c9ccd1 transparent; }
.sb::-webkit-scrollbar { display: block; width: 6px; }
.sb::-webkit-scrollbar-thumb { background: #c9ccd1; border-radius: 3px; }

/* less white: a warm grey page so the white cards stand out, and cards get a firm top edge */
body.hs { background: #E4E2DA; }
/* the doodle wallpaper falls slowly, like snow: a fixed layer behind the page, moved with transform (smooth, light on the PC) */
body.hs::before { content: ""; position: fixed; left: 0; right: 0; top: -300px; bottom: 0; z-index: -1; pointer-events: none;
  background: url('hostel-doodles.svg') repeat; background-size: 300px 300px; animation: hs-fall 45s linear infinite; animation-delay: var(--hs-fall-delay, 0s); will-change: transform; }
@keyframes hs-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 300px, 0); } }
@media (prefers-reduced-motion: reduce) { body.hs::before { animation: none; } }
.hs .card { border-color: #DEDDD6; border-top: 3px solid var(--ink); box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }
.hs .kpis { background: #fff; border: 1px solid #DEDDD6; border-radius: var(--r); padding: 0 22px; }
@media print { body.hs { background: #fff; } body.hs::before { display: none; } .hs .card { border-top-width: 1px; } }

/* ---------- attendance ---------- */
.pillst.late { background: #FFF1D6; color: #8A5300; }
.pillst.half { background: #FFF1D6; color: #8A5300; }
.pillst.bad  { background: var(--red-bg); color: var(--red); }
.pillst.wait { background: var(--wash); color: var(--muted); }
.pillst.off  { background: transparent; color: var(--muted); }
.pillst.off::before { background: transparent; border: 1.5px solid currentColor; }
.att-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.att-tabs a { padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 650; font-size: 14.5px; color: var(--ink2); text-decoration: none; background: #fff; }
.att-tabs a:hover { border-color: var(--ink); color: var(--ink); }
.att-tabs a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.att-big { font-size: 15px; }
.att-big td, .att-big th { padding-top: 12px; padding-bottom: 12px; }
.att-mach { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 12px 16px; border-radius: 10px; background: var(--wash); font-size: 14px; margin-bottom: 20px; }
.att-mach b { font-weight: 700; }
.att-mach .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; margin-right: 6px; }
.att-mach.is-live .dot { background: #1B8A4A; }
.att-url { font-family: ui-monospace, Consolas, monospace; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; word-break: break-all; user-select: all; }
.att-cal td.is-today { box-shadow: inset 4px 0 0 var(--red); }
.att-cal tr.is-dim td { opacity: .45; }
.att-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.att-sum div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.att-sum span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.att-sum b { font-size: 22px; font-weight: 800; }
@media print { .att-tabs, .att-noprint { display: none !important; } }