/*
 * Shared design tokens, reset, and responsive nav for SuperGiftbox admin.
 * Palette, radii and type match the SuperGiftbox mobile app (see www/css/index.css)
 * so the dashboard reads as the same product, just on the web.
 */
*{padding:0;margin:0;outline:none;box-sizing:border-box;}
html{
    scroll-behavior:smooth;
    width:100%;
    --primary:#8338EC;
    --secondary:#FB5607;
    --accent:#3A86FF;
    --bg:#FAFAFA;
    --surface:#fff;
    --input-bg:#F1F1F1;
    --border:#849DA9;
    --text:#263238;
    --text-muted:#6b7c86;
    --shadow-color:#ebebeb;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:20px;
    --radius-pill:999px;
    --font: Helvetica, Arial, sans-serif, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    --nav-size:64px;
    /* legacy variable names kept so untouched inline styles/JS strings still resolve */
    --poppins:var(--font);
    --black-ash-text:var(--text);
    --helvetica:var(--font);
    --wgt700:700;
    --wgt400:400;
    --white-ash:var(--input-bg);
    --gray:var(--border);
    --login-color:var(--primary);
    --submit-color:var(--primary);
    --width100:100%;
    --white-text:var(--surface);
    --blue-icon-color:var(--accent);
    --home-color:var(--bg);
}
body{
    scroll-behavior:smooth;
    position:relative;
    width:100%;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
img{max-width:100%;}
button{cursor:pointer;font-family:inherit;}
a{text-decoration:none;color:inherit;}
input,textarea,select{font-family:inherit;}

/* ---------- shared card / button / pill language, matching the app ---------- */
.card{
    background:var(--surface);
    border-radius:var(--radius-md);
    box-shadow:0 0 24px 0 var(--shadow-color);
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:var(--radius-sm);
    padding:12px 20px;
    font-weight:var(--wgt700);
    font-size:15px;
    line-height:1.2;
    color:var(--white-text);
    background:var(--primary);
    transition:transform .15s ease, opacity .15s ease;
}
.btn:active{transform:scale(0.97);}
.btn:disabled{opacity:.5;cursor:default;transform:none;}
.btn-secondary{background:var(--secondary);}
.btn-accent{background:var(--accent);}
.btn-outline{background:transparent;color:var(--text);border:1px solid #222;}
.btn-block{width:100%;}
.pill{
    border-radius:var(--radius-pill);
    padding:7px 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* ---------- winner / player modals shared by add-event, view-events, transactions ---------- */
.display_winner,.display_winner2{
    width:100vw;
    height:100vh;
    background:rgba(250,250,250,0.9);
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:16px;
}
.modal-card{
    width:100%;
    max-width:920px;
    max-height:92vh;
    overflow-y:auto;
    padding:24px;
    border-radius:var(--radius-lg);
    box-shadow:0 0 32px 0 rgba(0,0,0,0.18);
    background:var(--surface);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:20px;
}
.modal-panel{width:100%;}
.modal-panel--bordered{
    width:100%;
    border:1px solid var(--primary);
    border-radius:var(--radius-md);
    padding:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
@media (min-width:700px){
    .modal-card{padding:32px;flex-direction:row;align-items:center;}
    .modal-card.modal-card--list{flex-direction:column;align-items:stretch;}
    .modal-panel{width:55%;}
    .modal-panel--bordered{width:40%;}
}

/* ---------- responsive nav: fixed bottom tab bar on phones, icon rail on tablet/desktop ---------- */
.body-home{display:flex;width:100%;position:relative;min-height:100vh;}
.body-home main{
    width:100%;
    background:var(--bg);
    padding-bottom:calc(var(--nav-size) + 24px + env(safe-area-inset-bottom,0px));
}
.body-home aside{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    width:100%;
    height:var(--nav-size);
    background:var(--surface);
    box-shadow:0 -2px 20px 0 var(--shadow-color);
    z-index:10;
    padding-bottom:env(safe-area-inset-bottom,0px);
}
.body-home aside .fixed-side-bar{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    height:100%;
    width:100%;
    padding-top:0;
}
.side-menu .box-logo{display:none;}
.side-menu .menu{width:100%;}
.side-menu .menu ul{list-style:none;display:flex;flex-direction:row;justify-content:space-around;align-items:center;width:100%;}
.side-menu .menu ul li{margin:0;}
.side-menu .menu ul li object{pointer-events:none;width:24px;height:24px;}

@media (min-width:768px){
    .body-home main{margin-left:84px;width:calc(100% - 84px);padding-bottom:40px;}
    .body-home aside{
        position:fixed;top:0;bottom:0;left:0;right:auto;
        width:84px;height:100%;
        box-shadow:2px 0 20px 0 var(--shadow-color);
    }
    .body-home aside .fixed-side-bar{flex-direction:column;justify-content:flex-start;padding-top:28px;}
    .side-menu .box-logo{display:flex;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:36px;}
    .side-menu .box-logo a img{width:100%;height:100%;}
    .side-menu .menu ul{flex-direction:column;width:auto;}
    .side-menu .menu ul li{margin:14px 0;}
}