/* ==========================================
   AVASA HOTEL - EXECUTIVE DASHBOARD THEME
========================================== */

:root{
    --bg:#0a0e1f;
    --surface:#101631;
    --surface-2:#172041;
    --border:#22305c;

    --fg:#e6ecff;
    --muted:#8a98c8;

    --primary:#6366f1;
    --gold:#d4a84c;

    --success:#22c55e;
    --warn:#f59e0b;
    --danger:#ef4444;
    --info:#38bdf8;
}

/* ==========================================
   GLOBAL
========================================== */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--fg);
    font-family:Inter,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
}

.font-display{
    font-family:'Space Grotesk',sans-serif;
}

a{
    text-decoration:none;
    color:inherit;
}

.tabular{
    font-variant-numeric:tabular-nums;
}

.muted{
    color:var(--muted);
    font-size:12px;
}

/* ==========================================
   CARDS
========================================== */

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px;
}

.card-2{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
}

.glow{
    box-shadow:0 8px 40px rgba(99,102,241,.25);
}

/* ==========================================
   BUTTONS
========================================== */

.btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--fg);
    cursor:pointer;
}

.btn:hover{
    border-color:var(--primary);
}

.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

/* ==========================================
   INPUTS
========================================== */

.ip{
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#0d1330;
    color:var(--fg);
}

.ip:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(99,102,241,.25);
}

.label{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
}

/* ==========================================
   TABLES
========================================== */

table{
    width:100%;
    border-collapse:collapse;
}

th{
    text-align:left;
    padding:12px 14px;
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

td{
    padding:12px 14px;
    border-top:1px solid var(--border);
}

tr:hover td{
    background:rgba(23,32,65,.35);
}

/* ==========================================
   BADGES
========================================== */

.badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
}

.badge-plat{
    background:rgba(212,168,76,.15);
    color:var(--gold);
}

.badge-gold{
    background:rgba(245,158,11,.15);
    color:#facc15;
}

.badge-silv{
    background:rgba(56,189,248,.15);
    color:var(--info);
}

.badge-info{
    background:rgba(56,189,248,.15);
    color:var(--info);
}

.badge-warn{
    background:rgba(245,158,11,.15);
    color:var(--warn);
}

.badge-crit{
    background:rgba(239,68,68,.15);
    color:var(--danger);
}

.badge-ok{
    background:rgba(34,197,94,.15);
    color:var(--success);
}

/* ==========================================
   GRID
========================================== */

.grid{
    display:grid;
    gap:14px;
}

/* ==========================================
   SIDEBAR
========================================== */

.layout{
    display:grid;
    grid-template-columns:240px 1fr;
    min-height:100vh;
}

.sidebar{
    background:#0c1228;
    border-right:1px solid var(--border);
    padding:20px;
}

.sidebar a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    color:var(--muted);
}

.sidebar a:hover,
.sidebar a.active{
    background:var(--surface-2);
    color:var(--fg);
}

.main{
    padding:28px;
}

/* ==========================================
   TV DASHBOARD
========================================== */

.tv{
    width:100%;
    max-width:100vw;
    min-height:100vh;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.tv-hdr{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.live-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 12px var(--success);
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.3}
}

/* ==========================================
   KPI CARDS
========================================== */

.kpi{
    background:linear-gradient(
        135deg,
        var(--surface),
        var(--surface-2)
    );
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
}

.kpi .lbl{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--muted);
}

.kpi .v{
    font-family:'Space Grotesk',sans-serif;
    font-size:26px;
    font-weight:700;
    margin-top:6px;
}

.kpi .d{
    margin-top:6px;
    font-size:12px;
}

.up{
    color:var(--success);
}

.down{
    color:var(--danger);
}

/* KPI ROW */

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:12px;
}

/* ==========================================
   SLIDES
========================================== */

.slide{
    display:none;
    animation:fade .5s ease;
}

.slide.active{
    display:block;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.dots{
    display:flex;
    justify-content:center;
    gap:8px;
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--border);
    cursor:pointer;
}

.dot.active{
    width:24px;
    border-radius:8px;
    background:var(--primary);
}

/* ==========================================
   CHARTS
========================================== */

#cBudget{
    max-height:320px !important;
}

#cTrend{
    max-height:420px !important;
}

#cOcc{
    max-height:300px !important;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1600px){

    .kpi-grid{
        grid-template-columns:repeat(4,1fr);
    }
}

@media (max-width:1000px){

    .kpi-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .tv-hdr{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
}

@media (max-width:768px){

    .layout{
        grid-template-columns:1fr;
    }

    .sidebar{
        display:none;
    }

    .kpi-grid{
        grid-template-columns:1fr;
    }
	

}
.executive-main{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:16px;
}

.segment{
    margin-bottom:14px;
}

.segment-head{
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
}

.segment-bar{
    height:8px;
    background:#1c264d;
    border-radius:999px;
    overflow:hidden;
}

.segment-fill{
    height:100%;
    background:var(--primary);
}

@media(max-width:1400px){

    .executive-main{
        grid-template-columns:1fr;
    }
}