:root {
    --bg: #f6f1ea;
    --surface: #ffffff;
    --surface-2: #efe5d8;
    --text: #2d241f;
    --muted: #7c6e64;
    --border: #e2d5c7;
    --primary: #5f3b2d;
    --primary-dark: #3d261e;
    --success: #1f7a4d;
    --danger: #b23a3a;
    --shadow: 0 10px 30px rgba(65, 40, 28, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 260px;
    background: var(--primary-dark);
    color: white;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 26px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #d8b48c;
    color: var(--primary-dark);
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
}

.brand strong,
.brand span {
    display: block;
}

.brand span {
    color: #d9c9bd;
    font-size: 12px;
    margin-top: 3px;
}

.nav {
    display: grid;
    gap: 7px;
}

.nav a {
    padding: 12px 14px;
    border-radius: 10px;
    color: #eee3dc;
}

.nav a:hover {
    background: rgba(255,255,255,0.09);
    color: #fff;
}

.sidebar-footer {
    margin-top: auto;
    padding: 16px 10px 4px;
    display: grid;
    gap: 4px;
    color: #d9c9bd;
}

.sidebar-footer strong {
    color: white;
}

.logout-link {
    margin-top: 10px;
    color: #f0c6b6;
}

.main {
    width: calc(100% - 260px);
    margin-left: 260px;
}

.topbar {
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--border);
    min-height: 86px;
    padding: 18px 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
}

.topbar h1 {
    margin: 0 0 4px;
    font-size: 24px;
}

.topbar p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.menu-btn {
    display: none;
    border: 0;
    background: var(--surface-2);
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 18px;
}

.content {
    padding: 28px 30px 50px;
}

.grid {
    display: grid;
    gap: 18px;
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.stat-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.stat-card strong {
    font-size: 30px;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 28px 0 14px;
    gap: 12px;
}

.section-title h2 {
    margin: 0;
    font-size: 19px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-weight: 700;
}

.btn.secondary {
    background: var(--surface-2);
    color: var(--text);
}

.btn.danger {
    background: var(--danger);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 13px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
    font-weight: 700;
}

.badge.active,
.badge.clean,
.badge.vacant {
    background: #e2f3e9;
    color: var(--success);
}

.badge.inactive,
.badge.dirty,
.badge.maintenance {
    background: #f8e3e3;
    color: var(--danger);
}

.form-card {
    max-width: 900px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-group {
    display: grid;
    gap: 7px;
}

.form-group.full {
    grid-column: 1 / -1;
}

label {
    font-size: 13px;
    font-weight: 700;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 12px;
    background: white;
    font: inherit;
    color: var(--text);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.alert {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 10px;
    font-weight: 700;
}

.alert.success {
    background: #e4f4ea;
    color: var(--success);
}

.alert.error {
    background: #f8e4e4;
    color: var(--danger);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at top left, #ead7c4, transparent 35%),
        radial-gradient(circle at bottom right, #d7bca5, transparent 32%),
        var(--bg);
}

.login-card {
    width: min(430px, 100%);
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 32px;
    border-radius: 20px;
}

.login-card h1 {
    margin: 0 0 6px;
}

.login-card p {
    margin: 0 0 24px;
    color: var(--muted);
}

.login-card .form-group {
    margin-bottom: 15px;
}

.login-card .btn {
    width: 100%;
    margin-top: 4px;
}

@media (max-width: 1000px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sidebar {
        transform: translateX(-100%);
        transition: .25s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main {
        width: 100%;
        margin-left: 0;
    }

    .menu-btn {
        display: inline-block;
    }

    .content {
        padding: 20px 15px 40px;
    }

    .topbar {
        padding: 15px;
    }

    .stats-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full {
        grid-column: auto;
    }
}

/* PMS V2: Room rack and reservation screens */
.rack-legend { display:flex; gap:16px; flex-wrap:wrap; margin:0 0 18px; color:var(--muted); font-size:13px; }
.rack-legend span { display:flex; align-items:center; gap:7px; }
.dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot.vacant { background:#2e9b62; }
.dot.occupied { background:#b23a3a; }
.dot.dirty { background:#d68135; }
.dot.maintenance { background:#555; }
.dot.confirmed { background:#2f6fb0; }
.room-rack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:15px; }
.room-tile { border-radius:15px; padding:16px; min-height:155px; color:#fff; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px; }
.room-tile.vacant,.room-tile.inspected { background:linear-gradient(135deg,#287c53,#3ca86f); }
.room-tile.occupied { background:linear-gradient(135deg,#8f2e2e,#c64b4b); }
.room-tile.dirty,.room-tile.cleaning { background:linear-gradient(135deg,#b56425,#df914d); }
.room-tile.maintenance,.room-tile.blocked { background:linear-gradient(135deg,#3d3d3d,#666); }
.room-tile.confirmed { background:linear-gradient(135deg,#265e96,#3d83c8); }
.room-tile-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.room-tile-head strong { font-size:18px; }
.room-tile-head span { font-size:11px; opacity:.85; text-align:right; }
.room-guest { font-size:17px; font-weight:800; margin-top:7px; }
.room-tile small { opacity:.9; }
.room-tile a { margin-top:auto; text-decoration:underline; font-weight:700; }
.badge.confirmed,.badge.reserved { background:#e2edf9; color:#2f6fb0; }
.badge.checked_in { background:#f8e3e3; color:#9e2d2d; }
.badge.checked_out { background:#e2f3e9; color:#1f7a4d; }
.badge.cancelled,.badge.no_show { background:#ececec; color:#555; }
.booking-view-grid { grid-template-columns:2fr 1fr; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.detail-grid div { display:grid; gap:5px; }
.detail-grid small { color:var(--muted); }
.detail-grid strong { font-size:15px; }
button:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:900px){.booking-view-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}}
.floor-section{margin-top:26px}.floor-section h2{font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}.rack-stats{margin-bottom:18px}.room-tile small{display:block;margin-top:5px}.badge.cleaning{background:#fff1dc;color:#a96516}.badge.inspected{background:#e0edf9;color:#2d6da3}.booking-view-grid{grid-template-columns:2fr 1fr}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.detail-grid small,.detail-grid strong{display:block}.detail-grid small{color:var(--muted);margin-bottom:5px}@media(max-width:900px){.booking-view-grid,.detail-grid{grid-template-columns:1fr}}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.toolbar select,.toolbar input{min-width:220px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:#fff}.reception-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.calendar-wrap{overflow:auto;padding:0}.calendar-table{min-width:1450px}.calendar-table th,.calendar-table td{text-align:center;padding:8px 5px}.calendar-table th span,.calendar-table th strong{display:block}.calendar-table th span{font-size:11px;color:var(--muted)}.calendar-table .room-col{position:sticky;left:0;background:#fff;z-index:2;min-width:130px;text-align:left}.calendar-table .room-col small{display:block;color:var(--muted);margin-top:4px}.calendar-cell{height:48px;min-width:86px;background:#faf7f3}.calendar-cell.booked{background:#dce9f7}.calendar-cell.checked_in{background:#f5d9d9}.calendar-cell a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:12px;font-weight:700}.empty-cell{color:#b9aa9d;font-size:18px!important}.calendar-cell:hover{outline:2px solid var(--primary);outline-offset:-2px}@media(max-width:1200px){.reception-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.reception-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar select,.toolbar input{min-width:100%;width:100%}}

/* PMS V5: premium dashboard and restored colour-card room rack */
.rack-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding:14px 16px}.rack-filter-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rack-filter-form select{min-width:260px}.rack-filter-form input{width:190px}.rack-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:14px}.rack-summary-grid .stat-card{padding:16px}.rack-summary-grid .stat-card strong{font-size:25px}.rack-legend-card{background:rgba(255,255,255,.65);border:1px solid var(--border);padding:11px 14px;border-radius:12px;margin-bottom:22px}.floor-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.floor-heading h2{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.floor-heading span{font-size:12px;color:var(--muted)}.room-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}.premium-room-card{position:relative;min-height:255px;border-radius:18px;padding:18px;color:#fff;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 28px rgba(45,28,20,.14);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden}.premium-room-card:before{content:"";position:absolute;right:-36px;top:-48px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.09)}.premium-room-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(45,28,20,.2)}.premium-room-card.vacant,.premium-room-card.inspected{background:linear-gradient(145deg,#23744b,#3eaa70)}.premium-room-card.occupied{background:linear-gradient(145deg,#842d2d,#c34c4c)}.premium-room-card.dirty,.premium-room-card.cleaning{background:linear-gradient(145deg,#ae5f22,#df914d)}.premium-room-card.maintenance,.premium-room-card.blocked{background:linear-gradient(145deg,#333,#686868)}.premium-room-card.confirmed{background:linear-gradient(145deg,#245b91,#4386c8)}.premium-room-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative}.premium-room-head small{display:block;font-size:9px;letter-spacing:.12em;opacity:.75}.premium-room-head strong{display:block;font-size:30px;line-height:1}.premium-room-head span{font-size:12px;max-width:110px;text-align:right;opacity:.9}.room-status-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;opacity:.9;margin-top:8px}.premium-guest-name{font-size:20px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-ready-text{margin-top:15px}.room-meta{font-size:12px;opacity:.9}.room-money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.room-money-grid>div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px}.room-money-grid small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}.room-money-grid strong{display:block;margin-top:3px;font-size:14px}.room-money-grid .money-due{background:rgba(51,0,0,.22)}.room-money-grid .money-clear{background:rgba(0,50,20,.2)}.room-card-spacer{flex:1}.room-card-action{margin-top:auto;padding-top:9px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:800}.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#3d261e,#684435);color:#fff;padding:24px 26px;border-radius:20px;box-shadow:var(--shadow);margin-bottom:18px}.dashboard-hero span{font-size:10px;letter-spacing:.14em;color:#e5c7aa}.dashboard-hero h2{font-size:25px;margin:5px 0}.dashboard-hero p{margin:0;color:#e5d8cf}.dashboard-hero-actions{display:flex;gap:9px;flex-wrap:wrap}.dashboard-hero .btn.secondary{background:rgba(255,255,255,.13);color:#fff}.dashboard-primary-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.metric-card{position:relative;overflow:hidden}.metric-card span,.folio-summary-card span{display:block;color:var(--muted);font-size:12px;margin-bottom:9px}.metric-card strong{display:block;font-size:31px}.metric-card small{display:block;color:var(--muted);margin-top:7px}.metric-featured{background:linear-gradient(145deg,#fff,#f2e4d4);border-color:#d8b48c}.folio-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.folio-summary-card{padding:17px}.folio-summary-card strong{font-size:22px}.movement-card{padding:6px 10px}.table-link{font-weight:800;color:var(--primary)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}
@media(max-width:1250px){.rack-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.folio-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.rack-toolbar,.dashboard-hero{align-items:stretch;flex-direction:column}.rack-filter-form select,.rack-filter-form input{width:100%;min-width:0}.rack-summary-grid,.dashboard-primary-grid,.folio-summary-grid{grid-template-columns:1fr 1fr}.room-card-grid{grid-template-columns:1fr}.dashboard-hero-actions .btn{flex:1}}
@media(max-width:430px){.rack-summary-grid,.dashboard-primary-grid,.folio-summary-grid{grid-template-columns:1fr}.room-money-grid{grid-template-columns:1fr 1fr}.room-money-grid>div:last-child{grid-column:1/-1}}

/* PMS V6: compact front-office UI and guaranteed colour-card room rack */
.rack-toolbar.card{padding:14px 16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-bottom:14px!important}
.rack-filter-form{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;flex:1!important}
.rack-filter-form select{width:260px!important;min-width:220px!important}
.rack-filter-form input{width:220px!important;min-width:180px!important}
.rack-filter-form .btn{width:auto!important}
.rack-summary-grid{display:grid!important;grid-template-columns:repeat(6,minmax(120px,1fr))!important;gap:12px!important;margin-bottom:12px!important}
.rack-summary-grid .stat-card{padding:14px 15px!important;min-height:88px!important}
.rack-summary-grid .stat-card span{margin-bottom:6px!important;font-size:12px!important}
.rack-summary-grid .stat-card strong{font-size:25px!important;line-height:1.1!important}
.rack-legend-card{margin-bottom:18px!important}
.floor-section{margin-top:20px!important}
.room-card-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;gap:15px!important}
.premium-room-card{display:flex!important;min-height:235px!important;padding:17px!important;text-decoration:none!important}
.premium-room-card,.premium-room-card *{color:#fff}
.premium-room-head strong{font-size:27px!important}
.premium-guest-name{font-size:18px!important}
.room-money-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}

.dashboard-primary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-bottom:14px!important}
.folio-summary-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;margin-bottom:18px!important}
.metric-card{padding:17px!important;min-height:125px!important}
.metric-card strong{font-size:28px!important}
.folio-summary-card{padding:15px!important;min-height:88px!important}
.folio-summary-card strong{font-size:21px!important}
.dashboard-hero{padding:20px 22px!important;margin-bottom:14px!important}
.dashboard-hero h2{font-size:23px!important}

@media(max-width:1350px){
 .rack-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .dashboard-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .folio-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
 .rack-toolbar.card{align-items:stretch!important;flex-direction:column!important}
 .rack-filter-form{display:grid!important;grid-template-columns:1fr 1fr!important}
 .rack-filter-form select,.rack-filter-form input{width:100%!important;min-width:0!important;grid-column:1/-1!important}
 .rack-summary-grid,.dashboard-primary-grid,.folio-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .room-card-grid{grid-template-columns:1fr!important}
}
@media(max-width:430px){
 .rack-summary-grid,.dashboard-primary-grid,.folio-summary-grid{grid-template-columns:1fr!important}
}

/* Room Rack card-render hotfix */
.floor-section{display:block!important;margin-top:22px!important}
.floor-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:12px!important}
.floor-heading h2{margin:0!important;font-size:15px!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:var(--muted)!important}
.room-card-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;gap:15px!important;width:100%!important}
.premium-room-card{display:flex!important;visibility:visible!important;opacity:1!important;min-height:235px!important}
@media(max-width:760px){.room-card-grid{grid-template-columns:1fr!important}}