:root {
  font-family: Inter, system-ui, sans-serif;
  color: #142039;
  background: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.login-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, #243858, #101a2f 55%); }
.login-card { width: min(410px, calc(100% - 32px)); padding: 34px; border-radius: 18px; background: white; box-shadow: 0 30px 90px #0006; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #17233c; background: linear-gradient(145deg, #f6dba8, #c59750); font: 700 26px Georgia; }
.eyebrow { margin: 18px 0 5px; color: #738097; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
h1, h2 { margin: 0; font-family: Georgia, serif; }
.muted { color: #738097; }
label { display: grid; gap: 6px; margin-top: 14px; color: #536077; font-size: 12px; font-weight: 700; }
input, select, textarea { width: 100%; padding: 11px; border: 1px solid #d8deea; border-radius: 9px; background: white; }
textarea { min-height: 72px; resize: vertical; }
form > button[type=submit], .primary { padding: 11px 15px; border: 0; border-radius: 9px; color: white; background: #142039; font-weight: 800; }
.login-card form > button { width: 100%; margin-top: 18px; }
.error { min-height: 18px; color: #bd2635; font-size: 12px; }
.security-note { margin-top: 18px; padding: 10px; border-radius: 8px; color: #536077; background: #f0f3f8; font-size: 10px; }
.app-shell { display: grid; grid-template-columns: 220px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 25px 16px; color: white; background: #101a2f; }
.brand { display: flex; gap: 11px; align-items: center; margin-bottom: 28px; }
.brand strong, .brand span, .sidebar-bottom strong, .sidebar-bottom span { display: block; }
.brand span, .sidebar-bottom span { color: #8f9bb0; font-size: 10px; }
.sidebar nav { display: grid; gap: 6px; }
.nav { padding: 11px 13px; border: 0; border-radius: 9px; color: #aab5c8; background: transparent; text-align: left; }
.nav.active, .nav:hover { color: white; background: #ffffff12; }
.sidebar-bottom { margin-top: auto; padding-top: 15px; border-top: 1px solid #ffffff18; }
.sidebar-bottom button { margin-top: 10px; padding: 0; border: 0; color: #b8c2d3; background: transparent; font-size: 11px; }
.content { min-width: 0; padding: 28px 32px 50px; }
header, .toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
header .eyebrow, .toolbar .eyebrow { margin: 0 0 5px; }
.view { display: none; }
.view.active { display: block; }
.summary { display: flex; gap: 11px; margin-bottom: 16px; overflow-x: auto; }
.summary article { min-width: 130px; padding: 14px; border: 1px solid #e1e5ed; border-radius: 11px; background: white; }
.summary span, .summary strong { display: block; }
.summary span { color: #6d7990; font-size: 10px; }
.summary strong { margin-top: 4px; font-size: 20px; }
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
.calendar-toolbar .eyebrow { margin:0 0 5px; }
.calendar-controls { display:flex; gap:7px; }
.calendar-controls button { min-width:40px; padding:9px 12px; border:1px solid #d8deea; border-radius:9px; color:#31405c; background:white; font-weight:800; }
.calendar-controls button:hover { border-color:#9aa8bf; background:#f8fafc; }
.calendar-legend { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin-bottom:12px; color:#536077; font-size:10px; }
.calendar-legend span { display:flex; align-items:center; gap:6px; font-weight:700; }
.calendar-legend i { width:10px; height:10px; border-radius:3px; }
.calendar-legend small { margin-left:auto; color:#8792a5; }
.legend-reserved { background:#19a7a0; }
.legend-occupied { background:#d83b4b; }
.legend-departed { background:#77849a; }
.occupancy-calendar { overflow:auto; max-height:calc(100vh - 205px); border:1px solid #dce2eb; border-radius:14px; background:white; box-shadow:0 12px 35px #1d2a4410; }
.calendar-message { padding:32px; color:#728097; font-size:12px; text-align:center; }
.calendar-message.error { color:#bd2635; }
.calendar-board { width:1346px; }
.calendar-head, .calendar-room-row { display:grid; grid-template-columns:170px 1176px; }
.calendar-head { position:sticky; top:0; z-index:8; min-height:64px; border-bottom:1px solid #dce2eb; background:white; }
.calendar-room-head { position:sticky; left:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-right:1px solid #dce2eb; background:#142039; color:white; }
.calendar-room-head span { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.calendar-room-head strong { display:grid; width:27px; height:27px; place-items:center; border-radius:8px; background:#ffffff18; font-size:11px; }
.calendar-days { position:relative; display:grid; grid-template-columns:repeat(21,56px); }
.calendar-timeline { position:relative; display:grid; grid-template-columns:repeat(42,28px); }
.calendar-days::after, .calendar-timeline::after { position:absolute; inset:0; pointer-events:none; content:""; background:repeating-linear-gradient(to right,transparent 0,transparent 55px,#dfe5ee 55px,#dfe5ee 56px); }
.calendar-days::after { z-index:3; }
.calendar-timeline::after { z-index:1; }
.calendar-day-head { position:relative; z-index:2; display:grid; place-content:center; text-align:center; color:#728097; background:#f8fafc; }
.calendar-day-head span { font-size:9px; font-weight:800; text-transform:uppercase; }
.calendar-day-head strong { color:#273651; font-size:15px; }
.calendar-day-head small { font-size:8px; }
.calendar-day-head.weekend { background:#fff1f2; }
.calendar-day-head.today { color:#08738a; background:#dff6f7; box-shadow:inset 0 -3px #16a5ad; }
.calendar-room-row { min-height:54px; border-bottom:1px solid #e5e9f0; }
.calendar-room-row:last-child { border-bottom:0; }
.calendar-room-label { position:sticky; left:0; z-index:5; display:grid; grid-template-columns:44px 1fr; align-content:center; padding:8px 12px; border-right:1px solid #dce2eb; background:white; box-shadow:5px 0 12px #1d2a4408; }
.calendar-room-label strong { grid-row:1/3; align-self:center; color:#142039; font:700 18px Georgia,serif; }
.calendar-room-label span { color:#34425c; font-size:10px; font-weight:800; }
.calendar-room-label small { overflow:hidden; color:#8792a5; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.calendar-timeline { min-height:54px; }
.calendar-day-cell { grid-row:1; grid-column:span 2; min-width:0; background:white; }
.calendar-day-cell.weekend { background:#fff7f7; }
.calendar-day-cell.today { background:#eefbfb; box-shadow:inset 1px 0 #bce8ea,inset -1px 0 #bce8ea; }
.reservation-bar { z-index:2; grid-row:1; align-self:center; min-width:0; height:37px; margin:0 3px; padding:5px 9px; overflow:hidden; border:0; border-radius:8px; color:white; text-align:left; box-shadow:0 3px 10px #14203922; }
.reservation-bar strong, .reservation-bar small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reservation-bar strong { font-size:10px; }
.reservation-bar small { margin-top:2px; opacity:.78; font-size:7px; }
.reservation-bar.reserved { background:linear-gradient(135deg,#0e948d,#24b8ae); }
.reservation-bar.occupied { background:linear-gradient(135deg,#bd2635,#e4515e); }
.reservation-bar.departed { background:linear-gradient(135deg,#647187,#8793a7); }
.reservation-bar:hover { filter:brightness(1.04); transform:translateY(-1px); }
.calendar-half-start-1 { grid-column-start:1; } .calendar-half-start-2 { grid-column-start:2; }
.calendar-half-start-3 { grid-column-start:3; } .calendar-half-start-4 { grid-column-start:4; }
.calendar-half-start-5 { grid-column-start:5; } .calendar-half-start-6 { grid-column-start:6; }
.calendar-half-start-7 { grid-column-start:7; } .calendar-half-start-8 { grid-column-start:8; }
.calendar-half-start-9 { grid-column-start:9; } .calendar-half-start-10 { grid-column-start:10; }
.calendar-half-start-11 { grid-column-start:11; } .calendar-half-start-12 { grid-column-start:12; }
.calendar-half-start-13 { grid-column-start:13; } .calendar-half-start-14 { grid-column-start:14; }
.calendar-half-start-15 { grid-column-start:15; } .calendar-half-start-16 { grid-column-start:16; }
.calendar-half-start-17 { grid-column-start:17; } .calendar-half-start-18 { grid-column-start:18; }
.calendar-half-start-19 { grid-column-start:19; } .calendar-half-start-20 { grid-column-start:20; }
.calendar-half-start-21 { grid-column-start:21; } .calendar-half-start-22 { grid-column-start:22; }
.calendar-half-start-23 { grid-column-start:23; } .calendar-half-start-24 { grid-column-start:24; }
.calendar-half-start-25 { grid-column-start:25; } .calendar-half-start-26 { grid-column-start:26; }
.calendar-half-start-27 { grid-column-start:27; } .calendar-half-start-28 { grid-column-start:28; }
.calendar-half-start-29 { grid-column-start:29; } .calendar-half-start-30 { grid-column-start:30; }
.calendar-half-start-31 { grid-column-start:31; } .calendar-half-start-32 { grid-column-start:32; }
.calendar-half-start-33 { grid-column-start:33; } .calendar-half-start-34 { grid-column-start:34; }
.calendar-half-start-35 { grid-column-start:35; } .calendar-half-start-36 { grid-column-start:36; }
.calendar-half-start-37 { grid-column-start:37; } .calendar-half-start-38 { grid-column-start:38; }
.calendar-half-start-39 { grid-column-start:39; } .calendar-half-start-40 { grid-column-start:40; }
.calendar-half-start-41 { grid-column-start:41; } .calendar-half-start-42 { grid-column-start:42; }
.calendar-half-span-1 { grid-column-end:span 1; } .calendar-half-span-2 { grid-column-end:span 2; }
.calendar-half-span-3 { grid-column-end:span 3; } .calendar-half-span-4 { grid-column-end:span 4; }
.calendar-half-span-5 { grid-column-end:span 5; } .calendar-half-span-6 { grid-column-end:span 6; }
.calendar-half-span-7 { grid-column-end:span 7; } .calendar-half-span-8 { grid-column-end:span 8; }
.calendar-half-span-9 { grid-column-end:span 9; } .calendar-half-span-10 { grid-column-end:span 10; }
.calendar-half-span-11 { grid-column-end:span 11; } .calendar-half-span-12 { grid-column-end:span 12; }
.calendar-half-span-13 { grid-column-end:span 13; } .calendar-half-span-14 { grid-column-end:span 14; }
.calendar-half-span-15 { grid-column-end:span 15; } .calendar-half-span-16 { grid-column-end:span 16; }
.calendar-half-span-17 { grid-column-end:span 17; } .calendar-half-span-18 { grid-column-end:span 18; }
.calendar-half-span-19 { grid-column-end:span 19; } .calendar-half-span-20 { grid-column-end:span 20; }
.calendar-half-span-21 { grid-column-end:span 21; } .calendar-half-span-22 { grid-column-end:span 22; }
.calendar-half-span-23 { grid-column-end:span 23; } .calendar-half-span-24 { grid-column-end:span 24; }
.calendar-half-span-25 { grid-column-end:span 25; } .calendar-half-span-26 { grid-column-end:span 26; }
.calendar-half-span-27 { grid-column-end:span 27; } .calendar-half-span-28 { grid-column-end:span 28; }
.calendar-half-span-29 { grid-column-end:span 29; } .calendar-half-span-30 { grid-column-end:span 30; }
.calendar-half-span-31 { grid-column-end:span 31; } .calendar-half-span-32 { grid-column-end:span 32; }
.calendar-half-span-33 { grid-column-end:span 33; } .calendar-half-span-34 { grid-column-end:span 34; }
.calendar-half-span-35 { grid-column-end:span 35; } .calendar-half-span-36 { grid-column-end:span 36; }
.calendar-half-span-37 { grid-column-end:span 37; } .calendar-half-span-38 { grid-column-end:span 38; }
.calendar-half-span-39 { grid-column-end:span 39; } .calendar-half-span-40 { grid-column-end:span 40; }
.calendar-half-span-41 { grid-column-end:span 41; } .calendar-half-span-42 { grid-column-end:span 42; }
.calendar-start-1 { grid-column-start:1; } .calendar-start-2 { grid-column-start:2; } .calendar-start-3 { grid-column-start:3; }
.calendar-start-4 { grid-column-start:4; } .calendar-start-5 { grid-column-start:5; } .calendar-start-6 { grid-column-start:6; }
.calendar-start-7 { grid-column-start:7; } .calendar-start-8 { grid-column-start:8; } .calendar-start-9 { grid-column-start:9; }
.calendar-start-10 { grid-column-start:10; } .calendar-start-11 { grid-column-start:11; } .calendar-start-12 { grid-column-start:12; }
.calendar-start-13 { grid-column-start:13; } .calendar-start-14 { grid-column-start:14; } .calendar-start-15 { grid-column-start:15; }
.calendar-start-16 { grid-column-start:16; } .calendar-start-17 { grid-column-start:17; } .calendar-start-18 { grid-column-start:18; }
.calendar-start-19 { grid-column-start:19; } .calendar-start-20 { grid-column-start:20; } .calendar-start-21 { grid-column-start:21; }
.calendar-span-1 { grid-column-end:span 1; } .calendar-span-2 { grid-column-end:span 2; } .calendar-span-3 { grid-column-end:span 3; }
.calendar-span-4 { grid-column-end:span 4; } .calendar-span-5 { grid-column-end:span 5; } .calendar-span-6 { grid-column-end:span 6; }
.calendar-span-7 { grid-column-end:span 7; } .calendar-span-8 { grid-column-end:span 8; } .calendar-span-9 { grid-column-end:span 9; }
.calendar-span-10 { grid-column-end:span 10; } .calendar-span-11 { grid-column-end:span 11; } .calendar-span-12 { grid-column-end:span 12; }
.calendar-span-13 { grid-column-end:span 13; } .calendar-span-14 { grid-column-end:span 14; } .calendar-span-15 { grid-column-end:span 15; }
.calendar-span-16 { grid-column-end:span 16; } .calendar-span-17 { grid-column-end:span 17; } .calendar-span-18 { grid-column-end:span 18; }
.calendar-span-19 { grid-column-end:span 19; } .calendar-span-20 { grid-column-end:span 20; } .calendar-span-21 { grid-column-end:span 21; }
.room-grid { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 10px; }
.room { min-height: 100px; padding: 12px; border: 1px solid transparent; border-radius: 12px; }
.room > div { display: flex; justify-content: space-between; }
.room b, .room small { display: block; margin-top: 18px; font-size: 10px; }
.room small { margin-top: 4px; opacity: .72; font-size: 8px; }
.status-free { color: #176746; background: #e6f7ed; border-color: #c7ead6; }
.status-occupied { color: #9d2430; background: #fde7e9; border-color: #f5c9cd; }
.status-reserved { color: #08695f; background: #d9f5f0; border-color: #bde9e1; }
.status-dirty { color: #83540e; background: #fff0cc; border-color: #f5dea5; }
.status-cleaning { color: #6344ba; background: #eee9ff; border-color: #d9cff8; }
.status-inspection { color: #08738a; background: #dcf4f8; border-color: #bee8ee; }
.status-maintenance { color: #91480f; background: #ffead8; border-color: #f4cba9; }
.status-blocked { color: #556177; background: #e7ebf2; border-color: #cbd3df; }
.panel { overflow: hidden; border: 1px solid #e1e5ed; border-radius: 13px; background: white; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: 12px 14px; border-bottom: 1px solid #e7ebf2; font-size: 11px; text-align: left; }
th { color: #728097; background: #f7f9fc; font-size: 9px; text-transform: uppercase; }
td strong, td small { display: block; }
td small { margin-top: 3px; color: #7b879b; font-size: 8px; }
td button { padding: 6px 8px; border: 1px solid #d8deea; border-radius: 7px; background: white; font-size: 9px; }
.two-column { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 16px; }
.guest-list button { display: grid; width: 100%; padding: 13px; border: 0; border-bottom: 1px solid #e7ebf2; background: white; text-align: left; }
.guest-list button:hover { background: #f7f9fc; }
.guest-list small { margin-top: 3px; color: #7b879b; }
.guest-detail { padding: 20px; }
.folio { margin-top: 16px; border: 1px solid #e1e5ed; border-radius: 9px; overflow: hidden; }
.folio > div, .folio p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 10px; }
.folio > div { background: #f7f9fc; }
.folio p { border-top: 1px solid #e7ebf2; font-size: 10px; }
dialog { width: min(680px, calc(100% - 30px)); padding: 22px; border: 0; border-radius: 15px; box-shadow: 0 25px 80px #0005; }
dialog::backdrop { background: #101a2f99; }
.dialog-head, .dialog-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.dialog-head button, .dialog-actions > button:first-child { border: 0; background: transparent; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-grid .wide { grid-column: 1/-1; }
.billing-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:0 12px; margin:16px 0 4px; padding:14px; border:1px solid #d8deea; border-radius:10px; }
.billing-fields legend { padding:0 7px; color:#142039; font-size:12px; font-weight:800; }
.billing-fields label { margin-top:9px; }
.dialog-actions { justify-content: flex-end; margin-top: 18px; }
.overview-dialog { width:min(520px,calc(100% - 30px)); }
.overview-dialog .eyebrow { margin:0 0 4px; }
.overview-content { margin-top:18px; }
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
.overview-grid div { padding:12px; border:1px solid #e1e5ed; border-radius:10px; background:#f8fafc; }
.overview-grid dt { color:#728097; font-size:9px; font-weight:800; text-transform:uppercase; }
.overview-grid dd { margin:5px 0 0; color:#142039; font-size:12px; font-weight:800; }
.overview-note { padding:11px 12px; border-radius:9px; color:#536077; background:#fff5dc; font-size:10px; }
.overview-total { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:14px; border-radius:10px; color:white; background:#142039; }
.overview-total span { font-size:10px; }
.overview-total strong { font-size:18px; }
.reservation-highlight { animation:reservation-highlight 3.5s ease; }
@keyframes reservation-highlight { 0%,45% { background:#fff0ba; } 100% { background:white; } }
.print-invoice { display:none; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 16px; border-radius: 9px; color: white; background: #142039; opacity: 0; transform: translateY(10px); transition: .15s; }
.toast.show { opacity: 1; transform: none; }
@media (max-width: 900px) { .room-grid { grid-template-columns: repeat(3, 1fr); } .app-shell { grid-template-columns: 76px minmax(0,1fr); } .brand > div:last-child, .nav { font-size: 0; } .nav::first-letter { font-size: 14px; } .sidebar-bottom div { display:none; } }
@media (max-width: 620px) { .app-shell { display:block; } .sidebar { position:fixed; inset:auto 0 0; z-index:20; display:block; width:100%; height:auto; padding:8px; } .brand,.sidebar-bottom { display:none; } .sidebar nav { display:grid; grid-template-columns:repeat(5,1fr); } .nav { font-size:9px; text-align:center; } .content { padding:20px 12px 80px; } .room-grid { grid-template-columns:repeat(2,1fr); } .two-column,.form-grid,.billing-fields { grid-template-columns:1fr; } .form-grid .wide { grid-column:auto; } .calendar-toolbar { align-items:flex-end; } .calendar-legend small { width:100%; margin-left:0; } .occupancy-calendar { max-height:calc(100vh - 280px); } }
@media print {
  @page { size:A4; margin:18mm; }
  body { color:#111; background:white; }
  .app-shell, dialog, .toast { display:none !important; }
  .print-invoice { display:block; font-family:Arial,sans-serif; }
  .invoice-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:45px; padding-bottom:18px; border-bottom:2px solid #142039; }
  .invoice-head p { margin:0 0 8px; font-size:10px; font-weight:700; letter-spacing:.12em; }
  .invoice-head h1 { font-size:30px; }
  .invoice-head > div:last-child { text-align:right; font-size:11px; line-height:1.6; }
  .invoice-address { min-height:100px; margin-bottom:25px; font-size:12px; line-height:1.55; }
  .invoice-table { min-width:0; margin-top:25px; }
  .invoice-table th, .invoice-table td { padding:10px 8px; font-size:10px; }
  .invoice-table th:nth-child(n+2), .invoice-table td:nth-child(n+2) { text-align:right; }
  .invoice-table tfoot td { border-top:2px solid #142039; font-size:12px; font-weight:800; }
}