/* ===================================================================
   theme.css
   نظام التصميم (Design Tokens) — ألوان / خطوط / أنصاف أقطار
=================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap");

:root {
    /* ---- ألوان أساسية (HSL) ---- */
    --brand-background: 206 33% 96%;
    --brand-foreground: 0 0% 4%;
    --brand-card: 0 0% 100%;
    --brand-card-foreground: 0 0% 20%;
    --brand-primary: 218 57% 38%;
    --brand-primary-foreground: 0 0% 100%;
    --brand-secondary: 248 57% 38%;
    --brand-secondary-foreground: 0 0% 100%;
    --brand-muted: 204 40% 90%;
    --brand-muted-foreground: 0 0% 20%;
    --brand-accent: 38 57% 38%;
    --brand-accent-foreground: 0 0% 100%;
    --brand-destructive: 0 84% 60%;
    --brand-destructive-foreground: 0 0% 100%;
    --brand-success: 160 84% 39%;
    --brand-success-foreground: 0 0% 100%;
    --brand-warning: 38 92% 50%;
    --brand-warning-foreground: 0 0% 100%;
    --brand-info: 217 91% 60%;
    --brand-info-foreground: 0 0% 100%;
    --brand-border: 210 33% 81%;
    --brand-input: 210 33% 81%;
    --brand-ring: 218 57% 38%;
    /* ---- خطوط ---- */
    --font-sans: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: "Noto Kufi Arabic", -apple-system, BlinkMacSystemFont, sans-serif;
    /* ---- أنصاف أقطار ---- */
    --brand-radius: 0.5rem;
    --brand-radius-button: calc(var(--brand-radius) - 2px);
}


/* ===================================================================
   Helper Classes
=================================================================== */

.hsl-bg-background {
    background-color: hsl(var(--brand-background));
}

.hsl-bg-card {
    background-color: hsl(var(--brand-card));
}

.hsl-bg-primary {
    background-color: hsl(var(--brand-primary));
}

.hsl-text-primary {
    color: hsl(var(--brand-primary));
}

.hsl-border {
    border-color: hsl(var(--brand-border));
}


/* ===================================================================
   Global
=================================================================== */

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background-color: hsl(var(--brand-background));
    color: hsl(var(--brand-foreground));
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}


/* ===================================================================
   CSC Design System
   Used by DocumentInquiry.razor and DocumentViewer.razor
=================================================================== */


/* ===================================================================
   CSC Spider Background
   نفس الـ SVG Spider الموجود في CSS الأصلي
=================================================================== */

.csc-spider-bg {
    position: relative;
    background-color: hsl(var(--brand-primary));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg stroke='rgba(255,255,255,0.18)' stroke-width='0.8' fill='none'%3E%3Cline x1='150' y1='0' x2='0' y2='90'/%3E%3Cline x1='150' y1='0' x2='60' y2='110'/%3E%3Cline x1='150' y1='0' x2='110' y2='130'/%3E%3Cline x1='150' y1='0' x2='150' y2='140'/%3E%3Cline x1='150' y1='0' x2='190' y2='130'/%3E%3Cline x1='150' y1='0' x2='240' y2='110'/%3E%3Cline x1='150' y1='0' x2='300' y2='90'/%3E%3Cellipse cx='150' cy='80' rx='40' ry='15'/%3E%3Cellipse cx='150' cy='110' rx='75' ry='28'/%3E%3Cellipse cx='150' cy='145' rx='115' ry='45'/%3E%3Cellipse cx='150' cy='185' rx='148' ry='65'/%3E%3Cellipse cx='150' cy='230' rx='148' ry='90'/%3E%3Cline x1='0' y1='90' x2='60' y2='110'/%3E%3Cline x1='60' y1='110' x2='110' y2='130'/%3E%3Cline x1='110' y1='130' x2='150' y2='140'/%3E%3Cline x1='150' y1='140' x2='190' y2='130'/%3E%3Cline x1='190' y1='130' x2='240' y2='110'/%3E%3Cline x1='240' y1='110' x2='300' y2='90'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 300px 300px;
    background-repeat: repeat;
}


    /* المحتوى يفضل فوق الـ Spider */

    .csc-spider-bg > * {
        position: relative;
        z-index: 1;
    }

/* ===================================================================
   Navigation
=================================================================== */

    .csc-nav-link {
        color: hsl(var(--brand-primary-foreground) / .80);
        text-decoration: none;
        padding: 0.65rem 0.9rem;
        font-size: 14px;
        font-family: var(--font-sans);
        transition: color 0.15s ease, background-color 0.15s ease;
        display: inline-block;
        white-space: nowrap;
        background: none;
        border: none;
        cursor: pointer;
    }

        .csc-nav-link:hover {
            color: hsl(var(--brand-primary-foreground));
            background-color: hsl(var(--brand-primary-foreground) / .12);
        }
    /* ===================================================================
   Verified / Success
=================================================================== */

    :root {
        --csc-verified: var(--brand-success);
    }
    /* ===================================================================
   Loading Spinner
=================================================================== */

    @keyframes csc-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .csc-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid hsl(var(--brand-border));
        border-top-color: hsl(var(--brand-primary));
        border-radius: 50%;
        animation: csc-spin 0.75s linear infinite;
        margin: 2rem auto;
    }
    /* ===================================================================
   Responsive Navigation
=================================================================== */

    .csc-nav-desktop {
        display: flex;
        align-items: center;
    }

    .csc-nav-mobile {
        display: none;
        align-items: center;
    }


    @media (max-width: 768px) {

        .csc-nav-desktop {
            display: none;
        }

        .csc-nav-mobile {
            display: flex;
        }
    }