/* /assets/css/app.css */

:root{
    --bg:#07101d;
    --bg2:#0d1830;
    --panel:#101b31;
    --panel2:#16233d;
    --border:#2a3f6b;
    --text:#f4f7ff;
    --muted:#9fb2d3;
    --accent:#67e6ff;
    --good:#32d296;
    --warn:#ffbe55;
    --bad:#ff6f7d;
    --shadow:0 18px 42px rgba(0,0,0,.34);
    --radius:18px;
}

*{box-sizing:border-box}
html,body{
    margin:0;
    padding:0;
    min-height:100%;
    background:
        radial-gradient(circle at top, rgba(103,230,255,.10), transparent 26%),
        linear-gradient(180deg, var(--bg), var(--bg2));
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

a{
    color:var(--accent);
    text-decoration:none;
}
a:hover{text-decoration:underline}

.app-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 24px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(5,11,22,.75);
    backdrop-filter:blur(8px);
    position:sticky;
    top:0;
    z-index:10;
}

.brand-wrap{display:flex;flex-direction:column;gap:3px}
.brand{
    color:#fff;
    font-weight:900;
    letter-spacing:.02em;
    font-size:24px;
}
.brand-sub{
    color:var(--muted);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.topnav{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.topnav a{
    color:var(--text);
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}
.topnav a.active,
.topnav a:hover{
    background:rgba(103,230,255,.12);
    border-color:rgba(103,230,255,.32);
    text-decoration:none;
}

.page-wrap{
    width:min(1200px, calc(100% - 32px));
    margin:24px auto;
}

.flash{
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:18px;
    font-weight:700;
    box-shadow:var(--shadow);
}
.flash-success{background:rgba(50,210,150,.14); border:1px solid rgba(50,210,150,.35)}
.flash-error{background:rgba(255,111,125,.14); border:1px solid rgba(255,111,125,.35)}
.flash-warning{background:rgba(255,190,85,.14); border:1px solid rgba(255,190,85,.35)}

.grid{
    display:grid;
    gap:18px;
}
.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 900px){
    .grid-2,.grid-3{grid-template-columns:1fr}
}

.card{
    background:linear-gradient(180deg, rgba(16,27,49,.96), rgba(22,35,61,.96));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;
}

.card h1,.card h2,.card h3{
    margin-top:0;
    line-height:1.15;
}

.muted{color:var(--muted)}
.kicker{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
    font-weight:700;
    margin-bottom:8px;
}

.form-grid{
    display:grid;
    gap:14px;
}
.form-row{
    display:grid;
    gap:8px;
}
label{
    font-weight:700;
    color:#dbe7ff;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
    width:100%;
    padding:13px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
    color:var(--text);
    outline:none;
}
input:focus,
textarea:focus,
select:focus{
    border-color:rgba(103,230,255,.6);
    box-shadow:0 0 0 3px rgba(103,230,255,.12);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:12px 18px;
    border-radius:12px;
    border:none;
    cursor:pointer;
    font-weight:800;
    text-decoration:none;
}
.btn-primary{
    background:linear-gradient(180deg, #4fdfff, #2dbde2);
    color:#04111f;
}
.btn-secondary{
    background:rgba(255,255,255,.08);
    color:var(--text);
    border:1px solid rgba(255,255,255,.12);
}
.btn-danger{
    background:linear-gradient(180deg, #ff8a96, #ff5f72);
    color:#22060b;
}

.metric{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.metric-value{
    font-size:34px;
    font-weight:1000;
    line-height:1;
    color:var(--accent);
}
.metric-label{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.09em;
    font-size:12px;
    font-weight:700;
}

.avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
}
.avatar-lg{
    width:104px;
    height:104px;
}

.stat-pills{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.pill{
    padding:9px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
}
.pill-good{color:#d7fff0; background:rgba(50,210,150,.12); border-color:rgba(50,210,150,.26)}
.pill-warn{color:#fff2d2; background:rgba(255,190,85,.12); border-color:rgba(255,190,85,.26)}
.pill-bad{color:#ffe1e4; background:rgba(255,111,125,.12); border-color:rgba(255,111,125,.26)}

.table{
    width:100%;
    border-collapse:collapse;
}
.table th,
.table td{
    padding:12px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-align:left;
}
.table th{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.09em;
    font-size:12px;
}
.center-screen{
    min-height:calc(100vh - 160px);
    display:flex;
    align-items:center;
    justify-content:center;
}
.login-card{
    width:min(520px, 100%);
}
.small-note{
    font-size:13px;
    color:var(--muted);
}
.checkin-topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
}

.checkin-summary{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.checkin-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
}
@media (max-width: 1300px){
    .checkin-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 860px){
    .checkin-grid{grid-template-columns: 1fr;}
}

.checkin-slot{
    border-radius:18px;
    padding:14px;
    background:linear-gradient(180deg, rgba(16,27,49,.96), rgba(22,35,61,.96));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow);
}

.checkin-slot-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.slot-number{
    font-weight:1000;
    color:var(--accent);
    font-size:22px;
    line-height:1;
}

.slot-gamertag{
    font-size:22px;
    font-weight:900;
    line-height:1.1;
}

.checkin-member{
    display:grid;
    grid-template-columns: 62px minmax(0,1fr);
    gap:12px;
    align-items:center;
    margin-bottom:12px;
    min-height:62px;
}

.checkin-member-meta{
    min-width:0;
}

.checkin-display-name{
    font-weight:900;
    font-size:18px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.checkin-sub{
    color:var(--muted);
    font-size:13px;
    margin-top:4px;
}

.checkin-actions{
    display:grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap:10px;
    align-items:end;
}
@media (max-width: 1100px){
    .checkin-actions{
        grid-template-columns: 1fr;
    }
}

.checkin-actions .form-row{
    margin:0;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.status-empty{background:rgba(255,255,255,.08); color:#dce5f7;}
.status-mapped{background:rgba(50,210,150,.16); color:#dffff0; border:1px solid rgba(50,210,150,.28);}
.status-warning{background:rgba(255,190,85,.16); color:#fff3d5; border:1px solid rgba(255,190,85,.28);}
.status-locked{background:rgba(255,111,125,.16); color:#ffe2e5; border:1px solid rgba(255,111,125,.28);}

.board-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
}

.touch-input{
    font-size:20px;
    font-weight:800;
    padding:16px 14px;
}

.touch-btn{
    min-height:54px;
    min-width:92px;
    font-size:18px;
}

.ajax-note{
    margin-top:14px;
    color:var(--muted);
    font-size:13px;
}
.checkin-live-status{
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:14px;
}

.live-chip{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(103,230,255,.12);
    border:1px solid rgba(103,230,255,.24);
    font-weight:900;
    color:#dffbff;
    letter-spacing:.04em;
}

.live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#67e6ff;
    box-shadow:0 0 10px rgba(103,230,255,.8);
}

.live-meta{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}