/* ==========================================================
   SUNNY CHRONICLE — Account panel stylesheet
   Same look as the main site (WebSite/assets/css/style.css):
   game palette (Endesga 32), the game's 9-slice UI skin and
   the pixel buttons. Tokens, frames and buttons below are
   copies from style.css — keep them in sync.
   Bootstrap stays loaded underneath: the form validation
   (was-validated / is-invalid / invalid-feedback) relies on it.
   ========================================================== */

/* ── 0. FONTS ───────────────────────────────────────────── */
@font-face {
    font-family: 'PixeloidSans';
    src: url('../fonts/PixeloidSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── 1. TOKENS (copied from style.css) ─────────────────── */
:root {
    --ink:        #181425;
    --ink-2:      #262b44;
    --ink-3:      #3a4466;
    --slate:      #5a6988;
    --mist:       #8b9bb4;
    --almond:     #ead4aa;
    --caramel:    #c28569;
    --brown:      #945542;
    --brown-2:    #b86f50;
    --bark:       #733e39;
    --gold:       #feae34;
    --gold-lt:    #fee761;
    --gold-dk:    #c47e10;
    --red:        #e43b44;
    --red-dk:     #a82a31;
    --grass:      #63c74d;
    --grass-2:    #5fc14c;
    --leaf:       #3e8948;
    --forest:     #265c42;
    --deep:       #193c3e;

    --text:       var(--ink);
    --text-body:  #4b3328;
    --text-muted: #6b4a3a;
    --on-dark:    #f4ecdc;
    --on-dark-2:  #b9c2d6;
    --field-bg:   #fff8e8;

    --font-pixel: 'PixeloidSans', ui-monospace, monospace;
    --font-body:  'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --px: 3px;                      /* one game pixel on panels */

    /* Bootstrap's validation colours → game palette */
    --bs-form-invalid-color:        var(--red);
    --bs-form-invalid-border-color: var(--red);
    --bs-form-valid-color:          var(--leaf);
    --bs-form-valid-border-color:   var(--leaf);
    --bs-danger-rgb:                228, 59, 68;
    --bs-success-rgb:               62, 137, 72;
}

/* ── 2. BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-pixel); font-weight: normal; }

img { max-width: 100%; display: block; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.band-grass {
    background-color: var(--grass);
    background-image:
        linear-gradient(45deg,  var(--grass-2) 25%, transparent 25%),
        linear-gradient(-45deg, var(--grass-2) 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, var(--grass-2) 75%),
        linear-gradient(-45deg, transparent 75%, var(--grass-2) 75%);
    background-size: 96px 96px;
    background-position: 0 0, 0 48px, 48px -48px, -48px 0;
}

/* ── 3. PIXEL FRAME + BUTTONS (copied from style.css) ──── */
.px-panel {
    position: relative;
    border: calc(var(--px) * 4) solid transparent;
    border-image: url('../ui/nine_p_almond.png') 4 fill / calc(var(--px) * 4) stretch;
    image-rendering: pixelated;
    background: none;
    color: var(--text);
    filter: drop-shadow(0 var(--px) 0 rgba(24, 20, 37, .35));
}

.btn-px {
    --bw: 8px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-pixel);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: .02em;
    padding: .45rem 1.1rem .5rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: var(--bw) solid transparent;
    border-image: url('../ui/nine_p_yellow.png') 4 fill / var(--bw) stretch;
    image-rendering: pixelated;
    background: none;
    filter: drop-shadow(0 4px 0 rgba(24, 20, 37, .45));
    transition: transform .12s ease, filter .12s ease;
}
.btn-px:hover { color: var(--ink); transform: translateY(-2px); filter: drop-shadow(0 6px 0 rgba(24, 20, 37, .45)) brightness(1.06); }
.btn-px:active { transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(24, 20, 37, .45)); }
.btn-px i { font-size: 1.1em; }

.btn-px-gold   { border-image-source: url('../ui/nine_p_yellow.png'); color: var(--ink); }
.btn-px-almond { border-image-source: url('../ui/nine_p_almond.png'); color: var(--ink); }
.btn-px-brown  { border-image-source: url('../ui/btn_normal.png');    color: var(--almond); }
.btn-px-brown:hover { color: #fff; }
.btn-px-brown:active { border-image-source: url('../ui/btn_pressed.png'); }
.btn-px-green  { border-image-source: url('../ui/nine_p_green.png');  color: #fff; }
.btn-px-green:hover { color: #fff; }

.btn-px-sm    { --bw: 8px; font-size: .9rem; padding: .2rem .8rem .3rem; }
.btn-px-block { display: flex; width: 100%; }

/* Small flat pixel button for row actions (session revoke) */
.btn-flat {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-pixel); font-size: .8rem; line-height: 1.2;
    padding: .3rem .7rem .35rem;
    border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
    box-shadow: 0 0 0 2px var(--ink), inset 0 -3px 0 rgba(0, 0, 0, .25);
    transition: filter .15s, transform .12s;
}
.btn-flat:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-flat:active { transform: translateY(1px); }
.btn-flat-red { background: var(--red); color: #fff; }

/* ── 4. TOP BAR ────────────────────────────────────────── */
.acc-nav {
    padding: .6rem 0;
    background: rgba(25, 60, 62, .97);
    border-bottom: 3px solid var(--ink);
    box-shadow: inset 0 -3px 0 var(--forest);
}
.acc-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acc-brand img {
    height: 44px; width: auto;
    filter: drop-shadow(2px 0 0 #fff8e8) drop-shadow(-2px 0 0 #fff8e8) drop-shadow(0 2px 0 #fff8e8)
            drop-shadow(0 -2px 0 #fff8e8) drop-shadow(0 3px 0 var(--ink));
}

/* ── 5. PAGE + PANEL ───────────────────────────────────── */
.acc-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 6vw, 72px) 16px;
}
.acc-panel {
    width: 100%;
    max-width: 460px;
    padding: 1.4rem 1.5rem 1.5rem;
}
.acc-panel-wide { max-width: 1000px; }

.acc-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.acc-head h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 .15rem; }
.acc-head p { margin: 0; color: var(--text-muted); font-weight: 600; }
.acc-head-row { flex-wrap: wrap; }
.acc-head-row .acc-head-text { flex: 1 1 auto; }

.path-icon {
    flex: 0 0 auto;
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; color: var(--ink);
    border: 8px solid transparent;
    border-image: url('../ui/nine_p_yellow.png') 4 fill / 8px stretch;
    image-rendering: pixelated;
}
.path-icon-green { border-image-source: url('../ui/nine_p_green.png'); color: #fff; }
.path-icon-red {
    border: 0; border-image: none;
    background: var(--red); color: #fff;
    box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 var(--red-dk), inset 0 4px 0 rgba(255, 255, 255, .18);
}

.acc-text { color: var(--text-body); line-height: 1.65; margin: 0 0 1rem; }
.acc-text:last-child { margin-bottom: 0; }
.acc-text a, .step-link {
    font-weight: 800;
    color: var(--leaf); text-decoration: none;
    border-bottom: 2px solid currentColor;
}
.step-link { display: inline-flex; align-items: center; gap: .3rem; }
.acc-text a:hover, .step-link:hover { color: var(--forest); }
.acc-text mark {
    background: var(--gold-lt); color: var(--ink);
    padding: 0 .3em;
    box-shadow: 0 0 0 2px var(--gold);
}

.acc-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin-top: 1.5rem; }

/* Link row under the form ("Don't have an account? …") */
.acc-foot {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 3px dashed rgba(148, 85, 66, .45);
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── 6. FORMS (on top of Bootstrap) ────────────────────── */
.acc-panel .form-label {
    font-weight: 800;
    font-size: .95rem;
    color: var(--ink);
    margin-bottom: .4rem;
}
.acc-panel .form-control {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background-color: var(--field-bg);
    border: 3px solid var(--caramel);
    border-radius: 0;
    padding: .55rem .75rem;
    box-shadow: inset 0 3px 0 rgba(148, 85, 66, .14);
    transition: border-color .15s, box-shadow .15s;
}
.acc-panel .form-control:focus {
    outline: none;
    border-color: var(--gold-dk);
    box-shadow: inset 0 3px 0 rgba(148, 85, 66, .14), 0 0 0 3px rgba(254, 174, 52, .45);
}
.acc-panel .form-control[readonly] { background-color: rgba(255, 248, 232, .55); color: var(--text-muted); }

.acc-panel .input-group-text {
    font-family: var(--font-pixel);
    color: var(--almond);
    background: var(--brown);
    border: 3px solid var(--caramel);
    border-radius: 0;
}

.acc-panel .invalid-feedback { font-weight: 700; font-size: .88rem; margin-top: .35rem; }

/* Field hint; hidden while the field's error message is showing */
.acc-panel .form-text { color: var(--text-muted); font-weight: 600; font-size: .85rem; margin-top: .35rem; }
.acc-panel .is-invalid ~ .form-text,
.acc-panel .was-validated .form-control:invalid ~ .form-text { display: none; }

.acc-link-sm {
    font-size: .88rem; font-weight: 700;
    color: var(--brown); text-decoration: none;
    border-bottom: 2px solid transparent;
}
.acc-link-sm:hover { color: var(--bark); border-bottom-color: currentColor; }

.acc-panel .form-check { color: var(--text-body); font-weight: 600; }
.acc-panel .form-check-input {
    width: 1.15em; height: 1.15em;
    border: 2px solid var(--ink);
    border-radius: 0;
    background-color: var(--field-bg);
}
.acc-panel .form-check-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(254, 174, 52, .45); }
.acc-panel .form-check-input:checked { background-color: var(--gold); border-color: var(--ink); }
.acc-panel .form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23181425' stroke-linecap='square' stroke-width='3.5' d='m5 10 3.5 3.5L15 7'/%3e%3c/svg%3e");
}
.acc-panel .form-check-label a { color: var(--leaf); font-weight: 800; }

/* ── 7. SESSIONS TABLE ─────────────────────────────────── */
.acc-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: rgba(148, 85, 66, .3);
    margin: 0;
    font-size: .95rem;
}
.acc-table thead th {
    font-family: var(--font-pixel); font-weight: normal;
    font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(194, 133, 105, .18);
    border-bottom: 3px solid var(--caramel);
    padding: .6rem .8rem;
}
.acc-table td { padding: .7rem .8rem; color: var(--text-body); }
.acc-table tbody tr:hover > * { background: rgba(254, 174, 52, .1); }
.acc-table .is-current > * { background: rgba(99, 199, 77, .12); }

.acc-badge {
    display: inline-block;
    font-family: var(--font-pixel); font-size: .72rem; line-height: 1.2;
    padding: .15rem .45rem .2rem;
    margin-left: .35rem;
    color: var(--ink);
    background: var(--grass);
    box-shadow: 0 0 0 2px var(--ink);
    white-space: nowrap;
}
.acc-user { font-weight: 800; color: var(--ink); }

/* ── 8. FOOTER ─────────────────────────────────────────── */
.acc-footer {
    background: var(--ink);
    color: var(--slate);
    border-top: 6px solid var(--ink-3);
    padding: 1.1rem 0;
    font-size: .85rem;
}
.acc-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.acc-footer a { color: var(--on-dark-2); font-weight: 700; text-decoration: none; transition: color .15s; }
.acc-footer a:hover { color: var(--gold); }

@media (max-width: 575.98px) {
    .acc-brand img { height: 36px; }
    .acc-panel { padding: 1.1rem 1rem 1.2rem; }
    .acc-head h1 { font-size: 1.3rem; }
    .path-icon { width: 52px; height: 52px; font-size: 1.6rem; }
    .acc-footer-inner { justify-content: center; text-align: center; }
}