/*
==========================================================
OUANAMINTHE FC - ADMIN PANEL
File: admin/assets/css/admin.css
Version: 1.0
==========================================================
*/

/* ======================================================
   ROOT VARIABLES
====================================================== */

:root {
    --admin-primary: #33a8ff;
    --admin-primary-dark: #0077cc;
    --admin-primary-deep: #005b9f;
    --admin-primary-light: #d9f0ff;
    --admin-primary-soft: #eef8ff;

    --admin-white: #ffffff;
    --admin-black: #07111f;

    --admin-bg: #f4f8fc;
    --admin-bg-alt: #edf4fa;

    --admin-text: #162033;
    --admin-text-muted: #6d7888;
    --admin-text-light: #94a0af;

    --admin-border: #dfe7ef;
    --admin-border-light: #edf1f5;

    --admin-success: #16a56a;
    --admin-success-light: #e8f8f1;

    --admin-danger: #dc3545;
    --admin-danger-light: #fff0f1;

    --admin-warning: #f59e0b;
    --admin-warning-light: #fff7e6;

    --admin-info: #0ea5e9;
    --admin-info-light: #e8f7fd;

    --admin-sidebar-width: 280px;
    --admin-sidebar-collapsed-width: 88px;
    --admin-topbar-height: 76px;

    --admin-radius-sm: 10px;
    --admin-radius-md: 16px;
    --admin-radius-lg: 24px;
    --admin-radius-xl: 32px;

    --admin-shadow-sm:
        0 6px 20px rgba(15, 42, 67, 0.06);

    --admin-shadow-md:
        0 14px 40px rgba(15, 42, 67, 0.10);

    --admin-shadow-lg:
        0 24px 70px rgba(15, 42, 67, 0.16);

    --admin-transition:
        all 0.25s ease;
}

/* ======================================================
   RESET
====================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: var(--admin-text);
    background: var(--admin-bg);
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
}

::selection {
    color: var(--admin-white);
    background: var(--admin-primary-dark);
}

/* ======================================================
   SCROLLBAR
====================================================== */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #edf3f8;
}

::-webkit-scrollbar-thumb {
    background: #b8c8d6;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--admin-primary-dark);
}

/* ======================================================
   LOGIN PAGE
====================================================== */

.admin-login-body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(51, 168, 255, 0.22),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(0, 119, 204, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #eef8ff 0%,
            #f8fbfe 48%,
            #eaf5fd 100%
        );
}

.admin-login-body::before,
.admin-login-body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
    z-index: 0;
}

.admin-login-body::before {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -140px;
    background:
        linear-gradient(
            145deg,
            rgba(51, 168, 255, 0.18),
            rgba(0, 119, 204, 0.03)
        );
}

.admin-login-body::after {
    width: 360px;
    height: 360px;
    bottom: -170px;
    left: -120px;
    background:
        linear-gradient(
            145deg,
            rgba(0, 119, 204, 0.15),
            rgba(51, 168, 255, 0.03)
        );
}

.admin-login-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.admin-login-card {
    position: relative;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: var(--admin-radius-xl);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--admin-shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

.admin-login-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    top: -110px;
    right: -80px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            rgba(51, 168, 255, 0.22),
            rgba(0, 119, 204, 0.04)
        );
}

.admin-login-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 5px;
    top: 0;
    left: 50%;
    border-radius: 0 0 20px 20px;
    background:
        linear-gradient(
            90deg,
            var(--admin-primary),
            var(--admin-primary-dark)
        );
    transform: translateX(-50%);
}

.admin-login-brand {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    text-align: center;
}

.admin-login-logo {
    width: 94px;
    height: 94px;
    margin: 0 auto 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 50%;
    background: var(--admin-white);
    box-shadow:
        0 12px 32px rgba(0, 119, 204, 0.14);
    transition: var(--admin-transition);
}

.admin-login-logo:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 18px 42px rgba(0, 119, 204, 0.20);
}

.admin-login-logo img {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.admin-login-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--admin-primary-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-login-eyebrow::before,
.admin-login-eyebrow::after {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--admin-primary);
}

.admin-login-brand h1 {
    margin: 0 0 12px;
    color: var(--admin-text);
    font-size: clamp(1.65rem, 4vw, 2.15rem);
    font-weight: 800;
    line-height: 1.18;
}

.admin-login-brand p {
    max-width: 390px;
    margin: 0 auto;
    color: var(--admin-text-muted);
    font-size: 0.98rem;
    line-height: 1.65;
}

/* ======================================================
   LOGIN ALERT
====================================================== */

.admin-login-card .alert {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: var(--admin-radius-md);
    color: #9d2430;
    background: var(--admin-danger-light);
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-login-card .alert i {
    margin-top: 2px;
    color: var(--admin-danger);
    font-size: 1rem;
}

/* ======================================================
   LOGIN FORM
====================================================== */

.admin-login-form {
    position: relative;
    z-index: 2;
}

.admin-login-form .form-label {
    margin-bottom: 9px;
    color: var(--admin-text);
    font-size: 0.91rem;
    font-weight: 700;
}

.admin-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-input-group .form-control {
    width: 100%;
    min-height: 56px;
    padding: 13px 52px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    color: var(--admin-text);
    background: var(--admin-white);
    font-size: 0.96rem;
    box-shadow: none;
    transition: var(--admin-transition);
}

.admin-input-group .form-control::placeholder {
    color: #a4afbb;
}

.admin-input-group .form-control:hover {
    border-color: #bfd1df;
}

.admin-input-group .form-control:focus {
    border-color: var(--admin-primary);
    background: var(--admin-white);
    box-shadow:
        0 0 0 4px rgba(51, 168, 255, 0.12);
}

.admin-input-icon {
    position: absolute;
    left: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-primary-dark);
    font-size: 1.05rem;
    pointer-events: none;
}

.admin-password-toggle {
    position: absolute;
    right: 11px;
    width: 38px;
    height: 38px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--admin-text-muted);
    background: transparent;
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-password-toggle:hover {
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

.admin-password-toggle:focus-visible {
    outline: 3px solid rgba(51, 168, 255, 0.25);
}

/* ======================================================
   LOGIN BUTTON
====================================================== */

.admin-login-button {
    min-height: 56px;
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: var(--admin-radius-md);
    color: var(--admin-white);
    background:
        linear-gradient(
            135deg,
            var(--admin-primary),
            var(--admin-primary-dark)
        );
    font-size: 0.97rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow:
        0 12px 28px rgba(0, 119, 204, 0.22);
    transition: var(--admin-transition);
}

.admin-login-button:hover {
    color: var(--admin-white);
    background:
        linear-gradient(
            135deg,
            var(--admin-primary-dark),
            var(--admin-primary-deep)
        );
    box-shadow:
        0 17px 34px rgba(0, 119, 204, 0.30);
    transform: translateY(-2px);
}

.admin-login-button:active {
    transform: translateY(0);
}

.admin-login-button i {
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.admin-login-button:hover i {
    transform: translateX(4px);
}

/* ======================================================
   LOGIN FOOTER
====================================================== */

.admin-login-footer {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--admin-border-light);
    text-align: center;
}

.admin-login-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--admin-primary-dark);
    font-size: 0.9rem;
    font-weight: 700;
    transition: var(--admin-transition);
}

.admin-login-footer a:hover {
    color: var(--admin-primary-deep);
    transform: translateX(-3px);
}

.admin-login-footer p {
    margin: 0;
    color: var(--admin-text-light);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ======================================================
   ADMIN LAYOUT
====================================================== */

.admin-body {
    min-height: 100vh;
    background: var(--admin-bg);
}

.admin-wrapper {
    min-height: 100vh;
    display: flex;
}

.admin-main {
    width: calc(100% - var(--admin-sidebar-width));
    min-height: 100vh;
    margin-left: var(--admin-sidebar-width);
    transition: var(--admin-transition);
}

.admin-content {
    min-height: calc(100vh - var(--admin-topbar-height));
    padding: 30px;
}

/* ======================================================
   SIDEBAR
====================================================== */

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--admin-sidebar-width);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.90);
    background:
        linear-gradient(
            180deg,
            #08385f 0%,
            #075187 45%,
            #063a62 100%
        );
    box-shadow:
        12px 0 36px rgba(6, 44, 75, 0.12);
    transition: var(--admin-transition);
}

.admin-sidebar-brand {
    min-height: var(--admin-topbar-height);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.admin-sidebar-brand-logo {
    width: 48px;
    height: 48px;
    padding: 5px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--admin-white);
}

.admin-sidebar-brand-logo img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.admin-sidebar-brand-text {
    min-width: 0;
}

.admin-sidebar-brand-text strong {
    display: block;
    color: var(--admin-white);
    font-size: 0.96rem;
    line-height: 1.2;
}

.admin-sidebar-brand-text span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-sidebar-navigation {
    flex: 1;
    padding: 20px 14px;
    overflow-y: auto;
}

.admin-sidebar-label {
    margin: 17px 12px 8px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.admin-sidebar-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-sidebar-item {
    margin-bottom: 5px;
}

.admin-sidebar-link {
    min-height: 48px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--admin-transition);
}

.admin-sidebar-link i {
    width: 22px;
    flex: 0 0 auto;
    font-size: 1.08rem;
    text-align: center;
}

.admin-sidebar-link:hover {
    color: var(--admin-white);
    background: rgba(255, 255, 255, 0.10);
    transform: translateX(3px);
}

.admin-sidebar-link.active {
    color: var(--admin-primary-deep);
    background: var(--admin-white);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.12);
}

.admin-sidebar-link.active i {
    color: var(--admin-primary-dark);
}

.admin-sidebar-footer {
    padding: 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* ======================================================
   TOPBAR
====================================================== */

.admin-topbar {
    position: sticky;
    top: 0;
    min-height: var(--admin-topbar-height);
    padding: 0 28px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--admin-border-light);
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 6px 18px rgba(15, 42, 67, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.admin-topbar-left,
.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-sidebar-toggle {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--admin-text);
    background: var(--admin-primary-soft);
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-sidebar-toggle:hover {
    color: var(--admin-white);
    background: var(--admin-primary-dark);
}

.admin-topbar-title h1 {
    margin: 0;
    color: var(--admin-text);
    font-size: 1.15rem;
    font-weight: 800;
}

.admin-topbar-title span {
    display: block;
    margin-top: 2px;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
}

.admin-topbar-action {
    position: relative;
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 12px;
    color: var(--admin-text-muted);
    background: var(--admin-white);
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-topbar-action:hover {
    color: var(--admin-primary-dark);
    border-color: var(--admin-primary-light);
    background: var(--admin-primary-soft);
}

.admin-notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--admin-white);
    border-radius: 50%;
    background: var(--admin-danger);
}

.admin-profile {
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-profile:hover {
    background: var(--admin-primary-soft);
}

.admin-profile-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--admin-primary-light);
    border-radius: 50%;
    color: var(--admin-white);
    background:
        linear-gradient(
            135deg,
            var(--admin-primary),
            var(--admin-primary-dark)
        );
    font-weight: 800;
    overflow: hidden;
}

.admin-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-profile-info strong {
    display: block;
    max-width: 150px;
    color: var(--admin-text);
    font-size: 0.86rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-profile-info span {
    display: block;
    margin-top: 2px;
    color: var(--admin-text-muted);
    font-size: 0.72rem;
}

/* ======================================================
   PAGE HEADING
====================================================== */

.admin-page-heading {
    margin-bottom: 26px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-page-heading-content span {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--admin-primary-dark);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.admin-page-heading-content h2 {
    margin: 0;
    color: var(--admin-text);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
}

.admin-page-heading-content p {
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--admin-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ======================================================
   ADMIN BUTTONS
====================================================== */

.admin-btn {
    min-height: 44px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-btn-primary {
    color: var(--admin-white);
    background:
        linear-gradient(
            135deg,
            var(--admin-primary),
            var(--admin-primary-dark)
        );
    box-shadow:
        0 9px 20px rgba(0, 119, 204, 0.18);
}

.admin-btn-primary:hover {
    color: var(--admin-white);
    background:
        linear-gradient(
            135deg,
            var(--admin-primary-dark),
            var(--admin-primary-deep)
        );
    transform: translateY(-2px);
}

.admin-btn-light {
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
    background: var(--admin-white);
}

.admin-btn-light:hover {
    color: var(--admin-primary-dark);
    border-color: var(--admin-primary-light);
    background: var(--admin-primary-soft);
}

.admin-btn-danger {
    color: var(--admin-danger);
    background: var(--admin-danger-light);
}

.admin-btn-danger:hover {
    color: var(--admin-white);
    background: var(--admin-danger);
}

/* ======================================================
   DASHBOARD STATS
====================================================== */

.admin-stat-card {
    height: 100%;
    padding: 22px;
    position: relative;
    border: 1px solid var(--admin-border-light);
    border-radius: var(--admin-radius-lg);
    background: var(--admin-white);
    box-shadow: var(--admin-shadow-sm);
    overflow: hidden;
    transition: var(--admin-transition);
}

.admin-stat-card:hover {
    border-color: var(--admin-primary-light);
    box-shadow: var(--admin-shadow-md);
    transform: translateY(-4px);
}

.admin-stat-card::after {
    content: "";
    position: absolute;
    width: 85px;
    height: 85px;
    top: -36px;
    right: -34px;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.08);
}

.admin-stat-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-stat-card-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 1.25rem;
}

.admin-stat-card-value {
    margin: 20px 0 5px;
    color: var(--admin-text);
    font-size: 2rem;
    font-weight: 850;
    line-height: 1;
}

.admin-stat-card-label {
    margin: 0;
    color: var(--admin-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-stat-card-footer {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--admin-border-light);
    color: var(--admin-text-light);
    font-size: 0.76rem;
}

/* ======================================================
   CARDS
====================================================== */

.admin-card {
    border: 1px solid var(--admin-border-light);
    border-radius: var(--admin-radius-lg);
    background: var(--admin-white);
    box-shadow: var(--admin-shadow-sm);
    overflow: hidden;
}

.admin-card-header {
    min-height: 68px;
    padding: 17px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--admin-border-light);
}

.admin-card-title {
    margin: 0;
    color: var(--admin-text);
    font-size: 1rem;
    font-weight: 800;
}

.admin-card-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--admin-text-muted);
    font-size: 0.76rem;
}

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

.admin-card-footer {
    padding: 15px 22px;
    border-top: 1px solid var(--admin-border-light);
    background: #fcfdfe;
}

/* ======================================================
   TABLE
====================================================== */

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.admin-table th {
    padding: 13px 16px;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text-muted);
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-table td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--admin-border-light);
    color: var(--admin-text);
    font-size: 0.85rem;
    vertical-align: middle;
}

.admin-table tbody tr {
    transition: var(--admin-transition);
}

.admin-table tbody tr:hover {
    background: var(--admin-primary-soft);
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ======================================================
   BADGES
====================================================== */

.admin-badge {
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.admin-badge-success {
    color: #087c4d;
    background: var(--admin-success-light);
}

.admin-badge-danger {
    color: #b12635;
    background: var(--admin-danger-light);
}

.admin-badge-warning {
    color: #a76a00;
    background: var(--admin-warning-light);
}

.admin-badge-info {
    color: #0879ad;
    background: var(--admin-info-light);
}

.admin-badge-neutral {
    color: #5f6b78;
    background: #eef2f6;
}

/* ======================================================
   FORM COMPONENTS
====================================================== */

.admin-form-label {
    margin-bottom: 8px;
    color: var(--admin-text);
    font-size: 0.84rem;
    font-weight: 700;
}

.admin-form-control,
.admin-form-select {
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    color: var(--admin-text);
    background-color: var(--admin-white);
    font-size: 0.88rem;
    box-shadow: none;
    transition: var(--admin-transition);
}

.admin-form-control:focus,
.admin-form-select:focus {
    border-color: var(--admin-primary);
    box-shadow:
        0 0 0 4px rgba(51, 168, 255, 0.10);
    outline: none;
}

textarea.admin-form-control {
    min-height: 130px;
    resize: vertical;
}

.admin-form-help {
    margin-top: 6px;
    color: var(--admin-text-light);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ======================================================
   EMPTY STATE
====================================================== */

.admin-empty-state {
    padding: 55px 25px;
    text-align: center;
}

.admin-empty-state-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 1.8rem;
}

.admin-empty-state h3 {
    margin: 0 0 8px;
    color: var(--admin-text);
    font-size: 1.1rem;
    font-weight: 800;
}

.admin-empty-state p {
    max-width: 440px;
    margin: 0 auto;
    color: var(--admin-text-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* ======================================================
   MOBILE OVERLAY
====================================================== */

.admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    visibility: hidden;
    opacity: 0;
    background: rgba(7, 17, 31, 0.55);
    backdrop-filter: blur(3px);
    transition: var(--admin-transition);
}

.admin-sidebar-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1199.98px) {

    .admin-sidebar {
        width: 265px;
        transform: translateX(-100%);
    }

    .admin-sidebar.active {
        transform: translateX(0);
    }

    .admin-main {
        width: 100%;
        margin-left: 0;
    }

    .admin-content {
        padding: 26px;
    }
}

@media (max-width: 991.98px) {

    .admin-login-card {
        padding: 36px;
    }

    .admin-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-page-heading-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 767.98px) {

    .admin-topbar {
        min-height: 68px;
        padding: 0 16px;
    }

    .admin-content {
        padding: 20px 16px;
    }

    .admin-topbar-title span {
        display: none;
    }

    .admin-profile-info {
        display: none;
    }

    .admin-topbar-action {
        width: 40px;
        height: 40px;
    }

    .admin-profile-avatar {
        width: 40px;
        height: 40px;
    }

    .admin-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-card-body {
        padding: 18px;
    }

    .admin-stat-card {
        padding: 19px;
    }
}

@media (max-width: 575.98px) {

    .admin-login-card {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .admin-login-logo {
        width: 82px;
        height: 82px;
    }

    .admin-login-logo img {
        width: 64px;
        height: 64px;
    }

    .admin-login-brand h1 {
        font-size: 1.55rem;
    }

    .admin-login-brand p {
        font-size: 0.89rem;
    }

    .admin-input-group .form-control {
        min-height: 53px;
        padding-left: 48px;
        font-size: 0.9rem;
    }

    .admin-login-button {
        min-height: 53px;
    }

    .admin-sidebar {
        width: min(86vw, 290px);
    }

    .admin-topbar-title h1 {
        max-width: 145px;
        font-size: 0.98rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-page-heading-content h2 {
        font-size: 1.42rem;
    }

    .admin-btn {
        width: 100%;
    }
}

/* ======================================================
   ACCESSIBILITY
====================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(51, 168, 255, 0.28);
    outline-offset: 2px;
}

/* ======================================================
   UTILITIES
====================================================== */

.admin-text-primary {
    color: var(--admin-primary-dark) !important;
}

.admin-text-success {
    color: var(--admin-success) !important;
}

.admin-text-danger {
    color: var(--admin-danger) !important;
}

.admin-text-warning {
    color: var(--admin-warning) !important;
}

.admin-bg-primary-soft {
    background: var(--admin-primary-soft) !important;
}

.admin-shadow-none {
    box-shadow: none !important;
}

.admin-rounded {
    border-radius: var(--admin-radius-md) !important;
}

.admin-rounded-lg {
    border-radius: var(--admin-radius-lg) !important;
}

.admin-hidden {
    display: none !important;
}

.admin-login-card .alert-success {
    border-color: rgba(22, 165, 106, 0.18);
    color: #087c4d;
    background: var(--admin-success-light);
}

.admin-login-card .alert-success i {
    color: var(--admin-success);
}

/* ======================================================
   403 ERROR PAGE
====================================================== */

.admin-error-body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(51, 168, 255, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(0, 119, 204, 0.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #eef8ff 0%,
            #f8fbfe 50%,
            #eaf5fd 100%
        );
}

.admin-error-page {
    position: relative;
    min-height: 100vh;
}

.admin-error-card {
    padding: 48px 40px;
    border: 1px solid rgba(255, 255, 255, 0.80);
    border-radius: var(--admin-radius-xl);
    background: rgba(255, 255, 255, 0.90);
    box-shadow: var(--admin-shadow-lg);
    text-align: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.admin-error-icon {
    width: 94px;
    height: 94px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    color: var(--admin-danger);
    background: var(--admin-danger-light);
    font-size: 2.45rem;
}

.admin-error-code {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--admin-danger);
    background: var(--admin-danger-light);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-error-card h1 {
    margin: 0 0 14px;
    color: var(--admin-text);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 850;
}

.admin-error-description {
    max-width: 560px;
    margin: 0 auto;
    color: var(--admin-text-muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

.admin-error-description strong {
    color: var(--admin-text);
}

.admin-error-role {
    max-width: 420px;
    margin: 26px auto 0;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid var(--admin-border-light);
    border-radius: var(--admin-radius-md);
    background: var(--admin-primary-soft);
    text-align: left;
}

.admin-error-role span {
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-error-role strong {
    color: var(--admin-primary-dark);
    font-size: 0.84rem;
}

.admin-error-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 575.98px) {

    .admin-error-card {
        padding: 36px 22px;
        border-radius: 24px;
    }

    .admin-error-icon {
        width: 80px;
        height: 80px;
        border-radius: 23px;
        font-size: 2rem;
    }

    .admin-error-role {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-error-actions {
        flex-direction: column;
    }

    .admin-error-actions .admin-btn {
        width: 100%;
    }
}

/* ======================================================
   ADMIN SIDEBAR
====================================================== */

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: var(--admin-sidebar-width, 280px);
    height: 100vh;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(
            180deg,
            #082f4f 0%,
            #064d7d 48%,
            #073653 100%
        );
    box-shadow: 12px 0 35px rgba(4, 38, 62, 0.18);
    transition:
        transform 0.3s ease,
        width 0.3s ease;
}

.admin-sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.admin-sidebar-header {
    min-height: 82px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.admin-sidebar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.admin-sidebar-brand:hover {
    color: #ffffff;
}

.admin-sidebar-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.admin-sidebar-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.admin-sidebar-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-sidebar-brand-text strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-brand-text small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.72rem;
    font-weight: 500;
}

.admin-sidebar-close {
    width: 38px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    font-size: 1.1rem;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.admin-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(5deg);
}

.admin-sidebar-profile {
    margin: 18px 14px 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.08);
}

.admin-sidebar-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 50%;
    color: var(--admin-primary-dark, #0077cc);
    background: #ffffff;
    font-size: 1rem;
    font-weight: 850;
}

.admin-sidebar-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.admin-sidebar-status {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid #064d7d;
    border-radius: 50%;
    background: #21c780;
}

.admin-sidebar-profile-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-sidebar-profile-info strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.83rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-profile-info span {
    margin-top: 3px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.63);
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 12px 18px;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.22)
        transparent;
}

.admin-sidebar-nav::-webkit-scrollbar {
    width: 5px;
}

.admin-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.admin-sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.20);
}

.admin-sidebar-section-title {
    margin: 19px 12px 8px;
    display: block;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.admin-sidebar-link {
    position: relative;
    min-height: 46px;
    margin-bottom: 4px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.76);
    text-decoration: none;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.admin-sidebar-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    transform: translateX(2px);
}

.admin-sidebar-link.active {
    color: #083e65;
    background: #ffffff;
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13);
}

.admin-sidebar-link.active::before {
    position: absolute;
    top: 50%;
    left: -12px;
    width: 4px;
    height: 24px;
    border-radius: 0 999px 999px 0;
    background: #33a8ff;
    content: "";
    transform: translateY(-50%);
}

.admin-sidebar-link-icon {
    width: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.admin-sidebar-link-text {
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar-footer {
    padding: 13px 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.admin-sidebar-footer-link {
    min-height: 43px;
    margin-top: 4px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 0.79rem;
    font-weight: 650;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.admin-sidebar-footer-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
}

.admin-sidebar-logout {
    color: #ffd2d2;
}

.admin-sidebar-logout:hover {
    color: #ffffff;
    background: rgba(231, 76, 60, 0.22);
}

.admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1035;
    display: none;
    background: rgba(3, 24, 39, 0.56);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ======================================================
   SIDEBAR RESPONSIVE
====================================================== */

@media (max-width: 991.98px) {

    .admin-sidebar {
        width: min(290px, 86vw);
        transform: translateX(-105%);
    }

    .admin-sidebar.show {
        transform: translateX(0);
    }

    .admin-sidebar-close {
        display: flex;
    }

    .admin-sidebar-overlay.show {
        display: block;
    }

    body.admin-sidebar-open {
        overflow: hidden;
    }
}

/* ======================================================
   ADMIN TOPBAR
====================================================== */

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 82px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--admin-border-light);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 24px rgba(8, 47, 79, 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.admin-topbar-left,
.admin-topbar-right {
    display: flex;
    align-items: center;
}

.admin-topbar-left {
    min-width: 0;
    gap: 15px;
}

.admin-topbar-right {
    flex-shrink: 0;
    gap: 10px;
}

.admin-sidebar-toggle {
    width: 43px;
    height: 43px;
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    border: 1px solid var(--admin-border-light);
    border-radius: 13px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 1.35rem;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.admin-sidebar-toggle:hover {
    color: #ffffff;
    background: var(--admin-primary);
    transform: translateY(-1px);
}

.admin-page-heading {
    min-width: 0;
}

.admin-page-heading h1 {
    margin: 0;
    overflow: hidden;
    color: var(--admin-text);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-page-heading p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-topbar-action {
    position: relative;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 13px;
    color: var(--admin-text-muted);
    background: #ffffff;
    font-size: 1.05rem;
    text-decoration: none;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.admin-topbar-action:hover {
    color: var(--admin-primary-dark);
    border-color: rgba(51, 168, 255, 0.30);
    background: var(--admin-primary-soft);
    transform: translateY(-1px);
}

.admin-notification-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--admin-danger);
}

.admin-profile-dropdown {
    min-height: 50px;
    padding: 5px 8px 5px 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--admin-text);
    background: transparent;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.admin-profile-dropdown:hover,
.admin-profile-dropdown[aria-expanded="true"] {
    border-color: var(--admin-border-light);
    background: var(--admin-background);
}

.admin-topbar-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--admin-primary),
            var(--admin-primary-dark)
        );
    font-size: 0.9rem;
    font-weight: 850;
    box-shadow: 0 6px 16px rgba(0, 119, 204, 0.20);
}

.admin-topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-topbar-user {
    min-width: 0;
    max-width: 165px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.admin-topbar-user strong,
.admin-topbar-user small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-topbar-user strong {
    color: var(--admin-text);
    font-size: 0.78rem;
    font-weight: 750;
}

.admin-topbar-user small {
    margin-top: 2px;
    color: var(--admin-text-muted);
    font-size: 0.65rem;
}

.admin-profile-dropdown > .bi-chevron-down {
    color: var(--admin-text-muted);
    font-size: 0.72rem;
}

.admin-profile-menu {
    width: 255px;
    margin-top: 10px !important;
    padding: 10px;
    border: 1px solid var(--admin-border-light);
    border-radius: 17px;
    box-shadow: var(--admin-shadow-lg);
}

.admin-profile-menu-header {
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
}

.admin-profile-menu-header strong {
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-menu-header span {
    margin-top: 4px;
    overflow: hidden;
    color: var(--admin-text-muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-menu .dropdown-item {
    min-height: 42px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 11px;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-profile-menu .dropdown-item:hover {
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

.admin-profile-menu .dropdown-item i {
    width: 19px;
    display: inline-flex;
    justify-content: center;
    font-size: 0.95rem;
}

.admin-profile-menu .admin-dropdown-logout {
    color: var(--admin-danger);
}

.admin-profile-menu .admin-dropdown-logout:hover {
    color: var(--admin-danger);
    background: var(--admin-danger-light);
}

.admin-profile-menu .dropdown-divider {
    margin: 7px 0;
    border-color: var(--admin-border-light);
}

/* ======================================================
   TOPBAR RESPONSIVE
====================================================== */

@media (max-width: 991.98px) {

    .admin-topbar {
        min-height: 74px;
        padding: 12px 18px;
    }

    .admin-sidebar-toggle {
        display: flex;
    }
}

@media (max-width: 575.98px) {

    .admin-topbar {
        padding: 11px 14px;
        gap: 12px;
    }

    .admin-topbar-left {
        gap: 10px;
    }

    .admin-page-heading h1 {
        max-width: 155px;
        font-size: 1.08rem;
    }

    .admin-page-heading p {
        display: none;
    }

    .admin-topbar-right {
        gap: 6px;
    }

    .admin-topbar-action {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .admin-profile-dropdown {
        min-height: 44px;
        padding: 2px;
    }

    .admin-topbar-avatar {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 12px;
    }

    .admin-profile-dropdown > .bi-chevron-down {
        display: none;
    }
}

/* ======================================================
   ADMIN MAIN LAYOUT
====================================================== */

.admin-body {
    min-height: 100vh;
    color: var(--admin-text);
    background: var(--admin-background);
}

.admin-page-wrapper {
    min-height: 100vh;
    margin-left: var(--admin-sidebar-width, 280px);
    transition: margin-left 0.3s ease;
}

.admin-page-content {
    min-height: calc(100vh - 82px);
    padding: 28px;
}

@media (max-width: 991.98px) {

    .admin-page-wrapper {
        margin-left: 0;
    }

    .admin-page-content {
        min-height: calc(100vh - 74px);
        padding: 22px 18px;
    }
}

@media (max-width: 575.98px) {

    .admin-page-content {
        padding: 18px 14px;
    }
}

/* ======================================================
   FINAL LAYOUT FIX
   Mete seksyon sa a nan fen admin.css
====================================================== */

:root {
    --admin-sidebar-width: 280px;
    --admin-topbar-height: 82px;
}

/* Pa kite body kreye scroll orizontal */
html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

body.admin-body {
    min-height: 100vh;
    background: #f5f8fb;
}

/* ======================================================
   PAGE WRAPPER
====================================================== */

.admin-page-wrapper {
    width: calc(100% - var(--admin-sidebar-width));
    min-height: 100vh;
    margin-left: var(--admin-sidebar-width);
    display: flex;
    flex-direction: column;
    transition:
        width 0.3s ease,
        margin-left 0.3s ease;
}

/* ======================================================
   TOPBAR ALIGNMENT
====================================================== */

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 100%;
    min-height: var(--admin-topbar-height);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--admin-border-light, #e7edf3);
    background: rgba(255, 255, 255, 0.96);
    box-sizing: border-box;
}

.admin-topbar-left {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-topbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
Tit ak subtitle dwe youn anba lòt,
pa sou menm liy.
*/
.admin-page-heading {
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center;
    gap: 3px;
}

.admin-page-heading h1 {
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    color: var(--admin-text, #172238);
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-page-heading p {
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    color: var(--admin-text-muted, #718096);
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: normal;
}

/* ======================================================
   MAIN CONTENT
====================================================== */

.admin-page-content {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--admin-topbar-height));
    flex: 1;
    margin: 0 !important;
    padding: 30px 28px !important;
    background: #f5f8fb;
    box-sizing: border-box;
    overflow: visible;
}

.admin-page-content .container-fluid {
    width: 100%;
    margin: 0;
    padding: 0;
}

.admin-page-content h2 {
    margin: 0 0 20px !important;
    padding: 0 !important;
    color: var(--admin-text, #172238);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
}

/*
Anile ansyen layout admin-main-content lan,
si li toujou prezan nan CSS la.
*/
.admin-main-content {
    margin-left: 0 !important;
    padding: 0 !important;
}

/* ======================================================
   TABLET / MOBILE
====================================================== */

@media (max-width: 991.98px) {

    :root {
        --admin-topbar-height: 74px;
    }

    .admin-page-wrapper {
        width: 100%;
        margin-left: 0;
    }

    .admin-topbar {
        width: 100%;
        min-height: var(--admin-topbar-height);
        padding: 11px 16px;
        gap: 12px;
    }

    .admin-topbar-left {
        gap: 12px;
    }

    .admin-sidebar-toggle {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .admin-page-heading {
        flex: 1;
        overflow: hidden;
    }

    .admin-page-heading h1 {
        max-width: none;
        font-size: 1.35rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-page-heading p {
        display: none !important;
    }

    .admin-page-content {
        min-height: calc(100vh - var(--admin-topbar-height));
        padding: 24px 18px !important;
    }
}

/* ======================================================
   SMALL MOBILE
====================================================== */

@media (max-width: 575.98px) {

    .admin-topbar {
        padding: 10px;
    }

    .admin-topbar-left {
        min-width: 0;
        flex: 1;
        gap: 10px;
    }

    .admin-topbar-right {
        gap: 6px;
    }

    .admin-sidebar-toggle {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 13px;
    }

    .admin-page-heading h1 {
        font-size: 1.22rem;
        white-space: nowrap;
    }

    .admin-topbar-action {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .admin-profile-dropdown {
        min-height: 42px;
        padding: 0;
    }

    .admin-topbar-avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .admin-page-content {
        padding: 22px 16px !important;
    }

    .admin-page-content h2 {
        font-size: 1.45rem;
        line-height: 1.3;
    }
}

/* ======================================================
   DEFINITIVE MOBILE TOPBAR AND CONTENT FIX
   Dwe rete nan fen nèt admin.css
====================================================== */

.admin-topbar {
    isolation: isolate;
}

.admin-page-content {
    position: relative;
    z-index: 1;
}

/* ======================================================
   MOBILE AND TABLET
====================================================== */

@media (max-width: 991.98px) {

    .admin-page-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .admin-topbar {
        position: sticky;
        top: 0;
        z-index: 1020;
        width: 100%;
        height: 74px;
        min-height: 74px;
        padding: 0 14px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        box-shadow:
            0 1px 0 rgba(15, 42, 67, 0.06),
            0 8px 20px rgba(15, 42, 67, 0.05);
        overflow: visible;
    }

    /*
    Bouton menu agoch
    */
    .admin-topbar-left {
        position: static;
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
    }

    .admin-sidebar-toggle {
        position: relative;
        z-index: 3;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*
    Tit Dashboard egzakteman nan sant ekran an
    */
    .admin-page-heading {
        position: absolute !important;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: auto;
        max-width: calc(100% - 230px);
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        text-align: center;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .admin-page-heading h1 {
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        color: var(--admin-text);
        font-size: 1.35rem;
        font-weight: 850;
        line-height: 1.2;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-page-heading p {
        display: none !important;
    }

    /*
    Klòch ak avatar adwat
    */
    .admin-topbar-right {
        position: relative;
        z-index: 3;
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /*
    Kontni pa dwe antre dèyè topbar la
    */
    .admin-page-content {
        position: relative;
        z-index: 1;
        width: 100%;
        min-height: calc(100vh - 74px);
        margin: 0 !important;
        padding: 32px 18px 24px !important;
        overflow: visible !important;
        background: var(--admin-bg);
    }

    .admin-page-content .container-fluid {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .admin-page-content h2 {
        position: relative;
        z-index: 2;
        margin: 0 0 20px !important;
        padding: 0 !important;
        color: var(--admin-text);
        font-size: 1.6rem;
        font-weight: 800;
        line-height: 1.3;
        transform: none !important;
    }
}

/* ======================================================
   SMALL MOBILE
====================================================== */

@media (max-width: 575.98px) {

    .admin-topbar {
        height: 70px;
        min-height: 70px;
        padding: 0 9px !important;
    }

    .admin-sidebar-toggle {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .admin-page-heading {
        max-width: calc(100% - 200px);
    }

    .admin-page-heading h1 {
        font-size: 1.18rem;
    }

    .admin-topbar-right {
        gap: 5px;
    }

    .admin-topbar-action {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .admin-profile-dropdown {
        min-height: 42px;
        margin: 0;
        padding: 0;
    }

    .admin-topbar-avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .admin-page-content {
        min-height: calc(100vh - 70px);
        padding: 28px 16px 22px !important;
    }

    .admin-page-content h2 {
        margin-top: 0 !important;
        font-size: 1.4rem;
        line-height: 1.35;
    }
}

/* ======================================================
   VERY SMALL MOBILE
====================================================== */

@media (max-width: 380px) {

    .admin-page-heading {
        max-width: calc(100% - 185px);
    }

    .admin-page-heading h1 {
        font-size: 1.05rem;
    }

    .admin-topbar-action {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .admin-topbar-avatar {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }
}

.admin-dashboard-welcome {
    margin-top: 0 !important;
    transform: none !important;
}

@media (max-width: 991.98px) {

    .admin-dashboard-welcome {
        padding-top: 0 !important;
    }
}

/* ======================================================
   ADMIN FOOTER
====================================================== */

.admin-footer {
    min-height: 64px;
    margin-top: auto;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid var(--admin-border-light);
    background: #ffffff;
}

.admin-footer-left,
.admin-footer-right {
    display: flex;
    align-items: center;
}

.admin-footer-left p {
    margin: 0;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.admin-footer-left strong {
    color: var(--admin-text);
    font-weight: 750;
}

.admin-footer-right {
    gap: 8px;
    color: var(--admin-text-light);
    font-size: 0.74rem;
}

.admin-footer-separator {
    color: var(--admin-border);
}

/* ======================================================
   FOOTER RESPONSIVE
====================================================== */

@media (max-width: 767.98px) {

    .admin-footer {
        min-height: auto;
        padding: 18px 16px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        text-align: center;
    }

    .admin-footer-left,
    .admin-footer-right {
        justify-content: center;
    }

    .admin-footer-left p,
    .admin-footer-right {
        font-size: 0.72rem;
    }
}

/* ======================================================
   DASHBOARD FINAL
====================================================== */

.admin-dashboard-intro {
    margin-bottom: 28px;
}

.admin-dashboard-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--admin-primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-dashboard-welcome {
    margin: 0;
    color: var(--admin-text);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 850;
    line-height: 1.2;
}

.admin-dashboard-intro p {
    margin: 8px 0 0;
    color: var(--admin-text-muted);
    font-size: 0.92rem;
}

.admin-stat-card-footer a {
    color: var(--admin-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.admin-stat-card-footer a:hover {
    text-decoration: underline;
}

.admin-dashboard-match {
    padding: 24px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

.admin-dashboard-match strong {
    color: var(--admin-text);
    font-size: 1rem;
}

.admin-dashboard-versus {
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 0.72rem;
    font-weight: 850;
}

.admin-dashboard-match-meta {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
}

.admin-dashboard-match-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.admin-dashboard-result {
    padding: 24px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.admin-dashboard-result > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-dashboard-result span {
    color: var(--admin-text-muted);
    font-size: 0.86rem;
}

.admin-dashboard-result strong {
    color: var(--admin-text);
    font-size: 1.75rem;
    font-weight: 850;
}

.admin-dashboard-result-separator {
    color: var(--admin-text-light);
    font-size: 1.3rem;
    font-weight: 800;
}

.admin-dashboard-news-list {
    display: flex;
    flex-direction: column;
}

.admin-dashboard-news-item {
    min-height: 68px;
    padding: 13px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--admin-border-light);
}

.admin-dashboard-news-item:last-child {
    border-bottom: 0;
}

.admin-dashboard-news-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

.admin-dashboard-news-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.admin-dashboard-news-content strong {
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dashboard-news-content span {
    margin-top: 4px;
    color: var(--admin-text-muted);
    font-size: 0.72rem;
}

.admin-dashboard-news-action {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--admin-text-muted);
    background: var(--admin-bg);
}

.admin-dashboard-news-action:hover {
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

/* ======================================================
   DASHBOARD MATCH CARDS — MOBILE FIX
====================================================== */

@media (max-width: 575.98px) {

    /*
    |--------------------------------------------------------------------------
    | CARD GENERAL
    |--------------------------------------------------------------------------
    */

    .admin-card {
        border-radius: 24px;
    }

    .admin-card-header {
        min-height: auto;
        padding: 22px 22px 18px;
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
        gap: 14px;
    }

    .admin-card-header > i {
        margin-top: 4px;
        flex: 0 0 auto;
        font-size: 1.15rem;
    }

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

    /*
    |--------------------------------------------------------------------------
    | NEXT MATCH
    |--------------------------------------------------------------------------
    */

    .admin-dashboard-match {
        min-height: auto;
        padding: 16px 0 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }

    .admin-dashboard-match strong {
        max-width: 100%;
        font-size: 1.05rem;
        line-height: 1.35;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .admin-dashboard-versus {
        min-width: 46px;
        min-height: 46px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .admin-dashboard-match-meta {
        margin-top: 22px;
        padding-top: 18px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        gap: 12px;
        border-top: 1px solid var(--admin-border-light);
    }

    .admin-dashboard-match-meta span {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .admin-dashboard-match-meta span i {
        width: 18px;
        flex: 0 0 18px;
        text-align: center;
    }

    /*
    |--------------------------------------------------------------------------
    | LATEST RESULT
    |--------------------------------------------------------------------------
    */

    .admin-dashboard-result {
        width: 100%;
        padding: 20px 0 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .admin-dashboard-result > div {
        min-width: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        text-align: center;
    }

    /*
    Premye ekip:
    non anwo, score anba
    */

    .admin-dashboard-result > div:first-child span {
        order: 1;
    }

    .admin-dashboard-result > div:first-child strong {
        order: 2;
    }

    /*
    Dezyèm ekip:
    non anwo, score anba
    */

    .admin-dashboard-result > div:last-child strong {
        order: 2;
    }

    .admin-dashboard-result > div:last-child span {
        order: 1;
    }

    .admin-dashboard-result > div span {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--admin-text-muted);
        font-size: 0.82rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .admin-dashboard-result > div strong {
        color: var(--admin-text);
        font-size: 1.65rem;
        font-weight: 850;
        line-height: 1;
    }

    .admin-dashboard-result-separator {
        align-self: end;
        margin-bottom: 3px;
        color: var(--admin-text-light);
        font-size: 1rem;
        font-weight: 800;
        text-align: center;
    }
}

/* ======================================================
   TEAMS MANAGEMENT
====================================================== */

.admin-module-heading {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.admin-module-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--admin-primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-module-heading h2 {
    margin: 0;
    color: var(--admin-text);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 850;
}

.admin-module-heading p {
    max-width: 650px;
    margin: 8px 0 0;
    color: var(--admin-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.admin-alert {
    margin-bottom: 22px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 14px;
    font-size: 0.86rem;
}

.admin-filter-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 220px auto;
    align-items: end;
    gap: 18px;
}

.admin-search-control {
    position: relative;
}

.admin-search-control > i {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    color: var(--admin-text-muted);
    transform: translateY(-50%);
}

.admin-search-control .admin-form-control {
    width: 100%;
    padding-left: 46px;
    padding-right: 48px;
}

.admin-search-loader {
    position: absolute;
    top: 50%;
    right: 16px;
    display: none;
    color: var(--admin-primary-dark);
    transform: translateY(-50%);
}

.admin-search-loader.show {
    display: inline-flex;
}

.admin-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-team-cell {
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.admin-team-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--admin-border-light);
    border-radius: 14px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 0.95rem;
    font-weight: 850;
}

.admin-team-logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.admin-team-logo span {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.admin-team-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-team-info strong {
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-team-info span {
    margin-top: 4px;
    color: var(--admin-text-muted);
    font-size: 0.72rem;
}

.admin-table-text-limit {
    max-width: 180px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.admin-table-action {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 10px;
    color: var(--admin-text-muted);
    background: var(--admin-white);
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-table-action:hover {
    color: var(--admin-primary-dark);
    border-color: var(--admin-primary-light);
    background: var(--admin-primary-soft);
}

.admin-table-action-danger:hover {
    color: var(--admin-danger);
    border-color: rgba(220, 53, 69, 0.2);
    background: var(--admin-danger-light);
}

.admin-stat-success {
    color: var(--admin-success);
    background: var(--admin-success-light);
}

.admin-stat-neutral {
    color: var(--admin-text-muted);
    background: #eef2f6;
}

.admin-pagination-wrapper {
    padding: 17px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid var(--admin-border-light);
}

.admin-pagination-info {
    color: var(--admin-text-muted);
    font-size: 0.76rem;
}

.admin-pagination {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.admin-pagination a {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 10px;
    color: var(--admin-text-muted);
    background: var(--admin-white);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-pagination a:hover,
.admin-pagination a.active {
    color: var(--admin-white);
    border-color: var(--admin-primary-dark);
    background: var(--admin-primary-dark);
}

.admin-pagination a.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.admin-results-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.admin-delete-modal {
    border: 0;
    border-radius: 24px;
    box-shadow: var(--admin-shadow-lg);
}

.admin-delete-modal .modal-body {
    padding: 34px;
    text-align: center;
}

.admin-delete-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: var(--admin-danger);
    background: var(--admin-danger-light);
    font-size: 1.6rem;
}

.admin-delete-modal h2 {
    margin: 0;
    color: var(--admin-text);
    font-size: 1.3rem;
    font-weight: 850;
}

.admin-delete-modal p {
    margin: 12px 0 0;
    color: var(--admin-text-muted);
    font-size: 0.86rem;
    line-height: 1.65;
}

.admin-delete-modal-actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    gap: 11px;
}

/* ======================================================
   TEAMS RESPONSIVE
====================================================== */

@media (max-width: 991.98px) {

    .admin-module-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-filter-form {
        grid-template-columns: 1fr 220px;
    }

    .admin-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {

    .admin-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .admin-pagination-wrapper {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {

    .admin-module-heading .admin-btn {
        width: 100%;
    }

    .admin-filter-actions {
        flex-direction: column;
    }

    .admin-filter-actions .admin-btn {
        width: 100%;
    }

    .admin-delete-modal .modal-body {
        padding: 28px 20px;
    }

    .admin-delete-modal-actions {
        flex-direction: column-reverse;
    }

    .admin-delete-modal-actions .admin-btn {
        width: 100%;
    }

    .admin-pagination-wrapper {
        padding: 16px;
    }

    .admin-pagination {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ======================================================
   TEAM CREATE / EDIT FORM
====================================================== */

.admin-slug-control {
    display: flex;
    align-items: stretch;
}

.admin-slug-control > span {
    padding: 0 14px;
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    color: var(--admin-text-muted);
    background: var(--admin-bg);
    font-size: 0.76rem;
    white-space: nowrap;
}

.admin-slug-control .admin-form-control {
    border-radius: 0 12px 12px 0;
}

.admin-textarea-footer {
    margin-top: 7px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    color: var(--admin-text-light);
    font-size: 0.72rem;
}

.admin-team-logo-upload {
    padding: 18px;
    border: 1px dashed var(--admin-border);
    border-radius: 18px;
    background: var(--admin-bg);
    text-align: center;
    transition: var(--admin-transition);
}

.admin-team-logo-upload:hover {
    border-color: var(--admin-primary);
    background: var(--admin-primary-soft);
}

.admin-team-logo-upload.is-invalid {
    border-color: var(--admin-danger);
}

.admin-team-logo-preview {
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    border: 1px solid var(--admin-border-light);
    border-radius: 24px;
    color: var(--admin-text-light);
    background: var(--admin-white);
}

.admin-team-logo-preview i {
    font-size: 2rem;
}

.admin-team-logo-preview span {
    font-size: 0.74rem;
}

.admin-team-logo-preview img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.admin-team-logo-button {
    min-height: 42px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 11px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-team-logo-button:hover {
    color: var(--admin-white);
    background: var(--admin-primary-dark);
}

.admin-team-logo-upload p {
    margin: 12px 0 0;
    color: var(--admin-text-light);
    font-size: 0.7rem;
}

.admin-color-control {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.admin-color-control input[type="color"] {
    width: 52px;
    height: 48px;
    padding: 4px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--admin-white);
    cursor: pointer;
}

.admin-team-color-preview {
    min-height: 105px;
    margin-top: 24px;
    padding: 18px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 18px;
    color: var(--preview-secondary, #ffffff);
    background:
        linear-gradient(
            135deg,
            var(--preview-primary, #33a8ff),
            color-mix(
                in srgb,
                var(--preview-primary, #33a8ff) 68%,
                #000000
            )
        );
    text-align: center;
}

.admin-team-color-preview span {
    margin-bottom: 5px;
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
}

.admin-team-color-preview strong {
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.admin-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 28px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    border: 1px solid var(--admin-border-light);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 -8px 30px rgba(15, 42, 67, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.admin-form-control.is-invalid,
.admin-form-select.is-invalid {
    border-color: var(--admin-danger);
}

.admin-form-control.is-invalid:focus,
.admin-form-select.is-invalid:focus {
    box-shadow:
        0 0 0 4px rgba(220, 53, 69, 0.10);
}

.invalid-feedback {
    margin-top: 7px;
    color: var(--admin-danger);
    font-size: 0.75rem;
}

/* ======================================================
   TEAM FORM RESPONSIVE
====================================================== */

@media (max-width: 767.98px) {

    .admin-slug-control {
        flex-direction: column;
    }

    .admin-slug-control > span {
        min-height: 42px;
        border-right: 1px solid var(--admin-border);
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-slug-control .admin-form-control {
        border-radius: 0 0 12px 12px;
    }

    .admin-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .admin-form-actions .admin-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {

    .admin-team-logo-preview {
        width: 130px;
        height: 130px;
    }

    .admin-textarea-footer {
        flex-direction: column;
    }
}

/* ======================================================
   TEAM EDIT — REMOVE LOGO
====================================================== */

.admin-remove-logo-option {
    margin-top: 16px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(220, 53, 69, 0.14);
    border-radius: 12px;
    color: var(--admin-danger);
    background: var(--admin-danger-light);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.admin-remove-logo-option input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: var(--admin-danger);
    cursor: pointer;
}

.admin-remove-logo-option:hover {
    border-color: rgba(220, 53, 69, 0.28);
}

/* ======================================================
   PLAYERS MANAGEMENT
====================================================== */

.admin-player-filter-form {
    display: grid;
    grid-template-columns:
        minmax(250px, 1.4fr)
        repeat(4, minmax(145px, 0.7fr))
        auto;
    align-items: end;
    gap: 16px;
}

.admin-player-filter-search {
    min-width: 0;
}

.admin-player-cell {
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.admin-player-photo {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--admin-border-light);
    border-radius: 16px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 0.82rem;
    font-weight: 850;
}

.admin-player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-player-photo span {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.admin-player-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-player-info strong {
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-player-info span {
    margin-top: 4px;
    color: var(--admin-text-muted);
    font-size: 0.71rem;
}

.admin-player-team {
    min-width: 130px;
    display: flex;
    flex-direction: column;
}

.admin-player-team strong {
    color: var(--admin-text);
    font-size: 0.8rem;
    font-weight: 750;
}

.admin-player-team span {
    margin-top: 3px;
    color: var(--admin-text-muted);
    font-size: 0.69rem;
}

.admin-muted-text {
    color: var(--admin-text-muted);
    font-size: 0.75rem;
}

.admin-position-badge {
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-position-badge.goalkeeper {
    color: #9a6700;
    background: #fff3cd;
}

.admin-position-badge.defender {
    color: #0b5ed7;
    background: #e8f1ff;
}

.admin-position-badge.midfielder {
    color: #087990;
    background: #d9f5f9;
}

.admin-position-badge.forward {
    color: #a61e4d;
    background: #ffe3ec;
}

.admin-position-badge.neutral {
    color: var(--admin-text-muted);
    background: #eef2f6;
}

.admin-player-number {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 0.8rem;
    font-weight: 850;
}

.admin-badge-warning {
    color: #9a6700;
    background: #fff3cd;
}

.admin-stat-warning {
    color: #9a6700;
    background: #fff3cd;
}

/* ======================================================
   PLAYERS RESPONSIVE
====================================================== */

@media (max-width: 1399.98px) {

    .admin-player-filter-form {
        grid-template-columns:
            minmax(240px, 1fr)
            repeat(2, minmax(160px, 0.7fr));
    }

    .admin-player-filter-form .admin-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {

    .admin-player-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .admin-player-filter-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {

    .admin-player-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-player-filter-search,
    .admin-player-filter-form .admin-filter-actions {
        grid-column: auto;
    }
}

/* ======================================================
   PLAYER CREATE / EDIT FORM
====================================================== */

.admin-player-photo-upload {
    padding: 18px;
    border: 1px dashed var(--admin-border);
    border-radius: 18px;
    background: var(--admin-bg);
    text-align: center;
    transition: var(--admin-transition);
}

.admin-player-photo-upload:hover {
    border-color: var(--admin-primary);
    background: var(--admin-primary-soft);
}

.admin-player-photo-upload.is-invalid {
    border-color: var(--admin-danger);
}

.admin-player-photo-preview {
    width: 190px;
    height: 230px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--admin-border-light);
    border-radius: 24px;
    color: var(--admin-text-light);
    background: var(--admin-white);
}

.admin-player-photo-preview i {
    font-size: 2.3rem;
}

.admin-player-photo-preview span {
    font-size: 0.74rem;
}

.admin-player-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.admin-player-photo-upload p {
    margin: 12px 0 0;
    color: var(--admin-text-light);
    font-size: 0.7rem;
}

.admin-player-profile-preview {
    min-height: 115px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--admin-border-light);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            var(--admin-primary-soft),
            var(--admin-white)
        );
}

.admin-player-profile-number {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--admin-white);
    background: var(--admin-primary-dark);
    font-size: 1.25rem;
    font-weight: 900;
}

.admin-player-profile-preview > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-player-profile-preview strong {
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.95rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-player-profile-preview span:not(
    .admin-player-profile-number
) {
    margin-top: 5px;
    color: var(--admin-primary-dark);
    font-size: 0.77rem;
    font-weight: 750;
}

.admin-player-profile-preview small {
    margin-top: 4px;
    color: var(--admin-text-muted);
    font-size: 0.7rem;
}

.admin-featured-switch {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    cursor: pointer;
}

.admin-featured-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-featured-switch-control {
    position: relative;
    width: 46px;
    height: 25px;
    flex: 0 0 46px;
    border-radius: 999px;
    background: #dce3ea;
    transition: var(--admin-transition);
}

.admin-featured-switch-control::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--admin-white);
    box-shadow: 0 2px 6px rgba(15, 42, 67, 0.18);
    transition: var(--admin-transition);
}

.admin-featured-switch input:checked
+ .admin-featured-switch-control {
    background: #f0ad00;
}

.admin-featured-switch input:checked
+ .admin-featured-switch-control::after {
    transform: translateX(21px);
}

.admin-featured-switch input:focus-visible
+ .admin-featured-switch-control {
    outline: 3px solid rgba(51, 168, 255, 0.25);
    outline-offset: 2px;
}

.admin-featured-switch-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-featured-switch-content strong {
    color: var(--admin-text);
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-featured-switch-content small {
    margin-top: 4px;
    color: var(--admin-text-muted);
    font-size: 0.71rem;
    line-height: 1.55;
}

/* ======================================================
   PLAYER FORM RESPONSIVE
====================================================== */

@media (max-width: 575.98px) {

    .admin-player-photo-preview {
        width: 160px;
        height: 200px;
    }

    .admin-player-profile-preview {
        align-items: flex-start;
    }

    .admin-player-profile-number {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 15px;
        font-size: 1rem;
    }
} 

/* ======================================================
   PLAYER EDIT — REMOVE PHOTO
====================================================== */

.admin-remove-photo-option {
    margin-top: 16px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(220, 53, 69, 0.14);
    border-radius: 12px;
    color: var(--admin-danger);
    background: var(--admin-danger-light);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-remove-photo-option input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: var(--admin-danger);
    cursor: pointer;
}

.admin-remove-photo-option:hover {
    border-color: rgba(220, 53, 69, 0.3);
}

/* ==========================================================
   MATCHES MODULE
========================================================== */

/* ==========================================================
   STATISTICS CARDS
========================================================== */

.admin-stat-card {
    position: relative;
    min-height: 128px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.admin-stat-card::after {
    content: "";
    position: absolute;
    top: -38px;
    right: -38px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.08);
}

.admin-stat-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--admin-primary, #1597e5);
    background: rgba(21, 151, 229, 0.1);
    font-size: 1.15rem;
}

.admin-stat-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-stat-content > span {
    margin-bottom: 2px;
    color: var(--admin-text, #14213d);
    font-size: 0.86rem;
    font-weight: 600;
}

.admin-stat-content strong {
    color: var(--admin-heading, #14213d);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
}

.admin-stat-content small {
    margin-top: 5px;
    color: var(--admin-muted, #6b7280);
    font-size: 0.74rem;
}

/* ==========================================================
   SEARCH FIELD
========================================================== */

.admin-search-field {
    position: relative;
}

.admin-search-field > i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #64748b;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-search-field .admin-form-control {
    padding-left: 42px;
}

/* ==========================================================
   MATCH TABLE
========================================================== */

.admin-table {
    width: 100%;
    table-layout: auto;
}

.admin-table thead th {
    padding: 15px 16px;
    border-bottom: 1px solid #e8eef5;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #edf1f5;
    color: #18243d;
    font-size: 0.82rem;
    vertical-align: middle;
}

.admin-table tbody tr {
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.admin-table tbody tr:hover {
    background: #fafdff;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ==========================================================
   MATCH TEAMS
========================================================== */

.admin-match-teams {
    min-width: 220px;
    display: grid;
    gap: 9px;
}

.admin-match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-match-team img,
.admin-match-team-placeholder {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
    border: 1px solid #e5ebf2;
    border-radius: 50%;
    background: #ffffff;
    padding: 4px;
}

.admin-match-team-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1rem;
}

.admin-match-team > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-match-team strong {
    max-width: 165px;
    overflow: hidden;
    color: #17233d;
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-match-team small {
    margin-top: 1px;
    color: #8490a3;
    font-size: 0.68rem;
}

.admin-match-versus {
    margin-left: 48px;
    color: #94a3b8;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ==========================================================
   DATE AND SECONDARY TEXT
========================================================== */

.admin-table-primary-text {
    color: #17233d;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

.admin-table-secondary-text {
    margin-top: 5px;
    color: #738095;
    font-size: 0.7rem;
    line-height: 1.55;
}

.admin-table-secondary-text i {
    margin-right: 3px;
}

/* ==========================================================
   MATCH SCORE
========================================================== */

.admin-match-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 72px;
    padding: 7px 12px;
    border: 1px solid #e7edf4;
    border-radius: 12px;
    background: #f8fafc;
}

.admin-match-score strong {
    color: #17233d;
    font-size: 1rem;
    font-weight: 850;
}

.admin-match-score span {
    color: #94a3b8;
}

.admin-match-no-score {
    color: #94a3b8;
    font-size: 1rem;
}

/* ==========================================================
   MATCH STATUS
========================================================== */

.admin-status {
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-status-primary {
    color: #086aa6;
    background: #e9f6ff;
}

.admin-status-success {
    color: #15803d;
    background: #ecfdf3;
}

.admin-status-danger {
    color: #c92336;
    background: #fff0f2;
}

.admin-status-warning {
    color: #a16207;
    background: #fff8df;
}

.admin-status-secondary {
    color: #5f6b7a;
    background: #eef2f6;
}

.admin-live-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(201, 35, 54, 0.12);
    animation: admin-live-pulse 1.5s infinite;
}

@keyframes admin-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 35, 54, 0.32);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(201, 35, 54, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(201, 35, 54, 0);
    }
}

/* ==========================================================
   MATCH DATA SUMMARY
========================================================== */

.admin-match-data-summary {
    min-width: 118px;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 7px 10px;
}

.admin-match-data-summary span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 0.71rem;
    white-space: nowrap;
}

.admin-match-data-summary i {
    color: var(--admin-primary, #1597e5);
    font-size: 0.8rem;
}

/* ==========================================================
   TABLE ACTIONS
========================================================== */

.admin-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.admin-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4eaf1;
    border-radius: 10px;
    color: #4b5d74;
    background: #ffffff;
    font-size: 0.85rem;
    text-decoration: none;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.admin-action-btn:hover {
    transform: translateY(-1px);
}

.admin-action-view:hover {
    color: #0879bc;
    border-color: rgba(21, 151, 229, 0.3);
    background: #eef9ff;
}

.admin-action-edit:hover {
    color: #9a6700;
    border-color: rgba(245, 158, 11, 0.3);
    background: #fff9e8;
}

.admin-action-delete:hover {
    color: #cc283b;
    border-color: rgba(220, 53, 69, 0.28);
    background: #fff1f3;
}

.admin-action-more:hover {
    color: #17233d;
    background: #f3f6f9;
}

/* ==========================================================
   ACTION DROPDOWN
========================================================== */

.admin-action-dropdown {
    min-width: 220px;
    padding: 8px;
    border: 1px solid #e4eaf1;
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.12);
}

.admin-action-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 650;
}

.admin-action-dropdown .dropdown-item i {
    width: 18px;
    color: var(--admin-primary, #1597e5);
    text-align: center;
}

.admin-action-dropdown .dropdown-item:hover {
    color: #17233d;
    background: #f3f8fc;
}

/* ==========================================================
   CARD FOOTER AND PAGINATION
========================================================== */

.admin-card-footer {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #edf1f5;
    background: #fbfdff;
}

.admin-pagination-info {
    color: #728095;
    font-size: 0.74rem;
}

.admin-pagination {
    gap: 5px;
}

.admin-pagination .page-link {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5ebf2;
    border-radius: 9px !important;
    color: #55657b;
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.admin-pagination .page-item.active .page-link {
    color: #ffffff;
    border-color: var(--admin-primary, #1597e5);
    background: var(--admin-primary, #1597e5);
}

.admin-pagination .page-item.disabled .page-link {
    color: #b2bac6;
    background: #f5f7f9;
}

/* ==========================================================
   EMPTY STATE
========================================================== */

.admin-empty-state {
    padding: 60px 24px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.admin-empty-state-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: var(--admin-primary, #1597e5);
    background: #ecf8ff;
    font-size: 1.75rem;
}

.admin-empty-state h4 {
    margin-bottom: 8px;
    color: #17233d;
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-empty-state p {
    max-width: 440px;
    margin-bottom: 20px;
    color: #758196;
    font-size: 0.82rem;
}

/* ==========================================================
   MATCH DELETE MODAL
========================================================== */

.admin-modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.2);
}

.admin-modal-content .modal-header {
    padding: 20px 22px;
    align-items: flex-start;
    border-bottom: 1px solid #edf1f5;
}

.admin-modal-content .modal-header > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-modal-content .modal-title {
    color: #17233d;
    font-size: 1rem;
    font-weight: 800;
}

.admin-modal-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1rem;
}

.admin-modal-icon-danger {
    color: #cc283b;
    background: #fff0f2;
}

.admin-modal-content .modal-body {
    padding: 22px;
    color: #526176;
    font-size: 0.84rem;
}

.admin-modal-content .modal-footer {
    padding: 16px 22px;
    border-top: 1px solid #edf1f5;
    background: #fbfdff;
}

/* ==========================================================
   RESPONSIVE MATCH TABLE
========================================================== */

@media (max-width: 1399.98px) {

    .admin-table thead th,
    .admin-table tbody td {
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-match-team strong {
        max-width: 135px;
    }

    .admin-match-teams {
        min-width: 190px;
    }
}

@media (max-width: 1199.98px) {

    .admin-table {
        min-width: 1050px;
    }

    .admin-stat-card {
        min-height: 116px;
    }
}

@media (max-width: 767.98px) {

    .admin-stat-card {
        min-height: 112px;
        padding: 16px;
        gap: 12px;
        border-radius: 16px;
    }

    .admin-stat-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .admin-stat-content strong {
        font-size: 1.35rem;
    }

    .admin-stat-content > span {
        font-size: 0.78rem;
    }

    .admin-stat-content small {
        font-size: 0.68rem;
    }

    .admin-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {

    .admin-stat-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-stat-card::after {
        top: -48px;
        right: -48px;
    }
} 

/* ==========================================================
   ADMIN FILTER FORMS — FINAL SCOPED LAYOUT
   Teams / Players / Matches
========================================================== */

/* ==========================================================
   SHARED FILTER CONTROLS
========================================================== */

.admin-filter-form,
.admin-player-filter-form,
.admin-match-filter-form {
    width: 100%;
}

.admin-filter-form > div,
.admin-player-filter-form > div,
.admin-match-filter-form > div {
    min-width: 0;
}

.admin-filter-form .admin-form-control,
.admin-filter-form .admin-form-select,
.admin-player-filter-form .admin-form-control,
.admin-player-filter-form .admin-form-select,
.admin-match-filter-form .admin-form-control,
.admin-match-filter-form .admin-form-select {
    width: 100%;
    min-width: 0;
    height: 52px;
    border-radius: 14px;
}

.admin-filter-form .admin-form-select,
.admin-player-filter-form .admin-form-select,
.admin-match-filter-form .admin-form-select {
    padding-right: 42px;
}

.admin-filter-form .admin-search-control,
.admin-player-filter-form .admin-search-control,
.admin-match-filter-form .admin-search-field {
    width: 100%;
    min-width: 0;
}

.admin-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-filter-actions .admin-btn {
    min-height: 52px;
    white-space: nowrap;
}

/* ==========================================================
   TEAMS FILTER
   Recherche | Statut | Actions
========================================================== */

#teamsFilterForm {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(190px, 240px)
        auto;
    align-items: end;
    gap: 16px;
}

#teamsFilterForm .admin-filter-actions {
    grid-column: auto;
}

#teamsFilterForm .admin-filter-actions .admin-btn {
    min-width: 130px;
}

/* ==========================================================
   PLAYERS FILTER
   Recherche | Équipe | Position | Statut | Vedette | Actions
========================================================== */

#playersFilterForm {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.45fr)
        repeat(4, minmax(145px, 0.72fr))
        auto;
    align-items: end;
    gap: 16px;
}

#playersFilterForm .admin-player-filter-search {
    min-width: 0;
}

#playersFilterForm .admin-filter-actions {
    grid-column: auto;
    align-self: end;
}

#playersFilterForm .admin-filter-actions .admin-btn {
    min-width: 130px;
}

/* ==========================================================
   MATCHES FILTER
   Recherche | Statut | Équipe | Compétition | Actions
========================================================== */

#matchesFilterForm {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(155px, 0.7fr)
        minmax(175px, 0.8fr)
        minmax(190px, 0.9fr)
        minmax(130px, auto);
    align-items: end;
    gap: 16px;
}

#matchesFilterForm > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0;
}

#matchesFilterForm .admin-search-field {
    position: relative;
}

#matchesFilterForm .admin-search-field > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: var(--admin-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

#matchesFilterForm .admin-search-field .admin-form-control {
    padding-left: 44px;
}

#matchesFilterForm .d-flex.gap-2 {
    width: 100%;
    min-width: 0;
}

#matchesFilterForm .admin-btn {
    width: 100%;
    min-height: 52px;
    white-space: nowrap;
}

/* ==========================================================
   LARGE LAPTOPS
========================================================== */

@media (max-width: 1399.98px) {

    #playersFilterForm {
        grid-template-columns:
            minmax(250px, 1.3fr)
            repeat(2, minmax(165px, 0.8fr));
    }

    #playersFilterForm .admin-filter-actions {
        grid-column: 1 / -1;
    }

    #playersFilterForm .admin-filter-actions .admin-btn {
        width: auto;
    }

    #matchesFilterForm {
        grid-template-columns:
            minmax(240px, 1.4fr)
            repeat(2, minmax(165px, 0.8fr));
    }

    #matchesFilterForm > :nth-child(4) {
        grid-column: span 2;
    }

    #matchesFilterForm > :nth-child(5) {
        grid-column: span 1;
    }
}

/* ==========================================================
   TABLETS / SMALL LAPTOPS
========================================================== */

@media (max-width: 991.98px) {

    #teamsFilterForm {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(190px, 240px);
    }

    #teamsFilterForm .admin-filter-actions {
        grid-column: 1 / -1;
    }

    #playersFilterForm {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #playersFilterForm .admin-player-filter-search {
        grid-column: 1 / -1;
    }

    #playersFilterForm .admin-filter-actions {
        grid-column: 1 / -1;
    }

    #matchesFilterForm {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #matchesFilterForm > :nth-child(1) {
        grid-column: 1 / -1;
    }

    #matchesFilterForm > :nth-child(4),
    #matchesFilterForm > :nth-child(5) {
        grid-column: auto;
    }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    #teamsFilterForm {
        grid-template-columns: 1fr;
    }

    #teamsFilterForm .admin-filter-actions {
        grid-column: auto;
    }

    #playersFilterForm {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #playersFilterForm .admin-player-filter-search {
        grid-column: 1 / -1;
    }

    #playersFilterForm .admin-filter-actions {
        grid-column: 1 / -1;
    }

    #matchesFilterForm {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #matchesFilterForm > :nth-child(1),
    #matchesFilterForm > :nth-child(4),
    #matchesFilterForm > :nth-child(5) {
        grid-column: 1 / -1;
    }

    #matchesFilterForm .d-flex.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 10px !important;
    }
}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 575.98px) {

    #teamsFilterForm,
    #playersFilterForm,
    #matchesFilterForm {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #teamsFilterForm > *,
    #playersFilterForm > *,
    #matchesFilterForm > * {
        grid-column: 1 !important;
    }

    #teamsFilterForm .admin-filter-actions,
    #playersFilterForm .admin-filter-actions {
        width: 100%;
        flex-direction: column;
    }

    #teamsFilterForm .admin-filter-actions .admin-btn,
    #playersFilterForm .admin-filter-actions .admin-btn {
        width: 100%;
    }

    #matchesFilterForm .d-flex.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    #matchesFilterForm .admin-btn {
        width: 100%;
    }
}

/* ==========================================================
   MATCH CENTER
========================================================== */

.admin-match-center-hero {
    position: relative;
    padding: 30px;
    overflow: hidden;
}

.admin-match-center-hero::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.08);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-match-center-competition {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-match-center-competition > span:first-child {
    color: var(--admin-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-match-center-scoreboard {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 34px auto 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 34px;
}

.admin-match-center-team {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.admin-match-center-logo {
    width: 92px;
    height: 92px;
    margin-bottom: 16px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 50%;
    color: var(--admin-primary-dark);
    background: var(--admin-white);
    box-shadow: var(--admin-shadow-sm);
    font-size: 2rem;
}

.admin-match-center-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-match-center-team strong {
    max-width: 250px;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 1.05rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-match-center-team > span {
    margin-top: 5px;
    color: var(--admin-text-muted);
    font-size: 0.74rem;
}

.admin-match-center-result {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.admin-match-center-score {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-match-center-score strong {
    min-width: 54px;
    color: var(--admin-text);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
}

.admin-match-center-score span {
    color: var(--admin-text-light);
    font-size: 1.5rem;
    font-weight: 700;
}

.admin-match-center-vs {
    color: var(--admin-primary-dark);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.admin-match-center-result small {
    margin-top: 13px;
    color: var(--admin-text-muted);
    font-size: 0.76rem;
}

.admin-match-center-live {
    margin-top: 13px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    color: var(--admin-danger);
    background: var(--admin-danger-light);
    font-size: 0.7rem;
    font-weight: 800;
}

.admin-match-center-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px 28px;
    flex-wrap: wrap;
    padding-top: 23px;
    border-top: 1px solid var(--admin-border-light);
}

.admin-match-center-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--admin-text-muted);
    font-size: 0.76rem;
}

.admin-match-center-meta i {
    color: var(--admin-primary-dark);
}

/* MODULE LINKS */

.admin-match-center-module {
    height: 100%;
    min-height: 102px;
    padding: 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--admin-border-light);
    border-radius: var(--admin-radius-lg);
    background: var(--admin-white);
    box-shadow: var(--admin-shadow-sm);
    transition: var(--admin-transition);
}

.admin-match-center-module:hover {
    color: inherit;
    border-color: var(--admin-primary-light);
    box-shadow: var(--admin-shadow-md);
    transform: translateY(-3px);
}

.admin-match-center-module-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 1.15rem;
}

.admin-match-center-module > div {
    min-width: 0;
    flex: 1;
}

.admin-match-center-module strong {
    display: block;
    color: var(--admin-text);
    font-size: 0.85rem;
    font-weight: 800;
}

.admin-match-center-module span:not(.admin-match-center-module-icon) {
    display: block;
    margin-top: 4px;
    color: var(--admin-text-muted);
    font-size: 0.72rem;
}

.admin-match-center-module > i {
    color: var(--admin-text-light);
    font-size: 0.8rem;
}

/* CARD LINK */

.admin-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--admin-primary-dark);
    font-size: 0.75rem;
    font-weight: 800;
}

.admin-card-link:hover {
    color: var(--admin-primary-deep);
}

/* TIMELINE */

.admin-match-timeline {
    display: flex;
    flex-direction: column;
}

.admin-match-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px 42px minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
}

.admin-match-timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 49px;
    bottom: -10px;
    left: 68px;
    width: 1px;
    background: var(--admin-border);
}

.admin-match-timeline-minute {
    padding-top: 11px;
    color: var(--admin-text);
    font-size: 0.76rem;
    font-weight: 850;
    text-align: right;
}

.admin-match-timeline-icon {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
    border-radius: 50%;
    color: var(--admin-text-muted);
    background: var(--admin-white);
}

.admin-match-timeline-icon.goal {
    color: var(--admin-success);
    background: var(--admin-success-light);
}

.admin-match-timeline-icon.yellow {
    color: #d18b00;
    background: var(--admin-warning-light);
}

.admin-match-timeline-icon.red {
    color: var(--admin-danger);
    background: var(--admin-danger-light);
}

.admin-match-timeline-icon.substitution {
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

.admin-match-timeline-content {
    min-width: 0;
    padding: 9px 12px;
    border-radius: 13px;
    background: var(--admin-bg);
}

.admin-match-timeline-content strong {
    display: block;
    color: var(--admin-text);
    font-size: 0.78rem;
}

.admin-match-timeline-content > span {
    display: block;
    margin-top: 3px;
    color: var(--admin-text);
    font-size: 0.76rem;
}

.admin-match-timeline-content small {
    display: block;
    margin-top: 5px;
    color: var(--admin-text-muted);
    font-size: 0.7rem;
    line-height: 1.5;
}

/* EMPTY STATE */

.admin-match-center-empty {
    padding: 38px 20px;
    text-align: center;
}

.admin-match-center-empty.compact {
    padding: 24px 15px;
}

.admin-match-center-empty > i {
    margin-bottom: 13px;
    display: block;
    color: var(--admin-primary);
    font-size: 2rem;
}

.admin-match-center-empty h4 {
    margin: 0 0 7px;
    color: var(--admin-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.admin-match-center-empty p {
    max-width: 410px;
    margin: 0 auto 17px;
    color: var(--admin-text-muted);
    font-size: 0.76rem;
    line-height: 1.6;
}

/* LINEUP */

.admin-lineup-preview {
    padding: 17px;
    border: 1px solid var(--admin-border-light);
    border-radius: 17px;
    background: var(--admin-bg);
}

.admin-lineup-preview h4 {
    margin: 0 0 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text);
    font-size: 0.84rem;
    font-weight: 850;
}

.admin-lineup-preview-player {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
}

.admin-lineup-preview-player:not(:last-child) {
    border-bottom: 1px solid rgba(223, 231, 239, 0.7);
}

.admin-lineup-preview-number {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 0.72rem;
    font-weight: 850;
}

.admin-lineup-preview-player > div {
    min-width: 0;
}

.admin-lineup-preview-player strong {
    display: block;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-lineup-preview-player span:not(.admin-lineup-preview-number) {
    display: block;
    margin-top: 2px;
    color: var(--admin-text-muted);
    font-size: 0.66rem;
}

/* GOALS */

.admin-match-goals-list {
    display: flex;
    flex-direction: column;
}

.admin-match-goal-item {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-match-goal-item:not(:last-child) {
    border-bottom: 1px solid var(--admin-border-light);
}

.admin-match-goal-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--admin-success);
    background: var(--admin-success-light);
}

.admin-match-goal-item > div {
    min-width: 0;
    flex: 1;
}

.admin-match-goal-item > div strong {
    display: block;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.77rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-match-goal-item > div span {
    display: block;
    margin-top: 3px;
    color: var(--admin-text-muted);
    font-size: 0.67rem;
}

.admin-match-goal-minute {
    color: var(--admin-primary-dark);
    font-size: 0.78rem;
}

/* STATISTICS */

.admin-match-statistics-header {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.admin-match-statistics-header strong {
    max-width: 45%;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-match-stat-row {
    margin-bottom: 17px;
}

.admin-match-stat-row:last-child {
    margin-bottom: 0;
}

.admin-match-stat-values {
    margin-bottom: 7px;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 9px;
}

.admin-match-stat-values strong {
    color: var(--admin-text);
    font-size: 0.7rem;
}

.admin-match-stat-values strong:last-child {
    text-align: right;
}

.admin-match-stat-values span {
    color: var(--admin-text-muted);
    font-size: 0.67rem;
    text-align: center;
}

.admin-match-stat-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.admin-match-stat-bars > span {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--admin-border-light);
}

.admin-match-stat-bars > span:first-child {
    display: flex;
    justify-content: flex-end;
}

.admin-match-stat-bars i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--admin-primary);
}

.admin-match-stat-bars > span:last-child i {
    background: var(--admin-primary-dark);
}

/* EDITORIAL */

.admin-match-editorial-list {
    display: flex;
    flex-direction: column;
}

.admin-match-editorial-list > div {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.admin-match-editorial-list > div:not(:last-child) {
    border-bottom: 1px solid var(--admin-border-light);
}

.admin-match-editorial-list span {
    color: var(--admin-text-muted);
    font-size: 0.74rem;
}

.admin-match-editorial-list strong,
.admin-match-editorial-list a {
    max-width: 58%;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.73rem;
    font-weight: 750;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-match-editorial-list a {
    color: var(--admin-primary-dark);
}

/* RESPONSIVE */

@media (max-width: 767.98px) {

    .admin-match-center-hero {
        padding: 23px 18px;
    }

    .admin-match-center-scoreboard {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 13px;
    }

    .admin-match-center-logo {
        width: 68px;
        height: 68px;
        margin-bottom: 11px;
    }

    .admin-match-center-team strong {
        max-width: 115px;
        font-size: 0.78rem;
    }

    .admin-match-center-score strong {
        min-width: 30px;
        font-size: 2rem;
    }

    .admin-match-center-score {
        gap: 7px;
    }

    .admin-match-center-result small {
        font-size: 0.64rem;
    }

    .admin-match-center-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 479.98px) {

    .admin-match-center-logo {
        width: 57px;
        height: 57px;
        padding: 7px;
    }

    .admin-match-center-team strong {
        max-width: 90px;
        font-size: 0.7rem;
    }

    .admin-match-center-team > span {
        font-size: 0.62rem;
    }

    .admin-match-center-score strong {
        min-width: 23px;
        font-size: 1.65rem;
    }

    .admin-match-center-scoreboard {
        gap: 8px;
    }

    .admin-match-timeline-item {
        grid-template-columns: 38px 36px minmax(0, 1fr);
        gap: 8px;
    }

    .admin-match-timeline-icon {
        width: 36px;
        height: 36px;
    }

    .admin-match-timeline-item:not(:last-child)::after {
        top: 43px;
        left: 56px;
    }
}

/* ==========================================================
   MATCH LINEUP PAGE
   Scoped selectors only: .admin-lineup-*
========================================================== */

/* ----------------------------------------------------------
   MATCH SUMMARY
---------------------------------------------------------- */

.admin-lineup-match-summary {
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}

.admin-lineup-summary-team {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-lineup-summary-team.away {
    justify-content: flex-end;
    text-align: right;
}

.admin-lineup-summary-logo {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--admin-border-light);
    border-radius: 50%;
    color: var(--admin-primary-dark);
    background: var(--admin-white);
    box-shadow: var(--admin-shadow-sm);
    font-size: 1.45rem;
}

.admin-lineup-summary-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-lineup-summary-team > div:not(.admin-lineup-summary-logo) {
    min-width: 0;
}

.admin-lineup-summary-team span {
    display: block;
    margin-bottom: 4px;
    color: var(--admin-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-lineup-summary-team strong {
    display: block;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.9rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-lineup-summary-center {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.admin-lineup-summary-center > span {
    color: var(--admin-text-muted);
    font-size: 0.67rem;
    font-weight: 750;
    text-transform: uppercase;
}

.admin-lineup-summary-center > strong {
    margin: 6px 0;
    color: var(--admin-primary-dark);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.admin-lineup-summary-center > small {
    color: var(--admin-text-muted);
    font-size: 0.67rem;
}

/* ----------------------------------------------------------
   TEAM TABS
---------------------------------------------------------- */

.admin-lineup-tabs {
    display: flex;
    gap: 10px;
    padding: 7px;
    border: 1px solid var(--admin-border-light);
    border-radius: 16px;
    background: var(--admin-white);
    box-shadow: var(--admin-shadow-sm);
}

.admin-lineup-tabs .nav-item {
    flex: 1;
}

.admin-lineup-tabs .nav-link {
    width: 100%;
    min-height: 58px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 12px;
    color: var(--admin-text-muted);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: left;
    transition: var(--admin-transition);
}

.admin-lineup-tabs .nav-link:hover {
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

.admin-lineup-tabs .nav-link.active {
    color: var(--admin-white);
    background: var(--admin-primary-dark);
    box-shadow: var(--admin-shadow-sm);
}

.admin-lineup-tabs .nav-link span {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: inherit;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.62rem;
    font-weight: 800;
}

.admin-lineup-tabs .nav-link:not(.active) span {
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

/* ----------------------------------------------------------
   FORMATION FORM
---------------------------------------------------------- */

.admin-lineup-formation-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.admin-lineup-formation-form > div {
    min-width: 0;
}

.admin-lineup-formation-form .admin-form-control {
    width: 100%;
}

/* ----------------------------------------------------------
   COUNTERS
---------------------------------------------------------- */

.admin-lineup-count {
    min-width: 42px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 0.7rem;
    font-weight: 850;
}

.admin-lineup-count.complete {
    color: var(--admin-success);
    background: var(--admin-success-light);
}

/* ----------------------------------------------------------
   PLAYER LIST
---------------------------------------------------------- */

.admin-lineup-player-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-lineup-player-card {
    min-width: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(260px, auto) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--admin-border-light);
    border-radius: 14px;
    background: var(--admin-bg);
    transition: var(--admin-transition);
}

.admin-lineup-player-card:hover {
    border-color: var(--admin-primary-light);
    background: var(--admin-white);
    box-shadow: var(--admin-shadow-sm);
}

.admin-lineup-player-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-lineup-player-avatar {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--admin-border-light);
    border-radius: 50%;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 1rem;
}

.admin-lineup-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-lineup-player-info {
    min-width: 0;
}

.admin-lineup-player-info strong {
    display: block;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.77rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-lineup-player-info span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--admin-text-muted);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------
   PLAYER INLINE ACTIONS
---------------------------------------------------------- */

.admin-lineup-player-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 70px 38px;
    align-items: center;
    gap: 8px;
}

.admin-lineup-player-actions .admin-form-control {
    min-width: 0;
    height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.7rem;
}

.admin-lineup-order-input {
    width: 70px;
    text-align: center;
}

/* ----------------------------------------------------------
   ADD PLAYER CARD
---------------------------------------------------------- */

.admin-lineup-add-card {
    position: sticky;
    top: 90px;
}

.admin-lineup-add-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-lineup-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-lineup-divider::before,
.admin-lineup-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--admin-border-light);
}

.admin-lineup-divider span {
    padding: 0 10px;
    color: var(--admin-text-muted);
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
}

.admin-lineup-starter-check {
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--admin-border-light);
    border-radius: 13px;
    background: var(--admin-bg);
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-lineup-starter-check:hover {
    border-color: var(--admin-primary-light);
    background: var(--admin-primary-soft);
}

.admin-lineup-starter-check > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-lineup-starter-check > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--admin-text-light);
    background: var(--admin-white);
    box-shadow: inset 0 0 0 1px var(--admin-border-light);
    transition: var(--admin-transition);
}

.admin-lineup-starter-check > input:checked + span {
    color: #c98a00;
    background: var(--admin-warning-light);
    box-shadow: none;
}

.admin-lineup-starter-check > div {
    min-width: 0;
}

.admin-lineup-starter-check strong {
    display: block;
    color: var(--admin-text);
    font-size: 0.76rem;
    font-weight: 800;
}

.admin-lineup-starter-check small {
    display: block;
    margin-top: 2px;
    color: var(--admin-text-muted);
    font-size: 0.65rem;
    line-height: 1.45;
}

/* ----------------------------------------------------------
   FORM HELP
---------------------------------------------------------- */

.admin-lineup-add-form .admin-form-help {
    display: block;
    margin-top: 6px;
    color: var(--admin-text-muted);
    font-size: 0.64rem;
    line-height: 1.45;
}

/* ----------------------------------------------------------
   SELECTS
---------------------------------------------------------- */

.admin-lineup-player-select,
.admin-lineup-position-select {
    width: 100%;
}

/* ----------------------------------------------------------
   FOCUS STATES
---------------------------------------------------------- */

.admin-lineup-formation-form .admin-form-control:focus,
.admin-lineup-player-actions .admin-form-control:focus,
.admin-lineup-add-form .admin-form-control:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(51, 168, 255, 0.12);
}

/* ----------------------------------------------------------
   RESPONSIVE: TABLET
---------------------------------------------------------- */

@media (max-width: 1199.98px) {

    .admin-lineup-add-card {
        position: static;
        top: auto;
    }

    .admin-lineup-player-card {
        grid-template-columns: minmax(170px, 1fr) minmax(250px, auto) auto;
    }
}

@media (max-width: 991.98px) {

    .admin-lineup-match-summary {
        gap: 18px;
    }

    .admin-lineup-summary-logo {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .admin-lineup-player-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .admin-lineup-player-actions {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) 72px 40px;
    }
}

/* ----------------------------------------------------------
   RESPONSIVE: MOBILE
---------------------------------------------------------- */

@media (max-width: 767.98px) {

    .admin-lineup-match-summary {
        padding: 18px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 10px;
    }

    .admin-lineup-summary-team {
        align-items: center;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .admin-lineup-summary-team.away {
        align-items: center;
        flex-direction: column-reverse;
        justify-content: flex-start;
        text-align: center;
    }

    .admin-lineup-summary-logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        padding: 6px;
    }

    .admin-lineup-summary-team strong {
        max-width: 110px;
        font-size: 0.72rem;
    }

    .admin-lineup-summary-team span {
        font-size: 0.58rem;
    }

    .admin-lineup-summary-center > span {
        max-width: 100px;
        overflow: hidden;
        font-size: 0.58rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-lineup-summary-center > strong {
        font-size: 0.95rem;
    }

    .admin-lineup-summary-center > small {
        max-width: 95px;
        overflow: hidden;
        font-size: 0.56rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-lineup-tabs {
        flex-direction: column;
    }

    .admin-lineup-tabs .nav-link {
        min-height: 52px;
    }

    .admin-lineup-formation-form {
        grid-template-columns: 1fr;
    }

    .admin-lineup-formation-form .admin-btn {
        width: 100%;
    }

    .admin-lineup-player-card {
        padding: 11px;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .admin-lineup-player-actions {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) 68px 38px;
    }
}

/* ----------------------------------------------------------
   RESPONSIVE: SMALL MOBILE
---------------------------------------------------------- */

@media (max-width: 479.98px) {

    .admin-lineup-match-summary {
        padding: 15px 10px;
        gap: 6px;
    }

    .admin-lineup-summary-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .admin-lineup-summary-team strong {
        max-width: 82px;
        font-size: 0.65rem;
    }

    .admin-lineup-summary-center > span,
    .admin-lineup-summary-center > small {
        max-width: 75px;
    }

    .admin-lineup-tabs {
        padding: 6px;
    }

    .admin-lineup-tabs .nav-link {
        padding: 9px 11px;
        font-size: 0.7rem;
    }

    .admin-lineup-tabs .nav-link span {
        padding: 4px 7px;
        font-size: 0.57rem;
    }

    .admin-lineup-player-card {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .admin-lineup-player-main {
        gap: 9px;
    }

    .admin-lineup-player-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .admin-lineup-player-actions {
        grid-template-columns: minmax(0, 1fr) 58px 36px;
        gap: 6px;
    }

    .admin-lineup-player-actions .admin-form-control {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.64rem;
    }

    .admin-lineup-order-input {
        width: 58px;
    }

    .admin-lineup-add-card .admin-card-body {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/*
==========================================================
OFC ADMIN - MATCH GOALS
PART 1
Scoreboard, statistics and main layout
==========================================================
*/

/* ==========================================
   MAIN SCOREBOARD
========================================== */

.admin-goals-scoreboard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(51, 168, 255, 0.14),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.admin-goals-scoreboard::before {
    content: "";
    position: absolute;
    top: -90px;
    left: 50%;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.08);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-goals-scoreboard::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -120px;
    width: 300px;
    height: 180px;
    border-radius: 50%;
    background: rgba(0, 119, 204, 0.06);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-goals-score-team,
.admin-goals-score-center {
    position: relative;
    z-index: 1;
}

/* ==========================================
   TEAM BLOCKS
========================================== */

.admin-goals-score-team {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.admin-goals-score-team.away {
    justify-content: flex-end;
    text-align: right;
}

.admin-goals-team-logo {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.admin-goals-team-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    display: block;
}

.admin-goals-team-logo i {
    font-size: 34px;
    color: #33a8ff;
}

.admin-goals-team-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-goals-team-info span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.admin-goals-team-info strong {
    display: block;
    max-width: 280px;
    overflow: hidden;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   CENTER SCORE
========================================== */

.admin-goals-score-center {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.admin-goals-competition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0077cc;
}

.admin-goals-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 9px;
}

.admin-goals-score strong {
    min-width: 54px;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #0f172a;
}

.admin-goals-score span {
    font-size: 24px;
    font-weight: 700;
    color: #94a3b8;
}

.admin-goals-score-center small {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

/* ==========================================
   STATISTIC CARDS
========================================== */

.admin-goals-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 108px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.admin-goals-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(51, 168, 255, 0.24);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.admin-goals-stat-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 23px;
    color: #0077cc;
}

.admin-goals-stat-icon.home {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.admin-goals-stat-icon.away {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.admin-goals-stat-card > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-goals-stat-card span {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-goals-stat-card strong {
    font-size: 29px;
    font-weight: 900;
    line-height: 1;
    color: #0f172a;
}

/* ==========================================
   MAIN CONTENT LAYOUT
========================================== */

.admin-goals-form-card {
    position: sticky;
    top: 94px;
}

.admin-goals-count-badge {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 13px;
    font-weight: 800;
    color: #0077cc;
}

/* ==========================================
   GENERIC GOALS SECTION SPACING
========================================== */

.admin-goals-scoreboard + .row {
    position: relative;
}

.admin-goals-scoreboard,
.admin-goals-stat-card,
.admin-goals-form-card {
    isolation: isolate;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1199.98px) {

    .admin-goals-form-card {
        position: static;
        top: auto;
    }

    .admin-goals-scoreboard {
        gap: 22px;
        padding: 28px;
    }

    .admin-goals-team-logo {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .admin-goals-team-logo img {
        width: 54px;
        height: 54px;
    }

    .admin-goals-team-info strong {
        max-width: 220px;
        font-size: 19px;
    }

    .admin-goals-score strong {
        font-size: 43px;
    }

}

/* ==========================================
   MEDIUM TABLET
========================================== */

@media (max-width: 991.98px) {

    .admin-goals-scoreboard {
        grid-template-columns: 1fr auto 1fr;
        gap: 16px;
        padding: 25px 20px;
    }

    .admin-goals-score-team {
        gap: 12px;
    }

    .admin-goals-team-logo {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .admin-goals-team-logo img {
        width: 48px;
        height: 48px;
    }

    .admin-goals-team-logo i {
        font-size: 29px;
    }

    .admin-goals-team-info strong {
        max-width: 160px;
        font-size: 17px;
    }

    .admin-goals-team-info span {
        font-size: 10px;
    }

    .admin-goals-score-center {
        min-width: 150px;
    }

    .admin-goals-score {
        gap: 12px;
    }

    .admin-goals-score strong {
        min-width: 44px;
        font-size: 38px;
    }

    .admin-goals-score span {
        font-size: 20px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767.98px) {

    .admin-goals-scoreboard {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 24px 18px;
    }

    .admin-goals-scoreboard::before {
        top: 32%;
    }

    .admin-goals-score-team,
    .admin-goals-score-team.away {
        justify-content: center;
        text-align: center;
    }

    .admin-goals-score-team.away {
        flex-direction: row-reverse;
    }

    .admin-goals-team-info {
        align-items: center;
    }

    .admin-goals-team-info strong {
        max-width: 260px;
        font-size: 18px;
        white-space: normal;
    }

    .admin-goals-score-center {
        order: -1;
        min-width: 0;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .admin-goals-score strong {
        font-size: 44px;
    }

    .admin-goals-stat-card {
        min-height: 96px;
        padding: 19px;
    }

    .admin-goals-stat-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 21px;
    }

    .admin-goals-stat-card strong {
        font-size: 26px;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 479.98px) {

    .admin-goals-scoreboard {
        padding: 21px 15px;
        border-radius: 18px;
    }

    .admin-goals-score-team,
    .admin-goals-score-team.away {
        flex-direction: column;
        gap: 10px;
    }

    .admin-goals-team-logo {
        flex-basis: 66px;
        width: 66px;
        height: 66px;
    }

    .admin-goals-team-info strong {
        max-width: 100%;
        font-size: 17px;
    }

    .admin-goals-score {
        gap: 10px;
    }

    .admin-goals-score strong {
        min-width: 42px;
        font-size: 40px;
    }

    .admin-goals-score span {
        font-size: 19px;
    }

    .admin-goals-competition {
        font-size: 10px;
    }

    .admin-goals-stat-card {
        gap: 13px;
        padding: 17px;
    }

    .admin-goals-stat-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

}

/*
==========================================================
OFC ADMIN - MATCH GOALS
PART 2
Goal list, timeline, badges and actions
==========================================================
*/

/* ==========================================
   GOALS LIST
========================================== */

.admin-goals-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-goals-list::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 35px;
    width: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            to bottom,
            rgba(51, 168, 255, 0.12),
            rgba(51, 168, 255, 0.55),
            rgba(51, 168, 255, 0.12)
        );
    pointer-events: none;
}

/* ==========================================
   GOAL ITEM
========================================== */

.admin-goals-item {
    position: relative;
    display: grid;
    grid-template-columns:
        72px
        52px
        minmax(0, 1fr)
        auto
        auto;
    align-items: center;
    gap: 16px;
    min-height: 92px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.admin-goals-item:last-child {
    border-bottom: 0;
}

.admin-goals-item:hover {
    background: rgba(248, 250, 252, 0.7);
}

.admin-goals-item::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 50%;
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #33a8ff;
    box-shadow:
        0 0 0 2px rgba(51, 168, 255, 0.18),
        0 4px 10px rgba(0, 119, 204, 0.18);
    transform: translateY(-50%);
}

/* ==========================================
   MINUTE
========================================== */

.admin-goals-minute {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid rgba(51, 168, 255, 0.16);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    color: #0077cc;
}

/* ==========================================
   PLAYER AVATAR
========================================== */

.admin-goals-player-avatar {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef6ff
        );
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.admin-goals-player-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.admin-goals-player-avatar i {
    font-size: 23px;
    color: #7c8da5;
}

/* ==========================================
   PLAYER INFO
========================================== */

.admin-goals-player-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.admin-goals-player-info strong {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-goals-player-info span {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   GOAL TYPE BADGES
========================================== */

.admin-goals-type {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.admin-goals-type i {
    font-size: 13px;
}

.admin-goals-type-normal {
    border-color: rgba(51, 168, 255, 0.16);
    background: rgba(51, 168, 255, 0.1);
    color: #0077cc;
}

.admin-goals-type-penalty {
    border-color: rgba(245, 158, 11, 0.18);
    background: rgba(245, 158, 11, 0.11);
    color: #b86e00;
}

.admin-goals-type-free_kick {
    border-color: rgba(139, 92, 246, 0.17);
    background: rgba(139, 92, 246, 0.1);
    color: #6d3bd1;
}

.admin-goals-type-own_goal {
    border-color: rgba(239, 68, 68, 0.16);
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* ==========================================
   ACTIONS
========================================== */

.admin-goals-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-goals-actions form {
    display: inline-flex;
    margin: 0;
}

.admin-goals-actions .admin-icon-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 11px;
}

.admin-goals-actions .admin-icon-btn i {
    font-size: 15px;
}

/* ==========================================
   EDIT BUTTON
========================================== */

.admin-goals-actions .admin-icon-btn-edit {
    border: 1px solid rgba(51, 168, 255, 0.16);
    background: rgba(51, 168, 255, 0.08);
    color: #0077cc;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.admin-goals-actions .admin-icon-btn-edit:hover {
    border-color: #33a8ff;
    background: #33a8ff;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================
   DELETE BUTTON
========================================== */

.admin-goals-actions .admin-icon-btn-delete {
    border: 1px solid rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.07);
    color: #dc2626;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.admin-goals-actions .admin-icon-btn-delete:hover {
    border-color: #ef4444;
    background: #ef4444;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================
   EMPTY STATE
========================================== */

.admin-goals-list + .admin-match-center-empty {
    margin-top: 10px;
}

.admin-goals-form-card
.admin-match-center-empty {
    padding: 30px 20px;
}

.admin-goals-form-card
.admin-match-center-empty i {
    color: #33a8ff;
}

/* ==========================================
   LIST DECORATIVE STATES
========================================== */

.admin-goals-item:has(
    .admin-goals-type-penalty
)::before {
    background: #f59e0b;
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, 0.17),
        0 4px 10px rgba(245, 158, 11, 0.16);
}

.admin-goals-item:has(
    .admin-goals-type-free_kick
)::before {
    background: #8b5cf6;
    box-shadow:
        0 0 0 2px rgba(139, 92, 246, 0.16),
        0 4px 10px rgba(139, 92, 246, 0.15);
}

.admin-goals-item:has(
    .admin-goals-type-own_goal
)::before {
    background: #ef4444;
    box-shadow:
        0 0 0 2px rgba(239, 68, 68, 0.16),
        0 4px 10px rgba(239, 68, 68, 0.15);
}

/* ==========================================
   HOVER DETAILS
========================================== */

.admin-goals-item:hover
.admin-goals-player-avatar {
    border-color: rgba(51, 168, 255, 0.25);
}

.admin-goals-item:hover
.admin-goals-player-info strong {
    color: #0077cc;
}

.admin-goals-item:hover
.admin-goals-minute {
    border-color: rgba(51, 168, 255, 0.32);
    box-shadow: 0 10px 24px rgba(0, 119, 204, 0.1);
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1199.98px) {

    .admin-goals-item {
        grid-template-columns:
            70px
            50px
            minmax(0, 1fr)
            auto
            auto;
        gap: 13px;
    }

    .admin-goals-player-avatar {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
    }

    .admin-goals-type {
        padding-inline: 10px;
    }

}

/* ==========================================
   MEDIUM TABLET
========================================== */

@media (max-width: 991.98px) {

    .admin-goals-item {
        grid-template-columns:
            66px
            48px
            minmax(0, 1fr)
            auto;
        gap: 12px;
    }

    .admin-goals-type {
        grid-column: 3;
        justify-self: start;
        margin-top: -8px;
    }

    .admin-goals-actions {
        grid-column: 4;
        grid-row: 1 / span 2;
    }

    .admin-goals-player-avatar {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .admin-goals-player-avatar i {
        font-size: 21px;
    }

    .admin-goals-player-info strong {
        font-size: 14px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767.98px) {

    .admin-goals-list::before {
        left: 29px;
    }

    .admin-goals-item {
        grid-template-columns:
            58px
            46px
            minmax(0, 1fr)
            auto;
        gap: 10px;
        min-height: 100px;
        padding: 15px 0;
    }

    .admin-goals-item::before {
        left: 23px;
        width: 13px;
        height: 13px;
    }

    .admin-goals-minute {
        width: 50px;
        min-height: 35px;
        padding: 6px 7px;
        border-radius: 10px;
        font-size: 12px;
    }

    .admin-goals-player-avatar {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .admin-goals-player-info {
        gap: 3px;
    }

    .admin-goals-player-info strong {
        font-size: 13px;
    }

    .admin-goals-player-info span {
        font-size: 11px;
    }

    .admin-goals-type {
        grid-column: 2 / span 2;
        margin-top: 0;
        justify-self: start;
        min-height: 29px;
        padding: 6px 9px;
        font-size: 10px;
    }

    .admin-goals-actions {
        grid-column: 4;
        grid-row: 1 / span 2;
        flex-direction: column;
        gap: 6px;
    }

    .admin-goals-actions .admin-icon-btn {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 479.98px) {

    .admin-goals-list::before {
        left: 23px;
        top: 22px;
        bottom: 22px;
    }

    .admin-goals-item {
        grid-template-columns:
            47px
            42px
            minmax(0, 1fr);
        gap: 9px;
        padding: 14px 0 15px;
    }

    .admin-goals-item::before {
        left: 17px;
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .admin-goals-minute {
        width: 43px;
        min-height: 32px;
        padding: 5px;
        font-size: 11px;
    }

    .admin-goals-player-avatar {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .admin-goals-player-avatar i {
        font-size: 19px;
    }

    .admin-goals-player-info strong,
    .admin-goals-player-info span {
        white-space: normal;
    }

    .admin-goals-type {
        grid-column: 2 / span 2;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    .admin-goals-actions {
        grid-column: 2 / span 2;
        grid-row: auto;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 2px;
    }

    .admin-goals-actions .admin-icon-btn {
        flex-basis: 33px;
        width: 33px;
        height: 33px;
        min-width: 33px;
    }

}

/*
==========================================================
OFC ADMIN - MATCH GOALS
PART 3
Form, controls, validation, responsive and accessibility
==========================================================
*/

/* ==========================================
   FORM CARD
========================================== */

.admin-goals-form-card {
    overflow: visible;
}

.admin-goals-form-card .admin-card-header {
    align-items: flex-start;
}

.admin-goals-form-card .admin-card-body {
    position: relative;
}

/* ==========================================
   FORM LAYOUT
========================================== */

.admin-goals-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-goals-form > div {
    position: relative;
}

.admin-goals-form .admin-form-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    color: #1e293b;
}

.admin-goals-form .admin-form-label::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #33a8ff;
}

/* ==========================================
   FORM CONTROLS
========================================== */

.admin-goals-form .admin-form-control {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 13px;
    outline: none;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.admin-goals-form select.admin-form-control {
    padding-right: 42px;
    cursor: pointer;
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #64748b 50%
        ),
        linear-gradient(
            135deg,
            #64748b 50%,
            transparent 50%
        );
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
    appearance: none;
}

.admin-goals-form input.admin-form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.admin-goals-form .admin-form-control:hover {
    border-color: rgba(51, 168, 255, 0.35);
}

.admin-goals-form .admin-form-control:focus {
    border-color: #33a8ff;
    background-color: #ffffff;
    box-shadow:
        0 0 0 4px rgba(51, 168, 255, 0.12),
        0 8px 20px rgba(0, 119, 204, 0.06);
}

.admin-goals-form .admin-form-control:disabled {
    cursor: not-allowed;
    border-color: rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    color: #94a3b8;
}

/* ==========================================
   SELECT OPTIONS
========================================== */

.admin-goals-form select.admin-form-control option,
.admin-goals-form select.admin-form-control optgroup {
    font-size: 14px;
    color: #0f172a;
}

.admin-goals-form select.admin-form-control optgroup {
    font-weight: 800;
}

/* ==========================================
   FORM HELP TEXT
========================================== */

.admin-goals-form .admin-form-help {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: #64748b;
}

.admin-goals-form #ownGoalHelp {
    display: none;
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, 0.14);
    border-radius: 11px;
    background: rgba(239, 68, 68, 0.06);
    color: #b91c1c;
}

/* ==========================================
   GOAL TYPE VISUAL FEEDBACK
========================================== */

.admin-goals-form:has(
    #goalType option[value="own_goal"]:checked
) #goalPlayer {
    border-color: rgba(239, 68, 68, 0.28);
}

.admin-goals-form:has(
    #goalType option[value="penalty"]:checked
) #goalType {
    border-color: rgba(245, 158, 11, 0.32);
}

.admin-goals-form:has(
    #goalType option[value="free_kick"]:checked
) #goalType {
    border-color: rgba(139, 92, 246, 0.32);
}

/* ==========================================
   FORM BUTTONS
========================================== */

.admin-goals-form > .admin-btn {
    min-height: 48px;
    justify-content: center;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
}

.admin-goals-form > .admin-btn i {
    font-size: 15px;
}

.admin-goals-form > .admin-btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 10px 22px rgba(0, 119, 204, 0.18);
}

.admin-goals-form > .admin-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}

.admin-goals-form > .admin-btn-primary:hover::before {
    left: 140%;
}

.admin-goals-form > .admin-btn-light {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: #475569;
}

.admin-goals-form > .admin-btn-light:hover {
    border-color: rgba(51, 168, 255, 0.28);
    background: #f8fbff;
    color: #0077cc;
}

/* ==========================================
   FORM VALIDATION STATES
========================================== */

.admin-goals-form .admin-form-control:invalid:not(:placeholder-shown) {
    border-color: rgba(239, 68, 68, 0.4);
}

.admin-goals-form .admin-form-control:valid:not(:placeholder-shown) {
    border-color: rgba(16, 185, 129, 0.32);
}

.admin-goals-form select.admin-form-control:valid {
    border-color: rgba(16, 185, 129, 0.25);
}

.admin-goals-form select.admin-form-control:invalid {
    color: #64748b;
}

/* ==========================================
   WARNING STATE WITHOUT LINEUPS
========================================== */

.admin-goals-form-card .alert-warning {
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 13px;
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
}

.admin-goals-form-card .alert-warning i {
    color: #d97706;
}

/* ==========================================
   CARD CLOSE BUTTON
========================================== */

.admin-goals-form-card
.admin-card-header
.admin-icon-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    background: #f8fafc;
    color: #64748b;
}

.admin-goals-form-card
.admin-card-header
.admin-icon-btn:hover {
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

/* ==========================================
   FORM CARD ACCENT
========================================== */

.admin-goals-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #33a8ff,
            #0077cc,
            transparent
        );
    opacity: 0.75;
}

.admin-goals-form-card {
    position: sticky;
}

/* ==========================================
   FOCUS ACCESSIBILITY
========================================== */

.admin-goals-form .admin-form-control:focus-visible,
.admin-goals-form .admin-btn:focus-visible,
.admin-goals-form-card .admin-icon-btn:focus-visible {
    outline: 3px solid rgba(51, 168, 255, 0.3);
    outline-offset: 2px;
}

.admin-goals-actions .admin-icon-btn:focus-visible {
    outline: 3px solid rgba(51, 168, 255, 0.28);
    outline-offset: 2px;
}

/* ==========================================
   LOADING STATE - OPTIONAL
========================================== */

.admin-goals-form.is-loading {
    pointer-events: none;
    opacity: 0.72;
}

.admin-goals-form.is-loading
.admin-btn-primary {
    cursor: wait;
}

.admin-goals-form.is-loading
.admin-btn-primary i {
    animation: admin-goals-spin 0.8s linear infinite;
}

@keyframes admin-goals-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1199.98px) {

    .admin-goals-form-card {
        position: static;
        top: auto;
    }

    .admin-goals-form {
        gap: 18px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767.98px) {

    .admin-goals-form-card .admin-card-header {
        gap: 12px;
    }

    .admin-goals-form-card .admin-card-body {
        padding-top: 18px;
    }

    .admin-goals-form {
        gap: 17px;
    }

    .admin-goals-form .admin-form-control {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 13px;
    }

    .admin-goals-form select.admin-form-control {
        padding-right: 38px;
        background-position:
            calc(100% - 17px) 50%,
            calc(100% - 12px) 50%;
    }

    .admin-goals-form > .admin-btn {
        min-height: 46px;
        border-radius: 12px;
    }

    .admin-goals-form-card::before {
        left: 18px;
        right: 18px;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 479.98px) {

    .admin-goals-form-card .admin-card-header {
        align-items: center;
    }

    .admin-goals-form-card .admin-card-header > div {
        min-width: 0;
    }

    .admin-goals-form-card
    .admin-card-header
    .admin-card-title {
        font-size: 17px;
    }

    .admin-goals-form-card
    .admin-card-header
    .admin-card-subtitle {
        font-size: 11px;
        line-height: 1.45;
    }

    .admin-goals-form {
        gap: 15px;
    }

    .admin-goals-form .admin-form-label {
        margin-bottom: 7px;
        font-size: 12px;
    }

    .admin-goals-form .admin-form-control {
        min-height: 44px;
        padding: 9px 11px;
        border-radius: 11px;
        font-size: 12px;
    }

    .admin-goals-form .admin-form-help {
        margin-top: 6px;
        font-size: 10px;
    }

    .admin-goals-form #ownGoalHelp {
        padding: 9px 10px;
        border-radius: 10px;
    }

    .admin-goals-form > .admin-btn {
        min-height: 44px;
        font-size: 12px;
    }

    .admin-goals-form-card
    .admin-card-header
    .admin-icon-btn {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
    }

}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .admin-goals-form .admin-form-control,
    .admin-goals-form .admin-btn,
    .admin-goals-form-card .admin-icon-btn,
    .admin-goals-actions .admin-icon-btn {
        transition: none;
    }

    .admin-goals-form > .admin-btn-primary::before {
        display: none;
    }

    .admin-goals-form.is-loading
    .admin-btn-primary i {
        animation: none;
    }

}

/*
==========================================================
OFC ADMIN - MATCH EVENTS
Scoped styles only
Prefix: admin-events-
==========================================================
*/

/* ==========================================
   SCOREBOARD
========================================== */

.admin-events-scoreboard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(51, 168, 255, 0.14),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.admin-events-scoreboard::before {
    content: "";
    position: absolute;
    top: -90px;
    left: 50%;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.08);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-events-scoreboard::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -120px;
    width: 300px;
    height: 180px;
    border-radius: 50%;
    background: rgba(0, 119, 204, 0.06);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-events-team,
.admin-events-score-center {
    position: relative;
    z-index: 1;
}

/* ==========================================
   TEAM BLOCKS
========================================== */

.admin-events-team {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.admin-events-team.away {
    justify-content: flex-end;
    text-align: right;
}

.admin-events-team-logo {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.admin-events-team-logo img {
    width: 62px;
    height: 62px;
    display: block;
    object-fit: contain;
}

.admin-events-team-logo i {
    font-size: 34px;
    color: #33a8ff;
}

.admin-events-team-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-events-team-info span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.admin-events-team-info strong {
    display: block;
    max-width: 280px;
    overflow: hidden;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   CENTER SCORE
========================================== */

.admin-events-score-center {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.admin-events-competition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0077cc;
}

.admin-events-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 9px;
}

.admin-events-score strong {
    min-width: 54px;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #0f172a;
}

.admin-events-score span {
    font-size: 24px;
    font-weight: 700;
    color: #94a3b8;
}

.admin-events-score-center small {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

/* ==========================================
   STAT CARDS
========================================== */

.admin-events-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 108px;
    padding: 21px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-events-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(51, 168, 255, 0.24);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.admin-events-stat-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 22px;
    color: #0077cc;
}

.admin-events-stat-icon.yellow {
    background: rgba(245, 158, 11, 0.13);
    color: #d97706;
}

.admin-events-stat-icon.red {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.admin-events-stat-icon.substitution {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.admin-events-stat-card > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-events-stat-card span {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-events-stat-card strong {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #0f172a;
}

.admin-events-count-badge {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 13px;
    font-weight: 800;
    color: #0077cc;
}

/* ==========================================
   TIMELINE
========================================== */

.admin-events-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
}

.admin-events-timeline::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 36px;
    width: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            to bottom,
            rgba(51, 168, 255, 0.12),
            rgba(51, 168, 255, 0.58),
            rgba(51, 168, 255, 0.12)
        );
    pointer-events: none;
}

/* ==========================================
   TIMELINE ITEM
========================================== */

.admin-events-item {
    position: relative;
    display: grid;
    grid-template-columns:
        74px
        48px
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 15px;
    min-height: 104px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.admin-events-item:last-child {
    border-bottom: 0;
}

.admin-events-item:hover {
    background: rgba(248, 250, 252, 0.72);
}

.admin-events-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 29px;
    z-index: 2;
    width: 15px;
    height: 15px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #33a8ff;
    box-shadow:
        0 0 0 2px rgba(51, 168, 255, 0.18),
        0 4px 10px rgba(0, 119, 204, 0.18);
    transform: translateY(-50%);
}

/* ==========================================
   MINUTE
========================================== */

.admin-events-minute {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid rgba(51, 168, 255, 0.16);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    color: #0077cc;
}

/* ==========================================
   EVENT SYMBOL
========================================== */

.admin-events-symbol {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(51, 168, 255, 0.15);
    border-radius: 15px;
    background: rgba(51, 168, 255, 0.09);
    font-size: 20px;
    color: #0077cc;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.admin-events-item:hover .admin-events-symbol {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

/* ==========================================
   EVENT TYPE COLORS
========================================== */

.admin-events-item-goal::before {
    background: #33a8ff;
}

.admin-events-item-goal .admin-events-symbol {
    border-color: rgba(51, 168, 255, 0.18);
    background: rgba(51, 168, 255, 0.1);
    color: #0077cc;
}

.admin-events-item-yellow::before {
    background: #f59e0b;
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, 0.17),
        0 4px 10px rgba(245, 158, 11, 0.16);
}

.admin-events-item-yellow .admin-events-symbol {
    border-color: rgba(245, 158, 11, 0.2);
    background: rgba(245, 158, 11, 0.11);
    color: #d97706;
}

.admin-events-item-red::before {
    background: #ef4444;
    box-shadow:
        0 0 0 2px rgba(239, 68, 68, 0.17),
        0 4px 10px rgba(239, 68, 68, 0.16);
}

.admin-events-item-red .admin-events-symbol {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.admin-events-item-substitution::before {
    background: #10b981;
    box-shadow:
        0 0 0 2px rgba(16, 185, 129, 0.17),
        0 4px 10px rgba(16, 185, 129, 0.16);
}

.admin-events-item-substitution .admin-events-symbol {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.admin-events-item-kickoff .admin-events-symbol,
.admin-events-item-second_half .admin-events-symbol {
    border-color: rgba(14, 165, 233, 0.2);
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
}

.admin-events-item-halftime .admin-events-symbol {
    border-color: rgba(139, 92, 246, 0.2);
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.admin-events-item-fulltime .admin-events-symbol {
    border-color: rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.07);
    color: #334155;
}

.admin-events-item-corner .admin-events-symbol,
.admin-events-item-free_kick .admin-events-symbol {
    border-color: rgba(249, 115, 22, 0.2);
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.admin-events-item-offside .admin-events-symbol {
    border-color: rgba(217, 70, 239, 0.2);
    background: rgba(217, 70, 239, 0.1);
    color: #c026d3;
}

.admin-events-item-injury .admin-events-symbol {
    border-color: rgba(244, 63, 94, 0.2);
    background: rgba(244, 63, 94, 0.1);
    color: #e11d48;
}

.admin-events-item-penalty_missed .admin-events-symbol {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.admin-events-item-penalty_saved .admin-events-symbol {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.admin-events-item-var .admin-events-symbol {
    border-color: rgba(99, 102, 241, 0.2);
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.admin-events-item-delay .admin-events-symbol {
    border-color: rgba(100, 116, 139, 0.2);
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
}

/* ==========================================
   EVENT CONTENT
========================================== */

.admin-events-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-events-content-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-events-content-heading > strong {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
}

.admin-events-content-heading > span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.09);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: #0077cc;
}

.admin-events-content > p {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    color: #64748b;
}

/* ==========================================
   PLAYER DISPLAY
========================================== */

.admin-events-player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-events-player > img,
.admin-events-player-placeholder {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #f8fafc;
}

.admin-events-player > img {
    object-fit: cover;
    object-position: center top;
}

.admin-events-player-placeholder i {
    font-size: 17px;
    color: #7c8da5;
}

.admin-events-player > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-events-player > div > strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: #334155;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-events-player-out {
    color: #dc2626 !important;
}

.admin-events-player-in {
    color: #059669 !important;
}

.admin-events-player-out i,
.admin-events-player-in i {
    margin-right: 4px;
    font-size: 11px;
}

/* ==========================================
   ACTIONS
========================================== */

.admin-events-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.admin-events-actions form {
    display: inline-flex;
    margin: 0;
}

.admin-events-actions .admin-icon-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 11px;
}

.admin-events-actions .admin-icon-btn-edit {
    border: 1px solid rgba(51, 168, 255, 0.16);
    background: rgba(51, 168, 255, 0.08);
    color: #0077cc;
}

.admin-events-actions .admin-icon-btn-edit:hover {
    border-color: #33a8ff;
    background: #33a8ff;
    color: #ffffff;
    transform: translateY(-2px);
}

.admin-events-actions .admin-icon-btn-delete {
    border: 1px solid rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.07);
    color: #dc2626;
}

.admin-events-actions .admin-icon-btn-delete:hover {
    border-color: #ef4444;
    background: #ef4444;
    color: #ffffff;
    transform: translateY(-2px);
}

.admin-events-goal-link {
    border: 1px solid rgba(16, 185, 129, 0.17);
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
}

.admin-events-goal-link:hover {
    border-color: #10b981;
    background: #10b981;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================
   FORM CARD
========================================== */

.admin-events-form-card {
    position: sticky;
    top: 94px;
    overflow: visible;
}

.admin-events-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #33a8ff,
            #0077cc,
            transparent
        );
    opacity: 0.75;
}

.admin-events-form-card .admin-card-header {
    align-items: flex-start;
}

.admin-events-form-card .admin-card-body {
    position: relative;
}

/* ==========================================
   FORM LAYOUT
========================================== */

.admin-events-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.admin-events-form > div {
    position: relative;
}

.admin-events-form .admin-form-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    color: #1e293b;
}

.admin-events-form .admin-form-label::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #33a8ff;
}

/* ==========================================
   FORM CONTROLS
========================================== */

.admin-events-form .admin-form-control {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 13px;
    outline: none;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.admin-events-form select.admin-form-control {
    padding-right: 42px;
    cursor: pointer;
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #64748b 50%
        ),
        linear-gradient(
            135deg,
            #64748b 50%,
            transparent 50%
        );
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
    appearance: none;
}

.admin-events-form .admin-form-control:hover {
    border-color: rgba(51, 168, 255, 0.35);
}

.admin-events-form .admin-form-control:focus {
    border-color: #33a8ff;
    background-color: #ffffff;
    box-shadow:
        0 0 0 4px rgba(51, 168, 255, 0.12),
        0 8px 20px rgba(0, 119, 204, 0.06);
}

.admin-events-form .admin-form-control:disabled {
    cursor: not-allowed;
    border-color: rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    color: #94a3b8;
}

.admin-events-form .admin-form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.admin-events-form select.admin-form-control option,
.admin-events-form select.admin-form-control optgroup {
    font-size: 14px;
    color: #0f172a;
}

.admin-events-form select.admin-form-control optgroup {
    font-weight: 800;
}

/* ==========================================
   TEXTAREA
========================================== */

.admin-events-form .admin-events-textarea {
    min-height: 112px;
    resize: vertical;
    line-height: 1.55;
}

/* ==========================================
   FORM HELP
========================================== */

.admin-events-form .admin-form-help {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: #64748b;
}

/* ==========================================
   FORM BUTTONS
========================================== */

.admin-events-form > .admin-btn {
    min-height: 48px;
    justify-content: center;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
}

.admin-events-form > .admin-btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 119, 204, 0.18);
}

.admin-events-form > .admin-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}

.admin-events-form > .admin-btn-primary:hover::before {
    left: 140%;
}

.admin-events-form > .admin-btn-light {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: #475569;
}

.admin-events-form > .admin-btn-light:hover {
    border-color: rgba(51, 168, 255, 0.28);
    background: #f8fbff;
    color: #0077cc;
}

/* ==========================================
   FORM HEADER CLOSE BUTTON
========================================== */

.admin-events-form-card
.admin-card-header
.admin-icon-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    background: #f8fafc;
    color: #64748b;
}

.admin-events-form-card
.admin-card-header
.admin-icon-btn:hover {
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

/* ==========================================
   VALIDATION
========================================== */

.admin-events-form .admin-form-control:invalid:not(:placeholder-shown) {
    border-color: rgba(239, 68, 68, 0.4);
}

.admin-events-form .admin-form-control:valid:not(:placeholder-shown) {
    border-color: rgba(16, 185, 129, 0.3);
}

.admin-events-form select.admin-form-control:invalid {
    color: #64748b;
}

/* ==========================================
   ACCESSIBILITY
========================================== */

.admin-events-form .admin-form-control:focus-visible,
.admin-events-form .admin-btn:focus-visible,
.admin-events-form-card .admin-icon-btn:focus-visible,
.admin-events-actions .admin-icon-btn:focus-visible {
    outline: 3px solid rgba(51, 168, 255, 0.28);
    outline-offset: 2px;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1199.98px) {

    .admin-events-form-card {
        position: static;
        top: auto;
    }

    .admin-events-scoreboard {
        gap: 22px;
        padding: 28px;
    }

    .admin-events-team-logo {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .admin-events-team-logo img {
        width: 54px;
        height: 54px;
    }

    .admin-events-team-info strong {
        max-width: 220px;
        font-size: 19px;
    }

    .admin-events-score strong {
        font-size: 43px;
    }

}

/* ==========================================
   MEDIUM TABLET
========================================== */

@media (max-width: 991.98px) {

    .admin-events-scoreboard {
        grid-template-columns: 1fr auto 1fr;
        gap: 16px;
        padding: 25px 20px;
    }

    .admin-events-team {
        gap: 12px;
    }

    .admin-events-team-logo {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .admin-events-team-logo img {
        width: 48px;
        height: 48px;
    }

    .admin-events-team-info strong {
        max-width: 160px;
        font-size: 17px;
    }

    .admin-events-team-info span {
        font-size: 10px;
    }

    .admin-events-score-center {
        min-width: 150px;
    }

    .admin-events-score strong {
        min-width: 44px;
        font-size: 38px;
    }

    .admin-events-item {
        grid-template-columns:
            68px
            46px
            minmax(0, 1fr)
            auto;
        gap: 12px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767.98px) {

    .admin-events-scoreboard {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 24px 18px;
    }

    .admin-events-team,
    .admin-events-team.away {
        justify-content: center;
        text-align: center;
    }

    .admin-events-team.away {
        flex-direction: row-reverse;
    }

    .admin-events-team-info {
        align-items: center;
    }

    .admin-events-team-info strong {
        max-width: 260px;
        font-size: 18px;
        white-space: normal;
    }

    .admin-events-score-center {
        order: -1;
        min-width: 0;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .admin-events-score strong {
        font-size: 44px;
    }

    .admin-events-stat-card {
        min-height: 96px;
        padding: 18px;
    }

    .admin-events-stat-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 20px;
    }

    .admin-events-timeline::before {
        left: 29px;
    }

    .admin-events-item {
        grid-template-columns:
            58px
            44px
            minmax(0, 1fr)
            auto;
        gap: 10px;
        min-height: 112px;
        padding: 16px 0;
    }

    .admin-events-item::before {
        left: 23px;
        width: 13px;
        height: 13px;
    }

    .admin-events-minute {
        width: 50px;
        min-height: 35px;
        padding: 6px 7px;
        border-radius: 10px;
        font-size: 12px;
    }

    .admin-events-symbol {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 18px;
    }

    .admin-events-content-heading > strong {
        font-size: 14px;
    }

    .admin-events-actions {
        flex-direction: column;
        gap: 6px;
    }

    .admin-events-actions .admin-icon-btn {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
    }

    .admin-events-form {
        gap: 17px;
    }

    .admin-events-form .admin-form-control {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 13px;
    }

    .admin-events-form > .admin-btn {
        min-height: 46px;
        border-radius: 12px;
    }

    .admin-events-form-card::before {
        left: 18px;
        right: 18px;
    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 479.98px) {

    .admin-events-scoreboard {
        padding: 21px 15px;
        border-radius: 18px;
    }

    .admin-events-team,
    .admin-events-team.away {
        flex-direction: column;
        gap: 10px;
    }

    .admin-events-team-logo {
        flex-basis: 66px;
        width: 66px;
        height: 66px;
    }

    .admin-events-team-info strong {
        max-width: 100%;
        font-size: 17px;
    }

    .admin-events-score strong {
        min-width: 42px;
        font-size: 40px;
    }

    .admin-events-stat-card {
        gap: 12px;
        padding: 16px;
    }

    .admin-events-stat-card span {
        white-space: normal;
    }

    .admin-events-timeline::before {
        left: 23px;
        top: 22px;
        bottom: 22px;
    }

    .admin-events-item {
        grid-template-columns:
            47px
            41px
            minmax(0, 1fr);
        gap: 9px;
        padding: 15px 0;
    }

    .admin-events-item::before {
        left: 17px;
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .admin-events-minute {
        width: 43px;
        min-height: 32px;
        padding: 5px;
        font-size: 11px;
    }

    .admin-events-symbol {
        flex-basis: 41px;
        width: 41px;
        height: 41px;
        border-radius: 12px;
        font-size: 17px;
    }

    .admin-events-content {
        gap: 6px;
    }

    .admin-events-content-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .admin-events-content-heading > strong {
        font-size: 13px;
    }

    .admin-events-content > p {
        font-size: 11px;
    }

    .admin-events-player > div > strong {
        white-space: normal;
    }

    .admin-events-actions {
        grid-column: 2 / span 2;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 3px;
    }

    .admin-events-form-card .admin-card-header {
        align-items: center;
    }

    .admin-events-form-card .admin-card-title {
        font-size: 17px;
    }

    .admin-events-form-card .admin-card-subtitle {
        font-size: 11px;
        line-height: 1.45;
    }

    .admin-events-form {
        gap: 15px;
    }

    .admin-events-form .admin-form-label {
        margin-bottom: 7px;
        font-size: 12px;
    }

    .admin-events-form .admin-form-control {
        min-height: 44px;
        padding: 9px 11px;
        border-radius: 11px;
        font-size: 12px;
    }

    .admin-events-form .admin-events-textarea {
        min-height: 100px;
    }

    .admin-events-form .admin-form-help {
        margin-top: 6px;
        font-size: 10px;
    }

    .admin-events-form > .admin-btn {
        min-height: 44px;
        font-size: 12px;
    }

}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .admin-events-scoreboard,
    .admin-events-stat-card,
    .admin-events-item,
    .admin-events-symbol,
    .admin-events-actions .admin-icon-btn,
    .admin-events-form .admin-form-control,
    .admin-events-form .admin-btn {
        transition: none;
    }

    .admin-events-form > .admin-btn-primary::before {
        display: none;
    }

} 

/*
==========================================================
OFC ADMIN - MATCH STATISTICS
PART 1
Scoped styles only
Prefix: admin-statistics-
==========================================================
*/

/* ==========================================
   SCOREBOARD
========================================== */

.admin-statistics-scoreboard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(51, 168, 255, 0.15),
            transparent 44%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.admin-statistics-scoreboard::before {
    content: "";
    position: absolute;
    top: -110px;
    left: 50%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.07);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-statistics-scoreboard::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(0, 119, 204, 0.05);
    pointer-events: none;
}

.admin-statistics-team,
.admin-statistics-score-center {
    position: relative;
    z-index: 1;
}

/* ==========================================
   TEAM BLOCKS
========================================== */

.admin-statistics-team {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.admin-statistics-team.away {
    justify-content: flex-end;
    text-align: right;
}

.admin-statistics-team-logo {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.admin-statistics-team-logo img {
    width: 62px;
    height: 62px;
    display: block;
    object-fit: contain;
}

.admin-statistics-team-logo i {
    font-size: 34px;
    color: #33a8ff;
}

.admin-statistics-team-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-statistics-team-info span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.admin-statistics-team-info strong {
    display: block;
    max-width: 280px;
    overflow: hidden;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.25;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   SCORE CENTER
========================================== */

.admin-statistics-score-center {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.admin-statistics-competition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0077cc;
}

.admin-statistics-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 9px;
}

.admin-statistics-score strong {
    min-width: 54px;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #0f172a;
}

.admin-statistics-score span {
    font-size: 24px;
    font-weight: 800;
    color: #94a3b8;
}

.admin-statistics-score-center small {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #64748b;
}

/* ==========================================
   STATUS BADGE
========================================== */

.admin-statistics-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(16, 185, 129, 0.16);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.09);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: #059669;
    white-space: nowrap;
}

.admin-statistics-status-badge i {
    font-size: 13px;
}

.admin-statistics-status-badge:has(.bi-clock-fill) {
    border-color: rgba(245, 158, 11, 0.16);
    background: rgba(245, 158, 11, 0.09);
    color: #d97706;
}

/* ==========================================
   MAIN STATISTICS LAYOUT
========================================== */

.admin-statistics-form,
.admin-statistics-preview-card {
    position: relative;
}

.admin-statistics-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-statistics-preview-card {
    position: sticky;
    top: 94px;
    overflow: hidden;
}

.admin-statistics-preview-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #33a8ff,
            #0077cc,
            transparent
        );
    opacity: 0.8;
}

.admin-statistics-preview-header-icon {
    font-size: 24px;
    color: #33a8ff;
}

/* ==========================================
   FORM TABLE HEADER
========================================== */

.admin-statistics-form-header {
    display: grid;
    grid-template-columns: minmax(190px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 70px;
    padding: 14px 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px 16px 0 0;
    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 100%
        );
}

.admin-statistics-form-label {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
}

.admin-statistics-form-team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
}

.admin-statistics-form-team.away {
    flex-direction: row;
}

.admin-statistics-form-team img {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
}

.admin-statistics-form-team span {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    color: #1e293b;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   INPUT ROW
========================================== */

.admin-statistics-input-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 76px;
    padding: 13px 18px;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.admin-statistics-input-row:hover {
    border-color: rgba(51, 168, 255, 0.15);
    background: rgba(248, 251, 255, 0.78);
}

.admin-statistics-input-row:last-of-type {
    border-radius: 0 0 16px 16px;
}

.admin-statistics-input-row > label {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    color: #334155;
}

.admin-statistics-input-row > label i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(51, 168, 255, 0.1);
    font-size: 15px;
    color: #0077cc;
}

.admin-statistics-input-row > label .admin-statistics-yellow-icon {
    background: rgba(245, 158, 11, 0.11);
    color: #f59e0b;
}

.admin-statistics-input-row > label .admin-statistics-red-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ==========================================
   INPUT WRAPPER
========================================== */

.admin-statistics-input-wrapper {
    position: relative;
    min-width: 0;
}

.admin-statistics-input-wrapper .admin-form-control {
    padding-right: 40px;
}

.admin-statistics-input-wrapper > span {
    position: absolute;
    top: 50%;
    right: 14px;
    z-index: 2;
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ==========================================
   STATISTICS FORM CONTROLS
========================================== */

.admin-statistics-form .admin-form-control {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    outline: none;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    text-align: center;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.admin-statistics-form .admin-form-control:hover {
    border-color: rgba(51, 168, 255, 0.34);
}

.admin-statistics-form .admin-form-control:focus {
    border-color: #33a8ff;
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(51, 168, 255, 0.12),
        0 8px 18px rgba(0, 119, 204, 0.06);
    transform: translateY(-1px);
}

.admin-statistics-form .admin-form-control:disabled {
    cursor: not-allowed;
    border-color: rgba(15, 23, 42, 0.07);
    background: #f8fafc;
    color: #94a3b8;
}

.admin-statistics-form input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.admin-statistics-form input[type="number"]::-webkit-inner-spin-button,
.admin-statistics-form input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* ==========================================
   FORM ACTIONS
========================================== */

.admin-statistics-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-statistics-form-actions .admin-btn {
    min-height: 46px;
    justify-content: center;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

.admin-statistics-form-actions .admin-btn-primary {
    min-width: 230px;
    box-shadow: 0 10px 22px rgba(0, 119, 204, 0.17);
}

.admin-statistics-form-actions .admin-btn-light {
    min-width: 190px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: #475569;
}

.admin-statistics-form-actions .admin-btn-light:hover {
    border-color: rgba(51, 168, 255, 0.26);
    background: #f8fbff;
    color: #0077cc;
}

/* ==========================================
   RESPONSIVE - LARGE TABLET
========================================== */

@media (max-width: 1199.98px) {

    .admin-statistics-preview-card {
        position: static;
        top: auto;
    }

    .admin-statistics-scoreboard {
        gap: 22px;
        padding: 28px;
    }

    .admin-statistics-team-logo {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .admin-statistics-team-logo img {
        width: 54px;
        height: 54px;
    }

    .admin-statistics-team-info strong {
        max-width: 220px;
        font-size: 19px;
    }

    .admin-statistics-score strong {
        font-size: 43px;
    }

}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 991.98px) {

    .admin-statistics-scoreboard {
        grid-template-columns: 1fr auto 1fr;
        gap: 16px;
        padding: 25px 20px;
    }

    .admin-statistics-team {
        gap: 12px;
    }

    .admin-statistics-team-logo {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .admin-statistics-team-logo img {
        width: 48px;
        height: 48px;
    }

    .admin-statistics-team-info strong {
        max-width: 160px;
        font-size: 17px;
    }

    .admin-statistics-team-info span {
        font-size: 10px;
    }

    .admin-statistics-score-center {
        min-width: 150px;
    }

    .admin-statistics-score strong {
        min-width: 44px;
        font-size: 38px;
    }

    .admin-statistics-form-header,
    .admin-statistics-input-row {
        grid-template-columns: minmax(170px, 1.2fr) minmax(105px, 1fr) minmax(105px, 1fr);
        gap: 14px;
    }

}

/* ==========================================
   RESPONSIVE - MOBILE
========================================== */

@media (max-width: 767.98px) {

    .admin-statistics-scoreboard {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 24px 18px;
    }

    .admin-statistics-team,
    .admin-statistics-team.away {
        justify-content: center;
        text-align: center;
    }

    .admin-statistics-team.away {
        flex-direction: row-reverse;
    }

    .admin-statistics-team-info {
        align-items: center;
    }

    .admin-statistics-team-info strong {
        max-width: 260px;
        font-size: 18px;
        white-space: normal;
    }

    .admin-statistics-score-center {
        order: -1;
        min-width: 0;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .admin-statistics-score strong {
        font-size: 44px;
    }

    .admin-statistics-status-badge {
        min-height: 31px;
        padding: 6px 10px;
        font-size: 10px;
    }

    .admin-statistics-form-header {
        grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 1fr) minmax(80px, 1fr);
        gap: 10px;
        min-height: 62px;
        padding: 12px;
        border-radius: 14px 14px 0 0;
    }

    .admin-statistics-form-label {
        font-size: 10px;
    }

    .admin-statistics-form-team {
        gap: 6px;
    }

    .admin-statistics-form-team img {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }

    .admin-statistics-form-team span {
        font-size: 10px;
    }

    .admin-statistics-input-row {
        grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 1fr) minmax(80px, 1fr);
        gap: 10px;
        min-height: 69px;
        padding: 11px 12px;
    }

    .admin-statistics-input-row > label {
        gap: 8px;
        font-size: 11px;
    }

    .admin-statistics-input-row > label i {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 13px;
    }

    .admin-statistics-form .admin-form-control {
        min-height: 42px;
        padding: 8px 9px;
        border-radius: 10px;
        font-size: 12px;
    }

    .admin-statistics-input-wrapper .admin-form-control {
        padding-right: 30px;
    }

    .admin-statistics-input-wrapper > span {
        right: 10px;
        font-size: 10px;
    }

    .admin-statistics-form-actions {
        justify-content: stretch;
    }

    .admin-statistics-form-actions .admin-btn {
        width: 100%;
        min-width: 0;
    }

}

/* ==========================================
   RESPONSIVE - SMALL MOBILE
========================================== */

@media (max-width: 479.98px) {

    .admin-statistics-scoreboard {
        padding: 21px 15px;
        border-radius: 18px;
    }

    .admin-statistics-team,
    .admin-statistics-team.away {
        flex-direction: column;
        gap: 10px;
    }

    .admin-statistics-team-logo {
        flex-basis: 66px;
        width: 66px;
        height: 66px;
    }

    .admin-statistics-team-info strong {
        max-width: 100%;
        font-size: 17px;
    }

    .admin-statistics-score strong {
        min-width: 42px;
        font-size: 40px;
    }

    .admin-statistics-form-header {
        grid-template-columns: 1fr 72px 72px;
        gap: 8px;
        padding: 10px 8px;
    }

    .admin-statistics-form-team img {
        display: none;
    }

    .admin-statistics-form-team span {
        max-width: 68px;
        font-size: 9px;
    }

    .admin-statistics-input-row {
        grid-template-columns: 1fr 72px 72px;
        gap: 8px;
        min-height: 64px;
        padding: 9px 8px;
    }

    .admin-statistics-input-row > label {
        gap: 7px;
        font-size: 10px;
    }

    .admin-statistics-input-row > label i {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        border-radius: 8px;
        font-size: 11px;
    }

    .admin-statistics-form .admin-form-control {
        min-height: 39px;
        padding: 7px 7px;
        font-size: 11px;
    }

    .admin-statistics-input-wrapper .admin-form-control {
        padding-right: 24px;
    }

    .admin-statistics-input-wrapper > span {
        right: 7px;
        font-size: 9px;
    }

    .admin-statistics-form-actions {
        gap: 9px;
        margin-top: 18px;
        padding-top: 18px;
    }

    .admin-statistics-form-actions .admin-btn {
        min-height: 43px;
        font-size: 11px;
    }

}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .admin-statistics-input-row,
    .admin-statistics-form .admin-form-control,
    .admin-statistics-form-actions .admin-btn {
        transition: none;
    }

}

/*
==========================================================
OFC ADMIN - MATCH STATISTICS
PART 2
Preview / Comparison
Scoped styles only
==========================================================
*/

/* ==========================================
   PREVIEW CARD
========================================== */

.admin-statistics-preview-card{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.admin-statistics-preview-card .admin-card-body{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ==========================================
   PREVIEW TEAMS
========================================== */

.admin-statistics-preview-teams{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(15,23,42,.08);
}

.admin-statistics-preview-teams>div{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.admin-statistics-preview-teams>div:last-child{
    justify-content:flex-end;
}

.admin-statistics-preview-teams img{
    width:42px;
    height:42px;
    object-fit:contain;
    flex-shrink:0;
}

.admin-statistics-preview-teams span{
    display:block;
    overflow:hidden;
    font-size:13px;
    font-weight:800;
    color:#1e293b;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ==========================================
   LIST
========================================== */

.admin-statistics-preview-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ==========================================
   ITEM
========================================== */

.admin-statistics-preview-item{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.admin-statistics-preview-item:last-child{
    margin-bottom:0;
}

/* ==========================================
   LABEL
========================================== */

.admin-statistics-preview-label{
    display:grid;
    grid-template-columns:70px 1fr 70px;
    align-items:center;
    gap:12px;
}

.admin-statistics-preview-label strong{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    color:#0f172a;
    text-align:center;
}

.admin-statistics-preview-label strong i{
    font-size:14px;
    color:#33A8FF;
}

.admin-statistics-preview-label span{
    font-size:13px;
    font-weight:800;
    color:#475569;
}

.admin-statistics-preview-label span:first-child{
    text-align:left;
}

.admin-statistics-preview-label span:last-child{
    text-align:right;
}

/* ==========================================
   BAR
========================================== */

.admin-statistics-preview-bar{
    position:relative;
    overflow:hidden;
    width:100%;
    height:12px;
    display:flex;
    border-radius:999px;
    background:#e2e8f0;
}

.admin-statistics-preview-bar span{
    display:block;
    height:100%;
    transition:width .35s ease;
}

.admin-statistics-preview-bar span.home{
    background:linear-gradient(
        90deg,
        #33A8FF,
        #0077CC
    );
}

.admin-statistics-preview-bar span.away{
    background:linear-gradient(
        90deg,
        #cbd5e1,
        #94a3b8
    );
}

/* ==========================================
   HOVER
========================================== */

.admin-statistics-preview-item:hover .admin-statistics-preview-bar{
    box-shadow:
        0 0 0 4px rgba(51,168,255,.06);
}

.admin-statistics-preview-item:hover strong{
    color:#0077CC;
}

.admin-statistics-preview-item:hover i{
    transform:scale(1.08);
}

.admin-statistics-preview-item i{
    transition:all .2s ease;
}

/* ==========================================
   NOTE
========================================== */

.admin-statistics-preview-note{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:6px;
    padding:16px;
    border-radius:14px;
    background:#f8fbff;
    border:1px solid rgba(51,168,255,.10);
}

.admin-statistics-preview-note i{
    flex-shrink:0;
    font-size:18px;
    color:#33A8FF;
}

.admin-statistics-preview-note p{
    margin:0;
    font-size:13px;
    line-height:1.7;
    color:#64748b;
}

/* ==========================================
   SMALL STAT CARDS
========================================== */

.admin-statistics-mini-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.08);
    background:#fff;
    transition:all .2s ease;
}

.admin-statistics-mini-card:hover{
    transform:translateY(-2px);
    box-shadow:
        0 12px 26px rgba(15,23,42,.08);
}

.admin-statistics-mini-icon{
    width:48px;
    height:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:14px;
    background:rgba(51,168,255,.10);
}

.admin-statistics-mini-icon i{
    font-size:20px;
    color:#33A8FF;
}

.admin-statistics-mini-content{
    display:flex;
    flex-direction:column;
}

.admin-statistics-mini-content span{
    font-size:12px;
    color:#64748b;
    font-weight:700;
}

.admin-statistics-mini-content strong{
    font-size:20px;
    color:#0f172a;
    font-weight:900;
}

/* ==========================================
   ANIMATION
========================================== */

@keyframes adminStatisticsGrow{

    from{
        width:0;
    }

    to{
        width:100%;
    }

}

.admin-statistics-preview-bar span{
    animation:adminStatisticsGrow .8s ease;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:991.98px){

    .admin-statistics-preview-card{
        position:static;
    }

}

@media(max-width:767.98px){

    .admin-statistics-preview-label{
        grid-template-columns:58px 1fr 58px;
        gap:8px;
    }

    .admin-statistics-preview-label strong{
        font-size:12px;
    }

    .admin-statistics-preview-label span{
        font-size:12px;
    }

    .admin-statistics-preview-bar{
        height:10px;
    }

    .admin-statistics-preview-note{
        padding:14px;
    }

    .admin-statistics-preview-note p{
        font-size:12px;
    }

}

@media(max-width:480px){

    .admin-statistics-preview-teams{
        flex-direction:column;
        gap:14px;
        text-align:center;
    }

    .admin-statistics-preview-teams>div{
        justify-content:center;
    }

    .admin-statistics-preview-teams>div:last-child{
        justify-content:center;
    }

    .admin-statistics-preview-label{
        grid-template-columns:52px 1fr 52px;
    }

    .admin-statistics-preview-label strong{
        font-size:11px;
        gap:6px;
    }

    .admin-statistics-preview-label span{
        font-size:11px;
    }

}

/*
==========================================================
OFC ADMIN - MATCH STATISTICS
PART 3
States, accessibility, validation, print and refinements
Scoped styles only
Prefix: admin-statistics-
==========================================================
*/

/* ==========================================
   FORM VALIDATION STATES
========================================== */

.admin-statistics-form .admin-form-control.is-valid,
.admin-statistics-form .admin-form-control:valid:not(:placeholder-shown) {
    border-color: rgba(16, 185, 129, 0.55);
}

.admin-statistics-form .admin-form-control.is-valid:focus,
.admin-statistics-form .admin-form-control:valid:not(:placeholder-shown):focus {
    border-color: #10b981;
    box-shadow:
        0 0 0 4px rgba(16, 185, 129, 0.12),
        0 8px 18px rgba(16, 185, 129, 0.06);
}

.admin-statistics-form .admin-form-control.is-invalid,
.admin-statistics-form .admin-form-control[aria-invalid="true"] {
    border-color: rgba(239, 68, 68, 0.65);
    background-color: rgba(254, 242, 242, 0.65);
}

.admin-statistics-form .admin-form-control.is-invalid:focus,
.admin-statistics-form .admin-form-control[aria-invalid="true"]:focus {
    border-color: #ef4444;
    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.12),
        0 8px 18px rgba(239, 68, 68, 0.06);
}

.admin-statistics-field-error {
    display: none;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    color: #dc2626;
}

.admin-statistics-field-error.is-visible {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-statistics-field-error i {
    flex: 0 0 auto;
    font-size: 12px;
}

.admin-statistics-field-help {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    color: #94a3b8;
}

/* ==========================================
   ROW STATES
========================================== */

.admin-statistics-input-row.is-valid {
    border-color: rgba(16, 185, 129, 0.18);
    background:
        linear-gradient(
            90deg,
            rgba(236, 253, 245, 0.5),
            #ffffff
        );
}

.admin-statistics-input-row.is-invalid {
    border-color: rgba(239, 68, 68, 0.2);
    background:
        linear-gradient(
            90deg,
            rgba(254, 242, 242, 0.72),
            #ffffff
        );
}

.admin-statistics-input-row.is-warning {
    border-color: rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(
            90deg,
            rgba(255, 251, 235, 0.72),
            #ffffff
        );
}

.admin-statistics-input-row.is-disabled {
    opacity: 0.68;
    background: #f8fafc;
    pointer-events: none;
}

.admin-statistics-input-row.is-saving {
    position: relative;
    overflow: hidden;
}

.admin-statistics-input-row.is-saving::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(51, 168, 255, 0.08),
            transparent
        );
    transform: translateX(-100%);
    animation: adminStatisticsSaving 1.25s linear infinite;
    pointer-events: none;
}

/* ==========================================
   GLOBAL STATISTICS MESSAGES
========================================== */

.admin-statistics-message {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.6;
}

.admin-statistics-message i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 17px;
}

.admin-statistics-message p {
    margin: 0;
}

.admin-statistics-message-success {
    border-color: rgba(16, 185, 129, 0.18);
    background: rgba(236, 253, 245, 0.9);
    color: #047857;
}

.admin-statistics-message-warning {
    border-color: rgba(245, 158, 11, 0.2);
    background: rgba(255, 251, 235, 0.94);
    color: #b45309;
}

.admin-statistics-message-danger {
    border-color: rgba(239, 68, 68, 0.18);
    background: rgba(254, 242, 242, 0.94);
    color: #b91c1c;
}

.admin-statistics-message-info {
    border-color: rgba(51, 168, 255, 0.18);
    background: rgba(239, 248, 255, 0.94);
    color: #0369a1;
}

/* ==========================================
   SUMMARY BADGES
========================================== */

.admin-statistics-summary-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-statistics-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #ffffff;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    color: #475569;
}

.admin-statistics-summary-badge i {
    font-size: 12px;
    color: #33a8ff;
}

.admin-statistics-summary-badge.success {
    border-color: rgba(16, 185, 129, 0.16);
    background: rgba(236, 253, 245, 0.9);
    color: #047857;
}

.admin-statistics-summary-badge.warning {
    border-color: rgba(245, 158, 11, 0.18);
    background: rgba(255, 251, 235, 0.92);
    color: #b45309;
}

.admin-statistics-summary-badge.danger {
    border-color: rgba(239, 68, 68, 0.16);
    background: rgba(254, 242, 242, 0.92);
    color: #b91c1c;
}

/* ==========================================
   SCOREBOARD STATUS VARIANTS
========================================== */

.admin-statistics-scoreboard.is-live {
    border-color: rgba(239, 68, 68, 0.18);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(239, 68, 68, 0.12),
            transparent 44%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffafa 100%
        );
}

.admin-statistics-scoreboard.is-live .admin-statistics-competition {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.admin-statistics-scoreboard.is-live .admin-statistics-score-center small {
    color: #dc2626;
}

.admin-statistics-scoreboard.is-finished {
    border-color: rgba(16, 185, 129, 0.14);
}

.admin-statistics-scoreboard.is-postponed {
    border-color: rgba(245, 158, 11, 0.18);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(245, 158, 11, 0.1),
            transparent 44%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffdf7 100%
        );
}

/* ==========================================
   LIVE INDICATOR
========================================== */

.admin-statistics-live-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.1);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #dc2626;
}

.admin-statistics-live-indicator::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    animation: adminStatisticsLivePulse 1.6s infinite;
}

/* ==========================================
   PREVIEW VALUE LEADERS
========================================== */

.admin-statistics-preview-item.is-home-leading
.admin-statistics-preview-label span:first-child {
    color: #0077cc;
}

.admin-statistics-preview-item.is-away-leading
.admin-statistics-preview-label span:last-child {
    color: #475569;
}

.admin-statistics-preview-item.is-equal
.admin-statistics-preview-label span {
    color: #64748b;
}

.admin-statistics-preview-item.is-home-leading
.admin-statistics-preview-bar .home {
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.5),
        0 0 12px rgba(51, 168, 255, 0.14);
}

.admin-statistics-preview-item.is-away-leading
.admin-statistics-preview-bar .away {
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.5),
        0 0 12px rgba(100, 116, 139, 0.12);
}

/* ==========================================
   EMPTY STATE
========================================== */

.admin-statistics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 32px 20px;
    text-align: center;
}

.admin-statistics-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 22px;
    background: rgba(51, 168, 255, 0.1);
    font-size: 29px;
    color: #33a8ff;
}

.admin-statistics-empty h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
    color: #0f172a;
}

.admin-statistics-empty p {
    max-width: 420px;
    margin: 0;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.7;
    color: #64748b;
}

/* ==========================================
   LOADING STATE
========================================== */

.admin-statistics-loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.admin-statistics-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
}

.admin-statistics-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 51;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    margin-left: -21px;
    border: 4px solid rgba(51, 168, 255, 0.16);
    border-top-color: #33a8ff;
    border-radius: 50%;
    animation: adminStatisticsSpin 0.75s linear infinite;
}

/* ==========================================
   TOOLTIP
========================================== */

.admin-statistics-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.admin-statistics-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.09);
    font-size: 12px;
    color: #0077cc;
    cursor: help;
}

.admin-statistics-tooltip-content {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 100;
    width: max-content;
    max-width: 230px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #0f172a;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 5px);
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
    pointer-events: none;
}

.admin-statistics-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 6px solid transparent;
    border-top-color: #0f172a;
    transform: translateX(-50%);
}

.admin-statistics-tooltip:hover
.admin-statistics-tooltip-content,
.admin-statistics-tooltip:focus-within
.admin-statistics-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ==========================================
   FOCUS ACCESSIBILITY
========================================== */

.admin-statistics-form .admin-form-control:focus-visible,
.admin-statistics-form-actions .admin-btn:focus-visible,
.admin-statistics-tooltip-trigger:focus-visible {
    outline: 3px solid rgba(51, 168, 255, 0.3);
    outline-offset: 3px;
}

.admin-statistics-form-actions .admin-btn:focus-visible {
    box-shadow:
        0 0 0 4px rgba(51, 168, 255, 0.16),
        0 10px 22px rgba(0, 119, 204, 0.14);
}

.admin-statistics-form .admin-form-control::selection {
    background: rgba(51, 168, 255, 0.22);
    color: #0f172a;
}

/* ==========================================
   SAVE BUTTON STATES
========================================== */

.admin-statistics-form-actions .admin-btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.admin-statistics-form-actions .admin-btn.is-loading i {
    visibility: hidden;
}

.admin-statistics-form-actions .admin-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: adminStatisticsSpin 0.65s linear infinite;
}

.admin-statistics-form-actions .admin-btn-light.is-loading::after {
    border-color: rgba(51, 168, 255, 0.22);
    border-top-color: #0077cc;
}

.admin-statistics-form-actions .admin-btn.is-success {
    border-color: #10b981;
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.16);
}

.admin-statistics-form-actions .admin-btn.is-error {
    border-color: #ef4444;
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.16);
}

/* ==========================================
   NUMBER INPUT SAFETY
========================================== */

.admin-statistics-form .admin-form-control::-webkit-input-placeholder {
    color: #cbd5e1;
}

.admin-statistics-form .admin-form-control::placeholder {
    color: #cbd5e1;
    opacity: 1;
}

.admin-statistics-form .admin-form-control:read-only {
    border-color: rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    color: #64748b;
    cursor: default;
}

.admin-statistics-form .admin-form-control:read-only:focus {
    box-shadow: none;
    transform: none;
}

/* ==========================================
   HORIZONTAL SCROLL SAFETY
========================================== */

.admin-statistics-form-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(100, 116, 139, 0.38)
        rgba(226, 232, 240, 0.55);
}

.admin-statistics-form-scroll::-webkit-scrollbar {
    height: 8px;
}

.admin-statistics-form-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.55);
}

.admin-statistics-form-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.38);
}

.admin-statistics-form-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(51, 168, 255, 0.55);
}

/* ==========================================
   STICKY FORM HEADER
========================================== */

.admin-statistics-form-header.is-sticky {
    position: sticky;
    top: 82px;
    z-index: 20;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes adminStatisticsSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes adminStatisticsLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.42);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes adminStatisticsSaving {
    to {
        transform: translateX(100%);
    }
}

@keyframes adminStatisticsFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-statistics-scoreboard,
.admin-statistics-preview-card,
.admin-statistics-form {
    animation: adminStatisticsFadeIn 0.35s ease both;
}

.admin-statistics-preview-card {
    animation-delay: 0.08s;
}

/* ==========================================
   TABLET REFINEMENTS
========================================== */

@media (max-width: 991.98px) {

    .admin-statistics-form-header.is-sticky {
        top: 72px;
    }

    .admin-statistics-summary-badges {
        width: 100%;
    }

    .admin-statistics-tooltip-content {
        left: auto;
        right: 0;
        transform: translateY(5px);
    }

    .admin-statistics-tooltip-content::after {
        right: 8px;
        left: auto;
        transform: none;
    }

    .admin-statistics-tooltip:hover
    .admin-statistics-tooltip-content,
    .admin-statistics-tooltip:focus-within
    .admin-statistics-tooltip-content {
        transform: translateY(0);
    }

}

/* ==========================================
   MOBILE REFINEMENTS
========================================== */

@media (max-width: 767.98px) {

    .admin-statistics-message {
        padding: 12px 13px;
        border-radius: 12px;
        font-size: 12px;
    }

    .admin-statistics-summary-badge {
        min-height: 28px;
        padding: 5px 9px;
        font-size: 9px;
    }

    .admin-statistics-field-error,
    .admin-statistics-field-help {
        font-size: 10px;
    }

    .admin-statistics-form-header.is-sticky {
        top: 64px;
    }

    .admin-statistics-empty {
        min-height: 220px;
        padding: 26px 16px;
    }

    .admin-statistics-empty-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 15px;
        border-radius: 19px;
        font-size: 25px;
    }

    .admin-statistics-empty h4 {
        font-size: 16px;
    }

    .admin-statistics-empty p {
        font-size: 12px;
    }

    .admin-statistics-tooltip-content {
        max-width: 190px;
        font-size: 10px;
    }

}

/* ==========================================
   SMALL MOBILE REFINEMENTS
========================================== */

@media (max-width: 479.98px) {

    .admin-statistics-message {
        gap: 9px;
        padding: 11px 12px;
    }

    .admin-statistics-message i {
        font-size: 15px;
    }

    .admin-statistics-summary-badges {
        gap: 6px;
    }

    .admin-statistics-summary-badge {
        flex: 1 1 auto;
    }

    .admin-statistics-live-indicator {
        min-height: 26px;
        padding: 5px 8px;
        font-size: 9px;
    }

    .admin-statistics-form-header.is-sticky {
        top: 58px;
    }

}

/* ==========================================
   HIGH CONTRAST SUPPORT
========================================== */

@media (forced-colors: active) {

    .admin-statistics-scoreboard,
    .admin-statistics-input-row,
    .admin-statistics-preview-card,
    .admin-statistics-preview-note,
    .admin-statistics-message {
        border: 1px solid CanvasText;
    }

    .admin-statistics-preview-bar {
        border: 1px solid CanvasText;
    }

    .admin-statistics-preview-bar span.home,
    .admin-statistics-preview-bar span.away {
        background: Highlight;
    }

    .admin-statistics-form .admin-form-control:focus-visible,
    .admin-statistics-form-actions .admin-btn:focus-visible {
        outline: 2px solid Highlight;
    }

}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .admin-statistics-scoreboard,
    .admin-statistics-preview-card,
    .admin-statistics-form,
    .admin-statistics-live-indicator::before,
    .admin-statistics-input-row.is-saving::after,
    .admin-statistics-loader,
    .admin-statistics-form-actions .admin-btn.is-loading::after {
        animation: none;
    }

    .admin-statistics-tooltip-content {
        transition: none;
    }

}

/* ==========================================
   PRINT MODE
========================================== */

@media print {

    .admin-statistics-scoreboard,
    .admin-statistics-preview-card,
    .admin-statistics-form {
        animation: none !important;
    }

    .admin-statistics-scoreboard,
    .admin-statistics-preview-card,
    .admin-statistics-input-row,
    .admin-statistics-form-header {
        break-inside: avoid;
        box-shadow: none !important;
    }

    .admin-statistics-scoreboard {
        border: 1px solid #cbd5e1;
        background: #ffffff !important;
    }

    .admin-statistics-scoreboard::before,
    .admin-statistics-scoreboard::after,
    .admin-statistics-preview-card::before {
        display: none;
    }

    .admin-statistics-form-actions,
    .admin-statistics-tooltip,
    .admin-statistics-live-indicator {
        display: none !important;
    }

    .admin-statistics-form .admin-form-control {
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #000000;
    }

    .admin-statistics-preview-bar {
        border: 1px solid #94a3b8;
        background: #e2e8f0 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .admin-statistics-preview-bar span.home {
        background: #33a8ff !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .admin-statistics-preview-bar span.away {
        background: #94a3b8 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

}

/*
==========================================================
OFC ADMIN - MATCH REPORT
Scoped styles only
Prefix: admin-report-
==========================================================
*/

/* ==========================================
   ALERTS
========================================== */

.admin-report-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding: 15px 17px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-size: 13px;
    line-height: 1.6;
}

.admin-report-alert > i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 18px;
}

.admin-report-alert strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 900;
}

.admin-report-alert p,
.admin-report-alert ul {
    margin: 0;
}

.admin-report-alert ul {
    padding-left: 18px;
}

.admin-report-alert-success {
    border-color: rgba(16, 185, 129, 0.18);
    background: rgba(236, 253, 245, 0.92);
    color: #047857;
}

.admin-report-alert-danger {
    border-color: rgba(239, 68, 68, 0.18);
    background: rgba(254, 242, 242, 0.94);
    color: #b91c1c;
}

/* ==========================================
   SCOREBOARD
========================================== */

.admin-report-scoreboard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    margin-bottom: 22px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(51, 168, 255, 0.14),
            transparent 44%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.admin-report-scoreboard::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(51, 168, 255, 0.06);
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-report-scoreboard::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -130px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(0, 119, 204, 0.05);
    pointer-events: none;
}

.admin-report-team,
.admin-report-score-center {
    position: relative;
    z-index: 1;
}

/* ==========================================
   TEAMS
========================================== */

.admin-report-team {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.admin-report-team.away {
    justify-content: flex-end;
    text-align: right;
}

.admin-report-team-logo {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.admin-report-team-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.admin-report-team-logo i {
    font-size: 34px;
    color: #33a8ff;
}

.admin-report-team-info {
    min-width: 0;
}

.admin-report-team-info span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.admin-report-team-info strong {
    display: block;
    max-width: 280px;
    overflow: hidden;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.25;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   SCORE CENTER
========================================== */

.admin-report-score-center {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.admin-report-competition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    margin-bottom: 11px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.12);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0077cc;
}

.admin-report-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 9px;
}

.admin-report-score strong {
    min-width: 54px;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #0f172a;
}

.admin-report-score span {
    font-size: 24px;
    font-weight: 800;
    color: #94a3b8;
}

.admin-report-match-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.1);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #475569;
}

.admin-report-score-center small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
    color: #64748b;
}

.admin-report-score-center small i {
    color: #33a8ff;
}

.admin-report-scoreboard.is-live {
    border-color: rgba(239, 68, 68, 0.16);
}

.admin-report-scoreboard.is-live .admin-report-match-status {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.admin-report-scoreboard.is-finished .admin-report-match-status {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.admin-report-scoreboard.is-postponed .admin-report-match-status {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.admin-report-scoreboard.is-cancelled .admin-report-match-status {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

/* ==========================================
   MATCH CENTER NAVIGATION
========================================== */

.admin-report-match-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px;
    overflow-x: auto;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
    scrollbar-width: thin;
}

.admin-report-match-navigation a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.admin-report-match-navigation a:hover {
    background: rgba(51, 168, 255, 0.08);
    color: #0077cc;
}

.admin-report-match-navigation a.active {
    background:
        linear-gradient(
            135deg,
            #33a8ff,
            #0077cc
        );
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 119, 204, 0.17);
}

.admin-report-match-navigation a i {
    font-size: 13px;
}

/* ==========================================
   FORM
========================================== */

.admin-report-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.admin-report-section {
    overflow: hidden;
}

.admin-report-section .admin-card-body {
    padding-top: 22px;
}

.admin-report-textarea {
    min-height: 170px;
    resize: vertical;
    line-height: 1.75;
    text-align: left;
}

.admin-report-textarea-large {
    min-height: 290px;
}

.admin-report-form .admin-form-control {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.admin-report-form .admin-form-control:hover {
    border-color: rgba(51, 168, 255, 0.32);
}

.admin-report-form .admin-form-control:focus {
    border-color: #33a8ff;
    box-shadow: 0 0 0 4px rgba(51, 168, 255, 0.12);
}

.admin-report-form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}

.admin-report-character-count {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 850;
    color: #94a3b8;
}

.admin-report-character-count.is-warning {
    color: #d97706;
}

.admin-report-character-count.is-danger {
    color: #dc2626;
}

/* ==========================================
   SELECT AND INPUT ICONS
========================================== */

.admin-report-select-wrapper,
.admin-report-input-icon {
    position: relative;
}

.admin-report-select-wrapper > i,
.admin-report-input-icon > i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    font-size: 15px;
    color: #33a8ff;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-report-select-wrapper .admin-form-control,
.admin-report-input-icon .admin-form-control {
    min-height: 48px;
    padding-left: 42px;
}

.admin-report-select-wrapper select {
    cursor: pointer;
}

/* ==========================================
   FORM ACTIONS
========================================== */

.admin-report-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 11px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
}

.admin-report-form-actions .admin-btn {
    min-height: 46px;
    justify-content: center;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 850;
}

.admin-report-form-actions .admin-btn-primary {
    min-width: 230px;
}

.admin-report-form-actions .admin-btn-light {
    min-width: 160px;
}

/* ==========================================
   BUTTON LOADING
========================================== */

.admin-report-form-actions .admin-btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.admin-report-button-spinner {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    vertical-align: middle;
    animation: adminReportSpin 0.7s linear infinite;
}

/* ==========================================
   SIDEBAR
========================================== */

.admin-report-sidebar {
    position: sticky;
    top: 94px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.admin-report-progress-card,
.admin-report-content-card {
    overflow: hidden;
}

/* ==========================================
   PROGRESS
========================================== */

.admin-report-progress-value {
    font-size: 21px;
    font-weight: 900;
    color: #0077cc;
}

.admin-report-progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 999px;
    background: #e2e8f0;
}

.admin-report-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #33a8ff,
            #0077cc
        );
    transition: width 0.35s ease;
}

.admin-report-checklist {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-report-checklist li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
}

.admin-report-checklist li i {
    font-size: 14px;
    color: #cbd5e1;
}

.admin-report-checklist li.is-complete {
    color: #334155;
}

.admin-report-checklist li.is-complete i {
    color: #10b981;
}

/* ==========================================
   COUNT BADGE
========================================== */

.admin-report-count-badge {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(51, 168, 255, 0.1);
    font-size: 12px;
    font-weight: 900;
    color: #0077cc;
}

/* ==========================================
   EMPTY CONTENT
========================================== */

.admin-report-empty-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 22px 16px;
    text-align: center;
}

.admin-report-empty-small > i {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 17px;
    background: rgba(51, 168, 255, 0.09);
    font-size: 22px;
    color: #33a8ff;
}

.admin-report-empty-small p {
    max-width: 280px;
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
    color: #64748b;
}

/* ==========================================
   NEWS LIST
========================================== */

.admin-report-news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-report-news-item {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 13px;
    background: #ffffff;
}

.admin-report-news-image {
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 11px;
    background: #f1f5f9;
}

.admin-report-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-report-news-image.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #33a8ff;
}

.admin-report-news-content {
    min-width: 0;
}

.admin-report-news-content > span {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #33a8ff;
}

.admin-report-news-content h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
    color: #1e293b;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.admin-report-news-content small {
    font-size: 9px;
    color: #94a3b8;
}

.admin-report-item-action {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(51, 168, 255, 0.08);
    font-size: 11px;
    color: #0077cc;
    text-decoration: none;
}

/* ==========================================
   MEDIA GRID
========================================== */

.admin-report-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.admin-report-media-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 13px;
    background: #ffffff;
}

.admin-report-media-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f1f5f9;
    font-size: 25px;
    color: #33a8ff;
}

.admin-report-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-report-media-type {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.75);
    font-size: 11px;
    color: #ffffff;
    backdrop-filter: blur(5px);
}

.admin-report-media-info {
    padding: 10px;
}

.admin-report-media-info strong {
    display: block;
    overflow: hidden;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 850;
    color: #1e293b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-report-media-info span {
    font-size: 9px;
    font-weight: 750;
    color: #94a3b8;
}

.admin-report-media-edit {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    color: #0077cc;
    text-decoration: none;
    backdrop-filter: blur(5px);
}

.admin-report-more-count {
    margin: 12px 0 0;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    color: #64748b;
}

/* ==========================================
   CARD ACTIONS
========================================== */

.admin-report-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-report-card-actions .admin-btn {
    min-width: 0;
    min-height: 41px;
    justify-content: center;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 850;
}

/* ==========================================
   HOVER
========================================== */

.admin-report-news-item,
.admin-report-media-item,
.admin-report-item-action,
.admin-report-media-edit {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.admin-report-news-item:hover,
.admin-report-media-item:hover {
    border-color: rgba(51, 168, 255, 0.22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
}

.admin-report-item-action:hover,
.admin-report-media-edit:hover {
    background: #0077cc;
    color: #ffffff;
}

/* ==========================================
   FOCUS
========================================== */

.admin-report-match-navigation a:focus-visible,
.admin-report-item-action:focus-visible,
.admin-report-media-edit:focus-visible,
.admin-report-form .admin-form-control:focus-visible,
.admin-report-form-actions .admin-btn:focus-visible,
.admin-report-card-actions .admin-btn:focus-visible {
    outline: 3px solid rgba(51, 168, 255, 0.28);
    outline-offset: 3px;
}

/* ==========================================
   ANIMATION
========================================== */

@keyframes adminReportSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes adminReportFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-report-scoreboard,
.admin-report-match-navigation,
.admin-report-section,
.admin-report-progress-card,
.admin-report-content-card {
    animation: adminReportFadeIn 0.35s ease both;
}

.admin-report-match-navigation {
    animation-delay: 0.04s;
}

.admin-report-progress-card {
    animation-delay: 0.08s;
}

/* ==========================================
   RESPONSIVE - LARGE TABLET
========================================== */

@media (max-width: 1199.98px) {

    .admin-report-sidebar {
        position: static;
        top: auto;
    }

    .admin-report-scoreboard {
        gap: 22px;
        padding: 28px;
    }

    .admin-report-team-logo {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    .admin-report-team-logo img {
        width: 54px;
        height: 54px;
    }

    .admin-report-team-info strong {
        max-width: 220px;
        font-size: 19px;
    }

}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 991.98px) {

    .admin-report-scoreboard {
        grid-template-columns: 1fr auto 1fr;
        gap: 16px;
        padding: 25px 20px;
    }

    .admin-report-team {
        gap: 12px;
    }

    .admin-report-team-logo {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .admin-report-team-logo img {
        width: 48px;
        height: 48px;
    }

    .admin-report-team-info strong {
        max-width: 160px;
        font-size: 17px;
    }

    .admin-report-score-center {
        min-width: 160px;
    }

    .admin-report-score strong {
        min-width: 44px;
        font-size: 40px;
    }

}

/* ==========================================
   RESPONSIVE - MOBILE
========================================== */

@media (max-width: 767.98px) {

    .admin-report-alert {
        padding: 12px 13px;
        border-radius: 12px;
        font-size: 12px;
    }

    .admin-report-scoreboard {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 18px;
    }

    .admin-report-team,
    .admin-report-team.away {
        justify-content: center;
        text-align: center;
    }

    .admin-report-team.away {
        flex-direction: row-reverse;
    }

    .admin-report-team-info strong {
        max-width: 260px;
        white-space: normal;
    }

    .admin-report-score-center {
        order: -1;
        min-width: 0;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .admin-report-score strong {
        font-size: 43px;
    }

    .admin-report-match-navigation {
        border-radius: 14px;
    }

    .admin-report-match-navigation a {
        min-height: 39px;
        padding: 9px 12px;
        font-size: 11px;
    }

    .admin-report-textarea {
        min-height: 150px;
    }

    .admin-report-textarea-large {
        min-height: 240px;
    }

    .admin-report-form-actions {
        padding: 16px;
    }

    .admin-report-form-actions .admin-btn {
        width: 100%;
        min-width: 0;
    }

    .admin-report-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* ==========================================
   RESPONSIVE - SMALL MOBILE
========================================== */

@media (max-width: 479.98px) {

    .admin-report-scoreboard {
        padding: 21px 15px;
    }

    .admin-report-team,
    .admin-report-team.away {
        flex-direction: column;
        gap: 10px;
    }

    .admin-report-team-logo {
        flex-basis: 66px;
        width: 66px;
        height: 66px;
    }

    .admin-report-team-info strong {
        font-size: 17px;
    }

    .admin-report-score strong {
        font-size: 39px;
    }

    .admin-report-match-navigation a span {
        display: none;
    }

    .admin-report-form-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .admin-report-card-actions {
        grid-template-columns: 1fr;
    }

    .admin-report-media-grid {
        grid-template-columns: 1fr;
    }

    .admin-report-news-item {
        grid-template-columns: 52px minmax(0, 1fr) 30px;
    }

    .admin-report-news-image {
        width: 52px;
        height: 52px;
    }

}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .admin-report-scoreboard,
    .admin-report-match-navigation,
    .admin-report-section,
    .admin-report-progress-card,
    .admin-report-content-card,
    .admin-report-button-spinner {
        animation: none;
    }

    .admin-report-news-item,
    .admin-report-media-item,
    .admin-report-item-action,
    .admin-report-media-edit,
    .admin-report-match-navigation a {
        transition: none;
    }

}

/* Mobile navigation */

.admin-report-match-navigation a span{
    display:inline;
}

@media (max-width:479.98px){

    .admin-report-match-navigation a{
        width:42px;
        min-width:42px;
        padding:10px;
        justify-content:center;
    }

    .admin-report-match-navigation a span{
        display:none;
    }

    .admin-report-match-navigation a i{
        margin:0;
        font-size:16px;
    }

}

/* ======================================================
   MATCH REPORT PAGE HEADER
====================================================== */

.admin-page-header {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.admin-page-header-content {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.admin-page-header-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
    font-size: 21px;
}

.admin-page-eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--admin-primary-dark);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-page-title {
    margin: 0;
    color: var(--admin-text);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 850;
    line-height: 1.15;
}

.admin-page-description {
    max-width: 720px;
    margin: 9px 0 0;
    color: var(--admin-text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.admin-page-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* Tablet */

@media (max-width: 991.98px) {

    .admin-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-page-actions {
        justify-content: flex-start;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .admin-page-header {
        gap: 18px;
        margin-bottom: 20px;
    }

    .admin-page-header-content {
        gap: 12px;
    }

    .admin-page-header-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 13px;
        font-size: 18px;
    }

    .admin-page-title {
        font-size: 27px;
    }

    .admin-page-description {
        font-size: 13px;
    }

    .admin-page-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-page-actions .admin-btn {
        width: 100%;
    }
}

/* ======================================================
   FINAL ADMIN NEWS MODULE
   Index, Create, Edit and shared compatibility overrides
====================================================== */

/* ---------- Shared layout compatibility ---------- */

.admin-page-wrapper {
    width: calc(100% - var(--admin-sidebar-width));
    min-height: 100vh;
    margin-left: var(--admin-sidebar-width);
    transition:
        width 0.25s ease,
        margin-left 0.25s ease;
}

.admin-page-content {
    min-height: calc(100vh - var(--admin-topbar-height));
    padding: 30px;
}

.admin-page-content > .container-fluid {
    max-width: 1800px;
    margin-inline: auto;
    padding-inline: 0;
}

.admin-module-heading {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.admin-module-heading > div:first-child {
    min-width: 0;
}

.admin-module-heading h2 {
    overflow-wrap: anywhere;
}

.admin-module-heading .admin-btn {
    flex: 0 0 auto;
}

/* ---------- Shared feedback and controls ---------- */

.admin-alert {
    border: 1px solid transparent;
    box-shadow: var(--admin-shadow-sm);
}

.admin-alert.alert-success {
    color: #087c4d;
    border-color: rgba(22, 165, 106, 0.18);
    background: var(--admin-success-light);
}

.admin-alert.alert-danger {
    color: #a52835;
    border-color: rgba(220, 53, 69, 0.18);
    background: var(--admin-danger-light);
}

.admin-alert.alert-warning {
    color: #946000;
    border-color: rgba(245, 158, 11, 0.2);
    background: var(--admin-warning-light);
}

.admin-alert.alert-info {
    color: #0879ad;
    border-color: rgba(14, 165, 233, 0.2);
    background: var(--admin-info-light);
}

.admin-btn:disabled,
.admin-btn.disabled {
    opacity: 0.62;
    pointer-events: none;
    transform: none !important;
}

.admin-muted-text {
    display: block;
    margin-top: 7px;
    color: var(--admin-text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.admin-form-control.is-invalid,
.admin-form-select.is-invalid {
    border-color: var(--admin-danger);
    background-image: none;
}

.admin-form-control.is-invalid:focus,
.admin-form-select.is-invalid:focus {
    border-color: var(--admin-danger);
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}

.invalid-feedback {
    margin-top: 7px;
    color: var(--admin-danger);
    font-size: 0.76rem;
    font-weight: 600;
}

/* ---------- News statistics ---------- */

.admin-news-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.admin-news-stats-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.admin-news-stats-grid .admin-stat-card {
    min-width: 0;
    min-height: 144px;
}

.admin-news-stats-grid .admin-stat-card-value {
    overflow-wrap: anywhere;
}

.admin-stat-warning {
    color: #a76a00;
    background: var(--admin-warning-light);
}

/* ---------- News filters ---------- */

.admin-news-filter-form {
    display: grid;
    grid-template-columns:
        minmax(250px, 1.65fr)
        repeat(5, minmax(145px, 0.8fr));
    gap: 16px;
    align-items: end;
}

.admin-news-filter-search {
    min-width: 0;
}

.admin-news-filter-form .admin-form-control,
.admin-news-filter-form .admin-form-select {
    width: 100%;
}

.admin-news-filter-form .admin-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---------- News table ---------- */

.admin-news-table {
    min-width: 1220px;
}

.admin-news-table th,
.admin-news-table td {
    vertical-align: middle;
}

.admin-news-table tbody tr:hover td {
    background: var(--admin-primary-soft);
}

.admin-news-table th:last-child,
.admin-news-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--admin-white);
    box-shadow: -12px 0 22px rgba(13, 42, 66, 0.05);
}

.admin-news-table thead th:last-child {
    z-index: 3;
    background: #f8fafc;
}

.admin-news-table tbody tr:hover td:last-child {
    background: var(--admin-primary-soft);
}

.admin-news-cell {
    min-width: 320px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-news-thumbnail {
    width: 82px;
    height: 62px;
    flex: 0 0 82px;
    overflow: hidden;
    border: 1px solid var(--admin-border-light);
    border-radius: 14px;
    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);
}

.admin-news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-news-thumbnail > span,
.admin-news-thumbnail > i {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-news-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.admin-news-info strong {
    max-width: 340px;
    overflow: hidden;
    color: var(--admin-text);
    font-size: 0.88rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-news-info span {
    max-width: 340px;
    overflow: hidden;
    color: var(--admin-text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-news-flags {
    min-width: 125px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.admin-news-author,
.admin-news-publication,
.admin-news-match {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-news-author strong,
.admin-news-publication strong,
.admin-news-match strong {
    color: var(--admin-text);
    font-size: 0.82rem;
    line-height: 1.35;
}

.admin-news-author span,
.admin-news-publication span,
.admin-news-match span {
    color: var(--admin-text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

.admin-badge-primary {
    color: var(--admin-primary-deep);
    background: var(--admin-primary-light);
}

/* ---------- News create/edit shared form ---------- */

.admin-news-create-layout,
.admin-news-edit-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(320px, 0.75fr);
    gap: 24px;
    align-items: start;
}

.admin-news-create-main,
.admin-news-edit-main,
.admin-news-create-sidebar,
.admin-news-edit-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-news-create-sidebar,
.admin-news-edit-sidebar {
    position: sticky;
    top: calc(var(--admin-topbar-height) + 20px);
}

.admin-news-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-news-form-grid > div {
    min-width: 0;
}

.admin-news-form-span-2 {
    grid-column: span 2;
}

.admin-news-content-editor {
    min-height: 390px !important;
    resize: vertical;
    line-height: 1.7;
}

.admin-news-excerpt {
    min-height: 120px !important;
    resize: vertical;
}

.admin-news-seo-description {
    min-height: 110px !important;
    resize: vertical;
}

.admin-news-field-footer {
    margin-top: 7px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.admin-news-field-footer > span:last-child {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.admin-news-slug-preview {
    margin-top: 8px;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-news-slug-preview strong {
    color: var(--admin-primary-dark);
}

.admin-news-status-help {
    display: none;
    margin-top: 8px;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.admin-news-status-help.show {
    display: block;
}

/* ---------- Image uploader ---------- */

.admin-news-image-preview {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    border: 1px dashed rgba(51, 168, 255, 0.45);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(51, 168, 255, 0.05),
            rgba(0, 119, 204, 0.02)
        ),
        var(--admin-primary-soft);
}

.admin-news-image-preview img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.admin-news-image-placeholder {
    min-height: 230px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--admin-text-muted);
    text-align: center;
}

.admin-news-image-placeholder i {
    color: var(--admin-primary-dark);
    font-size: 2.15rem;
}

.admin-news-image-placeholder strong {
    color: var(--admin-text);
    font-size: 0.9rem;
}

.admin-news-image-placeholder span {
    font-size: 0.78rem;
}

/* ---------- News switches ---------- */

.admin-news-switch-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-news-switch-item {
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--admin-border-light);
    border-radius: 14px;
    background: var(--admin-white);
    cursor: pointer;
    transition: var(--admin-transition);
}

.admin-news-switch-item:hover {
    border-color: var(--admin-primary-light);
    background: var(--admin-primary-soft);
}

.admin-news-switch-item .form-check-input {
    width: 2.2rem;
    height: 1.18rem;
    margin-top: 3px;
    flex: 0 0 auto;
    cursor: pointer;
}

.admin-news-switch-item .form-check-input:checked {
    border-color: var(--admin-primary-dark);
    background-color: var(--admin-primary-dark);
}

.admin-news-switch-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-news-switch-copy strong {
    color: var(--admin-text);
    font-size: 0.84rem;
}

.admin-news-switch-copy span {
    color: var(--admin-text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

/* ---------- News metadata and actions ---------- */

.admin-news-meta-list {
    display: grid;
    gap: 12px;
}

.admin-news-meta-row {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--admin-border-light);
}

.admin-news-meta-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-news-meta-row span {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
}

.admin-news-meta-row strong {
    color: var(--admin-text);
    font-size: 0.8rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.admin-news-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

/* ---------- Delete modal improvements ---------- */

.admin-delete-modal .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
}

.admin-delete-modal-actions form {
    display: contents;
}

/* ---------- Responsive ---------- */

@media (max-width: 1499.98px) {

    .admin-news-filter-form {
        grid-template-columns:
            repeat(3, minmax(180px, 1fr));
    }

    .admin-news-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 1399.98px) {

    .admin-news-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {

    .admin-page-wrapper {
        width: 100%;
        margin-left: 0;
    }

    .admin-news-create-layout,
    .admin-news-edit-layout {
        grid-template-columns: 1fr;
    }

    .admin-news-create-sidebar,
    .admin-news-edit-sidebar {
        position: static;
    }
}

@media (max-width: 991.98px) {

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

    .admin-news-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-news-filter-search {
        grid-column: 1 / -1;
    }

    .admin-module-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {

    .admin-page-content {
        padding: 20px 16px;
    }

    .admin-news-filter-form,
    .admin-news-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-news-filter-search,
    .admin-news-form-span-2 {
        grid-column: auto;
    }

    .admin-news-filter-form .admin-filter-actions {
        justify-content: stretch;
    }

    .admin-news-filter-form .admin-filter-actions .admin-btn {
        flex: 1 1 180px;
    }

    .admin-news-field-footer {
        flex-direction: column;
        gap: 4px;
    }

    .admin-news-form-actions {
        flex-direction: column-reverse;
    }

    .admin-news-form-actions .admin-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {

    .admin-news-stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-news-filter-form .admin-filter-actions {
        flex-direction: column;
    }

    .admin-news-filter-form .admin-filter-actions .admin-btn {
        width: 100%;
        flex-basis: auto;
    }

    .admin-news-thumbnail {
        width: 70px;
        height: 56px;
        flex-basis: 70px;
    }

    .admin-news-cell {
        min-width: 275px;
    }

    .admin-news-info strong,
    .admin-news-info span {
        max-width: 190px;
    }

    .admin-news-image-preview,
    .admin-news-image-preview img,
    .admin-news-image-placeholder {
        min-height: 205px;
        height: 205px;
    }
}

/* ======================================================
   GLOBAL STAT CARDS
   Competitions, Matches, Media, Sponsors, Standings,
   Newsletter, etc.
====================================================== */

.admin-stat-card {
    position: relative;

    min-width: 0;
    min-height: 128px;
    height: 100%;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 20px;

    overflow: hidden;

    border: 1px solid var(--admin-border-light);
    border-radius: 20px;

    background: var(--admin-white);

    box-shadow: var(--admin-shadow-sm);

    transition: var(--admin-transition);
}


/* Decoration */

.admin-stat-card::after {
    content: "";

    position: absolute;

    top: -38px;
    right: -38px;

    width: 104px;
    height: 104px;

    border-radius: 50%;

    background: rgba(51, 168, 255, 0.08);

    pointer-events: none;
}


/* Icons used by several modules */

.admin-stat-card-icon,
.admin-stat-icon {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: var(--admin-primary-dark);
    background: var(--admin-primary-soft);

    font-size: 1.2rem;
}


/* Content */

.admin-stat-card-content,
.admin-stat-content {
    position: relative;
    z-index: 2;

    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


/* Labels */

.admin-stat-card-label,
.admin-stat-content > span {
    display: block;

    margin: 0 0 6px;

    color: var(--admin-text-muted);

    font-size: 0.84rem;
    font-weight: 700;

    line-height: 1.3;
}


/* Numbers */

.admin-stat-card-value,
.admin-stat-content > strong {
    display: block;

    margin: 0;

    width: 100%;

    color: var(--admin-text);

    font-size: 2rem;
    font-weight: 850;

    line-height: 1;

    text-align: center;
}


/* Small description */

.admin-stat-content > small {
    display: block;

    margin-top: 7px;

    color: var(--admin-text-light);

    font-size: 0.72rem;

    text-align: center;
}


/* ======================================================
   DASHBOARD ONLY
====================================================== */

.admin-dashboard-stats .admin-stat-card {
    min-height: 190px;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    padding: 22px;
}


.admin-dashboard-stats .admin-stat-card-header {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;
}


.admin-dashboard-stats .admin-stat-card-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;
}


/* Dashboard number stays on the left */

.admin-dashboard-stats .admin-stat-card-value {
    width: auto;

    margin: 20px 0 5px;

    text-align: left;

    font-size: 2rem;
}


/* Dashboard label stays on the left */

.admin-dashboard-stats .admin-stat-card-label {
    margin: 0;

    text-align: left;
}


/* Dashboard links at bottom */

.admin-dashboard-stats .admin-stat-card-footer {
    position: relative;
    z-index: 2;

    width: 100%;

    margin-top: auto;
    padding-top: 14px;

    border-top: 1px solid var(--admin-border-light);

    font-size: 0.76rem;
}


.admin-dashboard-stats .admin-stat-card-footer a {
    display: inline-flex;
    align-items: center;

    max-width: 100%;

    color: var(--admin-primary-dark);

    font-weight: 800;
    line-height: 1.35;

    white-space: normal;
    overflow-wrap: anywhere;
}


/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 767.98px) {

    .admin-stat-card {
        min-height: 120px;

        padding: 17px;

        gap: 13px;
    }


    .admin-stat-card-icon,
    .admin-stat-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }


    .admin-stat-card-value,
    .admin-stat-content > strong {
        font-size: 1.8rem;
    }


    /* Dashboard mobile keeps its own vertical design */

    .admin-dashboard-stats .admin-stat-card {
        min-height: 250px;

        align-items: stretch;

        padding: 24px;
    }


    .admin-dashboard-stats .admin-stat-card-value {
        margin-top: 28px;

        text-align: left;
    }


    .admin-dashboard-stats .admin-stat-card-label {
        text-align: left;
    }

}