/* ══════════════════════════════════════════════════════════
   ARGYLE POKER LEAGUE — Stylesheet
   ══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
    --bg:         #0b0d12;
    --surface:    #10131a;
    --card:       #161a24;
    --card-head:  linear-gradient(135deg,#1a2d50,#1d2d48);
    --border:     #232a38;
    --border-hi:  #2c3a52;
    --muted:      #6b7f98;
    --text:       #d8e2ef;
    --text-hi:    #edf2f9;
    --accent:     #3b7ef8;
    --accent-dim: #162040;
    --green:      #22a85a;
    --green-dim:  #0a2e18;
    --red:        #d63b3b;
    --yellow:     #d4a535;
    --purple:     #6d3fc0;
    --pink:       #c0407a;
    --border-r:   9px;
    --border-r-sm:6px;
    --shadow-card:0 4px 24px rgba(0,0,0,0.5);
    --shadow-modal:0 20px 70px rgba(0,0,0,0.75);
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}

/* ══════════════════ HEADER ══════════════════ */
.header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: linear-gradient(180deg,#0d1322 0%,#0b0d12 100%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(8px);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
}

.brand-diamond {
    width: 36px;
    height: 33px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(220,80,160,0.5));
}

h1 {
    font-size: clamp(1rem,3.5vw,1.2rem);
    font-weight: 800;
    color: var(--text-hi);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.subtitle {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.3px;
    margin-top: 1px;
}

.hide-mobile {/* toggled below */}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Mode badges */
.mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.badge-admin { background: var(--green);     color: #052010; }
.badge-guest { background: #2a2f3e;          color: var(--muted); border: 1px solid var(--border-hi); }

/* ══════════════════ LAYOUT ══════════════════ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 14px 48px;
}

.top-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media (min-width: 900px) {
    .top-panels { grid-template-columns: minmax(300px,380px) 1fr; }
}

.admin-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.admin-panels .card { flex: 1 1 260px; }

/* ══════════════════ CARD ══════════════════ */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-r);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Card heading strip */
.card h2 {
    margin: 0;
    padding: 11px 16px;
    background: var(--card-head);
    color: var(--text-hi);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

/* Card body padding — applied to direct children except h2 */
.card > *:not(h2) { padding-left: 14px; padding-right: 14px; }
.card > *:not(h2):first-of-type { margin-top: 14px; }

/* Card note — pinned to bottom, centred */
.card-note {
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: 14px;
    font-size: 0.73rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

/* ══════════════════ TYPOGRAPHY ══════════════════ */
h3,h4{font-weight:600;color:var(--text-hi);}
h3{font-size:1.05rem;}
h4{font-size:0.9rem;}

.small  {font-size:0.77rem;}
.muted  {color:var(--muted);}
.center {text-align:center;}
.error  {color:#ff8080;}
.ok     {color:#70e890;}

.tag {
    display:inline-block;
    background:#0d1422;
    border:1px solid #1e3050;
    padding:1px 9px;
    border-radius:20px;
    font-size:0.76rem;
    color:#9fc0e8;
    font-weight:600;
}

/* ══════════════════ BUTTONS ══════════════════ */
.btn {
    background:#0c0f18;
    border:1px solid var(--border-hi);
    color:var(--text);
    padding:7px 13px;
    border-radius:var(--border-r-sm);
    cursor:pointer;
    font-size:0.83rem;
    font-weight:500;
    transition:filter .15s, transform .1s;
    white-space:nowrap;
    line-height:1.4;
}
.btn:hover  {filter:brightness(1.18);}
.btn:active {transform:scale(0.96);}
.btn-primary {background:var(--accent);   border-color:transparent;color:#fff;}
.btn-success {background:var(--green);    border-color:transparent;color:#031208;font-weight:700;}
.btn-warning {background:var(--yellow);   border-color:transparent;color:#1a0e00;font-weight:700;}
.btn-danger  {background:var(--red);      border-color:transparent;color:#fff;}
.btn-pause   {background:var(--purple);   border-color:transparent;color:#fff;}
.btn-outline {background:transparent;     border-color:var(--border-hi);}
.btn-close   {background:#5a1818;         border-color:transparent;color:#ffa8a8;padding:6px 12px;font-size:0.85rem;}
.btn-wide    {min-width:120px;}
.btn-calendar{padding:7px 10px;font-size:1rem;}

/* ══════════════════ FORMS ══════════════════ */
.controls {
    display:flex;flex-wrap:wrap;gap:8px;
    justify-content:center;
    margin:10px 0;
}

.form-row {
    display:flex;flex-wrap:wrap;gap:12px;
    margin-bottom:10px;
}
.form-row > label {
    flex:1;min-width:140px;
    display:flex;flex-direction:column;gap:5px;
    font-size:0.78rem;font-weight:500;color:var(--muted);
}

.input-with-btn{display:flex;gap:6px;}

input,select {
    width:100%;
    padding:8px 10px;
    background:#090c14;
    border:1px solid var(--border);
    color:var(--text);
    border-radius:var(--border-r-sm);
    font-size:0.85rem;
    transition:border-color .15s;
}
input:focus,select:focus {
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(59,126,248,0.16);
}
input[type="number"]{width:70px;}

/* ══════════════════ BLINDS TIMER ══════════════════ */
.timer-display {
    font-size:clamp(3.2rem,11vw,5.2rem);
    font-weight:900;
    letter-spacing:4px;
    text-align:center;
    margin:14px 0 6px;
    color:#fff;
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.level-line {
    font-size:clamp(0.88rem,2.8vw,1.35rem);
    font-weight:600;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:2px 0 2px;
    color:var(--text-hi);
}

/* Blind levels table */
.level-list {
    margin:8px 0 4px;
    border-radius:0;
    overflow:hidden;
    font-size:0.8rem;
}

.level-list .line {
    display:grid;
    grid-template-columns:32px 1fr 1fr 46px;
    gap:0;
    padding:5px 8px;
    border-bottom:1px solid var(--border);
    text-align:center;
    transition:background .18s;
}
.level-list .line:last-child{border-bottom:none;}

.level-list .hdr {
    font-weight:700;
    background:#0a0e18;
    color:var(--muted);
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:5px 8px;
}

.break-row{background:linear-gradient(90deg,#2a1500,transparent);color:var(--muted);}

.level-list .line.active-level {
    background:var(--accent-dim);
    border-left:3px solid var(--accent);
    color:#fff;
    font-weight:700;
}

/* ══════════════════ SEASON LADDER TABLE ══════════════════ */
.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;}

table{width:100%;border-collapse:collapse;font-size:0.8rem;}

th,td {
    padding:7px 4px;
    text-align:center;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}

th {
    background:#0a0e18;
    color:#8aa8cc;
    font-weight:600;
    font-size:0.75rem;
    white-space:nowrap;
}

/* First and last columns get a bit of outer breathing room */
th:first-child,td:first-child { padding-left:10px; }
th:last-child,td:last-child   { padding-right:10px; }

tr:hover td{background:rgba(255,255,255,0.025);}

/* Rank — very narrow */
th.rank-col,td.rank-col{width:32px;min-width:32px;max-width:36px;padding:7px 2px;font-size:0.72rem;color:var(--muted);}

/* Player — left-aligned */
th.player-col,td.player-col{text-align:left;padding-left:10px;min-width:80px;}

/* Points — slight colour accent + separator */
th.pts-col,td.pts-col{
    min-width:50px;color:#9fc0ff;
    border-right:1px solid var(--border-hi);
    padding-right:8px;
    padding-left:8px;
}

/* Vertical date headers — centered horizontally and vertically in cell */
th.date-col {
    writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:rotate(180deg);
    white-space:nowrap;
    width:30px;min-width:28px;max-width:36px;
    height:96px;
    padding:6px 4px;
    font-size:0.65rem;
    vertical-align:middle;   /* centres text mid-height of the header cell */
    text-align:center;       /* centres horizontally within the column */
    overflow:visible;
}

/* Event score cells */
td.event-cell{text-align:center;padding:7px 2px;min-width:26px;}
td.event-cell.counted{font-weight:800;color:var(--text-hi);}
td.event-cell.not-counted{color:#5a7090;font-weight:400;}

/* ══════════════════ MODALS ══════════════════ */
.modal {
    position:fixed;inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:16px;
}
.modal.open{display:flex;}

.modal-panel {
    background:var(--card);
    border:1px solid var(--border-hi);
    border-radius:12px;
    box-shadow:var(--shadow-modal);
    width:min(440px,100%);
    overflow:hidden;
}

/* Small focused modal (login/logout) */
.modal-sm{}

.modal-top-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--card-head);
    border-bottom:1px solid rgba(255,255,255,0.07);
    padding:0;
}

.modal-top-bar h3 {
    margin:0;
    padding:14px 18px;
    font-size:1rem;
    font-weight:700;
    color:#fff;
    letter-spacing:0.3px;
}

.modal-content{padding:20px 22px 24px;}

/* Password input in modal */
.pwd-input {
    width:100%;
    padding:11px 14px;
    background:#090c14;
    border:1.5px solid var(--border-hi);
    border-radius:var(--border-r-sm);
    color:var(--text);
    font-size:1rem;
    text-align:center;
    letter-spacing:2px;
    transition:border-color .15s;
}
.pwd-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(59,126,248,0.2);
    letter-spacing:3px;
}
.pwd-input::placeholder{letter-spacing:0.5px;font-size:0.88rem;color:var(--muted);}

/* ══════════════════ CALENDAR ══════════════════ */
.calendar-popup {
    position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:var(--card);
    border:1px solid var(--border-hi);
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,0.65);
    padding:14px;
    z-index:3000;
    width:min(310px,94vw);
    display:none;
    opacity:0;
    transition:opacity .2s;
}
.calendar-popup[style*="display: block"]{opacity:1;}

.calendar-backdrop{
    position:fixed;inset:0;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(3px);
    z-index:2999;display:none;
}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:0.88rem;font-weight:600;color:var(--text-hi);}
.cal-head button{padding:5px 10px;font-size:0.82rem;}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;}
.dow{font-size:0.65rem;color:var(--muted);padding:3px 0 5px;font-weight:600;}

.day{padding:6px 2px;border-radius:var(--border-r-sm);border:1px solid transparent;color:#405060;cursor:not-allowed;font-size:0.8rem;}
.day.other-month{opacity:0.25;}
.day.allowed{cursor:pointer;color:var(--text-hi);background:var(--accent-dim);border-color:#243860;font-weight:700;}
.day.allowed:hover{filter:brightness(1.22);}
.day.today{outline:1.5px dashed var(--accent);}

/* ══════════════════ TOAST ══════════════════ */
.toast{
    position:fixed;bottom:22px;right:18px;
    padding:10px 16px;
    background:rgba(20,30,55,0.96);
    color:var(--text-hi);
    border-radius:var(--border-r-sm);
    box-shadow:0 6px 24px rgba(0,0,0,0.55);
    z-index:4000;
    opacity:0;transform:translateY(12px);
    transition:all .25s ease-out;
    font-size:0.85rem;
    pointer-events:none;
    backdrop-filter:blur(4px);
    max-width:calc(100vw - 36px);
}
.toast.visible{opacity:1;transform:translateY(0);}
.toast.success{background:#153324;color:#90eeaa;}
.toast.error  {background:#331515;color:#ffaaaa;}

/* ══════════════════ SCROLLBAR ══════════════════ */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#253040;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* ══════════════════ MOBILE ══════════════════ */
@media (max-width: 600px) {
    .hide-mobile{display:none;}

    h1{font-size:1rem;}

    .container{padding:12px 10px 36px;}

    /* Blinds timer — all controls visible, no clipping */
    .timer-display{letter-spacing:2px;margin:10px 0 6px;}

    .level-line{font-size:0.85rem;}

    .controls{gap:6px;}
    .btn{padding:7px 9px;font-size:0.78rem;}

    /* Admin panels — stack vertically, full width so Save button always visible */
    .admin-panels{flex-direction:column;}
    .admin-panels .card{flex:none;width:100%;}

    /* Ensure Save Result button is never clipped */
    .card>.controls{margin-bottom:0;}

    .modal-panel{border-radius:10px;}
    .modal-content{padding:16px 16px 20px;}

    .mode-badge{padding:3px 9px;font-size:0.7rem;}
}

@media (max-width: 380px) {
    .btn{padding:6px 7px;font-size:0.74rem;}
}