* {
    box-sizing: border-box;
}

html {
    background:#020617;
    height:100%;
    overflow-x:hidden;
    /* Prevent overscroll bounce on mobile */
    overscroll-behavior:none;
    -webkit-overflow-scrolling:touch;
}

:root {
    --bg:#010416;
    --bg-alt:#050b1f;
    --glass:rgba(15,23,42,0.8);
    --border:rgba(255,255,255,0.08);
    --text:#f8fafc;
    --muted:#94a3b8;
    --accent:#38bdf8;
    --accent-2:#a78bfa;
    --success:#34d399;
    --danger:#fb7185;
    --shadow:0 25px 60px rgba(2,6,23,0.45);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

body.surface {
    margin:0;
    min-height:100vh;
    background:radial-gradient(circle at top,#132042,#050b1f 50%,#020617 100%);
    background-color:#020617;
    background-attachment:fixed;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    /* Prevent overscroll bounce on mobile */
    overscroll-behavior:none;
    position:relative;
}

.hidden { display:none !important; }

.view {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
}

.view--centered { background:linear-gradient(135deg,#030616 0%,#040a1d 60%); }

.panel {
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:24px;
    padding:24px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
}

.glass { background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(18px); }

.login-card { max-width:420px; width:100%; text-align:center; }
.login-card h1,h2 { margin:8px 0 16px; }
.login-widget { margin:24px 0; }
.eyebrow { text-transform:uppercase; letter-spacing:0.2em; font-size:11px; color:var(--muted); margin:0; }
.muted { color:var(--muted); margin:0; }
.hint { color:var(--muted); font-size:13px; }

.tenant-grid { display:grid; gap:12px; }
.tenant-card {
    border:1px solid transparent;
    background:rgba(255,255,255,0.05);
    border-radius:16px;
    padding:14px 18px;
    color:var(--text);
    font-size:15px;
    cursor:pointer;
    transition:all .2s ease;
}
.tenant-card:hover { border-color:var(--accent); transform:translateY(-2px); }

.dashboard-shell {
    min-height:100vh;
    padding:32px clamp(16px,4vw,56px);
}

.app-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px clamp(18px,3vw,32px);
    border-radius:28px;
    margin-bottom:24px;
}

.brand { display:flex; gap:16px; align-items:center; }
.brand-mark {
    width:48px; height:48px;
    border-radius:16px;
    background:linear-gradient(135deg,#38bdf8,#818cf8);
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
}
.brand h1 { margin:4px 0 0; font-size:28px; }

.header-controls { display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; justify-content:flex-end; }
.input-group { display:flex; flex-direction:column; gap:8px; min-width:140px; }
.input-group label { 
    font-size:12px; 
    color:var(--muted); 
    letter-spacing:0.08em; 
    text-transform:uppercase;
    margin-bottom:0;
    line-height:1.2;
    text-align:left;
    padding-left:8px;
}
.input-group select {
    padding:12px 16px;
    padding-right:40px;
    border-radius:12px;
    border:1px solid var(--border);
    background-color:rgba(2,6,23,0.6);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23cbd5f5' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:14px 14px;
    color:var(--text);
    cursor:pointer;
    font-size:14px;
    /* Remove default arrow completely */
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    /* Additional browser-specific hacks */
    text-indent:0.01px;
    text-overflow:'';
    /* Ensure custom arrow shows */
    background-clip:padding-box;
    /* Force override any browser defaults */
    -webkit-background-clip:padding-box;
    transition:all .2s ease;
    height:44px;
    box-sizing:border-box;
}
/* Hide default arrow in IE/Edge */
.input-group select::-ms-expand {
    display:none;
}
/* Hide default arrow in Firefox */
@-moz-document url-prefix() {
    .input-group select {
        text-indent:0.01px;
        text-overflow:'';
    }
}
.input-group select:hover { 
    border-color:rgba(56,189,248,0.5);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2338bdf8' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
}
.input-group select:focus {
    outline:none;
    border-color:var(--accent);
    background-color:rgba(2,6,23,0.8);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2338bdf8' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:14px 14px;
}
.icon-btn {
    width:44px; 
    height:44px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(2,6,23,0.6);
    color:var(--text);
    cursor:pointer;
    transition:all .2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:0;
}
.icon-btn svg {
    width:18px;
    height:18px;
    stroke:currentColor;
    flex-shrink:0;
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(56,189,248,0.1); }
.icon-btn:active { transform:scale(0.95); }

.tab-bar {
    margin-bottom:24px;
    padding:12px;
    border-radius:20px;
    display:flex;
    gap:12px;
}
.tab-chip {
    flex:1;
    border:none;
    border-radius:14px;
    padding:12px 18px;
    background:transparent;
    color:var(--muted);
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
    white-space:nowrap;
    text-align:center;
}
.tab-chip.active { background:rgba(56,189,248,0.15); color:var(--text); }
.tab-chip:hover:not(.active) { background:rgba(255,255,255,0.05); color:var(--text); }

.content-flow { display:flex; flex-direction:column; gap:32px; }
.tab-panel { display:none; }
.tab-panel.active { display:flex; flex-direction:column; gap:32px; }

.grid { display:grid; gap:20px; }
.hero-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.metric-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.detail-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.chart-grid { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

.spotlight header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.spotlight-value { font-size:56px; margin:20px 0; }
.spotlight-meta { display:flex; gap:24px; }
.spotlight-meta span { color:var(--muted); font-size:13px; }
.spotlight-meta strong { font-size:24px; }

.stacked { display:grid; gap:18px; }
.metric-block { display:flex; flex-direction:column; gap:8px; }
.metric-block p { margin:0; color:var(--muted); }
.metric-block .chart-title-row { margin-bottom:4px; }
.metric-value { font-size:28px; font-weight:600; }
.stat-value { font-size:28px; font-weight:600; }
.stat-value.loading, .metric-value.loading { opacity:.4; }

.chart-card .chart-shell { height:320px; margin-top:24px; }
.chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.chart-title-group { flex:1; min-width:0; }
.chart-title-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.chart-head h3 { margin:0; }
.chart-head .muted { margin-top:4px; }
.chart-head .input-group { flex:0 0 160px; min-width:120px; }
.chart-head .input-group.compact { flex:0 0 auto; min-width:140px; }

.detail-card { display:flex; flex-direction:column; gap:16px; }
.detail-card header { margin-bottom:8px; }
.detail-card .metric-value { margin-top:12px; }
.clv-grid { display:flex; gap:18px; justify-content:space-between; }

.location-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.location-card { padding:18px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,0.02); }
.location-name { font-weight:600; margin-bottom:12px; }
.location-stats { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.location-stats > div { flex:1; min-width:80px; }
.location-stats strong { display:block; color:var(--text); font-size:18px; margin-top:4px; }

.staff-list { display:flex; flex-direction:column; gap:20px; }
.staff-card { padding:24px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,0.02); }
.staff-card-header { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
.staff-card-header > div { flex:1; min-width:150px; }
.staff-name { margin:0 0 12px 0; font-weight:600; }
.staff-meta { margin:0 0 16px 0; color:var(--muted); font-size:13px; }
.staff-count { font-size:24px; white-space:nowrap; }
.staff-progress { height:6px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; margin-top:16px; }
.staff-progress-bar { height:100%; background:linear-gradient(90deg,#38bdf8,#818cf8); }

.reward-meta { display:flex; gap:24px; margin-bottom:16px; flex-wrap:wrap; }
.reward-meta > div { flex:1; min-width:150px; }
.reward-meta p { margin:0; color:var(--muted); font-size:13px; }
.reward-meta strong { display:block; margin-top:4px; }
.rewards-list { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.reward-item { display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,0.02); align-items:flex-start; }
.reward-item > div:first-child { flex:1; }
.reward-name { margin:0; font-weight:600; }
.reward-stats { color:var(--muted); font-size:13px; white-space:nowrap; }

.empty-state { text-align:center; padding:40px 20px; color:var(--muted); }
.empty-state-icon { font-size:40px; margin-bottom:12px; }

.info-icon {
    border:none;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    padding:0;
    margin:0;
    transition:all .2s ease;
    border-radius:50%;
}
.info-icon svg {
    width:16px;
    height:16px;
    stroke:currentColor;
}
.info-icon:hover {
    color:var(--accent);
    background:rgba(56,189,248,0.1);
}
.info-icon:active {
    transform:scale(0.9);
}

@media (max-width:1024px) {
    .app-header { flex-direction:column; align-items:flex-start; gap:20px; }
    .header-controls { width:100%; justify-content:flex-start; align-items:flex-start; }
    .chart-head .input-group { flex:1 1 140px; }
}

@media (max-width:640px) {
    .dashboard-shell { padding:20px; }
    .panel { border-radius:18px; padding:18px; }
    .spotlight-meta { flex-direction:column; gap:8px; }
    .header-controls { flex-direction:column; align-items:stretch; }
    .input-group { min-width:100%; }
    .input-group label { padding-left:4px; }
    .tab-bar { flex-wrap:wrap; }
    .tab-chip { flex:1 1 calc(50% - 10px); min-width:120px; }
    .chart-head { flex-direction:column; align-items:flex-start; }
    .chart-head .input-group { flex:1 1 100%; min-width:100%; }
    .location-stats { flex-direction:column; gap:8px; }
    .location-stats > div { width:100%; }
    .staff-card-header { flex-direction:column; align-items:flex-start; }
    .reward-item { flex-direction:column; gap:8px; }
    .reward-stats { white-space:normal; }
    .clv-grid { flex-direction:column; gap:12px; }
}