/* HOTEL ROYAL ONE — admin panel theme (Bootstrap 5 + this layer) */

:root {
    --royal-900: #0f0a26;
    --royal-800: #150f33;
    --royal-700: #211849;
    --royal-600: #2b1b58;
    --violet-500: #6d3fa8;
    --gold-600: #b8862a;
    --gold-500: #d4a437;
    --gold-400: #e8be5c;
    --teal-500: #12b5a5;
    --rose-500: #e0546b;
    --sky-500: #3d8ce0;

    --ink: #211d33;
    --ink-soft: #4a4462;
    --muted: #6f6a88;
    --line: #e7e3f2;
    --sand: #f7f5fb;

    --radius-sm: 9px;
    --radius: 14px;
    --shadow-sm: 0 2px 10px rgba(21, 15, 51, .06);
    --shadow: 0 14px 40px rgba(21, 15, 51, .10);

    --sidebar-w: 260px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--sand);
    color: var(--ink);
    font-size: 15px;
}

h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; color: var(--royal-700); }

a { color: var(--violet-500); text-decoration: none; }
a:hover { color: var(--gold-600); }

/* ---------- Shell ---------- */

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

.admin-sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: linear-gradient(180deg, var(--royal-800), var(--royal-900));
    color: #b9b3d2;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-brand {
    display: flex; align-items: center; gap: .7rem;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.admin-brand strong { display: block; color: #fff; font-family: 'Playfair Display', serif; font-size: 1rem; letter-spacing: .03em; }
.admin-brand small { color: var(--gold-400); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }

.admin-nav { padding: 1rem 0; flex: 1; }
.admin-nav__group {
    padding: 1rem 1.35rem .45rem;
    font-size: .63rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: #6c6690;
}
.admin-nav a {
    display: block;
    padding: .6rem 1.35rem;
    color: #b9b3d2;
    font-size: .9rem;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.admin-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.admin-nav a.is-active {
    background: rgba(212, 164, 55, .12);
    color: var(--gold-400);
    border-left-color: var(--gold-500);
}

.admin-sidebar__foot {
    padding: 1rem 1.35rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex; flex-direction: column; gap: .5rem;
}
.admin-sidebar__foot a { color: #8b85ab; font-size: .82rem; }
.admin-sidebar__foot a:hover { color: var(--gold-400); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: .9rem 1.75rem;
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 20;
}
.admin-topbar h1 { font-size: 1.3rem; margin: 0; flex: 1; }
.admin-topbar__right { display: flex; align-items: center; gap: 1rem; }

.admin-burger {
    display: none;
    background: none; border: 1px solid var(--line); border-radius: 8px;
    padding: .3rem .6rem; font-size: 1.1rem; color: var(--royal-700); cursor: pointer;
}

.admin-user { display: flex; align-items: center; gap: .6rem; }
.admin-user__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(125deg, var(--royal-800), var(--violet-500));
    color: var(--gold-400); font-weight: 800; font-size: .85rem;
}
.admin-user__meta strong { display: block; font-size: .86rem; color: var(--ink); font-family: 'Manrope', sans-serif; }
.admin-user__meta small { color: var(--muted); font-size: .7rem; }

.admin-content { padding: 1.75rem; flex: 1; }

/* ---------- Cards, tables, forms ---------- */

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-header h2, .card-header h3 { font-size: 1.05rem; margin: 0; }

.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--violet-500), var(--teal-500));
}
.stat-card--gold::after { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.stat-card--teal::after { background: linear-gradient(90deg, #0d6f65, var(--teal-500)); }
.stat-card--rose::after { background: linear-gradient(90deg, #a8304a, var(--rose-500)); }
.stat-card--sky::after  { background: linear-gradient(90deg, #1e5f9e, var(--sky-500)); }

.stat-card__label { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat-card__value { font-family: 'Playfair Display', serif; font-size: 1.9rem; color: var(--royal-700); line-height: 1.15; margin-top: .3rem; }
.stat-card__note { font-size: .78rem; color: var(--muted); }

.table { margin: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; vertical-align: middle; }
.table thead th {
    background: var(--sand);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table tbody tr:hover { background: #fbfaff; }
.table td { border-color: var(--line); font-size: .9rem; }

.badge { font-weight: 700; letter-spacing: .03em; padding: .38em .7em; border-radius: 999px; font-size: .72rem; }

.btn { border-radius: 999px; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.btn-sm { font-size: .8rem; padding: .35rem .85rem; }
.btn-primary { background: linear-gradient(125deg, var(--royal-800), var(--violet-500)); border: none; }
.btn-primary:hover { background: linear-gradient(125deg, var(--royal-700), #7d4dbd); }
.btn-gold { background: linear-gradient(120deg, var(--gold-600), var(--gold-400)); border: none; color: var(--royal-800); }
.btn-gold:hover { color: var(--royal-900); filter: brightness(1.04); }
.btn-outline-secondary { border-color: var(--line); color: var(--ink-soft); }
.btn-outline-secondary:hover { background: var(--sand); color: var(--royal-700); border-color: var(--line); }

.form-label { font-weight: 700; font-size: .82rem; color: var(--ink-soft); margin-bottom: .3rem; }
.form-control, .form-select {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .55rem .8rem;
    font-size: .92rem;
}
.form-control:focus, .form-select:focus {
    border-color: #a077e0;
    box-shadow: 0 0 0 .2rem rgba(109, 63, 168, .12);
}
.form-text { font-size: .78rem; color: var(--muted); }
.form-check-input:checked { background-color: var(--violet-500); border-color: var(--violet-500); }

.alert { border: none; border-radius: var(--radius-sm); font-weight: 600; }
.alert-success { background: rgba(18, 181, 165, .12); color: #0b6f66; }
.alert-danger  { background: rgba(224, 84, 107, .12); color: #a92e46; }
.alert-warning { background: rgba(212, 164, 55, .16); color: #8a6413; }
.alert-info    { background: rgba(61, 140, 224, .12); color: #245c96; }

.thumb-cell {
    width: 64px; height: 46px; border-radius: 8px;
    background-size: cover; background-position: center;
    background-color: var(--royal-700);
    display: grid; place-items: center;
    color: rgba(255, 255, 255, .5);
    font-size: .62rem; letter-spacing: .1em;
}

.section-divider {
    margin: 1.75rem 0 1rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-600);
    display: flex; align-items: center; gap: .75rem;
}
.section-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state h3 { font-size: 1.15rem; margin-bottom: .5rem; }

/* Icon picker grid */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .4rem; }
.icon-grid__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .5rem .25rem;
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    color: var(--violet-500);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.icon-grid__item span { font-size: .58rem; color: var(--muted); letter-spacing: .02em; }
.icon-grid__item:hover { border-color: #a077e0; background: #faf8ff; }
.icon-grid__item.is-selected { border-color: var(--violet-500); background: rgba(109, 63, 168, .08); }
.icon-grid__item.is-selected span { color: var(--violet-500); font-weight: 700; }

/* Seven-day occupancy bars */
.bar-column {
    height: 92px;
    background: #f0edf8;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.bar-column__fill {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #7d4dbd, var(--royal-600));
    border-radius: 8px 8px 0 0;
}

/* Availability calendar */
.cal-wrap { overflow-x: auto; }
.cal-table { border-collapse: separate; border-spacing: 3px; min-width: 900px; }
.cal-table th {
    font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); text-align: center; padding: .3rem;
    min-width: 40px;
}
.cal-table th.cal-room { text-align: left; min-width: 180px; color: var(--royal-700); font-size: .8rem; letter-spacing: 0; text-transform: none; }
.cal-table td { text-align: center; padding: 0; }
.cal-cell {
    display: block; border-radius: 6px; padding: .45rem .2rem;
    font-size: .76rem; font-weight: 700; color: #fff;
}
.cal-cell--free { background: rgba(18, 181, 165, .16); color: #0b6f66; }
.cal-cell--tight { background: rgba(212, 164, 55, .24); color: #7d5a10; }
.cal-cell--full { background: rgba(224, 84, 107, .22); color: #a92e46; }
.cal-table td.is-weekend .cal-cell { outline: 1px dashed rgba(109, 63, 168, .35); }

/* Login / install */
.auth-page {
    min-height: 100vh;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--royal-900), var(--royal-600) 60%, var(--violet-500));
    padding: 2rem 1rem;
}
.auth-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    padding: 2.25rem;
    width: 100%;
    max-width: 430px;
}
.auth-card__mark { display: flex; justify-content: center; margin-bottom: 1rem; }
.auth-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: .35rem; }
.auth-card p.lead-sm { text-align: center; color: var(--muted); font-size: .88rem; margin-bottom: 1.5rem; }
.auth-card .btn { width: 100%; justify-content: center; }
.auth-foot { text-align: center; margin-top: 1.25rem; font-size: .82rem; color: var(--muted); }

/* Responsive */
@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 60px rgba(0, 0, 0, .4);
    }
    .admin-sidebar.is-open { transform: none; }
    .admin-burger { display: inline-block; }
    .admin-content { padding: 1.1rem; }
    .admin-user__meta { display: none; }
}

@media print {
    .admin-sidebar, .admin-topbar, .no-print { display: none !important; }
    .admin-content { padding: 0; }
    body { background: #fff; }
}

/* ---------- Printable invoice sheet ---------- */

.invoice-sheet { padding: 2.25rem; }

.invoice-sheet__head {
    display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--line);
}
.invoice-sheet__brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem; font-weight: 700; color: var(--royal-700); letter-spacing: .03em;
}
.invoice-sheet__muted { color: var(--muted); font-size: .82rem; line-height: 1.6; margin-top: .35rem; }
.invoice-sheet__title {
    font-size: .72rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold-600);
}
.invoice-sheet__no {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 1.15rem; font-weight: 700; color: var(--royal-700); margin: .2rem 0 .45rem;
}

.invoice-sheet__meta {
    display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
    padding: 1.5rem 0;
}
.invoice-sheet__meta > div { font-size: .92rem; }

.invoice-sheet__items thead th {
    background: var(--sand);
    border-bottom: 1px solid var(--line);
}
.invoice-sheet__items td { font-size: .9rem; }

.invoice-sheet__totals {
    max-width: 340px; margin-left: auto; padding-top: 1rem;
}
.invoice-sheet__totals > div {
    display: flex; justify-content: space-between; gap: 2rem;
    padding: .4rem 0; font-size: .93rem;
}
.invoice-sheet__totals > div span { color: var(--muted); }
.invoice-sheet__grand {
    border-top: 1px solid var(--line);
    margin-top: .4rem; padding-top: .7rem !important;
}
.invoice-sheet__grand strong { font-size: 1.1rem; color: var(--royal-700); }
.invoice-sheet__due {
    background: var(--sand);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem !important;
    margin-top: .5rem;
}
.invoice-sheet__due strong { font-size: 1.15rem; color: var(--gold-600); }

.invoice-sheet__notes {
    margin-top: 1.75rem; padding: 1rem 1.15rem;
    background: var(--sand); border-radius: var(--radius-sm);
    font-size: .88rem; color: var(--ink-soft);
}
.invoice-sheet__foot {
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    text-align: center; color: var(--muted); font-size: .84rem;
}

.summary-lines > div span { color: var(--muted); font-size: .9rem; }

@media print {
    .invoice-sheet { padding: 0; }
    .card { border: none !important; box-shadow: none !important; }
    .col-lg-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

@media (max-width: 575.98px) {
    .invoice-sheet { padding: 1.25rem; }
}