:root{font-family:system-ui,-apple-system,Arial,sans-serif;color:#1b2636;background:#f3f6fb}*{box-sizing:border-box}body{margin:0}header{background:linear-gradient(100deg,#111c46,#5a246d);color:white;padding:18px 26px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}header h1{font-size:21px;margin:0}nav{display:flex;gap:8px;flex-wrap:wrap;padding:14px 24px;background:white;border-bottom:1px solid #ddd}nav a{padding:9px 13px;text-decoration:none;color:#25334c;border-radius:9px}nav a.active{background:#e6eafa;font-weight:700}main{max-width:1200px;margin:22px auto;padding:0 18px}.narrow{max-width:450px;margin:9vh auto;padding:30px;background:white;border-radius:16px;box-shadow:0 8px 40px #1b2b4815}section,.panel{background:white;border-radius:14px;padding:18px;margin:15px 0;box-shadow:0 3px 15px #2233550b}h2{font-size:20px}label{display:block;font-weight:600;margin:12px 0 5px}input,select,textarea{display:block;width:100%;padding:11px;border:1px solid #b9c2d1;border-radius:8px;font:inherit;margin-top:5px}button,.btn{background:#2259cb;color:white;border:0;border-radius:9px;padding:11px 16px;font:inherit;cursor:pointer;display:inline-block;text-decoration:none}button.secondary{background:#4b5563}.inline{display:inline}.inline button{padding:7px 10px}table{width:100%;border-collapse:collapse}th,td{padding:10px;text-align:left;border-bottom:1px solid #e3e6ed;vertical-align:top}th{background:#f6f7fa}.scroll{overflow-x:auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}.stat{color:white;border-radius:14px;padding:17px;background:#1465c4}.stat:nth-child(2){background:#7534cb}.stat:nth-child(3){background:#0c9e63}.stat:nth-child(4){background:#df6a13}.stat strong{display:block;font-size:30px}.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.error{color:#b31d28}.ok{color:#087442}.muted{color:#657084;font-size:13px}.pill{border-radius:20px;padding:4px 9px;background:#e6eafa;white-space:nowrap}footer{padding:25px;color:#64748b;text-align:center}@media print{header,nav,button,form,.no-print,footer{display:none!important}body{background:white}section{box-shadow:none;break-inside:avoid}}
/* Spade prototype-inspired visual refresh: secure app, no data-layer changes */
:root{font-family:Inter,system-ui,-apple-system,sans-serif;background:#f3f6fc;color:#192640}header{background:linear-gradient(115deg,#101d43,#263d83 60%,#4c2d9c);padding:24px 28px;box-shadow:0 5px 18px #172d5633}header h1{font-size:23px;letter-spacing:-.4px}nav{background:#fff;box-shadow:0 3px 15px #23335b0c;gap:7px}nav a{color:#3d4e70;text-decoration:none;font-weight:650;padding:11px 14px;border-radius:10px}nav a:hover{background:#eef2ff}nav a.active{color:white;background:linear-gradient(120deg,#3e65e7,#7650df)}main{max-width:1320px}main>h2{font-size:28px;letter-spacing:-.5px;margin:4px 0 24px}section,.panel{border-radius:16px;box-shadow:0 5px 20px #1c2c510a}section{background:white;padding:20px;margin:18px 0;border:1px solid #e3e9f4}section .panel{box-shadow:none} .grid{gap:15px}.stat{border:0;color:#fff;background:linear-gradient(130deg,#0964f5,#00a7ff);border-radius:16px;min-height:116px;padding:22px;box-shadow:0 8px 22px #294c9320;font-size:15px;font-weight:650;display:flex;flex-direction:column;justify-content:space-between}.stat strong{font-size:36px;line-height:1.2}.stat:nth-child(2){background:linear-gradient(135deg,#7828e8,#b64df5)}.stat:nth-child(3){background:linear-gradient(135deg,#00a64f,#20d77c)}.stat:nth-child(4){background:linear-gradient(135deg,#f36b05,#ffab21)}.stat:nth-child(5){background:linear-gradient(135deg,#e72a44,#ff6171)}button{background:linear-gradient(120deg,#2d67db,#6651d9);border-radius:10px}button.secondary{background:#e8eef7;color:#25436d}input:focus,select:focus,textarea:focus{outline:2px solid #6a77f4;outline-offset:1px}.pill{display:inline-block;background:#e9f0ff;color:#315b9d;padding:5px 10px;border-radius:999px}footer{color:#71809b;text-align:center;padding:22px}@media(max-width:700px){header{padding:17px;flex-wrap:wrap}main>h2{font-size:23px}nav{overflow-x:auto;flex-wrap:nowrap}nav a{white-space:nowrap}section{padding:14px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:15px;min-height:105px}.stat strong{font-size:29px}}

/* Reception dashboard matching the original six-card prototype */
.dash-heading h2{font-size:28px;margin:0 0 10px;color:#1b2941}.dash-heading p{color:#63758f;margin:0 0 26px}.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}.kpi{padding:22px 20px;border-radius:14px;color:white;min-height:110px;box-shadow:0 8px 20px #1c37551c}.kpi span{display:block;font-weight:600;font-size:15px}.kpi strong{display:block;font-size:36px;margin-top:12px;line-height:1}.kpi.total{background:linear-gradient(115deg,#1674f7,#2ca5fc)}.kpi.occupied{background:linear-gradient(115deg,#7b22e5,#b23af1)}.kpi.available{background:linear-gradient(115deg,#23ae57,#34cd78)}.kpi.arrivals{background:linear-gradient(115deg,#ff7605,#ffab20)}.kpi.cleaning{background:linear-gradient(115deg,#f6c800,#ffe252);color:#533e00}.kpi.maintenance{background:linear-gradient(115deg,#ed2948,#fa5871)}.dash-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dash-panel{background:white;border-radius:14px;border:1px solid #dfe6f0;padding:20px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading h3{font-size:23px;margin:12px 0 22px}.action-link{background:#1769d9;color:white;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600;font-size:12px}.empty{text-align:center;color:#74839a;padding:30px 12px}.dash-panel table{width:100%}@media(max-width:850px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-panels{grid-template-columns:1fr}}@media(max-width:480px){.kpi-grid{grid-template-columns:1fr 1fr;gap:9px}.kpi{padding:16px 12px;min-height:100px}.kpi strong{font-size:30px}.kpi span{font-size:12px}}

/* Room management: compact floor-by-floor cards */
.rooms-heading h2{font-size:27px;margin:0 0 10px;letter-spacing:-.4px}
.rooms-heading p{color:#64748b;margin:0 0 22px}
.floor-title{font-size:23px;margin:24px 0 18px;color:#1b2941}
.room-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:stretch}
.room-card{min-width:0;background:#fff;border:1px solid #e1e7ef;border-left:4px solid #22ae65;border-radius:13px;padding:16px 13px;box-shadow:0 2px 8px #253e6510}
.room-card.room-occupied{border-left-color:#8247ec}
.room-card.room-cleaning{border-left-color:#f0a11b}
.room-card.room-maintenance{border-left-color:#ed5265}
.room-card h4{font-size:17px;margin:0 0 7px;line-height:1.25}
.room-floor{color:#62738d;margin-bottom:12px;font-size:14px}
.room-edit-form{margin:0}
.room-edit-form label{font-size:12px;margin:10px 0 4px;color:#1b2941}
.room-edit-form select{font-size:14px;padding:5px 7px;margin:0;width:100%;border-radius:6px;background:#fff}
.room-hint{display:block;color:#62738d;font-size:11px;line-height:1.35;margin:5px 0 9px}
.room-status-row{margin:9px 0}
.room-status-badge{display:inline-block;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;background:#e8f7ee;color:#13733b;text-transform:capitalize}
.room-cleaning .room-status-badge{background:#fff0d6;color:#9b5a0a}
.room-occupied .room-status-badge{background:#e8f7ee;color:#13733b}
.room-maintenance .room-status-badge{background:#ffe5e9;color:#b31e3d}
.room-edit-form .room-status-select{margin:5px 0 8px}
.room-edit-button{width:100%;padding:9px 6px;font-size:12px;line-height:1.3;background:#e8eef7;color:#25436d;border-radius:9px;font-weight:700}
.room-quick-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.room-quick-actions form{margin:0}
.room-quick{padding:7px 9px;border-radius:8px;font-size:12px;font-weight:650;background:#e8eef7;color:#25436d}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1250px){.room-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.room-grid{grid-template-columns:1fr}}

/* V8: immutable room classifications */
.room-type-label{font-size:12px;font-weight:700;color:#24344e;margin-top:3px}.room-fixed-type{font-size:14px;font-weight:750;color:#243b61;line-height:1.35;min-height:38px;padding:8px 0}.room-card.room-maintenance .room-fixed-type{color:#8a3844}

/* V9 reception identity workflow */
.identity-fields{background:#f6f8ff;border:1px solid #dce4f4;border-radius:12px;padding:14px;margin:14px 0}.identity-fields h4{margin:0 0 10px}.document-update{min-width:220px;max-width:330px}.document-update label{font-size:12px}.document-update input,.document-update select{padding:7px;font-size:13px}.reception-arrivals{border-left:4px solid #4b69d9}.pick-guest{white-space:nowrap}

/* V10 reception tabs and colourful occupancy reports */
.reception-switch,.report-period{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.reception-tab,.report-period a{background:#e9eef9;color:#33466b;border-radius:10px;padding:11px 16px;text-decoration:none;font-weight:700}.reception-tab.active,.report-period a.active{background:linear-gradient(120deg,#3867e8,#7551df);color:white}.reception-pane{display:none}.reception-pane.active{display:block}.report-top{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.report-top h2{margin-bottom:3px}.report-top p{color:#66758e}.report-period form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.report-period input{width:auto;margin:0}.report-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.report-card{border-radius:15px;padding:20px;color:#fff;min-height:110px}.report-card span{display:block;font-weight:650}.report-card strong{display:block;font-size:34px;margin-top:12px}.report-card.blue{background:linear-gradient(120deg,#1972f4,#29a8fb)}.report-card.purple{background:linear-gradient(120deg,#7d35dc,#af58e9)}.report-card.green{background:linear-gradient(120deg,#0c9d55,#36cd80)}.report-card.orange{background:linear-gradient(120deg,#f8790d,#ffad25)}.report-card.red{background:linear-gradient(120deg,#dd3854,#ff6474)}.report-card.teal{background:linear-gradient(120deg,#0891a9,#38b7bd)}.occupancy-track{height:8px;background:#e7edf7;border-radius:8px;overflow:hidden;min-width:90px}.occupancy-track span{display:block;height:100%;background:#20b86e}.assign-room-form select{min-width:130px}.assign-room-form button{margin-top:6px}@media(max-width:800px){.report-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media print{.reception-switch,.report-period{display:none!important}.report-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* V11: original prototype guest & reservations actions */
.prototype-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 22px}.prototype-action{font-weight:700;padding:13px 20px;border-radius:12px;min-height:48px}.prototype-action.primary{background:#1768d6;color:white}.prototype-action.secondary{background:#e8eef7;color:#29496f}.prototype-action:hover{filter:brightness(.96)}.guest-directory h3{font-size:24px}.guest-directory table td{overflow-wrap:anywhere}.existing-focus{outline:2px solid #3e65e7;border-radius:8px;padding:6px}@media(max-width:560px){.prototype-actions{display:grid;grid-template-columns:1fr 1fr}.prototype-action{padding:12px 10px;font-size:13px}.prototype-action:first-child{grid-column:1 / -1}.reception-switch{overflow-x:auto}}

/* V12: prototype reservation row actions */
.reservation-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.reservation-actions button{font-weight:650;padding:9px 12px;border-radius:9px;white-space:nowrap}.reservation-checkin{background:#1c6bd8}.reservation-edit{background:#e6edf7;color:#27456d}.reservation-cancel{background:#b93439}.reservation-actions button:disabled{opacity:.45;cursor:not-allowed}.reservation-status{display:inline-block;background:#e9f0fc;color:#315a95;border-radius:999px;padding:5px 10px;font-weight:650}.reservation-edit-row[hidden]{display:none}.reservation-edit-row td{background:#f4f7fc}.reservation-edit-form{max-width:900px;padding:10px}.reservation-table{min-width:650px}@media(max-width:720px){.reservation-actions{flex-direction:column;align-items:stretch}.reservation-actions button{width:100%}}

/* V13: single-screen reception, no duplicate navigation tabs */
.reception-switch{display:none!important}
.prototype-actions{margin-bottom:20px}
.reception-pane{display:none}
.reception-pane.active{display:block}
.back-to-reservations{background:#e8eef7;color:#28466b;margin:0 0 12px;padding:10px 14px}
.identity-details{background:white;border:1px solid #e2e9f3;border-radius:16px;padding:16px 20px;margin:18px 0}
.identity-details>summary{font-weight:700;color:#29466e;cursor:pointer;padding:4px 0}
.identity-details>section{box-shadow:none;border:0;padding:10px 0;margin:8px 0}
.reception-arrivals{border-left:4px solid #5472e8}
@media(max-width:650px){.prototype-actions{display:grid;grid-template-columns:1fr}.prototype-action{width:100%}}

/* V15: one reception action and a compact booking-type choice */
.booking-mode{max-width:440px;margin:12px 0 18px}.booking-mode label{font-size:14px;font-weight:700}.booking-mode select{background:#f3f6fc;border:1px solid #cbd6e7}.prototype-actions{margin-bottom:18px}

/* Breakfast request register */
.breakfast-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.breakfast-heading h2{margin-bottom:5px}.breakfast-heading p{color:#64758e;margin-top:0}.breakfast-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;background:white;border:1px solid #e2e8f2;border-radius:14px;padding:16px}.breakfast-filters label{margin:0;min-width:180px}.breakfast-filters button{margin-bottom:1px}.breakfast-list h3{margin-top:0}.breakfast-note{white-space:normal;min-width:220px;line-height:1.5}.breakfast-list td{vertical-align:top}@media print{.breakfast-filters,.breakfast-heading button{display:none!important}.breakfast-list{box-shadow:none!important;border:0!important}.breakfast-note{min-width:0}}

/* Combined reception check-out action */
.reservation-checkout{background:#087c72;color:#fff;border-radius:8px;padding:9px 12px;}


/* V18: responsive layout enhancement, without changing reservation or data handling */
html{min-width:0;-webkit-text-size-adjust:100%}body{min-width:0;overflow-x:hidden}main,section,.panel,.dash-panel,.room-card{min-width:0}img,video,svg{max-width:100%;height:auto}input,select,textarea,button{max-width:100%}textarea{resize:vertical}input[type="file"]{min-width:0}button,.btn,nav a{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #4969e7;outline-offset:2px}
.scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.scroll table{min-width:640px}.scroll .reservation-table{min-width:760px}td,th{overflow-wrap:anywhere}.reservation-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.reservation-actions button{white-space:normal}.room-card select,.room-card button{width:100%}.room-quick-actions button{width:auto}.fields>*{min-width:0}.dash-panels>*{min-width:0}.report-cards>*{min-width:0}
@media(min-width:1500px){main{max-width:1440px}.room-grid{gap:15px}.room-card{padding:18px}}
@media(max-width:1050px){.room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.report-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){header{padding:16px;align-items:flex-start}header h1{font-size:19px;line-height:1.3}header>div{font-size:13px}nav{padding:10px 12px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:5px}nav a{flex:none;white-space:nowrap;padding:10px 12px}main{margin:14px auto;padding:0 12px}main>h2{font-size:23px;margin-bottom:14px}section,.panel,.dash-panel{padding:15px;margin:12px 0}.room-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.room-card{padding:12px}.room-card h4{font-size:17px}.floor-title{font-size:21px}.fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fields label{min-width:0}.prototype-actions{display:flex;flex-wrap:wrap;gap:9px}.prototype-action{max-width:100%}.dash-panels{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.breakfast-filters{align-items:stretch}.breakfast-filters label{flex:1;min-width:140px}}
@media(max-width:480px){header{gap:8px}header h1{font-size:18px}main{padding:0 10px}.fields{grid-template-columns:minmax(0,1fr)}.room-grid{grid-template-columns:minmax(0,1fr)}.room-card{padding:15px}.room-edit-form select{font-size:16px}.prototype-actions{display:grid;grid-template-columns:minmax(0,1fr)}.prototype-action{width:100%;white-space:normal}.kpi-grid{gap:8px}.kpi{padding:14px 12px;min-height:100px}.kpi span{font-size:12px}.kpi strong{font-size:29px}.report-cards{grid-template-columns:minmax(0,1fr)}.breakfast-filters{display:grid;grid-template-columns:minmax(0,1fr)}.breakfast-filters label{width:100%}input,select,textarea{font-size:16px}.scroll table{font-size:13px}.scroll th,.scroll td{padding:9px}.reservation-actions{min-width:120px}.reservation-actions button{padding:9px 10px;font-size:13px}}
@media print{nav,header,.no-print{display:none!important}main{max-width:none;margin:0;padding:0}.scroll{overflow:visible}.scroll table{min-width:0}section,.panel{box-shadow:none!important;break-inside:avoid}}

/* Administrator staff management */
.staff-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px}.staff-card{min-width:0;border:1px solid #dce4f1;border-radius:14px;padding:18px;background:#fff}.staff-card-heading{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.staff-card details{border-top:1px solid #e4e9f1;padding:12px 0}.staff-card details:first-of-type{margin-top:14px}.staff-card summary{font-weight:650;cursor:pointer;color:#2d4e87}.staff-card form{margin-top:10px}.staff-card .danger-button{background:#b82e42;color:#fff}.staff-card .danger-button:hover{background:#932336}@media(max-width:650px){.staff-card{padding:14px}.staff-list{grid-template-columns:1fr}}