/* Calistenika — front-end design system
   Athletic street-workout aesthetic: dark "night gym" chrome, an electric
   lime energy accent for effort/progress, warm off-white content surfaces,
   condensed display type for the numbers that drive the game. */

:root {
    /* Core palette */
    --ink:        #14170f;   /* near-black with a green undertone (not pure) */
    --ink-soft:   #22271b;
    --surface:    #fbfaf5;   /* warm off-white content surface */
    --surface-2:  #f2f1e8;
    --line:       #e2e1d6;
    --muted:      #6b6f61;
    --text:       #1c1f17;

    /* Energy accent — electric lime */
    --lime:       #c6f833;
    --lime-deep:  #a4d81f;
    --lime-ink:   #1c2400;   /* text on lime */

    /* Support */
    --gold:       #ffcb3d;   /* ranks / badges */
    --danger:     #e5484d;
    --danger-bg:  #fdecee;
    --ok:         #2f9e44;
    --ok-bg:      #e9f7ee;
    --info-bg:    #eef6ff;
    --info-ink:   #1b4965;

    --radius:     14px;
    --radius-sm:  9px;
    --shadow:     0 2px 4px rgba(20,23,15,.04), 0 8px 24px rgba(20,23,15,.06);
    --shadow-lift:0 4px 10px rgba(20,23,15,.08), 0 16px 40px rgba(20,23,15,.10);
    --font-sans:  "Inter", system-ui, -apple-system, sans-serif;
    --font-disp:  "Bebas Neue", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    color: var(--text);
    background:
        radial-gradient(1200px 400px at 50% -120px, rgba(198,248,51,.10), transparent 70%),
        var(--surface-2);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

/* ---- Navbar -------------------------------------------------------- */
.app-navbar {
    background: var(--ink);
    padding: .55rem 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.app-navbar .navbar-brand {
    font-family: var(--font-disp);
    font-size: 1.7rem;
    letter-spacing: .04em;
    color: var(--surface);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.app-navbar .navbar-brand::before {
    content: "";
    width: 12px; height: 22px;
    background: var(--lime);
    border-radius: 3px;
    box-shadow: 6px 0 0 rgba(198,248,51,.35);
    transform: skewX(-12deg);
}
.app-navbar .nav-link {
    color: rgba(251,250,245,.72);
    font-weight: 500;
    font-size: .93rem;
    padding: .4rem .8rem;
    border-radius: 8px;
    transition: color .15s, background .15s;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus { color: var(--surface); background: rgba(255,255,255,.06); }
.app-navbar .btn-light {
    background: var(--lime);
    border: none;
    color: var(--lime-ink);
    font-weight: 600;
}
.app-navbar .btn-light:hover { background: var(--lime-deep); }
.app-navbar .btn-outline-light {
    border-color: rgba(255,255,255,.28);
    color: var(--surface);
    font-weight: 500;
}
.app-navbar .btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.app-navbar .dropdown-menu { border: none; box-shadow: var(--shadow-lift); border-radius: var(--radius-sm); }

.app-main { padding-top: 2.2rem; padding-bottom: 2rem; }

/* ---- Cards --------------------------------------------------------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.card.p-4, .card.p-md-5 { background: var(--surface); }

/* ---- Type ---------------------------------------------------------- */
h1, h2, h3, .h3, .h4, .h5, .h6 { color: var(--text); letter-spacing: -0.015em; }
.display-score {
    font-family: var(--font-disp);
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: .9;
    letter-spacing: .01em;
    color: var(--ink);
}
.text-muted { color: var(--muted) !important; }

/* ---- Buttons ------------------------------------------------------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: -0.01em; }
.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    color: #fff;
}
.btn-lime {
    background: var(--lime);
    border: 1px solid var(--lime-deep);
    color: var(--lime-ink);
}
.btn-lime:hover { background: var(--lime-deep); color: var(--lime-ink); }
.btn-outline-secondary {
    border-color: var(--line);
    color: var(--text);
}
.btn-outline-secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn-outline-primary { border-color: var(--ink); color: var(--ink); }
.btn-outline-primary:hover { background: var(--ink); color: var(--surface); }

/* ---- Forms --------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: .55rem .8rem;
    background: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--lime-deep);
    box-shadow: 0 0 0 3px rgba(198,248,51,.28);
}
.form-label { font-weight: 600; font-size: .86rem; color: var(--text); margin-bottom: .35rem; }

/* ---- Badges -------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: 0; border-radius: 999px; padding: .34em .7em; }
.text-bg-warning, .badge.text-bg-warning { background: var(--gold) !important; color: #3a2c00 !important; }
.text-bg-primary, .badge.text-bg-primary { background: var(--lime) !important; color: var(--lime-ink) !important; }
.text-bg-light { background: var(--surface-2) !important; color: var(--muted) !important; border: 1px solid var(--line); }
.badge-role-admin      { background: var(--ink); color: var(--surface); }
.badge-role-customer   { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge-status-active   { background: var(--ok-bg); color: var(--ok); }
.badge-status-blocked  { background: var(--danger-bg); color: var(--danger); }

/* ---- Tables -------------------------------------------------------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}
.table-hover > tbody > tr:hover > * { background: rgba(198,248,51,.09); }
.table-warning, .table-warning > * { background: rgba(255,203,61,.16) !important; }

/* ---- Alerts -------------------------------------------------------- */
.alert { border: none; border-radius: var(--radius-sm); border-left: 4px solid transparent; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
.alert-danger  { background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger); }
.alert-info    { background: var(--info-bg); color: var(--info-ink); border-left-color: #4a90c2; }
.alert-secondary { background: var(--surface-2); color: var(--muted); }

/* ---- Nav tabs ------------------------------------------------------ */
.nav-tabs { border-bottom: 1px solid var(--line); gap: .25rem; }
.nav-tabs .nav-link {
    border: none;
    color: var(--muted);
    font-weight: 600;
    padding: .6rem 1rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--line); }
.nav-tabs .nav-link.active {
    color: var(--ink);
    background: transparent;
    border-bottom: 2px solid var(--lime-deep);
}

/* ---- List groups (disciplines / entry rows) ------------------------ */
.list-group-item {
    border: 1px solid var(--line);
    margin-bottom: .5rem;
    border-radius: var(--radius-sm) !important;
    background: var(--surface);
}

/* ---- Avatars & images --------------------------------------------- */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line);
}
.avatar-lg { width: 84px; height: 84px; }
.avatar-sm { width: 40px; height: 40px; }
.avatar-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-disp); color: var(--muted);
    background: var(--surface-2);
}
.discipline-thumb {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
    border-radius: var(--radius-sm); background: var(--surface-2);
}

/* ---- Hero (landing for guests) ------------------------------------- */
.hero {
    background: var(--ink);
    color: var(--surface);
    border-radius: calc(var(--radius) + 6px);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute; right: -60px; top: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(198,248,51,.35), transparent 65%);
}
.hero h1 {
    font-family: var(--font-disp);
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: .92;
    letter-spacing: .01em;
    color: var(--surface);
    margin: 0 0 1rem;
}
.hero .lead { color: rgba(251,250,245,.75); max-width: 46ch; font-size: 1.1rem; }
.hero .btn-lime { font-size: 1.05rem; padding: .7rem 1.5rem; }

/* ---- Stat tiles ---------------------------------------------------- */
.stat-tile { text-align: center; padding: 1.1rem .5rem; }
.stat-tile .stat-num { font-family: var(--font-disp); font-size: 2.1rem; line-height: 1; color: var(--ink); }
.stat-tile .stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: .3rem; }

/* ---- Footer -------------------------------------------------------- */
.app-footer { color: var(--muted); }
.app-footer a { color: var(--muted); }

/* ---- Accessibility & motion ---------------------------------------- */
a { color: var(--ink); text-decoration-color: var(--lime-deep); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid rgba(198,248,51,.55); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Warning alert (email-verification notice) */
.alert-warning { background: #fff8e1; color: #6d5200; border-left-color: var(--gold); }

/* ============================================================
   MOBILE-FRIENDLY LAYER  (<= 640px)
   Improves touch targets, spacing, entry forms, and tables on phones.
   ============================================================ */

/* Prevent iOS zoom-on-focus: inputs must be >=16px. */
@media (max-width: 640px) {
    .form-control, .form-select {
        font-size: 16px;
        padding: .65rem .8rem;
    }
    /* Comfortable tap targets everywhere. */
    .btn { padding: .6rem 1rem; min-height: 44px; }
    .btn-sm { padding: .45rem .8rem; min-height: 38px; }
    .nav-tabs .nav-link { padding: .6rem .75rem; }
    a, .page-link { -webkit-tap-highlight-color: rgba(198,248,51,.3); }

    .app-main { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .container { padding-left: 1rem; padding-right: 1rem; }

    /* Cards: less inner padding so content isn't squeezed. */
    .card.p-4, .card.p-md-5, .card.p-5 { padding: 1.15rem !important; }

    h1, .h3 { font-size: 1.5rem; }
    .h4 { font-size: 1.25rem; }
    .display-score, .stat-tile .stat-num { font-size: 1.9rem; }
}

/* ---- Data-entry rows: stack the number + button full width ---- */
@media (max-width: 640px) {
    .list-group-item form.d-flex {
        flex-wrap: wrap;
        gap: .6rem !important;
    }
    .list-group-item form.d-flex > .flex-grow-1 {
        flex: 1 1 100%;
    }
    /* input + button share the second row */
    .list-group-item form.d-flex > input[type="number"] {
        max-width: none !important;
        flex: 1 1 auto;
    }
    .list-group-item form.d-flex > button {
        flex: 0 0 auto;
    }
}

/* ---- Navbar: brand smaller, full-width dropdowns ---- */
@media (max-width: 640px) {
    .app-navbar .navbar-brand { font-size: 1.4rem; }
    .app-navbar .navbar-collapse { padding-top: .5rem; }
    .app-navbar .nav-link { padding: .6rem .4rem; }
    .app-navbar .btn { width: 100%; margin: .25rem 0 0; }
    .app-navbar .dropdown-menu { width: 100%; }
    .app-navbar form.d-inline, .app-navbar .btn-outline-light, .app-navbar .btn-light { width: 100%; }
}

/* ---- Responsive tables -> stacked cards on phones ----
   Any table marked .table-stack becomes label:value cards below 640px.
   Each <td> shows its column label (from data-label) so no header row needed. */
@media (max-width: 640px) {
    table.table-stack thead { display: none; }
    table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td {
        display: block;
        width: 100%;
    }
    table.table-stack tr {
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        margin-bottom: .6rem;
        padding: .35rem .2rem;
        background: var(--surface);
    }
    table.table-stack td {
        border: none !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .4rem .8rem !important;
        text-align: right;
    }
    table.table-stack td::before {
        content: attr(data-label);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted);
        font-weight: 700;
        text-align: left;
        flex: 0 0 auto;
    }
    table.table-stack td:empty { display: none; }
    /* highlighted "me" row keeps its accent */
    table.table-stack tr.table-warning { border-color: var(--gold); }
}

/* ---- Pagination: wrap and enlarge on phones ---- */
@media (max-width: 640px) {
    .pagination { flex-wrap: wrap; gap: .25rem; }
    .pagination .page-link { min-width: 40px; text-align: center; }
}

/* ---- Stat tiles: 2 per row on phones instead of cramped 4 ---- */
@media (max-width: 480px) {
    .row.g-3 > [class*="col-"] .stat-tile { padding: .8rem .3rem; }
}

/* ============================================================
   DISCIPLINES — selectable cards (JS-driven .is-selected state)
   ============================================================ */
.discipline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}
.discipline-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, box-shadow .15s, transform .06s;
}
.discipline-card:hover { border-color: var(--muted); }
.discipline-card:active { transform: scale(.99); }
.discipline-card:focus-visible { outline: 3px solid rgba(198,248,51,.6); outline-offset: 2px; }

/* SELECTED — unmistakable: lime border, tinted surface, visible check. */
.discipline-card.is-selected {
    border-color: var(--lime-deep);
    background: rgba(198,248,51,.08);
}
.discipline-card__check {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    pointer-events: none; margin: 0;
}
.discipline-card__tick {
    position: absolute; top: .6rem; right: .6rem; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 2px solid var(--line);
    color: transparent;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.discipline-card.is-selected .discipline-card__tick {
    background: var(--lime);
    border-color: var(--lime-deep);
    color: var(--lime-ink);
    transform: scale(1.05);
}
.discipline-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
    flex-shrink: 0;
}
.discipline-card__media--empty {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-disp);
    font-size: 2.6rem;
    color: var(--muted);
}
.discipline-card__body {
    display: flex; flex-direction: column; gap: .4rem;
    padding: .9rem 1rem 1.05rem;
}
.discipline-card__title {
    font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: var(--text);
}
.discipline-card__points {
    align-self: flex-start;
    font-size: .78rem; font-weight: 600;
    color: var(--lime-ink);
    background: rgba(198,248,51,.4);
    border: 1px solid var(--lime-deep);
    padding: .14rem .55rem; border-radius: 999px;
}
.discipline-card__desc {
    font-size: .86rem; color: var(--muted); line-height: 1.5;
}

.discipline-save {
    position: sticky; bottom: 0;
    padding-top: .6rem;
    background: linear-gradient(to top, var(--surface-2) 55%, rgba(242,241,232,0));
}

/* ---- Mobile: image on TOP (banner), like desktop but tuned for phones ---- */
@media (max-width: 640px) {
    .discipline-grid { grid-template-columns: 1fr; gap: .75rem; }
    /* .discipline-card keeps its default column layout (image on top). */
    .discipline-card__media {
        aspect-ratio: 21 / 9;   /* a shorter banner so cards aren't too tall */
    }
    .discipline-card__media--empty { font-size: 2.2rem; }
    .discipline-card__body {
        padding: .8rem .9rem 1rem;
    }
    .discipline-card__title { font-size: 1.02rem; }
    .discipline-card__tick { top: .5rem; right: .5rem; width: 28px; height: 28px; }
}

/* ---- Home: workout entry cards ---- */
.entry-list { display: flex; flex-direction: column; gap: .7rem; }
.entry-card {
    border: 1px solid var(--border, #e6e3d7);
    border-radius: 14px;
    background: var(--surface, #fff);
    padding: .9rem 1.1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.entry-card:hover {
    border-color: #d3cfbe;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .06);
}
.entry-row {
    display: grid;
    grid-template-columns: 1fr auto; /* name | control */
    gap: .6rem 1.5rem;
    align-items: center;
}
.entry-row__name { min-width: 0; }
.entry-row__title { font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.entry-row__rate {
    display: inline-flex;
    align-items: center;
    margin-top: .35rem;
    padding: .18rem .62rem;
    font-size: .8rem;
    color: #6c6a5d;
    background: #f3f2ea;
    border-radius: 999px;
    white-space: nowrap;
}
.entry-row__control { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
.entry-row__group { width: 230px; flex-wrap: nowrap; }
.entry-row__group .form-control {
    text-align: center;
    font-weight: 600;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.entry-row__group .form-control::placeholder { font-size: .9rem; font-weight: 400; opacity: .65; }
.entry-row__group .btn {
    white-space: nowrap;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.entry-row__error { text-align: right; }

/* Number columns wide enough for 6 digits, never wrapping. */
.recent-entries .num-col { min-width: 92px; white-space: nowrap; }

@media (max-width: 575.98px) {
    /* Stack on small phones: name on top, control fills the width below. */
    .entry-row { grid-template-columns: 1fr; }
    .entry-row__group { width: 100%; }
    .entry-row__error { text-align: left; }
}

/* ---- Positions tab: even, aligned ladder tables ---- */
.positions-table { table-layout: fixed; }
.positions-table__img { width: 72px; text-align: center; }
.positions-table__req { width: 160px; }
@media (max-width: 575.98px) {
    .positions-table__img { width: 56px; }
    .positions-table__req { width: 120px; }
}

/* ---- Ranks ladder table: image flush left, required column never wraps ---- */
.ranks-ladder td, .ranks-ladder th { vertical-align: middle; }
.ranks-ladder thead th { white-space: nowrap; font-weight: 600; }
.ranks-ladder .rk-img {
    width: 1%;                 /* shrink to the image */
    white-space: nowrap;
    padding-left: 0;           /* image sits hard against the left edge */
    padding-right: .75rem;
    text-align: left;
}
.ranks-ladder .rk-req { white-space: nowrap; padding-left: 1.5rem; }


/* ---- Navbar "Записать тренировку" CTA ---- */
.btn-record {
    --bs-btn-padding-y: .34rem;
    --bs-btn-padding-x: .8rem;
    --bs-btn-font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
}
@media (max-width: 767.98px) {
    /* Line 1: brand (left) + toggler (right); line 2: full-width CTA below. */
    .btn-record {
        display: block;
        width: 100%;
        --bs-btn-padding-y: .5rem;
        --bs-btn-font-size: .9rem;
    }
    .app-navbar .navbar-toggler { padding: .25rem .55rem; }
}