/* =========================================================
   AROMA ERP — SYSTEM HEADER
   Header layout and component styles only.
   Theme variables are defined in aroma-theme-tokens.css.
   ========================================================= */

/* =========================================================
   متغيرات الثيمات
========================================================= */

/* =========================================================
   AROMA ERP PREMIUM THEMES
   Original numeric engine: 0 to 9
========================================================= */

/* 0 — Executive Blue */
:root,


/* 1 — Midnight Dark */


/* 2 — Deep Ocean */


/* 3 — Forest Executive */


/* 4 — Premium Gold */


/* 5 — Burgundy */


/* 6 — Medical Cyan */


/* 7 — Royal Purple */


/* 8 — Graphite */


/* 9 — High Contrast Night */


/* =========================================================
   الهيدر
========================================================= */

.aroma-system-header {
    width: 100%;
    position: relative;
    z-index: 10000;

    color: var(--aroma-header-text);

    background:
        linear-gradient(
            135deg,
            var(--aroma-primary-dark),
            var(--aroma-secondary) 58%,
            var(--aroma-primary)
        );

    box-shadow:
        0 5px 22px var(--aroma-shadow);

    font-family:
        Cairo,
        Tahoma,
        Arial,
        sans-serif;

    transition:
        background .3s ease,
        box-shadow .3s ease;
}


.aroma-system-header-inner {
    width: 100%;
    min-height: 70px;

    padding: 9px 22px;

    display: flex;
    align-items: center;

    direction: rtl;
    gap: 10px;
}


/* مجموعة اليمين */

.aroma-header-right-zone {
    display: flex;
    align-items: center;

    direction: rtl;
    gap: 5px;

    flex-shrink: 0;
}


/* اسم النظام ناحية اليسار */

.aroma-brand {
    margin-inline-start: auto;

    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--aroma-header-text);

    font-size: 18px;
    font-weight: 800;

    white-space: nowrap;
}


.aroma-brand-icon {
    font-size: 23px;
}


/* =========================================================
   أزرار الهيدر
========================================================= */

.aroma-header-button,
.aroma-profile-button {
    min-height: 42px;

    padding: 5px 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: var(--aroma-header-text);

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

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

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


.aroma-header-button:hover,
.aroma-profile-button:hover {
    background: rgba(255,255,255,.20);
    border-color: rgba(255,255,255,.45);

    box-shadow:
        0 4px 14px rgba(0,0,0,.15);

    transform: translateY(-1px);
}


.aroma-button-icon {
    font-size: 17px;
}


.aroma-small-arrow {
    font-size: 9px;
    opacity: .80;
}


/* =========================================================
   حاويات القوائم
========================================================= */

.aroma-menu-holder {
    position: relative;
    display: inline-flex;
}


/* =========================================================
   القوائم المنسدلة
========================================================= */

.aroma-dropdown {
    display: none;

    position: absolute;

    top: calc(100% + 6px);
    right: 0;

    padding: 7px;

    color: var(--aroma-dropdown-text);

    background:
        linear-gradient(
            150deg,
            var(--aroma-primary-dark),
            var(--aroma-secondary)
        );

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

    border-radius: 11px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.30);

    z-index: 999999;
}


.aroma-dropdown::before {
    content: "";

    position: absolute;

    top: -9px;
    left: 0;
    right: 0;

    height: 9px;
}


.aroma-menu-holder.aroma-menu-open > .aroma-dropdown {
    display: block;
}


/* =========================================================
   قائمة النظام
========================================================= */

.aroma-system-dropdown {
    width: 285px;
    max-height: 70vh;
    overflow-y: auto;
}


.aroma-dropdown a,
.aroma-language-dropdown button {
    width: 100%;

    min-height: 39px;

    padding: 8px 11px;
    margin: 2px 0;

    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--aroma-dropdown-text) !important;
    background: transparent;

    border: none;
    border-radius: 7px;

    text-decoration: none !important;
    text-align: right;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.aroma-dropdown a:hover,
.aroma-language-dropdown button:hover {
    background: rgba(255,255,255,.18);
    transform: translateX(-2px);
}


/* =========================================================
   قائمة اللغة
========================================================= */

.aroma-language-dropdown {
    width: 170px;
}


.aroma-language-dropdown form {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   البروفايل والأسهم
========================================================= */

.aroma-profile-theme-cluster {
    display: inline-flex;
    align-items: center;

    direction: rtl;
    gap: 3px;
}


.aroma-profile-button {
    padding: 3px 7px;
}


.aroma-profile-image,
.aroma-profile-placeholder {
    width: 35px;
    height: 35px;

    border-radius: 50%;

    object-fit: cover;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--aroma-arrow-color);
    background: #ffffff;

    border:
        2px solid rgba(255,255,255,.85);

    box-shadow:
        0 0 9px rgba(255,255,255,.22);
}


.aroma-profile-name {
    max-width: 115px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* الأسهم */

.aroma-theme-arrow {
    width: 27px;
    height: 27px;

    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 27px;

    color: var(--aroma-arrow-color);
    background: var(--aroma-arrow-bg);

    border:
        2px solid var(--aroma-primary);

    border-radius: 50%;

    font-family:
        Arial,
        sans-serif;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 2px 7px rgba(0,0,0,.18);

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


.aroma-theme-arrow:hover {
    color: #ffffff;
    background: var(--aroma-primary);
    border-color: #ffffff;

    box-shadow:
        0 0 6px var(--aroma-primary),
        0 0 14px var(--aroma-primary),
        0 0 22px rgba(255,255,255,.45);

    transform: scale(1.13);
}


.aroma-theme-arrow:active {
    transform: scale(.90);
}


/* =========================================================
   قائمة المستخدم
========================================================= */

.aroma-profile-dropdown {
    width: 225px;
}


.aroma-profile-info {
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    color: var(--aroma-dropdown-text);

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

    margin-bottom: 4px;
}


.aroma-profile-large-image,
.aroma-profile-large-placeholder {
    width: 65px;
    height: 65px;

    border-radius: 50%;

    object-fit: cover;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--aroma-arrow-color);
    background: #ffffff;

    font-size: 28px;

    border:
        3px solid rgba(255,255,255,.80);
}


/* =========================================================
   تطبيق الثيم على الصفحة
========================================================= */

body {
    background: var(--aroma-page-bg) !important;
    color: var(--aroma-text) !important;

    transition:
        background-color .3s ease,
        color .3s ease;
}


.container,
main {
    color: var(--aroma-text);
}


.section,
.box,
.editor,
.login-box,
.card,
.product-card,
.price-card,
.stat-card,
.exchange-card,
.quick-card,
.financial-controls-section,
.dashboard-section {
    background: var(--aroma-card-bg) !important;
    color: var(--aroma-text) !important;

    border-color: var(--aroma-border) !important;

    box-shadow:
        0 4px 16px var(--aroma-shadow) !important;

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.section h1,
.section h2,
.section h3,
.box h1,
.box h2,
.card h3,
.product-card h3,
.price-card h3,
.quick-card strong,
.stat-card strong {
    color: var(--aroma-heading) !important;
}


.section p,
.section small,
.quick-card small,
.stat-card span,
.product-info,
.last-update {
    color: var(--aroma-muted) !important;
}


table {
    background: var(--aroma-card-bg) !important;
    color: var(--aroma-text) !important;
}


th {
    background: var(--aroma-table-head) !important;
    color: var(--aroma-table-head-text) !important;
}


td,
th {
    border-color: var(--aroma-border) !important;
}


tbody tr:hover {
    background:
        color-mix(
            in srgb,
            var(--aroma-primary) 8%,
            var(--aroma-card-bg)
        ) !important;
}


input,
select,
textarea {
    color: var(--aroma-text) !important;
    background: var(--aroma-input-bg) !important;

    border-color: var(--aroma-border) !important;
}


input:focus,
select:focus,
textarea:focus {
    border-color: var(--aroma-primary) !important;

    box-shadow:
        0 0 0 3px var(--aroma-shadow) !important;
}


.button-blue,
.button-primary,
.section-link,
.admin-link {
    background: var(--aroma-primary) !important;
    color: #ffffff !important;
}


.rate-box {
    color: var(--aroma-text) !important;

    background:
        color-mix(
            in srgb,
            var(--aroma-primary) 10%,
            var(--aroma-card-bg)
        ) !important;

    border-color: var(--aroma-border) !important;
}


/* الداكن */

html[data-aroma-theme="1"] .quick-card,
html[data-aroma-theme="1"] .stat-card,
html[data-aroma-theme="1"] .product-card,
html[data-aroma-theme="1"] .exchange-card {
    color: var(--aroma-text) !important;
}


html[data-aroma-theme="1"] option {
    color: #ffffff;
    background: #334155;
}


/* =========================================================
   الموبايل
========================================================= */

@media (max-width: 850px) {

    .aroma-system-header-inner {
        padding: 9px 12px;
        flex-wrap: wrap;
    }


    .aroma-header-right-zone {
        width: 100%;
        flex-wrap: wrap;
    }


    .aroma-brand {
        width: 100%;
        margin-inline-start: 0;

        justify-content: center;

        font-size: 16px;

        order: -1;
    }


    .aroma-header-button {
        min-height: 39px;
        padding: 4px 8px;
        font-size: 12px;
    }


    .aroma-profile-name {
        display: none;
    }


    .aroma-theme-arrow {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }


    .aroma-system-dropdown {
        width: 255px;
    }

}



/* AROMA PREMIUM HEADER POLISH */

.aroma-system-header {
    isolation: isolate;
    border-bottom: 1px solid var(--aroma-header-border);
    box-shadow: 0 8px 26px var(--aroma-shadow);
    overflow: visible;
}

.aroma-system-header-inner {
    min-height: 72px;
    padding: 10px 22px;
}

.aroma-header-button,
.aroma-profile-button {
    background: var(--aroma-header-glass);
    border-color: var(--aroma-header-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.aroma-header-button:hover,
.aroma-profile-button:hover {
    background: var(--aroma-header-glass-hover);
    border-color: rgba(255,255,255,.48);
    box-shadow:
        0 8px 22px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.aroma-theme-arrow {
    width: 31px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--aroma-arrow-color);
    background: var(--aroma-arrow-bg);
    border: 1px solid var(--aroma-header-border);
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(0,0,0,.16);
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.aroma-theme-arrow:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
    filter: brightness(1.04);
}

.aroma-theme-arrow:active {
    transform: translateY(0) scale(.97);
}

html[data-aroma-theme="9"] .aroma-system-header {
    font-size: 17px;
}

html[data-aroma-theme="9"] .aroma-header-button,
html[data-aroma-theme="9"] .aroma-profile-button,
html[data-aroma-theme="9"] .aroma-theme-arrow,
html[data-aroma-theme="9"] .aroma-dropdown {
    border-width: 2px;
}

html[data-aroma-theme="9"] .aroma-dropdown a,
html[data-aroma-theme="9"] .aroma-dropdown button {
    font-size: 16px;
    font-weight: 800;
}

/* V1.8 header refinements */
.aroma-current-theme-name{display:none!important}.aroma-brand{text-decoration:none!important;color:inherit!important;cursor:pointer}.aroma-header-right-zone>.aroma-admin-entry{order:-1}.aroma-search-shortcut,.aroma-search-kbd,kbd{display:none!important}.aroma-global-search input,.aroma-search-box input,[data-aroma-search] input{min-width:220px;background:var(--aroma-header-glass,#fff1);border:1px solid var(--aroma-header-border,#ffffff33);border-radius:12px;padding:10px 13px}.aroma-brand:hover{filter:brightness(1.12)}@media(max-width:760px){.aroma-header-right-zone>.aroma-admin-entry span:last-child{display:none}.aroma-global-search input,.aroma-search-box input,[data-aroma-search] input{min-width:120px}}

.aroma-header-search-field{display:flex;align-items:center;gap:7px;min-width:250px;height:40px;padding:0 11px;border:1px solid var(--aroma-header-border,#ffffff33);border-radius:12px;background:var(--aroma-header-glass,#ffffff12)}.aroma-header-search-field input{width:100%;border:0!important;outline:0;background:transparent!important;color:inherit;padding:0!important;min-width:0!important}.aroma-header-search-field input::placeholder{color:transparent}@media(max-width:760px){.aroma-header-search-field{min-width:130px;max-width:180px}}

/* V1.8.1: visible search is a blank editable field, without shortcut text. */
#aroma-command-trigger.aroma-header-search-field{display:flex!important;align-items:center;gap:7px;min-width:230px;max-width:320px;height:40px;padding:0 11px!important;border:1px solid var(--aroma-header-border,#ffffff33)!important;border-radius:12px;background:var(--aroma-header-glass,#ffffff12)!important;cursor:text!important}#aroma-command-trigger .aroma-search-icon{flex:0 0 auto;opacity:.72}#aroma-command-trigger input{display:block!important;flex:1 1 auto;width:100%!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:inherit!important;padding:0!important;font:inherit!important}#aroma-command-trigger input::placeholder{color:transparent!important}.aroma-search-shortcut,.aroma-search-kbd,#aroma-command-trigger kbd,#aroma-command-trigger [class*="shortcut"]{display:none!important}@media(max-width:760px){#aroma-command-trigger.aroma-header-search-field{min-width:110px;max-width:165px}}

/* AROMA THEME CONTROLS RESTORE — 20260803 */
.aroma-profile-theme-cluster{display:flex!important;align-items:center!important;gap:7px!important;visibility:visible!important}
.aroma-theme-arrow{display:inline-flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important;flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;padding:0!important;font-size:24px!important;line-height:1!important}
.aroma-current-theme-name{display:none!important}
@media(max-width:760px){.aroma-theme-arrow{flex-basis:34px!important;width:34px!important;min-width:34px!important;height:34px!important}}