@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================
   CSS Variables
   ========================================= */
:root {
    --app-bg: #ebeef0;
    --surface: #ffffff;
    --surface-soft: #f7fafc;
    --surface-soft-2: #f2f6fb;

    --text: #0f172a;
    --text-soft: #334155;
    --muted: #64748b;
    --muted-2: #94a3b8;

    --line: #dbe4ee;
    --line-strong: #cdd8e5;

    --blue: #2563eb;
    --blue-soft: #edf4ff;

    --green: #16a34a;
    --green-soft: #eefaf2;

    --red: #dc2626;
    --red-soft: #fff3f3;

    --amber: #d97706;
    --amber-soft: #fff8ec;

    --violet: #7c3aed;
    --violet-soft: #f7f3ff;

    --cyan: #0891b2;
    --cyan-soft: #eefbff;

    --slate: #64748b;
    --slate-soft: #f3f6fa;

    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 16px 38px rgba(15, 23, 42, 0.05);

    /* Rentals-specific tokens */
    --r-blue: #4f6df5;
    --r-blue-soft: #f4f7ff;
    --r-blue-border: #dbe4ff;
    --r-green: #16a34a;
    --r-green-soft: #eefaf2;
    --r-green-border: #d7eddd;
    --r-amber: #d97706;
    --r-amber-soft: #fff8ea;
    --r-amber-border: #efe1b8;
    --r-red: #dc2626;
    --r-red-soft: #fff3f3;
    --r-red-border: #f2d4d4;
    --r-slate: #64748b;
    --r-slate-soft: #f5f7fa;
    --r-slate-border: #dde5ee;
    --r-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    --r-radius-xl: 24px;
    --r-radius-lg: 18px;
    --r-radius-md: 14px;
}

/* =========================================
   Base
   ========================================= */
html,
body,
div,
span,
h1, h2, h3, h4, h5, h6,
p, a, th, td, label,
input, select, textarea, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}


html,
body {
    background: #ffffff !important;
    color: var(--text) !important;
}

body {
    outline: 6px solid rgb(255, 255, 255) !important;
}

/* Language selector: the full Arabic RTL layout is introduced with the
   translated interface in the following implementation stage. */
.dds-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-end: 12px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
}

.dds-language-switcher button {
    min-height: 27px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.dds-language-switcher button[aria-pressed="true"] {
    border: 1px solid #bfdbfe;
    background: var(--blue-soft);
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}

.dds-login-language-switcher {
    width: max-content;
    margin: 0 auto 18px;
}

/* Demo credentials are intentionally scoped to the login screen. */
body.login {
    outline: 0 !important;
}

body.login #container {
    box-sizing: border-box;
    width: min(92vw, 460px);
    min-width: 0;
}

body.login #content {
    padding-inline: 28px;
}

.dds-demo-login-card {
    margin-bottom: 22px;
    padding: 20px;
    border: 1px solid rgba(184, 134, 11, 0.38);
    border-radius: 16px;
    background: linear-gradient(145deg, #fffdf6 0%, #ffffff 72%);
    box-shadow: 0 14px 32px rgba(13, 31, 54, 0.09);
    color: #10243e;
}

.dds-demo-login-card__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #a87916;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.dds-demo-login-card h2 {
    margin: 0 0 7px;
    color: #10243e;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.dds-demo-login-card__heading p {
    margin: 0;
    color: #536477;
    font-size: 13px;
    line-height: 1.6;
}

.dds-demo-login-card__credentials {
    display: grid;
    gap: 9px;
    margin: 16px 0 14px;
}

.dds-demo-login-card__credential {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid #e9dfc3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
}

.dds-demo-login-card__credential dt {
    color: #536477;
    font-size: 12px;
    font-weight: 700;
}

.dds-demo-login-card__credential dd {
    margin: 0;
}

.dds-demo-login-card__credential code {
    color: #10243e;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
}

.dds-demo-copy {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #d3b45a;
    border-radius: 8px;
    background: #fffaf0;
    color: #755510;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.dds-demo-copy:hover,
.dds-demo-copy:focus-visible {
    border-color: #ad831e;
    background: #f9edcc;
}

.dds-demo-fill {
    width: 100%;
    min-height: 42px;
    border: 1px solid #10243e;
    border-radius: 10px;
    background: #10243e;
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    transition: background .16s ease, transform .16s ease;
}

.dds-demo-fill:hover,
.dds-demo-fill:focus-visible {
    background: #1b385c;
    transform: translateY(-1px);
}

.dds-main-site-link,
.dds-main-site-link:link,
.dds-main-site-link:visited {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: #765716 !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.dds-main-site-link:hover,
.dds-main-site-link:focus-visible {
    color: #10243e !important;
    text-decoration: underline;
}

@media (max-width: 520px) {
    body.login #container {
        width: calc(100vw - 24px);
        margin-left: auto;
        margin-right: auto;
    }

    body.login #content {
        padding-inline: 16px;
    }

    .dds-demo-login-card {
        padding: 16px;
    }

    .dds-demo-login-card__credential {
        grid-template-columns: 1fr auto;
    }

    .dds-demo-login-card__credential dd {
        grid-column: 1;
        grid-row: 2;
    }

    .dds-demo-copy {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* Baseline Arabic direction. Component-specific RTL refinements are kept with
   their respective screens so English layout remains entirely unchanged. */
html:lang(ar),
html:lang(ar) body {
    direction: rtl;
}

html:lang(ar) body,
html:lang(ar) body * {
    font-family: Tahoma, Arial, "Noto Naskh Arabic", sans-serif !important;
}

html:lang(ar) #header,
html:lang(ar) #content,
html:lang(ar) #content-main,
html:lang(ar) #content-related {
    text-align: right;
}

html:lang(ar) .dds-quick-nav__track {
    direction: rtl;
}

html:lang(ar) .dds-language-switcher {
    direction: ltr;
}

/* =========================================
   Header
   ========================================= */
#header {
    position: sticky !important;
    top: 0;
    z-index: 999 !important;
    flex-wrap: wrap !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
    padding: 10px 18px !important;
}

.dds-quick-nav {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(203, 213, 225, 0.72);
    overflow: hidden;
}

.dds-quick-nav__track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.dds-quick-nav__track::-webkit-scrollbar {
    display: none;
}

.dds-quick-nav__link,
.dds-quick-nav__link:link,
.dds-quick-nav__link:visited {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid #cdd8e5;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #172033 !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dds-quick-nav__link:hover,
.dds-quick-nav__link:focus-visible {
    border-color: #9fc0ff;
    background: #ffffff;
    color: var(--blue) !important;
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.10);
    transform: translateY(-1px);
}

body.dds-dashboard .dds-quick-nav__link--dashboard,
body.app-rentals .dds-quick-nav__link--rentals,
body.app-rental_rates .dds-quick-nav__link--rentals,
body.app-vehicles .dds-quick-nav__link--vehicles,
body.app-vehicle_usage .dds-quick-nav__link--vehicles,
body.app-delegations .dds-quick-nav__link--vehicles,
body.app-customers .dds-quick-nav__link--customers,
body.app-companies .dds-quick-nav__link--customers,
body.app-payments .dds-quick-nav__link--payments,
body.app-deposits .dds-quick-nav__link--deposits,
body.app-traffic_fines .dds-quick-nav__link--traffic-fines,
body.app-invoices .dds-quick-nav__link--invoices,
body.app-reports .dds-quick-nav__link--reports {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff !important;
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.20);
}

.brand-shell {
    display: flex;
    align-items: center;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #16365f, #214a7b);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .05em;
    box-shadow: 0 12px 24px rgba(22, 54, 95, 0.18);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-copy strong {
    color: var(--text) !important;
    font-size: 15px;
    font-weight: 800;
}

.brand-copy small {
    color: var(--muted) !important;
    font-size: 12px;
    margin-top: 4px;
}

/* =========================================
   Top tools
   ========================================= */
#user-tools,
#user-tools a,
#user-tools a:link,
#user-tools a:visited,
#user-tools button,
#user-tools .theme-toggle {
    color: #546579 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#user-tools a:hover,
#user-tools button:hover,
#user-tools .theme-toggle:hover {
    color: var(--blue) !important;
}

/* =========================================
   Breadcrumbs
   ========================================= */
div.breadcrumbs {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 16px !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
}

div.breadcrumbs a,
div.breadcrumbs a:link,
div.breadcrumbs a:visited,
div.breadcrumbs span {
    color: var(--muted) !important;
}

div.breadcrumbs a:hover {
    color: var(--blue) !important;
}

/* =========================================
   Content
   ========================================= */
#content {
    padding: 22px 24px 30px !important;
    background: transparent !important;
}

#content-main {
    background: transparent !important;
}

/* =========================================
   Sidebar
   ========================================= */
#nav-sidebar {
    background: transparent !important;
    border-right: 0 !important;
    padding: 10px 8px 16px 0 !important;
    width: 230px !important;
}

#nav-sidebar .module {
    margin-bottom: 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#nav-sidebar .module table {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#nav-sidebar .module th,
#nav-sidebar .module caption,
#nav-sidebar .module h2 {
    background: transparent !important;
    color: #8fa0b4 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding: 0 8px 8px !important;
    margin: 0 !important;
}

#nav-sidebar .section {
    color: #27b6c1 !important;
}

#nav-sidebar caption a,
#nav-sidebar caption a.section,
#nav-sidebar th a {
    color: #27b6c1 !important;
    text-decoration: none !important;
}

#nav-sidebar .module tr {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

#nav-sidebar .module th[scope="row"] {
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
}

#nav-sidebar .module th[scope="row"] a {
    display: block !important;
    padding: 12px 12px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
}

#nav-sidebar .module th[scope="row"] a:hover {
    background: var(--blue-soft) !important;
    color: var(--blue) !important;
    border-radius: 10px !important;
    transition: all .16s ease !important;
}

#nav-sidebar .module td {
    width: 58px !important;
    padding: 8px 8px 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#nav-sidebar td a.addlink {
    display: none !important;
}

/* =========================================
   Sidebar search box
   ========================================= */
#nav-filter,
#nav-sidebar input,
#nav-sidebar input[type="text"] {
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid var(--line-strong) !important;
    background: #ffffff !important;
    color: var(--text) !important;
    padding: 0 12px !important;
    box-shadow: none !important;
}

#nav-filter::placeholder,
#nav-sidebar input::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
}

/* =========================================
   Tables / lists
   ========================================= */
#result_list table,
.change-list table,
.module table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
}

#result_list thead th,
.change-list thead th,
.module thead th {
    background: #f7fafc !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 14px 12px !important;
}

#result_list tbody td,
#result_list tbody th,
.change-list tbody td,
.change-list tbody th {
    background: #ffffff !important;
    color: var(--text) !important;
    border-bottom: 1px solid #eef3f8 !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

#result_list tbody tr:hover td,
#result_list tbody tr:hover th,
.change-list tbody tr:hover td,
.change-list tbody tr:hover th {
    background: #fbfdff !important;
}

/* =========================================
   Search toolbar
   ========================================= */
#toolbar {
    margin-bottom: 16px !important;
    padding: 14px 16px !important;
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-sm) !important;
}

#toolbar input[type="text"] {
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid var(--line-strong) !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    color: var(--text) !important;
}

#toolbar input[type="text"]::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
}

/* =========================================
   Forms
   ========================================= */
.form-row,
.aligned .form-row {
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--line) !important;
}

.aligned label {
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="password"],
select,
textarea {
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid var(--line-strong) !important;
    background: #ffffff !important;
    color: var(--text) !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

textarea {
    min-height: 110px !important;
}

/* =========================================
   Inline groups
   ========================================= */
.inline-group {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-shadow: var(--shadow-md) !important;
}

/* =========================================
   Filters rail
   ========================================= */
#changelist-filter {
    background: transparent !important;
    border-left: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 16px !important;
}

#changelist-filter h2 {
    background: transparent !important;
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 0 0 12px !important;
    margin-bottom: 12px !important;
}

#changelist-filter h3 {
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding: 0 !important;
    margin: 18px 0 10px !important;
}

#changelist-filter li a {
    background: rgba(255,255,255,0.86) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    display: block !important;
    padding: 10px 12px !important;
    margin: 6px 0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all .16s ease !important;
}

#changelist-filter li a:hover {
    background: #ffffff !important;
    border-color: #bfd7ff !important;
    color: var(--blue) !important;
}

#changelist-filter li.selected a {
    background: var(--blue-soft) !important;
    color: var(--blue) !important;
    border-color: #bfd7ff !important;
}

/* =========================================
   Buttons / object tools
   ========================================= */
.object-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: fit-content !important;
    margin-left: auto !important;
}

.object-tools a,
#content-main td a.addlink,
#content-main .submit-row input[type=submit],
#content-main .submit-row a,
#content-main .submit-row button {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all .16s ease !important;
}

.object-tools a.addlink,
#content-main td a.addlink,
#content-main .submit-row input.default {
    border-bottom: 3px solid var(--green) !important;
}

.object-tools a[href*="import"] {
    border-bottom: 3px solid var(--blue) !important;
}

.object-tools a[href*="export"] {
    border-bottom: 3px solid var(--slate) !important;
}

#content-main .submit-row input:not(.default) {
    border-bottom: 3px solid var(--blue) !important;
}

#content-main .submit-row p.deletelink-box a.deletelink {
    border-bottom: 3px solid var(--red) !important;
    color: #991b1b !important;
}

.object-tools a:hover,
#content-main td a.addlink:hover,
#content-main .submit-row input[type=submit]:hover,
#content-main .submit-row a:hover,
#content-main .submit-row button:hover {
    border-color: #bfd7ff !important;
    color: var(--blue) !important;
    background: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* =========================================
   Submit row
   ========================================= */
.submit-row {
    position: sticky !important;
    bottom: 0;
    z-index: 20;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 14px 16px !important;
    margin-top: 18px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-md) !important;
}

/* =========================================
   Messages
   ========================================= */
ul.messagelist li {
    border-radius: 16px !important;
    border: 1px solid var(--line) !important;
    background: #ffffff !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* =========================================
   Generic module boxes
   ========================================= */
.dashboard #content-main .module,
.app-index #content-main .module {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-md) !important;
}

/* =========================================
   Rentals — Payment summary box
   ========================================= */
.rental-payment-summary {
    width: 600px;
    max-width: 100%;
    padding: 18px 20px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    margin: 0 0 20px 0;
}

.rental-payment-summary__title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 14px;
}

.rental-payment-summary__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 18px;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 0;
    font-size: 18px;
}

.rental-payment-summary__row--last {
    border-bottom: none;
    padding: 14px 16px;
    margin-top: 10px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff1f2;
    align-items: end;
}

.rental-payment-summary__label {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.rental-payment-summary__label--strong {
    font-weight: 700;
}

.rental-payment-summary__value {
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    text-align: right;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    line-height: 1.2;
    align-self: end;
}

.rental-payment-summary__row--nettotal {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
}

.rental-payment-summary__label--nettotal {
    font-size: 19px;
    font-weight: 800;
    color: #1d4ed8;
}

.rental-payment-summary__value--nettotal {
    font-size: 24px;
    font-weight: 800;
    color: #1d4ed8;
    line-height: 1.1;
}

.rental-payment-summary__row--last .rental-payment-summary__label--strong {
    font-size: 22px;
    font-weight: 900;
    color: #b91c1c;
}

.rental-payment-summary__row--last .rental-payment-summary__value--remaining {
    font-size: 32px;
    font-weight: 900;
    color: #dc2626;
    line-height: 1;
}

.rental-payment-summary__value--paid {
    color: #16a34a;
}

.rental-payment-summary__value--remaining {
    color: #dc2626;
}

/* =========================================
   Rentals — Change form field highlights
   ========================================= */
body.app-rentals.model-rental.change-form .form-row.field-net_total {
    padding: 14px 16px !important;
    margin-bottom: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
}

body.app-rentals.model-rental.change-form .form-row.field-net_total label {
    font-size: 22px;
    font-weight: 800;
    color: #1d4ed8;
}

body.app-rentals.model-rental.change-form .form-row.field-net_total .readonly {
    font-size: 30px;
    font-weight: 900;
    color: #1d4ed8;
    line-height: 1.1;
}

body.app-rentals.model-rental.change-form .form-row.field-status,
body.app-rentals.model-rental.change-form .form-row.field-pickup_odometer,
body.app-rentals.model-rental.change-form .form-row.field-return_odometer,
body.app-rentals.model-rental.change-form .form-row.field-pickup_date,
body.app-rentals.model-rental.change-form .form-row.field-expected_return_date,
body.app-rentals.model-rental.change-form .form-row.field-actual_return_date,
body.app-rentals.model-rental.change-form .form-row.field-daily_rate,
body.app-rentals.model-rental.change-form .form-row.field-deposit_amount,
body.app-rentals.model-rental.change-form .form-row.field-tax_percentage,
body.app-rentals.model-rental.change-form .form-row.field-tax_percent,
body.app-rentals.model-rental.change-form .form-row.field-traffic_fines,
body.app-rentals.model-rental.change-form .form-row.field-damage_fees,
body.app-rentals.model-rental.change-form .form-row.field-other_charges,
body.app-rentals.model-rental.change-form .form-row.field-rental_days,
body.app-rentals.model-rental.change-form .form-row.field-auto_renew,
body.app-rentals.model-rental.change-form .form-row.field-created_by,
body.app-rentals.model-rental.change-form .form-row.field-created_at,
body.app-rentals.model-rental.change-form .form-row.field-start_date,
body.app-rentals.model-rental.change-form .form-row.field-end_date,
body.app-rentals.model-rental.change-form .form-row.field-vat_percentage,
body.app-rentals.model-rental.change-form .form-row.field-customer,
body.app-rentals.model-rental.change-form .form-row.field-vehicle,
body.app-rentals.model-rental.change-form .form-row.field-branch {
    padding: 10px 14px !important;
    margin-bottom: 8px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
}

body.app-rentals.model-rental.change-form .form-row.field-status label,
body.app-rentals.model-rental.change-form .form-row.field-pickup_odometer label,
body.app-rentals.model-rental.change-form .form-row.field-return_odometer label,
body.app-rentals.model-rental.change-form .form-row.field-pickup_date label,
body.app-rentals.model-rental.change-form .form-row.field-expected_return_date label,
body.app-rentals.model-rental.change-form .form-row.field-actual_return_date label,
body.app-rentals.model-rental.change-form .form-row.field-daily_rate label,
body.app-rentals.model-rental.change-form .form-row.field-deposit_amount label,
body.app-rentals.model-rental.change-form .form-row.field-tax_percentage label,
body.app-rentals.model-rental.change-form .form-row.field-tax_percent label,
body.app-rentals.model-rental.change-form .form-row.field-traffic_fines label,
body.app-rentals.model-rental.change-form .form-row.field-damage_fees label,
body.app-rentals.model-rental.change-form .form-row.field-other_charges label,
body.app-rentals.model-rental.change-form .form-row.field-rental_days label,
body.app-rentals.model-rental.change-form .form-row.field-auto_renew label,
body.app-rentals.model-rental.change-form .form-row.field-created_by label,
body.app-rentals.model-rental.change-form .form-row.field-created_at label,
body.app-rentals.model-rental.change-form .form-row.field-start_date label,
body.app-rentals.model-rental.change-form .form-row.field-end_date label,
body.app-rentals.model-rental.change-form .form-row.field-vat_percentage label,
body.app-rentals.model-rental.change-form .form-row.field-customer label,
body.app-rentals.model-rental.change-form .form-row.field-vehicle label,
body.app-rentals.model-rental.change-form .form-row.field-branch label {
    font-size: 17px;
    font-weight: 700;
    color: #1e3a8a;
}

body.app-rentals.model-rental.change-form .form-row.field-status .readonly,
body.app-rentals.model-rental.change-form .form-row.field-pickup_odometer .readonly,
body.app-rentals.model-rental.change-form .form-row.field-pickup_date .readonly,
body.app-rentals.model-rental.change-form .form-row.field-expected_return_date .readonly,
body.app-rentals.model-rental.change-form .form-row.field-actual_return_date .readonly,
body.app-rentals.model-rental.change-form .form-row.field-daily_rate .readonly,
body.app-rentals.model-rental.change-form .form-row.field-deposit_amount .readonly,
body.app-rentals.model-rental.change-form .form-row.field-tax_percentage .readonly,
body.app-rentals.model-rental.change-form .form-row.field-tax_percent .readonly,
body.app-rentals.model-rental.change-form .form-row.field-damage_fees .readonly,
body.app-rentals.model-rental.change-form .form-row.field-other_charges .readonly,
body.app-rentals.model-rental.change-form .form-row.field-rental_days .readonly,
body.app-rentals.model-rental.change-form .form-row.field-created_by .readonly,
body.app-rentals.model-rental.change-form .form-row.field-created_at .readonly,
body.app-rentals.model-rental.change-form .form-row.field-start_date .readonly,
body.app-rentals.model-rental.change-form .form-row.field-end_date .readonly,
body.app-rentals.model-rental.change-form .form-row.field-vat_percentage .readonly,
body.app-rentals.model-rental.change-form .form-row.field-customer .readonly,
body.app-rentals.model-rental.change-form .form-row.field-vehicle .readonly,
body.app-rentals.model-rental.change-form .form-row.field-branch .readonly {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

body.app-rentals.model-rental.change-form .form-row.field-status .readonly {
    color: #16a34a;
}

body.app-rentals.model-rental.change-form .form-row.field-daily_rate .readonly,
body.app-rentals.model-rental.change-form .form-row.field-deposit_amount .readonly,
body.app-rentals.model-rental.change-form .form-row.field-tax_percentage .readonly,
body.app-rentals.model-rental.change-form .form-row.field-tax_percent .readonly,
body.app-rentals.model-rental.change-form .form-row.field-damage_fees .readonly,
body.app-rentals.model-rental.change-form .form-row.field-other_charges .readonly {
    color: #1d4ed8;
}

body.app-rentals.model-rental.change-form .form-row.field-return_odometer input,
body.app-rentals.model-rental.change-form .form-row.field-traffic_fines input {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px 10px;
}

body.app-rentals.model-rental.change-form .form-row.field-traffic_fines input {
    color: #1d4ed8;
}

/* Readonly links */
body.app-rentals.model-rental.change-form .form-row.field-created_by .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-customer .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-vehicle .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-branch .readonly a {
    color: #2563eb;
    font-weight: 800;
    text-decoration: none;
}

body.app-rentals.model-rental.change-form .form-row.field-created_by .readonly a:hover,
body.app-rentals.model-rental.change-form .form-row.field-customer .readonly a:hover,
body.app-rentals.model-rental.change-form .form-row.field-vehicle .readonly a:hover,
body.app-rentals.model-rental.change-form .form-row.field-branch .readonly a:hover {
    text-decoration: underline;
}

/* Action buttons */
body.app-rentals.model-rental.change-form .form-row.field-print_contract_button,
body.app-rentals.model-rental.change-form .form-row.field-post_rental_button,
body.app-rentals.model-rental.change-form .form-row.field-collect_contract_and_deposit_button,
body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button,
body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button {
    padding: 12px 14px !important;
    margin-bottom: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

body.app-rentals.model-rental.change-form .form-row.field-print_contract_button label,
body.app-rentals.model-rental.change-form .form-row.field-post_rental_button label,
body.app-rentals.model-rental.change-form .form-row.field-collect_contract_and_deposit_button label,
body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button label,
body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button label {
    font-size: 16px;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

body.app-rentals.model-rental.change-form .form-row.field-print_contract_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-post_rental_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-collect_contract_and_deposit_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-print_contract_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-post_rental_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-collect_contract_and_deposit_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-print_contract_button .readonly input[type="submit"],
body.app-rentals.model-rental.change-form .form-row.field-post_rental_button .readonly input[type="submit"],
body.app-rentals.model-rental.change-form .form-row.field-collect_contract_and_deposit_button .readonly input[type="submit"],
body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button .readonly input[type="submit"],
body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button .readonly input[type="submit"] {
    display: inline-block;
    min-width: 190px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

body.app-rentals.model-rental.change-form .form-row.field-post_rental_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-post_rental_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-post_rental_button .readonly input[type="submit"] {
    background: #0f766e;
}

body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-collect_traffic_fine_button .readonly input[type="submit"] {
    background: #d97706;
}

body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-return_vehicle_button .readonly input[type="submit"] {
    background: #dc2626;
}

body.app-rentals.model-rental.change-form .form-row.field-print_contract_button .readonly a,
body.app-rentals.model-rental.change-form .form-row.field-print_contract_button .readonly button,
body.app-rentals.model-rental.change-form .form-row.field-print_contract_button .readonly input[type="submit"] {
    background: #475569;
}

/* =========================================
   Rentals — Change list shell
   ========================================= */
.rental-shell {
    display: grid;
    gap: 18px;
    padding: 6px 0 10px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.rental-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 15 !important;
    display: grid;
    gap: 14px;
    padding: 12px 0 10px;
    background: linear-gradient(to bottom, rgba(238,243,248,.98), rgba(238,243,248,.9)) !important;
    backdrop-filter: blur(10px) !important;
}

.rental-head__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.rental-head__eyebrow {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--r-blue);
}

.rental-head__title {
    margin: 4px 0 6px;
    font-size: 2rem;
    line-height: 1.05;
    color: var(--text);
}

.rental-head__subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.rental-tools {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rental-tools li {
    list-style: none !important;
}

/* Primary action: a clear, premium entry point for new rental contracts. */
body.app-rentals.model-rental.change-list .rental-tools a.rental-create-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 44px !important;
    padding: 0 19px !important;
    border: 1px solid #0d315f !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #102f59 0%, #174f88 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    box-shadow: 0 10px 20px rgba(16, 47, 89, .22), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

body.app-rentals.model-rental.change-list .rental-tools a.rental-create-button span {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
}

body.app-rentals.model-rental.change-list .rental-tools a.rental-create-button:hover {
    background: linear-gradient(135deg, #0b2749 0%, #123f70 100%) !important;
    color: #ffffff !important;
    border-color: #0b2749 !important;
    box-shadow: 0 14px 26px rgba(16, 47, 89, .28), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    transform: translateY(-2px) !important;
}

body.app-rentals.model-rental.change-list .rental-tools a.rental-create-button:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .38) !important;
    outline-offset: 3px !important;
}

.rental-command {
    padding: 10px 14px;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--r-line);
    border-radius: 12px;
    box-shadow: var(--r-shadow);
    max-width: 100%;
}

.rental-command__form {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
}

.rental-command__group {
    display: grid;
    gap: 10px;
}

.rental-command__label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rental-date-range {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.rental-date-field {
    display: grid;
    gap: 4px;
    min-width: 140px;
}

.rental-date-field label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.rental-date-field input {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--r-line);
    background: #fff;
    color: var(--text);
    font-size: 13px;
}

.rental-command__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.rental-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
    transition: all .16s ease;
}

.rental-btn--primary {
    border: 0;
    background: linear-gradient(135deg, #1f4edd, #3b6bf2);
    color: #fff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
    cursor: pointer;
}

.rental-btn--ghost {
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--text) !important;
}

/* =========================================
   Rentals — Status cards
   ========================================= */
.rental-status-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.rental-status-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    min-height: unset !important;
    padding: 15px !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 18px !important;
    border: 1px solid var(--r-line) !important;
    border-bottom-width: 4px !important;
    box-shadow: var(--r-shadow) !important;
    color: inherit !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.rental-status-card:hover {
    transform: translateY(-2px) !important;
    border-color: #c9d8ea !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08) !important;
}

.rental-status-card__count {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
}

.rental-status-card__label {
    font-size: 12px;
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 5px;
}

.rental-status-card--all {
    background: var(--r-blue-soft) !important;
    border-color: var(--r-blue-border) !important;
    border-bottom-color: var(--r-blue) !important;
}
.rental-status-card--all .rental-status-card__label { color: var(--r-blue) !important; }

.rental-status-card--active {
    background: var(--r-green-soft) !important;
    border-color: var(--r-green-border) !important;
    border-bottom-color: #22c55e !important;
}
.rental-status-card--active .rental-status-card__label { color: var(--r-green) !important; }

.rental-status-card--completed {
    background: var(--r-amber-soft) !important;
    border-color: var(--r-amber-border) !important;
    border-bottom-color: #f59e0b !important;
}
.rental-status-card--completed .rental-status-card__label { color: var(--r-amber) !important; }

.rental-status-card--cancelled {
    background: var(--r-slate-soft) !important;
    border-color: var(--r-slate-border) !important;
    border-bottom-color: var(--r-slate) !important;
}
.rental-status-card--cancelled .rental-status-card__label { color: var(--r-slate) !important; }

.rental-status-card--overdue {
    background: var(--r-red-soft) !important;
    border-color: var(--r-red-border) !important;
    border-bottom-color: #ef4444 !important;
}
.rental-status-card--overdue .rental-status-card__label { color: var(--r-red) !important; }

/* =========================================
   Rentals — Body layout
   ========================================= */
.rental-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
    align-items: start;
}

.rental-main {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.rental-search #toolbar {
    margin: 0 !important;
}

.rental-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.rental-toolbar--bottom {
    margin-top: 14px;
}

.rental-results {
    min-width: 0;
}

.rental-filters {
    position: sticky;
    top: 176px;
    align-self: start;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.rental-filters__inner {
    padding: 18px;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius-xl);
    box-shadow: var(--r-shadow);
}

.rental-filter-clear a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--r-blue-soft);
    border: 1px solid var(--r-blue-border);
    color: var(--r-blue) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 800;
}

/* =========================================
   Rentals — change-list overrides
   ========================================= */
body.app-rentals.model-rental.change-list .rental-body,
body.app-rentals.model-rental.change-list .rental-main,
body.app-rentals.model-rental.change-list #changelist-form,
body.app-rentals.model-rental.change-list .rental-results {
    overflow: visible !important;
    max-height: none !important;
}

body.app-rentals.model-rental.change-list .rental-filters,
body.app-rentals.model-rental.change-list #changelist-filter {
    position: static !important;
    top: auto !important;
    max-height: none !important;
}

body.app-rentals.model-rental.change-list .rental-results thead th {
    position: static !important;
    top: auto !important;
}

body.app-rentals.model-rental.change-list div.breadcrumbs {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

body.app-rentals.model-rental.change-list #content-main,
body.app-rentals.model-rental.change-list .rental-shell {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================
   Vehicles — horizontal scroll
   ========================================= */
body.app-vehicles.model-vehicle.change-list #changelist-form .results {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

body.app-vehicles.model-vehicle.change-list #changelist-form .results table {
    min-width: 1350px;
    width: max-content;
}

body.app-vehicles.model-vehicle.change-list #changelist-form .results::-webkit-scrollbar {
    height: 10px;
}

body.app-vehicles.model-vehicle.change-list #changelist-form .results::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

body.app-vehicles.model-vehicle.change-list #changelist-form .results::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1280px) {
    .rental-status-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .rental-body {
        grid-template-columns: 1fr;
    }

    .rental-filters {
        position: static;
    }
}

@media (max-width: 1024px) {
    #content {
        padding: 16px 14px 24px !important;
    }

    #header {
        padding: 10px 12px !important;
    }

    .dds-quick-nav {
        margin-top: 8px;
        padding-top: 8px;
    }

    .dds-quick-nav__link,
    .dds-quick-nav__link:link,
    .dds-quick-nav__link:visited {
        min-height: 30px;
        padding: 0 11px;
        font-size: 11px;
    }

    .brand-copy small {
        display: none;
    }

    body.app-rentals.model-rental.change-list #content-main {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body.app-rentals.model-rental.change-list .rental-body {
        display: block;
        overflow: visible;
    }
}

@media (max-width: 860px) {
    .rental-status-cards {
        grid-template-columns: 1fr !important;
    }

    .rental-date-range {
        flex-direction: column;
        align-items: stretch;
    }

    .rental-date-field {
        min-width: 0;
    }
}

/* =========================================
   Dark mode
   ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --app-bg: #0b1220;
        --surface: #0f172a;
        --surface-soft: #111b2d;
        --surface-soft-2: #131e33;

        --text: #e5eefb;
        --text-soft: #cbd5e1;
        --muted: #94a3b8;
        --muted-2: #7f8ea3;

        --line: #1e293b;
        --line-strong: #334155;

        --shadow-sm: none;
        --shadow-md: none;
    }

    /* ===== الخلفية العامة ===== */
    html,
    body,
    #container,
    #main,
    .main,
    #content,
    #content-main {
        background: var(--app-bg) !important;
        color: var(--text) !important;
    }

    body {
        outline: 6px solid var(--app-bg) !important;
    }

    #content h1,
    #content h2,
    #content h3,
    .brand-copy strong,
    .module h2,
    .module caption,
    .module h3 {
        color: var(--text) !important;
    }

    div.breadcrumbs,
    div.breadcrumbs a,
    div.breadcrumbs a:link,
    div.breadcrumbs a:visited,
    div.breadcrumbs span,
    #user-tools,
    #user-tools a,
    #user-tools a:link,
    #user-tools a:visited,
    .aligned label {
        color: var(--muted) !important;
    }

    /* ===== الهيدر ===== */
    #header {
        background: rgba(11, 18, 32, 0.94) !important;
        border-bottom: 1px solid var(--line) !important;
        box-shadow: none !important;
    }

    /* ===== السايدبار ===== */
    #nav-sidebar,
    #nav-sidebar .module,
    #nav-sidebar .module table,
    #nav-sidebar .module th[scope="row"],
    #nav-sidebar .module td {
        background: transparent !important;
        box-shadow: none !important;
    }

    #nav-sidebar .module th,
    #nav-sidebar .module caption,
    #nav-sidebar .module h2 {
        color: var(--muted) !important;
    }

    #nav-sidebar .module tr {
        background: var(--surface) !important;
        border: 1px solid var(--line) !important;
    }

    #nav-sidebar .module th[scope="row"] a {
        color: var(--text) !important;
    }

    #nav-sidebar .module th[scope="row"] a:hover {
        background: #111b2d !important;
        color: #93c5fd !important;
    }

    #nav-filter,
    #nav-sidebar input,
    #nav-sidebar input[type="text"] {
        background: #111827 !important;
        color: var(--text) !important;
        border: 1px solid var(--line-strong) !important;
    }

    /* ===== الصناديق والجداول ===== */
    #toolbar,
    .inline-group,
    .submit-row,
    .dashboard #content-main .module,
    .app-index #content-main .module,
    fieldset.module,
    fieldset.module.aligned,
    #result_list table,
    .change-list table,
    .module table {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--line) !important;
        box-shadow: none !important;
    }

    #result_list thead th,
    .change-list thead th,
    .module thead th {
        background: #111b2d !important;
        color: var(--muted) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    #result_list tbody td,
    #result_list tbody th,
    .change-list tbody td,
    .change-list tbody th {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    #result_list tbody tr:hover td,
    #result_list tbody tr:hover th,
    .change-list tbody tr:hover td,
    .change-list tbody tr:hover th {
        background: #111b2d !important;
    }

    .form-row,
    .aligned .form-row {
        border-bottom: 1px solid var(--line) !important;
    }

    /* ===== الحقول ===== */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="password"],
    select,
    textarea,
    #toolbar input[type="text"] {
        background: #111827 !important;
        color: var(--text) !important;
        border: 1px solid var(--line-strong) !important;
        box-shadow: none !important;
    }

    input[type="text"]::placeholder,
    input[type="number"]::placeholder,
    input[type="email"]::placeholder,
    input[type="date"]::placeholder,
    input[type="datetime-local"]::placeholder,
    input[type="password"]::placeholder,
    textarea::placeholder,
    #toolbar input[type="text"]::placeholder {
        color: var(--muted) !important;
        opacity: 1 !important;
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="date"]:focus,
    input[type="datetime-local"]:focus,
    input[type="password"]:focus,
    select:focus,
    textarea:focus,
    #toolbar input[type="text"]:focus {
        background: #0f172a !important;
        color: var(--text) !important;
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16) !important;
        outline: none !important;
    }

    /* ===== الروابط والأزرار والفلاتر ===== */
    #changelist-filter {
        background: transparent !important;
    }

    #changelist-filter h2,
    #changelist-filter h3 {
        color: var(--text) !important;
        border-color: var(--line) !important;
    }

    #changelist-filter li a,
    .object-tools a,
    #content-main td a.addlink,
    #content-main .submit-row input[type="submit"],
    #content-main .submit-row a,
    #content-main .submit-row button {
        background: #111827 !important;
        color: var(--text) !important;
        border: 1px solid var(--line-strong) !important;
        box-shadow: none !important;
    }

    #changelist-filter li a:hover,
    .object-tools a:hover,
    #content-main td a.addlink:hover,
    #content-main .submit-row input[type="submit"]:hover,
    #content-main .submit-row a:hover,
    #content-main .submit-row button:hover {
        background: #0f172a !important;
        color: #93c5fd !important;
        border-color: #475569 !important;
    }

    #changelist-filter li.selected a {
        background: #172554 !important;
        color: #bfdbfe !important;
        border-color: #1d4ed8 !important;
    }

    /* ===== Page Vehicle Usage تحديدًا ===== */
    body.app-vehicle_usage.model-vehicleusage.change-form #content,
    body.app-vehicle_usage.model-vehicleusage.change-form #content-main,
    body.app-vehicle_usage.model-vehicleusage.change-form fieldset.module.aligned,
    body.app-vehicle_usage.model-vehicleusage.change-form .inline-group {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--line) !important;
    }

    body.app-vehicle_usage.model-vehicleusage.change-form .form-row label,
    body.app-vehicle_usage.model-vehicleusage.change-form .form-row .readonly,
    body.app-vehicle_usage.model-vehicleusage.change-form .help,
    body.app-vehicle_usage.model-vehicleusage.change-form p.help,
    body.app-vehicle_usage.model-vehicleusage.change-form .description {
        color: var(--text) !important;
    }
}
/* =========================================
   Rentals — change form grid layout
   ========================================= */

body.app-rentals.model-rental.change-form #content-main {
    max-width: 100% !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: .45rem .8rem !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1rem 1rem .85rem !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: .6rem !important;
    overflow: visible !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .form-row > fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned legend {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 0 !important;
    margin: 0 0 3px !important;
    float: none !important;
    width: 100% !important;
    line-height: 1 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .flex-container > label:first-child {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin: 0 0 3px !important;
    line-height: 1 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .flex-container:not(.checkbox-row) {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned input[type="text"],
body.app-rentals.model-rental.change-form fieldset.module.aligned input[type="number"],
body.app-rentals.model-rental.change-form fieldset.module.aligned select {
    width: 100% !important;
    height: 28px !important;
    font-size: 12px !important;
    padding: 0 7px !important;
    border: 1px solid #c8d4e0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned textarea {
    width: 100% !important;
    height: 54px !important;
    font-size: 12px !important;
    padding: 5px 7px !important;
    border: 1px solid #c8d4e0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
    resize: none !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned input:focus,
body.app-rentals.model-rental.change-form fieldset.module.aligned select:focus,
body.app-rentals.model-rental.change-form fieldset.module.aligned textarea:focus {
    outline: none !important;
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.12) !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .readonly {
    font-size: 12px !important;
    color: var(--text-soft) !important;
    background: var(--surface-soft-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    padding: 0 7px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .related-widget-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
}
body.app-rentals.model-rental.change-form fieldset.module.aligned .related-widget-wrapper select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned p.datetime {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
body.app-rentals.model-rental.change-form fieldset.module.aligned p.datetime label {
    font-size: 9px !important;
    color: var(--muted-2) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
body.app-rentals.model-rental.change-form fieldset.module.aligned .vDateField,
body.app-rentals.model-rental.change-form fieldset.module.aligned .vTimeField {
    width: 100px !important;
    display: inline-block !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .checkbox-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    padding-top: 16px !important;
    min-height: 28px !important;
}
body.app-rentals.model-rental.change-form fieldset.module.aligned .checkbox-row input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    border: 1px solid #c8d4e0 !important;
    background: #fff !important;
    cursor: pointer !important;
}
body.app-rentals.model-rental.change-form fieldset.module.aligned .vCheckboxLabel {
    font-size: 12px !important;
    color: var(--text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .form-row.field-contract_notes {
    grid-column: span 2 !important;
}
body.app-rentals.model-rental.change-form fieldset.module.aligned .form-row.field-start_date,
body.app-rentals.model-rental.change-form fieldset.module.aligned .form-row.field-end_date {
    grid-column: span 2 !important;
}

.live-payment-summary-box,
.rental-payment-summary {
    display: none !important;
}

body.app-rentals.model-rental.change-form .submit-row {
    border-radius: var(--radius-md) !important;
    padding: .65rem 1rem !important;
    margin-top: .4rem !important;
}

@media (prefers-color-scheme: dark) {
    body.app-rentals.model-rental.change-form fieldset.module.aligned input[type="text"],
    body.app-rentals.model-rental.change-form fieldset.module.aligned input[type="number"],
    body.app-rentals.model-rental.change-form fieldset.module.aligned select,
    body.app-rentals.model-rental.change-form fieldset.module.aligned textarea {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #e5eefb !important;
    }
    body.app-rentals.model-rental.change-form fieldset.module.aligned .checkbox-row input[type="checkbox"] {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
}
body.app-rentals.model-rental.change-form #content {
    background: #ffffff !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned {
    background: #ffffff !important;
    border: 1px solid #c2d3e3 !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.08) !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned input[type="text"],
body.app-rentals.model-rental.change-form fieldset.module.aligned input[type="number"],
body.app-rentals.model-rental.change-form fieldset.module.aligned select,
body.app-rentals.model-rental.change-form fieldset.module.aligned textarea {
    background: #ffffff !important;
    border: 1px solid #a8bdd0 !important;
    box-shadow: inset 0 1px 3px rgba(15,23,42,.06) !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned input:focus,
body.app-rentals.model-rental.change-form fieldset.module.aligned select:focus,
body.app-rentals.model-rental.change-form fieldset.module.aligned textarea:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .readonly {
    background: #edf2f7 !important;
    border: 1px solid #c2d3e3 !important;
    color: #3d5a7a !important;
    font-weight: 500 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned legend,
body.app-rentals.model-rental.change-form fieldset.module.aligned .flex-container > label:first-child {
    color: #3d5a7a !important;
    font-weight: 700 !important;
}

body.app-rentals.model-rental.change-form fieldset.module.aligned .form-row.field-start_date,
body.app-rentals.model-rental.change-form fieldset.module.aligned .form-row.field-end_date {
    grid-column: span 2 !important;
}
/* =========================================
   Accounting — Journal Entry form
   ========================================= */

body.app-accounting.model-journalentry.change-form #content {
    background: #d6e2ef !important;
}

/* نجعل الفورم flex لنتحكم بالترتيب */
body.app-accounting.model-journalentry.change-form #content-main > form > div {
    display: flex !important;
    flex-direction: column !important;
}

/* items inline يصعد للأعلى بعد أول fieldset */
body.app-accounting.model-journalentry.change-form #items-group {
    order: 2 !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned:first-of-type {
    order: 1 !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned {
    order: 3 !important;
}

body.app-accounting.model-journalentry.change-form .inline-group:not(#items-group) {
    order: 4 !important;
}

body.app-accounting.model-journalentry.change-form .submit-row {
    order: 99 !important;
}

/* ── Header fieldset grid ── */
body.app-accounting.model-journalentry.change-form fieldset.module.aligned {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: .45rem .8rem !important;
    background: #ffffff !important;
    border: 1px solid #c2d3e3 !important;
    border-radius: var(--radius-lg) !important;
    padding: 1rem !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
    margin-bottom: .6rem !important;
    overflow: visible !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned .fieldset-heading {
    grid-column: 1 / -1 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #3d5a7a !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin: 0 0 .4rem !important;
    padding-bottom: .4rem !important;
    border-bottom: 1px solid #d0dcea !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned .flex-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned .flex-container > label:first-child {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #3d5a7a !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin: 0 !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned input[type="text"],
body.app-accounting.model-journalentry.change-form fieldset.module.aligned select {
    width: 100% !important;
    height: 28px !important;
    font-size: 12px !important;
    padding: 0 7px !important;
    border: 1px solid #a8bdd0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned .readonly {
    font-size: 12px !important;
    color: #3d5a7a !important;
    background: #edf2f7 !important;
    border: 1px solid #c2d3e3 !important;
    border-radius: 6px !important;
    padding: 0 7px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 500 !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned .vDateField {
    width: 110px !important;
    height: 28px !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.aligned p.date {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ── Items inline — Odoo style ── */
body.app-accounting.model-journalentry.change-form #items-group {
    background: #ffffff !important;
    border: 1px solid #c2d3e3 !important;
    border-radius: var(--radius-lg) !important;
    padding: 1rem !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
    margin-bottom: .6rem !important;
}

body.app-accounting.model-journalentry.change-form #items-group h2 {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #3d5a7a !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin: 0 0 .75rem !important;
    padding-bottom: .4rem !important;
    border-bottom: 1px solid #d0dcea !important;
    background: transparent !important;
}

body.app-accounting.model-journalentry.change-form #items-group table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.app-accounting.model-journalentry.change-form #items-group thead tr {
    background: transparent !important;
    border-bottom: 2px solid #e2eaf4 !important;
}

body.app-accounting.model-journalentry.change-form #items-group thead th {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #3d5a7a !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 0 8px 8px !important;
    background: transparent !important;
    border: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group tbody tr {
    border-bottom: 1px solid #f0f4f8 !important;
    background: transparent !important;
}

body.app-accounting.model-journalentry.change-form #items-group tbody tr:hover {
    background: #f7fafc !important;
}

body.app-accounting.model-journalentry.change-form #items-group tbody td {
    padding: 4px 6px !important;
    border: none !important;
    vertical-align: middle !important;
}

body.app-accounting.model-journalentry.change-form #items-group tbody td input,
body.app-accounting.model-journalentry.change-form #items-group tbody td select {
    height: 26px !important;
    font-size: 12px !important;
    padding: 0 6px !important;
    border: 1px solid #c2d3e3 !important;
    border-radius: 5px !important;
    background: #f7fafc !important;
    width: 100% !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
}

body.app-accounting.model-journalentry.change-form #items-group tbody td input:focus,
body.app-accounting.model-journalentry.change-form #items-group tbody td select:focus {
    background: #b8ecbd !important;
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.1) !important;
}

body.app-accounting.model-journalentry.change-form #items-group tbody td input[type="number"] {
    text-align: right !important;
}

/* add line button */
body.app-accounting.model-journalentry.change-form #items-group .add-row a {
    font-size: 12px !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body.app-accounting.model-journalentry.change-form #items-group .add-row a:hover {
    background: #ffffff !important;
}

body.app-accounting.model-journalentry.change-form .submit-row {
    border-radius: var(--radius-md) !important;
    padding: .65rem 1rem !important;
    margin-top: .4rem !important;
}

body.app-accounting.model-journalentry.change-form #items-group .related-widget-wrapper-link {
    display: none !important;
}
body.app-accounting.model-journalentry.change-form #items-group .related-widget-wrapper select {
    width: 100% !important;
}
body.app-accounting.model-journalentry.change-form #items-group .column-account {
    width: 28% !important;
    min-width: 220px !important;
}

body.app-accounting.model-journalentry.change-form #items-group .field-account {
    min-width: 220px !important;
}

body.app-accounting.model-journalentry.change-form #items-group .field-account select,
body.app-accounting.model-journalentry.change-form #items-group .field-account .select2-container {
    min-width: 220px !important;
    width: 100% !important;
}
body.app-accounting.model-journalentry.change-form fieldset.module > h2,
body.app-accounting.model-journalentry.change-form fieldset.module .inline-heading {
    background: transparent !important;
    color: #0820d6 !important;
    border-bottom: 1px solid #a3dcac !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: .5rem .75rem !important;
}
body.app-accounting.model-journalentry.change-form fieldset.module.collapsed > h2,
body.app-accounting.model-journalentry.change-form fieldset.module.collapse > h2 {
    background: #edf2f7 !important;
    color: #3d5a7a !important;
    border: 1px solid #c2d3e3 !important;
    border-radius: var(--radius-md) !important;
}
body.app-accounting.model-journalentry.change-form fieldset.module.collapse summary,
body.app-accounting.model-journalentry.change-form fieldset.module.collapse summary h2 {
    background: #edf2f7 !important;
    color: #3d5a7a !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: .5rem .75rem !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    cursor: pointer !important;
    list-style: none !important;
}

body.app-accounting.model-journalentry.change-form fieldset.module.collapse {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block !important;
}

/* =========================================
   Accounting - Journal Items ledger
   ========================================= */

body.app-accounting.model-journalentry.change-form #items-group {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border: 1px solid #bfd0e2 !important;
    border-radius: 20px !important;
    padding: 18px 18px 14px !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.07) !important;
}

body.app-accounting.model-journalentry.change-form #items-group h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    color: #102a43 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #d8e3ef !important;
    background: transparent !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-shell {
    overflow-x: auto !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table {
    width: 100% !important;
    min-width: 1180px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #d6e0eb !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table thead th {
    padding: 13px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #d6e0eb !important;
    background: #f4f7fb !important;
    color: #486581 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table tbody td {
    padding: 10px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #e8eef5 !important;
    background: #ffffff !important;
    vertical-align: middle !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-row:hover td {
    background: #f9fbfd !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-row.deleted td {
    display: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table input[type="text"],
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table input[type="number"],
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table select,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table textarea {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid #c7d3df !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #102a43 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table textarea {
    min-height: 76px !important;
    height: 76px !important;
    resize: vertical !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table input:focus,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table select:focus,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table textarea:focus {
    border-color: #2680c2 !important;
    box-shadow: 0 0 0 3px rgba(38, 128, 194, 0.12) !important;
    outline: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-description textarea,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-description input[type="text"] {
    min-width: 260px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-account {
    min-width: 240px !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-vehicle,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-branch {
    min-width: 165px !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-original_debit,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-original_credit,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-debit,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-credit {
    min-width: 140px !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-original_debit input,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-original_credit input,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-debit input,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-table .field-credit input {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-hidden-meta {
    display: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group .delete .inline-deletelink,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-delete-checkbox,
body.app-accounting.model-journalentry.change-form #items-group .delete input[type="checkbox"] {
    display: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-remove {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid #d9e2ec !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #9b1c1c !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-remove:hover {
    border-color: #f4b4b4 !important;
    background: #fff5f5 !important;
    color: #c53030 !important;
}

body.app-accounting.model-journalentry.change-form #items-group tfoot td {
    padding: 12px 10px !important;
    border: 0 !important;
    background: #fbfdff !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-footer-row--totals td {
    border-top: 1px solid #d6e0eb !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-total-cell {
    text-align: right !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-total-label {
    display: block !important;
    margin-bottom: 4px !important;
    color: #7b8794 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-total-cell strong,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-balance-value {
    color: #102a43 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-balance {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid #cfe8d5 !important;
    background: #f0fff4 !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-balance.is-unbalanced {
    border-color: #f3c4c4 !important;
    background: #fff5f5 !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-balance-label {
    color: #166534 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-balance.is-unbalanced .journal-ledger-balance-label,
body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-balance.is-unbalanced .journal-ledger-balance-value {
    color: #b42318 !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-balance.is-balanced .journal-ledger-balance-value {
    color: #166534 !important;
}

body.app-accounting.model-journalentry.change-form #items-group tr.empty-form {
    display: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group .add-row {
    padding: 12px 0 0 !important;
}

body.app-accounting.model-journalentry.change-form #items-group .add-row a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    border: 1px solid #c7d3df !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #186faf !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}

body.app-accounting.model-journalentry.change-form #items-group .add-row a:hover {
    border-color: #9ec5e5 !important;
    background: #f7fbff !important;
}

body.app-accounting.model-journalentry.change-form #items-group ul.errorlist {
    margin: 0 0 6px !important;
    padding: 0 !important;
    list-style: none !important;
}

body.app-accounting.model-journalentry.change-form #items-group ul.errorlist li {
    margin: 0 !important;
    color: #c81e1e !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-readonly {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    border: 1px solid #d6e0eb !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #334e68 !important;
}

body.app-accounting.model-journalentry.change-form #items-group .journal-ledger-readonly--multiline {
    align-items: flex-start !important;
    white-space: pre-wrap !important;
    line-height: 1.4 !important;
}

body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-post-form {
    margin: 0 !important;
}

body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-post-button {
    display: block !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: var(--object-tools-bg) !important;
    color: var(--object-tools-fg) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-post-button:hover,
body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-post-button:focus {
    background: var(--object-tools-hover-bg) !important;
}

#header { position: relative !important; }

.demo-header-banner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid #b91c1c;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    box-shadow: 0 5px 14px rgba(185, 28, 28, .22);
    white-space: nowrap;
}

.demo-header-banner strong {
    font-size: 11px;
    letter-spacing: .08em;
}

.demo-header-banner span {
    color: #fee2e2;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .demo-header-banner { left: 62%; padding: 7px 10px; }
    .demo-header-banner span { display: none; }
}

body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-reverse-form {
    margin: 0 !important;
}

body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-reverse-button {
    display: block !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: #b42318 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-reverse-button:hover,
body.app-accounting.model-journalentry.change-form .object-tools .journal-entry-reverse-button:focus {
    background: #8f1d14 !important;
}

/* Traffic fines and deposits — high-contrast form labels and values */
body.app-traffic_fines.model-trafficfine.change-form .aligned label,
body.app-deposits.model-deposit.change-form .aligned label,
body.app-deposits.model-depositrefund.change-form .aligned label,
body.app-traffic_fines.model-trafficfine.change-form .form-row label,
body.app-deposits.model-deposit.change-form .form-row label,
body.app-deposits.model-depositrefund.change-form .form-row label {
    color: #111827 !important;
    font-weight: 800 !important;
}

body.app-traffic_fines.model-trafficfine.change-form input,
body.app-traffic_fines.model-trafficfine.change-form select,
body.app-traffic_fines.model-trafficfine.change-form textarea,
body.app-deposits.model-deposit.change-form input,
body.app-deposits.model-deposit.change-form select,
body.app-deposits.model-deposit.change-form textarea,
body.app-deposits.model-depositrefund.change-form input,
body.app-deposits.model-depositrefund.change-form select,
body.app-deposits.model-depositrefund.change-form textarea {
    color: #111827 !important;
    background: #ffffff !important;
    border-color: #aebfd2 !important;
}

body.app-traffic_fines.model-trafficfine.change-form .readonly,
body.app-deposits.model-deposit.change-form .readonly,
body.app-deposits.model-depositrefund.change-form .readonly {
    color: #111827 !important;
    font-weight: 600 !important;
}

@media (max-width: 1100px) {
    body.app-accounting.model-journalentry.change-form #items-group {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
/* ملاحظة عربية: تنسيق توقيع المطوّر في أسفل لوحة الإدارة */
.dds-footer-credit {
    margin-top: 24px;
    padding: 12px 20px;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}
/* ملاحظة عربية: تنسيق الشعار الدائري في هيدر لوحة الإدارة */
.brand-mark-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
}
/* ===== Rental form fields: إزالة الخلفية الباهتة والزوايا الدائرية ===== */
body.app-rentals.model-rental.change-form .form-row {
    background: #ffffff !important;
    border: 1px solid #d7e6ee !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 12px 16px !important;
}

/* ===== Rental form labels: جعل عناوين الحقول سماوية وأكبر ===== */
body.app-rentals.model-rental.change-form .form-row label,
body.app-rentals.model-rental.change-form .form-row label.required,
body.app-rentals.model-rental.change-form .aligned label {
    color: #21b6c7 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.35 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
}

/* ===== Rental form inputs: صندوق الإدخال يبقى واضحًا ونظيفًا ===== */
body.app-rentals.model-rental.change-form .form-row input,
body.app-rentals.model-rental.change-form .form-row select,
body.app-rentals.model-rental.change-form .form-row textarea,
body.app-rentals.model-rental.change-form .form-row .readonly {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
}

body.app-rentals.model-rental .form-row legend,
body.app-rentals.model-rental .form-row legend.required {
    color: #21b6c7 !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 2 !important;
}
/* ===== Rental form field titles: color and size only ===== */

/* العناوين التي تظهر كـ legend مثل Customer / Vehicle / Branch */
body.app-rentals.model-rental.add-form .form-row legend,
body.app-rentals.model-rental.change-form .form-row legend,
body.app-rentals.model-rental.add-form .form-row legend.required,
body.app-rentals.model-rental.change-form .form-row legend.required {
    color: #21b6c7 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

/* العناوين التي تظهر كـ label مثل Billing Cycle أو حقول أخرى */
body.app-rentals.model-rental.add-form .form-row > label,
body.app-rentals.model-rental.change-form .form-row > label,
body.app-rentals.model-rental.add-form .form-row > div > label,
body.app-rentals.model-rental.change-form .form-row > div > label {
    color: #21b6c7 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

/* لا تغيّر خيارات الراديو مثل Daily / Weekly / Monthly */
body.app-rentals.model-rental .form-row .radiolist label,
body.app-rentals.model-rental .form-row ul.radiolist label,
body.app-rentals.model-rental .form-row .checkbox-row label {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}