/* =========================================================
   ZNILATHOSS SPORTS
   STANDINGS.CSS
   =========================================================

   متوافق بالكامل مع:
   js/standings.js

   المسؤول عن:
   - جدول الترتيب
   - صفوف الفرق
   - الأعمدة
   - الشعارات
   - النقاط والإحصائيات
   - آخر المباريات
   - العرض الأفقي
   - RTL
   - Responsive
   - Loading / Error / Empty
   ========================================================= */


/* =========================================================
   ROOT SECTION
   ========================================================= */

#standings-section {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    direction: rtl;

    overflow: visible !important;

    box-sizing: border-box;

}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

#standings-container,
.standings-container {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-top: 20px;

    direction: rtl;

    box-sizing: border-box;

}


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

#standings-container .empty-state {

    width: 100%;
    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 35px 20px;

    box-sizing: border-box;

    text-align: center;

    color: #64748b;

}


/* =========================================================
   EMPTY ICON
   ========================================================= */

#standings-container .empty-state-icon {

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    font-size: 30px;

}


/* =========================================================
   EMPTY TITLE
   ========================================================= */

#standings-container .empty-state h3 {

    margin: 0;

    color: #0f172a;

    font-size: 18px;

    font-weight: 800;

}


/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

#standings-container .empty-state p {

    margin: 0;

    max-width: 500px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   STANDINGS CARD
   ========================================================= */

#standings-container .standings-card {

    width: 100%;
    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.08);

}


/* =========================================================
   TITLE
   ========================================================= */

#standings-container .standings-title {

    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 14px 20px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e3a8a
        );

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;

    text-align: center;

}


/* =========================================================
   HORIZONTAL SCROLL
   ========================================================= */

#standings-container .standings-scroll {

    width: 100%;

    max-width: 100%;

    min-width: 0;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;

    direction: rtl;

    box-sizing: border-box;

}


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

#standings-container .standings-scroll::-webkit-scrollbar {

    height: 9px;

}


#standings-container .standings-scroll::-webkit-scrollbar-track {

    background: #f1f5f9;

}


#standings-container .standings-scroll::-webkit-scrollbar-thumb {

    background: #94a3b8;

    border-radius: 20px;

}


#standings-container .standings-scroll::-webkit-scrollbar-thumb:hover {

    background: #64748b;

}


/* =========================================================
   TABLE MAIN
   ---------------------------------------------------------
   JS يستخدم div وليس table
   ========================================================= */

#standings-container .standings-table {

    width: max-content;

    min-width: 100%;

    box-sizing: border-box;

    direction: rtl;

    background: #ffffff;

    white-space: nowrap;

}


/* =========================================================
   HEADER
   ========================================================= */

#standings-container .standings-header {

    min-width: 1050px;

    height: 54px;

    display: grid;

    grid-template-columns:
        60px
        260px
        repeat(7, 75px)
        85px
        170px;

    align-items: center;

    box-sizing: border-box;

    padding: 0;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e3a8a
        );

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;

    text-align: center;

    direction: rtl;

}


/* =========================================================
   HEADER CELLS
   ========================================================= */

#standings-container .standings-header > div {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 8px;

    box-sizing: border-box;

    border-left: 1px solid rgba(255,255,255,0.08);

}


/* =========================================================
   HEADER TEAM
   ========================================================= */

#standings-container .standings-header > div:nth-child(2) {

    justify-content: flex-start;

    padding-right: 16px;

}


/* =========================================================
   BODY
   ========================================================= */

#standings-container .standings-body {

    width: max-content;

    min-width: 1050px;

    box-sizing: border-box;

    direction: rtl;

}


/* =========================================================
   ROW
   ========================================================= */

#standings-container .standings-row {

    min-width: 1050px;

    min-height: 64px;

    display: grid;

    grid-template-columns:
        60px
        260px
        repeat(7, 75px)
        85px
        170px;

    align-items: center;

    box-sizing: border-box;

    background: #ffffff;

    color: #1e293b;

    border-bottom: 1px solid #e2e8f0;

    direction: rtl;

    transition:
        background 0.18s ease,
        transform 0.18s ease;

}


/* =========================================================
   ROW HOVER
   ========================================================= */

#standings-container .standings-row:hover {

    background: #f8fafc;

}


/* =========================================================
   ROW CHILDREN
   ========================================================= */

#standings-container .standings-row > div {

    min-width: 0;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8px;

    box-sizing: border-box;

    font-size: 13px;

    font-weight: 700;

}


/* =========================================================
   RANK
   ========================================================= */

#standings-container .standings-rank {

    width: 60px;

    color: #64748b;

    font-size: 14px;

    font-weight: 900;

}


/* =========================================================
   TEAM
   ========================================================= */

#standings-container .standings-team {

    width: 260px;

    min-width: 260px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    padding-right: 12px;

    padding-left: 10px;

    text-align: right;

}


/* =========================================================
   TEAM LOGO WRAPPER
   ========================================================= */

#standings-container .standings-team-logo {

    width: 38px;

    height: 38px;

    min-width: 38px;

    min-height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 8px;

    background: #f8fafc;

    box-sizing: border-box;

}


/* =========================================================
   TEAM LOGO IMAGE
   ========================================================= */

#standings-container .standings-team-logo img {

    width: 32px;

    height: 32px;

    max-width: 32px;

    max-height: 32px;

    object-fit: contain;

    display: block;

}


/* =========================================================
   LOGO PLACEHOLDER
   ========================================================= */

#standings-container
.standings-team-logo-placeholder {

    width: 32px;

    height: 32px;

    min-width: 32px;

    min-height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    border-radius: 7px;

    background: #e2e8f0;

    color: #64748b;

}


/* =========================================================
   TEAM NAME
   ========================================================= */

#standings-container .standings-team-name {

    min-width: 0;

    max-width: 185px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #0f172a;

    font-size: 14px;

    font-weight: 800;

}


/* =========================================================
   NORMAL CELLS
   ========================================================= */

#standings-container .standings-cell {

    width: 75px;

    min-width: 75px;

    text-align: center;

    color: #334155;

    font-size: 13px;

    font-weight: 700;

}


/* =========================================================
   POINTS
   ========================================================= */

#standings-container .standings-points {

    width: 85px;

    min-width: 85px;

    color: #1d4ed8;

    font-size: 16px;

    font-weight: 950;

    text-align: center;

}


/* =========================================================
   FORM CELL
   ========================================================= */

#standings-container .standings-form-cell {

    width: 170px;

    min-width: 170px;

    display: flex;

    align-items: center;

    justify-content: center;

}


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

#standings-container .standings-form {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 5px;

    flex-wrap: nowrap;

    direction: ltr;

}


/* =========================================================
   FORM ITEM
   ========================================================= */

#standings-container .standings-form-item {

    width: 24px;

    height: 24px;

    min-width: 24px;

    min-height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

    line-height: 1;

    box-sizing: border-box;

}


/* =========================================================
   WIN
   ========================================================= */

#standings-container .standings-form-w {

    background: #16a34a;

}


/* =========================================================
   DRAW
   ========================================================= */

#standings-container .standings-form-d {

    background: #f59e0b;

}


/* =========================================================
   LOSS
   ========================================================= */

#standings-container .standings-form-l {

    background: #dc2626;

}


/* =========================================================
   EMPTY FORM
   ========================================================= */

#standings-container .standings-form-empty {

    color: #94a3b8;

    font-size: 14px;

}


/* =========================================================
   FORM TEXT
   ========================================================= */

#standings-container .standings-form-text {

    color: #64748b;

    font-size: 12px;

}


/* =========================================================
   FIRST PLACE
   ========================================================= */

#standings-container
.standings-row[data-rank="1"]
.standings-rank {

    color: #2563eb;

    font-size: 16px;

}


/* =========================================================
   TOP POSITIONS
   ========================================================= */

#standings-container
.standings-row[data-rank="1"] {

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,0.06),
            transparent
        );

}


/* =========================================================
   LOADING STATE
   ========================================================= */

#standings-container .loading-state {

    width: 100%;

    min-height: 250px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 14px;

    box-sizing: border-box;

    padding: 30px;

    color: #64748b;

    text-align: center;

}


/* =========================================================
   LOADING SPINNER
   ========================================================= */

#standings-container .loading-spinner {

    width: 42px;

    height: 42px;

    border: 4px solid #e2e8f0;

    border-top-color: #2563eb;

    border-radius: 50%;

    animation:
        standings-spin 0.8s linear infinite;

}


@keyframes standings-spin {

    to {

        transform: rotate(360deg);

    }

}


/* =========================================================
   ERROR STATE
   ========================================================= */

#standings-container .error-state {

    width: 100%;

    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    box-sizing: border-box;

    padding: 30px 20px;

    text-align: center;

    color: #64748b;

}


/* =========================================================
   ERROR TITLE
   ========================================================= */

#standings-container .error-state strong {

    color: #334155;

    font-size: 17px;

    font-weight: 900;

}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

#standings-container .error-state p {

    margin: 0;

    max-width: 500px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   SEASON STATUS
   ========================================================= */

#seasonStatus {

    min-height: 20px;

    margin-top: 8px;

    font-size: 13px;

    font-weight: 700;

    text-align: right;

}


/* =========================================================
   STATUS TYPES
   ========================================================= */

#seasonStatus.loading {

    color: #2563eb;

}


#seasonStatus.success {

    color: #16a34a;

}


#seasonStatus.error {

    color: #dc2626;

}


/* =========================================================
   RTL
   ========================================================= */

[dir="rtl"]
#standings-container {

    direction: rtl;

}


[dir="rtl"]
#standings-container .standings-table {

    direction: rtl;

}


[dir="rtl"]
#standings-container .standings-row {

    direction: rtl;

}


[dir="rtl"]
#standings-container .standings-team {

    direction: rtl;

}


/* =========================================================
   منع CSS العام من تحويل الصفوف إلى عمودية
   ========================================================= */

#standings-container .standings-row {

    flex-direction: initial !important;

}


/* =========================================================
   TEAM يجب أن يبقى أفقيًا
   ========================================================= */

#standings-container .standings-team {

    flex-direction: row !important;

    flex-wrap: nowrap !important;

}


/* =========================================================
   FORM يجب أن يبقى أفقيًا
   ========================================================= */

#standings-container .standings-form {

    flex-direction: row !important;

    flex-wrap: nowrap !important;

}


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

@media (max-width: 700px) {

    #standings-container,
    .standings-container {

        margin-top: 14px;

    }


    #standings-container .standings-card {

        border-radius: 12px;

    }


    #standings-container .standings-title {

        min-height: 50px;

        padding: 12px 14px;

        font-size: 15px;

    }


    #standings-container .standings-header {

        min-width: 930px;

        height: 48px;

        grid-template-columns:
            50px
            220px
            repeat(7, 65px)
            75px
            150px;

        font-size: 11px;

    }


    #standings-container .standings-body {

        min-width: 930px;

    }


    #standings-container .standings-row {

        min-width: 930px;

        min-height: 56px;

        grid-template-columns:
            50px
            220px
            repeat(7, 65px)
            75px
            150px;

    }


    #standings-container .standings-team {

        width: 220px;

        min-width: 220px;

        gap: 8px;

        padding-right: 8px;

    }


    #standings-container .standings-team-logo {

        width: 32px;

        height: 32px;

        min-width: 32px;

        min-height: 32px;

        flex-basis: 32px;

    }


    #standings-container
    .standings-team-logo img {

        width: 27px;

        height: 27px;

        max-width: 27px;

        max-height: 27px;

    }


    #standings-container
    .standings-team-logo-placeholder {

        width: 27px;

        height: 27px;

        min-width: 27px;

        min-height: 27px;

        font-size: 14px;

    }


    #standings-container .standings-team-name {

        max-width: 160px;

        font-size: 12px;

    }


    #standings-container .standings-cell {

        width: 65px;

        min-width: 65px;

        font-size: 12px;

    }


    #standings-container .standings-points {

        width: 75px;

        min-width: 75px;

        font-size: 14px;

    }


    #standings-container .standings-form-cell {

        width: 150px;

        min-width: 150px;

    }


    #standings-container .standings-form-item {

        width: 21px;

        height: 21px;

        min-width: 21px;

        min-height: 21px;

        font-size: 9px;

    }


    #standings-container .empty-state {

        min-height: 180px;

        padding: 25px 15px;

    }


    #standings-container .empty-state-icon {

        width: 52px;

        height: 52px;

        font-size: 25px;

    }


    #standings-container .empty-state h3 {

        font-size: 16px;

    }


    #standings-container .empty-state p {

        font-size: 13px;

    }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 420px) {

    #standings-container .standings-header {

        min-width: 880px;

        grid-template-columns:
            45px
            200px
            repeat(7, 60px)
            70px
            145px;

    }


    #standings-container .standings-body {

        min-width: 880px;

    }


    #standings-container .standings-row {

        min-width: 880px;

        grid-template-columns:
            45px
            200px
            repeat(7, 60px)
            70px
            145px;

    }


    #standings-container .standings-team {

        width: 200px;

        min-width: 200px;

    }


    #standings-container .standings-team-name {

        max-width: 140px;

    }

}


/* =========================================================
   DARK MODE
   ========================================================= */

@media (prefers-color-scheme: dark) {

    #standings-container .standings-card {

        background: #0f172a;

        border-color: #1e293b;

    }


    #standings-container .standings-table {

        background: #0f172a;

    }


    #standings-container .standings-row {

        background: #0f172a;

        color: #cbd5e1;

        border-bottom-color: #1e293b;

    }


    #standings-container .standings-row:hover {

        background: #172033;

    }


    #standings-container .standings-team-name {

        color: #f8fafc;

    }


    #standings-container .standings-cell {

        color: #cbd5e1;

    }


    #standings-container .standings-rank {

        color: #94a3b8;

    }


    #standings-container .standings-team-logo {

        background: #1e293b;

    }


    #standings-container
    .standings-team-logo-placeholder {

        background: #334155;

        color: #cbd5e1;

    }


    #standings-container .standings-scroll::-webkit-scrollbar-track {

        background: #1e293b;

    }


    #standings-container .empty-state {

        color: #94a3b8;

    }


    #standings-container .empty-state h3 {

        color: #f8fafc;

    }


    #standings-container .empty-state p {

        color: #94a3b8;

    }


    #standings-container .empty-state-icon {

        background: #1e293b;

    }


    #standings-container .loading-state {

        color: #94a3b8;

    }


    #standings-container .loading-spinner {

        border-color: #334155;

        border-top-color: #60a5fa;

    }


    #standings-container .error-state strong {

        color: #f8fafc;

    }


    #standings-container .error-state p {

        color: #94a3b8;

    }

}