@layer tokens,base,layout,components,print;

@layer tokens {
    :root {
        --fx-primary: #175cd3;
        --fx-surface: #fff;
        --fx-bg: #f3f6fb;
        --fx-text: #162b45;
        --fx-muted: #60738c;
        --fx-border: #dce4ee;
        --fx-padding: 18px;
        --fx-font: "Segoe UI",Tahoma,Arial,sans-serif
    }

    [data-palette=teal] {
        --fx-primary: #0f766e
    }

    [data-palette=green] {
        --fx-primary: #15803d
    }

    [data-palette=red] {
        --fx-primary: #b42318
    }

    [data-density=comfortable] {
        --fx-padding: 28px
    }

    :lang(ar), :lang(ur) {
        --fx-font: Tahoma,"Segoe UI",Arial,sans-serif
    }
}

@layer base {
    * {
        box-sizing: border-box
    }

    body {
        margin: 0;
        background: var(--fx-bg);
        color: var(--fx-text);
        font: 14px/1.6 var(--fx-font)
    }

    h1, h2, p {
        margin: 0 0 12px
    }

    h1 {
        font-size: 29px
    }

    h2 {
        font-size: 19px
    }

    p {
        color: var(--fx-muted)
    }

    button, input, select {
        font: inherit;
        padding: 8px 12px;
        border: 1px solid var(--fx-border);
        border-radius: 5px;
        background: var(--fx-surface);
        color: var(--fx-text)
    }

    button {
        cursor: pointer
    }

        button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
            outline: 3px solid var(--fx-primary);
            outline-offset: 3px
        }

    table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 18px
    }

    th, td {
        text-align: start;
        border-bottom: 1px solid var(--fx-border);
        padding: 12px
    }

    th {
        background: var(--fx-bg)
    }
}

@layer layout {
    .fx-nav {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: 210px;
        padding: 30px 16px 24px;
        background: linear-gradient(180deg, #102a4b 0%, #0b1e36 100%);
        color: #fff;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: #355476 transparent;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 5px 0 24px rgba(15, 35, 60, 0.08);
        font-family: "DM Sans", "Segoe UI", sans-serif;
    }

        /* Brand */
        .fx-nav h2 {
            margin: 0 10px 4px;
            color: #fff;
            font-size: 27px;
            font-weight: 800;
            letter-spacing: 2px;
            line-height: 1.3;
        }

        .fx-nav p {
            margin: 0 10px 28px;
            color: #a9c6e8;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2.2px;
        }

        /* Section headings */
        .fx-nav small {
            display: block;
            margin: 25px 10px 9px;
            color: #82a6d0;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.5px;
            line-height: 1.4;
        }

        /* Navigation links */
        .fx-nav a {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 38px;
            margin: 3px 0;
            padding: 9px 12px;
            border: 1px solid transparent;
            border-radius: 7px;
            color: #d5e2f2 !important;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.45;
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;

        }

            /* Hover */
            .fx-nav a:hover {
                color: #fff;
                background: rgba(177, 211, 255, 0.10);
                border-color: rgba(177, 211, 255, 0.10);
                padding-inline-start: 16px;
            }

            /* Active link — add class="active" to the current page link */
            .fx-nav a.active {
                color: #fff;
                background: linear-gradient( 90deg, rgba(113, 174, 245, 0.23), rgba(113, 174, 245, 0.08) );
                border-color: rgba(151, 197, 255, 0.20);
                font-weight: 700;
            }

                .fx-nav a.active::before {
                    content: "";
                    position: absolute;
                    inset-block: 8px;
                    inset-inline-start: -1px;
                    width: 3px;
                    border-radius: 0 4px 4px 0;
                    background: #a9d3ff;
                }

        /* Website footer */
        .fx-nav small:last-child {
            margin-top: 30px;
            padding: 18px 10px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            color: #8eabc9;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* Clean scrollbar */
        .fx-nav::-webkit-scrollbar {
            width: none;
        }

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

        .fx-nav::-webkit-scrollbar-thumb {
            background: #355476;
            border-radius: 10px;
        }

            .fx-nav::-webkit-scrollbar-thumb:hover {
                background: #6287b1;
            }



    .fx-main {
        margin-inline-start: 210px;
        padding: 32px;
        
        overflow: auto;
        position: fixed;
        inset-block: 0;
        width: calc(100% - 210px);
    }

    header {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
        margin-bottom: 24px
    }

    .fx-tools {
        display: flex;
        gap: 6px
    }

        .fx-tools button {
            border-radius: 2px;
            min-width: 46px
        }

    .fx-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 18px
    }

    .fx-filters {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: center
    }

        .fx-filters label {
            display: flex;
            align-items: center;
            gap: 8px
        }

    @media(max-width:800px) {
        .fx-nav {
            position: static;
            width: auto
        }

            .fx-nav small {
                position: static
            }

            .fx-nav a {
                display: inline-block
            }

        .fx-main {
            margin: 0;
            padding: 18px
        }

        .fx-grid {
            grid-template-columns: 1fr
        }

        header {
            align-items: start
        }

        .fx-filters label {
            flex-wrap: wrap
        }

        table {
            font-size: 12px
        }
    }
}

@layer components {
    .fx-card {
        background: var(--fx-surface);
        padding: var(--fx-padding);
        border: 1px solid var(--fx-border);
        border-radius: 10px;
        margin-bottom: 20px
    }

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

    .fx-badge {
        display: inline-block;
        color: var(--fx-primary);
        background: color-mix(in srgb,var(--fx-primary) 10%,white);
        padding: 5px 10px;
        border-radius: 5px
    }

    .fx-number {
        font-size: 32px;
        letter-spacing: -1px
    }

    .fx-chart {
        display: flex;
        align-items: end;
        gap: 18px;
        height: 200px;
        padding-top: 20px
    }

        .fx-chart div {
            height: var(--height);
            background: var(--fx-primary);
            color: white;
            border-radius: 7px 7px 0 0;
            flex: 1;
            text-align: center;
            padding-top: 5px
        }

    .fx-alert {
        color: #b42318
    }

    .fx-drawer {
        position: fixed;
        inset-block: 0;
        inset-inline-start: auto;
        inset-inline-end: 0;
        margin: 0;
        width: min(480px,100%);
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: none;
        padding: 24px;
        box-shadow: -8px 0 40px #0002;
        overflow: auto
    }

        .fx-drawer[open] {
            animation: enter .18s ease-out
        }

        .fx-drawer::backdrop {
            background: #0d21345c
        }

    .fx-drawer-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px
    }

    @keyframes enter {
        from {
            opacity: 0;
            transform: translateY(8px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    @media(prefers-reduced-motion:reduce) {
        .fx-drawer[open] {
            animation: none
        }
    }
}

@layer print {
    @media print {
        @page {
            size: A4;
            margin: 15mm
        }

        .fx-nav, .fx-tools, .fx-filters, dialog {
            display: none !important
        }

        .fx-main {
            margin: 0;
            padding: 0;
            max-width: none
        }

        body {
            background: white
        }

        .fx-card {
            border: none;
            padding: 0
        }

        thead {
            display: table-header-group
        }

        tr {
            break-inside: avoid
        }

        h1, h2 {
            break-after: avoid
        }
    }
}