/* =========================================================
   ZNILATHOSS SPORTS
   COMMON.CSS
   التصميم العام والمتجاوب للتطبيق
   ========================================================= */


/* =========================================================
   01 - RESET
   ========================================================= */

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


/* =========================================================
   02 - ROOT
   ========================================================= */

:root {

    --primary: #0b2a5b;
    --primary-dark: #071a35;
    --primary-light: #163d78;

    --background: #071a35;
    --surface: #ffffff;
    --surface-soft: #f8fafc;

    --text: #172033;
    --text-muted: #64748b;
    --text-light: #94a3b8;

    --border: #dbe4f0;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;

    --white: #ffffff;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm:
        0 3px 10px rgba(7, 29, 64, .06);

    --shadow-md:
        0 8px 25px rgba(7, 29, 64, .10);

    --shadow-lg:
        0 15px 40px rgba(7, 29, 64, .14);

    --transition:
        .2s ease;
}


/* =========================================================
   03 - HTML
   ========================================================= */

html {

    width: 100%;

    min-height: 100%;

    scroll-behavior: smooth;

    direction: rtl;

    -webkit-text-size-adjust: 100%;

    text-size-adjust: 100%;

}


/* =========================================================
   04 - BODY
   ========================================================= */

body {

    width: 100%;

    min-width: 0;

    min-height: 100vh;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Arial,
        Tahoma,
        "Segoe UI",
        sans-serif;

    line-height:
        1.6;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


/* =========================================================
   05 - LINKS
   ========================================================= */

a {

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   06 - BUTTONS
   ========================================================= */

button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    border:
        0;

}


/* =========================================================
   07 - IMAGES
   ========================================================= */

img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}


/* =========================================================
   08 - APP
   ========================================================= */

#app {

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--background);

}


/* =========================================================
   09 - HEADER
   ========================================================= */

.app-header {

    width:
        100%;

    min-height:
        64px;

    padding:
        8px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    background:
        var(--primary-dark);

    color:
        var(--white);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    z-index:
        1000;

}


/* =========================================================
   10 - MENU TOGGLE
   ========================================================= */

.menu-toggle {

    position:
        absolute;

    right:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.08);

    color:
        var(--white);

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        10px;

    font-size:
        22px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background-color var(--transition),
        transform var(--transition);

}


.menu-toggle:hover {

    background:
        rgba(255,255,255,.15);

}


.menu-toggle:active {

    transform:
        translateY(-50%)
        scale(.96);

}


.menu-toggle:focus-visible {

    outline:
        2px solid
        #60a5fa;

    outline-offset:
        2px;

}


/* =========================================================
   11 - APP BRAND
   ========================================================= */

.app-brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    text-align:
        right;

}


.app-brand-icon {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        10px;

    font-size:
        20px;

}


.app-brand-text {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


.app-brand-text strong {

    color:
        var(--white);

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1.2;

    white-space:
        nowrap;

}


.app-brand-text span {

    margin-top:
        2px;

    color:
        #b8c6da;

    font-size:
        10px;

    line-height:
        1.3;

}


/* =========================================================
   12 - MAIN CONTENT
   ========================================================= */

.main-content {

    width:
        100%;

    flex:
        1 1 auto;

    min-width:
        0;

    padding:
        16px;

    background:
        var(--background);

}


/* =========================================================
   13 - SECTIONS WRAPPER
   ========================================================= */

.sections-wrapper {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

}


/* =========================================================
   14 - CONTENT SECTION
   ========================================================= */

.content-section {

    width:
        100%;

    min-width:
        0;

    padding:
        20px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-md);

    overflow:
        hidden;

}


/* =========================================================
   15 - ACTIVE CONTENT
   ========================================================= */

.content-section.active {

    animation:
        sectionShow .22s ease;

}


/* =========================================================
   16 - SECTION ANIMATION
   ========================================================= */

@keyframes sectionShow {

    from {

        opacity:
            0;

        transform:
            translateY(5px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   17 - SECTION HEADER
   ========================================================= */

.section-header {

    width:
        100%;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        18px;

    padding-bottom:
        14px;

    border-bottom:
        1px solid
        var(--border);

}


/* =========================================================
   18 - SECTION HEADING
   ========================================================= */

.section-heading {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.section-icon {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eef4ff;

    border:
        1px solid
        #dbe7fa;

    border-radius:
        11px;

    font-size:
        20px;

}


.section-label {

    display:
        block;

    margin-bottom:
        1px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        800;

}


.section-heading h2 {

    color:
        var(--primary);

    font-size:
        20px;

    font-weight:
        900;

    line-height:
        1.25;

}


/* =========================================================
   19 - SECTION STATUS
   ========================================================= */

.section-status {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        28px;

    padding:
        5px 10px;

    background:
        #f1f5f9;

    color:
        var(--text-muted);

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    font-size:
        10px;

    font-weight:
        800;

    white-space:
        nowrap;

}


/* =========================================================
   20 - SECTION CONTAINER
   ========================================================= */

.section-container {

    width:
        100%;

    min-width:
        0;

    min-height:
        120px;

}


/* =========================================================
   21 - EMPTY STATE
   ========================================================= */

.empty-state {

    width:
        100%;

    min-height:
        180px;

    padding:
        25px 15px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-muted);

    text-align:
        center;

}


.empty-state-icon {

    margin-bottom:
        9px;

    font-size:
        32px;

    line-height:
        1;

}


.empty-state h3 {

    margin-bottom:
        5px;

    color:
        #334155;

    font-size:
        15px;

    font-weight:
        800;

}


.empty-state p {

    max-width:
        500px;

    color:
        var(--text-muted);

    font-size:
        12px;

}


/* =========================================================
   22 - LOADING
   ========================================================= */

.loading-state {

    min-height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        var(--text-muted);

    text-align:
        center;

}


.loading-spinner {

    width:
        32px;

    height:
        32px;

    border:
        3px solid
        #dbe4f0;

    border-top-color:
        #2563eb;

    border-radius:
        50%;

    animation:
        spin .8s linear infinite;

}


@keyframes spin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   23 - ERROR
   ========================================================= */

.error-state {

    width:
        100%;

    min-height:
        150px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        #fff5f5;

    border:
        1px solid
        #fecaca;

    border-radius:
        12px;

    color:
        var(--danger);

    text-align:
        center;

}


.error-state strong {

    margin-bottom:
        5px;

    font-size:
        15px;

}


.error-state span {

    color:
        #991b1b;

    font-size:
        12px;

}


/* =========================================================
   24 - SIDEBAR OVERLAY
   ========================================================= */

.sidebar-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1100;

    background:
        rgba(3, 12, 28, .55);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}


.sidebar-overlay.active {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   25 - SIDEBAR OPEN BODY
   ========================================================= */

body.sidebar-open {

    overflow:
        hidden;

}


/* =========================================================
   26 - SIDEBAR HEADER SUPPORT
   ========================================================= */

.sidebar-header {

    width:
        100%;

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    margin-bottom:
        15px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        var(--border);

}


.sidebar-brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.sidebar-brand-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eef4ff;

    border-radius:
        9px;

}


.sidebar-brand div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


.sidebar-brand strong {

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        900;

    white-space:
        nowrap;

}


.sidebar-brand small {

    color:
        var(--text-muted);

    font-size:
        9px;

}


/* =========================================================
   27 - SIDEBAR CLOSE
   ========================================================= */

.sidebar-close {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f1f5f9;

    color:
        #475569;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    font-size:
        21px;

    cursor:
        pointer;

}


.sidebar-close:hover {

    background:
        #e2e8f0;

}


/* =========================================================
   28 - SIDEBAR INFO
   ========================================================= */

.sidebar-info {

    padding:
        5px 8px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


.sidebar-info p {

    margin-bottom:
        8px;

}


.sidebar-info p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   29 - SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer {

    margin-top:
        20px;

    padding-top:
        14px;

    border-top:
        1px solid
        var(--border);

    color:
        var(--text-light);

    font-size:
        9px;

    font-weight:
        800;

    text-align:
        center;

}


/* =========================================================
   30 - HIDDEN
   ========================================================= */

[hidden] {

    display:
        none !important;

}


/* =========================================================
   31 - SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width:
        7px;

    height:
        7px;

}


::-webkit-scrollbar-track {

    background:
        #06152c;

}


::-webkit-scrollbar-thumb {

    background:
        #28466f;

    border-radius:
        10px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #3b5f91;

}


/* =========================================================
   32 - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .app-header {

        min-height:
            60px;

        padding:
            7px 14px;

    }


    .main-content {

        padding:
            13px;

    }


    .content-section {

        padding:
            17px;

        border-radius:
            15px;

    }


    .app-brand-icon {

        width:
            37px;

        height:
            37px;

        flex-basis:
            37px;

    }


    .app-brand-text strong {

        font-size:
            15px;

    }

}


/* =========================================================
   33 - MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .app-header {

        min-height:
            58px;

        padding:
            6px 12px;

    }


    .menu-toggle {

        right:
            10px;

        width:
            40px;

        height:
            40px;

    }


    .app-brand {

        gap:
            7px;

    }


    .app-brand-icon {

        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;

        font-size:
            17px;

    }


    .app-brand-text strong {

        font-size:
            13px;

    }


    .app-brand-text span {

        display:
            none;

    }


    .main-content {

        padding:
            10px;

    }


    .content-section {

        padding:
            13px;

        border-radius:
            12px;

    }


    .section-header {

        align-items:
            flex-start;

        margin-bottom:
            13px;

        padding-bottom:
            11px;

    }


    .section-heading {

        gap:
            8px;

    }


    .section-icon {

        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

        border-radius:
            9px;

        font-size:
            17px;

    }


    .section-heading h2 {

        font-size:
            17px;

    }


    .section-status {

        min-height:
            25px;

        padding:
            4px 8px;

        font-size:
            9px;

    }


    .empty-state {

        min-height:
            160px;

    }

}


/* =========================================================
   34 - SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .app-header {

        min-height:
            55px;

    }


    .menu-toggle {

        width:
            37px;

        height:
            37px;

        font-size:
            19px;

    }


    .app-brand-icon {

        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;

        font-size:
            15px;

    }


    .app-brand-text strong {

        font-size:
            11px;

    }


    .main-content {

        padding:
            7px;

    }


    .content-section {

        padding:
            11px;

        border-radius:
            10px;

    }


    .section-heading h2 {

        font-size:
            15px;

    }


    .section-label {

        font-size:
            9px;

    }


    .section-icon {

        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;

        font-size:
            15px;

    }


    .section-status {

        font-size:
            8px;

    }

}


/* =========================================================
   35 - VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 340px) {

    .main-content {

        padding:
            5px;

    }


    .content-section {

        padding:
            9px;

    }


    .app-brand-text strong {

        font-size:
            10px;

    }


    .section-heading h2 {

        font-size:
            14px;

    }

}


/* =========================================================
   36 - LANDSCAPE MOBILE
   ========================================================= */

@media (max-width: 900px)
and (orientation: landscape) {

    .app-header {

        min-height:
            52px;

    }


    .main-content {

        padding:
            8px;

    }


    .content-section {

        padding:
            12px;

    }

}


/* =========================================================
   37 - TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .menu-toggle:hover {

        background:
            rgba(255,255,255,.08);

    }


    .sidebar-close:hover {

        background:
            #f1f5f9;

    }

}


/* =========================================================
   38 - REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}
html {
    font-size: calc(16px * var(--app-scale, 1));
}