/* ============================================================================
   Optimus Hôtelière — Thème PREMIUM « Luxe Hôtelier »
   Palette : midnight navy + or champagne + ivoire. Typo serif élégante.
   Effets : glassmorphisme, ombres raffinées, transitions, animations douces.
   S'appuie sur Bootstrap 5 (surcharge des variables + couche premium).
   ============================================================================ */

/* ---- Typographie (CDN + repli système élégant) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Palette luxe */
    --lux-navy-900: #0b1220;
    --lux-navy-800: #101a2e;
    --lux-navy-700: #16223b;
    --lux-gold:      #c2a15a;   /* or champagne */
    --lux-gold-2:    #d9bd7e;
    --lux-gold-soft: rgba(194,161,90,.14);
    --lux-ivory:     #f6f4ee;
    --lux-cream:     #fbfaf6;
    --lux-ink:       #1f2733;

    /* Surcharges Bootstrap */
    --bs-body-bg: var(--lux-ivory);
    --bs-body-color: var(--lux-ink);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-primary: #b5894e;
    --bs-primary-rgb: 181, 137, 78;
    --bs-link-color: #9b7635;
    --bs-link-hover-color: #7d5d24;
    --bs-border-color: #e6e1d6;
    --bs-border-color-translucent: rgba(31,39,51,.08);

    --app-sidebar-width: 252px;
    --app-topbar-h: 62px;
    --lux-shadow: 0 1px 2px rgba(16,26,46,.04), 0 8px 24px rgba(16,26,46,.06);
    --lux-shadow-lg: 0 10px 40px rgba(16,26,46,.12);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0c1424;
    --bs-body-color: #d7dde6;
    --bs-border-color: #243049;
    --bs-border-color-translucent: rgba(255,255,255,.08);
    --lux-ivory: #0c1424;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: #9aa6b8;
    color-scheme: dark;
}

/* ---- Base ---- */
* { scrollbar-width: thin; scrollbar-color: var(--lux-gold) transparent; }
body { font-family: var(--bs-body-font-family); background: var(--bs-body-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .app-sidebar__brand-text, .display-1, .display-4, .display-5 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    letter-spacing: .2px;
}
::selection { background: var(--lux-gold-soft); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(181,137,78,.55); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--lux-gold); }

a { transition: color .15s ease; }

/* ---- Boutons premium (or) ---- */
.btn { border-radius: .55rem; font-weight: 500; letter-spacing: .15px; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    --bs-btn-bg: #b5894e; --bs-btn-border-color: #b5894e;
    --bs-btn-hover-bg: #a2783f; --bs-btn-hover-border-color: #a2783f;
    --bs-btn-active-bg: #8f6a36; --bs-btn-active-border-color: #8f6a36;
    --bs-btn-disabled-bg: #c8b489; --bs-btn-disabled-border-color: #c8b489;
    background-image: linear-gradient(180deg, #c2975a, #b5894e);
    box-shadow: 0 4px 14px rgba(181,137,78,.28);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(181,137,78,.38); }
.btn-success { --bs-btn-bg:#2f9e6f; --bs-btn-border-color:#2f9e6f; --bs-btn-hover-bg:#288a61; --bs-btn-hover-border-color:#288a61; }
.btn-outline-primary { --bs-btn-color:#9b7635; --bs-btn-border-color:#cdb588; --bs-btn-hover-bg:#b5894e; --bs-btn-hover-border-color:#b5894e; --bs-btn-active-bg:#a2783f; }
.btn-outline-secondary { --bs-btn-color:#5b6675; --bs-btn-border-color:#d6d1c5; --bs-btn-hover-bg:#1f2733; --bs-btn-hover-border-color:#1f2733; }
.text-primary { color: #9b7635 !important; }
.bg-primary { background-color: #b5894e !important; }
.link-primary, a.text-decoration-none { color: #9b7635; }

/* ---- Focus raffiné ---- */
.form-control, .form-select { border-radius: .55rem; border-color: var(--bs-border-color); transition: border-color .15s, box-shadow .15s; }
.form-control:focus, .form-select:focus { border-color: var(--lux-gold); box-shadow: 0 0 0 .2rem rgba(194,161,90,.18); }
.input-group-text { background: transparent; border-color: var(--bs-border-color); }

/* ---- Cartes premium ---- */
.card { border: 1px solid var(--bs-border-color-translucent); border-radius: .9rem; box-shadow: var(--lux-shadow); background: var(--lux-cream); transition: transform .2s ease, box-shadow .25s ease; }
[data-bs-theme="dark"] .card { background: #111c30; }
.card.shadow-sm { box-shadow: var(--lux-shadow) !important; }
.card-header { border-bottom: 1px solid var(--bs-border-color-translucent); font-weight: 600; letter-spacing: .2px; background: transparent; }
.card:hover { box-shadow: var(--lux-shadow-lg); }

/* ---- Badges ---- */
.badge { font-weight: 600; letter-spacing: .3px; border-radius: .45rem; padding: .4em .6em; }

/* ---- Tableaux ---- */
.table { --bs-table-hover-bg: rgba(194,161,90,.07); }
.table > thead { --bs-table-bg: transparent; }
.table thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .6px; color: var(--bs-secondary-color); border-bottom: 2px solid var(--bs-border-color); }
.table-light { --bs-table-bg: rgba(31,39,51,.025); }

/* ---- Onglets ---- */
.nav-tabs { border-bottom: 1px solid var(--bs-border-color); }
.nav-tabs .nav-link { color: var(--bs-secondary-color); border: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link.active { color: #9b7635; background: transparent; border-bottom-color: var(--lux-gold); }

/* ============================================================================
   Page d'authentification — luxe
   ============================================================================ */
.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(194,161,90,.18), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(194,161,90,.10), transparent 55%),
        linear-gradient(150deg, #0b1220 0%, #16223b 55%, #0b1220 100%);
    position: relative;
}
.auth-page::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 22px 22px; pointer-events: none;
}
.auth-page .display-4 { color: var(--lux-gold-2); }
.auth-page h1 { color: #fff; }
.auth-page .text-muted { color: rgba(255,255,255,.6) !important; }
.auth-page .card { backdrop-filter: blur(14px); background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.4); box-shadow: 0 24px 70px rgba(0,0,0,.45); border-radius: 1.1rem; }
.auth-page a { color: var(--lux-gold-2); }

/* ============================================================================
   Coque applicative
   ============================================================================ */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--app-sidebar-width); flex: 0 0 var(--app-sidebar-width);
    background: linear-gradient(180deg, var(--lux-navy-900), var(--lux-navy-800) 60%, var(--lux-navy-900));
    color: #aeb8c7; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    border-right: 1px solid rgba(194,161,90,.12);
    transition: margin-left .25s ease;
}
.app-sidebar__brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.15rem 1.2rem; font-size: 1.15rem; font-weight: 600; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.app-sidebar__brand .bi { font-size: 1.5rem; color: var(--lux-gold); filter: drop-shadow(0 0 10px rgba(194,161,90,.4)); }
.app-sidebar__nav { flex: 1; overflow-y: auto; padding: .85rem .6rem; }
.app-sidebar__link {
    display: flex; align-items: center; gap: .8rem; margin: .12rem 0;
    padding: .62rem .85rem; color: #aeb8c7; text-decoration: none;
    font-size: .92rem; font-weight: 500; border-radius: .6rem;
    position: relative; transition: background .18s, color .18s, transform .12s;
}
.app-sidebar__link .bi { font-size: 1.12rem; width: 1.3rem; text-align: center; color: #8794a8; transition: color .18s; }
.app-sidebar__link:hover { background: rgba(255,255,255,.05); color: #fff; }
.app-sidebar__link:hover .bi { color: var(--lux-gold-2); }
.app-sidebar__link.active { background: linear-gradient(90deg, var(--lux-gold-soft), transparent); color: #fff; }
.app-sidebar__link.active .bi { color: var(--lux-gold); }
.app-sidebar__link.active::before { content: ""; position: absolute; left: -.6rem; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--lux-gold); box-shadow: 0 0 10px rgba(194,161,90,.6); }
.app-sidebar__footer { padding: .85rem 1.2rem; color: rgba(255,255,255,.35); border-top: 1px solid rgba(255,255,255,.06); }

/* ---- Zone principale ---- */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    height: var(--app-topbar-h); display: flex; align-items: center; gap: .75rem;
    padding: 0 1.25rem; position: sticky; top: 0; z-index: 1020;
    background: rgba(251,250,246,.78); backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .app-topbar { background: rgba(12,20,36,.78); }
.app-topbar__search { flex: 1; max-width: 440px; }
.app-topbar__search .form-control, .app-topbar__search .input-group-text { background: rgba(31,39,51,.04); border-color: transparent; border-radius: 999px; }
.app-topbar__search .input-group-text { border-radius: 999px 0 0 999px; }
.app-topbar__search .form-control { border-radius: 0 999px 999px 0; }
.app-topbar__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.app-topbar .btn-light { background: transparent; border: 1px solid var(--bs-border-color); border-radius: 999px; }
.app-topbar .btn-light:hover { background: var(--lux-gold-soft); border-color: var(--lux-gold); }
.app-content { padding: 1.75rem; flex: 1; animation: lux-fade-up .4s ease both; }

/* ---- Titres de page ---- */
.app-content h1.h3, .app-content h1.h4 { color: var(--bs-emphasis-color); }

/* ---- Cartes KPI premium ---- */
.kpi-card { position: relative; overflow: hidden; border-radius: 1rem; }
.kpi-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--lux-gold), var(--lux-gold-2)); opacity: .9; }
.kpi-card:hover { transform: translateY(-3px); }
.kpi-card .fs-4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.75rem !important; color: var(--bs-emphasis-color); }
.kpi-card__icon { width: 54px; height: 54px; border-radius: .85rem; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.kpi-card .text-uppercase { letter-spacing: .8px; font-size: .68rem !important; }

/* ---- List groups ---- */
.list-group-item { background: transparent; border-color: var(--bs-border-color-translucent); }
.list-group-item-action:hover { background: var(--lux-gold-soft); }

/* ---- Alerts ---- */
.alert { border: 0; border-radius: .75rem; border-left: 4px solid; }
.alert-success { border-left-color: #2f9e6f; }
.alert-danger { border-left-color: #d9534f; }
.alert-warning { border-left-color: var(--lux-gold); }
.alert-info { border-left-color: #3a7bd5; }

/* ---- Animations ---- */
@keyframes lux-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.row.g-3 > [class*="col"] { animation: lux-fade-up .45s ease both; }
.row.g-3 > [class*="col"]:nth-child(2){animation-delay:.04s}
.row.g-3 > [class*="col"]:nth-child(3){animation-delay:.08s}
.row.g-3 > [class*="col"]:nth-child(4){animation-delay:.12s}
.row.g-3 > [class*="col"]:nth-child(5){animation-delay:.16s}
.row.g-3 > [class*="col"]:nth-child(6){animation-delay:.2s}
@media (prefers-reduced-motion: reduce) { *, .app-content, .row.g-3 > [class*="col"] { animation: none !important; transition: none !important; } }

/* ---- Badges de statut chambre ---- */
.statut-libre,.badge.statut-libre{background:#2f9e6f!important;color:#fff}
.statut-occupee,.badge.statut-occupee{background:#c0564f!important;color:#fff}
.statut-propre,.badge.statut-propre{background:#3a7bd5!important;color:#fff}
.statut-sale,.badge.statut-sale{background:#d39a3a!important;color:#1f2733}
.statut-maintenance,.badge.statut-maintenance{background:#8a63c9!important;color:#fff}
.statut-hs,.badge.statut-hs{background:#6b7280!important;color:#fff}

/* ============================================================================
   Sidebar responsive
   ============================================================================ */
.app-sidebar.collapsed { margin-left: calc(-1 * var(--app-sidebar-width)); }
@media (max-width: 992px) {
    .app-sidebar { position: fixed; z-index: 1040; margin-left: calc(-1 * var(--app-sidebar-width)); box-shadow: 8px 0 40px rgba(0,0,0,.4); }
    .app-sidebar.show { margin-left: 0; }
    .app-backdrop { position: fixed; inset: 0; background: rgba(11,18,32,.55); backdrop-filter: blur(2px); z-index: 1035; }
    .app-content { padding: 1.1rem; }
}

/* ============================================================================
   Visio-Planning
   ============================================================================ */
.planning-wrapper { overflow-x: auto; background: var(--lux-cream); border: 1px solid var(--bs-border-color-translucent); border-radius: .9rem; box-shadow: var(--lux-shadow); }
.planning-head { display: flex; position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg,#16223b,#101a2e); color:#e7ecf3; border-bottom: 2px solid rgba(194,161,90,.3); }
.planning-corner { width: var(--label-w); flex: 0 0 var(--label-w); padding: .5rem .7rem; font-size: .78rem; font-weight: 600; position: sticky; left: 0; z-index: 6; background: #16223b; color:#fff; border-right: 2px solid rgba(194,161,90,.25); display: flex; align-items: center; }
.planning-day { width: var(--day-w); flex: 0 0 var(--day-w); text-align: center; padding: .3rem 0; font-size: .72rem; border-right: 1px solid rgba(255,255,255,.06); }
.planning-day.weekend { background: rgba(194,161,90,.12); }
.planning-day.today { background: rgba(194,161,90,.28); font-weight: 700; color:#fff; }
.planning-day__dow { text-transform: uppercase; color: rgba(255,255,255,.55); letter-spacing: .5px; }
.planning-row { display: flex; border-bottom: 1px solid var(--bs-border-color-translucent); }
.planning-row:hover .planning-label { background: var(--lux-gold-soft); }
.planning-label { width: var(--label-w); flex: 0 0 var(--label-w); position: sticky; left: 0; z-index: 4; background: var(--lux-cream); border-right: 2px solid var(--bs-border-color); padding: 0 .6rem; display: flex; align-items: center; gap: .45rem; font-size: .84rem; transition: background .15s; }
.planning-statut { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; flex: 0 0 auto; padding: 0; }
.planning-track { position: relative; display: flex; height: 44px; }
.planning-cell { width: var(--day-w); flex: 0 0 var(--day-w); border-right: 1px solid var(--bs-border-color-translucent); }
.planning-cell.weekend { background: rgba(194,161,90,.05); }
.planning-cell.today { background: rgba(194,161,90,.09); }
.planning-track.drop-hover { outline: 2px dashed var(--lux-gold); outline-offset: -2px; background: var(--lux-gold-soft); }
.planning-bar { position: absolute; top: 6px; height: 32px; border-radius: 7px; color: #fff; cursor: grab; display: flex; align-items: center; padding: 0 .5rem; font-size: .77rem; font-weight: 500; box-shadow: 0 2px 8px rgba(16,26,46,.28); overflow: hidden; white-space: nowrap; transition: transform .12s, box-shadow .2s, filter .2s; }
.planning-bar::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%); pointer-events:none; }
.planning-bar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,26,46,.4); filter: brightness(1.05); z-index: 3; }
.planning-bar:active { cursor: grabbing; }
.planning-bar__txt { display: flex; align-items: center; gap: .3rem; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.planning-bar__link { position: absolute; inset: 0; }
.planning-pill { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--lux-gold); color: var(--lux-ink); border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; cursor: grab; box-shadow: var(--lux-shadow); transition: transform .12s, box-shadow .2s; }
.planning-pill:hover { transform: translateY(-1px); box-shadow: var(--lux-shadow-lg); }
.planning-pill .bi-grip-vertical { color: var(--lux-gold); }
.planning-legend { display: inline-block; width: 13px; height: 13px; border-radius: 4px; vertical-align: middle; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.planning-menu { position: absolute; z-index: 1090; background: var(--lux-cream); border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: var(--lux-shadow-lg); padding: .35rem 0; min-width: 210px; }
.planning-menu .dropdown-item { cursor: pointer; padding: .5rem 1rem; }
.planning-menu .dropdown-item:hover { background: var(--lux-gold-soft); }

/* ---- Impression ---- */
@media print {
    .app-sidebar, .app-topbar, .btn, .no-print { display: none !important; }
    .app-content { padding: 0; animation: none; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}