@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap");
@import url("/wp-includes/css/dashicons.min.css");

/* ==========================================================================
   AFAQ CORE
   Path: assets/css/afaq-core.css
   Purpose: variables + isolation + reset + fonts only
   Source checked: views/project-owner/dashboard.php
   Main wrapper found: .afaq-app
   Page wrapper found: .afaq-owner-dashboard-page
   ========================================================================== */

/* ==========================================================================
   01) BRAND VARIABLES
   ========================================================================== */
:root {
    --afaq-font: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;

    /* Brand colors */
    --afaq-navy: #071321;
    --afaq-navy-2: #0d2138;
    --afaq-navy-3: #17395f;
    --afaq-gold: #c08c47;
    --afaq-gold-2: #d9a866;
    --afaq-gold-3: #f3dfbd;

    /* White identity */
    --afaq-bg: #ffffff;
    --afaq-bg-soft: #fbfaf8;
    --afaq-bg-muted: #f7f3ed;
    --afaq-surface: #ffffff;
    --afaq-surface-2: #fffdf9;

    /* Text colors */
    --afaq-text: #1f2937;
    --afaq-heading: #071321;
    --afaq-muted: #667085;
    --afaq-muted-2: #8a94a3;
    --afaq-white: #ffffff;

    /* Borders */
    --afaq-border: #e8dfd3;
    --afaq-border-soft: rgba(7, 19, 33, 0.08);
    --afaq-border-strong: rgba(7, 19, 33, 0.16);
    --afaq-border-gold: rgba(192, 140, 71, 0.42);

    /* Status colors */
    --afaq-success: #1f9d5a;
    --afaq-success-bg: #ecfdf3;
    --afaq-success-border: #b9efcf;

    --afaq-warning: #c67c2d;
    --afaq-warning-bg: #fff7e8;
    --afaq-warning-border: #efd09d;

    --afaq-danger: #d64545;
    --afaq-danger-bg: #fff1f1;
    --afaq-danger-border: #f0b8b8;

    --afaq-info: #2474b8;
    --afaq-info-bg: #eef7ff;
    --afaq-info-border: #bdddf8;

    /* Shadows */
    --afaq-shadow-xs: 0 1px 2px rgba(7, 19, 33, 0.05);
    --afaq-shadow-sm: 0 8px 22px rgba(7, 19, 33, 0.07);
    --afaq-shadow-md: 0 16px 38px rgba(7, 19, 33, 0.10);
    --afaq-shadow-lg: 0 24px 60px rgba(7, 19, 33, 0.14);

    /* Radius */
    --afaq-radius-xs: 8px;
    --afaq-radius-sm: 12px;
    --afaq-radius-md: 16px;
    --afaq-radius-lg: 22px;
    --afaq-radius-xl: 28px;

    /* Layout */
    --afaq-sidebar: 270px;
    --afaq-container-gap: 22px;

    /* Motion */
    --afaq-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   02) PAGE SAFE RESET
   ========================================================================== */
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
}

/*
   مهم:
   لا نغير خلفية body بالكامل حتى لا نكسر الموقع.
   الخلفية البيضاء تخص لوحة أفق فقط داخل .afaq-app.
*/

/* ==========================================================================
   03) AFAQ APP ISOLATION
   ========================================================================== */
body .afaq-app,
body .afaq-app * {
    box-sizing: border-box;
}

body .afaq-app {
    width: 100%;
    min-height: 100vh;
    direction: rtl;
    isolation: isolate;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% -8%, rgba(192, 140, 71, 0.10), transparent 30%),
        radial-gradient(circle at 88% 0%, rgba(7, 19, 33, 0.06), transparent 28%),
        linear-gradient(180deg, var(--afaq-bg) 0%, var(--afaq-bg-soft) 100%);
    color: var(--afaq-text);
    font-family: var(--afaq-font);
    font-size: 14px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Standalone locked/login state support found in dashboard.php */
body .afaq-app .afaq-main--standalone {
    width: 100%;
    min-height: 100vh;
    margin: 0;
}

/* ==========================================================================
   04) FONT LOCK
   ========================================================================== */
body .afaq-app,
body .afaq-app button,
body .afaq-app input,
body .afaq-app textarea,
body .afaq-app select,
body .afaq-app table {
    font-family: var(--afaq-font) !important;
}

/* Dashicons must keep WordPress icon font */
body .afaq-app .dashicons,
body .afaq-app .dashicons-before::before {
    font-family: dashicons !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    speak: never !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   05) TYPOGRAPHY RESET INSIDE AFAQ ONLY
   ========================================================================== */
body .afaq-app h1,
body .afaq-app h2,
body .afaq-app h3,
body .afaq-app h4,
body .afaq-app h5,
body .afaq-app h6,
body .afaq-app p,
body .afaq-app ul,
body .afaq-app ol,
body .afaq-app figure {
    margin-top: 0;
}

body .afaq-app h1,
body .afaq-app h2,
body .afaq-app h3,
body .afaq-app h4,
body .afaq-app h5,
body .afaq-app h6 {
    color: var(--afaq-heading);
    font-weight: 900;
    letter-spacing: 0;
}

body .afaq-app p {
    color: var(--afaq-muted);
}

body .afaq-app strong,
body .afaq-app b {
    font-weight: 900;
}

body .afaq-app small {
    font-size: 12px;
}

/* ==========================================================================
   06) LINKS / BUTTONS SAFE RESET
   ========================================================================== */
body .afaq-app a {
    color: inherit;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body .afaq-app a:hover,
body .afaq-app a:focus,
body .afaq-app a:active,
body .afaq-app button:hover,
body .afaq-app button:focus,
body .afaq-app button:active {
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body .afaq-app button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

body .afaq-app a *,
body .afaq-app button * {
    pointer-events: none;
}

/* ==========================================================================
   07) MEDIA / TABLE BASE RESET
   ========================================================================== */
body .afaq-app img,
body .afaq-app svg,
body .afaq-app video {
    max-width: 100%;
    height: auto;
}

body .afaq-app table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
   08) FORM BASE RESET ONLY
   Detailed form design goes to afaq-components.css
   ========================================================================== */
body .afaq-app input,
body .afaq-app textarea,
body .afaq-app select {
    max-width: 100%;
    outline: none !important;
    box-shadow: none;
}

body .afaq-app input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

/* ==========================================================================
   09) WORDPRESS / THEME CONTAINER BREAKOUT
   يجعل لوحة أفق تأخذ عرض الصفحة بدون قيود قالب ووردبريس
   ========================================================================== */
body .entry-content > .afaq-app,
body .wp-block-post-content > .afaq-app,
body .site-main .afaq-app,
body .content-area .afaq-app,
body .elementor-widget-container > .afaq-app,
body .elementor-shortcode > .afaq-app {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .entry-content:has(> .afaq-app),
body .wp-block-post-content:has(> .afaq-app) {
    max-width: none !important;
    width: 100% !important;
}

/* ==========================================================================
   10) ACCESSIBILITY / SELECTION
   ========================================================================== */
body .afaq-app ::selection {
    background: rgba(192, 140, 71, 0.24);
    color: var(--afaq-heading);
}

body .afaq-app [hidden] {
    display: none !important;
}

/* ==========================================================================
   11) MOBILE CORE
   ========================================================================== */
@media (max-width: 782px) {
    body .afaq-app {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* ==========================================================================
   12) PRINT CORE
   ========================================================================== */
@media print {
    body .afaq-app {
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
}