/* Bootstrap styles are loaded from CDN or local fallback. See _Host.cshtml for loading order. */

/* 
=================================================
EasyBooks - Shared Global Styles
=================================================
Page-specific styles moved to separate files:
- dashboard.css (Dashboard page)
- login.css (Login page)
- user-permissions.css (User permissions page)
- profile.css (Profile page)
- cost-centers-tree.css (Cost centers tree view)
=================================================
*/

/* ========== CSS Variables ========== */
:root {
    --primary: #0d6efd;
    --bg: #ffffff;
    --text: #212529;
    --muted: #6c757d;
}

.theme-dark {
    --bg: #0b1220;
    --text: #e6eef8;
    --muted: #b8c7d6;
}

/* ========== Global Body Styles ========== */
body {
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== Header Styles ========== */
.header-bar {
    background: linear-gradient(135deg, #5563d1 0%, #6a3f91 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-container {
    background: white;
    padding: 0.15rem;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.brand-title {
    color: white;
    font-size: 0.95rem;
    letter-spacing: -0.3px;
    margin-bottom: 0;
    font-weight: 700;
}

.brand-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.6rem;
    line-height: 1.2;
}

.time-display {
    background: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 0.75rem;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 0.3rem 0.7rem;
}

/* ========== Header Action Buttons ========== */
.btn-header-action {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-header-action:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.45);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.btn-home {
    background: white;
    color: #4a4fb7;
    border: none;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn-home:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #5a3678;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-home i,
.btn-header-action i {
    font-size: 1rem;
}

/* ========== Dropdown Menu ========== */
.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    display: none;
}

.custom-dropdown {
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 0.75rem;
    overflow: hidden;
    min-width: 220px;
}

.dropdown-header {
    background: linear-gradient(135deg, #5563d1 0%, #6a3f91 100%);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1rem;
}

.dropdown-item {
    padding: 0.7rem 1rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: #f8f9fa;
    padding-right: 1.25rem;
}

.dropdown-item.text-danger:hover {
    background: #fff5f5;
    color: #b02a37 !important;
}

.vr {
    opacity: 0.2;
}

/* ========== Main Layout ========== */
.main-layout-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.fixed-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    flex-shrink: 0;
}

.fixed-navigation {
    position: sticky;
    top: 0;
    z-index: 1040;
    flex-shrink: 0;
}

/* Ensure dropdown menus in navigation appear above all content */
.fixed-navigation .dropdown-menu {
    z-index: 1100 !important;
}

.scrollable-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f8f9fa;
    position: relative;
    z-index: 1;
}

.scrollable-content::-webkit-scrollbar {
    width: 10px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ========== Dark Theme ========== */
.dark-theme .scrollable-content {
    background-color: #1a1a2e;
}

.dark-theme .scrollable-content::-webkit-scrollbar-track {
    background: #16213e;
}

.dark-theme .scrollable-content::-webkit-scrollbar-thumb {
    background: #0f3460;
}

.dark-theme .scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #e94560;
}

/* ========== Module Cards (Shared) ========== */
.module-card {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    border-radius: .6rem;
}

.module-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.module-icon {
    font-size: 36px;
    color: var(--primary);
}

/* ========== Status Badges ========== */
.badge.bg-success {
    background-color: #198754 !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-primary {
    background-color: #0d6efd !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

/* ========== Footer ========== */
.footer {
    background: transparent;
    color: var(--muted);
    border-top: 1px solid rgba(0,0,0,0.04);
}

/* ========== Modal Improvements ========== */
.modal-content {
    border-radius: 0.5rem;
}

.modal-header {
    border-bottom: 1px solid #dee2e6;
}

.modal-footer {
    border-top: 1px solid #dee2e6;
}

/* ========== Balance Display ========== */
.balance-card {
    transition: all 0.3s ease;
}

.balance-card.success {
    border-color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

.balance-card.danger {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* ========== Action Buttons ========== */
.btn-group .btn {
    margin-left: 0.25rem;
}

.btn-group .btn:first-child {
    margin-left: 0;
}

/* ========== Browser Compatibility ========== */
/* Table header text alignment for Safari support */
th {
    text-align: -webkit-match-parent; /* Chrome 16+, Chrome Android 18+, Edge 79+ */
    text-align: match-parent; /* Safari 15.4+ and modern browsers */
}

/* Backdrop filter support for Safari */
.backdrop-filter {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ========== Index Page Gradient ========== */
.header-gradient {
    background: linear-gradient(135deg, #5563d1 0%, #6a3f91 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
    .brand-info {
        display: none !important;
    }

    .time-display {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem !important;
    }

    .d-md-inline {
        display: none !important;
    }

    .d-md-block {
        display: none !important;
    }

    .brand-subtitle {
        display: none !important;
    }

    .brand-title {
        font-size: 0.85rem;
    }

    .btn-header-action,
    .btn-home {
        padding: 0.4rem 0.5rem;
    }

    .logo-container {
        width: 32px;
        height: 32px;
    }

    .logo {
        width: 24px;
        height: 24px;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        margin-left: 0;
        margin-bottom: 0.25rem;
    }
}

/* ========== Sticky Header for Forms ========== */
.sticky-header {
    position: sticky;
    top: 70px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(10px); /* Safari 9+, Safari on iOS 9+ */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========== Dropdown Menu Z-Index Fix ========== */
.dropdown-menu,
select.form-control,
.select2-container--open,
.select2-dropdown,
.bootstrap-select .dropdown-menu,
.ui-autocomplete,
.ui-menu {
    z-index: 9999 !important;
}

/* ========== Header/Navbar Z-Index ========== */
header,
.navbar,
.top-bar,
.main-header,
.nav-menu {
    z-index: 100 !important;
}

/* ========== Top Menu Module Names ========== */
.top-menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-menu .container {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.top-menu .nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.top-menu .nav-item {
    flex: 0 0 auto;
}

.top-menu .nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    color: #4a4fb7;
    white-space: nowrap;
}

.top-menu .nav-link:hover {
    color: #6a3f91;
    background: rgba(106, 63, 145, 0.08);
    border-radius: 0.5rem;
}

.top-menu .nav-link i {
    margin-left: 0.4rem;
    font-size: 1.1rem;
}

/* ========== Party Selector (Cash Movements) ========== */
.party-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.party-selector .btn {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 1rem;
}

.party-selector .btn.active {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ========== Session Dialog Wide ========== */
.session-dialog-wide {
    max-width: 700px;
}

/* ========== Party Picker (Cash Movement Dialog) ========== */
.party-picker-wrapper {
    position: relative;
}

.party-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.party-display:hover {
    border-color: #0d6efd;
}

.party-display i:first-child {
    color: #6c757d;
}

.party-display span {
    flex: 1;
    color: #212529;
}

.party-display i:last-child {
    color: #6c757d;
    font-size: 0.75rem;
}

.party-search-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #0d6efd;
    border-radius: 0.375rem;
    background: #fff;
}

.party-search-container i {
    color: #6c757d;
}

.party-search-container input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
}

.btn-close-picker {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #6c757d;
}

.btn-close-picker:hover {
    color: #dc3545;
}

.party-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1050;
    margin-top: 0.25rem;
}

.party-picker-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.party-picker-item:hover {
    background: #f8f9fa;
}

.party-picker-item:last-child {
    border-bottom: none;
}

.party-code {
    font-size: 0.8rem;
    color: #6c757d;
    min-width: 60px;
}

.party-name {
    flex: 1;
    color: #212529;
}

.party-picker-empty {
    padding: 1rem;
    text-align: center;
    color: #6c757d;
}

/* ===================================================================
   الشريط العلوي الموحّد (سطر واحد): شعار + بحث عن شاشة + قوايم بلون لكل قسم + بياناتك
   =================================================================== */
.eb-bar { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: linear-gradient(90deg, #4338CA, #6D28D9); color: #fff; font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; box-shadow: 0 2px 10px rgba(49, 46, 129, .25); position: relative; z-index: 1060; }
.eb-logo { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #4338CA !important; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -.02em; text-decoration: none; flex: 0 0 auto; }
.eb-logo:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }

/* البحث */
.eb-find { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; width: 210px; flex: 0 0 auto; border-radius: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); padding: 0 10px; color: rgba(255, 255, 255, .85); }
.eb-find:focus-within { background: #fff; color: #4338CA; border-color: #fff; }
.eb-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; padding: 0; }
.eb-find input::placeholder { color: rgba(255, 255, 255, .78); }
.eb-find:focus-within input::placeholder { color: #8A8FA8; }
.eb-find kbd { font: 700 10.5px 'Cairo', sans-serif; background: rgba(255, 255, 255, .18); color: inherit; border-radius: 5px; padding: 1px 6px; direction: ltr; white-space: nowrap; box-shadow: none; }
.eb-find:focus-within kbd { background: #EEF2FF; }
.eb-palette { position: absolute; top: calc(100% + 8px); right: 0; width: 400px; max-width: 92vw; background: #fff; border: 1px solid #E4E6EF; border-radius: 14px; box-shadow: 0 20px 44px rgba(20, 22, 40, .25); padding: 6px; z-index: 1200; color: #1F2233; }
.eb-palette a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 9px; color: #1F2233; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.eb-palette a.on, .eb-palette a:hover { background: #EEF2FF; color: #3730A3; }
.eb-palette a .t { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 14px; }
.eb-palette a .x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-palette a small { color: #8A8FA8; font-size: 11.5px; white-space: nowrap; }
.eb-pempty { padding: 14px; text-align: center; color: #8A8FA8; font-size: 13px; }

/* القوايم */
.eb-nav { display: flex; align-items: stretch; justify-content: center; gap: 0; flex: 1; min-width: 0; align-self: stretch; }
.eb-m { position: relative; display: flex; align-items: stretch; }
.eb-mi { display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; border: 0; border-bottom: 3px solid transparent; border-top: 3px solid transparent; background: transparent; color: rgba(255, 255, 255, .88); font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.eb-mi .t { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 14px; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.eb-m:hover .eb-mi, .eb-m:focus-within .eb-mi { background: rgba(255, 255, 255, .1); color: #fff; }
.eb-m.on .eb-mi { color: #fff; border-bottom-color: #FCD34D; background: rgba(255, 255, 255, .08); }
.eb-mi:focus-visible { outline: 2px solid #FCD34D; outline-offset: -4px; }

/* المنسدلة: أعمدة مقسّمة */
.eb-drop { display: none; position: absolute; top: 100%; right: 0; z-index: 1150; background: #fff; border: 1px solid #E4E6EF; border-radius: 0 0 14px 14px; border-top: 3px solid var(--c); box-shadow: 0 18px 40px rgba(20, 22, 40, .22); padding: 8px 10px 10px; color: #1F2233; }
.eb-m:hover .eb-drop, .eb-m:focus-within .eb-drop { display: block; }
.eb-m:nth-last-child(-n+4) .eb-drop { right: auto; left: 0; }
.eb-dh { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; border-bottom: 1px solid #F0F1F6; margin-bottom: 6px; }
.eb-dh .t { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 17px; }
.eb-dh b { display: block; font-size: 14.5px; }
.eb-dh small { font-size: 11.5px; color: #646A80; }
.eb-cols { display: flex; gap: 12px; }
.eb-col { min-width: 175px; display: flex; flex-direction: column; }
.eb-col + .eb-col { border-inline-start: 1px solid #F0F1F6; padding-inline-start: 10px; }
.eb-col h6 { margin: 4px 8px 4px; font-size: 11px; font-weight: 800; color: #8A8FA8; letter-spacing: .02em; }
.eb-col a { display: block; padding: 6px 8px; border-radius: 8px; color: #1F2233; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.eb-col a:hover, .eb-col a:focus-visible { background: #EEF2FF; color: #3730A3; outline: 0; }
/* قايمة بعمود أقسام جانبي (3 أقسام وطالع) */
.eb-rw { display: grid; grid-template-columns: 186px minmax(0, 1fr); width: min(580px, calc(100vw - 32px)); min-height: 210px; margin: 0 -10px -10px; border-top: 1px solid #F0F1F6; }
.eb-rail { background: #F6F7FB; border-inline-end: 1px solid #ECEEF5; padding: 8px; display: flex; flex-direction: column; gap: 2px; border-radius: 0 0 0 0; }
.eb-rail button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: transparent; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; color: #1F2233; cursor: pointer; }
.eb-rail button i { color: #8A8FA8; width: 16px; text-align: center; }
.eb-rail button .x { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-rail button .cnt { font-size: 10.5px; font-weight: 800; color: #646A80; background: #fff; border: 1px solid #E4E6EF; border-radius: 999px; min-width: 20px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; }
.eb-rail button:hover { background: #fff; }
.eb-rail button.on { background: #fff; color: #3730A3; box-shadow: inset -3px 0 0 var(--c, #4F46E5), 0 1px 3px rgba(55, 48, 163, .06); }
.eb-rail button.on i { color: var(--c, #4F46E5); }
.eb-rail button:focus-visible { outline: 2px solid #4F46E5; outline-offset: 1px; }
.eb-pane { padding: 8px 10px 12px; min-width: 0; }
.eb-pane h6 { margin: 4px 8px 6px; font-size: 11px; font-weight: 800; color: #8A8FA8; letter-spacing: .02em; }
.eb-plinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 6px; }
.eb-plinks a { display: block; padding: 7px 9px; border-radius: 8px; color: #1F2233; text-decoration: none; font-size: 13px; font-weight: 600; }
.eb-plinks a:hover, .eb-plinks a:focus-visible { background: #EEF2FF; color: #3730A3; outline: 0; }
@media (max-width: 700px) {
    .eb-rw { grid-template-columns: minmax(0, 1fr); width: auto; }
    .eb-rail { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid #ECEEF5; }
    .eb-rail button { width: auto; }
    .eb-rail button.on { box-shadow: inset 0 -3px 0 var(--c, #4F46E5); }
}

/* بياناتك */
.eb-side { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.eb-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; background: rgba(255, 255, 255, .12); border: 0; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.eb-chip.eb-warn { background: #FEF3C7; color: #92400E; cursor: pointer; }
.eb-chip.eb-db .n { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.eb-avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #FDE68A; color: #4338CA; font: inherit; font-weight: 800; display: grid; place-items: center; cursor: pointer; padding: 0; }
.eb-avatar.dropdown-toggle::after { display: none; }
.eb-bar .dropdown-menu { z-index: 1200; }

/* شاشات أصغر */
@media (max-width: 1500px) { .eb-clock .d { display: none; } }
@media (max-width: 1360px) {
    .eb-find { width: 130px; }
    .eb-find kbd, .eb-clock { display: none; }
    .eb-mi { padding: 0 6px; gap: 5px; font-size: 13px; }
    .eb-mi .t { width: 22px; height: 22px; font-size: 12px; border-radius: 7px; }
    .eb-chip.eb-db .n { max-width: 100px; }
}
@media (max-width: 1150px) {
    .eb-mi .l { display: none; }
    .eb-mi { padding: 0 7px; }
    .eb-mi .t { width: 28px; height: 28px; font-size: 15px; }
    .eb-chip.eb-db .n { display: none; }
}
@media (max-width: 700px) {
    .eb-find { width: 40px; padding: 0 10px; }
    .eb-find input { width: 0; }
    .eb-find:focus-within { width: 200px; }
    .eb-find:focus-within input { width: auto; }
    .eb-nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .eb-drop { position: fixed; top: 54px; right: 8px; left: 8px; max-height: calc(100dvh - 70px); overflow: auto; }
    .eb-cols { flex-direction: column; }
    .eb-col + .eb-col { border: 0; padding: 0; border-top: 1px solid #F0F1F6; }
}

/* Approved white single-row navigation, with restrained pastel depth. */
.eb-bar { background:linear-gradient(105deg,#fff 0%,#fff 42%,#f9f8ff 76%,#f5f8ff 100%); color:#39364f; border-bottom:1px solid #e1e3f2; box-shadow:0 3px 12px #3730a308; flex-wrap:nowrap; gap:8px; }
.eb-bar::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent 3%,#c4b5fd 30%,#a5b4fc 65%,#bae6fd 90%,transparent); opacity:.7; pointer-events:none; }
.eb-logo { background:linear-gradient(145deg,#8b7afa,#6354e8 45%,#4f46e5); color:#fff!important; border:1px solid #ffffff85; box-shadow:inset 0 1px 1px #ffffff88,inset 0 -2px 3px #3730a322,0 4px 9px #4f46e522; }
.eb-logo:hover { box-shadow:0 0 0 3px #4f46e513; }
.eb-find { background:linear-gradient(160deg,#fff,#f8f9ff); border-color:#dddff0; color:#77718f; box-shadow:inset 0 1px 2px #3730a304; }
.eb-find input::placeholder { color:#8a84a1; }
.eb-find:focus-within { border-color:#b6aef8; box-shadow:0 0 0 3px #4f46e50b; }
.eb-find kbd { background:#eeedf8; color:#827c99; }
.eb-nav { gap:2px; align-items:center; }
.eb-m { align-self:stretch; align-items:center; }
.eb-mi { height:40px; border:1px solid transparent; border-radius:10px; color:#57516c; padding:0 8px; transition:background .18s,border-color .18s,box-shadow .18s,transform .18s; }
.eb-mi .t { color:var(--c); background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--c) 10%,#fff)); border:1px solid color-mix(in srgb,var(--c) 15%,#fff); box-shadow:inset 0 1px 0 #fff,0 2px 3px #1f223306; }
.eb-m:hover .eb-mi,.eb-m:focus-within .eb-mi { background:#fff; color:#4338ca; border-color:#e3e5f4; box-shadow:0 3px 8px #3730a30a; }
.eb-m:hover .eb-mi { transform:translateY(-1px); }
.eb-m.on .eb-mi { color:#4338ca; background:linear-gradient(160deg,#fff,#eeedff); border-color:#d4d0fb; box-shadow:inset 0 1px 0 #fff,0 3px 7px #4f46e513; }
.eb-mi:focus-visible,.eb-avatar:focus-visible,.eb-logo:focus-visible { outline:2px solid #a497ef; outline-offset:2px; }
.eb-drop { border:1px solid #dddff1; border-top:2px solid color-mix(in srgb,var(--c) 35%,#fff); box-shadow:0 20px 45px -12px #3730a326,0 5px 15px #3730a30a; max-height:calc(100dvh - 70px); overflow:auto; }
.eb-dh { background:linear-gradient(110deg,#fff,#f7f6ff); border-bottom-color:#eceaf7; }
.eb-dh .t { color:var(--c); background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--c) 10%,#fff)); border:1px solid color-mix(in srgb,var(--c) 15%,#fff); }
.eb-col h6 { color:#77718f; }
.eb-col a:hover,.eb-col a:focus-visible { background:linear-gradient(100deg,#f7f6ff,#eeedff); box-shadow:inset 0 0 0 1px #e7e2fc; }
.eb-chip { background:linear-gradient(155deg,#fff,#f4f3ff); color:#615b88; border:1px solid #e4e1f5; box-shadow:inset 0 1px 0 #fff; }
.eb-avatar { background:linear-gradient(145deg,#fff,#e9e6ff); border:1px solid #ded8fb; box-shadow:inset 0 1px 0 #fff,0 2px 4px #4f46e50d; }
.eb-user-dropdown { position:relative; }
/* The account button is at the physical left edge in RTL. Anchor inward. */
.eb-user-dropdown > .dropdown-menu { position:absolute; top:100%!important; left:0!important; right:auto!important; bottom:auto!important; transform:none!important; margin:0; min-width:230px; max-width:calc(100vw - 24px); padding:6px; border:1px solid #dddff1; border-radius:12px; box-shadow:0 20px 45px -12px #3730a326,0 5px 15px #3730a30a; text-align:right; }
.eb-user-dropdown > .dropdown-menu .dropdown-header { background:linear-gradient(110deg,#f7f6ff,#eeedff); color:#4338ca; border-radius:8px; padding:12px; }
.eb-user-dropdown > .dropdown-menu .dropdown-item { border-radius:8px; font-size:13px; padding:10px 12px; }
.eb-user-dropdown > .dropdown-menu .dropdown-item:hover { background:#f4f2ff; color:#4338ca; }
.eb-user-dropdown > .dropdown-menu .dropdown-item.text-danger:hover { background:#fff1f2; }
.eb-palette { border-color:#dddff1; box-shadow:0 16px 40px #3730a31a; }
@media(max-width:1360px) { .eb-mi { padding:0 5px; gap:5px; } }
@media(max-width:1150px) { .eb-mi { padding:0 5px; } }
@media(max-width:700px) { .eb-bar { gap:5px; padding:0 8px; } .eb-m { flex:0 0 auto; } .eb-m .eb-drop { top:54px; right:8px; left:8px; } .eb-find:focus-within { width:min(200px,45vw); } .eb-palette { right:-42px; max-width:calc(100vw - 16px); } }
@media(prefers-reduced-motion:reduce) { .eb-mi { transition:none; } .eb-m:hover .eb-mi { transform:none; } }

/* Account menu is explicitly controlled, so click and Escape are reliable. */
.eb-user-backdrop { position:fixed; inset:0; z-index:1200; background:transparent; }
.eb-user-dropdown { z-index:1201; }
.eb-user-dropdown > .dropdown-menu:not(.show) { display:none!important; }
.eb-user-dropdown > .dropdown-menu.show { display:block!important; }

/* Empty toast padding must not intercept the account button underneath. */
#category-toast-container { pointer-events:none; }
#category-toast-container .toast.show { pointer-events:auto; }

/* ===== مظهر البار (من قايمة المستخدم): خلفية داكنة / ملونة + عائم + شريط البيئة ===== */
.eb-bar.eb-tone { background: var(--eb-bg) !important; border-bottom-color: transparent; }
.eb-bar.eb-tone::after { display: none; }
.eb-bar.eb-tone.eb-dark { color: #fff; }
.eb-bar.eb-tone.eb-dark .eb-mi { color: rgba(255,255,255,.88); }
.eb-bar.eb-tone.eb-dark .eb-m:hover .eb-mi, .eb-bar.eb-tone.eb-dark .eb-m:focus-within .eb-mi { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.18); box-shadow: none; }
.eb-bar.eb-tone.eb-dark .eb-m.on .eb-mi { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); box-shadow: none; }
.eb-bar.eb-tone.eb-dark .eb-mi .t { background: var(--c); color: #fff; border-color: transparent; box-shadow: none; }
.eb-bar.eb-tone.eb-dark .eb-find { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.eb-bar.eb-tone.eb-dark .eb-find input::placeholder { color: rgba(255,255,255,.75); }
.eb-bar.eb-tone.eb-dark .eb-find:focus-within { background: #fff; color: #4338CA; }
.eb-bar.eb-tone.eb-dark .eb-find:focus-within input::placeholder { color: #8A8FA8; }
.eb-bar.eb-tone.eb-dark .eb-find kbd { background: rgba(255,255,255,.18); color: inherit; }
.eb-bar.eb-tone.eb-dark .eb-chip { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.18); box-shadow: none; }
.eb-bar.eb-tone.eb-dark .eb-avatar { background: #fff; color: #1F2233; border: 0; }
.eb-bar.eb-tone.eb-dark .eb-logo { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); box-shadow: none; }
.eb-bar.eb-tone.eb-light .eb-find, .eb-bar.eb-tone.eb-light .eb-chip, .eb-bar.eb-tone.eb-light .eb-avatar { background: rgba(255,255,255,.65); }
.eb-bar.eb-tone.eb-light .eb-m:hover .eb-mi, .eb-bar.eb-tone.eb-light .eb-m.on .eb-mi { background: rgba(255,255,255,.7); }
.fixed-header:has(.eb-bar.eb-float) { padding: 8px 12px 6px; }
.eb-bar.eb-float { border-radius: 16px; border: 1px solid #e1e3f2; box-shadow: 0 14px 34px rgba(55,48,163,.18), 0 2px 6px rgba(20,22,40,.06); }
.eb-bar.eb-float::after { display: none; }
.eb-bar.eb-float:not(.eb-tone) { background: rgba(255,255,255,.88) !important; backdrop-filter: blur(12px); }
.eb-envbar { height: 24px; display: flex; align-items: center; gap: 14px; padding: 0 14px; font: 700 11.5px 'Cairo', 'Segoe UI', sans-serif; color: #fff; }
.eb-envbar .sp { flex: 1; }
.eb-envbar.local { background: #15803D; } .eb-envbar.live { background: #B91C1C; }
.eb-theme-backdrop { position: fixed; inset: 0; z-index: 1190; }
.eb-theme { position: fixed; top: 64px; left: 12px; z-index: 1200; width: 330px; max-width: calc(100vw - 24px); background: #fff; color: #1F2233; border: 1px solid #dddff1; border-radius: 14px; box-shadow: 0 20px 45px -12px rgba(55,48,163,.3); padding: 14px; display: flex; flex-direction: column; gap: 8px; font-family: 'Cairo', 'Segoe UI', sans-serif; text-align: right; }
.eb-theme .hd { display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; }
.eb-theme .hd i { color: #4F46E5; }
.eb-theme .x { border: 0; background: transparent; cursor: pointer; color: #646A80; padding: 2px 6px; border-radius: 6px; }
.eb-theme .x:hover { background: #F4F5FA; }
.eb-theme .hint { color: #8A8FA8; font-size: 11.5px; }
.eb-theme h6 { margin: 6px 0 0; font-size: 12px; font-weight: 800; color: #77718f; }
.eb-theme .opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.eb-theme .opt { border: 1px solid #E4E6EF; background: #fff; border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #1F2233; }
.eb-theme .opt:hover { background: #F6F7FB; }
.eb-theme .opt.on { border-color: #4F46E5; background: #EEF2FF; color: #3730A3; }
.eb-theme .sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #E4E6EF; cursor: pointer; padding: 0; }
.eb-theme .sw.on { box-shadow: 0 0 0 2px #1F2233; }
.eb-theme .custom { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #646A80; cursor: pointer; margin: 0; }
.eb-theme .custom input { width: 34px; height: 28px; border: 1px solid #E4E6EF; border-radius: 8px; padding: 2px; cursor: pointer; background: #fff; }
.eb-theme .reset { align-self: flex-start; margin-top: 4px; color: #646A80; }
.eb-theme .opt:focus-visible, .eb-theme .sw:focus-visible, .eb-theme .x:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; }

/* ===== حالة الاتصال بالسيرفر (بدل ما الصفحة تقف من غير ما تقول) ===== */
.eb-reconnect { display: none; position: fixed; z-index: 20000; top: 8px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px);
  background: #1F2233; color: #fff; border-radius: 999px; padding: 7px 16px; font: 700 13px 'Cairo', 'Segoe UI', sans-serif; box-shadow: 0 10px 30px rgba(20,22,40,.3); direction: rtl; }
.eb-reconnect a { color: #FCD34D; text-decoration: underline; }
.eb-reconnect .eb-rc-msg { display: none; align-items: center; gap: 8px; }
.eb-reconnect.components-reconnect-show, .eb-reconnect.components-reconnect-retrying,
.eb-reconnect.components-reconnect-failed, .eb-reconnect.components-reconnect-resume-failed, .eb-reconnect.components-reconnect-rejected { display: block; }
.eb-reconnect.components-reconnect-show .eb-rc-show, .eb-reconnect.components-reconnect-retrying .eb-rc-show { display: inline-flex; }
.eb-reconnect.components-reconnect-failed .eb-rc-failed, .eb-reconnect.components-reconnect-resume-failed .eb-rc-failed { display: inline-flex; }
.eb-reconnect.components-reconnect-rejected .eb-rc-rejected { display: inline-flex; }
.eb-reconnect.components-reconnect-failed, .eb-reconnect.components-reconnect-rejected { background: #B91C1C; }
.eb-rc-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: ebrc .8s linear infinite; }
@keyframes ebrc { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eb-rc-spin { animation: none; } }

/* ===== قايمة ضيقة ملوّنة: أول قسم ظاهر، والباقي قوايم فرعية جنبها ناحية السهم ===== */
.eb-drop.eb-nd { width: 236px; overflow: visible; max-height: none; padding: 6px; border-radius: 0 0 12px 12px; border-top: 3px solid var(--c); }
.eb-nd .eb-dh { margin: -2px -2px 4px; padding: 7px 8px; border-radius: 8px; border-bottom: 0; background: color-mix(in srgb, var(--c) 12%, #fff); }
.eb-nl { display: flex; flex-direction: column; }
.eb-ni { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; color: #1F2233; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.eb-ni .ck { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; font-size: 13px; color: var(--k); background: color-mix(in srgb, var(--k) 14%, #fff); }
.eb-ni:hover, .eb-ni:focus-visible, .eb-fly:focus-within { background: color-mix(in srgb, var(--k) 11%, #fff); color: #1F2233; outline: 0; }
.eb-ni .ar { margin-inline-start: auto; color: var(--k); font-size: 12px; }
.eb-nsep { height: 1px; background: #F0F1F6; margin: 5px 4px; }
.eb-sub { visibility: hidden; opacity: 0; position: absolute; top: -8px; right: calc(100% - 2px); left: auto; width: max-content; min-width: 170px; max-width: 320px; background: #fff; border: 1px solid #dddff1; border-top: 3px solid var(--k); border-radius: 10px; padding: 6px; box-shadow: 0 18px 40px -10px #3730a333, 0 4px 12px #3730a31a; z-index: 2; transition: opacity .12s ease .25s, visibility 0s linear .25s; }
.eb-fly:hover > .eb-sub, .eb-fly:focus-within > .eb-sub { visibility: visible; opacity: 1; transition-delay: .08s, .08s; }
.eb-sub a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; color: #1F2233; text-decoration: none; font-size: 13px; font-weight: 600; white-space: normal; }
.eb-sub a:hover, .eb-sub a:focus-visible { background: color-mix(in srgb, var(--k) 11%, #fff); outline: 0; }
.eb-sub .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--k); flex: 0 0 auto; }
@media (max-width: 900px) {
    .eb-fly { flex-wrap: wrap; }
    .eb-fly .ar { display: none; }
    .eb-sub { visibility: visible; opacity: 1; position: static; width: 100%; max-width: none; min-width: 0; border: 0; box-shadow: none; padding: 0 28px 4px 0; transition: none; }
}
@media (max-width: 700px) { .eb-drop.eb-nd { width: auto; overflow: auto; max-height: calc(100dvh - 70px); } }

/* Company switcher on the DB chip */
.eb-co { position:relative; z-index:1201; }
.eb-co > .eb-chip.eb-db { cursor:pointer; }
.eb-co-car { font-size:10px; opacity:.7; }
.eb-co-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:290px; max-width:340px; background:#fff; color:#1F2233; border:1px solid #E4E6EF; border-radius:12px; box-shadow:0 12px 32px rgba(31,34,51,.18); padding:6px; direction:rtl; font-family:Cairo,inherit; }
.eb-co-h { font-size:11.5px; font-weight:800; color:#646A80; padding:6px 10px 4px; }
.eb-co-it { display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:8px 10px; border-radius:9px; text-align:right; cursor:pointer; color:#1F2233; font:inherit; }
.eb-co-it:hover:not(:disabled) { background:#EEF2FF; }
.eb-co-it:disabled { cursor:default; opacity:1; }
.eb-co-it.on { background:#F5F7FF; }
.eb-co-it > i { font-size:16px; color:#4F46E5; }
.eb-co-it.on > i { color:#15803D; }
.eb-co-it .t { flex:1; display:flex; flex-direction:column; min-width:0; }
.eb-co-it .t b { font-size:13px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eb-co-it .t small { font-size:11px; color:#646A80; direction:ltr; text-align:right; }
.eb-co-it .x { color:#9CA3AF; padding:2px 4px; border-radius:6px; }
.eb-co-it .x:hover { color:#B91C1C; background:#FEE2E2; }
.eb-co-sep { height:1px; background:#E4E6EF; margin:4px 6px; }
.eb-co-note { font-size:11px; color:#646A80; padding:4px 10px 6px; }