/* ===========================================================================
   DARLING Admin Theme — refined flat dark with plum + gold accent, full RTL Arabic.
   - Layout is RTL (Jazzmin ships dir="rtl"; AdminLTE 4 grid mirrors itself).
   - Mixed Arabic/Latin data (phones, refs, amounts) uses plaintext bidi.
   - Aggressive dark coverage so no white area shows through anywhere.
   =========================================================================== */

:root {
    color-scheme: dark;

    --hs-bg:          #1C1720;   /* page background */
    --hs-elevated:    #262029;   /* cards, sidebar, navbar */
    --hs-elevated-2:  #322A36;   /* hover, table header */
    --hs-border:      #3E3543;
    --hs-border-soft: #2F2833;
    --hs-text:        #F2ECF4;
    --hs-text-muted:  #A79DAD;
    --hs-primary:     #8A5A8F;   /* بنفسجي الشعار، مُفتَّح ليقرأ على الداكن */
    --hs-primary-2:   #6E4A73;
    --hs-primary-soft: rgba(138, 90, 143, 0.12);
    --hs-danger:      #E05A7D;
    --hs-warning:     #C9A227;   /* ذهبي النجوم */
    --hs-info:        #8FA8C9;
}

/* ---------- RTL layout ----------
   The markup already ships dir="rtl" (Jazzmin sets it for bidi languages) and
   AdminLTE 4 uses CSS Grid for the shell, so the sidebar/content mirror
   automatically. We only need to right-align text and keep mixed Arabic/Latin
   data (phone numbers, references, codes, dates) rendering naturally. */
html, body {
    direction: rtl;
    text-align: right;
}
/* Belt-and-braces: never allow horizontal scroll from off-screen helpers. */
html { overflow-x: hidden; }

/* Django/AdminLTE hide the ARIA live region with `left:-10000px`. That works
   in LTR but in RTL it sits 10000px past the start edge and forces a huge
   horizontal scrollbar. Hide it with clip (in-bounds) instead — still
   announced by screen readers, zero layout footprint. */
.live-region,
#live-region {
    position: absolute !important;
    inset-inline-start: 0 !important;
    left: auto !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Inputs and table cells often hold bare Latin/numeric data — plaintext bidi
   keeps "+96550..." / "#1042" / "2.500 د.ك" readable inside an RTL context. */
input, textarea, select { unicode-bidi: plaintext; }
table { direction: rtl; }
table th, table td { text-align: right; }
table td { unicode-bidi: plaintext; }
.form-group label, .aligned label, fieldset .form-row label { text-align: right; }
/* Numeric/auto columns that look better start-aligned */
.column-total_amount, .column-subtotal, .field-total_amount, .field-subtotal { text-align: right; }

/* ===========================================================================
   GLOBAL DARK — covers every container Jazzmin / AdminLTE / Django can render.
   =========================================================================== */
html, body {
    background-color: var(--hs-bg) !important;
    color: var(--hs-text) !important;
}
.wrapper, .content-wrapper, .content, .main-content,
section.content, section.content-header,
.dashboard, #content, #content-main, #container,
.layout-navbar-fixed, .layout-fixed {
    background-color: var(--hs-bg) !important;
    color: var(--hs-text) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.content-header h1, .content-header h3 {
    color: var(--hs-text) !important;
    font-weight: 500;
}

/* Text everywhere */
p, span, small, .text-muted, .help-block, .small {
    color: var(--hs-text) !important;
}
.text-muted, small.text-muted { color: var(--hs-text-muted) !important; }

/* ===========================================================================
   SIDEBAR
   =========================================================================== */
.main-sidebar, .sidebar-dark-primary, .sidebar, .app-sidebar {
    background-color: var(--hs-elevated) !important;
    border-inline-end: 1px solid var(--hs-border-soft);
}

/* ---------------------------------------------------------------------------
   RTL-safe sidebar collapse.
   AdminLTE 4 collapses the (non-mini) sidebar with a negative `margin-left`,
   which shrinks its track in the LTR grid. In RTL the sidebar sits in the
   right grid column, so a left margin distorts the layout instead of closing
   it. Collapse the `auto` grid column by WIDTH instead — direction-agnostic,
   works the same in LTR and RTL. A smooth width transition keeps it tidy.
   --------------------------------------------------------------------------- */
.app-sidebar {
    transition: min-width .25s ease, max-width .25s ease !important;
    overflow-x: hidden;
}
.sidebar-collapse:not(.sidebar-mini) .app-sidebar {
    margin-left: 0 !important;
    margin-inline: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    border-inline-end: 0 !important;
}
.brand-link {
    background-color: var(--hs-elevated) !important;
    border-bottom: 1px solid var(--hs-border-soft) !important;
    color: var(--hs-text) !important;
    padding: 0.9rem 1rem;
}
.brand-link .brand-image.hs-admin-logo,
.brand-link .hs-admin-logo {
    width: auto;
    /* The badge-style logo carries its own dark padding — give it more room
       so the wordmark inside stays legible at sidebar size. */
    max-width: 130px;
    max-height: 46px;
    object-fit: contain;
    margin-inline: 0 0.55rem;
    box-shadow: none !important;
}
.brand-link .brand-text { color: var(--hs-text) !important; font-weight: 600; }
.user-panel { border-bottom: 1px solid var(--hs-border-soft) !important; }
.user-panel .info a { color: var(--hs-text) !important; }

/* Section headers — AdminLTE 4 = .sidebar-menu (AdminLTE3 = .nav-sidebar).
   Distinct, bold, plum, with an underline; page names sit beneath. */
.nav-sidebar .nav-header,
.app-sidebar .sidebar-menu .nav-header {
    display: flex;
    align-items: center;
    color: var(--hs-primary) !important;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: none;
    padding: 0 0.45rem 0.4rem;
    margin: 1rem 0.45rem 0.4rem;
    background: transparent !important;
    border-bottom: 2px solid var(--hs-primary-soft);
    user-select: none;
    transition: color .12s ease;
}
.app-sidebar .sidebar-menu .nav-header:hover { color: #A87BAD !important; }
/* Collapse chevron — sits at the inline-end, rotates when the section is shut. */
.hs-sec-chevron {
    margin-inline-start: auto;
    font-size: 0.68em;
    opacity: 0.7;
    transition: transform .2s ease;
}
.nav-header.hs-sec-collapsed .hs-sec-chevron { transform: rotate(-90deg); }
/* No top gap for the very first header so it hugs the user panel cleanly. */
.app-sidebar .sidebar-menu .nav-header:first-of-type { margin-top: 0.5rem; }
/* Subtle monochrome icon before each section title (injected by JS). Inherits
   the header's plum colour, slightly smaller so it reads as a category. */
.hs-section-ic { margin-inline-end: 7px; font-size: 0.85em; opacity: 0.9; width: 1em; text-align: center; }
/* AdminLTE 4 renders the sidebar as .sidebar-menu (AdminLTE 3 used
   .nav-sidebar). The default has an oversized inline indent (~40px) on the
   menu and 2rem padding on each link, which in RTL leaves a big gap on the
   right and truncates Arabic titles. Tighten both so titles show in full. */
.app-sidebar .sidebar-menu {
    padding-inline: 0.4rem !important;
}
.nav-sidebar .nav-link,
.app-sidebar .sidebar-menu .nav-link {
    --bs-nav-link-padding-x: 0.8rem;
    color: #CFC7D4 !important;
    border-radius: 6px;
    margin: 1px 2px;
    padding: 0.5rem 0.7rem !important;
    display: flex;
    align-items: center;
    transition: background-color .12s ease, color .12s ease;
}
.nav-sidebar .nav-link:hover,
.app-sidebar .sidebar-menu .nav-link:hover {
    background-color: var(--hs-elevated-2) !important;
    color: #ffffff !important;
}
.nav-sidebar .nav-link.active,
.app-sidebar .sidebar-menu .nav-link.active {
    background-color: var(--hs-primary) !important;
    color: #ffffff !important;
}
.nav-sidebar .nav-link p,
.app-sidebar .sidebar-menu .nav-link p {
    color: inherit !important;
    flex: 1 1 auto;
    margin: 0;
    padding-inline: 0.5rem 0 !important;
    overflow: visible !important;       /* don't truncate Arabic titles */
    text-overflow: clip !important;
    white-space: nowrap;
}
.app-sidebar .sidebar-menu .nav-icon { flex-shrink: 0; opacity: 1; }

/* ---------------------------------------------------------------------------
   Coloured sidebar icons — a vibrant per-section palette echoing the client
   mockup. Applied to the FontAwesome classes set in JAZZMIN_SETTINGS["icons"].
   Active links keep a white icon for contrast on the plum background.
   --------------------------------------------------------------------------- */
.app-sidebar .sidebar-menu .nav-icon.fa-truck,
.app-sidebar .sidebar-menu .nav-icon.fa-money-bill-wave,
.app-sidebar .sidebar-menu .nav-icon.fa-receipt        { color: #8A5A8F; }
.app-sidebar .sidebar-menu .nav-icon.fa-dolly,
.app-sidebar .sidebar-menu .nav-icon.fa-map-marker-alt,
.app-sidebar .sidebar-menu .nav-icon.fa-box,
.app-sidebar .sidebar-menu .nav-icon.fa-tags,
.app-sidebar .sidebar-menu .nav-icon.fa-layer-group    { color: #D99A5B; }
.app-sidebar .sidebar-menu .nav-icon.fa-exclamation-triangle,
.app-sidebar .sidebar-menu .nav-icon.fa-percent        { color: #E05A7D; }
.app-sidebar .sidebar-menu .nav-icon.fa-clipboard-check,
.app-sidebar .sidebar-menu .nav-icon.fa-tasks,
.app-sidebar .sidebar-menu .nav-icon.fa-map,
.app-sidebar .sidebar-menu .nav-icon.fa-users,
.app-sidebar .sidebar-menu .nav-icon.fa-user           { color: #8FA8C9; }
.app-sidebar .sidebar-menu .nav-icon.fa-gift,
.app-sidebar .sidebar-menu .nav-icon.fa-ticket-alt,
.app-sidebar .sidebar-menu .nav-icon.fa-image,
.app-sidebar .sidebar-menu .nav-icon.fa-images,
.app-sidebar .sidebar-menu .nav-icon.fa-id-card        { color: #D98BB0; }
.app-sidebar .sidebar-menu .nav-icon.fa-star,
.app-sidebar .sidebar-menu .nav-icon.fa-bell,
.app-sidebar .sidebar-menu .nav-icon.fa-camera         { color: #C9A227; }
.app-sidebar .sidebar-menu .nav-icon.fa-user-shield,
.app-sidebar .sidebar-menu .nav-icon.fa-user-clock     { color: #9B8FD9; }
.app-sidebar .sidebar-menu .nav-icon.fa-headset,
.app-sidebar .sidebar-menu .nav-icon.fa-comment-dots   { color: #B49BBD; }
.app-sidebar .sidebar-menu .nav-icon.fa-clipboard-list,
.app-sidebar .sidebar-menu .nav-icon.fa-file-alt,
.app-sidebar .sidebar-menu .nav-icon.fa-paragraph      { color: #A79DAD; }
.app-sidebar .sidebar-menu .nav-icon.fa-th-large       { color: #8A5A8F; }
.app-sidebar .sidebar-menu .nav-icon.fa-chart-line     { color: #8FA8C9; }
.app-sidebar .sidebar-menu .nav-icon.fa-sliders-h      { color: #C9A227; }
.app-sidebar .sidebar-menu .nav-icon.fa-user-slash,
.app-sidebar .sidebar-menu .nav-icon.fa-ban            { color: #E05A7D; }
/* Fallback: any sidebar icon not explicitly coloured gets the accent tint,
   so every page in the sidebar shows a coloured icon (never plain grey). */
.app-sidebar .sidebar-menu .nav-icon { color: #8FA8C9; }
/* On the active (plum) link, force the icon white for contrast. */
.app-sidebar .sidebar-menu .nav-link.active .nav-icon  { color: #ffffff !important; }

/* Sidebar count badges (injected by static/js/sidebar_badges.js) */
.hs-nav-badge {
    margin-inline-start: auto;
    flex-shrink: 0;
    min-width: 20px;
    padding: 0.05rem 0.45rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #FFFFFF;
    background-color: var(--hs-primary);
}
.hs-nav-badge--default { background-color: var(--hs-primary); color: #FFFFFF; }
.hs-nav-badge--info    { background-color: #8FA8C9; color: #08232B; }
.hs-nav-badge--warning { background-color: var(--hs-warning); color: #2A1E2E; }
.hs-nav-badge--danger  { background-color: var(--hs-danger); color: #fff; }
/* On the active (plum) link, ANY badge would blend into the plum
   background — force a high-contrast white pill so the count stays readable. */
.nav-sidebar .nav-link.active .hs-nav-badge,
.app-sidebar .sidebar-menu .nav-link.active .hs-nav-badge {
    background-color: #ffffff !important;
    color: var(--hs-primary-2) !important;
}

/* ===========================================================================
   NAVBAR (top bar)
   =========================================================================== */
.main-header.navbar {
    background-color: var(--hs-elevated) !important;
    border-bottom: 1px solid var(--hs-border-soft) !important;
}
.main-header .nav-link { color: var(--hs-text) !important; }
.main-header .nav-link:hover { color: var(--hs-primary) !important; }

/* ===========================================================================
   CARDS / dashboard boxes
   =========================================================================== */
.card, .info-box, .small-box {
    background-color: var(--hs-elevated) !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    color: var(--hs-text) !important;
}
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--hs-border) !important;
    color: var(--hs-text) !important;
    font-weight: 600;
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
}
.card-body { padding: 0 !important; color: var(--hs-text) !important; }
.card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--hs-border) !important;
    color: var(--hs-text-muted);
}

/* Dashboard model-list rows */
.card-body .table { margin-bottom: 0; background: transparent !important; }
.card-body .table tr {
    background: transparent !important;
    border-bottom: 1px solid var(--hs-border-soft);
}
.card-body .table tr:last-child { border-bottom: none; }
.card-body .table td {
    border-color: var(--hs-border-soft) !important;
    padding: 0.7rem 1.1rem;
    background: transparent !important;
}
.card-body .table a { color: var(--hs-text) !important; }
.card-body .table a:hover { color: var(--hs-primary) !important; }

/* ===========================================================================
   TABLES
   =========================================================================== */
.table, table {
    color: var(--hs-text) !important;
    background-color: transparent !important;
}
.table thead th, table thead th {
    background-color: var(--hs-elevated-2) !important;
    color: var(--hs-text) !important;
    border-color: var(--hs-border) !important;
    font-weight: 600;
    text-transform: none;
}
.table tbody tr, table tbody tr {
    background-color: transparent !important;
    border-color: var(--hs-border-soft) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
.table tbody tr:hover, table tbody tr:hover {
    background-color: var(--hs-primary-soft) !important;
}
.table td, .table th, table td, table th {
    border-color: var(--hs-border-soft) !important;
    background: transparent !important;
}

/* Django changelist results */
#changelist table { border: 1px solid var(--hs-border) !important; border-radius: 6px; overflow: hidden; }
#changelist-filter { background-color: var(--hs-elevated) !important; border: 1px solid var(--hs-border) !important; border-radius: 6px; padding: 0.5rem; }
#changelist-filter h2, #changelist-filter h3 { color: var(--hs-text) !important; background: transparent !important; }
#changelist-filter li a { color: var(--hs-text-muted) !important; }
#changelist-filter li.selected a { color: var(--hs-primary) !important; font-weight: 600; }

/* ===========================================================================
   FORMS — inputs, selects, textareas, file inputs
   =========================================================================== */
.form-control, .form-select, select, input, textarea,
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="url"], input[type="search"],
input[type="tel"], input[type="date"], input[type="datetime-local"],
input[type="time"] {
    background-color: var(--hs-bg) !important;
    color: var(--hs-text) !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: 4px !important;
}
.form-control:focus, select:focus, input:focus, textarea:focus {
    border-color: var(--hs-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(138, 90, 143, 0.22) !important;
    outline: none;
    background-color: var(--hs-bg) !important;
}
label, .form-group label, .aligned label { color: var(--hs-text) !important; font-weight: 500; }
.help, .help-text, .helptext { color: var(--hs-text-muted) !important; }

/* Select2 (Django/Jazzmin) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--hs-bg) !important;
    border: 1px solid var(--hs-border) !important;
    color: var(--hs-text) !important;
}
.select2-container--default .select2-selection__rendered { color: var(--hs-text) !important; }
.select2-dropdown { background-color: var(--hs-elevated) !important; border: 1px solid var(--hs-border) !important; }
.select2-results__option { color: var(--hs-text); }
.select2-results__option--highlighted { background-color: var(--hs-primary) !important; }

/* ===========================================================================
   BUTTONS
   =========================================================================== */
.btn-primary, .btn-info, .btn-success {
    background-color: var(--hs-primary) !important;
    border-color: var(--hs-primary) !important;
    color: #ffffff !important;
    font-weight: 500;
    box-shadow: none !important;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover {
    background-color: var(--hs-primary-2) !important;
    border-color: var(--hs-primary-2) !important;
}
.btn-danger {
    background-color: var(--hs-danger) !important;
    border-color: var(--hs-danger) !important;
}
.btn-warning {
    background-color: var(--hs-warning) !important;
    border-color: var(--hs-warning) !important;
    color: #1a1a1a !important;
}
.btn-default, .btn-secondary, .btn-outline-secondary {
    background-color: var(--hs-elevated-2) !important;
    border: 1px solid var(--hs-border) !important;
    color: var(--hs-text) !important;
}
.btn-default:hover, .btn-secondary:hover {
    background-color: var(--hs-border) !important;
    border-color: var(--hs-border) !important;
}

/* Django default submit row */
.submit-row {
    background-color: var(--hs-elevated) !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: 6px;
    padding: 0.75rem;
}
.submit-row input, .submit-row a.button {
    background-color: var(--hs-primary) !important;
    border-color: var(--hs-primary) !important;
    color: #ffffff !important;
}
.submit-row a.deletelink {
    background-color: var(--hs-danger) !important;
    border-color: var(--hs-danger) !important;
}

/* ===========================================================================
   LINKS, BREADCRUMBS
   =========================================================================== */
a { color: var(--hs-primary); text-decoration: none; }
a:hover { color: #A87BAD; text-decoration: none; }
.breadcrumb { background: transparent !important; padding: 0; }
.breadcrumb-item a { color: var(--hs-text-muted); }
.breadcrumb-item.active { color: var(--hs-text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hs-text-muted); }

/* ===========================================================================
   ALERTS / MESSAGES
   =========================================================================== */
.alert-success, ul.messagelist li.success {
    background-color: rgba(138, 90, 143, 0.12) !important;
    border-color: var(--hs-primary) !important;
    color: #6ee7b7 !important;
}
.alert-warning, ul.messagelist li.warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: var(--hs-warning) !important;
    color: #fcd34d !important;
}
.alert-danger, ul.messagelist li.error {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: var(--hs-danger) !important;
    color: #fca5a5 !important;
}
.alert-info, ul.messagelist li.info {
    background-color: var(--hs-primary-soft) !important;
    border-color: var(--hs-primary) !important;
    color: #6ee7b7 !important;
}

/* ===========================================================================
   FOOTER
   =========================================================================== */
.main-footer {
    background-color: var(--hs-elevated) !important;
    border-top: 1px solid var(--hs-border-soft) !important;
    color: var(--hs-text-muted);
}

/* ===========================================================================
   FIELDSET (form section)
   =========================================================================== */
fieldset.module {
    background-color: var(--hs-elevated) !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: 8px;
    box-shadow: none;
}
fieldset.module h2 {
    background-color: var(--hs-elevated-2) !important;
    color: var(--hs-text) !important;
    padding: 0.75rem 1rem;
    border-radius: 8px 8px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid var(--hs-border);
}
.module caption { color: var(--hs-text) !important; background: var(--hs-elevated-2) !important; }
.module th, .module td { color: var(--hs-text) !important; }

/* ===========================================================================
   PAGINATION
   =========================================================================== */
.pagination .page-link, .paginator a {
    background-color: var(--hs-elevated) !important;
    border-color: var(--hs-border) !important;
    color: var(--hs-text) !important;
}
.pagination .page-item.active .page-link,
.paginator .this-page {
    background: var(--hs-primary) !important;
    border-color: var(--hs-primary) !important;
    color: #ffffff !important;
}

/* ===========================================================================
   ACTION BAR / RECENT ACTIONS / SIDEBAR WIDGETS
   =========================================================================== */
/* شريط الإجراءات الجماعية — يظهر في كل قوائم اللوحة.
   كان يتكسّر على الشاشات الضيّقة: Select2 يكتب عرضًا **بالبكسل** في نمط
   مضمّن لحظة التهيئة (‏`style="width: 180px"`)، فيبقى جزيرةً ثابتة مهما
   ضاقت الشاشة أو اتّسعت — ولو هُيّئ والصفحة مخفيّة خرج بعرضٍ سخيف.
   الحلّ: صفٌّ مرن، والعرض المضمّن يُلغى بـ100% داخله. */
#changelist-form .actions {
    background-color: var(--hs-elevated) !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: 8px;
    color: var(--hs-text);
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
#changelist-form .actions > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    /* يكبر ليملأ الفراغ وينكمش حتى 220px ثم ينزل سطرًا وحده */
    flex: 1 1 220px;
    min-width: 0;
}
/* الأهمّ: إلغاء العرض المضمّن الذي يكتبه Select2 */
#changelist-form .actions .select2,
#changelist-form .actions .select2-container {
    width: 100% !important;
    min-width: 0;
}
/* الأصلي و«الوجه» الذي يرسمه Select2 يشتركان في العرض والارتفاع فقط.
   `display: flex` على <select> أصلي سلوك غير معرَّف: المتصفّح يعامله
   صندوقًا مرنًا فتنكسر قائمته ولا تظهر بنودها — ولا يبين ذلك إلّا حين
   لا يُهيَّأ Select2 (خطأ JS، أو تأخّر، أو صفحة بلا select2)، وحينها
   يبقى الأصلي ظاهرًا معطوبًا. الارتفاع يُضبط بـ`height` لا بمحاذاة مرنة. */
#changelist-form .actions select {
    width: 100%;
    min-height: 38px;
}
#changelist-form .actions .select2-selection {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
}
#changelist-form .actions button,
#changelist-form .actions .button {
    flex: 0 0 auto;
    min-height: 38px;
    padding-inline: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}
/* العدّاد نصّ مساعد لا عنصر أوّل: يأخذ ما بقي ولا يزاحم الزرّ */
#changelist-form .actions .action-counter,
#changelist-form .actions .all,
#changelist-form .actions .question,
#changelist-form .actions .clear {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--hs-text-muted, var(--hs-text)) !important;
    opacity: 0.85;
    margin: 0;
}

@media (max-width: 767.98px) {
    #changelist-form .actions {
        padding: 0.65rem;
        gap: 0.5rem;
    }
    /* على الجوال: القائمة سطر كامل، والزرّ سطر كامل تحتها.
       الهدف مساحة لمس مريحة لا حشر ثلاثة عناصر في سطر عرضه 375px. */
    #changelist-form .actions > label { flex: 1 1 100%; }
    #changelist-form .actions button,
    #changelist-form .actions .button {
        flex: 1 1 100%;
        min-height: 44px;
    }
    #changelist-form .actions .action-counter,
    #changelist-form .actions .all,
    #changelist-form .actions .question,
    #changelist-form .actions .clear {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Django's "Recent actions" sidebar block */
#recent-actions-module, .module {
    background-color: var(--hs-elevated) !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: 8px;
    color: var(--hs-text) !important;
}
#recent-actions-module h2, #recent-actions-module h3 {
    background-color: var(--hs-elevated-2) !important;
    color: var(--hs-text) !important;
    padding: 0.6rem 0.9rem;
    border-radius: 8px 8px 0 0;
    margin: 0;
    font-size: 0.95rem;
}
#recent-actions-module .actionlist li,
#recent-actions-module ul li {
    color: var(--hs-text) !important;
    border-bottom: 1px solid var(--hs-border-soft);
}

/* Jazzmin login page background */
.login-page, .login-box-body { background-color: var(--hs-bg) !important; }
.login-box, .register-box { background-color: var(--hs-elevated) !important; border: 1px solid var(--hs-border); }
.login-logo,
.register-logo {
    margin-bottom: 1rem;
}
.login-logo img,
.register-logo img {
    width: min(320px, 100%);
    height: auto;
    object-fit: contain;
}

/* Dropdowns (user menu, etc.) */
.dropdown-menu {
    background-color: var(--hs-elevated) !important;
    border: 1px solid var(--hs-border) !important;
}
.dropdown-item { color: var(--hs-text) !important; }
.dropdown-item:hover { background-color: var(--hs-elevated-2) !important; color: #ffffff !important; }
.dropdown-divider { border-color: var(--hs-border) !important; }

/* Native scrollbar in dark mode */
* {
    scrollbar-color: var(--hs-border) var(--hs-bg);
}

/* HR */
hr { border-color: var(--hs-border-soft) !important; }

/* ===========================================================================
   NAVBAR TOOLS (refresh + notification bell, injected by sidebar_badges.js)
   =========================================================================== */
.hs-nav-tool .nav-link {
    position: relative;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; margin: 0 2px;
    color: var(--hs-text-muted) !important;
    transition: background-color .15s ease, color .15s ease;
}
.hs-nav-tool .nav-link:hover {
    background-color: var(--hs-elevated-2) !important;
    color: var(--hs-text) !important;
}
.hs-nav-tool .nav-link i { font-size: 15px; }
.hs-noti-dot {
    position: absolute; top: 7px; inset-inline-end: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background-color: var(--hs-danger);
    border: 2px solid var(--hs-elevated);
}

/* Footer credit (set by sidebar_badges.js — single centred line) */
.hs-footer-credit {
    text-align: center;
    width: 100%;
    color: var(--hs-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.hs-footer-credit strong { color: var(--hs-primary); font-weight: 700; }

/* ===========================================================================
   NOTIFICATIONS DROPDOWN (bell — derived action center)
   =========================================================================== */
.hs-bell { position: relative; }
.hs-noti-badge {
    position: absolute; top: 4px; inset-inline-end: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; background: var(--hs-danger); color: #fff;
    font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
    border: 2px solid var(--hs-elevated);
}
.hs-noti-panel {
    position: absolute; top: 46px; left: 0; right: auto;
    width: 320px; max-width: 90vw; z-index: 1100;
    background: var(--hs-elevated); border: 1px solid var(--hs-border);
    border-radius: 11px; box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    overflow: hidden;
}
.hs-noti-head {
    padding: 0.7rem 1rem; font-weight: 700; color: var(--hs-text);
    border-bottom: 1px solid var(--hs-border);
}
.hs-noti-list { max-height: 360px; overflow-y: auto; }
.hs-noti-item {
    display: flex; align-items: center; gap: 10px;
    padding: 0.7rem 1rem; text-decoration: none;
    color: var(--hs-text) !important;
    border-bottom: 1px solid var(--hs-border-soft);
}
.hs-noti-item:last-child { border-bottom: none; }
.hs-noti-item:hover { background: var(--hs-elevated-2); }
.hs-noti-ic {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.hs-noti--warning .hs-noti-ic { background: rgba(245,158,11,0.15); color: #fcd34d; }
.hs-noti--danger  .hs-noti-ic { background: rgba(239,68,68,0.15); color: #fca5a5; }
.hs-noti--info    .hs-noti-ic { background: rgba(56,189,248,0.15); color: #7dd3fc; }
.hs-noti-txt { flex: 1; font-size: 0.85rem; }
.hs-noti-count {
    flex-shrink: 0; min-width: 22px; text-align: center;
    background: var(--hs-bg); border-radius: 9px; padding: 1px 7px;
    font-size: 0.72rem; font-weight: 700; color: var(--hs-text-muted);
}
.hs-noti-empty { padding: 1.4rem 1rem; text-align: center; color: var(--hs-text-muted); font-size: 0.85rem; }

/* Bell dropdown footer — "view all" link into the full Action Center page. */
.hs-noti-foot {
    border-top: 1px solid var(--hs-border-soft); text-align: center;
}
.hs-noti-foot a {
    display: block; padding: 0.6rem 1rem; text-decoration: none;
    color: var(--hs-primary) !important; font-size: 0.82rem; font-weight: 600;
}
.hs-noti-foot a:hover { background: var(--hs-elevated-2); }

/* ===========================================================================
   Per-row action menu (⋮) on every changelist.
   A kebab per row opens the admin's OWN actions and runs the chosen one on
   just that row. Injected client-side (see row-actions IIFE in
   static/js/admin_panel.js), reusing Django's built-in action <form> — so
   there is no per-model code, no new endpoints, and destructive actions keep
   Django's confirmation page. No-ops on pages with no actions.
   =========================================================================== */
th.hs-ra-col, td.hs-ra-col { width: 44px; text-align: center; white-space: nowrap; }
.hs-ra { position: relative; display: inline-block; }
.hs-ra-btn {
    background: transparent; border: 1px solid transparent; color: var(--hs-text-muted);
    cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
    font-size: 20px; line-height: 1; padding: 0; transition: background .15s, color .15s;
}
.hs-ra-btn:hover, .hs-ra.open .hs-ra-btn {
    background: var(--hs-elevated-2); color: var(--hs-text);
}
/* Mounted on <body>, not inside the row. Three ancestors clip an absolutely
   positioned child — `.card-body.table-responsive` (Bootstrap's overflow-x:auto
   forces overflow-y to auto), `#changelist table {overflow:hidden}` (there for
   the rounded corners) and AdminLTE's `.card` — so the menu appeared cut off.
   Fixed positioning escapes every one of them; `left`/`top` come from JS.
   z-index clears AdminLTE's fixed navbar (1030) and modal backdrop (1050). */
.hs-ra-menu {
    position: fixed; left: 0; top: 0; z-index: 1200;
    min-width: 200px; max-height: 320px; overflow-y: auto;
    background: var(--hs-elevated); border: 1px solid var(--hs-border);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); padding: 6px;
}
.hs-ra-item {
    display: block; width: 100%; text-align: right; background: transparent;
    border: 0; color: var(--hs-text); padding: 9px 12px; border-radius: 7px;
    cursor: pointer; font: inherit; white-space: nowrap;
}
.hs-ra-item:hover, .hs-ra-item:focus {
    background: var(--hs-primary-soft); color: var(--hs-primary); outline: none;
}
.hs-ra-item--danger:hover, .hs-ra-item--danger:focus {
    background: rgba(239, 68, 68, 0.14); color: var(--hs-danger);
}

/* ===========================================================================
   Sidebar search — sticky live filter over the nav sections/pages.
   Injected client-side (see sidebar-search IIFE in sidebar_badges.js).
   =========================================================================== */
.hs-search-li {
    position: sticky; top: 0; z-index: 5;
    padding: 10px 12px; margin-bottom: 4px;
    background: var(--hs-elevated);
    border-bottom: 1px solid var(--hs-border-soft);
    list-style: none;
}
.hs-search { position: relative; display: flex; align-items: center; }
.hs-search-ic {
    position: absolute; inset-inline-start: 12px;
    color: var(--hs-text-muted); font-size: 13px; pointer-events: none;
}
.hs-search-input {
    width: 100%; padding: 9px 34px; border-radius: 9px;
    background: var(--hs-bg); border: 1px solid var(--hs-border);
    color: var(--hs-text); font-size: 0.82rem; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.hs-search-input::placeholder { color: var(--hs-text-muted); }
.hs-search-input:focus {
    border-color: var(--hs-primary);
    box-shadow: 0 0 0 3px var(--hs-primary-soft);
}
.hs-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hs-search-clear {
    position: absolute; inset-inline-end: 8px;
    background: transparent; border: 0; color: var(--hs-text-muted);
    font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.hs-search-clear:hover { color: var(--hs-text); background: var(--hs-elevated-2); }
#jazzy-navigation a.nav-link.hs-search-hit {
    background: var(--hs-primary-soft); color: var(--hs-primary); border-radius: 8px;
}
.hs-search-noresult {
    color: var(--hs-text-muted); padding: 14px 16px;
    font-size: 0.8rem; text-align: center; list-style: none;
}

/* ===========================================================================
   CHANGE-FORM POLISH — tabs + inline formsets (products/variants, media, …)
   Applies to every change form; makes multi-inline pages (like the Product
   page with its Variants / Media / Discounts tabs) read as clean cards with a
   comfortable "add row" affordance. Plum accent, full dark coverage, RTL.
   =========================================================================== */

/* --- Change-form tabs (Jazzmin horizontal_tabs, AdminLTE4/BS5) ---
   Scoped to #content-main so only the change-form/changelist tabs are themed. */
#content-main ul.nav-tabs { border-bottom: 1px solid var(--hs-border); gap: 2px; }
#content-main ul.nav-tabs .nav-link {
    color: var(--hs-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    transition: color .15s, background .15s;
}
#content-main ul.nav-tabs .nav-link:hover {
    color: var(--hs-text);
    background: var(--hs-elevated-2);
}
#content-main ul.nav-tabs .nav-link.active {
    color: var(--hs-primary) !important;
    background: var(--hs-elevated) !important;
    border-color: var(--hs-border);
    border-bottom-color: var(--hs-elevated);
}

/* --- Inline formset container as a card --- */
.inline-group {
    background: var(--hs-elevated);
    border: 1px solid var(--hs-border);
    border-radius: 12px;
    padding: 6px 10px 12px;
    margin-bottom: 18px;
}

/* Inline table header + rows */
.inline-group .tabular table { border-collapse: separate; border-spacing: 0; }
.inline-group .tabular thead th {
    background: var(--hs-elevated-2);
    color: var(--hs-text-muted);
    font-size: 0.72rem;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--hs-border);
}
.inline-group .tabular tbody tr,
.inline-group .tabular tr.form-row td { border-color: var(--hs-border-soft); }
.inline-group .tabular tr.form-row:hover > td { background: rgba(138, 90, 143, 0.04); }

/* "Add another …" link → prominent plum pill button.
   The link ships as .btn.btn-default (themed), so override with !important. */
.inline-group .add-row { border-top: 1px dashed var(--hs-border); padding-top: 10px; margin-top: 6px; }
.inline-group .add-row a.addlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hs-primary-soft) !important;
    color: var(--hs-primary) !important;
    border: 1px solid rgba(138, 90, 143, 0.4) !important;
    border-radius: 10px !important;
    padding: 7px 16px !important;
    font-weight: 700;
    font-size: 0.82rem;
    transition: background .15s, color .15s;
}
.inline-group .add-row a.addlink::before { content: "＋"; font-weight: 800; }
.inline-group .add-row a.addlink:hover {
    background: var(--hs-primary) !important;
    color: #06231a !important;
    text-decoration: none;
}

/* Delete checkbox column stays subtle */
.inline-group .tabular td.delete { text-align: center; }