/* Hotel Management System - main stylesheet */
:root {
    --hms-sidebar-w: 250px;
    --hms-primary: #1e3a5f;
    --hms-accent: #c9a227;
}
* { box-sizing: border-box; }
body { background: #f4f6f9; font-family: 'Segoe UI', system-ui, sans-serif; }

.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1; }

/* ---------- Sidebar ---------- */
.app-sidebar {
    width: var(--hms-sidebar-w);
    background: linear-gradient(180deg, var(--hms-primary) 0%, #16293f 100%);
    color: #cbd5e1;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.sidebar-brand { color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-logo { height: 32px; width: auto; }
/* Extra bottom spacer so the last sidebar tab can be scrolled into the center */
.sidebar-nav { padding-bottom: 45vh !important; }
.sidebar-nav a {
    display: flex; align-items: center; gap: .6rem;
    color: #cbd5e1; text-decoration: none;
    padding: .45rem .7rem; border-radius: .4rem;
    font-size: .92rem; margin-bottom: 2px;
    scroll-margin-top: 40vh;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav a.active { background: var(--hms-accent); color: #1a2332; font-weight: 600; }
.nav-section {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .08em;
    color: #7d90a8; padding: .9rem .7rem .3rem;
}

/* ---------- Cards / stats ---------- */
.stat-card { border: 0; border-radius: .7rem; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.stat-card .icon {
    width: 46px; height: 46px; border-radius: .6rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
}
.card { border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.08); border-radius: .7rem; }
.card-header { background: #fff; border-bottom: 1px solid #eef1f5; font-weight: 600; }

/* ---------- Room board ---------- */
.room-card {
    border-radius: .7rem; color: #fff; min-height: 130px;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: .9rem; box-shadow: 0 2px 6px rgba(16,24,40,.15);
    transition: transform .12s ease;
}
.room-card:hover { transform: translateY(-2px); }
.room-card .room-no { font-size: 1.5rem; font-weight: 700; }
.room-card .room-type { font-size: .8rem; opacity: .9; }
.room-card .room-guest { font-size: .8rem; border-top: 1px solid rgba(255,255,255,.25); padding-top: .4rem; }
.room-card .quick-actions a, .room-card .quick-actions button {
    font-size: .72rem; padding: .15rem .45rem; color: #fff;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
    border-radius: .3rem; text-decoration: none; margin: 1px;
}
.room-card .quick-actions a:hover { background: rgba(255,255,255,.32); }

/* ---------- Calendar ---------- */
.cal-grid { overflow-x: auto; }
.cal-grid table { border-collapse: collapse; min-width: 700px; width: 100%; }
.cal-grid th, .cal-grid td { border: 1px solid #e5e9f0; font-size: .8rem; padding: .35rem; }
.cal-cell-res { border-radius: .3rem; color: #fff; font-size: .72rem; padding: .1rem .3rem; cursor: pointer; }

/* ---------- Tables ---------- */
.table > :not(caption) > * > * { vertical-align: middle; }
.table-responsive { border-radius: .5rem; }

/* ---------- Food menu ---------- */
.food-item-card { cursor: pointer; border: 2px solid transparent; transition: all .12s; }
.food-item-card:hover { border-color: var(--hms-primary); }
.food-item-card.selected { border-color: var(--hms-accent); background: #fff8e1; }

/* ---------- Buttons ---------- */
.btn { border-radius: .45rem; }
.btn-primary { background: var(--hms-primary); border-color: var(--hms-primary); }
.btn-primary:hover { background: #16293f; border-color: #16293f; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed; z-index: 1045; left: calc(-1 * var(--hms-sidebar-w));
        transition: left .25s ease;
    }
    .app-sidebar.open { left: 0; }
    .sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1040;
    }
}

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f1f33 100%);
}
.login-card { width: 100%; max-width: 420px; border-radius: 1rem; }