/*
|--------------------------------------------------------------------------
| AQARK R28-R23 Professional UI / UX
|--------------------------------------------------------------------------
| Presentation only.
| Existing AQARK logo artwork remains unchanged.
*/

/* =====================================================================
   TYPOGRAPHY SYSTEM
   ===================================================================== */

:root {
    --aq23-font-en:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --aq23-font-ar:
        "Segoe UI",
        Tahoma,
        Arial,
        "Noto Sans Arabic",
        sans-serif;

    --aq23-navy: #141a4f;
    --aq23-navy-2: #20266b;

    --aq23-text: #141b2d;
    --aq23-muted: #657084;
    --aq23-soft: #f7f9fc;
    --aq23-border: #e4e8ef;

    --aq23-radius: 12px;
    --aq23-radius-lg: 18px;
}

/* English */
html:not([dir="rtl"]) body.aq-ui {
    font-family: var(--aq23-font-en);
}

/* Arabic */
html[dir="rtl"] body.aq-ui {
    font-family: var(--aq23-font-ar);
}

/* Public base */
body[data-aqark-reference-layout="public"] {
    font-size: 16px;
}

/* Operational interfaces require readable density */
body[data-aqark-reference-layout="dashboard"],
body[data-aqark-reference-layout="admin"] {
    font-size: 14.5px;
    line-height: 1.55;
}

html[dir="rtl"]
body[data-aqark-reference-layout="dashboard"],

html[dir="rtl"]
body[data-aqark-reference-layout="admin"] {
    font-size: 15px;
    line-height: 1.65;
}

/* Page titles */
body.aq-ui main h1 {
    font-size: clamp(28px, 2.4vw, 36px);
    line-height: 1.17;
    font-weight: 750;
}

body.aq-ui main h2 {
    font-size: clamp(21px, 1.8vw, 27px);
    line-height: 1.25;
    font-weight: 720;
}

body.aq-ui main h3 {
    font-size: 18px;
    line-height: 1.32;
    font-weight: 700;
}

html[dir="rtl"] body.aq-ui main h1,
html[dir="rtl"] body.aq-ui main h2,
html[dir="rtl"] body.aq-ui main h3 {
    letter-spacing: 0 !important;
}

/* Labels and secondary copy */
body.aq-ui label {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

html[dir="rtl"] body.aq-ui label {
    font-size: 13.5px;
}

body.aq-ui small,
body.aq-ui [class*="text-xs"] {
    line-height: 1.45;
}


/* =====================================================================
   BUTTON SYSTEM
   ===================================================================== */

body.aq-ui button,
body.aq-ui
a[class*="px-"][class*="py-"] {
    min-height: 40px;

    padding-inline: 16px;

    border-radius: 10px;

    font-size: 13.5px;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background-color .16s ease,
        border-color .16s ease;
}

html[dir="rtl"] body.aq-ui button,
html[dir="rtl"]
body.aq-ui a[class*="px-"][class*="py-"] {
    font-size: 14px;
}

body.aq-ui button:hover,
body.aq-ui
a[class*="px-"][class*="py-"]:hover {
    transform: translateY(-1px);
}

/* Do not let tiny utility controls become huge */
body.aq-ui button[class*="w-8"],
body.aq-ui button[class*="w-9"],
body.aq-ui button[class*="h-8"],
body.aq-ui button[class*="h-9"] {
    min-height: unset;
    padding-inline: unset;
}


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

body.aq-ui input,
body.aq-ui select,
body.aq-ui textarea {
    font-size: 14px;
    color: var(--aq23-text);
}

body.aq-ui input,
body.aq-ui select {
    min-height: 42px;
}

html[dir="rtl"] body.aq-ui input,
html[dir="rtl"] body.aq-ui select,
html[dir="rtl"] body.aq-ui textarea {
    font-size: 14.5px;
}


/* =====================================================================
   PUBLIC WEBSITE HEADER
   ===================================================================== */

body[data-aqark-reference-layout="public"]
header {
    min-height: 68px !important;
}

body[data-aqark-reference-layout="public"]
header nav {
    min-height: 68px !important;
}

body[data-aqark-reference-layout="public"]
header nav a {
    font-size: 13.5px;
    font-weight: 600;
}


/* =====================================================================
   PUBLIC HERO
   ===================================================================== */

body[data-aqark-reference-layout="public"]
main > section:first-of-type h1 {
    max-width: 820px;

    font-size:
        clamp(38px, 4.7vw, 60px);

    line-height: 1.04;
}

body[data-aqark-reference-layout="public"]
main > section:first-of-type p {
    max-width: 700px;

    font-size:
        clamp(16px, 1.35vw, 18px);

    line-height: 1.65;
}


/* =====================================================================
   DASHBOARD / ADMIN PAGE HEIGHT
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"],
body[data-aqark-reference-layout="admin"] {
    min-height: 100vh;

    overflow-x: hidden;
}

/*
 * Marketing footer makes internal operational screens unnecessarily tall.
 * Keep the footer on public pages only.
 */
body[data-aqark-reference-layout="dashboard"]
> footer,

body[data-aqark-reference-layout="admin"]
> footer {
    display: none !important;
}

/* If footer is inside another wrapper */
body[data-aqark-reference-layout="dashboard"]
footer,

body[data-aqark-reference-layout="admin"]
footer {
    display: none !important;
}


/* =====================================================================
   DASHBOARD / ADMIN HEADER
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"]
> header,

body[data-aqark-reference-layout="admin"]
> header {
    min-height: 62px !important;

    padding-block: 8px !important;

    background: #fff !important;

    color: var(--aq23-text) !important;
}

body[data-aqark-reference-layout="dashboard"]
> header a,

body[data-aqark-reference-layout="admin"]
> header a {
    font-size: 13.5px;
}


/* =====================================================================
   ADMIN / DASHBOARD SIDEBAR
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"]
aside,

body[data-aqark-reference-layout="admin"]
aside {
    position: sticky;

    top: 78px;

    align-self: flex-start;

    max-height:
        calc(100vh - 96px);

    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;

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

    border-radius:
        14px;
}

body[data-aqark-reference-layout="dashboard"]
aside nav,

body[data-aqark-reference-layout="admin"]
aside nav {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

body[data-aqark-reference-layout="dashboard"]
aside nav a,

body[data-aqark-reference-layout="admin"]
aside nav a {
    min-height: 38px;

    padding-block: 8px;
    padding-inline: 11px;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;
}

html[dir="rtl"]
body[data-aqark-reference-layout="admin"]
aside nav a {
    font-size: 13.5px;
}

/* Section/group labels */
body[data-aqark-reference-layout="dashboard"]
aside [class*="text-xs"],

body[data-aqark-reference-layout="admin"]
aside [class*="text-xs"] {
    margin-top: 10px;

    font-size: 10.5px;

    line-height: 1.35;

    color: #98a2b3;
}


/* =====================================================================
   ADMIN / DASHBOARD CONTENT WIDTH & SPACING
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"]
main,

body[data-aqark-reference-layout="admin"]
main {
    padding-bottom: 44px;
}

body[data-aqark-reference-layout="dashboard"]
main > [class*="max-w-"],

body[data-aqark-reference-layout="admin"]
main > [class*="max-w-"] {
    max-width: 1480px !important;
}

body[data-aqark-reference-layout="dashboard"]
main section + section,

body[data-aqark-reference-layout="admin"]
main section + section {
    margin-top: 24px;
}


/* =====================================================================
   DASHBOARD / ADMIN CARDS
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"]
main [class*="rounded-xl"],

body[data-aqark-reference-layout="dashboard"]
main [class*="rounded-2xl"],

body[data-aqark-reference-layout="admin"]
main [class*="rounded-xl"],

body[data-aqark-reference-layout="admin"]
main [class*="rounded-2xl"] {
    border-radius: 14px;

    box-shadow:
        0 1px 2px rgba(16,24,40,.025);
}

/* Prevent oversized empty cards */
body[data-aqark-reference-layout="dashboard"]
main [class*="min-h-"],

body[data-aqark-reference-layout="admin"]
main [class*="min-h-"] {
    min-height: auto;
}


/* =====================================================================
   KPI CARDS
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"]
main [class*="grid"]
> [class*="bg-white"],

body[data-aqark-reference-layout="admin"]
main [class*="grid"]
> [class*="bg-white"] {
    padding: clamp(16px, 1.8vw, 22px);
}

body[data-aqark-reference-layout="dashboard"]
main [class*="grid"]
> [class*="bg-white"]
[class*="text-2xl"],

body[data-aqark-reference-layout="admin"]
main [class*="grid"]
> [class*="bg-white"]
[class*="text-2xl"] {
    font-size: 27px;
    line-height: 1.1;
}


/* =====================================================================
   TABLES
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"]
table,

body[data-aqark-reference-layout="admin"]
table {
    font-size: 13px;
}

html[dir="rtl"]
body[data-aqark-reference-layout="dashboard"]
table,

html[dir="rtl"]
body[data-aqark-reference-layout="admin"]
table {
    font-size: 13.5px;
}

body[data-aqark-reference-layout="dashboard"]
th,

body[data-aqark-reference-layout="admin"]
th {
    padding:
        11px 13px;

    font-size: 11.5px;

    line-height: 1.35;
}

body[data-aqark-reference-layout="dashboard"]
td,

body[data-aqark-reference-layout="admin"]
td {
    padding:
        11px 13px;

    vertical-align: middle;
}


/* =====================================================================
   OPERATIONAL STATUS CHIPS
   ===================================================================== */

body[data-aqark-reference-layout="dashboard"]
[class*="rounded-full"],

body[data-aqark-reference-layout="admin"]
[class*="rounded-full"] {
    font-size: 11.5px;
    line-height: 1.25;
}


/* =====================================================================
   CMS STUDIO TOP TABS
   ===================================================================== */

body[data-aqark-reference-layout="admin"]
main [class*="bg-[#212356]"],

body[data-aqark-reference-layout="admin"]
main [class*="bg-[#141"],

body[data-aqark-reference-layout="admin"]
main [class*="bg-[#1"] {
    border-radius: 16px;
}


/* =====================================================================
   MOBILE – GLOBAL OVERFLOW FIX
   ===================================================================== */

@media (max-width: 900px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.aq-ui *,
    body.aq-ui *::before,
    body.aq-ui *::after {
        box-sizing: border-box;
    }

    body[data-aqark-reference-layout="dashboard"],
    body[data-aqark-reference-layout="admin"] {
        width: 100%;
        max-width: 100vw;
    }

    body[data-aqark-reference-layout="dashboard"]
    main,

    body[data-aqark-reference-layout="admin"]
    main {
        width: 100%;
        max-width: 100vw;

        overflow-x: hidden;
    }


    /* ---------------------------------------------------------
       Mobile header
       --------------------------------------------------------- */

    body[data-aqark-reference-layout="dashboard"]
    > header,

    body[data-aqark-reference-layout="admin"]
    > header {
        min-height: 64px !important;

        padding:
            8px 14px !important;
    }

    body[data-aqark-reference-layout="dashboard"]
    > header > *,

    body[data-aqark-reference-layout="admin"]
    > header > * {
        max-width: 100%;
    }


    /*
     * Any absolute menu/dropdown is constrained to viewport.
     * This addresses the menu overflow visible in the screenshots.
     */
    body[data-aqark-reference-layout="dashboard"]
    header [class*="absolute"],

    body[data-aqark-reference-layout="admin"]
    header [class*="absolute"] {
        width:
            min(
                320px,
                calc(100vw - 24px)
            ) !important;

        max-width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100vh - 84px);

        inset-inline-end:
            12px !important;

        inset-inline-start:
            auto !important;

        overflow-y: auto;
        overflow-x: hidden;

        border-radius: 14px;

        box-shadow:
            0 18px 50px
            rgba(16,24,40,.16);
    }


    /* ---------------------------------------------------------
       Sidebar
       --------------------------------------------------------- */

    body[data-aqark-reference-layout="dashboard"]
    aside,

    body[data-aqark-reference-layout="admin"]
    aside {
        position: relative;

        top: auto;

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

        max-height: none;

        margin-bottom: 18px;

        overflow: visible;
    }


    /* ---------------------------------------------------------
       Content cards
       --------------------------------------------------------- */

    body[data-aqark-reference-layout="dashboard"]
    main > [class*="max-w-"],

    body[data-aqark-reference-layout="admin"]
    main > [class*="max-w-"] {
        width:
            calc(100% - 24px) !important;

        max-width:
            calc(100% - 24px) !important;

        margin-inline:
            auto !important;
    }


    /* ---------------------------------------------------------
       Buttons - touch target
       --------------------------------------------------------- */

    body.aq-ui button,
    body.aq-ui
    a[class*="px-"][class*="py-"] {
        min-height: 44px;

        font-size: 14px;
    }


    /* ---------------------------------------------------------
       Forms
       --------------------------------------------------------- */

    body.aq-ui input,
    body.aq-ui select {
        min-height: 46px;

        font-size: 16px;
    }


    /* ---------------------------------------------------------
       Tables stay usable instead of breaking viewport
       --------------------------------------------------------- */

    body[data-aqark-reference-layout="dashboard"]
    table,

    body[data-aqark-reference-layout="admin"]
    table {
        min-width: 680px;
    }

    body[data-aqark-reference-layout="dashboard"]
    main [class*="overflow"],

    body[data-aqark-reference-layout="admin"]
    main [class*="overflow"] {
        max-width: 100%;
    }
}


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

@media (max-width: 640px) {

    body[data-aqark-reference-layout="public"] {
        font-size: 15.5px;
    }

    body[data-aqark-reference-layout="dashboard"],
    body[data-aqark-reference-layout="admin"] {
        font-size: 14.5px;
    }

    html[dir="rtl"]
    body[data-aqark-reference-layout="dashboard"],

    html[dir="rtl"]
    body[data-aqark-reference-layout="admin"] {
        font-size: 15px;
    }

    body.aq-ui main h1 {
        font-size: 27px;
    }

    body.aq-ui main h2 {
        font-size: 21px;
    }

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type h1 {
        font-size:
            clamp(34px, 10vw, 46px);

        line-height: 1.04;
    }

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type p {
        font-size: 16px;
        line-height: 1.6;
    }

    /*
     * Stack hero/search fields cleanly.
     */
    body[data-aqark-reference-layout="public"]
    main > section:first-of-type form {
        width: 100%;
    }

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type input,

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type select,

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type button {
        width: 100%;
        min-height: 48px;
    }


    /*
     * CMS/admin dark tab bars become horizontal swipe rows,
     * not multi-line tall menus.
     */
    body[data-aqark-reference-layout="admin"]
    main nav,

    body[data-aqark-reference-layout="admin"]
    main [role="tablist"] {
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        flex-wrap: nowrap !important;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    body[data-aqark-reference-layout="admin"]
    main nav::-webkit-scrollbar,

    body[data-aqark-reference-layout="admin"]
    main [role="tablist"]::-webkit-scrollbar {
        display: none;
    }

    body[data-aqark-reference-layout="admin"]
    main nav a,

    body[data-aqark-reference-layout="admin"]
    main [role="tab"] {
        flex: 0 0 auto;

        white-space: nowrap;
    }
}


/* =====================================================================
   VERY SMALL DEVICES
   ===================================================================== */

@media (max-width: 420px) {

    body.aq-ui main h1 {
        font-size: 25px;
    }

    body[data-aqark-reference-layout="public"]
    main > section:first-of-type h1 {
        font-size: 36px;
    }

    body[data-aqark-reference-layout="dashboard"]
    main > [class*="max-w-"],

    body[data-aqark-reference-layout="admin"]
    main > [class*="max-w-"] {
        width:
            calc(100% - 18px) !important;

        max-width:
            calc(100% - 18px) !important;
    }
}


/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */

body.aq-ui
a:focus-visible,

body.aq-ui
button:focus-visible,

body.aq-ui
input:focus-visible,

body.aq-ui
select:focus-visible,

body.aq-ui
textarea:focus-visible {
    outline:
        2px solid
        #1677ff;

    outline-offset:
        2px;
}

@media (prefers-reduced-motion: reduce) {
    body.aq-ui *,
    body.aq-ui *::before,
    body.aq-ui *::after {
        transition-duration:
            .001ms !important;

        animation-duration:
            .001ms !important;
    }
}