:root {
    /* Metro Inn brand palette — derived from the logo */
    --mims-orange: #e6802e;       /* primary brand orange (logo fill) */
    --mims-orange-dark: #c2661f;  /* hover / active / gradient end */
    --mims-orange-light: #f4a968; /* tints, badges, subtle accents */
    --mims-cream: #fff6ec;        /* soft warm background tint */
    --mims-charcoal: #2e2620;     /* warm dark neutral for body text */
    /* Inter renders noticeably crisper than the system-UI default at small
       dashboard sizes; the stack falls back gracefully if the CDN is unreachable. */
    --mims-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #f4f6f9;
    font-family: var(--mims-font);
    color: var(--mims-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .stat-value, .room-number, .card-title, .btn {
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--mims-charcoal);
}

/* ---------- Login screen ---------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mims-orange) 0%, var(--mims-orange-dark) 100%);
}

.login-card {
    width: 100%;
    max-width: 380px;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.login-logo {
    width: auto;
    height: 96px;
    max-width: 220px;
}

/* ---------- Top navbar ---------- */
.mims-navbar {
    background-color: var(--mims-orange);
}

.mims-navbar .navbar-brand {
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 0.02em;
}

.mims-navbar .navbar-brand small {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--mims-cream);
    letter-spacing: 0.08em;
}

/* ---------- Sidebar ---------- */
.mims-sidebar {
    width: 250px;
    min-height: calc(100vh - 56px);
    background-color: #fff;
    border-right: 1px solid #e3e6ea;
    flex-shrink: 0;
    position: relative;
    transition: width 0.15s ease;
}

.mims-sidebar .nav-link {
    color: #33404d;
    border-radius: 0.375rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mims-sidebar .nav-link.active {
    background-color: var(--mims-orange);
    color: #fff !important;
}

.mims-sidebar .nav-link:hover:not(.active) {
    background-color: var(--mims-cream);
}

.mims-sidebar .sidebar-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9aa5b1;
    margin: 0.9rem 0.9rem 0.3rem;
    white-space: nowrap;
    overflow: hidden;
}

/* ---------- Sidebar collapse toggle ----------
   A small tab pinned to the sidebar's own right edge, half-overlapping the
   content area — since sidebar.php is one shared include but every page's
   own heading row is duplicated per-file, this is what makes the button
   read as "top-left of the page" on every single page without touching
   each one individually. Position is relative to the sidebar itself, so
   it automatically follows the sidebar's edge whether expanded or collapsed. */
.sidebar-collapse-btn {
    position: absolute;
    top: 1.5rem;
    right: -14px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e6ea;
    border-radius: 50%;
    background: #fff;
    color: #6c757d;
    box-shadow: 0 0.125rem 0.35rem rgba(46, 38, 32, 0.15);
    z-index: 5;
}

.sidebar-collapse-btn:hover {
    background-color: var(--mims-cream);
    color: var(--mims-charcoal);
}

.mims-sidebar.collapsed {
    width: 64px;
}

.mims-sidebar.collapsed .sidebar-toggle-row {
    justify-content: center;
}

.mims-sidebar.collapsed .nav-label,
.mims-sidebar.collapsed .sidebar-section {
    display: none;
}

.mims-sidebar.collapsed .nav-link {
    text-align: center;
    padding: 0.55rem 0;
}

.mims-sidebar.collapsed .nav-link i {
    margin-right: 0 !important;
    font-size: 1.05rem;
}

.mims-content {
    flex-grow: 1;
    padding: 1rem 1.75rem 1.75rem;
    min-width: 0; /* let a collapsed sidebar actually free up space instead of the flex item refusing to shrink/grow */
}

/* ---------- Reusable bits ---------- */
.stat-card {
    border: none;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 38, 32, 0.08);
    height: 100%;
}

.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
}

.room-tile {
    border-radius: 0.5rem;
    padding: 0.85rem;
    color: #fff;
    min-height: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.room-tile .room-number {
    font-size: 1.15rem;
    font-weight: 700;
}

.room-tile.status-available    { background-color: #1e9e63; }
.room-tile.status-reserved     { background-color: #2461ac; }
.room-tile.status-occupied     { background-color: #c0392b; }
.room-tile.status-cleaning     { background-color: #2f8fb3; }
.room-tile.status-dirty        { background-color: #d7a52b; }
.room-tile.status-maintenance  { background-color: #6c757d; }
.room-tile.status-out_of_order { background-color: #2b2f33; }

/* ---------- Password field with an inline show/hide toggle ---------- */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 2.75rem;
}

.password-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
    color: var(--mims-charcoal);
}

.password-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Live Room Status Board indicator ---------- */
.live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--mims-orange);
    margin-right: 0.35rem;
    animation: mims-pulse 1.6s ease-in-out infinite;
}

@keyframes mims-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(230, 128, 46, 0.55); }
    70%  { box-shadow: 0 0 0 0.4rem rgba(230, 128, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 128, 46, 0); }
}

.table-responsive-card {
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 38, 32, 0.06);
    padding: 1.25rem;
}

/* ---------- Menu item list (restaurant/menu.php) ----------
   A flex row per item instead of a per-category <table> — each category's
   table used to size its own Price column independently, so prices never
   lined up between categories. A fixed-width flex column fixes that for
   good, and wraps cleanly on narrow screens instead of squeezing. */
.menu-item-list {
    display: flex;
    flex-direction: column;
}

.menu-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eef0f2;
}

.menu-item-row:last-child {
    border-bottom: none;
}

.menu-item-row.menu-item-unavailable {
    opacity: 0.6;
}

.menu-item-photo {
    width: 52px;
    height: 52px;
    border-radius: 0.5rem;
    object-fit: cover;
    flex: 0 0 auto;
}

.menu-item-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mims-cream);
    color: var(--mims-orange);
    font-size: 1.3rem;
}

.menu-item-info {
    flex: 1 1 220px;
    min-width: 0;
}

.menu-item-name {
    font-weight: 600;
}

.menu-item-desc {
    margin-top: 0.1rem;
}

.menu-item-price {
    flex: 0 0 auto;
    width: 90px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.menu-item-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
    margin-left: auto;
}

@media (max-width: 480px) {
    .menu-item-row {
        justify-content: space-between;
    }
    .menu-item-info {
        flex: 1 1 100%;
        order: 1;
    }
    .menu-item-price {
        order: 2;
        width: auto;
        margin-right: auto;
    }
    .menu-item-actions {
        order: 3;
        margin-left: 0;
    }
}

/* ---------- Print (e.g. booking confirmations) ---------- */
@media print {
    .mims-navbar, .mims-sidebar, .no-print { display: none !important; }
    .mims-content { padding: 0; }
    .table-responsive-card { box-shadow: none; padding: 0; margin-bottom: 1rem !important; }
}

/* ---------- Public booking site ---------- */
.booking-hero {
    background: linear-gradient(135deg, var(--mims-orange) 0%, var(--mims-orange-dark) 100%);
    border-radius: 0.75rem;
    color: #fff;
    padding: 2.5rem 2rem;
}

.public-room-card {
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 38, 32, 0.08);
    overflow: hidden;
    height: 100%;
}

.public-room-card .room-photo {
    height: 160px;
    background-color: var(--mims-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mims-orange);
    font-size: 2.5rem;
}

.public-room-card .room-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-room-card .room-photo-body {
    padding: 1rem;
}