/* KarateTrack — Karate School Management */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-dark: #1a1a2e;
    --bg-sidebar: #16213e;
    --bg-main: #f5f5f7;
    --bg-white: #ffffff;
    --accent: #c0392b;
    --accent-hover: #a93226;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #bdc3c7;
    --text-white: #ecf0f1;
    --border: #e0e0e0;
    --success: #27ae60;
    --warning: #f39c12;
    --danger: #e74c3c;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

html { font-size: 16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}

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

/* === Layout === */
.app {
    display: flex;
    min-height: 100vh;
}

/* === Sidebar === */
.sidebar {
    width: 250px;
    background: var(--bg-sidebar);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    /* --mvh is set in app.js from window.visualViewport.height — it's the
       actual visible viewport, updated as iOS Safari's URL bar shows or
       hides. Falls back to 100lvh (largest viewport) then 100vh for
       browsers without visualViewport. dvh alone didn't reliably update
       on iPhone 15 Safari; lvh alone made the sidebar oversized behind
       the URL bar when it was visible (#112 follow-up). */
    height: 100vh;
    height: 100lvh;
    height: var(--mvh, 100lvh);
    z-index: 100;
    transition: transform 0.3s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex: 1;
}

.sidebar-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-white);
}

.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 1.5rem;
    cursor: pointer;
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--text-light);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    font-size: 0.95rem;
}

.nav-item:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-white);
    text-decoration: none;
}

.nav-item.active {
    background: rgba(192, 57, 43, 0.3);
    color: var(--text-white);
    border-left: 3px solid var(--accent);
}

.nav-icon { font-size: 1.1rem; width: 1.2rem; text-align: center; }

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.user-name { color: var(--text-light); }
.logout-link { color: var(--text-light); }
.logout-link:hover { color: var(--text-white); }

/* === Main Content === */
.main-content {
    flex: 1;
    margin-left: 250px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content > .content {
    flex: 1;
}

.top-bar {
    background: var(--bg-white);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-primary);
}

.page-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.content {
    padding: 1.5rem;
    max-width: 1200px;
    overflow-x: hidden;
}

/* === Cards === */
.card {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.card-header-row h3 { margin-bottom: 0; }

/* === Stats Grid === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}

.stat-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-card-warning { border-left: 3px solid var(--warning); }

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
    white-space: nowrap;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* === Buttons === */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    line-height: 1.4;
}

.btn:hover { background: var(--bg-main); text-decoration: none; }

.btn-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover { background: #fdf0f0; }

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

.btn-large {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 700;
}

.btn-full { display: block; width: 100%; text-align: center; }

.btn-attendance {
    display: block;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    padding: 1rem;
}

/* === Tables === */
.table-responsive { overflow-x: auto; }

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

.table th, .table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody tr:hover { background: #f8f9fa; }

.table-compact td, .table-compact th { padding: 0.4rem 0.5rem; }

.row-inactive { opacity: 0.5; }

/* === Bulk-select sportivi list === */
.students-bulk-table .check-col { width: 2.5rem; text-align: center; }
.students-bulk-table .menu-col { width: 3rem; text-align: center; position: relative; }

.row-check { cursor: pointer; width: 16px; height: 16px; }

.student-row.row-selected {
    background-color: #fef3c7;
}
.student-row.row-selected.row-inactive { opacity: 0.7; }

.row-menu-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.row-menu-btn:hover {
    background: #f3f4f6;
    color: var(--text, #111);
}

.row-menu {
    /* position: fixed escapes the .table-responsive overflow:auto clip box —
       previously the menu was hidden under the table scroll container when
       there was only one row (#119). JS positions it from the button's
       viewport coords. */
    display: none;
    position: fixed;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
    min-width: 180px;
    padding: 0.25rem;
    text-align: left;
}
.row-menu.open { display: block; }

.row-menu-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text, #111);
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
}
.row-menu-item:hover { background: #f3f4f6; }
.row-menu-item.menu-delete { color: #dc2626; }
.row-menu-item.menu-delete:hover { background: #fee2e2; }

.student-link { font-weight: 500; }

/* === Badges === */
.belt-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #333;
    border: 1px solid rgba(0,0,0,0.15);
}

.belt-badge-sm { padding: 0.1rem 0.5rem; font-size: 0.75rem; }

/* Dark belts need light text — match both with and without spaces, and rgb variants */
.belt-badge[style*="#000000"],
.belt-badge[style*="#000"],
.belt-badge[style*="#8B4513"],
.belt-badge[style*="#8b4513"],
.belt-badge[style*="#1E90FF"],
.belt-badge[style*="#1e90ff"],
.belt-badge[style*="#228B22"],
.belt-badge[style*="#228b22"],
.belt-badge[style*="rgb(0, 0, 0)"],
.belt-badge[style*="rgb(139, 69, 19)"],
.belt-badge[style*="rgb(30, 144, 255)"],
.belt-badge[style*="rgb(34, 139, 34)"] {
    color: white !important;
    border-color: transparent;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-paid { background: #e8f5e9; color: var(--success); }
.badge-unpaid { background: #fde8e8; color: var(--danger); }
.badge-inactive { background: #f0f0f0; color: var(--text-secondary); }

/* === Forms === */
.form-card { max-width: 700px; }

/* === Belt Config Cards === */
.belt-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.belt-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    background: #fafafa;
}

.belt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.belt-card-order {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.form-group {
    margin-bottom: 1rem;
    flex: 1;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-white);
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}

.form-group input[type="color"] {
    height: 38px;
    padding: 2px;
    cursor: pointer;
}

.input-sm { max-width: 200px; }

.form-row {
    display: flex;
    gap: 1rem;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input { width: auto; }

/* === Alerts === */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.alert-error { background: #fde8e8; color: #c62828; border: 1px solid #ffcdd2; }

/* === Toolbar & Search === */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    width: 200px;
}

.search-select {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.filter-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-row select {
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

/* === Date Selector === */
.date-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.date-selector input[type="date"] {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
}

/* === Attendance Header === */
.attendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.select-all-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.student-name { flex: 1; font-weight: 500; }

/* === Student Detail === */
.student-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.student-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.student-actions { display: flex; gap: 0.5rem; }

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* === Progress Bar === */
.progress-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.progress-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* === Info List === */
.info-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.9rem;
}

.info-list dt { color: var(--text-secondary); font-weight: 500; }
.info-list dd { color: var(--text-primary); }

/* === Belt Timeline === */
.belt-timeline {
    list-style: none;
    padding: 0;
}

.belt-timeline li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

/* === Date List === */
.date-list {
    list-style: none;
    padding: 0;
    columns: 2;
    font-size: 0.9rem;
}

.date-list li {
    padding: 0.3rem 0;
    border-bottom: 1px solid #f8f8f8;
}

/* === Activity List === */
.activity-list {
    list-style: none;
    padding: 0;
}

.activity-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

/* === Login === */
.login-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-dark);
}

.login-body .login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-container { text-align: center; }

.login-card {
    background: var(--bg-white);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    width: 360px;
    max-width: 90vw;
}

.login-logo-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.login-logo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.login-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.login-footer {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: 1.5rem;
}

.text-muted { color: var(--text-secondary); }

/* === Mobile Responsive === */
/* Mobile / touch: fires on small viewports OR any device with a coarse pointer
   (phone, tablet, touchscreen laptop). Modern phones report ~360-430 CSS px so
   the max-width condition catches them, but pointer: coarse is the belt-and-
   suspenders for anything reporting a wider viewport. */
@media (max-width: 768px), (pointer: coarse) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close { display: block; }

    .main-content { margin-left: 0; max-width: 100vw; overflow-x: hidden; }

    .hamburger { display: block; }

    .content { padding: 1rem; }

    /* Safety net: nothing on the page should ever cause horizontal scroll
       on a phone — if a wide table or long word leaks, clip it instead of
       blowing out the viewport */
    body { overflow-x: hidden; }

    .form-row { flex-direction: column; gap: 0; }

    .detail-grid { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .toolbar { flex-direction: column; align-items: stretch; }

    .search-form { flex-direction: column; }

    .search-input { width: 100%; }

    .student-header { flex-direction: column; }

    .date-list { columns: 1; }

    .filter-row { flex-direction: column; }

    .table { font-size: 0.95rem; }
    .table th, .table td { padding: 0.55rem 0.4rem; }
    .table th { font-size: 0.7rem; }
    .table-compact td, .table-compact th { padding: 0.45rem 0.35rem; }

    /* Bigger, finger-friendly form inputs (also prevents iOS zoom-on-focus) */
    .form-group input, .form-group select, .form-group textarea {
        font-size: 1rem;
        padding: 0.65rem 0.8rem;
    }
    .form-group label { font-size: 0.95rem; }

    /* Bigger buttons */
    .btn { font-size: 1rem; padding: 0.6rem 1rem; }
    .btn-sm { font-size: 0.9rem; padding: 0.5rem 0.8rem; }

    /* Sidebar nav: tight enough that all ~14 items + header + footer fit
       inside the smallest iPhone visible viewport (~750px svh on iPhone 15)
       without needing to scroll. Targets ~44px per item — Apple's
       minimum recommended tap target. overflow-y: auto on .sidebar
       still kicks in on smaller phones or if module count grows (#113). */
    .nav-item { padding: 0.6rem 1.5rem; font-size: 1rem; }
    .sidebar-header { padding: 0.9rem 1.5rem; }

    /* Page title bigger */
    .page-title { font-size: 1.3rem; }

    /* Stat label */
    .stat-label { font-size: 0.95rem; }

    /* Belt badges */
    .belt-badge { font-size: 0.85rem; padding: 0.25rem 0.6rem; }

    /* Bulk-select row checkbox */
    .row-check { width: 22px; height: 22px; }

    /* Attendance: 2-column grid, finger-friendly cards & checkboxes.
       minmax(0, 1fr) lets columns shrink below their content's min-content
       size — without it, a long name like "Patrick-Marian Tudorache" forces
       the column wider than half-viewport and overflows. min-width: 0 +
       word wrapping does the same on the item side. */
    .att-cards {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.6rem;
    }
    .att-card {
        font-size: 1rem;
        padding: 0.7rem 0.6rem;
        min-height: 44px;
        gap: 0.55rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .att-card > span {
        min-width: 0;
        flex: 1 1 auto;
        overflow-wrap: anywhere;
    }
    .att-card input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
    .att-belt-header { padding: 0.7rem 0.85rem; }
    .att-belt-name { font-size: 0.95rem; }
    .att-belt-count { font-size: 0.9rem; }
    .attendance-header { font-size: 1rem; }
    .select-all-label { font-size: 1rem; }

    .hide-mobile { display: none !important; }

    .progress-bar-inline { width: 60px; }
    .progress-label { font-size: 0.8rem; }

    .belt-badge-sm { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Match the sidebar height — --mvh follows the actual visible
       viewport via JS (#112 follow-up). */
    height: 100vh;
    height: 100lvh;
    height: var(--mvh, 100lvh);
    background: rgba(0,0,0,0.5);
    z-index: 90;
}

.sidebar-overlay.active { display: block; }

/* Lock body scroll while the sidebar is open so swipe gestures don't
   chain through to the page underneath (#112). */
body.sidebar-open { overflow: hidden; }

/* === Ranking === */
.ranking-pos {
    font-weight: 600;
    color: var(--text-secondary);
}

.ranking-top {
    color: var(--accent);
    font-size: 1.1rem;
}

/* === SOTY leaderboard avatar === */
.soty-student-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.soty-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
}

.soty-avatar-placeholder {
    background: var(--border, #e5e7eb);
    border: 1px solid var(--border, #d1d5db);
}

/* === SOTY leaderboard polish (#92) === */
.soty-clasament-table th.soty-event-col {
    max-width: 140px;
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.25;
}
.soty-clasament-table td.soty-event-col {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.soty-clasament-table th,
.soty-clasament-table td {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.soty-clasament-table th:last-child,
.soty-clasament-table td:last-child {
    border-right: none;
}
.soty-clasament-table th.soty-sort {
    cursor: pointer;
    user-select: none;
}
.soty-clasament-table th.soty-sort:hover {
    background: rgba(0, 0, 0, 0.03);
}
.soty-clasament-table th.soty-sort::after {
    content: "\2195";
    opacity: 0.25;
    margin-left: 0.25em;
    font-size: 0.85em;
}
.soty-clasament-table th.sorted-asc::after {
    content: "\2191";
    opacity: 1;
}
.soty-clasament-table th.sorted-desc::after {
    content: "\2193";
    opacity: 1;
}

/* SOTY event detail: brief highlight on the just-added student's card */
.soty-sportiv-highlight {
    animation: soty-pulse 2.5s ease-out;
}
@keyframes soty-pulse {
    0%   { background-color: #fef3c7; }
    100% { background-color: transparent; }
}

/* === SOTY clasament mobile (#110): sticky first 3 columns + tighter card ===
   Total was moved from last column to 3rd in PHP. On mobile, freeze the
   first 3 columns (#, Sportiv, Total) so the most important info stays
   visible while the user scrolls horizontally through event columns.
   Avatar hidden to give the name more room; card padding shrunk so the
   table can use nearly the full viewport width.

   Key: .soty-student-cell uses display:flex at desktop for avatar+name.
   Browsers treat a display:flex <td> as NOT-a-table-cell, which breaks
   both position:sticky AND vertical baseline alignment. So on mobile we
   force it back to display:table-cell. Targets use class selectors
   (.soty-rank-col / .ranking-pos for col 1, .soty-name-col /
   .soty-student-cell for col 2, .soty-total-col for col 3) instead of
   :nth-child so column reorders don't silently break the rules. */
@media (max-width: 768px), (pointer: coarse) {
    /* Tight card padding so the table can use almost the full viewport */
    .card-soty-clasament { padding: 0.3rem; }

    /* border-collapse: separate (with border-spacing:0) keeps borders
       *owned* by each cell instead of shared between adjacent cells.
       With collapse, position:sticky cells could end up with the border
       belonging to the scrolling neighbour, which then moved with the
       scroll and exposed the sticky cell's underside. */
    .soty-clasament-table {
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.85rem;
    }

    .soty-clasament-table th,
    .soty-clasament-table td {
        padding: 0.4rem 0.3rem;
        background: var(--bg-white);
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    /* Restore table-cell behaviour on the Sportiv column so it sticks
       and aligns with its row siblings (display:flex makes a <td> stop
       behaving as a table-cell, which breaks position:sticky and the
       baseline alignment). */
    .soty-clasament-table .soty-student-cell {
        display: table-cell;
        vertical-align: middle;
        gap: 0;
    }

    /* Sticky positioning on the first 3 columns */
    .soty-clasament-table .soty-rank-col,
    .soty-clasament-table .ranking-pos,
    .soty-clasament-table .soty-name-col,
    .soty-clasament-table .soty-student-cell,
    .soty-clasament-table .soty-total-col {
        position: sticky;
        z-index: 2;
    }

    .soty-clasament-table .soty-rank-col,
    .soty-clasament-table .ranking-pos {
        left: 0;
        width: 26px;
        min-width: 26px;
        max-width: 26px;
        padding-left: 0.25rem;
        padding-right: 0.2rem;
        text-align: center;
    }

    /* Keep the highlight-top color but tame the 1.1rem font down to
       table-size on mobile so 2-digit ranks fit in the 26px column */
    .soty-clasament-table .ranking-pos.ranking-top { font-size: 0.95rem; }

    .soty-clasament-table .soty-name-col,
    .soty-clasament-table .soty-student-cell {
        left: 26px;
        width: 105px;
        min-width: 105px;
        max-width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .soty-clasament-table .soty-total-col {
        left: 131px;
        width: 56px;
        min-width: 56px;
        max-width: 56px;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        text-align: center;
        /* tabular-nums = uniform digit width so 355.25 and 50.00 occupy
           the same horizontal space; combined with overflow:hidden as a
           backstop in case a 4-digit total ever needs to render */
        font-variant-numeric: tabular-nums;
        overflow: hidden;
        /* box-shadow inset draws on top of the background so it can't be
           "stolen" by a neighbouring cell during sticky scroll — belt-and-
           suspenders alongside border-collapse:separate above */
        box-shadow: inset -2px 0 0 0 rgba(0, 0, 0, 0.25);
        border-right: none;
    }

    /* Hide avatar in the Sportiv cell — name gets the room */
    .soty-clasament-table .soty-avatar,
    .soty-clasament-table .soty-avatar-placeholder {
        display: none;
    }
}

/* === Bonus attendance form === */
.bonus-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.bonus-form input[type="number"] { width: 100px; }

.input-bonus-note {
    flex: 1;
    min-width: 150px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

/* === Dashboard Charts === */
.chart-with-axis {
    display: flex;
    gap: 0.25rem;
}

.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    padding-bottom: 1.5rem;
    min-width: 25px;
}

.chart-y-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    line-height: 1;
}

.chart-container {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
    position: relative;
    flex: 1;
}

.chart-bar-wrapper {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.chart-bar {
    width: 100%;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s;
}

.chart-bar-wrapper:hover .chart-bar { opacity: 0.8; }

.chart-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    position: absolute;
    bottom: -1.3rem;
    white-space: nowrap;
}

/* Demographics */
.demo-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 140px;
    padding-top: 0.5rem;
}

.demo-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.demo-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.demo-legend {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.demo-legend-item { display: flex; align-items: center; gap: 0.3rem; }

.demo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.demo-dot-f { background: #e74c8b; }
.demo-dot-m { background: #3498db; }

.demo-bar-stacked {
    width: 70%;
    border-radius: 3px 3px 0 0;
    display: flex;
    flex-direction: column;
    min-height: 4px;
    overflow: hidden;
}

.demo-segment-f { background: #e74c8b; }
.demo-segment-m { background: #3498db; }

.demo-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    position: absolute;
    top: -1.2rem;
    width: 100%;
    text-align: center;
}

.demo-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.demo-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    text-align: center;
}

/* Absent students */
.absent-list {
    display: flex;
    flex-direction: column;
}

.absent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.absent-days {
    font-size: 0.8rem;
    color: var(--warning);
    font-weight: 500;
}

.absent-critical {
    color: var(--danger);
}

/* Birthday list */
.birthday-list {
    display: flex;
    flex-direction: column;
}

.birthday-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.birthday-date {
    font-weight: 600;
    color: var(--accent);
    min-width: 50px;
    font-size: 0.85rem;
}

/* === Attendance compact cards === */
.att-belt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: 0.75rem;
    color: #333;
}

.att-belt-header:first-child { margin-top: 0; }
.att-belt-header { cursor: pointer; }

/* Dark text on light belts, light text on dark belts */
.att-belt-header[style*="#000"], .att-belt-header[style*="#8B4513"],
.att-belt-header[style*="#63421b"], .att-belt-header[style*="#1E90FF"],
.att-belt-header[style*="#1f7f5c"], .att-belt-header[style*="#228B22"],
.att-belt-header[style*="#256995"] {
    color: white;
}

.att-belt-name {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.att-belt-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.att-belt-count {
    font-size: 0.8rem;
    opacity: 0.9;
}

.att-belt-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.att-belt-collapsed + .att-cards {
    display: none;
}

.att-belt-collapsed {
    border-radius: var(--radius);
    margin-bottom: 0;
}

.att-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    margin-bottom: 0;
}

.att-card {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    background: var(--bg-white);
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.att-card:hover {
    background: #f0f0f0;
}

.att-card-checked {
    background: #e8f5e9;
    border-color: var(--success);
}

.att-card input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--success);
    margin: 0;
}

.date-time-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.date-time-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-time-group select, .date-time-group input {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
}

.text-center { text-align: center; }

#autoSaveStatus {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* === Grading === */
.grading-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
}

.grading-section-header h3 { margin-bottom: 0; }

.grading-ready { border-bottom-color: var(--success); }
.grading-not-ready { border-bottom-color: var(--danger); }

.progress-bar-inline {
    display: inline-block;
    width: 120px;
    height: 10px;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.progress-complete { background: var(--success); }

.progress-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.notes-row td {
    background: #f8f9fa;
    padding: 0.5rem !important;
}

.notes-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.notes-form textarea {
    flex: 1;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

/* === Calendar === */
.calendar {
    margin-bottom: 1.25rem;
}

.calendar:last-child { margin-bottom: 0; }

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.calendar-nav-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.calendar-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-header {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.25rem 0;
    text-transform: uppercase;
}

.calendar-day {
    text-align: center;
    font-size: 0.8rem;
    padding: 0.35rem 0;
    border-radius: 4px;
    color: var(--text-primary);
}

.calendar-empty { visibility: hidden; }

.calendar-attended {
    background: var(--accent);
    color: white;
    font-weight: 600;
}

.calendar-today {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.calendar-today.calendar-attended {
    outline-color: var(--accent-hover);
}

/* === Invite / Reset Link Box === */
.invite-link-box {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.invite-link-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    background: #f8f9fa;
    font-family: monospace;
}

/* === Video Management (Admin) === */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
}

.video-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.video-thumbnail {
    flex-shrink: 0;
    width: 120px;
}

.video-thumbnail img {
    width: 100%;
    border-radius: var(--radius);
}

.video-info {
    flex: 1;
}

.video-info h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.video-belts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.belt-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.belt-check {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #f8f9fa;
}

.study-file-thumb img {
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.study-pdf-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    aspect-ratio: 16 / 10;
    background: #f8f9fa;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    padding: 0.5rem;
    text-align: center;
}

.study-pdf-icon .pdf-icon {
    background: #d93025;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.study-pdf-icon .pdf-name {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.study-portal-thumb {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
}

.study-portal-thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

/* === Student Portal === */
.portal-welcome {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.portal-welcome h3 {
    font-size: 1.5rem;
    margin: 0;
}

.portal-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
}

.portal-video-item {
    margin-bottom: 0.5rem;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* === Sportivul Anului Event Detail === */
.soty-event-container {
    background: var(--bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.soty-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 1rem;
}

.soty-event-header h3 {
    font-size: 1.2rem;
}

.soty-add-student {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.soty-sportiv-card {
    background: #f8f9fa;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.soty-sportiv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.soty-sportiv-name {
    font-weight: 600;
    font-size: 1rem;
}

.soty-probe-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-white);
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.35rem;
    margin-left: 0.5rem;
}

.soty-probe-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.soty-probe-name {
    font-weight: 500;
    font-size: 0.85rem;
}

.soty-probe-points {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-size: 0.9rem;
}

.soty-add-probe {
    margin-left: 0.5rem;
    margin-top: 0.25rem;
}

.soty-add-probe summary {
    list-style: none;
}

.soty-add-probe summary::-webkit-details-marker { display: none; }

.soty-add-probe .form-group { margin-bottom: 0.5rem; }
.soty-add-probe .form-row { gap: 0.5rem; }

/* === Search Results Dropdown === */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 200;
}

.search-result-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
}

.search-result-item:hover {
    background: #f0f4ff;
}

.search-result-item:last-child { border-bottom: none; }

/* === Training Day Cards (Program Kata) === */
.training-day-past {
    opacity: 0.6;
}

.training-section {
    margin-top: 1rem;
}

.training-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.training-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.training-team-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    min-width: 200px;
    flex: 1;
    max-width: 300px;
    background: #fafafa;
}

.training-team-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.training-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f0f0f0;
    min-height: 2rem;
}

.training-slot:last-child { border-bottom: none; }

.training-slot-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.training-slot-remove {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
}

.training-slot-remove:hover { color: var(--accent); }

.training-slot-search {
    flex: 1;
    position: relative;
}

.training-search-input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--bg-white);
}

.training-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.training-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 150px;
    overflow-y: auto;
    z-index: 200;
}

.training-individual-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.training-individual-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    min-width: 180px;
    flex: 1;
    max-width: 250px;
    background: #fafafa;
}

/* === Probe form details === */
.probe-add-details summary {
    list-style: none;
}

.probe-add-details summary::-webkit-details-marker { display: none; }

.probe-add-form .form-group { margin-bottom: 0.5rem; }
.probe-add-form .form-row { gap: 0.5rem; }

/* === Mobile additions === */
@media (max-width: 768px), (pointer: coarse) {
    .student-actions { flex-wrap: wrap; }
    .progress-bar-inline { width: 80px; }
    .notes-form { flex-direction: column; }
    .date-time-form { flex-direction: column; align-items: stretch; }
    .invite-link-box { flex-direction: column; }
    .video-grid { grid-template-columns: 1fr; }
    .video-card { flex-direction: column; }
    .video-thumbnail { width: 100%; }
    .portal-video-grid { grid-template-columns: 1fr; }
    .portal-welcome { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .training-teams { flex-direction: column; }
    .training-team-card { max-width: 100%; }
    .training-individual-slots { flex-direction: column; }
    .training-individual-card { max-width: 100%; }
}

/* === Site Footer (Netopia compliance) === */
.site-footer {
    background: var(--bg-sidebar);
    color: var(--text-light);
    padding: 2rem 1.5rem 1rem;
    margin-top: 2rem;
    font-size: 0.85rem;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* min(240px, 100%) lets a column shrink to container width when the
       container is narrower than 240px. Without this, three 240px columns
       force the footer to ~784px and overflow .main-content at any
       viewport between 768px (mobile breakpoint) and ~1034px (where
       sidebar 250 + footer 784 first fits) — visible as horizontal
       scroll across all admin pages, including /attendance. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 2rem;
}

.site-footer .footer-col h4 {
    color: var(--text-white);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.site-footer p { margin-bottom: 0.25rem; }

.site-footer a {
    color: var(--text-light);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--text-white);
    text-decoration: underline;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer ul li {
    padding: 0.15rem 0;
}

.footer-payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.site-footer-bottom {
    max-width: 1200px;
    margin: 1.5rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-light);
}

/* === Legal page content === */
.legal-page {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-white);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    line-height: 1.7;
}

.legal-page h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--accent);
}

.legal-page h2 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.legal-page h3 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}

.legal-page p, .legal-page ul, .legal-page ol {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.legal-page ul, .legal-page ol {
    padding-left: 1.5rem;
}

.legal-page li { margin-bottom: 0.25rem; }

.legal-updated {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

.sticky-footer-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sticky-footer-body .legal-page-layout {
    flex: 1;
}

.legal-page-layout {
    background: var(--bg-main);
    padding: 2rem 1rem;
}

.legal-page-nav {
    max-width: 900px;
    margin: 0 auto 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Payment items list (student portal "De platit") */
.plata-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.plata-item:last-child {
    border-bottom: none;
}

.plata-item-info {
    flex: 1;
    min-width: 200px;
}

.plata-item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .plata-item-action {
        align-items: flex-start;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
}