:root{--bg:#f6f7fb;--card:#fff;--text:#182033;--muted:#6b7280;--border:#e5e7eb;--primary:#166534;--primary2:#15803d;--danger:#b91c1c;--blue:#1d4ed8;--yellow:#ca8a04;--grey:#4b5563;--shadow:0 10px 25px #0000000f}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Arial,Helvetica,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}.app-shell{grid-template-columns:260px 1fr;min-height:100vh;display:grid}.sidebar{color:#fff;background:#102313;height:100vh;padding:18px;position:sticky;top:0;overflow:auto}.brand{margin-bottom:20px;font-size:22px;font-weight:800;line-height:1.1}.brand small{color:#cfe8d1;margin-top:5px;font-size:12px;font-weight:500;display:block}.nav-btn{text-align:left;color:#e8f5e9;background:0 0;border-radius:12px;align-items:center;gap:10px;width:100%;margin:5px 0;padding:12px 13px;display:flex}.nav-btn.active,.nav-btn:hover{background:#ffffff1f}.main{padding:22px}.topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.topbar h1{margin:0;font-size:24px}.user-pill{border:1px solid var(--border);color:var(--muted);background:#fff;border-radius:999px;padding:8px 13px}.grid{gap:14px;display:grid}.grid.stats{grid-template-columns:repeat(5,minmax(0,1fr))}.grid.rooms{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:1.1fr .9fr;align-items:start}.card{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;padding:16px}.stat-title{color:var(--muted);font-size:13px}.stat-value{margin-top:6px;font-size:26px;font-weight:800}.room-card{border-left:7px solid var(--grey)}.room-card.available{border-left-color:var(--primary2)}.room-card.reserved{border-left-color:var(--blue)}.room-card.occupied{border-left-color:#ea580c}.room-card.cleaning_needed{border-left-color:var(--yellow)}.room-card.maintenance{border-left-color:var(--grey)}.room-title{justify-content:space-between;align-items:flex-start;gap:10px;font-weight:800;display:flex}.badge{color:#3730a3;white-space:nowrap;background:#eef2ff;border-radius:999px;align-items:center;padding:5px 9px;font-size:12px;font-weight:700;display:inline-flex}.badge.available{color:#166534;background:#dcfce7}.badge.reserved{color:#1d4ed8;background:#dbeafe}.badge.occupied{color:#c2410c;background:#ffedd5}.badge.cleaning_needed{color:#a16207;background:#fef9c3}.badge.maintenance{color:#374151;background:#e5e7eb}.badge.cancelled{color:#b91c1c;background:#fee2e2}.badge.checked_in{color:#c2410c;background:#ffedd5}.badge.checked_out{color:#374151;background:#e5e7eb}.actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.btn{background:var(--primary);color:#fff;border-radius:10px;padding:10px 13px;font-weight:700}.btn.secondary{color:#111827;background:#e5e7eb}.btn.danger{background:var(--danger)}.btn.blue{background:var(--blue)}.btn.yellow{background:var(--yellow);color:#fff}.btn.small{padding:7px 9px;font-size:12px}.form-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.form-grid.two-col{grid-template-columns:repeat(2,1fr)}.form-grid.one-col{grid-template-columns:1fr}label{color:var(--muted);gap:6px;font-size:13px;font-weight:700;display:grid}input,select,textarea{border:1px solid var(--border);width:100%;color:var(--text);background:#fff;border-radius:10px;padding:10px 11px}textarea{min-height:70px}.table-wrap{border:1px solid var(--border);background:#fff;border-radius:14px;overflow:auto}table{border-collapse:collapse;width:100%;min-width:850px}th,td{border-bottom:1px solid var(--border);text-align:left;vertical-align:top;padding:11px;font-size:14px}th{color:#374151;background:#f9fafb;position:sticky;top:0}.modal-backdrop{z-index:100;background:#00000073;place-items:center;padding:15px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:18px;width:min(980px,100%);max-height:92vh;padding:18px;overflow:auto;box-shadow:0 25px 80px #00000040}.modal-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.modal-head h2{margin:0}.calc{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:12px;font-weight:700}.notice{color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:11px}.login{background:linear-gradient(135deg,#102313,#166534);place-items:center;min-height:100vh;padding:18px;display:grid}.login-card{background:#fff;border-radius:20px;width:min(420px,100%);padding:24px;box-shadow:0 20px 70px #00000040}.login-card h1{margin:0 0 8px}.footer-note{color:var(--muted);margin-top:14px;font-size:12px}@media (max-width:1100px){.grid.stats{grid-template-columns:repeat(3,1fr)}.grid.rooms,.form-grid{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}}@media (max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.nav{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.main{padding:14px}.topbar{flex-direction:column;align-items:flex-start}.grid.stats,.grid.rooms,.form-grid,.form-grid.two-col{grid-template-columns:1fr}.card{padding:13px}.stat-value{font-size:22px}.modal{padding:14px}table{min-width:700px}}.muted{color:var(--muted);margin:4px 0 0}.top-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.top-actions .btn{align-items:center;gap:7px;display:inline-flex}.wide-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.stat-card{min-height:92px}.big-number{color:var(--primary);font-size:34px;font-weight:900}.calendar-page{gap:14px;display:grid}.calendar-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.toolbar-left{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.icon-btn{background:#eef2f7;border-radius:10px;place-items:center;width:38px;height:38px;display:grid}.view-tabs{border:1px solid var(--border);background:#fff;border-radius:12px;display:inline-flex;overflow:hidden}.view-tabs button{color:#111827;border-right:1px solid var(--border);background:#fff;padding:10px 16px}.view-tabs button:last-child{border-right:0}.view-tabs button.active{background:var(--primary);color:#fff}.calendar-layout{grid-template-columns:310px 1fr;align-items:stretch;gap:14px;display:grid}.room-list-panel{flex-direction:column;max-height:680px;padding:14px;display:flex;overflow:hidden}.panel-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.panel-head h3{margin:0}.search-box{border:1px solid var(--border);background:#fff;border-radius:10px;align-items:center;gap:8px;margin-bottom:10px;padding:0 10px;display:flex}.search-box input{border:0;outline:0;padding:10px 0}.room-mini-list{margin-top:10px;padding-right:3px;overflow:auto}.room-mini{border-bottom:1px solid var(--border);border-left:4px solid var(--grey);grid-template-columns:1fr auto;gap:8px;padding:12px 0 12px 10px;display:grid}.room-mini.available{border-left-color:var(--primary2)}.room-mini.reserved{border-left-color:var(--blue)}.room-mini.occupied{border-left-color:#ea580c}.room-mini.cleaning_needed{border-left-color:var(--yellow)}.room-mini.maintenance{border-left-color:var(--grey)}.room-mini small{color:var(--muted);margin-top:4px;line-height:1.25;display:block}.mini-actions{grid-column:1/-1;gap:5px;display:flex}.mini-actions button{background:#e5e7eb;border-radius:8px;padding:5px 8px;font-size:12px;font-weight:700}.calendar-board{overflow:auto}.calendar-board h3{margin-top:0}.booking-grid{grid-template-columns:180px repeat(var(--days,7), minmax(120px, 1fr));border:1px solid var(--border);border-radius:14px;min-width:900px;display:grid;overflow:hidden}.grid-header{border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#f9fafb;padding:10px;font-size:13px;font-weight:700}.day-col span{color:var(--muted);margin-top:3px;font-size:12px;display:block}.room-group-block{display:contents}.room-group-title{border-bottom:1px solid var(--border);background:#f3f4f6;grid-column:1/-1;padding:9px 12px;font-weight:800}.room-row{display:contents}.room-name-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;padding:10px;font-size:13px}.booking-cell{border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;min-height:52px;padding:5px}.booking-cell.today{background:#fff7ed}.booking-bar{text-align:left;color:#0f172a;background:#dbeafe;border:1px solid #93c5fd;border-radius:8px;width:100%;margin:2px 0;padding:7px 8px;font-size:12px;font-weight:700;display:block}.booking-bar.checked_in{background:#ffedd5;border-color:#fdba74}.booking-bar.reserved{background:#dbeafe;border-color:#93c5fd}.month-grid{grid-template-columns:repeat(7,minmax(90px,1fr));gap:8px;display:grid}.month-grid>div{color:var(--muted);padding:4px;font-size:12px;font-weight:700}.month-day{border:1px solid var(--border);text-align:left;background:#fff;border-radius:12px;min-height:86px;padding:10px}.month-day.selected{border-color:var(--primary);box-shadow:0 0 0 2px #1665342e}.month-day.has-booking{background:#f0fdf4}.month-day span{color:var(--primary);margin-top:10px;font-size:12px;font-weight:700;display:block}.calendar-bottom{grid-template-columns:1fr 280px;align-items:start}.compact-table table{min-width:980px}.no-margin{margin-top:0}.summary-card p{border-bottom:1px solid var(--border);justify-content:space-between;margin:0;padding:11px 0;display:flex}.form-section-title{color:var(--primary);margin:18px 0 10px;font-size:15px;font-weight:900}.room-select-summary{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;flex-wrap:wrap;gap:12px;margin-bottom:10px;padding:12px;display:flex}.compact-actions{margin:8px 0 12px}.room-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:440px;padding:4px;display:grid;overflow:auto}.room-pick-card{text-align:left;border:1px solid var(--border);border-left:5px solid var(--grey);background:#fff;border-radius:12px;gap:8px;padding:11px;display:grid}.room-pick-card.available{border-left-color:var(--primary2)}.room-pick-card.reserved{border-left-color:var(--blue)}.room-pick-card.occupied{border-left-color:#ea580c}.room-pick-card.selected{border-color:var(--primary);outline:3px solid #16653440}.room-pick-top{align-items:center;gap:8px;font-weight:800;display:flex}.room-check{background:#e5e7eb;border-radius:999px;place-items:center;width:22px;height:22px;display:inline-grid}.room-pick-card.selected .room-check{background:var(--primary);color:#fff}.room-pick-capacity{color:var(--muted);font-size:12px}.booking-total{flex-wrap:wrap;gap:14px;margin-top:14px;display:flex}.detail-card p{margin:7px 0}@media (max-width:1200px){.wide-stats{grid-template-columns:repeat(3,1fr)}.calendar-layout{grid-template-columns:1fr}.room-picker{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.wide-stats{grid-template-columns:1fr}.calendar-toolbar,.toolbar-left{align-items:stretch}.calendar-toolbar>*,.toolbar-left>*,.view-tabs{width:100%}.view-tabs button{flex:1}.calendar-bottom,.room-picker{grid-template-columns:1fr}.booking-grid{min-width:780px}.month-grid{grid-template-columns:repeat(7,70px);overflow:auto}}.logo-brand{align-items:center;gap:12px;line-height:1.05;display:flex}.logo-brand img{object-fit:contain;filter:drop-shadow(0 2px 8px #00000040);width:48px;height:48px}.login-logo{object-fit:contain;width:110px;height:110px;margin:0 auto 8px;display:block}.toast{z-index:50;box-shadow:var(--shadow);border-radius:12px;margin-bottom:12px;padding:12px 14px;font-weight:700;position:sticky;top:12px}.toast.success{color:#14532d;background:#dcfce7;border:1px solid #86efac}.toast.error{color:#7f1d1d;background:#fee2e2;border:1px solid #fca5a5}.toast.info{color:#1e3a8a;background:#dbeafe;border:1px solid #93c5fd}button:disabled{opacity:.55;cursor:not-allowed}.room-pick-card:disabled{color:#6b7280;background:#f3f4f6;border-color:#d1d5db}@media print{.sidebar,.topbar,.nav,.actions,button{display:none!important}.app-shell{display:block}.content{padding:0}.card{box-shadow:none;border:1px solid #ddd}}.app-notice{color:#0f172a;background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;justify-content:space-between;align-items:center;gap:8px;margin:12px 0;padding:12px 14px;font-weight:600;display:flex}.app-notice button{cursor:pointer;background:0 0;border:0;margin-left:auto;font-size:22px;line-height:1}.app-notice.success{color:#065f46;background:#ecfdf5;border-color:#86efac}.app-notice.error{color:#991b1b;background:#fef2f2;border-color:#fca5a5}.app-notice.info{color:#1e40af;background:#eff6ff;border-color:#93c5fd}
