/* Shared brand layer for login, landing, project, admin and public request screens. */
:root,
body.theme-spring,
body.theme-summer,
body.theme-autumn,
body.theme-winter {
    --color-primary: #6049b7;
    --color-primary-container: #e9e5ff;
    --color-on-primary: #ffffff;
    --color-surface: #ffffff;
    --color-surface-container: #f3f2f9;
    --brand-primary-strong: #4d3aa3;
    --brand-primary-soft: #f0edff;
    --brand-teal: #087f8c;
    --brand-teal-soft: #e1f5f4;
    --brand-cyan: #28aeb8;
    --brand-cyan-bright: #64d1d2;
    --brand-cyan-soft: #e2f8f7;
    --brand-coral: #db6756;
    --brand-coral-soft: #fff0ec;
    --brand-amber: #bd791b;
    --brand-amber-soft: #fff4dc;
    --brand-blue: #4269b2;
    --brand-blue-soft: #edf2ff;
    --brand-ink: #211d3b;
    --brand-muted: #77758d;
    --brand-line: #e8e6f1;
    --brand-canvas: #f5f4f8;
    --brand-shadow: 0 14px 38px rgba(45, 35, 103, .085), 0 2px 8px rgba(18, 120, 132, .035);
    --brand-shadow-raised: 0 22px 58px rgba(45, 35, 103, .16), 0 5px 15px rgba(18, 120, 132, .055);
    --bg-gradient: radial-gradient(circle at 86% 5%, rgba(181, 162, 246, .48), transparent 30rem),
                   radial-gradient(circle at 9% 74%, rgba(116, 211, 211, .3), transparent 33rem),
                   radial-gradient(circle at 82% 88%, rgba(255, 198, 163, .2), transparent 27rem),
                   var(--brand-canvas);
}

html { color-scheme: only light; }
html:not([data-ui-theme="liquid"]) body {
    color: var(--brand-ink, #211d3b);
    background: var(--bg-gradient) !important;
    background-attachment: fixed !important;
}

:where(#viewer-landing-view, #dashboard-view, #admin-view) {
    background-color: transparent !important;
}

/* Shared surfaces keep their original geometry while using one elevation scale. */
:where(.card, .module-card, .dashboard-draggable-module.glass-panel,
       .admin-accordion, .vl-project-card, .vl-editor-action-card,
       .editor-note-card, .public-request-card) {
    border-color: var(--brand-line) !important;
    box-shadow: var(--brand-shadow);
}

:where(.card, .module-card, .admin-accordion, .vl-project-card,
       .vl-editor-action-card, .editor-note-card, .public-request-card) {
    border-radius: 20px;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

:where(.card, .module-card, .admin-accordion, .vl-project-card,
       .vl-editor-action-card, .editor-note-card, .public-request-card):hover {
    border-color: color-mix(in srgb, var(--color-primary) 24%, white) !important;
}

/* Form controls share the soft lilac field treatment from the redesigned login. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
    border-color: var(--brand-line);
    color: var(--brand-ink);
    accent-color: var(--color-primary);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus {
    border-color: #8875d8 !important;
    box-shadow: 0 0 0 4px rgba(107, 84, 194, .11) !important;
    outline: 0;
}

:where(input, textarea, select)::placeholder { color: #a09db3; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

:where(button, a, input, textarea, select):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-cyan) 60%, white);
    outline-offset: 3px;
}

/* Shared navigation, account menus and notifications. */
:where(#vl-tabs-bar, [role="tablist"], .segmented-control) {
    border-color: var(--brand-line) !important;
}

#dashboard-header,
#viewer-landing-view > header,
#admin-view > header {
    background: linear-gradient(115deg, rgba(255,255,255,.97), rgba(250,249,255,.94)) !important;
    border-bottom: 1px solid rgba(96, 73, 183, .1);
    box-shadow: 0 8px 28px rgba(48, 39, 104, .07) !important;
}

#dashboard-header :where(button, #dashboard-project-pill),
#viewer-landing-view > header :where(button, a),
#admin-view > header :where(button, a) {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#dashboard-header > div > div:first-child > button,
#dashboard-header #notif-bell-btn,
#dashboard-header #profile-menu-btn,
#viewer-landing-view #vl-profile-menu-btn,
#admin-view #admin-profile-menu-btn {
    width: 42px;
    height: 42px;
    border-color: #e9e6f3 !important;
    background: rgba(255,255,255,.88) !important;
    color: #69647f !important;
}

#dashboard-header > div > div:first-child > button:hover,
#dashboard-header #notif-bell-btn:hover,
#dashboard-header #profile-menu-btn:hover,
#viewer-landing-view #vl-profile-menu-btn:hover,
#admin-view #admin-profile-menu-btn:hover {
    border-color: color-mix(in srgb, var(--color-primary) 25%, white) !important;
    background: var(--brand-primary-soft) !important;
    color: var(--brand-primary-strong) !important;
    box-shadow: 0 5px 13px rgba(76, 58, 148, .09);
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel,
       #notif-panel, #gallery-style-menu, #vl-project-actions-menu,
       .image-source-popover, [id$="-menu"]:not(.material-symbols-rounded)) {
    color: var(--brand-ink);
    border-color: var(--brand-line) !important;
    box-shadow: var(--brand-shadow-raised) !important;
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel,
       #notif-panel) :where(button, a):hover {
    background-color: var(--brand-primary-soft);
    color: var(--brand-primary-strong);
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) {
    padding: 7px;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #fff, #fbfaff) !important;
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) button {
    min-height: 46px;
    padding-inline: 12px;
    border-radius: 12px;
    color: #514d67 !important;
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) button > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 10px;
    background: #f1effb;
    color: var(--brand-primary-strong) !important;
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) .ui-theme-toggle {
    margin-block: 4px;
    padding-block: 8px;
    border-top: 1px solid #efedf6;
    border-bottom: 1px solid #efedf6;
}

#notif-panel {
    border-radius: 20px !important;
}

#notif-panel > div:first-child {
    border-color: var(--brand-line) !important;
    background: linear-gradient(120deg, #fbfaff, #f4fbfb);
}

#notif-panel .notif-tab-btn.bg-surface {
    background: #fff !important;
    color: var(--brand-primary-strong) !important;
    box-shadow: 0 2px 8px rgba(49, 39, 103, .1) !important;
}

#notif-list .notif-row {
    border-color: var(--brand-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 7px rgba(34, 28, 86, .035);
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) button:nth-of-type(3n + 1) > .material-symbols-rounded:not(.text-red-500),
#image-style-list > div:nth-child(4n + 1) > div:first-child > span:first-child {
    background: var(--brand-primary-soft) !important;
    color: var(--brand-primary-strong) !important;
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) button:nth-of-type(3n + 2) > .material-symbols-rounded:not(.text-red-500),
#image-style-list > div:nth-child(4n + 2) > div:first-child > span:first-child {
    background: var(--brand-teal-soft) !important;
    color: var(--brand-teal) !important;
}

:where(#vl-profile-menu-panel, #profile-menu-panel, #admin-profile-menu-panel) button:nth-of-type(3n) > .material-symbols-rounded:not(.text-red-500),
#image-style-list > div:nth-child(4n + 3) > div:first-child > span:first-child {
    background: var(--brand-coral-soft) !important;
    color: var(--brand-coral) !important;
}

#image-style-list > div:nth-child(4n) > div:first-child > span:first-child {
    background: var(--brand-amber-soft) !important;
    color: var(--brand-amber) !important;
}

#save-btn {
    min-height: 42px;
    border-color: #e5e1f1 !important;
    color: var(--brand-primary-strong);
}

#dashboard-project-pill {
    min-height: 40px;
    border-color: #e9e6f3 !important;
    background: rgba(255,255,255,.86) !important;
}

#dashboard-project-search-panel {
    margin-top: 8px;
    border-color: var(--brand-line) !important;
    box-shadow: var(--brand-shadow-raised) !important;
}

#admin-view .admin-accordion {
    border-radius: 19px;
    background: rgba(255,255,255,.94);
}

#admin-view .admin-acc-header {
    min-height: 64px;
    transition: background-color .18s ease;
}

#admin-view .admin-acc-header:hover {
    background: linear-gradient(90deg, rgba(233,229,255,.55), rgba(228,247,247,.4)) !important;
}

#admin-view .admin-acc-header h3 > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--brand-primary-soft);
}

/* Project modules use consistent toolbar styling while their data and
   success/warning colors remain meaningful inside the panels. */
#dashboard-view .module-header-sticky {
    border-color: var(--brand-line) !important;
    background-color: rgba(250, 249, 255, .88) !important;
}

/* A small, consistent color cue at each module header makes the dashboard
   easier to scan without tinting data cards or changing status colors. */
#module-calendar .module-header-sticky { background: linear-gradient(105deg, rgba(8,127,140,.15), rgba(40,174,184,.045)) !important; box-shadow: inset 3px 0 0 #168f98; }
#module-financial .module-header-sticky,
#module-invoice .module-header-sticky { background: linear-gradient(105deg, rgba(66,105,178,.14), rgba(115,145,211,.045)) !important; box-shadow: inset 3px 0 0 #4269b2; }
#module-kanban .module-header-sticky { background: linear-gradient(105deg, rgba(189,121,27,.16), rgba(240,180,73,.05)) !important; box-shadow: inset 3px 0 0 #bd791b; }
#module-gallery .module-header-sticky { background: linear-gradient(105deg, rgba(219,103,86,.14), rgba(244,150,128,.045)) !important; box-shadow: inset 3px 0 0 #db6756; }
#module-documents .module-header-sticky,
#module-slider .module-header-sticky { background: linear-gradient(105deg, rgba(8,127,140,.13), rgba(100,209,210,.06)) !important; box-shadow: inset 3px 0 0 #087f8c; }
#module-report .module-header-sticky { background: linear-gradient(105deg, rgba(163,78,131,.14), rgba(218,134,183,.05)) !important; box-shadow: inset 3px 0 0 #a34e83; }
#module-wbs .module-header-sticky,
#module-info .module-header-sticky { background: linear-gradient(105deg, rgba(96,73,183,.14), rgba(151,132,229,.05)) !important; box-shadow: inset 3px 0 0 #6049b7; }

#dashboard-view :where(#module-slider h3 > .material-symbols-rounded,
    #module-financial h3 > .material-symbols-rounded,
    #module-wbs h3 > .material-symbols-rounded,
    #module-gallery h3 > .material-symbols-rounded,
    #module-documents h3 > .material-symbols-rounded,
    #module-invoice h3 > .material-symbols-rounded,
    #module-report h3 > .material-symbols-rounded,
    #module-kanban h3 > .material-symbols-rounded,
    #module-calendar .calendar-module-topbar .material-symbols-rounded) {
    display: inline-grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: none;
    border-radius: 10px;
}

#module-slider h3 > .material-symbols-rounded,
#module-documents h3 > .material-symbols-rounded { color: #fff !important; background: linear-gradient(145deg, #087f8c, #28aeb8); box-shadow: 0 4px 10px rgba(8,127,140,.22); }
#module-financial h3 > .material-symbols-rounded,
#module-invoice h3 > .material-symbols-rounded { color: #fff !important; background: linear-gradient(145deg, #3659a4, #6388d2); box-shadow: 0 4px 10px rgba(66,105,178,.2); }
#module-wbs h3 > .material-symbols-rounded { color: #fff !important; background: linear-gradient(145deg, #4d3aa3, #8066d1); box-shadow: 0 4px 10px rgba(77,58,163,.2); }
#module-gallery h3 > .material-symbols-rounded { color: #fff !important; background: linear-gradient(145deg, #cb564b, #eb806b); box-shadow: 0 4px 10px rgba(219,103,86,.2); }
#module-report h3 > .material-symbols-rounded { color: #fff !important; background: linear-gradient(145deg, #984170, #c5669c); box-shadow: 0 4px 10px rgba(163,78,131,.2); }
#module-kanban h3 > .material-symbols-rounded { color: #fff !important; background: linear-gradient(145deg, #a96512, #d29327); box-shadow: 0 4px 10px rgba(189,121,27,.22); }
#module-calendar .calendar-module-topbar .material-symbols-rounded { color: #fff !important; background: linear-gradient(145deg, #087f8c, #28aeb8); box-shadow: 0 4px 10px rgba(8,127,140,.22); }

#dashboard-view .module-header-actions > button,
#dashboard-view .module-header-actions > .relative > button {
    min-width: 34px;
    min-height: 34px;
    border: 1px solid rgba(232, 230, 241, .9);
    border-radius: 11px;
    box-shadow: 0 1px 3px rgba(34, 28, 86, .035);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#dashboard-view .module-header-actions > button:hover,
#dashboard-view .module-header-actions > .relative > button:hover {
    border-color: color-mix(in srgb, var(--color-primary) 24%, white);
    background-color: var(--brand-primary-soft) !important;
    box-shadow: 0 4px 10px rgba(76, 58, 148, .08);
    transform: translateY(-1px);
}

#dashboard-view [id$="-export-menu"],
#dashboard-view #gallery-sort-menu,
#dashboard-view #material-sort-menu {
    padding: 5px;
    border-color: var(--brand-line) !important;
    border-radius: 15px !important;
    background: #fff !important;
}

#dashboard-view [id$="-export-menu"] button,
#dashboard-view #gallery-sort-menu button,
#dashboard-view #material-sort-menu button {
    min-height: 39px;
    border-radius: 10px;
    transition: background-color .16s ease, color .16s ease;
}

#dashboard-view [id$="-export-menu"] button:hover,
#dashboard-view #gallery-sort-menu button:hover,
#dashboard-view #material-sort-menu button:hover {
    background: var(--brand-primary-soft) !important;
}

/* Dialogs and confirmation surfaces use the same quiet violet scrim and focus. */
.modal-overlay {
    background: rgba(33, 29, 59, .44);
    -webkit-backdrop-filter: blur(9px) saturate(112%);
    backdrop-filter: blur(9px) saturate(112%);
}

html[data-ui-theme="liquid"] .modal-overlay {
    background: rgba(33, 29, 59, .42) !important;
}

.modal-overlay:not(#modal-gallery-lightbox):not(#modal-slider-player):not(#modal-slider) > :first-child {
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 26px 76px rgba(25, 21, 58, .2), 0 3px 12px rgba(25, 21, 58, .07);
}

#notif-dim-backdrop.active { background: rgba(44, 36, 88, .16); }

/* Account settings are grouped into a compact profile section and a distinct
   sign-in section so optional credential fields no longer read as one long form. */
#modal-my-account .account-card {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 25px;
    background: #fff;
}

.account-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--brand-line);
    background: radial-gradient(circle at 88% 0, rgba(151, 132, 229, .17), transparent 40%), linear-gradient(140deg, #fbfaff, #f4f1ff);
}

.account-modal-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
.account-modal-title > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid rgba(96, 73, 183, .12);
    border-radius: 15px;
    background: white;
    color: var(--color-primary);
    box-shadow: 0 7px 18px rgba(58, 42, 124, .09);
    font-size: 23px;
}
.account-modal-title h3 { margin: 0; color: var(--brand-ink); font-size: 16px; font-weight: 900; }
.account-modal-title p { margin: 4px 0 0; color: var(--brand-muted); font-size: 10px; line-height: 1.6; }
.account-modal-close { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--brand-line); border-radius: 11px; background: rgba(255,255,255,.78); color: var(--brand-muted); }
.account-modal-close:hover { color: var(--brand-primary-strong); background: white; }
.account-modal-close .material-symbols-rounded { font-size: 18px; }
.account-form { display: grid; gap: 15px; padding: 18px 22px 20px; }
.account-profile-row { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid #efedf6; border-radius: 17px; background: linear-gradient(110deg, #faf9ff, #f4fbfb); }
.account-avatar-wrap { width: 64px; height: 64px; flex: none; }
.account-avatar-wrap > img, .account-avatar-wrap > div { width: 64px; height: 64px; border: 1px solid #e4e0f2; }
.account-avatar-wrap > div { background: #eeeafa; color: var(--color-primary); }
.account-avatar-wrap > div .material-symbols-rounded { font-size: 31px; }
.account-avatar-edit { position: absolute; left: -2px; bottom: -2px; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid white; border-radius: 10px; background: var(--color-primary); color: white; box-shadow: 0 4px 12px rgba(77, 58, 163, .23); }
.account-avatar-edit .material-symbols-rounded { font-size: 15px; }
.account-profile-copy { display: grid; gap: 4px; }
.account-profile-copy strong { color: #38344f; font-size: 11px; font-weight: 900; }
.account-profile-copy span { color: var(--brand-muted); font-size: 9px; line-height: 1.7; }
.account-form-section { padding: 15px; border: 1px solid #efedf6; border-radius: 17px; background: #fff; }
.account-section-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.account-section-heading > .material-symbols-rounded { color: var(--color-primary); font-size: 18px; }
.account-section-heading h4 { margin: 0; color: #38344f; font-size: 11px; font-weight: 900; }
.account-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.account-field { display: grid; gap: 6px; min-width: 0; color: #55516a; font-size: 10px; font-weight: 800; }
.account-field small { margin-inline-start: 4px; color: #9b97ab; font-size: 9px; font-weight: 500; }
.account-field input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #e8e6f1; border-radius: 11px; background: #fafafe; font-size: 11px; }
.account-field input::placeholder { color: #aaa6bb; }
.account-field-wide { grid-column: 1 / -1; }
#my-account-error:not(.hidden) { margin: 0; padding: 9px 11px; border: 1px solid #ffd9df; border-radius: 10px; background: #fff4f5; }
.account-form-actions { display: flex; justify-content: flex-end; gap: 9px; }
.account-cancel, .account-save { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 17px; border-radius: 12px; font-size: 11px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.account-cancel { border: 1px solid var(--brand-line); background: white; color: #77758d; }
.account-cancel:hover { background: #f8f7fc; color: var(--brand-ink); }
.account-save { min-width: 155px; background: linear-gradient(105deg, var(--brand-primary-strong), #735bc5); color: white; box-shadow: 0 9px 19px rgba(88, 64, 170, .17); }
.account-save:hover { transform: translateY(-1px); box-shadow: 0 13px 23px rgba(88, 64, 170, .23); }
.account-save .material-symbols-rounded { font-size: 17px; }
.account-reset-row { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 16px 16px; border-top: 1px solid #f0eef5; color: #918ca2; font-size: 10px; }
.account-reset-row > .material-symbols-rounded { color: var(--brand-cyan); font-size: 17px; }
.account-reset-row button { color: #7165a7; font-size: 10px; font-weight: 700; }
.account-reset-row button:hover { color: var(--brand-primary-strong); text-decoration: underline; }

/* Project display preferences become a two-column panel instead of a narrow
   stack, with each module and its pin control presented as one selectable card. */
#modal-global-settings .settings-modal-card {
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .9);
    padding: 22px;
}
.settings-modal-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 0 1px 17px; border-bottom: 1px solid var(--brand-line); }
.settings-modal-heading > .material-symbols-rounded { display: grid; place-items: center; width: 45px; height: 45px; flex: none; border-radius: 15px; background: var(--brand-primary-soft); color: var(--color-primary); font-size: 23px; }
.settings-modal-heading h3 { margin: 0; color: var(--brand-ink); font-size: 15px; font-weight: 900; }
.settings-modal-heading p { margin: 4px 0 0; color: var(--brand-muted); font-size: 10px; line-height: 1.7; }
#settings-modules-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
#settings-modules-list > * + * { margin-top: 0 !important; }
#settings-modules-list .settings-module-row { min-height: 53px; padding: 8px 10px; border: 1px solid #efedf6; border-radius: 13px; background: #fcfbff; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
#settings-modules-list .settings-module-row:hover { border-color: color-mix(in srgb, var(--color-primary) 24%, white); background: #f8f6ff; transform: translateY(-1px); }
#settings-modules-list .settings-module-row label { color: #504b66; font-size: 10px; font-weight: 700; }
#settings-modules-list .pin-toggle-btn { width: 30px; height: 30px; opacity: .52; border-radius: 9px; }
#settings-modules-list .settings-module-row:hover .pin-toggle-btn,
#settings-modules-list .pin-toggle-btn.is-pinned { opacity: 1 !important; }
.settings-modal-actions { position: sticky; bottom: -22px; display: flex; justify-content: flex-end; gap: 9px; margin: 18px -22px -22px; padding: 13px 22px; border-top: 1px solid var(--brand-line); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.settings-cancel, .settings-apply { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 11px; font-size: 10px; font-weight: 800; }
.settings-cancel { border: 1px solid var(--brand-line); color: var(--brand-muted); }
.settings-cancel:hover { background: #f8f7fc; color: var(--brand-ink); }
.settings-apply { min-width: 145px; background: linear-gradient(105deg, var(--brand-primary-strong), #735bc5); color: white; box-shadow: 0 8px 17px rgba(88, 64, 170, .17); }
.settings-apply .material-symbols-rounded { font-size: 16px; }

/* Export triggers are utility actions, so bring their old green treatment into
   the brand palette while leaving green success and approval states intact. */
#dashboard-view button[title*="خروجی"],
#viewer-landing-view button[title*="خروجی"] {
    border-color: color-mix(in srgb, var(--color-primary) 17%, white) !important;
    background-color: var(--brand-primary-soft) !important;
    color: var(--brand-primary-strong) !important;
}

#dashboard-view button[title*="خروجی"]:hover,
#viewer-landing-view button[title*="خروجی"]:hover {
    border-color: color-mix(in srgb, var(--color-primary) 31%, white) !important;
    background-color: color-mix(in srgb, var(--color-primary) 11%, white) !important;
}

button.bg-primary,
a.bg-primary {
    background-image: linear-gradient(112deg, #4d3aa3 0%, #7053c5 67%, #347f96 100%) !important;
    box-shadow: 0 9px 20px rgba(77, 58, 163, .2), 0 3px 9px rgba(8, 127, 140, .08);
}

button.bg-primary:hover,
a.bg-primary:hover {
    filter: saturate(1.12) brightness(1.04);
}

.vl-landing-upload-trigger { border-color: color-mix(in srgb, var(--color-primary) 18%, white); }
.vl-editor-action-card:hover { border-color: color-mix(in srgb, var(--color-primary) 34%, white) !important; }
.vl-upload-ring { background: color-mix(in srgb, var(--color-primary) 9%, white); }
.vl-upload-ring::before { background: conic-gradient(var(--color-primary) var(--vl-upload-progress), color-mix(in srgb, var(--color-primary) 14%, white) 0); }
.vl-landing-upload-progress-track { background: color-mix(in srgb, var(--color-primary) 12%, white); }
.vl-landing-upload-progress-fill { background: linear-gradient(90deg, var(--color-primary), var(--brand-cyan-bright)); }

:where(.image-source-option:hover, .image-source-option:focus-visible,
       .editor-note-project-option:hover, .editor-note-project-option:focus-visible) {
    background: var(--brand-primary-soft) !important;
    border-color: color-mix(in srgb, var(--color-primary) 20%, white) !important;
}

#module-info :where(.info-control-button:hover, > .module-header-actions > .module-mobile-menu-wrap > button:hover) {
    border-color: color-mix(in srgb, var(--color-primary) 28%, white) !important;
}

.kb-task.is-pinned { border-color: color-mix(in srgb, var(--color-primary) 55%, white) !important; box-shadow: inset 3px 0 0 var(--color-primary), 0 2px 8px rgba(34, 28, 86, .08); }
.pin-toggle-btn.is-pinned { color: var(--brand-primary-strong) !important; background-color: var(--brand-primary-soft) !important; }
.gallery-upload-bar-head { color: var(--brand-primary-strong); }
.gallery-upload-bar-icon { color: var(--color-primary); }
.gallery-upload-bar-track { background: color-mix(in srgb, var(--color-primary) 16%, white); }
.gallery-upload-bar-fill { background: linear-gradient(90deg, var(--color-primary), var(--brand-cyan-bright)); }

/* Warehouse transfer surfaces retain their purpose-specific warmth, with teal
   replacing the unrelated forest-green shell and violet reserved for actions. */
#modal-material-transfer-hub.warehouse-transfer-theme .warehouse-transfer-shell,
#modal-hub-transfer-pick.warehouse-transfer-theme .warehouse-transfer-shell {
    background: #f7fafc !important;
    border-color: rgba(8, 127, 140, .2) !important;
    box-shadow: 0 28px 80px rgba(45, 35, 103, .28) !important;
}

#modal-material-transfer-hub.warehouse-transfer-theme .warehouse-transfer-header,
#modal-hub-transfer-pick.warehouse-transfer-theme .warehouse-transfer-header {
    background: radial-gradient(circle at 8% -20%, rgba(241, 174, 78, .28), transparent 34%),
                linear-gradient(125deg, #26305f 0%, #4d3aa3 48%, #087f8c 100%) !important;
}

#modal-material-transfer-hub.warehouse-transfer-theme #hub-mat-list,
#modal-hub-transfer-pick.warehouse-transfer-theme .warehouse-transfer-form {
    background: linear-gradient(150deg, #e9f8f7 0%, #f8f7ff 62%, #fff8f2 100%) !important;
}

#modal-hub-transfer-pick.warehouse-transfer-theme .warehouse-transfer-form label {
    color: var(--brand-teal) !important;
}

#modal-hub-transfer-pick.warehouse-transfer-theme #hub-transfer-submit {
    background: linear-gradient(112deg, #4d3aa3, #7053c5 67%, #347f96) !important;
    box-shadow: 0 10px 24px rgba(77, 58, 163, .22) !important;
}

#modal-vl-warehouse-detail > div > header,
#modal-vl-warehouse-material-detail > div > header {
    background: linear-gradient(118deg, #26305f 0%, #4d3aa3 52%, #087f8c 100%) !important;
}

#modal-vl-warehouse-detail :where([class*="bg-emerald-50"], [class*="bg-emerald-100"]),
#modal-vl-warehouse-material-detail :where([class*="bg-emerald-50"], [class*="bg-emerald-100"]) {
    background-color: var(--brand-teal-soft) !important;
}

#modal-vl-warehouse-detail :where([class*="text-emerald-700"], [class*="text-emerald-800"], [class*="text-emerald-900"]),
#modal-vl-warehouse-material-detail :where([class*="text-emerald-700"], [class*="text-emerald-800"], [class*="text-emerald-900"]) {
    color: var(--brand-teal) !important;
}

/* Tables and dense data areas stay quieter than the surrounding actions. */
:where(table, .table-container) { border-color: var(--brand-line); }
thead { background-color: #f3f1fb; }
tbody tr { border-color: rgba(64, 56, 107, .09); }
tbody tr:hover { background-color: rgba(233, 229, 255, .34); }

@media (max-width: 767px) {
    :where(.card, .module-card, .admin-accordion, .vl-project-card,
           .vl-editor-action-card, .editor-note-card, .public-request-card) {
        border-radius: 17px;
    }
}

@media (max-width: 560px) {
    #modal-my-account { padding: 10px; }
    #modal-my-account .account-card { max-height: calc(100dvh - 20px); border-radius: 21px; }
    .account-modal-header { padding: 17px 17px; }
    .account-form { gap: 11px; padding: 13px 14px 15px; }
    .account-profile-row { padding: 11px; }
    .account-form-section { padding: 12px; }
    .account-field-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .account-field-wide { grid-column: auto; }
    .account-form-actions > button { flex: 1; }
    #modal-global-settings .settings-modal-card { padding: 16px; border-radius: 21px; }
    #settings-modules-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .settings-modal-actions { bottom: -16px; margin: 15px -16px -16px; padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.card, .module-card, .admin-accordion, .vl-project-card,
           .vl-editor-action-card, .editor-note-card, .public-request-card) {
        transition-duration: .01ms !important;
    }
}