:root,[data-theme="dark"]{
--bg-primary:#0a0a0a;--bg-secondary:#0f0f0f;--bg-tertiary:#141414;--bg-elevated:#1a1a1a;
--bg-card:#111111;--bg-input:#181818;--bg-row:#151515;--bg-row-hover:#1c1c1c;
--bg-sidebar:#070707;--bg-sidebar-hover:rgba(255,255,255,0.03);--bg-sidebar-active:rgba(201,169,110,0.08);
--bg-overlay:rgba(0,0,0,0.6);--bg-chart:rgba(255,255,255,0.02);
--text-primary:#fff;--text-secondary:#9ca3af;--text-muted:#d1d5db;--text-inverse:#0a0a0a;
--border:rgba(255,255,255,0.06);--border-light:rgba(255,255,255,0.1);--border-active:rgba(255,255,255,0.15);
--accent-gold:#c9a96e;--accent-gold-hover:#dbbd8a;--accent-gold-dim:rgba(201,169,110,0.1);--accent-gold-glow:rgba(201,169,110,0.2);
--success:#10b981;--success-dim:rgba(16,185,129,0.12);--warning:#f59e0b;--warning-dim:rgba(245,158,11,0.12);
--danger:#ef4444;--danger-dim:rgba(239,68,68,0.12);
--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 20px rgba(0,0,0,0.3);--shadow-lg:0 10px 40px rgba(0,0,0,0.4);
--shadow-gold:0 4px 24px rgba(201,169,110,0.1);
--font-serif:'Playfair Display',Georgia,serif;--font-sans:'Inter',system-ui,-apple-system,sans-serif;
--radius:8px;--radius-lg:12px;--radius-xl:16px;--transition:all 0.25s cubic-bezier(0.4,0,0.2,1);--sidebar-width:250px;
}
[data-theme="light"]{
--bg-primary:#f8f8f8;--bg-secondary:#fff;--bg-tertiary:#f3f4f6;--bg-elevated:#fff;--bg-card:#fff;--bg-input:#f3f4f6;
--bg-row:#fafafa;--bg-row-hover:#f0f0f0;--bg-sidebar:#0a0a0a;--bg-sidebar-hover:rgba(255,255,255,0.04);
--bg-sidebar-active:rgba(201,169,110,0.1);--bg-overlay:rgba(0,0,0,0.3);--bg-chart:rgba(0,0,0,0.02);
--text-primary:#111;--text-secondary:#525252;--text-muted:#9ca3af;--text-inverse:#fff;
--border:rgba(0,0,0,0.06);--border-light:rgba(0,0,0,0.1);--border-active:rgba(0,0,0,0.15);
--accent-gold:#b8944e;--accent-gold-hover:#a07d3a;--accent-gold-dim:rgba(184,148,78,0.08);--accent-gold-glow:rgba(184,148,78,0.15);
--success:#059669;--success-dim:rgba(5,150,105,0.1);--warning:#d97706;--warning-dim:rgba(217,119,6,0.1);
--danger:#dc2626;--danger-dim:rgba(220,38,38,0.1);
--shadow-sm:0 1px 3px rgba(0,0,0,0.06);--shadow-md:0 4px 20px rgba(0,0,0,0.06);--shadow-lg:0 10px 40px rgba(0,0,0,0.08);
--shadow-gold:0 4px 24px rgba(184,148,78,0.08);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);font-family:var(--font-sans);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-active)}

/* ══ SIDEBAR ══ */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:1020;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:22px 24px 20px;border-bottom:1px solid var(--border)}
.brand-icon{color:var(--accent-gold);flex-shrink:0}
.brand-text{font-family:var(--font-serif);font-size:1.25rem;font-weight:700;font-style:italic;color:var(--text-primary);letter-spacing:0.3px}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:var(--radius);color:var(--text-secondary);text-decoration:none;font-size:0.9rem;font-weight:500;transition:var(--transition);position:relative;cursor:pointer}
.nav-item:hover{color:var(--text-primary);background:var(--bg-sidebar-hover)}
.nav-item.active{color:var(--accent-gold);background:var(--bg-sidebar-active)}
.nav-item.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--accent-gold);border-radius:0 3px 3px 0}
.nav-icon{flex-shrink:0;opacity:0.7}
.nav-item:hover .nav-icon,.nav-item.active .nav-icon{opacity:1}
.nav-text{white-space:nowrap}
.nav-badge{margin-left:auto;background:var(--accent-gold-dim);color:var(--accent-gold);font-size:0.7rem;font-weight:700;padding:2px 8px;border-radius:10px;min-width:22px;text-align:center}
.sidebar-footer{padding:16px 16px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:14px}
.theme-toggle{display:flex;align-items:center;gap:10px}
.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,0.12);border-radius:24px;transition:var(--transition)}
.toggle-slider::before{content:'☀';position:absolute;left:2px;top:2px;width:20px;height:20px;background:var(--bg-sidebar);border-radius:50%;transition:var(--transition);display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:var(--warning);box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle-switch input:checked+.toggle-slider{background:var(--accent-gold-dim)}
.toggle-switch input:checked+.toggle-slider::before{content:'☾';transform:translateX(20px);color:var(--accent-gold)}
.toggle-label{font-size:0.78rem;color:var(--text-muted);font-weight:500}
.sidebar-user{display:flex;align-items:center;justify-content:space-between}
.user-info{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-gold-dim);color:var(--accent-gold);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;border:1px solid var(--accent-gold-glow)}
.user-name{font-size:0.85rem;color:var(--text-secondary);font-weight:500}
.logout-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.logout-btn:hover{color:var(--danger);border-color:var(--danger-dim);background:var(--danger-dim)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:var(--bg-overlay);z-index:1019;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sidebar-overlay.active{display:block}

/* ══ LOGIN ══ */
.login-shell{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:40px 20px;position:relative;overflow:hidden}
.login-shell::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,var(--accent-gold-dim) 0%,transparent 60%);border-radius:50%;top:-200px;right:-200px;pointer-events:none}
.login-shell::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,var(--accent-gold-dim) 0%,transparent 60%);border-radius:50%;bottom:-100px;left:-100px;pointer-events:none}
.login-panel{width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:48px 40px;box-shadow:var(--shadow-lg);position:relative;z-index:1;animation:fadeUp 0.6s ease}
.login-brand{display:flex;justify-content:center;margin-bottom:24px;color:var(--accent-gold)}
.login-panel h1{font-family:var(--font-serif);font-size:1.75rem;font-weight:700;text-align:center;margin-bottom:8px;color:var(--text-primary)}
.login-panel p{color:var(--text-secondary);text-align:center;margin-bottom:32px;font-size:0.88rem;line-height:1.5}

/* ══ MAIN CONTENT ══ */
.main-content{margin-left:var(--sidebar-width);min-height:100vh;padding:0 0 60px;position:relative;transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1)}
.main-topbar{display:flex;align-items:center;gap:16px;padding:14px 32px;border-bottom:1px solid var(--border);background:var(--bg-secondary);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sidebar-toggle-btn{display:none;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);flex-shrink:0}
.sidebar-toggle-btn:hover{color:var(--text-primary);border-color:var(--border-active)}
.topbar-search{position:relative;flex:1;max-width:320px}
.topbar-search .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.topbar-search .form-control{padding-left:36px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius);font-size:0.82rem;height:36px;transition:var(--transition)}
.topbar-search .form-control:focus{border-color:var(--accent-gold);box-shadow:0 0 0 3px var(--accent-gold-dim);background:var(--bg-input)}
.topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.header-clock{font-size:0.8rem;color:var(--text-muted);font-weight:500;font-variant-numeric:tabular-nums}

/* ══ ADMIN VIEW ══ */
.admin-view{padding:28px 32px;animation:viewFadeIn 0.35s ease}
@keyframes viewFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:16px}
.view-header .page-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.02em}
.view-header .page-subtitle{color:var(--text-secondary);margin:4px 0 0;font-size:0.85rem}
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ══ VIEW MODE TOGGLE ══ */
.view-mode-toggle{display:flex;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.view-mode-toggle button{background:none;border:none;color:var(--text-muted);padding:7px 12px;cursor:pointer;transition:var(--transition);display:flex;align-items:center}
.view-mode-toggle button:hover{color:var(--text-secondary)}
.view-mode-toggle button.active{background:var(--accent-gold-dim);color:var(--accent-gold)}

/* ══ STATS GRID ══ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;display:flex;align-items:center;gap:16px;transition:var(--transition);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;width:140px;height:140px;background:radial-gradient(circle,var(--accent-gold-dim) 0%,transparent 70%);border-radius:50%;top:-50px;right:-50px;transition:transform 0.5s ease;pointer-events:none}
.stat-card:hover::before{transform:scale(1.4)}
.stat-card:hover{border-color:var(--accent-gold-glow);box-shadow:var(--shadow-gold);transform:translateY(-2px)}
.stat-icon{width:44px;height:44px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.stat-body{position:relative;z-index:1;min-width:0}
.stat-label{display:block;font-size:0.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.stat-value{font-size:1.5rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.03em;display:block;line-height:1.2}

/* ══ CHARTS GRID ══ */
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px}
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.chart-card-header{padding:16px 20px 0;display:flex;justify-content:space-between;align-items:center}
.chart-card-header h3{font-size:0.9rem;font-weight:600;color:var(--text-secondary);margin:0}
.chart-body{padding:12px 16px 16px;position:relative}
.chart-body canvas{width:100%!important;max-height:240px}

/* ══ DASHBOARD BOTTOM ══ */
.dash-bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.dash-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.dash-card-header{padding:16px 20px;border-bottom:1px solid var(--border)}
.dash-card-header h3{font-size:0.9rem;font-weight:600;color:var(--text-secondary);margin:0}
.activity-feed{padding:8px 16px}
.activity-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.82rem}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.activity-dot.created{background:var(--success)}
.activity-dot.updated{background:var(--accent-gold)}
.activity-dot.deleted{background:var(--danger)}
.activity-text{flex:1;color:var(--text-secondary)}
.activity-text strong{color:var(--text-primary);font-weight:600}
.activity-time{color:var(--text-muted);font-size:0.75rem;white-space:nowrap}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.quick-action-btn{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;transition:var(--transition);font-size:0.82rem;font-weight:500}
.quick-action-btn:hover{background:var(--bg-row-hover);border-color:var(--q-color,var(--accent-gold));color:var(--text-primary);transform:translateY(-1px)}
.quick-action-btn svg{color:var(--q-color,var(--accent-gold))}

/* ══ FILTERS BAR ══ */
.filters-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.filter-group{min-width:140px;flex:1;max-width:200px}
.filters-bar .form-control,.filters-bar .form-select{background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius);padding:9px 14px;font-size:0.82rem;transition:var(--transition)}
.filters-bar .form-control:focus,.filters-bar .form-select:focus{border-color:var(--accent-gold);box-shadow:0 0 0 3px var(--accent-gold-dim);background:var(--bg-input)}
.filters-bar .form-select option{background:var(--bg-tertiary);color:var(--text-primary)}
.filters-bar .btn-outline-secondary{padding:9px 16px;font-size:0.8rem;white-space:nowrap;border-color:var(--border);color:var(--text-muted)}
.filters-bar .btn-outline-secondary:hover{border-color:var(--border-active);color:var(--text-secondary);background:var(--bg-tertiary)}

/* ══ TABLE TOOLBAR ══ */
.table-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.result-count{font-size:0.82rem;color:var(--text-muted);font-weight:500}
.pagination-controls{display:flex;align-items:center;gap:6px}
.btn-page{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}
.btn-page:hover:not(:disabled){border-color:var(--accent-gold-glow);color:var(--accent-gold);background:var(--accent-gold-dim)}
.btn-page:disabled{opacity:0.4;cursor:default}
.page-info{font-size:0.78rem;color:var(--text-muted);padding:0 6px;font-weight:500;min-width:70px;text-align:center}

/* ══ TABLE ══ */
.table-responsive{margin:0 -4px;padding:0 4px}
.table{border-collapse:separate;border-spacing:0 6px;color:var(--text-secondary)}
.table thead th{border:none;font-size:0.68rem;color:var(--text-secondary);text-transform:uppercase;font-weight:700;letter-spacing:0.5px;padding:8px 16px;background:transparent;cursor:pointer;user-select:none;transition:color 0.2s}
.table thead th:hover{color:var(--text-secondary)}
.table thead th .sort-icon{margin-left:4px;opacity:0.4}
.table thead th.sort-asc .sort-icon,.table thead th.sort-desc .sort-icon{opacity:1;color:var(--accent-gold)}
.table tbody tr{background:var(--bg-row);border-radius:var(--radius);transition:var(--transition)}
.table tbody tr:hover{background:var(--bg-row-hover);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.table td{padding:12px 16px;vertical-align:middle;border:none;font-size:0.85rem}
.table tbody tr td:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}
.table tbody tr td:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.table strong{color:var(--text-primary);font-weight:600}
.table .text-muted{color:var(--text-muted)!important;font-size:0.8rem}
.action-buttons{display:flex;gap:4px;justify-content:flex-end}
.action-buttons .btn{padding:4px 10px;font-size:0.72rem;font-weight:600}

/* ══ ROOM CARD GRID ══ */
.room-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.premium-room-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition)}
.premium-room-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-gold-glow)}
.premium-room-card .card-img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden}
.premium-room-card .card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.premium-room-card:hover .card-img-wrap img{transform:scale(1.06)}
.premium-room-card .card-img-wrap .card-badge{position:absolute;top:12px;right:12px;z-index:2}
.premium-room-card .card-body{padding:18px}
.premium-room-card .card-body h3{font-family:var(--font-serif);font-size:1.05rem;color:var(--text-primary);margin-bottom:4px}
.premium-room-card .card-meta{color:var(--text-muted);font-size:0.8rem;margin-bottom:10px}
.premium-room-card .card-stats{display:flex;gap:16px;margin-bottom:12px}
.premium-room-card .card-stat{text-align:center}
.premium-room-card .card-stat strong{display:block;font-size:1.1rem;color:var(--text-primary)}
.premium-room-card .card-stat span{font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.3px}
.premium-room-card .card-amenities{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.premium-room-card .card-actions{display:flex;gap:6px}
.premium-room-card .card-actions .btn{flex:1;font-size:0.78rem;padding:7px}

/* ══ PAYMENT SUMMARY ══ */
.payment-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 22px;text-align:center;transition:var(--transition)}
.summary-card:hover{border-color:var(--accent-gold-glow);transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.summary-label{display:block;font-size:0.72rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.summary-value{font-size:1.3rem;font-weight:800;display:block;line-height:1.2}

/* ══ BADGES ══ */
.badge{border-radius:4px;padding:4px 10px;font-weight:600;font-size:0.72rem;letter-spacing:0.2px}
.badge-soft-success{background:var(--success-dim);color:var(--success)}
.badge-soft-warning{background:var(--warning-dim);color:var(--warning)}
.badge-soft-danger{background:var(--danger-dim);color:var(--danger)}
.badge-soft-secondary{background:rgba(255,255,255,0.05);color:var(--text-muted)}
.badge-completed{box-shadow:0 0 10px var(--success-dim);border:1px solid var(--success-dim)}

/* ══ BUTTONS ══ */
.btn{border-radius:var(--radius);padding:9px 20px;font-weight:600;font-size:0.82rem;transition:var(--transition);border:1px solid transparent;display:inline-flex;align-items:center;gap:7px}
.btn-primary{background:var(--accent-gold);border:none;color:#1a1a1a;font-weight:700}
.btn-primary:hover{background:var(--accent-gold-hover);transform:translateY(-1px);box-shadow:var(--shadow-gold);color:#1a1a1a}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-muted)}
.btn-secondary:hover{border-color:var(--border-active);color:var(--text-secondary);background:var(--bg-tertiary)}
.btn-outline-light{border-color:var(--border-light);color:var(--text-secondary)}
.btn-outline-light:hover{border-color:var(--accent-gold-glow);color:var(--accent-gold)}
.btn-outline-primary{border-color:var(--accent-gold-glow);color:var(--accent-gold)}
.btn-outline-primary:hover{background:var(--accent-gold-dim);border-color:var(--accent-gold)}
.btn-outline-secondary{border-color:var(--border);color:var(--text-muted)}
.btn-outline-secondary:hover{border-color:var(--border-active);color:var(--text-secondary);background:var(--bg-tertiary)}
.btn-outline-danger{border-color:var(--danger-dim);color:var(--danger)}
.btn-outline-danger:hover{background:var(--danger-dim);border-color:var(--danger)}
.btn-danger{background:var(--danger);border:none;color:#fff}
.btn-danger:hover{background:#dc2626;transform:translateY(-1px)}
.btn-sm{padding:5px 12px;font-size:0.75rem}

/* ══ FORMS ══ */
.form-label{font-weight:600;color:var(--text-secondary);font-size:0.76rem;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.3px}
.form-control,.form-select{background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius);padding:10px 14px;font-size:0.85rem;transition:var(--transition)}
.form-control:focus,.form-select:focus{border-color:var(--accent-gold);box-shadow:0 0 0 3px var(--accent-gold-dim);background:var(--bg-input);color:var(--text-primary)}
.form-control::placeholder{color:var(--text-muted)}
.form-select option{background:var(--bg-tertiary);color:var(--text-primary)}
.form-text{color:var(--text-muted);font-size:0.76rem;margin-top:5px}
.invalid-feedback{font-size:0.74rem;color:var(--danger)}
.form-control.is-valid,.form-select.is-valid{border-color:var(--success);box-shadow:0 0 0 3px var(--success-dim)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-dim)}

/* ══ MODALS ══ */
.modal-content{border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-lg);color:var(--text-primary)}
.modal-header{padding:18px 24px;border-bottom:1px solid var(--border);background:transparent}
.modal-title{font-family:var(--font-serif);font-weight:700;color:var(--accent-gold)}
.modal-body{padding:24px;color:var(--text-secondary)}
.modal-footer{border-top:1px solid var(--border);padding:14px 24px;gap:8px}
.modal-header .btn-close{filter:brightness(0)invert(0.6);opacity:0.6;transition:var(--transition)}
[data-theme="dark"] .modal-header .btn-close{filter:brightness(0)invert(1);opacity:0.5}
.modal-body .row.border-bottom{border-color:var(--border)!important;padding:10px 0}
.modal-body .row.border-bottom strong{color:var(--text-muted);font-size:0.78rem}
.modal-body .row.border-bottom span{color:var(--text-primary)}
.modal-backdrop.show{opacity:0.6}
[data-theme="dark"] .modal-backdrop.show{opacity:0.7}

/* ══ IMAGE PICKER ══ */
.image-picker{width:100%;padding:26px;border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-input);color:var(--text-muted);font-size:0.85rem;cursor:pointer;text-align:center;transition:var(--transition)}
.image-picker:hover{border-color:var(--accent-gold-glow);background:var(--accent-gold-dim);color:var(--accent-gold)}
.image-picker.is-valid{border-color:var(--success);background:var(--success-dim);color:var(--success)}
.image-picker.is-invalid{border-color:var(--danger);background:var(--danger-dim);color:var(--danger)}
.image-preview-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.image-preview-list img{width:80px;height:60px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}
.image-empty-preview{color:var(--text-muted);font-size:0.8rem;padding:8px 0}
.image-preview-item{position:relative}
.image-remove-btn{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--danger);color:#fff;border:2px solid var(--bg-card);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:var(--transition);line-height:1}
.image-preview-item:hover .image-remove-btn{opacity:1}
.room-image-url-row{display:flex;gap:8px}

/* ══ ROOM MAP ══ */
.room-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:8px 0}
.room-map-tile{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);padding:18px 14px;text-align:center;transition:var(--transition);cursor:pointer;position:relative;overflow:hidden;border-left:3px solid transparent}
.room-map-tile::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--accent-gold-dim),transparent);opacity:0;transition:opacity 0.3s}
.room-map-tile:hover{transform:translateY(-3px);border-color:var(--accent-gold);box-shadow:var(--shadow-gold)}
.room-map-tile:hover::before{opacity:1}
.room-map-tile.map-available{border-left-color:var(--success)}
.room-map-tile.map-full{border-left-color:var(--danger);opacity:0.7}
.room-map-tile.map-maintenance{border-left-color:var(--warning);opacity:0.6}
.room-map-tile strong{font-size:1.1rem;font-weight:700;display:block;margin-bottom:3px;color:var(--text-primary);position:relative;z-index:1}
.room-map-tile span{font-size:0.76rem;color:var(--text-muted);font-weight:500;position:relative;z-index:1}
.room-map-tile:hover strong,.room-map-tile:hover span{color:var(--text-primary)}

/* ══ QUICK HELP ══ */
#quickHelpPanel{position:fixed;bottom:20px;right:20px;width:320px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1050;display:none;overflow:hidden}
.help-header{padding:14px 18px;font-weight:700;font-family:var(--font-serif);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);color:var(--accent-gold)}
.help-close{cursor:pointer;background:var(--accent-gold-dim);border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center;transition:var(--transition);color:var(--accent-gold);font-size:16px}
.help-close:hover{background:var(--accent-gold-glow)}
.help-body{padding:18px;font-size:0.82rem;color:var(--text-secondary);line-height:1.6}
.help-body strong{color:var(--accent-gold)}
.help-body li{margin-bottom:6px}
.help-body hr{border-color:var(--border);margin:12px 0;opacity:1}
#quickHelpBtn{position:fixed;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:var(--accent-gold);color:#1a1a1a;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 20px var(--accent-gold-glow);cursor:pointer;z-index:1040;transition:var(--transition);border:none}
#quickHelpBtn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(201,169,110,0.35)}
#quickHelpBtn svg{color:#1a1a1a}

/* ══ TOAST ══ */
.toast-container{z-index:1060}
.toast{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);color:var(--text-primary);font-size:0.82rem;min-width:260px}
.toast .toast-body{padding:10px 14px}
.toast .btn-close{filter:brightness(0)invert(0.6)}
[data-theme="dark"] .toast .btn-close{filter:brightness(0)invert(1)}
.text-bg-success{border-color:var(--success-dim)!important}
[data-theme="dark"] .text-bg-success{background:var(--success-dim)!important;color:var(--success)!important}
.text-bg-warning{border-color:var(--warning-dim)!important}
[data-theme="dark"] .text-bg-warning{background:var(--warning-dim)!important;color:var(--warning)!important}
.text-bg-danger{border-color:var(--danger-dim)!important}
[data-theme="dark"] .text-bg-danger{background:var(--danger-dim)!important;color:var(--danger)!important}

/* ══ LOADING & EMPTY ══ */
.loading-state{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:0.85rem}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:0.85rem}

/* ══ SKELETON ══ */
.skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background:var(--bg-input);border-radius:4px;width:100%}
.skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,0.03)20%,rgba(255,255,255,0.06)60%,transparent);animation:shimmer 1.8s infinite;content:''}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ══ RESPONSIVE ══ */
@media(max-width:1200px){
.stats-grid{grid-template-columns:repeat(4,1fr)}
.charts-grid{grid-template-columns:1fr 1fr}
.payment-summary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:992px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.sidebar-overlay.active{display:block}
.sidebar-toggle-btn{display:flex}
.main-content{margin-left:0;padding:0 0 40px}
.main-topbar{padding:12px 16px}
.admin-view{padding:20px 16px}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.charts-grid{grid-template-columns:1fr}
.dash-bottom{grid-template-columns:1fr}
.room-card-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media(max-width:768px){
.view-header{flex-direction:column;align-items:flex-start}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.stat-value{font-size:1.2rem}
.payment-summary{grid-template-columns:repeat(2,1fr)}
.filters-bar .filter-group{min-width:100px;max-width:100%}
.header-actions{width:100%}
.view-mode-toggle{margin-left:auto}
.room-card-grid{grid-template-columns:1fr}
#quickHelpBtn{bottom:12px;right:12px;width:40px;height:40px}
#quickHelpPanel{bottom:12px;right:12px;width:280px}
}
@media(max-width:576px){
.main-topbar{padding:10px 12px}
.admin-view{padding:16px 12px}
.stats-grid{grid-template-columns:1fr;gap:10px}
.stats-grid .stat-card{padding:14px 16px}
.payment-summary{grid-template-columns:1fr;gap:10px}
.room-map{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.action-buttons{flex-direction:column;gap:3px}
.action-buttons .btn{width:100%;text-align:center}
}