/* ============================================================================
   Referee — Redesign «Μοντέρνα» · Theme layer
   ----------------------------------------------------------------------------
   Καθαρά ΟΠΤΙΚΟ layer πάνω από Metronic 8 + Kendo/Telerik.
   ΔΕΝ αλλάζει markup, routes, ροές, δικαιώματα ή business logic.
   Φορτώνεται ΤΕΛΕΥΤΑΙΟ στο index.html ώστε να υπερισχύει.

   Πηγή: design_handoff_redesign/README.md (Design Tokens)
   ============================================================================ */

/* ─────────────────────────────  1. Design tokens  ───────────────────────── */

:root {
    /* Accent — παραμετρικό. Εναλλακτικές: #0E8A7B, #D9548C */
    --rf-accent: #5B54D9;
    --rf-accent-2: #7A74E8;
    --rf-accent-dark: #443DBB;
    --rf-accent-rgb: 91, 84, 217;
    --rf-accent-grad: linear-gradient(135deg, #5B54D9, #7A74E8);
    --rf-accent-soft: #EEEDFB;
    /* Κείμενο */
    --rf-text: #22232E;
    --rf-text-muted: #5A5B69;
    --rf-text-faint: #8A8B99;
    --rf-text-disabled: #B4B5C2;
    /* Επιφάνειες */
    --rf-bg: #F7F7FA;
    --rf-surface: #FFFFFF;
    --rf-surface-2: #F2F2F8;
    --rf-surface-3: #E7E7F0;
    --rf-border: #ECECF2;
    --rf-border-row: #F4F4F8;
    /* Σημασιολογικά */
    --rf-success: #2E9E68;
    --rf-success-bg: #E9F6EF;
    --rf-danger: #E25C4A;
    --rf-danger-bg: #FDEEEC;
    --rf-danger-border: #F5C9C3;
    --rf-warning: #C98A2E;
    --rf-warning-bg: #FFF4E0;
    --rf-warning-text: #8A6116;
    /* Σχήμα */
    --rf-radius-card: 16px;
    --rf-radius-sm: 10px;
    --rf-radius-md: 14px;
    --rf-radius-tile: 11px;
    --rf-radius-pill: 99px;
    --rf-shadow: 0 1px 3px rgba(20,20,43,.06);
    --rf-shadow-hover: 0 4px 16px rgba(20,20,43,.1);
    --rf-shadow-link: 0 6px 20px rgba(20,20,43,.12);
    /* Τυπογραφία */
    --rf-font: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --rf-fs-base: 13.5px;
    /* Layout */
    --rf-sidebar-width: 265px;
    --rf-header-height: 72px;
    --rf-content-max: 100%;
    --rf-content-pad-x: 32px;
    --rf-transition: 150ms ease;
    /* ── Bootstrap / Metronic bridge ── */
    --bs-font-sans-serif: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
    --bs-primary: #5B54D9;
    --bs-primary-rgb: 91, 84, 217;
    --bs-body-color: #22232E;
    --bs-body-bg: #F7F7FA;
    --bs-border-radius: 10px;
    --kt-primary: #5B54D9;
    --kt-primary-active: #443DBB;
    --kt-primary-light: #EEEDFB;
    --kt-primary-inverse: #ffffff;
    --kt-primary-rgb: 91, 84, 217;
    --kt-success: #2E9E68;
    --kt-success-active: #268255;
    --kt-success-light: #E9F6EF;
    --kt-danger: #E25C4A;
    --kt-danger-active: #C94A3A;
    --kt-danger-light: #FDEEEC;
    --kt-warning: #C98A2E;
    --kt-warning-light: #FFF4E0;
    --kt-app-bg-color: #F7F7FA;
    --kt-body-bg: #F7F7FA;
    --kt-text-gray-900: #22232E;
    --kt-text-gray-800: #22232E;
    --kt-text-gray-700: #5A5B69;
    --kt-text-gray-600: #5A5B69;
    --kt-text-gray-500: #8A8B99;
    --kt-text-gray-400: #8A8B99;
    --kt-border-color: #ECECF2;
    /* Layout metrics του Metronic */
    --kt-app-sidebar-width: 265px;
    --kt-app-sidebar-width-actual: 265px;
    --kt-app-sidebar-minimize-bg-color: #FFFFFF;
    --kt-app-sidebar-minimize-box-shadow: 0 6px 24px rgba(20,20,43,.10);
    --kt-app-header-height: 0px;
    --kt-app-header-height-actual: 0px;
    /* ── Kendo / Telerik bridge ── */
    --kendo-color-primary: #5B54D9;
    --kendo-color-primary-hover: #514ACD;
    --kendo-color-primary-active: #443DBB;
    --kendo-color-primary-subtle: #EEEDFB;
    --kendo-color-primary-subtle-hover: #E3E1F8;
    --kendo-color-primary-on-surface: #5B54D9;
    --kendo-color-success: #2E9E68;
    --kendo-color-error: #E25C4A;
    --kendo-color-warning: #C98A2E;
    --kendo-border-radius-md: 10px;
    --kendo-font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* Διατήρηση των states του Metronic sidebar (πρέπει να έρθουν ΜΕΤΑ το :root) */
[data-kt-app-sidebar-minimize=on] {
    --kt-app-sidebar-width: 75px;
}

[data-kt-app-sidebar-collapse=on] {
    --kt-app-sidebar-width: 0px;
}

[data-kt-app-sidebar-sticky=on] {
    --kt-app-sidebar-width: 265px;
}

/* ─────────────────────────────  2. Βάση  ────────────────────────────────── */

html,
body {
    font-family: var(--rf-font) !important;
}

body {
    background-color: var(--rf-bg);
    color: var(--rf-text);
    font-size: var(--rf-fs-base);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--rf-accent);
    text-decoration: none;
    transition: color var(--rf-transition);
}

    a:hover {
        color: var(--rf-accent-dark);
    }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--rf-text);
    font-weight: 800;
    letter-spacing: -.01em;
}

.text-primary {
    color: var(--rf-accent) !important;
}

.text-muted {
    color: var(--rf-text-faint) !important;
}

/* Ορατό focus για πληκτρολόγιο (προσβασιμότητα) */
:focus-visible {
    outline: 2px solid var(--rf-accent);
    outline-offset: 2px;
}

@keyframes livepulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .15;
    }
}

/* ─────────────────────────────  3. Sidebar  ─────────────────────────────── */

.app-sidebar {
    background-color: var(--rf-surface) !important;
    border-right: 1px solid var(--rf-border);
    box-shadow: none !important;
    /* Ποτέ ψηλότερο από την οθόνη: αλλιώς η κάρτα χρήστη πέφτει κάτω από το viewport.
       ΠΡΟΣΟΧΗ: χωρίς position/align-self εδώ — το Metronic το κρατάει fixed και
       οποιαδήποτε αλλαγή positioning το ρίχνει πίσω μέσα στη ροή της σελίδας. */
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* Μόνο η λίστα του μενού κάνει scroll — logo, κάρτα χρήστη και έκδοση μένουν σταθερά.
       ΠΡΟΣΟΧΗ: το markup ΔΕΝ πρέπει να έχει την utility .overflow-hidden εδώ — είναι
       overflow:hidden !important και ακυρώνει το scroll του μενού. */
    .app-sidebar .app-sidebar-menu {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

        .app-sidebar .app-sidebar-menu::-webkit-scrollbar {
            width: 6px;
        }

        .app-sidebar .app-sidebar-menu::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background: rgba(20,20,43,.18);
        }

        .app-sidebar .app-sidebar-menu::-webkit-scrollbar-track {
            background: transparent;
        }

        /* Το data-kt-scroll του Metronic βάζει inline ύψος υπολογισμένο από στοιχεία
           που δεν υπάρχουν πια (top bar) — το αγνοούμε και αφήνουμε το flex */
        .app-sidebar .app-sidebar-menu .app-sidebar-wrapper {
            height: auto !important;
            max-height: none !important;
            /* Το hover-scroll-overlay-y του Metronic βάζει overflow-y:hidden εδώ· με
               height:auto μεγαλώνει ελεύθερα και σκρολάρει ο γονέας. */
            overflow: visible !important;
        }

    .app-sidebar .app-sidebar-logo,
    .app-sidebar .rf-sidebar-user,
    .app-sidebar #kt_app_sidebar_footer {
        flex-shrink: 0;
    }

    /* Logo area — 72px ώστε να ευθυγραμμίζεται με το header */
    .app-sidebar .app-sidebar-logo {
        height: var(--rf-header-height);
        min-height: var(--rf-header-height);
        border-bottom: none;
        padding-inline: 20px !important;
    }

        /* Flex layout του πλήρους logo χωρίς utility class (το d-inline-flex έχει
           !important και δεν άφηνε το Metronic να το κρύψει στο minimize) */
        .app-sidebar .app-sidebar-logo .app-sidebar-logo-default {
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .app-sidebar .app-sidebar-logo h1,
        .app-sidebar .app-sidebar-logo .rf-brand-title {
            color: var(--rf-text) !important;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -.01em;
            margin: 0;
        }

    /* Menu items — σταθερό ύψος ώστε η θέση κάθε επιλογής να μην αλλάζει
       ανάμεσα σε συμπτυγμένο και ανοιγμένο (με hover) sidebar */
    .app-sidebar .menu .menu-item .menu-link {
        border-radius: var(--rf-radius-tile);
        padding: 10px 13px;
        min-height: 41px;
        color: var(--rf-text-muted);
        font-size: 13.5px;
        font-weight: 600;
        transition: background-color var(--rf-transition), color var(--rf-transition);
    }

        /* Χωρίς αναδίπλωση: μια ετικέτα σε δύο γραμμές θα ψήλωνε το item μόνο
           στην ανοιγμένη μορφή και θα μετακινούσε όσα βρίσκονται από κάτω */
        .app-sidebar .menu .menu-item .menu-link .menu-title {
            color: inherit;
            font-size: 13.5px;
            font-weight: inherit;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-sidebar .menu .menu-item .menu-link .menu-icon,
        .app-sidebar .menu .menu-item .menu-link .menu-icon i {
            color: var(--rf-text-faint);
            font-size: 14px;
            width: 20px;
            transition: color var(--rf-transition);
        }

        .app-sidebar .menu .menu-item .menu-link:hover:not(.active) {
            background-color: var(--rf-surface-2);
            color: var(--rf-text);
        }

            .app-sidebar .menu .menu-item .menu-link:hover:not(.active) .menu-icon i {
                color: var(--rf-text-muted);
            }

        .app-sidebar .menu .menu-item .menu-link.active {
            background-color: var(--rf-accent-soft);
            color: var(--rf-accent);
            font-weight: 800;
        }

            .app-sidebar .menu .menu-item .menu-link.active .menu-title {
                font-weight: 800;
            }

            .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
                color: var(--rf-accent);
            }

/* Κάρτα χρήστη στο κάτω μέρος του sidebar */
.rf-sidebar-user {
    margin: 14px;
    padding: 14px 16px;
    background: var(--rf-accent-grad);
    border-radius: var(--rf-radius-md);
    color: #fff;
}

    .rf-sidebar-user .rf-sidebar-user-name {
        font-weight: 800;
        font-size: 13px;
        line-height: 1.25;
    }

    .rf-sidebar-user .rf-sidebar-user-meta {
        font-size: 11px;
        opacity: .8;
        margin-top: 2px;
    }

#kt_app_sidebar_footer h6 {
    color: var(--rf-text-disabled) !important;
    font-size: .75rem;
    opacity: 1 !important;
}

/* Συμπτυγμένο sidebar: η κάρτα χρήστη μένει ορατή σε συμπαγή μορφή
   (avatar πάνω από το κουμπί αποσύνδεσης) — κρύβουμε μόνο τα κείμενα */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .rf-sidebar-user {
    margin: 10px 8px;
    padding: 10px 6px;
}

    [data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .rf-sidebar-user > .d-flex {
        flex-direction: column;
        justify-content: center;
        gap: 8px !important;
    }

    [data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .rf-sidebar-user .rf-sidebar-user-text {
        display: none;
    }

    [data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .rf-sidebar-user .rf-sidebar-logout {
        margin-left: 0 !important;
    }

/* Η έκδοση δεν χωράει στα 75px — μένει κρυφή όσο είναι συμπτυγμένο */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) #kt_app_sidebar_footer {
    display: none;
}

/* Τα εικονίδια του menu κεντράρονται όσο είναι συμπτυγμένο */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .menu .menu-item .menu-link {
    justify-content: center;
    padding-inline: 0;
}



/* ─────────────────────────────  4. Header  ──────────────────────────────── */

.app-header {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    height: var(--rf-header-height);
}

    .app-header .app-container {
        padding-inline: var(--rf-content-pad-x);
    }

.rf-page-title {
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.01em;
    color: var(--rf-text);
}

/* Εικονίδια/avatar δεξιά στο header */
.app-navbar .btn-icon,
.rf-header-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    color: var(--rf-text-faint);
    transition: box-shadow var(--rf-transition), color var(--rf-transition);
}

    .app-navbar .btn-icon:hover,
    .rf-header-btn:hover {
        color: var(--rf-accent);
        box-shadow: var(--rf-shadow);
    }

.app-navbar .symbol > img,
.app-navbar .symbol .symbol-label {
    border-radius: 12px;
}

/* ─────────────────────────────  5. Content  ─────────────────────────────── */

#kt_app_content_container {
    max-width: var(--rf-content-max);
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--rf-content-pad-x);
    padding-bottom: 48px;
}

.app-content {
    padding-top: 8px;
}

/* ─────────────────────────────  6. Κάρτες  ──────────────────────────────── */

.card,
.rf-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
    transition: box-shadow var(--rf-transition);
}

    .card.rf-hoverable:hover,
    .rf-card.rf-hoverable:hover {
        box-shadow: var(--rf-shadow-hover);
    }

.rf-card-link {
    cursor: pointer;
}

    .rf-card-link:hover {
        box-shadow: var(--rf-shadow-link);
    }

.card .card-header {
    border-bottom: 1px solid var(--rf-border);
    min-height: auto;
    padding: 16px 22px;
}

.card .card-body {
    padding: 16px 22px;
}

.card .card-footer {
    border-top: 1px solid var(--rf-border);
    padding: 16px 22px;
}

.card .card-title,
.rf-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--rf-text);
    letter-spacing: -.01em;
    margin: 0;
}

.rf-section-gap {
    margin-bottom: 26px;
}

/* Gradient header καρτών / hero */
.rf-gradient {
    background: var(--rf-accent-grad);
    color: #fff;
}

    .rf-gradient .rf-kpi-value,
    .rf-gradient .rf-section-title,
    .rf-gradient a {
        color: #fff;
    }

/* Icon tile */
.rf-icon-tile {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
}

    .rf-icon-tile.rf-tile-danger {
        background: var(--rf-danger-bg);
        color: var(--rf-danger);
    }

    .rf-icon-tile.rf-tile-success {
        background: var(--rf-success-bg);
        color: var(--rf-success);
    }

    .rf-icon-tile.rf-tile-warning {
        background: var(--rf-warning-bg);
        color: var(--rf-warning);
    }

    .rf-icon-tile.rf-tile-muted {
        background: var(--rf-surface-2);
        color: var(--rf-text-faint);
    }

/* Date tile (ορισμοί) */
.rf-date-tile {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: var(--rf-surface-2);
    color: var(--rf-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
}

    .rf-date-tile .rf-date-day {
        font-size: 16px;
        font-weight: 800;
    }

    .rf-date-tile .rf-date-month {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--rf-text-faint);
    }

/* KPI */
.rf-kpi-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rf-text-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.rf-gradient .rf-kpi-label {
    color: rgba(255,255,255,.75);
}

.rf-kpi-value {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.rf-kpi-value-accent {
    color: var(--rf-accent);
}

/* ─────────────────────────────  7. Κουμπιά  ─────────────────────────────── */

.btn {
    border-radius: var(--rf-radius-sm);
    font-weight: 700;
    font-size: 13px;
    transition: background-color var(--rf-transition), color var(--rf-transition), box-shadow var(--rf-transition);
}

.btn.btn-primary,
.rf-btn-primary {
    background-color: var(--rf-accent);
    border-color: var(--rf-accent);
    color: #fff;
}

    .btn.btn-primary:hover:not(:disabled),
    .btn.btn-primary:focus:not(:disabled),
    .btn.btn-primary:active:not(:disabled),
    .rf-btn-primary:hover:not(:disabled) {
        background-color: var(--rf-accent-dark) !important;
        border-color: var(--rf-accent-dark) !important;
        color: #fff !important;
    }

.btn.btn-light,
.btn.btn-secondary,
.btn.btn-light-primary,
.rf-btn-secondary {
    background-color: var(--rf-surface-2);
    border-color: transparent;
    color: var(--rf-text-muted);
}

    .btn.btn-light:hover:not(:disabled),
    .btn.btn-secondary:hover:not(:disabled),
    .btn.btn-light-primary:hover:not(:disabled),
    .rf-btn-secondary:hover:not(:disabled) {
        background-color: var(--rf-surface-3) !important;
        color: var(--rf-text) !important;
    }

.btn.btn-success {
    background-color: var(--rf-success);
    border-color: var(--rf-success);
}

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

.btn.btn-warning {
    background-color: var(--rf-warning);
    border-color: var(--rf-warning);
}

.btn.btn-outline-danger,
.rf-btn-outline-danger {
    background: transparent;
    border: 1.5px solid var(--rf-danger-border);
    color: var(--rf-danger);
}

    .btn.btn-outline-danger:hover:not(:disabled),
    .rf-btn-outline-danger:hover:not(:disabled) {
        background-color: var(--rf-danger-bg) !important;
        border-color: var(--rf-danger-border) !important;
        color: var(--rf-danger) !important;
    }

.btn:disabled,
.btn.disabled {
    background-color: var(--rf-surface-2) !important;
    border-color: transparent !important;
    color: var(--rf-text-disabled) !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

/* Λευκό κουμπί με border (back, ειδοποιήσεις, φίλτρα) */
.rf-btn-ghost {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    color: var(--rf-text-muted);
    border-radius: var(--rf-radius-sm);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 14px;
}

    .rf-btn-ghost:hover {
        box-shadow: var(--rf-shadow);
        color: var(--rf-text);
    }

/* Εναλλαγή προβολής κάρτες/λίστα (segmented control) */
.rf-view-toggle {
    display: inline-flex;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-sm);
    padding: 3px;
    gap: 2px;
}

    .rf-view-toggle button {
        border: none;
        background: transparent;
        color: var(--rf-text-muted);
        border-radius: calc(var(--rf-radius-sm) - 3px);
        width: 34px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        transition: color var(--rf-transition), background var(--rf-transition);
    }

        .rf-view-toggle button.active {
            background: var(--rf-accent-soft);
            color: var(--rf-accent);
        }

        .rf-view-toggle button:hover:not(.active) {
            color: var(--rf-text);
        }

/* ─────────────────────────  8. Pills / badges / chips  ──────────────────── */

.badge,
.rf-pill {
    border-radius: var(--rf-radius-pill);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}

.rf-pill-accent,
.badge.badge-light-primary,
.badge.badge-primary {
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
}

.rf-pill-success,
.badge.badge-light-success {
    background: var(--rf-success-bg);
    color: var(--rf-success);
}

.rf-pill-danger,
.badge.badge-light-danger {
    background: var(--rf-danger-bg);
    color: var(--rf-danger);
}

.rf-pill-warning,
.badge.badge-light-warning {
    background: var(--rf-warning-bg);
    color: var(--rf-warning);
}

.rf-pill-neutral,
.badge.badge-light,
.badge.badge-secondary {
    background: var(--rf-surface-2);
    color: var(--rf-text-muted);
}

/* Κεντραρισμένος τίτλος στήλης — το TextAlign του Telerik πιάνει μόνο τα κελιά */
.k-grid .k-table-th.rf-th-center,
.k-grid .k-grid-header .k-header.rf-th-center {
    text-align: center;
}

    .k-grid .k-table-th.rf-th-center .k-cell-inner,
    .k-grid .k-grid-header .k-header.rf-th-center .k-cell-inner {
        justify-content: center;
    }

        .k-grid .k-table-th.rf-th-center .k-cell-inner > .k-link,
        .k-grid .k-grid-header .k-header.rf-th-center .k-cell-inner > .k-link {
            justify-content: center;
        }

/* Γραμμή συνημμένου αρχείου (π.χ. φωτογραφία κωλύματος εθνικού) */
.rf-file-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    background: var(--rf-surface);
}

    /* Προεπισκόπηση συνημμένης εικόνας μέσα στη γραμμή αρχείου */
    .rf-file-row .rf-file-thumb {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        object-fit: cover;
        flex-shrink: 0;
        border: 1px solid var(--rf-border);
        background: var(--rf-surface-2);
        cursor: pointer;
    }

/* Διαχωριστική γραμμή μέσα σε κάρτα φόρμας */
hr.rf-divider {
    border: 0;
    border-top: 1px solid var(--rf-border);
    opacity: 1;
}

/* Στρογγυλό εικονίδιο κατάστασης σε κελί grid (π.χ. οριστικοποίηση) */
.rf-status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

    /* Το Metronic χρωματίζει κατευθείαν κάθε i[class*=" fa-"] με το text-muted,
       οπότε το χρώμα του κύκλου δεν κληρονομείται — το επιβάλλουμε στο ίδιο το icon */
    .rf-status-icon > i {
        color: inherit;
    }

    /* Κλειδωμένο/οριστικοποιημένο: γεμάτο πράσινο, να ξεχωρίζει με μια ματιά */
    .rf-status-icon.is-ok {
        background: var(--rf-success);
        color: #fff;
    }

    /* Ξεκλείδωτο/εκκρεμεί: γεμάτο ουδέτερο γκρι, ώστε να φαίνεται το λευκό λουκέτο */
    .rf-status-icon.is-pending {
        background: var(--rf-text-disabled);
        color: #fff;
    }

.badge.badge-primary {
    background: var(--rf-accent);
    color: #fff;
}

.badge.badge-success {
    background: var(--rf-success);
    color: #fff;
}

.badge.badge-danger {
    background: var(--rf-danger);
    color: #fff;
}

/* Chip */
.rf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rf-surface-2);
    color: var(--rf-text-muted);
    border-radius: var(--rf-radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
}

/* Live dot */
.rf-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: livepulse 1.2s infinite;
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .rf-live-dot {
        animation: none;
    }
}

/* ─────────────────────────────  9. Πίνακες  ─────────────────────────────── */

.table {
    font-size: 12.5px;
    color: var(--rf-text);
    --bs-table-bg: transparent;
}

    .table > thead th,
    .table th {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--rf-text-faint);
        border-bottom: 1px solid var(--rf-border);
        vertical-align: middle;
    }

    .table > tbody td,
    .table td {
        border-bottom: 1px solid var(--rf-border-row);
        vertical-align: middle;
    }

    .table > tbody tr:last-child td {
        border-bottom: none;
    }

.rf-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rf-strong {
    font-weight: 800;
}

/* ─────────────────────────  10. Φόρμες / inputs  ────────────────────────── */

.form-control,
.form-select {
    border: 1.5px solid var(--rf-border);
    border-radius: var(--rf-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--rf-text);
    background-color: var(--rf-surface);
    transition: border-color var(--rf-transition), box-shadow var(--rf-transition);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--rf-accent);
        box-shadow: 0 0 0 3px rgba(var(--rf-accent-rgb), .12);
    }

    .form-control::placeholder {
        color: var(--rf-text-faint);
    }

.form-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rf-text-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.form-check-input:checked {
    background-color: var(--rf-accent);
    border-color: var(--rf-accent);
}

input[type=checkbox],
input[type=radio] {
    accent-color: var(--rf-accent);
}

textarea.form-control {
    min-height: 140px;
}

/* ────────────────────  11. Kendo / Telerik overrides  ───────────────────── */

.k-button-solid-primary {
    background-color: var(--rf-accent);
    border-color: var(--rf-accent);
    background-image: none;
    color: #fff;
}

    .k-button-solid-primary:hover {
        background-color: var(--rf-accent-dark);
        border-color: var(--rf-accent-dark);
    }

.k-button {
    border-radius: var(--rf-radius-sm);
    font-family: var(--rf-font);
    font-weight: 700;
}

.k-input,
.k-picker,
.k-textbox,
.k-dropdownlist,
.k-combobox .k-input,
.k-datepicker {
    border-radius: var(--rf-radius-sm);
    border-color: var(--rf-border);
    font-family: var(--rf-font);
}

    .k-input:focus-within,
    .k-picker:focus-within {
        border-color: var(--rf-accent);
        box-shadow: 0 0 0 3px rgba(var(--rf-accent-rgb), .12);
    }

    /* Χωρίς το default browser outline στο focus — μένει μόνο το απαλό ring από πάνω */
    .k-input:focus,
    .k-picker:focus,
    .k-input:focus-within,
    .k-picker:focus-within,
    .k-input .k-input-inner:focus,
    .k-input-inner:focus,
    .k-input-inner:focus-visible {
        outline: none !important;
    }

.k-grid {
    border-radius: var(--rf-radius-card);
    border-color: var(--rf-border);
    font-family: var(--rf-font);
    font-size: 12.5px;
    background: var(--rf-surface);
}

    .k-grid .k-grid-header {
        background: var(--rf-surface);
        border-color: var(--rf-border);
    }

        /* Χωρίς text-transform: οι τίτλοι γράφονται όπως θέλουμε (και μικρά ελληνικά)·
           όπου θέλουμε κεφαλαία, τα γράφουμε κεφαλαία στο Title της στήλης */
        .k-grid .k-grid-header .k-header,
        .k-grid .k-table-th {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            color: var(--rf-text-muted);
            border-color: var(--rf-border);
        }

        /* Το Telerik δίνει δικό του (σκούρο/έντονο) στυλ σε k-link/k-column-title
           των sortable headers — ευθυγράμμιση με το παραπάνω */
        .k-grid .k-grid-header .k-cell-inner > .k-link,
        .k-grid .k-grid-header .k-column-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            color: var(--rf-text-muted);
        }

    .k-grid td,
    .k-grid .k-table-td {
        border-color: var(--rf-border-row);
        color: var(--rf-text);
    }

    .k-grid tr.k-selected > td,
    .k-grid .k-table-row.k-selected > td {
        background-color: var(--rf-accent-soft) !important;
        color: var(--rf-text);
    }

    .k-grid tr:hover > td {
        background-color: var(--rf-surface-2);
    }

    /* Χωρίς zebra striping — όλες οι γραμμές λευκές, όπως στα mockups */
    .k-grid .k-table-alt-row,
    .k-grid tr.k-alt,
    .k-grid .k-table-alt-row > td,
    .k-grid tr.k-alt > td {
        background-color: transparent;
    }

    /* Ορατή διαχωριστική γραμμή ανάμεσα στις γραμμές */
    .k-grid .k-grid-content td,
    .k-grid .k-grid-content .k-table-td {
        border-bottom: 1px solid var(--rf-border);
    }

    /* Flat εμφάνιση όπως στα mockups: λευκά headers/filter row,
       χωρίς κάθετες γραμμές μεταξύ των στηλών */
    .k-grid .k-grid-header,
    .k-grid .k-grid-header .k-header,
    .k-grid .k-table-th,
    .k-grid .k-filter-row > td,
    .k-grid .k-filter-row .k-table-td,
    .k-grid .k-filtercell,
    .k-grid .k-grid-footer,
    .k-grid .k-pager {
        background-color: var(--rf-surface) !important;
    }

    .k-grid .k-table-th,
    .k-grid .k-grid-header .k-header,
    .k-grid td,
    .k-grid .k-table-td {
        border-left-width: 0 !important;
        border-right-width: 0 !important;
    }

/* ── Icon-only κουμπιά (π.χ. edit/delete στα grids): κεντραρισμένο εικονίδιο ──
   Το Telerik τυλίγει το περιεχόμενο σε .k-button-text που χαλάει το κεντράρισμα */
.btn.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .btn.btn-icon .k-button-text {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .btn.btn-icon i {
        line-height: 1;
    }

/* ── Λευκή κάρτα φίλτρων πάνω από τις λίστες ── */
.rf-filter-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
    padding: 18px 20px;
    margin-bottom: 16px;
}

/* ── Flat λίστα-κάρτα (π.χ. Οδοιπορικά): άνετα paddings γύρω-γύρω ── */
.rf-flat-grid .k-grid {
    padding: 8px 18px 4px;
    /* Τα εσωτερικά λευκά backgrounds ξεχείλωναν από το border-radius στις γωνίες */
    overflow: hidden;
}

    .rf-flat-grid .k-grid .k-table-th,
    .rf-flat-grid .k-grid .k-grid-header .k-header {
        padding: 18px 12px 12px;
    }

    .rf-flat-grid .k-grid .k-filter-row > td,
    .rf-flat-grid .k-grid .k-filter-row .k-table-td {
        padding: 6px 12px 14px;
    }

    .rf-flat-grid .k-grid .k-grid-content td,
    .rf-flat-grid .k-grid .k-grid-content .k-table-td {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .rf-flat-grid .k-pager {
        padding: 14px 6px;
        border-top: none;
    }

    /* Προκαθορισμένη ομαδοποίηση: κρύβουμε το drag-panel του Telerik */
    .rf-flat-grid .k-grouping-header {
        display: none;
    }

    .rf-flat-grid .k-grid .k-grouping-row td,
    .rf-flat-grid .k-grid .k-grouping-row .k-table-td {
        background: var(--rf-surface-2);
        border-bottom: 1px solid var(--rf-border);
    }

        /* Χωρίς το "ΑΓΩΝΑΣ:" prefix στο group header — μόνο η ετικέτα */
        .rf-flat-grid .k-grid .k-grouping-row .k-reset > .k-group-cell-label {
            display: none;
        }

    /* Το κενό indent κελί αριστερά των grouped γραμμών — λευκό σαν τη γραμμή */
    .rf-flat-grid .k-grid .k-group-cell,
    .rf-flat-grid .k-grid td.k-group-cell {
        background: var(--rf-surface) !important;
    }

.k-pager {
    background: var(--rf-surface);
    border-color: var(--rf-border);
    font-size: 12px;
    color: var(--rf-text-muted);
}

    .k-pager .k-selected {
        background-color: var(--rf-accent) !important;
        color: #fff !important;
        border-radius: 8px;
    }

.k-window,
.k-dialog {
    border-radius: var(--rf-radius-card);
    overflow: hidden;
    font-family: var(--rf-font);
    box-shadow: 0 20px 60px rgba(20,20,43,.18);
}

.k-window-titlebar,
.k-dialog-titlebar {
    background: var(--rf-surface);
    color: var(--rf-text);
    border-bottom: 1px solid var(--rf-border);
    font-weight: 800;
}

/* ─────────────────────────  12. Bottom nav (mobile)  ────────────────────── */

.rf-bottom-nav {
    display: none;
}

@media (max-width: 767.98px) {
    .rf-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        align-items: stretch;
        background: var(--rf-surface);
        border-top: 1px solid var(--rf-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(20,20,43,.06);
    }

        .rf-bottom-nav .rf-bn-item {
            flex: 1 1 0;
            min-height: 56px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            border: none;
            background: none;
            color: var(--rf-text-faint);
            font-size: 10.5px;
            font-weight: 700;
            text-decoration: none;
            padding: 6px 4px;
        }

            .rf-bottom-nav .rf-bn-item i {
                font-size: 17px;
            }

            .rf-bottom-nav .rf-bn-item.active {
                color: var(--rf-accent);
            }

    /* Χώρος ώστε το bottom nav να μην καλύπτει περιεχόμενο */
    #kt_app_content_container {
        padding-bottom: 84px;
        padding-inline: 16px;
    }

    .app-header .app-container {
        padding-inline: 16px;
    }
}

/* ─────────────────────────────  13. Responsive  ─────────────────────────── */

@media (max-width: 991.98px) {
    :root {
        --rf-content-pad-x: 20px;
    }

    .rf-kpi-value {
        font-size: 30px;
    }

    .rf-page-title {
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    /* Οι πίνακες αποκτούν οριζόντιο scroll αντί να σπάνε */
    .table-responsive,
    .rf-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hit targets >= 44px */
    .btn,
    .k-button {
        min-height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. Components σελίδων (redesign «Μοντέρνα»)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Επικεφαλίδα ενότητας με count pill ── */
.rf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 26px 0 12px;
}

.rf-head-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rf-head-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.rf-head-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--rf-text-faint);
}

.rf-count {
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
    border-radius: var(--rf-radius-pill);
    font-size: 11.5px;
    font-weight: 800;
    padding: 2px 9px;
    line-height: 1.5;
}

.rf-count-danger {
    background: var(--rf-danger-bg);
    color: var(--rf-danger);
}

.rf-count-success {
    background: var(--rf-success-bg);
    color: var(--rf-success);
}

.rf-count-warning {
    background: var(--rf-warning-bg);
    color: var(--rf-warning);
}

/* ── Grid βοηθοί ── */
.rf-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.rf-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.rf-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rf-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

@media (max-width: 1100px) {
    .rf-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rf-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .rf-grid-4,
    .rf-grid-3,
    .rf-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Quick action cards ── */
.rf-quick-card {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
    padding: 16px 18px;
    transition: box-shadow var(--rf-transition);
}

    .rf-quick-card:hover {
        box-shadow: var(--rf-shadow-link);
        color: inherit;
    }

.rf-quick-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.rf-quick-sub {
    display: block;
    font-size: 11.5px;
    color: var(--rf-text-faint);
    margin-top: 2px;
}

/* ── KPI card ── */
.rf-kpi-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
    padding: 18px 20px;
}

    .rf-kpi-card.rf-gradient {
        border-color: transparent;
    }

.rf-kpi-note {
    font-size: 11.5px;
    color: var(--rf-text-faint);
    margin-top: 6px;
}

.rf-gradient .rf-kpi-note {
    color: rgba(255,255,255,.8);
}

/* ── Κάρτα ορισμού / αγώνα ── */
.rf-item-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: box-shadow var(--rf-transition);
}

    .rf-item-card:hover {
        box-shadow: var(--rf-shadow-hover);
    }

.rf-item-main {
    flex: 1 1 240px;
    min-width: 0;
}

.rf-item-title {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.3;
}

.rf-item-meta {
    font-size: 11.5px;
    color: var(--rf-text-faint);
    font-weight: 600;
    margin-top: 3px;
}

.rf-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ── Κενή κατάσταση ── */
.rf-empty {
    background: var(--rf-surface);
    border: 1px dashed var(--rf-border);
    border-radius: var(--rf-radius-card);
    padding: 22px;
    text-align: center;
    color: var(--rf-text-faint);
    font-weight: 600;
    font-size: 12.5px;
}

/* ── Banners ── */
.rf-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--rf-radius-md);
    padding: 12px 15px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 14px;
}

.rf-banner-warning {
    background: var(--rf-warning-bg);
    color: var(--rf-warning-text);
}

.rf-banner-success {
    background: var(--rf-success-bg);
    color: var(--rf-success);
}

.rf-banner-info {
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
}

.rf-banner-danger {
    background: var(--rf-danger-bg);
    color: var(--rf-danger);
}

/* ── Bars (Αγώνες ανά Μήνα) ── */
.rf-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: 10px;
    overflow-x: auto;
}

.rf-bar-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 26px;
}

.rf-bar-val {
    font-size: 11px;
    font-weight: 800;
    color: var(--rf-text-muted);
    margin-bottom: 4px;
}

.rf-bar {
    width: 100%;
    background: rgba(var(--rf-accent-rgb), .85);
    border-radius: 8px;
    min-height: 3px;
}

.rf-bar-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--rf-text-faint);
    margin-top: 6px;
    white-space: nowrap;
}

/* ── Θέση στη βαθμολογία ── */
.rf-rank {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--rf-surface-2);
    color: var(--rf-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.rf-rank-top {
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
}

/* ── Grid καρτών πρωταθλημάτων (Βαθμολογίες, Πρωταθλήματα) ──
   Το TelerikListView της σελίδας γίνεται grid καρτών (auto-fill 260px) */
.rf-champ-list .k-listview {
    border: none;
    background: transparent;
    padding: 0;
}

.rf-champ-list .k-listview-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.rf-champ-list .k-listview-pager {
    background: transparent;
    border: none;
    margin-top: 14px;
}

/* ── Κάρτα πρωταθλήματος (Βαθμολογίες) ── */
.rf-champ-card {
    display: flex;
    flex-direction: column;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--rf-transition);
}

    .rf-champ-card:hover {
        box-shadow: var(--rf-shadow-link);
        color: inherit;
    }

.rf-champ-clickable {
    cursor: pointer;
}

.rf-champ-head {
    background: var(--rf-accent-grad);
    color: #fff;
    padding: 15px 16px;
    position: relative;
    overflow: hidden;
    min-height: 118px;
}

    /* Το περιεχόμενο του header πάνω από φωτογραφία & overlay */
    .rf-champ-head > :not(.rf-champ-photo):not(.rf-champ-overlay) {
        position: relative;
        z-index: 1;
    }

/* Εικόνα πρωταθλήματος — γεμίζει όλο το header της κάρτας */
.rf-champ-photo {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Χρωματικό overlay κατηγορίας πάνω από την εικόνα (inline gradient ανά κάρτα) */
.rf-champ-overlay {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
}

.rf-champ-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255,255,255,.2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.rf-champ-badge {
    background: rgba(255,255,255,.16);
    border-radius: var(--rf-radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
}

.rf-champ-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 11px;
    min-height: 39px;
    text-shadow: 0 1px 8px rgba(20,20,43,.35);
}

.rf-champ-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rf-text-muted);
}

.rf-champ-arrow {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* ── Κάρτα αγώνα (Live Scores) ── */
.rf-match-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
    padding: 14px 16px;
}

.rf-match-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rf-text-faint);
    margin-bottom: 10px;
}

.rf-match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.rf-match-team {
    font-size: 14px;
    font-weight: 800;
    min-width: 0;
}

.rf-match-score {
    font-size: 24px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -.02em;
}

.rf-match-periods {
    font-size: 11px;
    color: var(--rf-text-faint);
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}

/* Banner κατηγορίας στα live scores — ίδιο κενό με το παλιό rf-group-label */
.rf-live-group-banner {
    margin: 22px 0 12px;
}

    .rf-live-group-banner:first-child {
        margin-top: 4px;
    }

.rf-group-label {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rf-text-faint);
    margin: 22px 0 10px;
}

/* ── Timeline heatmap (MyStats) ── */
.rf-heat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13px, 1fr));
    gap: 3px;
}

.rf-heat-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--rf-surface-2);
}

.rf-heat-1 {
    background: #C7E8D6;
}

.rf-heat-2 {
    background: #7CC9A1;
}

.rf-heat-3 {
    background: var(--rf-success);
}

/* ── Λίστα με rows (ανά πρωτάθλημα/ρόλο) ── */
.rf-row-list {
    display: flex;
    flex-direction: column;
}

.rf-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rf-border-row);
    font-size: 12.5px;
}

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

.rf-tile-stat {
    background: var(--rf-surface-2);
    border-radius: var(--rf-radius-sm);
    padding: 12px 14px;
}

.rf-tile-stat-value {
    font-size: 20px;
    font-weight: 800;
}

.rf-tile-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--rf-text-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Επιλογή ημέρας (Live Scores) ── */
.rf-daynav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rf-daynav-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--rf-radius-sm);
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    color: var(--rf-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .rf-daynav-btn:hover {
        box-shadow: var(--rf-shadow);
        color: var(--rf-accent);
    }

.rf-daynav-label {
    font-size: 13.5px;
    font-weight: 800;
    min-width: 150px;
    text-align: center;
}

/* Κουμπιά χωρίς .btn πρέπει να κληρονομούν τη γραμματοσειρά */
.rf-quick-card,
.rf-btn-ghost,
.rf-daynav-btn,
.rf-bottom-nav .rf-bn-item,
.rf-champ-card {
    font-family: inherit;
}

/* Γραμμή συνόλων σε πίνακες */
.rf-total-row td {
    background: var(--rf-surface-2);
    font-weight: 800;
    border-bottom: none;
}

/* MyStats: 1.3fr / 1fr split */
.rf-stats-split {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 1100px) {
    .rf-stats-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Επικεφαλίδα ενότητας (αντικατέστησε τις παλιές σκούρες μπάρες) */
.rf-section-banner {
    font-size: 15px;
    font-weight: 800;
    color: var(--rf-text);
    letter-spacing: -.01em;
    padding: 6px 0 10px;
}

/* Επιλέξιμη κάρτα (π.χ. επιλογή αγώνα στην υποβολή αναφοράς) */
.rf-select-card {
    cursor: pointer;
    border-width: 2px;
    border-color: var(--rf-border);
}

    .rf-select-card.rf-selected {
        border-color: var(--rf-accent);
        background: var(--rf-accent-soft);
    }

/* ══════════════════════════════════════════════════════════════════════════
   15. Τελικό πέρασμα — σελίδες χωρίς δικό τους mockup (README §13)
   Παίρνουν τα design tokens χωρίς καμία αλλαγή στη δομή ή τις λειτουργίες τους.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Τίτλοι καρτών: ενιαία κλίμακα ανεξάρτητα από fs-1..fs-4 ── */
.card > .card-header .card-title,
.card > .card-header .card-title.fs-1,
.card > .card-header .card-title.fs-2,
.card > .card-header .card-title.fs-3,
.card > .card-header .card-title.fs-4 {
    font-size: 16px !important;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 0;
}

.card > .card-header {
    align-items: center;
}

/* ── Bootstrap alerts → soft banners ── */
.alert {
    border: none;
    border-radius: var(--rf-radius-md);
    font-size: 12.5px;
    font-weight: 600;
    padding: 12px 15px;
}

.alert-warning {
    background: var(--rf-warning-bg);
    color: var(--rf-warning-text);
}

.alert-success {
    background: var(--rf-success-bg);
    color: var(--rf-success);
}

.alert-danger {
    background: var(--rf-danger-bg);
    color: var(--rf-danger);
}

.alert-info,
.alert-primary {
    background: var(--rf-accent-soft);
    color: var(--rf-accent);
}

.alert-secondary,
.alert-light {
    background: var(--rf-surface-2);
    color: var(--rf-text-muted);
}

/* ── Χρωματιστά badges των παλιών σελίδων ── */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--rf-accent) !important;
    color: #fff !important;
}

.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--rf-success) !important;
    color: #fff !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--rf-danger) !important;
    color: #fff !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--rf-warning-bg) !important;
    color: var(--rf-warning) !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--rf-accent-soft) !important;
    color: var(--rf-accent) !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.bg-light,
.badge.text-bg-light {
    background-color: var(--rf-surface-2) !important;
    color: var(--rf-text-muted) !important;
}

.bg-secondary-subtle {
    background-color: var(--rf-surface-2) !important;
    color: var(--rf-text-muted) !important;
    border-radius: var(--rf-radius-pill);
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 700;
}

/* ── Outline buttons ── */
.btn.btn-outline-primary {
    border: 1.5px solid var(--rf-accent);
    color: var(--rf-accent);
    background: transparent;
}

    .btn.btn-outline-primary:hover:not(:disabled) {
        background: var(--rf-accent-soft) !important;
        color: var(--rf-accent) !important;
        border-color: var(--rf-accent) !important;
    }

.btn.btn-outline-secondary {
    border: 1.5px solid var(--rf-border);
    color: var(--rf-text-muted);
    background: transparent;
}

    .btn.btn-outline-secondary:hover:not(:disabled) {
        background: var(--rf-surface-2) !important;
        color: var(--rf-text) !important;
    }

.btn.btn-outline-warning {
    border: 1.5px solid #F0D9A8;
    color: var(--rf-warning);
    background: transparent;
}

    .btn.btn-outline-warning:hover:not(:disabled) {
        background: var(--rf-warning-bg) !important;
        color: var(--rf-warning) !important;
    }

.btn.btn-outline-info {
    border: 1.5px solid var(--rf-accent-soft);
    color: var(--rf-accent);
    background: transparent;
}

    .btn.btn-outline-info:hover:not(:disabled) {
        background: var(--rf-accent-soft) !important;
        color: var(--rf-accent) !important;
    }

.btn.btn-info {
    background-color: var(--rf-accent-soft);
    border-color: transparent;
    color: var(--rf-accent);
}

    .btn.btn-info:hover:not(:disabled) {
        background-color: #E3E1F8 !important;
        color: var(--rf-accent) !important;
    }

/* ── Telerik Window (το Modal της εφαρμογής) ── */
.k-window {
    border-radius: var(--rf-radius-card);
    border: none;
}

/* ── Το Modal μένει πάντα μέσα στην οθόνη ──
   Το TelerikWindow υπολογίζει top/left μία φορά, όταν ανοίγει. Αν το περιεχόμενο
   μεγαλώσει μετά (π.χ. προσθήκη ωρών σε κώλυμα) το παράθυρο ξεφεύγει πάνω/κάτω
   από το viewport. Κλειδώνουμε το κεντράρισμα και το ύψος, και σκρολάρει το περιεχόμενο. */
.k-window.rf-modal {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
}

    .k-window.rf-modal > .k-window-titlebar {
        flex: 0 0 auto;
    }

    .k-window.rf-modal > .k-window-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

/* Σε κινητό πιάνει όλη την οθόνη, σαν sheet. */
@media (max-width: 767.98px) {
    .k-window.rf-modal {
        top: 0 !important;
        left: 0 !important;
        transform: none;
        width: 100vw !important;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
}

.k-window-content {
    background: var(--rf-bg);
    font-family: var(--rf-font);
}

.k-window-titlebar {
    padding: 16px 20px;
}

/* ── Telerik grid toolbar ── */
.k-grid-toolbar {
    background: var(--rf-surface);
    border-color: var(--rf-border);
    padding: 10px 12px;
}

/* ── Breadcrumbs ── */
.breadcrumb {
    font-size: 12px;
    font-weight: 600;
}

    .breadcrumb .breadcrumb-item.active {
        color: var(--rf-text-faint);
    }

/* ── Tabs ── */
.nav-tabs {
    border-bottom: 1px solid var(--rf-border);
}

    .nav-tabs .nav-link {
        border: none;
        color: var(--rf-text-faint);
        font-weight: 700;
        font-size: 13px;
        padding: 10px 14px;
    }

        .nav-tabs .nav-link.active {
            color: var(--rf-accent);
            background: transparent;
            border-bottom: 2px solid var(--rf-accent);
        }

/* ── Παλιό dark utility που έμεινε σε λίγα σημεία ── */
.text-bg-bronze {
    background-color: var(--rf-surface-2) !important;
    color: var(--rf-text-muted) !important;
}

/* ── Οι σκούρες μπάρες τίτλων που τυχόν έμειναν ── */
.card-dark-header {
    background-color: var(--rf-surface) !important;
    color: var(--rf-text) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   16. Πλήρες πλάτος & responsive πέρασμα σε όλη την εφαρμογή
   ══════════════════════════════════════════════════════════════════════════ */

/* Το περιεχόμενο πιάνει όλο το διαθέσιμο πλάτος (δεν κεντράρεται σε στήλη) */
.app-main .app-container,
.app-content .app-container {
    max-width: none;
    margin-inline: 0;
}

/* Τίτλος σελίδας: ορατός παντού, με ellipsis σε στενά viewports */
.rf-page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Τίποτα δεν βγαίνει οριζόντια έξω από τη σελίδα — το scroll μένει στους πίνακες */
#kt_app_content_container {
    min-width: 0;
}

.app-main,
.app-wrapper {
    min-width: 0;
}

/* Πίνακες & grids: εσωτερικό οριζόντιο scroll αντί για ξεχείλισμα */
.table-responsive,
.rf-table-scroll,
.grid-mobile-wrap,
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.k-grid,
.k-listview {
    max-width: 100%;
}

    .k-grid .k-grid-content {
        overflow-x: auto;
    }

/* Οι κάρτες δεν σπάνε το grid */
.card,
.rf-card,
.rf-kpi-card,
.rf-item-card {
    min-width: 0;
}

/* ── Tablet ── */
@media (max-width: 991.98px) {
    .rf-head {
        margin: 20px 0 10px;
    }

    .card .card-header,
    .card .card-body,
    .card .card-footer {
        padding: 14px 16px;
    }

    .rf-quick-card {
        padding: 14px 15px;
    }
}

/* ── Κινητό ── */
@media (max-width: 767.98px) {
    .rf-page-title {
        font-size: 16px;
    }

    .rf-head-title {
        font-size: 15px;
    }

    .rf-kpi-value {
        font-size: 26px;
    }

    .rf-item-card {
        align-items: flex-start;
    }

        .rf-item-card .rf-item-actions {
            margin-left: 0;
            width: 100%;
        }

            .rf-item-card .rf-item-actions .btn {
                flex: 1 1 auto;
            }

    .rf-date-tile {
        width: 48px;
        height: 48px;
    }

    .rf-match-teams {
        grid-template-columns: 1fr auto 1fr;
        gap: 6px;
    }

    .rf-match-score {
        font-size: 20px;
    }

    .rf-daynav-label {
        min-width: 110px;
        font-size: 12.5px;
    }

    .card .card-header,
    .card .card-body,
    .card .card-footer {
        padding: 12px 14px;
    }

    /* Οι φόρμες σε μία στήλη */
    .row > [class*="col-md-"] {
        margin-bottom: 4px;
    }
}

/* ── Πολύ στενές οθόνες ── */
@media (max-width: 479.98px) {
    :root {
        --rf-content-pad-x: 12px;
    }

    .rf-head {
        gap: 8px;
    }

    .rf-quick-card {
        padding: 12px 13px;
    }

    .rf-kpi-value {
        font-size: 22px;
    }
}

/* Γραμμές συνόλων/σκούρα badges που έμειναν από το παλιό UI */
tr.table-dark,
tr.table-dark > td,
tr.table-dark > th {
    background-color: var(--rf-surface-2) !important;
    color: var(--rf-text) !important;
    border-color: var(--rf-border) !important;
    font-weight: 800;
}

.badge.bg-dark,
.badge.text-bg-dark {
    background-color: var(--rf-text) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   17. Ορισμοί Διαιτητών-Κριτών (README §11 / §11β)
   ══════════════════════════════════════════════════════════════════════════ */

/* Info χρώμα του design (Εισαγωγή Αγώνων) */
:root {
    --rf-info: #2E7CD6;
    --rf-info-bg: #E8F1FC;
}

.rf-btn-info {
    background-color: var(--rf-info-bg);
    border-color: transparent;
    color: var(--rf-info);
    font-weight: 700;
}

    .rf-btn-info:hover:not(:disabled) {
        background-color: #DAE8FA !important;
        color: var(--rf-info) !important;
    }

/* Banner «Αγώνες» — από σκούρο gradient σε λευκή κάρτα */
.schedule-banner {
    background: var(--rf-surface) !important;
    color: var(--rf-text) !important;
    border: 1px solid var(--rf-border) !important;
    border-radius: var(--rf-radius-card) !important;
    box-shadow: var(--rf-shadow) !important;
    padding: 16px 20px !important;
}

    .schedule-banner .banner-icon {
        color: var(--rf-accent);
        opacity: 1;
        font-size: 22px;
    }

    .schedule-banner .banner-title {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .schedule-banner .banner-subtitle {
        font-size: 12px;
        font-weight: 600;
        color: var(--rf-text-faint);
        opacity: 1;
    }

    .schedule-banner .hint {
        font-size: 11.5px;
        color: var(--rf-text-faint);
        opacity: 1;
    }

    .schedule-banner .banner-switch,
    .rf-toolbar-row .banner-switch {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--rf-text-muted);
        margin-bottom: 0;
        padding-left: 0;
        cursor: pointer;
    }

        /* Toggle switch αντί για checkbox */
        .schedule-banner .banner-switch .form-check-input,
        .rf-toolbar-row .banner-switch .form-check-input {
            width: 36px;
            height: 20px;
            margin: 0;
            flex-shrink: 0;
            border-color: var(--rf-border);
            cursor: pointer;
        }

            .schedule-banner .banner-switch .form-check-input:checked,
            .rf-toolbar-row .banner-switch .form-check-input:checked {
                background-color: var(--rf-accent);
                border-color: var(--rf-accent);
            }

            .schedule-banner .banner-switch .form-check-input:focus,
            .rf-toolbar-row .banner-switch .form-check-input:focus {
                box-shadow: none;
            }

    /* Τα εργαλεία του grid (Excel, Εισαγωγή Αγώνων, φίλτρα) ζουν πλέον εδώ,
       αντί για toolbar ανάμεσα στην κάρτα και τις επικεφαλίδες της λίστας */
    .schedule-banner .banner-actions,
    .rf-toolbar-row .banner-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

/* Γραμμή εργαλείων κάτω από κάρτα ενότητας (χωρίς δικό της φόντο) */
.rf-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}

/* Chips ταξινόμησης πάνω από τη λίστα ορισμών */
.rf-sort-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.rf-sort-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rf-text-faint);
    margin-right: 2px;
}

.rf-sort-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--rf-border);
    background: var(--rf-surface);
    color: var(--rf-text-muted);
    border-radius: var(--rf-radius-pill);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--rf-transition), color var(--rf-transition), border-color var(--rf-transition);
}

/* Σειρά προτεραιότητας όταν είναι επιλεγμένα πολλά κριτήρια */
.rf-sort-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rf-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

    .rf-sort-chip:hover {
        background: var(--rf-surface-2);
        color: var(--rf-text);
    }

    .rf-sort-chip.is-active {
        background: var(--rf-accent-soft);
        border-color: #C7C4F0;
        color: var(--rf-accent);
    }

/* Pill που λειτουργεί ως κουμπί (π.χ. αλλαγή κατάστασης ορισμών) */
button.rf-pill-button {
    border: 0;
    cursor: pointer;
}

    button.rf-pill-button:hover {
        filter: brightness(.96);
    }

    /* Διακόπτης κωλυμάτων + επεξήγηση σε μία στήλη, ώστε το ζευγάρι να μη
       ξεπερνά σε ύψος τα dropdown που στέκονται δίπλα του */
    .schedule-banner .banner-kolima,
    .rf-toolbar-row .banner-kolima {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        line-height: 1.25;
    }

        .schedule-banner .banner-kolima .hint,
        .rf-toolbar-row .banner-kolima .hint {
            font-size: 11px;
            color: var(--rf-text-faint);
            opacity: 1;
        }

/* Βαθμός δυσκολίας */
.rf-bd {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--rf-surface-2);
    color: var(--rf-text-muted);
}

.rf-bd-1 {
    background: var(--rf-danger-bg);
    color: var(--rf-danger);
}

.rf-bd-2 {
    background: var(--rf-warning-bg);
    color: var(--rf-warning);
}

.rf-bd-3 {
    background: var(--rf-success-bg);
    color: var(--rf-success);
}

.rf-bd-4 {
    background: var(--rf-info-bg);
    color: var(--rf-info);
}

/* Κελί ρόλου */
.rf-role-chip {
    display: inline-block;
    max-width: 100%;
    background: var(--rf-surface-2);
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.rf-role-empty {
    color: var(--rf-text-disabled);
    font-weight: 600;
}

/* Picker σε inline edit */
.rf-atomo-picker.k-picker,
.rf-atomo-picker .k-input {
    background: var(--rf-surface);
    border-color: #C7C4F0;
}

/* Γραμμή σε επεξεργασία */
.agones-grid .k-grid-edit-row > td,
.agones-grid .k-grid-edit-row > .k-table-td {
    background-color: #F8F8FE !important;
}

/* Το grid των αγώνων θέλει χώρο — οριζόντιο scroll στο wrapper.
   Το wrapper κρατάει και το «κάρτα» look, ώστε οι στρογγυλεμένες γωνίες
   να μη φεύγουν μαζί με το οριζόντιο scroll του grid. */
.agones-grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-card);
    box-shadow: var(--rf-shadow);
}

    .agones-grid-wrapper .k-grid {
        border: 0;
        background: transparent;
    }

    .agones-grid-wrapper .k-grid {
        min-width: 1460px;
    }

@media (max-width: 767.98px) {
    .agones-grid-wrapper .k-grid {
        min-width: 1100px;
    }
}

/* Πεδίο που είναι ορατό αλλά κλειδωμένο για τον ρόλο */
.rf-locked {
    opacity: .7;
}

/* Ενότητα που ανοιγοκλείνει (π.χ. Σχόλια) — ξεκινά πάντα κλειστή */
.rf-collapse {
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    background: var(--rf-surface);
}

    .rf-collapse > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--rf-text-faint);
        user-select: none;
    }

        .rf-collapse > summary::-webkit-details-marker {
            display: none;
        }

        .rf-collapse > summary::before {
            content: "";
            width: 0;
            height: 0;
            border-left: 5px solid var(--rf-text-faint);
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            transition: transform var(--rf-transition);
        }

        .rf-collapse > summary:hover {
            color: var(--rf-text-muted);
        }

    .rf-collapse[open] > summary::before {
        transform: rotate(90deg);
    }

    .rf-collapse[open] > summary {
        border-bottom: 1px solid var(--rf-border);
    }

.rf-collapse-body {
    padding: 14px;
}

/* ── Χωρίς header: το περιεχόμενο ξεκινά από την κορυφή ── */
.app-content {
    padding-top: 24px;
}

/* Κάρτα χρήστη στο sidebar */
.rf-sidebar-avatar img,
.rf-sidebar-avatar .gravatar-img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.rf-sidebar-logout {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255,255,255,.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    transition: background-color var(--rf-transition);
}

    .rf-sidebar-logout:hover {
        background: rgba(255,255,255,.3);
        color: #fff;
    }

/* ══════════════════════════════════════════════════════════════════════════
   18. Πρωτάθλημα — Επεξεργασία (README §11γ)
   ══════════════════════════════════════════════════════════════════════════ */

.rf-pill-dark {
    background: var(--rf-text);
    color: #fff;
}

/* Checkbox ως toggle chip */
.rf-toggle-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid var(--rf-border);
    border-radius: var(--rf-radius-sm);
    background: var(--rf-surface);
    padding: 9px 12px;
    transition: background-color var(--rf-transition), border-color var(--rf-transition);
}

    .rf-toggle-chip.rf-toggle-on {
        border-color: #C7C4F0;
        background: #F8F8FE;
    }

.rf-toggle-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rf-text-muted);
    cursor: pointer;
}

.rf-toggle-chip.rf-toggle-on .rf-toggle-label {
    color: var(--rf-text);
}

/* Μπάρα τίτλου αγωνιστικής */
/* Μπάρα αγωνιστικής: «Προηγούμενη» τέρμα αριστερά, τίτλος στο κέντρο,
   «Επόμενη» τέρμα δεξιά. Το background μπορεί να δοθεί inline (HeaderStyle)
   ώστε να ταιριάζει με το χρώμα κατηγορίας / εικαστικό του πρωταθλήματος. */
.rf-round-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    background: var(--rf-accent-grad);
    color: #fff;
    padding: 11px 14px;
    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
}

.rf-round-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.rf-round-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: start;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: var(--rf-radius-pill);
    background: rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--rf-transition, .15s ease), opacity var(--rf-transition, .15s ease);
}

    .rf-round-nav-next {
        justify-self: end;
    }

    .rf-round-nav:hover:not(:disabled) {
        background: rgba(255,255,255,.32);
        color: #fff;
    }

    .rf-round-nav:disabled {
        opacity: .4;
        cursor: default;
    }

@media (max-width: 575.98px) {
    .rf-round-nav-text {
        display: none;
    }

    .rf-round-nav {
        padding: 7px 10px;
    }
}

.rf-round-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-shadow: 0 1px 6px rgba(16,18,34,.25);
}

.rf-round-badge {
    background: rgba(255,255,255,.2);
    border-radius: var(--rf-radius-pill);
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Συμπτυγμένο sidebar: καθαρή εμφάνιση, χωρίς επικάλυψη περιεχομένου ── */

/* Όταν ανοίγει με hover, πρέπει να είναι αδιαφανές και πάνω από το περιεχόμενο */
[data-kt-app-sidebar-minimize=on] .app-sidebar {
    z-index: 105;
    background-color: var(--rf-surface) !important;
}

/* Λογότυπο και εικονίδια κεντραρισμένα όσο είναι συμπτυγμένο */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .app-sidebar-logo {
    padding-inline: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    [data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .app-sidebar-logo > a {
        width: 100%;
        justify-content: center;
        gap: 0;
    }

/* Εικονίδια μενού κεντραρισμένα όσο είναι συμπτυγμένο.
   Το wrapper/menu κρατούν αλλιώς το πλήρες πλάτος (240px) μέσα σε sidebar 75px
   με overflow hidden — το κεντραρισμένο εικονίδιο θα έπεφτε εκτός ορατής ζώνης. */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .app-sidebar-wrapper,
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) #kt_app_sidebar_menu {
    width: 100% !important;
}

[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .menu-item .menu-link {
    justify-content: center;
    padding-inline: 0 !important;
}

[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .menu-item .menu-link .menu-icon {
    justify-content: center;
    margin-inline-end: 0 !important;
}

/* Το Metronic κάνει τους τίτλους μόνο opacity:0 — πιάνουν ακόμα χώρο και
   σπρώχνουν το εικονίδιο αριστερά. Τους κρύβουμε εντελώς, μαζί με βελάκια/badges. */
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .menu-item .menu-link .menu-title,
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .menu-item .menu-link .menu-arrow,
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .menu-item .menu-link .menu-badge {
    display: none !important;
}

/* Κουμπί καρφιτσώματος του sidebar (βελάκι στην άκρη του logo) */
#kt_app_sidebar_toggle {
    z-index: 110;
    background: var(--rf-surface) !important;
    border: 1px solid var(--rf-border);
    box-shadow: var(--rf-shadow);
    border-radius: 50%;
    color: var(--rf-text-faint);
}

    #kt_app_sidebar_toggle:hover {
        color: var(--rf-accent);
        border-color: var(--rf-accent);
    }

/* ── Κελιά ορισμών: κλικ για επεξεργασία ───────────────────────────────────
   Δεν χρησιμοποιούμε το InCell edit mode του Telerik (το popup του ComboBox
   render-άρεται έξω από το κελί και το κλείνει αμέσως), οπότε το «κελί που
   ανοίγει» είναι δικό μας state. Το wrapper δίνει την οπτική ένδειξη. */
.rf-cell-editable {
	cursor: pointer;
	min-height: 24px;
	border-radius: 6px;
	padding: 2px 4px;
	margin: -2px -4px;
	transition: background-color .12s ease, box-shadow .12s ease;
}

.rf-cell-editable:hover {
	background: var(--rf-surface-hover, rgba(0, 0, 0, .04));
	box-shadow: inset 0 0 0 1px var(--rf-border, rgba(0, 0, 0, .12));
}

/* Wrapper του ανοιχτού κελιού: πιάνει το keydown του ComboBox για την
   πλοήγηση με Tab, χωρίς να αλλάζει το layout του κελιού. */
.rf-cell-editing {
	display: block;
	width: 100%;
}

/* Host του AtomoPicker: υπάρχει για να μπορεί το JS να βρει το input του
   ComboBox και να του δώσει focus. Δεν αλλάζει το layout. */
.rf-atomo-picker-host {
	display: block;
	width: 100%;
}

/* ── Hero πρωταθλήματος στην κορυφή της βαθμολογίας ─────────────────
   Χρησιμοποιεί το ίδιο εικαστικό / χρώμα κατηγορίας με τις κάρτες των
   Πρωταθλημάτων, με την περιγραφή του πρωταθλήματος και την αγωνιστική
   περίοδο πάνω στην εικόνα. */
.rf-proto-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 172px;
	overflow: hidden;
	color: #fff;
	background: var(--rf-accent-grad);
}

.rf-proto-hero-img {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.rf-proto-hero-overlay,
.rf-proto-hero-scrim {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
}

/* Επιπλέον σκίαση στο κάτω μέρος, ώστε ο τίτλος να διαβάζεται πάντα */
.rf-proto-hero-scrim {
	background: linear-gradient(to top, rgba(16,18,34,.62) 0%, rgba(16,18,34,.18) 45%, rgba(16,18,34,0) 78%);
}

.rf-proto-hero-body {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
}

.rf-proto-hero-back {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 12px;
	background: rgba(255,255,255,.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--rf-transition, .15s ease);
}

	.rf-proto-hero-back:hover {
		background: rgba(255,255,255,.34);
		color: #fff;
	}

.rf-proto-hero-text {
	min-width: 0;
}

.rf-proto-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .92;
	text-shadow: 0 1px 6px rgba(16,18,34,.45);
}

.rf-proto-hero-title {
	margin-top: 4px;
	font-size: clamp(19px, 2.4vw, 28px);
	font-weight: 800;
	line-height: 1.2;
	text-shadow: 0 2px 12px rgba(16,18,34,.45);
}

.rf-proto-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.rf-proto-hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: var(--rf-radius-pill, 999px);
	background: rgba(255,255,255,.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

/* Slim — λωρίδα-banner κατηγορίας (live scores): τίτλος αριστερά, chips δεξιά.
   Στέκεται μόνη της ανάμεσα σε κάρτες, γι' αυτό έχει δικές της γωνίες. */
.rf-proto-hero-xs {
	min-height: 74px;
	/* Λωρίδα: το περιεχόμενο κεντράρεται κατακόρυφα (το πλήρες hero «κάθεται» κάτω) */
	align-items: center;
	border-radius: var(--rf-radius-card, 14px);
	box-shadow: var(--rf-shadow, 0 1px 3px rgba(20,20,43,.06));
}

	.rf-proto-hero-xs .rf-proto-hero-body {
		align-items: center;
		padding: 12px 16px;
	}

	.rf-proto-hero-xs .rf-proto-hero-text {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
	}

	.rf-proto-hero-xs .rf-proto-hero-title {
		margin-top: 0;
		font-size: clamp(15px, 1.6vw, 20px);
		text-transform: uppercase;
		letter-spacing: .02em;
	}

	.rf-proto-hero-xs .rf-proto-hero-meta {
		margin-top: 0;
	}

	.rf-proto-hero-xs .rf-proto-hero-scrim {
		background: linear-gradient(90deg, rgba(16,18,34,.45) 0%, rgba(16,18,34,.12) 60%, rgba(16,18,34,0) 100%);
	}

/* Compact — για την embed (iframe) προβολή */
.rf-proto-hero-sm {
	min-height: 118px;
}

	.rf-proto-hero-sm .rf-proto-hero-body {
		padding: 13px 15px;
	}

	.rf-proto-hero-sm .rf-proto-hero-title {
		font-size: clamp(16px, 2vw, 21px);
	}

@media (max-width: 767.98px) {
	.rf-proto-hero {
		min-height: 138px;
	}

	.rf-proto-hero-body {
		gap: 10px;
		padding: 14px 15px;
	}

	.rf-proto-hero-back {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.rf-proto-hero-chip {
		padding: 3px 9px;
		font-size: 11px;
	}
}

/* ── Επιλογή εικαστικού πρωταθλήματος (picker + gallery) ─────────────────── */
.rf-eikona-current {
	overflow: hidden;
	border: 1px solid var(--rf-border);
	border-radius: var(--rf-radius-md, 12px);
	background: var(--rf-surface-alt, #f5f6f8);
}

	.rf-eikona-current img {
		display: block;
		width: 100%;
		max-height: 220px;
		object-fit: cover;
	}

.rf-eikona-empty {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 18px;
	border: 1px dashed var(--rf-border);
	border-radius: var(--rf-radius-md, 12px);
	background: var(--rf-surface-alt, #f5f6f8);
	color: var(--rf-text-muted);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--rf-transition, .15s ease), background-color var(--rf-transition, .15s ease);
}

	.rf-eikona-empty:hover:not(:disabled) {
		border-color: var(--rf-accent);
		background: var(--rf-accent-soft);
	}

	.rf-eikona-empty i {
		flex: 0 0 auto;
		font-size: 22px;
		opacity: .6;
	}

/* Modal gallery */
.rf-gallery-backdrop {
	position: fixed;
	z-index: 1060;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(16,18,34,.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.rf-gallery-sheet {
	display: flex;
	flex-direction: column;
	width: min(1040px, 100%);
	max-height: min(86vh, 860px);
	overflow: hidden;
	border-radius: var(--rf-radius-card, 14px);
	background: var(--rf-surface, #fff);
	box-shadow: 0 24px 64px rgba(20,20,43,.28);
}

.rf-gallery-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 18px 20px;
	border-bottom: 1px solid var(--rf-border);
}

.rf-gallery-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--rf-text);
}

.rf-gallery-sub {
	margin-top: 2px;
	font-size: 12px;
	color: var(--rf-text-muted);
}

.rf-gallery-close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 10px;
	background: var(--rf-surface-alt, #f2f2f8);
	color: var(--rf-text-muted);
	cursor: pointer;
}

	.rf-gallery-close:hover {
		background: var(--rf-surface-hover, #e7e7f0);
		color: var(--rf-text);
	}

.rf-gallery-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 18px 20px;
}

.rf-gallery-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 0 0 auto;
	flex-wrap: wrap;
	padding: 14px 20px;
	border-top: 1px solid var(--rf-border);
}

.rf-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}

.rf-gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	border: 2px solid var(--rf-border);
	border-radius: var(--rf-radius-md, 12px);
	background: var(--rf-surface-alt, #f5f6f8);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--rf-transition, .15s ease), box-shadow var(--rf-transition, .15s ease);
}

	.rf-gallery-item:hover {
		border-color: var(--rf-accent);
		box-shadow: var(--rf-shadow-link, 0 6px 20px rgba(20,20,43,.12));
	}

	.rf-gallery-item.selected {
		border-color: var(--rf-accent);
	}

	.rf-gallery-item img {
		display: block;
		width: 100%;
		height: 104px;
		object-fit: cover;
	}

.rf-gallery-item-name {
	display: block;
	padding: 8px 10px;
	background: var(--rf-surface, #fff);
	color: var(--rf-text);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rf-gallery-check {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--rf-accent);
	color: #fff;
	font-size: 11px;
}

/* Διαχείριση: κάρτα με κουμπί διαγραφής */
.rf-gallery-item-admin {
	cursor: default;
}

	.rf-gallery-item-admin:hover {
		border-color: var(--rf-border);
		box-shadow: none;
	}

.rf-gallery-del {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 9px;
	background: rgba(220,53,69,.92);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
}

	.rf-gallery-del:hover:not(:disabled) {
		background: #dc3545;
	}

	.rf-gallery-del:disabled {
		opacity: .5;
		cursor: default;
	}

@media (max-width: 575.98px) {
	.rf-gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 10px;
	}

	.rf-gallery-item img {
		height: 78px;
	}
}