/* EziHotel — Hotel Management System */
:root{
  --bg:#f3f5f9; --card:#fff; --ink:#0f1c2b; --ink2:#425166; --muted:#7a879a; --line:#e3e8ef; --line2:#eef1f6;
  --side:#0b2233; --side2:#12324a; --side-ink:#c5d3e0;
  --primary:#1f5fd6; --primary-d:#174bb0; --primary-l:#e8f0fe;
  --gold:#d4a24c; --green:#16a34a; --green-l:#e7f7ec; --red:#dc2626; --red-l:#fdecec; --amber:#d97706; --amber-l:#fdf3e2;
  --violet:#7c3aed; --violet-l:#f1ebfe; --teal:#0d9488; --teal-l:#e2f6f3; --gray:#64748b; --gray-l:#eef1f5;
  --st-vacant:#16a34a; --st-vacant_dirty:#ea580c; --st-occupied:#2563eb; --st-due_out:#d97706; --st-arrival:#7c3aed; --st-ooo:#64748b;
  --r:14px; --r-sm:10px; --sh:0 1px 2px rgba(15,28,43,.05),0 4px 16px rgba(15,28,43,.05);
  --font:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-variant-numeric:tabular-nums lining-nums;font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{margin:0;line-height:1.25}
small{font-size:12px}
code{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--gray-l);padding:1px 6px;border-radius:6px}
.ic{flex:none;vertical-align:middle}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;outline:none;transition:border .15s,box-shadow .15s;min-height:42px}
textarea{min-height:auto;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,95,214,.15)}
input[readonly]{background:var(--gray-l)}
input[type=checkbox],input[type=radio]{width:auto;min-height:auto}
input[type=color]{padding:4px;height:42px}
.muted{color:var(--muted)} .d-block{display:block} .nowrap{white-space:nowrap} .center{text-align:center} .grow{flex:1}
.t-red{color:var(--red)!important} .t-green{color:var(--green)!important}
.r{text-align:right}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .15s,transform .05s,box-shadow .15s;min-height:40px;text-decoration:none!important}
.btn:hover{background:var(--gray-l)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#fff}.btn-amber:hover{background:#b86405}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}.btn-green:hover{background:#12873d}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-ghost{background:transparent;border-color:transparent}
.btn-sm{padding:6px 11px;font-size:12.5px;min-height:32px;gap:5px}
.btn-lg{padding:13px 20px;font-size:15px;min-height:50px}
.btn-block{width:100%}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:0;background:transparent;color:var(--ink2);cursor:pointer}
.icon-btn:hover{background:var(--gray-l)}
.icon-btn.sm{width:30px;height:30px}
.link{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:3px}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.b-gray{background:var(--gray-l);color:var(--gray)} .b-green{background:var(--green-l);color:#11803a} .b-red{background:var(--red-l);color:var(--red)}
.b-blue{background:var(--primary-l);color:var(--primary)} .b-amber{background:var(--amber-l);color:#b45309} .b-violet{background:var(--violet-l);color:var(--violet)}
.b-gold{background:#fbf1dc;color:#9a6b10}
.st-badge{color:#fff}
.st-vacant{background:var(--st-vacant)} .st-vacant_dirty{background:var(--st-vacant_dirty)} .st-occupied{background:var(--st-occupied)}
.st-due_out{background:var(--st-due_out)} .st-arrival{background:var(--st-arrival)} .st-ooo{background:var(--st-ooo)}

/* ---------- app shell ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:linear-gradient(180deg,var(--side),#08192a);color:var(--side-ink);display:flex;flex-direction:column;z-index:50;transition:transform .25s}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px}
.brand-logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--gold),#b8842c);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 16px rgba(212,162,76,.35)}
.brand-logo.lg{width:50px;height:50px;border-radius:14px}
.brand-name{color:#fff;font-weight:700;font-size:15px;line-height:1.2}
.brand-sub{font-size:11.5px;color:#8ea4b8}
.brand .icon-btn{margin-left:auto;color:#fff}
.nav{flex:1;overflow-y:auto;padding:6px 10px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--side-ink);font-weight:500;margin-bottom:2px;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(31,95,214,.35)}
.side-foot{display:flex;align-items:center;gap:8px;padding:14px;border-top:1px solid rgba(255,255,255,.07)}
.me{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.me-txt{min-width:0}.me-txt b{display:block;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me-txt small{color:#8ea4b8}
.logout{color:#8ea4b8;padding:8px;border-radius:8px}.logout:hover{background:rgba(255,255,255,.08);color:#fff}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4f7df0,#7c3aed);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.avatar.lg{width:52px;height:52px;font-size:17px}
.avatar.sm{width:28px;height:28px;font-size:11px}
.main{margin-left:252px;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:14px 26px;background:rgba(243,245,249,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tb-title{flex:1;min-width:0}
.tb-title h1{font-size:21px;font-weight:700;}
.tb-title p{margin:2px 0 0;color:var(--muted);font-size:13px}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 12px;width:300px;color:var(--muted)}
.tb-search input{border:0;box-shadow:none;padding:8px 0;min-height:38px}
.tb-date{display:flex;align-items:center;gap:6px;color:var(--ink2);font-weight:600;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;white-space:nowrap}
.page-head{padding:16px 26px 0}
.page-head .actions{display:flex;flex-wrap:wrap;gap:8px}
.page-head .actions:empty{display:none}
.page-head:has(.actions:empty){display:none}
.content{padding:16px 26px 30px;flex:1}
.foot{padding:16px 26px 24px;color:var(--muted);font-size:12px;text-align:center}
.only-mobile{display:none!important}
.backdrop{display:none}
.tabbar{display:none}

/* ---------- alerts ---------- */
.alert{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-sm);margin:0 0 14px;font-weight:500}
.alert-success{background:var(--green-l);color:#0f6b31;border:1px solid #c6ebd2}
.alert-error{background:var(--red-l);color:#a51b1b;border:1px solid #f6caca}
.alert-warn{background:var(--amber-l);color:#92520a;border:1px solid #f4dcb2}
.alert span{flex:1}
.alert-x{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.6}
.notice{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 13px;border-radius:var(--r-sm);background:#0f1c2b;color:#fff;font-size:13px}
.notice:hover{text-decoration:none;background:#000}
.hint{color:var(--muted);font-size:12.5px;margin:8px 0 0;display:flex;align-items:center;gap:6px}
.hint.center{justify-content:center}

/* ---------- cards & grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:16px}
.card.flush{padding:0;overflow:hidden}
.card.narrow{max-width:760px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-h.pad{padding:16px 18px 0}
.card-h.mt{margin-top:20px}
.card-h h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-h h3 .ic{color:var(--primary)}
.count{background:var(--gray-l);color:var(--ink2);font-size:12px;padding:1px 8px;border-radius:999px}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.g-2-3{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.grid>.card,.grid>div>.card:last-child{margin-bottom:0}
.grid{margin-bottom:16px}
.sticky{position:sticky;top:84px}
.empty{text-align:center;padding:26px 10px;color:var(--muted)}
.empty .ic{opacity:.45}
.empty p{margin:8px 0 0}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:16px}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k6{grid-template-columns:repeat(6,1fr)}
.kpi{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh);color:var(--ink);overflow:hidden;text-decoration:none!important;display:block}
a.kpi:hover{border-color:#c9d3e1;transform:translateY(-1px)}
.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--kc,var(--line))}
.kpi-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--kl,var(--gray-l));color:var(--kc,var(--gray));margin-bottom:10px}
.kpi-v{font-size:27px;font-weight:600;line-height:1.1}
.kpi-v.sm{font-size:19px}
.kpi-l{font-weight:600;color:var(--ink2);font-size:13px;margin-top:2px;display:flex;align-items:center;gap:6px}
.kpi-s{color:var(--muted);font-size:12px;margin-top:3px}
.k-blue{--kc:var(--primary);--kl:var(--primary-l)} .k-green{--kc:var(--green);--kl:var(--green-l)} .k-violet{--kc:var(--violet);--kl:var(--violet-l)}
.k-amber{--kc:var(--amber);--kl:var(--amber-l)} .k-red{--kc:var(--red);--kl:var(--red-l)} .k-teal{--kc:var(--teal);--kl:var(--teal-l)} .k-gray{--kc:var(--gray);--kl:var(--gray-l)}
.meter{height:6px;background:var(--line2);border-radius:999px;overflow:hidden;margin-top:10px}
.meter.meter-lg{height:9px;margin-top:6px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#5b8cf0);border-radius:999px}

/* ---------- state bars & dashboard ---------- */
.state-bars{display:flex;flex-direction:column;gap:9px}
.state-bars.cols{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px}
.sb{display:grid;grid-template-columns:12px 150px 1fr 54px;align-items:center;gap:10px;color:var(--ink);font-size:13px;text-decoration:none!important}
.sb:not(:has(.sb-dot)){grid-template-columns:160px 1fr auto}
.sb-dot{width:12px;height:12px;border-radius:4px}
.sb-l{font-weight:500}
.sb-bar{height:9px;background:var(--line2);border-radius:999px;overflow:hidden}
.sb-bar i{display:block;height:100%;border-radius:999px;min-width:2px}
.sb b{text-align:right}
.mini-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;margin-top:18px}
.mr{color:#fff;font-weight:700;font-size:12px;text-align:center;padding:7px 0;border-radius:8px;text-decoration:none!important}
.mr:hover{filter:brightness(1.1)}
.weekend{display:flex;flex-direction:column;gap:12px}
.wkc{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:linear-gradient(180deg,#fff,#fafbfd)}
.wk-d{width:52px;text-align:center;flex:none;background:var(--ink);color:#fff;border-radius:10px;padding:6px 0}
.wk-d b{display:block;font-size:15px}.wk-d small{color:#b7c3d1}
.wk-m{flex:1;min-width:0}
.wk-row{display:flex;justify-content:space-between;font-size:13px}
.wk-types{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px;color:var(--ink2)}
.wk-types i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}
.forecast{display:flex;gap:8px;align-items:flex-end;height:130px}
.fc{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.fc-v{font-size:11px;font-weight:700;color:var(--ink2)}
.fc-bar{flex:1;width:100%;max-width:38px;background:var(--line2);border-radius:8px;display:flex;align-items:flex-end;overflow:hidden}
.fc-bar i{display:block;width:100%;background:var(--primary);border-radius:8px}
.fc-bar i.wkend{background:var(--gold)}
.fc small{color:var(--muted)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none!important}
.li:last-child{border-bottom:0}
.list.sm .li{padding:8px 0}
a.li:hover{background:#fafbfd}
.li-m{flex:1;min-width:0}
.li-m b{font-weight:600}
.li-m>a{color:var(--ink)}
.li-m small{display:block;color:var(--muted)}
.room-chip{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:40px;padding:0 6px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;flex:none;text-decoration:none!important}
.room-chip.sm{min-width:38px;height:28px;font-size:12px;border-radius:7px}
.room-chip.dirty{background:var(--st-vacant_dirty)}
a.room-chip:hover{background:var(--primary)}
.methods{display:flex;flex-direction:column;gap:10px}
.mt-row{display:grid;grid-template-columns:32px minmax(90px,140px) minmax(40px,1fr) auto;align-items:center;gap:10px}
.mt-row b{text-align:right}
.mt-l small{display:block;color:var(--muted)}
.mt-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff}
.m-cash{background:#16a34a}.m-card{background:#2563eb}.m-bank{background:#7c3aed}.m-easypaisa{background:#10b981}.m-jazzcash{background:#e11d48}
.dotm{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.mt-total{display:flex;justify-content:space-between;padding-top:10px;border-top:1px dashed var(--line);font-size:15px}
.month-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.month-sum>div{background:var(--gray-l);border-radius:var(--r-sm);padding:12px}
.month-sum small{display:block;color:var(--muted)}
.month-sum b{font-size:17px;white-space:nowrap;display:block}
.month-sum.sub{margin-top:10px}
.month-sum.sub>div{background:#fff;border:1px solid var(--line)}

/* ---------- room board ---------- */
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lgd{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none!important}
.lgd i{width:11px;height:11px;border-radius:4px}
.lgd.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:14px}
.filters select{width:auto;min-width:150px}
.search-inp{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;min-width:260px;color:var(--muted)}
.search-inp.grow{flex:1}
.search-inp input{border:0;box-shadow:none;padding:9px 0}
.mini-date{display:flex;flex-direction:column;font-size:11px;color:var(--muted);font-weight:600}
.mini-date input{width:auto;min-height:40px;padding:8px 10px}
.floor-h{font-size:14px;margin:18px 0 10px;color:var(--ink2);display:flex;gap:8px;align-items:baseline}
.floor-h small{color:var(--muted);font-weight:500}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.room{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 12px 10px;border-radius:var(--r);background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh);text-decoration:none!important;overflow:hidden;transition:transform .12s,box-shadow .12s}
.room::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--sc)}
.room:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,28,43,.1)}
.room.sel{outline:3px solid var(--sc)}
.room.st-vacant{--sc:var(--st-vacant)} .room.st-vacant_dirty{--sc:var(--st-vacant_dirty)} .room.st-occupied{--sc:var(--st-occupied)}
.room.st-due_out{--sc:var(--st-due_out)} .room.st-arrival{--sc:var(--st-arrival)} .room.st-ooo{--sc:var(--st-ooo)}
.room{background:#fff}
.room.st-occupied,.room.st-due_out{background:linear-gradient(180deg,#f3f7ff,#fff 60%)}
.room.st-ooo{background:repeating-linear-gradient(135deg,#f6f7f9,#f6f7f9 8px,#fff 8px,#fff 16px)}
.room-top{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.room-no{font-size:22px;font-weight:700;}
.room-type{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
.room-state{font-size:12px;font-weight:700;color:var(--sc)}
.room-guest{font-size:12.5px;color:var(--ink2);font-weight:500;display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:20px;line-height:1.3}
.room-guest small{color:var(--muted);width:100%}
.room-hk{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.room-hk.hk-dirty{color:var(--red)} .room-hk.hk-clean,.room-hk.hk-inspected{color:var(--green)} .room-hk.hk-cleaning{color:var(--amber)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(9,20,33,.5);backdrop-filter:blur(2px)}
.modal-box{position:relative;background:#fff;border-radius:18px;width:100%;max-width:560px;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:pop .18s ease-out}
@keyframes pop{from{transform:translateY(12px);opacity:0}}
.modal-h{display:flex;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.modal-h h3{font-size:19px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modal-h small{color:var(--muted)}
.modal-b{padding:18px 20px 22px}
.modal-b h5{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:20px 0 8px}
.guest-box{display:flex;align-items:center;gap:12px}
.guest-box small{display:block;color:var(--muted)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn-row form{display:inline}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg-b{padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:600;cursor:pointer}
.seg-b.on.hk-clean{background:var(--green);color:#fff;border-color:var(--green)} .seg-b.on.hk-dirty{background:var(--red);color:#fff;border-color:var(--red)}
.seg-b.on.hk-inspected{background:var(--primary);color:#fff;border-color:var(--primary)} .seg-b.on.hk-cleaning{background:var(--amber);color:#fff;border-color:var(--amber)}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input{flex:1;min-width:160px}

/* ---------- tabs & chips ---------- */
.tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:9px 16px;border-radius:9px;color:var(--ink2);font-weight:600;white-space:nowrap;text-decoration:none!important}
.tabs a:hover{background:var(--gray-l)}
.tabs a.on{background:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink2);font-weight:600;font-size:12.5px;text-decoration:none!important;cursor:pointer}
.chip b{color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}.chip.on b{color:#fff}
.chk-chip:has(input:checked){background:var(--primary-l);border-color:var(--primary);color:var(--primary)}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:12px 14px}
.form-grid.c2{grid-template-columns:1fr 1fr}
.form-grid.c3{grid-template-columns:repeat(3,1fr)}
.form-grid.c4{grid-template-columns:repeat(4,1fr)}
.span2{grid-column:span 2}.span4{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:0}
.card>.fld,.card>form>.fld,.sticky>.fld{margin-bottom:12px}
.fld>span{font-size:12.5px;font-weight:600;color:var(--ink2)}
.chk{display:flex;align-items:center;gap:8px;font-weight:500;margin:10px 0;cursor:pointer}
.step{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;align-items:center;justify-content:center}
.nights-ctl{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;height:42px}
.nights-ctl button{width:42px;height:100%;border:0;background:var(--gray-l);font-size:18px;cursor:pointer}
.nights-ctl b{flex:1;text-align:center;font-size:16px}
.type-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pick{position:relative;border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff;text-align:left;transition:border .12s,box-shadow .12s}
.pick:hover{border-color:#b8c6da}
.pick.on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,95,214,.15);background:var(--primary-l)}
.pick b{font-size:18px;display:block}
.pick small{display:block;color:var(--muted);line-height:1.3}
.pick .pk-price{font-weight:700;color:var(--ink);margin-top:4px;font-size:13px}
.pick .pk-dirty{position:absolute;top:8px;right:8px;color:var(--st-vacant_dirty)}
.guest-search{position:relative;display:flex;align-items:center;gap:8px;border:1px dashed #b9c5d6;border-radius:var(--r-sm);padding:0 12px;margin-bottom:14px;color:var(--muted);background:#fafbfd}
.guest-search input{border:0;background:transparent;box-shadow:none}
.ac{position:absolute;top:100%;left:0;right:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 12px 30px rgba(0,0,0,.12);display:none;margin-top:4px;overflow:hidden}
.ac.open{display:block}
.ac button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:#fff;cursor:pointer;border-bottom:1px solid var(--line2)}
.ac button:hover{background:var(--primary-l)}
.ac small{color:var(--muted);display:block}
.picked-guest{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--green-l);color:#0f6b31;padding:10px 12px;border-radius:var(--r-sm);margin-bottom:14px;font-weight:600}
.sum-room{display:flex;align-items:center;gap:8px;padding:12px;border-radius:var(--r-sm);background:var(--gray-l);font-weight:600;margin-bottom:14px}
.sum-room.on{background:var(--ink);color:#fff}
.bill-mini{border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 12px;margin:4px 0 14px}
.bill-mini>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line2)}
.bill-mini>div:last-child{border-bottom:0}
.bill-mini span{color:var(--ink2)}
.bill-mini .tot{font-size:16px}.bill-mini .tot span{color:var(--ink);font-weight:700}
.bill-mini .due b{color:var(--red)}
.bill-mini.big{font-size:15px}
.pay-methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.pm{cursor:pointer}
.pm input{position:absolute;opacity:0;pointer-events:none}
.pm span{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;font-weight:600;font-size:13px;background:#fff}
.pm input:checked+span{border-color:var(--primary);background:var(--primary-l);color:var(--primary)}
.big-input{font-size:22px;font-weight:700;min-height:54px}

/* ---------- front desk ---------- */
.steps-hint{display:flex;gap:10px;align-items:center;background:var(--primary-l);color:#173f8f;padding:11px 14px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13px}
.cards-list{display:flex;flex-direction:column;gap:10px}
.fd-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.fd-room{width:74px;text-align:center;background:var(--ink);color:#fff;border-radius:12px;padding:8px 4px;flex:none}
.fd-room span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#9fb0c3;display:block}
.fd-room b{font-size:22px;display:block;line-height:1.1}
.fd-room small{font-size:10px;color:#b7c3d1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-info{flex:1;min-width:0}
.fd-name{font-size:16px;font-weight:700;color:var(--ink)}
.fd-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:12.5px;margin-top:3px}
.fd-meta span{display:inline-flex;align-items:center;gap:4px}
.fd-meta .code{font-family:ui-monospace,monospace}
.fd-money{font-size:13px;margin-top:5px;color:var(--ink2)}
.fd-act{display:flex;flex-direction:column;gap:6px;align-items:stretch}

/* ---------- booking detail ---------- */
.action-card{border-width:2px}
.ac-blue{border-color:var(--primary);background:linear-gradient(180deg,#f5f8ff,#fff 120px)}
.ac-amber{border-color:var(--amber);background:linear-gradient(180deg,#fffaf2,#fff 120px)}
.ac-violet{border-color:var(--violet);background:linear-gradient(180deg,#faf7ff,#fff 120px)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.summary-line{background:var(--gray-l);padding:10px 12px;border-radius:var(--r-sm)}
.bk-head{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.bk-guest{font-size:19px;font-weight:700;color:var(--ink)}
.bk-room{text-align:center;background:var(--ink);color:#fff;border-radius:14px;padding:8px 16px}
.bk-room span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#9fb0c3;display:block}
.bk-room b{font-size:26px;display:block;line-height:1.1}
.bk-room small{color:#b7c3d1}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.facts>div{background:var(--gray-l);border-radius:var(--r-sm);padding:10px 12px}
.facts small{display:block;color:var(--muted)}
.facts em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.note{background:#fffbea;border:1px solid #f4e3a6;padding:10px 12px;border-radius:var(--r-sm);margin:14px 0 0;display:flex;gap:8px}
.balance-card{border-radius:var(--r);padding:16px;color:#fff}
.balance-card.due{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.balance-card.ok{background:linear-gradient(135deg,#16a34a,#0f7a37)}
.balance-card small{opacity:.85;font-weight:600}
.balance-card b{display:block;font-size:30px;font-weight:700;}
.bc-row{display:flex;justify-content:space-between;font-size:12.5px;opacity:.9}
.balance-card .meter{background:rgba(255,255,255,.25)}.balance-card .meter i{background:#fff}
.pay-box{display:none;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.pay-box.open,.pay-box:target{display:block}
.pay-box h5{font-size:14px;margin-bottom:10px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);background:#fafbfd;white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl th.r,.tbl td.r{text-align:right}
.tbl.hover tbody tr{cursor:pointer}
.tbl.hover tbody tr:hover{background:#f7f9fc}
.tbl tfoot td{font-weight:700;background:#fafbfd}
.tbl tr.grand td{font-weight:700;font-size:14.5px;border-top:2px solid var(--ink)}
.tbl.compact td,.tbl.compact th{padding:8px 10px}
.tbl.num td{white-space:nowrap;font-variant-numeric:tabular-nums}
.card:not(.flush)>.tbl.compact{margin:0}
.card:not(.flush) .tbl.compact td:first-child{padding-left:0}
.card:not(.flush) .tbl.compact td:last-child{padding-right:0}
.tbl tr.wkrow td{background:#fffaf0}
.tbl tr.muted td{opacity:.55}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin:10px 0}
.row-form{display:flex;gap:6px;align-items:center}
.row-form input,.row-form select{min-height:36px;padding:6px 9px}
.w-s{max-width:80px}.w-xs{max-width:64px}

/* ---------- availability ---------- */
.avail-sum{display:grid;grid-template-columns:180px repeat(auto-fit,minmax(200px,1fr));gap:12px}
.as-big{background:var(--ink);color:#fff;border-radius:var(--r);padding:16px;display:flex;flex-direction:column;justify-content:center}
.as-big b{font-size:44px;line-height:1;font-weight:700}
.as-big small{color:#a8b6c6}
.as-type{border:1px solid var(--line);border-radius:var(--r);padding:12px;border-top:4px solid var(--c)}
.as-t{display:flex;justify-content:space-between;margin-bottom:8px}
.as-t span{font-weight:700;color:var(--c)}
.as-rooms{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;min-height:28px}
.cal-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cal-nav input{width:auto;min-height:32px;padding:4px 8px}
.tape-legend{display:flex;flex-wrap:wrap;gap:14px;padding:4px 18px 12px;font-size:12px;color:var(--ink2)}
.tape-legend i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.tp-in{background:var(--st-occupied)}.tp-res{background:var(--st-arrival)}.tp-free{background:#fff;border:1px solid var(--line)}.tp-wk{background:#fff4dc}
.tape-wrap{overflow:auto;max-height:70vh;border-top:1px solid var(--line)}
.tape{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%}
.tape th,.tape td{border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:0;text-align:center;height:36px;min-width:42px}
.tape thead th{position:sticky;top:0;background:#fafbfd;z-index:2;padding:4px 2px;font-weight:600;color:var(--ink2)}
.tape thead tr.tp-occ th{top:44px;font-size:11px;color:var(--green);font-weight:700;height:24px}
.tape thead th small{display:block;color:var(--muted);font-size:10px}
.tape thead th b{font-size:14px}
.tape th.wk,.tape td.wk{background:#fff8e8}
.tape th.td{background:var(--primary)!important;color:#fff}.tape th.td small{color:#dbe6ff}
.tape .tp-room{position:sticky;left:0;z-index:1;background:#fff;min-width:64px;padding:0 8px;text-align:left}
.tape thead .tp-room{z-index:3}
.tape .tp-room b{display:block;font-size:13px}.tape .tp-room small{font-size:10px;font-weight:700}
.tp-b{padding:3px 2px!important}
.tp-b a{display:block;height:28px;line-height:28px;border-radius:7px;color:#fff;font-weight:600;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;text-decoration:none!important}
.tp-b a.tp-in{background:var(--st-occupied)}.tp-b a.tp-res{background:var(--st-arrival)}
.tp-e a{display:block;height:36px;line-height:36px;color:transparent;text-decoration:none!important;font-size:16px}
.tp-e a:hover{background:var(--green-l);color:var(--green)}
.tp-ooo{background:repeating-linear-gradient(135deg,#eef1f5,#eef1f5 4px,#fff 4px,#fff 8px);color:var(--gray)}

/* ---------- housekeeping ---------- */
.task-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.task{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-left:5px solid var(--gray);border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.task.t-pending{border-left-color:var(--red)} .task.t-in_progress{border-left-color:var(--amber);background:#fffcf5} .task.t-done{border-left-color:var(--green);opacity:.7}
.task-room{width:58px;text-align:center;flex:none}
.task-room b{font-size:22px;display:block;line-height:1.1}
.task-room small{color:var(--muted);font-size:11px}
.task-m{flex:1;min-width:0}
.task-t{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.task-m small{color:var(--muted);display:block;margin-top:2px}
.assign select{min-height:32px;padding:4px 8px;width:auto;margin-top:6px;font-size:12.5px}
.task-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.perf{display:flex;flex-wrap:wrap;gap:10px}
.perf>div{display:flex;align-items:center;gap:8px;background:var(--gray-l);padding:8px 12px;border-radius:var(--r-sm)}
.perf span:last-child{color:var(--muted);font-size:12.5px}
.hk-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;border-top:5px solid var(--gray)}
.hk-card.hk-dirty{border-top-color:var(--red)}.hk-card.hk-clean{border-top-color:var(--green)}.hk-card.hk-inspected{border-top-color:var(--primary)}.hk-card.hk-cleaning{border-top-color:var(--amber)}
.hk-card.is-ooo{background:#f6f7f9}
.hk-top{display:flex;justify-content:space-between;align-items:baseline}
.hk-top b{font-size:20px}.hk-top span{font-size:12px;color:var(--muted);font-weight:600}
.hk-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}
.hk-btns button{width:100%;padding:7px 0;font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.hk-btns .on.hb-dirty{background:var(--red);color:#fff;border-color:var(--red)}.hk-btns .on.hb-cleaning{background:var(--amber);color:#fff;border-color:var(--amber)}
.hk-btns .on.hb-clean{background:var(--green);color:#fff;border-color:var(--green)}.hk-btns .on.hb-inspected{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---------- reports ---------- */
.report-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.report-bar input{width:auto;min-height:36px;padding:6px 10px}
.report-bar form{display:inline}
.audit-ok{display:inline-flex;align-items:center;gap:6px;color:#0f6b31;background:var(--green-l);padding:8px 12px;border-radius:var(--r-sm);font-weight:600;font-size:13px}
.rep-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.rep-h h2{font-size:22px;font-weight:700}
.rep-h p{margin:3px 0 0;color:var(--ink2)}
.rep-stamp{border:3px solid;border-radius:10px;padding:4px 14px;font-weight:700;letter-spacing:.12em;transform:rotate(-4deg)}
.rep-stamp.ok{color:var(--green)}.rep-stamp.open{color:var(--amber)}
.rep-foot{color:var(--muted);font-size:12px;text-align:center}
.bars-legend{display:flex;gap:16px;font-size:12px;color:var(--ink2);margin-bottom:8px}
.bars-legend i{display:inline-block;width:12px;height:10px;border-radius:3px;margin-right:5px}
.bars{display:flex;align-items:flex-end;gap:3px;height:200px;overflow-x:auto;padding-bottom:2px}
.bar-col{flex:1;min-width:16px;display:flex;flex-direction:column;align-items:center;height:100%}
.bar-pair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.bar-pair i{display:block;width:45%;max-width:22px;border-radius:4px 4px 0 0;min-height:1px}
.ba{background:var(--green)}.bb{background:#f19999}
.bars-legend .ba,.bars-legend .bb{display:inline-block}
.bar-col small{font-size:10px;color:var(--muted);margin-top:4px}

/* ---------- settings ---------- */
.type-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.type-card{border-top:5px solid var(--c,var(--line));margin:0}
.type-card.new{border-top-color:var(--line);border-style:dashed}
.type-card h4{margin-bottom:12px}
.tc-h{display:flex;justify-content:space-between;align-items:center;font-size:16px}
.tc-rates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.tc-rates>div{background:var(--gray-l);padding:10px;border-radius:var(--r-sm)}
.tc-rates small{display:block;color:var(--muted)}
.tc-rates b{font-size:17px}
.tc-am{font-size:12.5px;color:var(--ink2)}
.role-help{margin-top:16px;font-size:12.5px;color:var(--ink2);background:var(--gray-l);padding:4px 12px;border-radius:var(--r-sm)}

/* ---------- login ---------- */
.login-body{background:#08192a;min-height:100vh}
.login-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,1fr);min-height:100vh}
.login-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0b2233,#1b3f5e)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.38}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,25,42,.55),rgba(8,25,42,.92) 70%)}
.hero-in{position:relative;padding:44px 52px;display:flex;flex-direction:column;gap:22px;min-height:100%;justify-content:center}
.hero-brand{display:flex;align-items:center;gap:14px}
.hero-brand b{display:block;font-size:20px}
.hero-brand small{color:#d9c08f;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.login-hero h2{font-size:42px;font-weight:700;line-height:1.08}
.hero-p{margin:0;max-width:560px;color:#c6d3e0;font-size:15px}
.live-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-weight:600;font-size:13px;backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.room-show{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rs-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;backdrop-filter:blur(8px)}
.rs-img{height:96px;background:linear-gradient(135deg,var(--c),#0b2233)}
.rs-img img{width:100%;height:100%;object-fit:cover;display:block}
.rs-body{padding:10px 12px 12px}
.rs-body b{display:block;font-size:13.5px}
.rs-body small{display:block;color:#a8b8c9;font-size:11.5px}
.rs-price{display:block;margin-top:6px;font-weight:700;color:#f3d18e}
.rs-price em{font-style:normal;font-weight:500;color:#a8b8c9;font-size:11px}
.hero-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;font-size:13px;color:#d5e0ea}
.hero-feats li{display:flex;align-items:center;gap:8px}
.hero-feats .ic{color:var(--gold)}
.login-side{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px 20px}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:30px 28px;box-shadow:0 20px 60px rgba(8,25,42,.12);border:1px solid var(--line)}
.lc-head{text-align:center;margin-bottom:20px}
.lc-head .brand-logo{margin:0 auto 12px}
.lc-head h1{font-size:24px;font-weight:700}
.lc-head p{color:var(--muted);margin:4px 0 0}
.login-card .fld{margin-bottom:14px}
.inp-ic{position:relative;display:flex;align-items:center}
.inp-ic>.ic{position:absolute;left:12px;color:var(--muted)}
.inp-ic input{padding-left:38px;min-height:48px}
.peek{position:absolute;right:6px;border:0;background:none;color:var(--muted);padding:8px;cursor:pointer}
.demo-box{margin-top:20px;border:1px dashed #c8d2df;border-radius:14px;padding:12px;background:#fafbfd}
.demo-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.demo-acc{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;margin-bottom:6px;text-align:left}
.demo-acc:last-child{margin-bottom:0}
.demo-acc:hover,.demo-acc.on{border-color:var(--primary);background:var(--primary-l)}
.demo-acc b{font-size:13px}
.lc-foot{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 0}

/* ---------- invoice ---------- */
.invoice-body{background:#e9edf3;padding:20px 12px}
.inv-tools{max-width:820px;margin:0 auto 14px;display:flex;justify-content:space-between;gap:8px}
.invoice{max-width:820px;margin:0 auto;background:#fff;border-radius:14px;padding:36px 40px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.inv-h{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:3px solid var(--ink);flex-wrap:wrap}
.inv-brand{display:flex;gap:14px}
.inv-brand h2{font-size:22px}
.inv-brand p{margin:4px 0 0;color:var(--ink2);font-size:12.5px}
.inv-meta{text-align:right}
.inv-meta h3{font-size:20px;letter-spacing:.12em;color:var(--gold)}
.inv-meta p{margin:4px 0 0;font-size:13px}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0}
.inv-parties small{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;font-size:11px}
.inv-parties b{display:block;font-size:15px;margin:2px 0}
.inv-parties p{margin:0;color:var(--ink2);font-size:13px}
.inv-t{width:100%;border-collapse:collapse}
.inv-t th{background:var(--ink);color:#fff;text-align:left;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.inv-t td{padding:10px 12px;border-bottom:1px solid var(--line)}
.inv-t .r{text-align:right}
.inv-sum{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-top:20px}
.inv-pay small{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;font-size:11px}
.inv-pay div{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line)}
.inv-tot div{display:flex;justify-content:space-between;padding:6px 0}
.inv-tot .g{border-top:2px solid var(--ink);font-size:16px;font-weight:700}
.inv-f{margin-top:30px;text-align:center;color:var(--ink2)}
.inv-f .sign{display:flex;justify-content:space-between;margin:40px 0 14px;font-size:12px}
.inv-f .sign span{border-top:1px solid var(--ink2);padding-top:6px;min-width:180px}
.inv-f small{color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpis.k6{grid-template-columns:repeat(3,1fr)}
  .tb-search{width:220px}
  .room-show{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45}
  .main{margin-left:0}
  .only-mobile{display:inline-flex!important}
  .g-3-2,.g-2-3,.g-3{grid-template-columns:minmax(0,1fr)}
  .sticky{position:static}
  .tb-date{display:none}
  .login-wrap{grid-template-columns:1fr}
  .hero-in{padding:28px 22px}
  .login-hero h2{font-size:30px}
  .login-side{padding:24px 16px 40px}
}
@media (max-width:767px){
  body{font-size:14px}
  .topbar{padding:10px 16px;gap:8px}
  .tb-title h1{font-size:18px}
  .tb-title p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-search{display:none}
  .page-head{padding:12px 16px 0}
  .page-head .actions .btn{flex:1}
  .content{padding:12px 16px 90px}
  .foot{display:none}
  .card{padding:14px;border-radius:12px}
  .card-h.pad{padding:14px 14px 0}
  .g-2{grid-template-columns:minmax(0,1fr)}
  .kpis,.kpis.k4,.kpis.k6{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:12px}
  .kpi-v{font-size:24px}.kpi-v.sm{font-size:16px}
  .kpi-ic{width:30px;height:30px;margin-bottom:6px}
  .sb{grid-template-columns:12px 110px 1fr 34px;gap:8px;font-size:12.5px}
  .sb:not(:has(.sb-dot)){grid-template-columns:110px 1fr auto}
  .state-bars.cols{grid-template-columns:1fr}
  .mt-row{grid-template-columns:30px 1fr 84px}
  .mt-row .sb-bar{display:none}
  .month-sum{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .month-sum>div{padding:9px}
  .month-sum b{font-size:14px}
  .form-grid.c2,.form-grid.c3,.form-grid.c4{grid-template-columns:1fr 1fr}
  .form-grid .span2{grid-column:1/-1}
  .facts{grid-template-columns:1fr 1fr}
  .co-grid{grid-template-columns:1fr}
  .fd-card{flex-wrap:wrap;gap:12px}
  .fd-info{flex:1 1 calc(100% - 90px)}
  .fd-act{flex-direction:row;width:100%}
  .fd-act .btn{flex:1}
  .room-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .room-no{font-size:20px}
  .filters select,.search-inp{flex:1;min-width:0}
  .filters .mini-date{flex:1}
  .filters .mini-date input{width:100%}
  .avail-sum{grid-template-columns:1fr}
  .task{flex-wrap:wrap}
  .task-a{width:100%}
  .task-a form{flex:1}.task-a .btn{width:100%}
  .modal{padding:0;align-items:flex-end}
  .modal-box{border-radius:18px 18px 0 0;max-height:88vh}
  .rep-h{flex-wrap:wrap}
  .rep-h h2{font-size:18px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(15,28,43,.06)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);padding:4px 0;text-decoration:none!important}
  .tabbar a.on{color:var(--primary)}
  .room-show{grid-template-columns:repeat(2,1fr);gap:8px}
  .rs-img{height:70px}
  .hero-feats{grid-template-columns:1fr 1fr}
  .hero-p{font-size:14px}
  .login-hero h2{font-size:26px}
  .invoice{padding:20px 16px}
  .inv-parties,.inv-sum{grid-template-columns:1fr}
  .inv-meta{text-align:left}
  .row-form{flex-wrap:wrap}
  .pay-methods{grid-template-columns:1fr 1fr}
  .bars{height:150px}
}

/* ---------- print ---------- */
@media print{
  @page{margin:12mm}
  body{background:#fff;font-size:11px}
  .sidebar,.topbar,.tabbar,.page-head,.no-print,.tabs,.foot,.inv-tools,.alert,.backdrop{display:none!important}
  .main{margin:0}
  .content{padding:0}
  .card,.kpi{box-shadow:none;break-inside:avoid}
  .invoice{box-shadow:none;padding:0;max-width:none}
  .invoice-body{padding:0;background:#fff}
  .grid.g-3{grid-template-columns:repeat(3,1fr)}
  .grid.g-2{grid-template-columns:1fr 1fr}
  .kpis,.kpis.k6{grid-template-columns:repeat(6,1fr)}
  .kpis.k4{grid-template-columns:repeat(4,1fr)}
  .table-wrap{overflow:visible}
  a{color:inherit}
}
.mt-row b{white-space:nowrap}
.kpi-v,.balance-card b{white-space:nowrap}
@media (max-width:1180px){.month-sum b{font-size:15px}}
.room-guest em{font-style:normal;color:var(--muted);font-size:11px}
.form-grid.c3.dates{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 132px}
@media (max-width:767px){.form-grid.c3.dates{grid-template-columns:1fr 1fr}.form-grid.c3.dates .fld:last-child{grid-column:1/-1}}
.tbl td.r,.tbl th.r{white-space:nowrap}
.bar-pair i.clip{background:repeating-linear-gradient(180deg,#f19999,#f19999 6px,#f8caca 6px,#f8caca 9px)}
@media (max-width:767px){.inv-f .sign span{min-width:0;flex:1}.inv-f .sign{gap:16px}.forecast{gap:4px}}