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

/*!
 * Essential Finance — UI Layer
 * A presentation layer that restyles every screen in the application.
 * Loaded after AdminLTE, so it overrides the stock theme without any
 * markup or schema changes.
 * ---------------------------------------------------------------------------
 *   1. Tokens              6. Controls          11. Tables
 *   2. Base & motion       7. Input groups      12. Alerts
 *   3. Shell               8. Choice controls   13. Select2
 *   4. Page header         9. Validation        14. DataTables & misc
 *   5. Cards              10. Buttons           15. Dashboard
 */

/* ========================================================================
   1. Tokens
   ===================================================================== */
:root {
    /* Brand — indigo lead with the logo's magenta as the accent. */
    --ef-primary:        #4f46e5;
    --ef-primary-600:    #4338ca;
    --ef-primary-700:    #3730a3;
    --ef-primary-400:    #6366f1;
    --ef-primary-300:    #818cf8;
    --ef-primary-soft:   #eef2ff;
    --ef-primary-tint:   rgba(79, 70, 229, .08);

    --ef-accent:         #ec4899;
    --ef-accent-soft:    #fdf2f8;

    --ef-info:           #0ea5e9;
    --ef-success:        #10b981;
    --ef-warning:        #f59e0b;
    --ef-danger:         #ef4444;
    --ef-secondary:      #64748b;

    --ef-ink:      #0f172a;
    --ef-ink-2:    #1e293b;
    --ef-body:     #475569;
    --ef-muted:    #5b687d;
    --ef-faint:    #64748b;
    --ef-place:    #a8b1c2;

    --ef-surface:  #ffffff;
    --ef-canvas:   #f4f6fc;
    --ef-subtle:   #f8fafc;
    --ef-line:     #e8ecf5;
    --ef-line-2:   #f0f3f9;

    --ef-radius-xs: 8px;
    --ef-radius-sm: 10px;
    --ef-radius:    12px;
    --ef-radius-lg: 18px;
    --ef-radius-xl: 22px;

    --ef-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --ef-shadow-sm: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
    --ef-shadow:    0 1px 3px rgba(15, 23, 42, .04), 0 12px 28px -12px rgba(15, 23, 42, .14);
    --ef-shadow-md: 0 2px 6px rgba(15, 23, 42, .05), 0 20px 44px -16px rgba(15, 23, 42, .22);
    --ef-shadow-lg: 0 8px 16px rgba(15, 23, 42, .06), 0 32px 64px -20px rgba(15, 23, 42, .30);

    --ef-glow:       0 6px 20px -6px rgba(79, 70, 229, .55);
    --ef-glow-hover: 0 12px 28px -8px rgba(79, 70, 229, .60);

    --ef-ring:     0 0 0 4px rgba(79, 70, 229, .14);
    --ef-ring-err: 0 0 0 4px rgba(239, 68, 68, .13);
    --ef-ring-ok:  0 0 0 4px rgba(16, 185, 129, .13);

    --ef-grad-primary: linear-gradient(135deg, #5a53e8 0%, #4f46e5 55%, #4338ca 100%);
    --ef-grad-accent:  linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
    --ef-grad-success: linear-gradient(135deg, #047857 0%, #065f46 100%);
    --ef-grad-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --ef-grad-danger:  linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --ef-grad-info:    linear-gradient(135deg, #0e7490 0%, #0c5c74 100%);

    --ef-control-h: 48px;
    --ef-ease:      cubic-bezier(.4, 0, .2, 1);
    --ef-spring:    cubic-bezier(.34, 1.26, .64, 1);

    --ef-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ========================================================================
   2. Base & motion
   ===================================================================== */
body,
body.hold-transition,
.content-wrapper,
.main-footer,
.modal,
.swal2-container {
    font-family: var(--ef-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ef-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

.content-wrapper {
    background-color: var(--ef-canvas);
    background-image:
        radial-gradient(1100px 420px at 12% -8%, rgba(99, 102, 241, .10), transparent 65%),
        radial-gradient(900px 380px at 88% -4%, rgba(236, 72, 153, .07), transparent 60%);
    background-attachment: fixed;
}

.content-wrapper > .content {
    padding-bottom: 2.5rem;
}

h1, h2, h3, h4, h5, h6,
.card-title, .modal-title {
    font-family: var(--ef-font);
    color: var(--ef-ink);
    letter-spacing: -.02em;
}

/* Cards arrive with a short, staggered rise rather than snapping in. */
@keyframes ef-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.content .card,
.content .small-box,
.content .info-box {
    animation: ef-rise .5s var(--ef-ease) backwards;
}

.content .col-md-6:nth-child(2) .card,
.content .col-lg-6:nth-child(2) .card,
.content .col-md-4:nth-child(2) .card { animation-delay: .06s; }
.content .col-md-4:nth-child(3) .card,
.content .col-md-3:nth-child(3) .card { animation-delay: .12s; }
.content .col-md-3:nth-child(4) .card { animation-delay: .18s; }

/* ========================================================================
   3. Shell — sidebar, navbar, footer
   ===================================================================== */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
    background: linear-gradient(185deg, #1e1b4b 0%, #262260 45%, #1b1840 100%);
    box-shadow: 4px 0 28px -12px rgba(15, 23, 42, .55);
}

.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding: 1rem 1rem;
    font-family: var(--ef-font);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    color: #fff;
    background: rgba(255, 255, 255, .03);
}

.main-sidebar .brand-link .brand-image {
    border-radius: 10px;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
    opacity: 1;
}

.main-sidebar .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding-left: .35rem;
}

.main-sidebar .user-panel .image img {
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, .16);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
}

.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info {
    color: #e0e7ff;
    font-weight: 600;
    font-size: .95rem;
}

.nav-sidebar .nav-item {
    margin: 2px .6rem;
}

.nav-sidebar .nav-link {
    border-radius: var(--ef-radius);
    color: #c7cbe6;
    font-size: .93rem;
    font-weight: 500;
    padding: .62rem .85rem;
    transition: background-color .18s var(--ef-ease), color .18s var(--ef-ease),
                box-shadow .18s var(--ef-ease), transform .18s var(--ef-ease);
}

.nav-sidebar .nav-link .nav-icon {
    color: #8b90c4;
    font-size: 1rem;
    transition: color .18s var(--ef-ease);
}

.nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transform: translateX(2px);
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: var(--ef-primary-300);
}

.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
    background: var(--ef-grad-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .85);
}

.nav-sidebar .nav-link.active .nav-icon {
    color: #fff;
}

/* Sub-navigation sits on a quieter surface than its parent. */
.nav-sidebar .nav-treeview {
    background: rgba(0, 0, 0, .18);
    border-radius: var(--ef-radius);
    margin: 4px .2rem 6px;
    padding: 4px 0;
}

.nav-sidebar .nav-treeview .nav-link {
    font-size: .89rem;
    padding: .5rem .8rem;
    color: #a9aed3;
}

/* AdminLTE paints the active sub-item as a white pill via
   `[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active`, which
   outranks a plainer selector — hence the weight here. */
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover,
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:focus {
    background: linear-gradient(90deg, rgba(99, 102, 241, .55), rgba(99, 102, 241, .18));
    box-shadow: inset 3px 0 0 var(--ef-primary-300);
    color: #fff;
    font-weight: 600;
}

.main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    color: #fff;
}

.nav-sidebar .nav-treeview .nav-icon {
    font-size: .6rem;
}

.main-header.navbar {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ef-line);
    box-shadow: 0 1px 20px -8px rgba(15, 23, 42, .18);
    min-height: 62px;
}

.main-header.navbar .nav-link {
    color: var(--ef-muted);
    font-weight: 600;
    border-radius: var(--ef-radius-sm);
    transition: background-color .15s var(--ef-ease), color .15s var(--ef-ease);
}

.main-header.navbar .nav-link:hover {
    background: var(--ef-primary-soft);
    color: var(--ef-primary);
}

.main-footer {
    background: var(--ef-surface);
    border-top: 1px solid var(--ef-line);
    color: var(--ef-faint);
    font-size: .85rem;
    padding: 1rem 1.25rem;
}

.main-footer a,
.main-footer strong {
    color: var(--ef-primary);
    font-weight: 700;
}

/* ========================================================================
   4. Page header
   ===================================================================== */
.content-header {
    padding: 1.75rem 1rem .75rem;
}

.content-header h1,
.content-header .m-0 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--ef-ink);
    line-height: 1.2;
}

.content-header .breadcrumb {
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--ef-line);
    border-radius: 999px;
    padding: .4rem .95rem;
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: var(--ef-shadow-xs);
}

.content-header .breadcrumb-item,
.content-header .breadcrumb-item + .breadcrumb-item::before {
    color: var(--ef-faint);
}

.content-header .breadcrumb-item a {
    color: var(--ef-muted);
    text-decoration: none;
    transition: color .15s var(--ef-ease);
}

.content-header .breadcrumb-item a:hover { color: var(--ef-primary); }
.content-header .breadcrumb-item.active  { color: var(--ef-ink-2); }

/* ========================================================================
   5. Cards
   ===================================================================== */
.card {
    background: var(--ef-surface);
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow);
    margin-bottom: 1.75rem;
    overflow: hidden;
    transition: box-shadow .28s var(--ef-ease), transform .28s var(--ef-ease);
}

.card:hover {
    box-shadow: var(--ef-shadow-md);
    transform: translateY(-2px);
}

.card.collapsed-card { overflow: visible; }

.card .card-header,
.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-secondary:not(.card-outline) > .card-header {
    background:
        linear-gradient(135deg, var(--ef-header-tint, rgba(79, 70, 229, .07)) 0%, rgba(255, 255, 255, 0) 62%),
        var(--ef-surface);
    color: var(--ef-ink);
    border-bottom: 1px solid var(--ef-line-2);
    border-top: 0;
    padding: 1.15rem 1.5rem;
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* A gradient hairline keeps the colour coding of the original theme. */
.card > .card-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ef-accent-bar, var(--ef-grad-primary));
}

.card.card-primary   { --ef-accent-bar: var(--ef-grad-primary); --ef-header-tint: rgba(79, 70, 229, .08); --ef-chip: var(--ef-grad-primary); }
.card.card-info      { --ef-accent-bar: var(--ef-grad-info);    --ef-header-tint: rgba(14, 165, 233, .08); --ef-chip: var(--ef-grad-info); }
.card.card-success   { --ef-accent-bar: var(--ef-grad-success); --ef-header-tint: rgba(16, 185, 129, .08); --ef-chip: var(--ef-grad-success); }
.card.card-warning   { --ef-accent-bar: var(--ef-grad-warning); --ef-header-tint: rgba(245, 158, 11, .09); --ef-chip: var(--ef-grad-warning); }
.card.card-danger    { --ef-accent-bar: var(--ef-grad-danger);  --ef-header-tint: rgba(239, 68, 68, .08);  --ef-chip: var(--ef-grad-danger); }
.card.card-secondary { --ef-accent-bar: linear-gradient(135deg, #94a3b8, #64748b); --ef-header-tint: rgba(100, 116, 139, .08); --ef-chip: linear-gradient(135deg, #94a3b8, #64748b); }

.card .card-header .card-title,
.card .card-header h3.card-title {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ef-ink);
    line-height: 1.4;
    margin: 0;
    float: none;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

/* The leading icon becomes a gradient chip (ef-ui.js adds one when the
   markup has no icon of its own). */
.card .card-header .card-title > i.ef-chip,
.card .card-header .card-title > .ef-chip {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ef-radius);
    background: var(--ef-chip, var(--ef-grad-primary));
    color: #fff;
    font-size: .95rem;
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .6);
}

.card .card-header .card-tools { margin-left: auto; margin-right: 0; }

.card .card-header .card-tools .btn-tool {
    color: var(--ef-faint);
    border-radius: var(--ef-radius-xs);
}

.card .card-header .card-tools .btn-tool:hover {
    color: var(--ef-primary);
    background: var(--ef-primary-soft);
}

.card .card-body { padding: 1.6rem; }

.card .card-footer {
    background: linear-gradient(180deg, var(--ef-subtle), #f4f6fc);
    border-top: 1px solid var(--ef-line-2);
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.card .card-footer .btn-block { width: 100%; margin: 0; }

.card.card-outline { border-top: 1px solid var(--ef-line); }

/* Cards that sit alone in a grid column stretch to the tallest in the row, so
   footers and action buttons line up instead of stair-stepping. Columns that
   stack several elements are left alone (no :only-child match). */
.content .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.content .row > [class*="col-"] > .card:only-child {
    flex: 1 1 auto;
}

.content .row > [class*="col-"] > .card:only-child {
    display: flex;
    flex-direction: column;
}

/* Many cards wrap their body and footer in a <form>, so the growth has to be
   passed through that wrapper for the footer to settle at the bottom. */
.content .row > [class*="col-"] > .card:only-child > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.content .row > [class*="col-"] > .card:only-child > .card-body,
.content .row > [class*="col-"] > .card:only-child > form > .card-body {
    flex: 1 1 auto;
}

/* ========================================================================
   6. Controls
   ===================================================================== */
.form-group { margin-bottom: 1.35rem; }
.form-group:last-child { margin-bottom: 0; }

.form-group > label,
.card-body > form label:not(.form-check-label):not(.custom-control-label),
.ef-label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--ef-ink-2);
    margin-bottom: .5rem;
}

.form-group > label .text-danger,
label .text-danger,
.ef-label__req {
    color: var(--ef-accent) !important;
    font-weight: 700;
    margin-left: .15rem;
}

.ef-field { margin-bottom: 1.35rem; }
.ef-field:last-child { margin-bottom: 0; }
.ef-field > .input-group,
.ef-field > .form-group { margin-bottom: 0; }

.form-text,
small.form-text,
.ef-hint {
    display: block;
    font-size: .82rem;
    color: var(--ef-faint);
    margin-top: .45rem;
    line-height: 1.5;
}

.ef-hint--value {
    color: var(--ef-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control,
input.form-control {
    height: var(--ef-control-h);
    padding: .6rem 1rem;
    font-family: var(--ef-font);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ef-ink);
    background-color: var(--ef-surface);
    border: 1.5px solid var(--ef-line);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-shadow-xs);
    transition: border-color .18s var(--ef-ease), box-shadow .18s var(--ef-ease),
                background-color .18s var(--ef-ease);
}

.form-control:hover:not(:disabled):not([readonly]) {
    border-color: #cbd5e9;
}

.form-control:focus {
    color: var(--ef-ink);
    background-color: var(--ef-surface);
    border-color: var(--ef-primary);
    box-shadow: var(--ef-ring);
    outline: 0;
}

.form-control::placeholder { color: var(--ef-place); opacity: 1; font-weight: 400; }

.form-control:disabled,
.form-control[readonly] {
    background-color: #f1f4fa;
    border-color: var(--ef-line);
    color: var(--ef-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.form-control[readonly]:focus {
    border-color: var(--ef-line);
    box-shadow: none;
}

textarea.form-control {
    height: auto;
    min-height: 124px;
    padding: .85rem 1rem;
    line-height: 1.7;
    resize: vertical;
}

select.form-control:not([multiple]),
select.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
    cursor: pointer;
}

select.form-control[multiple] { height: auto; padding: .4rem; }
select.form-control option { padding: .5rem; color: var(--ef-ink); }

input[type="number"].form-control,
input.ef-numeric {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

input[type="date"].form-control,
input[type="month"].form-control,
input[type="time"].form-control { cursor: pointer; }

input[type="date"].form-control::-webkit-calendar-picker-indicator {
    opacity: .45;
    cursor: pointer;
    transition: opacity .15s var(--ef-ease);
}

input[type="date"].form-control:hover::-webkit-calendar-picker-indicator { opacity: 1; }

input[type="file"].form-control { height: auto; padding: .6rem 1rem; line-height: 1.6; }

.form-control-sm,
select.form-control-sm {
    height: 40px;
    font-size: .875rem;
    border-radius: var(--ef-radius-sm);
    padding: .35rem .75rem;
}

.form-control-lg { height: 56px; font-size: 1.05rem; border-radius: var(--ef-radius-lg); }

/* ========================================================================
   7. Input groups
   ===================================================================== */
.input-group { margin-bottom: 1.35rem; border-radius: var(--ef-radius); }
.input-group:last-child { margin-bottom: 0; }
.input-group > .form-control { height: var(--ef-control-h); }

.input-group-text {
    min-width: 50px;
    justify-content: center;
    background: linear-gradient(180deg, #f8fafc, #eef1f8);
    border: 1.5px solid var(--ef-line);
    color: var(--ef-muted);
    font-size: .95rem;
    transition: color .18s var(--ef-ease), background .18s var(--ef-ease),
                border-color .18s var(--ef-ease);
}

.input-group-prepend > .input-group-text {
    border-right: 0;
    border-radius: var(--ef-radius) 0 0 var(--ef-radius);
}

.input-group-append > .input-group-text,
.input-group-append > .btn {
    border-left: 0;
    border-radius: 0 var(--ef-radius) var(--ef-radius) 0;
}

.input-group > .input-group-prepend + .form-control,
.input-group > .input-group-prepend + .select2-container .select2-selection--single {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group:focus-within {
    box-shadow: var(--ef-ring);
    border-radius: var(--ef-radius);
}

.input-group:focus-within .input-group-text {
    color: #fff;
    background: var(--ef-grad-primary);
    border-color: var(--ef-primary);
}

.input-group:focus-within .form-control { box-shadow: none; border-color: var(--ef-primary); }

/* ========================================================================
   8. Choice controls
   ===================================================================== */
input[type="checkbox"]:not(.icheck-input),
input[type="radio"]:not(.icheck-input) {
    accent-color: var(--ef-primary);
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    vertical-align: middle;
}

.icheck-primary > label,
.icheck-secondary > label,
.icheck-success > label,
.icheck-danger > label,
.icheck-warning > label,
.icheck-info > label {
    text-transform: none;
    font-size: .93rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ef-ink-2);
    margin-bottom: 0;
    padding-left: 1.95rem;
    cursor: pointer;
}

.icheck-primary,
.icheck-secondary,
.icheck-success,
.icheck-danger,
.icheck-warning,
.icheck-info { padding: .3rem 0; }

.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: var(--ef-primary);
    border-color: var(--ef-primary);
    box-shadow: 0 4px 10px -3px rgba(79, 70, 229, .6);
}

.form-check,
.ef-choice {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
}

.form-check-label,
.ef-choice label {
    font-size: .93rem;
    color: var(--ef-ink-2);
    cursor: pointer;
    margin: 0;
}

/* ========================================================================
   9. Validation
   ===================================================================== */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--ef-danger);
    background-image: none;
    padding-right: 1rem;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--ef-danger);
    box-shadow: var(--ef-ring-err);
}

.input-group.ef-group-invalid .input-group-text {
    border-color: var(--ef-danger);
    color: var(--ef-danger);
    background: #fef2f2;
}

.ef-select2-invalid .select2-selection--single,
.ef-select2-invalid .select2-selection--multiple { border-color: var(--ef-danger); }
.ef-select2-invalid.select2-container--open .select2-selection--single { box-shadow: var(--ef-ring-err); }

.form-control.is-valid,
.was-validated .form-control:valid { border-color: #a7f3d0; background-image: none; }
.form-control.is-valid:focus { border-color: var(--ef-success); box-shadow: var(--ef-ring-ok); }

.invalid-feedback,
.ef-error {
    display: block;
    width: 100%;
    margin-top: .45rem;
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ef-danger);
}

.invalid-feedback::before,
.ef-error::before {
    content: "\f06a";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: .4rem;
}

@keyframes ef-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.ef-shake { animation: ef-shake .5s var(--ef-ease); }

/* ========================================================================
   10. Buttons
   ===================================================================== */
.btn {
    font-family: var(--ef-font);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: .7rem 1.4rem;
    border-radius: var(--ef-radius);
    border-width: 1.5px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    transition: transform .18s var(--ef-spring), box-shadow .22s var(--ef-ease),
                background .22s var(--ef-ease), border-color .22s var(--ef-ease),
                color .22s var(--ef-ease), filter .22s var(--ef-ease);
}

.btn:focus, .btn.focus { box-shadow: var(--ef-ring); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(.985); }

.btn-primary {
    background: var(--ef-grad-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ef-glow);
}

.btn-primary:hover:not(:disabled):not(.disabled) {
    background: var(--ef-grad-primary);
    filter: brightness(1.07);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--ef-glow-hover);
}

.btn-success {
    background: var(--ef-grad-success);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(16, 185, 129, .55);
}

.btn-success:hover:not(:disabled) {
    filter: brightness(1.07);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(16, 185, 129, .6);
}

.btn-danger {
    background: var(--ef-grad-danger);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(239, 68, 68, .55);
}

.btn-danger:hover:not(:disabled) {
    filter: brightness(1.07);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(239, 68, 68, .6);
}

.btn-info {
    background: var(--ef-grad-info);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(14, 165, 233, .55);
}

.btn-info:hover:not(:disabled) {
    filter: brightness(1.07);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(14, 165, 233, .6);
}

.btn-warning {
    background: var(--ef-grad-warning);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(245, 158, 11, .55);
}

.btn-warning:hover:not(:disabled) {
    filter: brightness(1.07);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(245, 158, 11, .6);
}

.btn-secondary {
    background: var(--ef-surface);
    border-color: var(--ef-line);
    color: var(--ef-ink-2);
    box-shadow: var(--ef-shadow-xs);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--ef-subtle);
    border-color: #cbd5e9;
    color: var(--ef-ink);
    transform: translateY(-2px);
    box-shadow: var(--ef-shadow-sm);
}

.btn-outline-primary { color: var(--ef-primary); border-color: #c7d2fe; background: #fff; }
.btn-outline-primary:hover:not(:disabled) { background: var(--ef-primary-soft); color: var(--ef-primary-600); border-color: var(--ef-primary-400); transform: translateY(-2px); }

.btn-outline-warning { color: #b45309; border-color: #fde3ab; background: #fff; }
.btn-outline-warning:hover:not(:disabled) { background: #fffbeb; color: #92400e; border-color: var(--ef-warning); transform: translateY(-2px); }

.btn-outline-danger { color: var(--ef-danger); border-color: #fecdd3; background: #fff; }
.btn-outline-danger:hover:not(:disabled) { background: #fef2f2; color: #b91c1c; border-color: var(--ef-danger); transform: translateY(-2px); }

.btn-outline-success { color: #047857; border-color: #a7f3d0; background: #fff; }
.btn-outline-success:hover:not(:disabled) { background: #ecfdf5; color: #065f46; border-color: var(--ef-success); transform: translateY(-2px); }

.btn-outline-info { color: #0369a1; border-color: #bae6fd; background: #fff; }
.btn-outline-info:hover:not(:disabled) { background: #f0f9ff; color: #075985; border-color: var(--ef-info); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-sm { padding: .4rem .85rem; font-size: .85rem; border-radius: var(--ef-radius-sm); }
.btn-lg { padding: .9rem 1.8rem; font-size: 1.02rem; border-radius: var(--ef-radius-lg); }

.btn:disabled,
.btn.disabled { opacity: .5; box-shadow: none; transform: none; cursor: not-allowed; filter: grayscale(.25); }

.btn.ef-busy {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.ef-busy > * { visibility: hidden; }

.btn.ef-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    margin: -8.5px 0 0 -8.5px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    visibility: visible;
    animation: ef-spin .6s linear infinite;
}

.btn-outline-primary.ef-busy::after,
.btn-outline-warning.ef-busy::after,
.btn-outline-danger.ef-busy::after,
.btn-secondary.ef-busy::after {
    border-color: rgba(100, 116, 139, .3);
    border-top-color: var(--ef-primary);
}

@keyframes ef-spin { to { transform: rotate(360deg); } }

/* ========================================================================
   11. Tables
   ===================================================================== */
.card-body > .table,
.card-body > .table-responsive > .table,
.card-body > .ef-table-wrap > .table { margin-bottom: 0; }

.ef-table-wrap {
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--ef-shadow-xs);
}

.table {
    color: var(--ef-body);
    font-size: .92rem;
    margin-bottom: 0;
}

.table thead th {
    background: linear-gradient(180deg, #f8fafc, #eef1f8);
    color: var(--ef-muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .9rem .8rem;
    border-top: 0;
    border-bottom: 1px solid var(--ef-line);
    vertical-align: middle;
}

.table tbody td {
    padding: .85rem .8rem;
    vertical-align: middle;
    border-top: 1px solid var(--ef-line-2);
    color: var(--ef-ink-2);
    font-weight: 500;
}

.table tbody tr:first-child td { border-top: 0; }

.table-bordered,
.table-bordered thead th,
.table-bordered tbody td,
.table-bordered tbody th { border-left: 0; border-right: 0; }

.table-bordered { border: 0; }

.table-striped tbody tr:nth-of-type(odd) { background-color: #fbfcff; }

.table-hover tbody tr { transition: background-color .15s var(--ef-ease), box-shadow .15s var(--ef-ease); }

.table-hover tbody tr:hover {
    background-color: var(--ef-primary-soft);
    box-shadow: inset 3px 0 0 var(--ef-primary);
}

.table tfoot td,
.table tfoot th {
    background: linear-gradient(180deg, var(--ef-subtle), #eef1f8);
    font-weight: 800;
    color: var(--ef-ink);
    border-top: 2px solid var(--ef-line);
    padding: .9rem .8rem;
}

.table td.ef-num,
.table th.ef-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table td.ef-num {
    font-weight: 700;
    color: var(--ef-ink);
    letter-spacing: -.01em;
}

/* Action cells. A control showing only an icon collapses to a square chip;
   one carrying a visible label (Edit, Delete, Approve) keeps its natural
   width so the text is never clipped. ef-ui.js tags the icon-only ones. */
.table td .btn {
    padding: .4rem .8rem;
    font-size: .82rem;
    line-height: 1.4;
    border-radius: var(--ef-radius-sm);
    border-width: 1.5px;
    box-shadow: none;
    white-space: nowrap;
}

.table td .btn.ef-icon-btn {
    padding: 0;
    width: 38px;
    height: 38px;
    font-size: .9rem;
}

.table td .btn > i { margin: 0; }
.table td .btn .fa-2x,
.table td .btn i.fa-2x { font-size: .95rem; }

.table td .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px);
    box-shadow: var(--ef-shadow-sm);
}

.table td form { margin: 0; display: inline-block; }
.table td .btn + .btn,
.table td form + form,
.table td .btn + form { margin-left: .35rem; }

.badge {
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .01em;
    padding: .4em .75em;
    border-radius: 999px;
}

.badge-success   { background: #d1fae5; color: #047857; }
.badge-danger    { background: #fee2e2; color: #b91c1c; }
.badge-warning   { background: #fef3c7; color: #b45309; }
.badge-info      { background: #e0f2fe; color: #0369a1; }
.badge-primary   { background: var(--ef-primary-soft); color: var(--ef-primary-600); }
.badge-secondary { background: #f1f5f9; color: var(--ef-muted); }

.table td.dataTables_empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ef-muted);
    font-size: .92rem;
    font-weight: 500;
}

.ef-empty { padding: 3rem 1rem; text-align: center; color: var(--ef-muted); }

.ef-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ef-primary-soft), #f1f5ff);
    color: var(--ef-primary-300);
    font-size: 1.5rem;
    margin-bottom: .9rem;
}

.ef-empty__text { font-size: .93rem; font-weight: 600; color: var(--ef-muted); }

/* ========================================================================
   12. Alerts
   ===================================================================== */
.alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--ef-radius);
    padding: 1rem 1.25rem;
    font-size: .93rem;
    font-weight: 600;
    box-shadow: var(--ef-shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.alert::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1.4;
    flex: none;
}

.alert-success { background: #ecfdf5; border-color: #a7f3d0; border-left-color: var(--ef-success); color: #065f46; }
.alert-success::before { content: "\f058"; color: var(--ef-success); }

.alert-danger { background: #fef2f2; border-color: #fecaca; border-left-color: var(--ef-danger); color: #991b1b; }
.alert-danger::before { content: "\f057"; color: var(--ef-danger); }

.alert-warning { background: #fffbeb; border-color: #fde68a; border-left-color: var(--ef-warning); color: #92400e; }
.alert-warning::before { content: "\f071"; color: var(--ef-warning); }

.alert-info { background: #f0f9ff; border-color: #bae6fd; border-left-color: var(--ef-info); color: #075985; }
.alert-info::before { content: "\f05a"; color: var(--ef-info); }

.alert .close {
    margin-left: auto;
    padding: 0 .25rem;
    font-size: 1.35rem;
    font-weight: 400;
    opacity: .62;
    text-shadow: none;
    transition: opacity .15s var(--ef-ease);
}

.alert .close:hover { opacity: .9; }
.alert ul { margin: 0; padding-left: 1.15rem; }

/* ========================================================================
   13. Select2
   ===================================================================== */
.select2-container .select2-selection--single {
    height: var(--ef-control-h);
    border: 1.5px solid var(--ef-line);
    border-radius: var(--ef-radius);
    background: var(--ef-surface);
    box-shadow: var(--ef-shadow-xs);
    transition: border-color .18s var(--ef-ease), box-shadow .18s var(--ef-ease);
    display: flex;
    align-items: center;
    padding: 0;
}

.select2-container .select2-selection--single:hover { border-color: #cbd5e9; }

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 1rem;
    padding-right: 2.4rem;
    color: var(--ef-ink);
    font-size: .95rem;
    font-weight: 500;
    width: 100%;
}

.select2-container .select2-selection--single .select2-selection__placeholder { color: var(--ef-place); font-weight: 400; }

.select2-container .select2-selection__clear {
    color: var(--ef-muted);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    margin-right: .45rem;
    opacity: .85;
    transition: color .15s var(--ef-ease), opacity .15s var(--ef-ease);
}

.select2-container .select2-selection__clear:hover {
    color: var(--ef-danger);
    opacity: 1;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: .7rem;
    display: flex;
    align-items: center;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ef-primary) transparent transparent;
    border-width: 6px 5px 0;
    position: static;
    margin: 0;
}

.select2-container--open .select2-selection--single {
    border-color: var(--ef-primary);
    box-shadow: var(--ef-ring);
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--ef-primary);
    border-width: 0 5px 6px;
}

.select2-container--focus .select2-selection--single,
.select2-container--focus .select2-selection--multiple {
    border-color: var(--ef-primary);
    box-shadow: var(--ef-ring);
}

.select2-container .select2-selection--multiple {
    min-height: var(--ef-control-h);
    border: 1.5px solid var(--ef-line);
    border-radius: var(--ef-radius);
    padding: .25rem .5rem;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background: var(--ef-primary-soft);
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    color: var(--ef-primary-600);
    font-size: .84rem;
    font-weight: 600;
    padding: .2rem .55rem;
    margin-top: .35rem;
}

.select2-dropdown {
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-shadow-lg);
    overflow: hidden;
    padding: .4rem;
}

.select2-container .select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--ef-line);
    border-radius: var(--ef-radius-sm);
    padding: .55rem .75rem;
    font-size: .92rem;
    margin-bottom: .3rem;
}

.select2-container .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ef-primary);
    box-shadow: var(--ef-ring);
    outline: 0;
}

.select2-container .select2-results__option {
    padding: .6rem .8rem;
    font-size: .92rem;
    font-weight: 500;
    border-radius: var(--ef-radius-xs);
    color: var(--ef-ink-2);
}

.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted[data-selected],
.select2-container .select2-results__option--highlighted {
    background: var(--ef-primary-soft);
    color: var(--ef-primary-600);
}

.select2-container .select2-results__option[aria-selected="true"],
.select2-container .select2-results__option[data-selected="true"] {
    background: var(--ef-grad-primary);
    color: #fff;
    font-weight: 600;
}

.select2-results__options { max-height: 280px; }

.input-group > .input-group-prepend + .select2-container .select2-selection--single {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select2-container { width: 100% !important; }
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }

/* ========================================================================
   14. DataTables, modals, misc
   ===================================================================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ef-muted);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 40px;
    border: 1.5px solid var(--ef-line);
    border-radius: var(--ef-radius-sm);
    padding: .3rem .75rem;
    font-size: .9rem;
    color: var(--ef-ink);
    background-color: var(--ef-surface);
    transition: border-color .18s var(--ef-ease), box-shadow .18s var(--ef-ease);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--ef-primary);
    box-shadow: var(--ef-ring);
    outline: 0;
}

.dataTables_wrapper .dataTables_filter input { min-width: 240px; margin-left: .6rem; }

.dataTables_wrapper .dataTables_length select {
    width: auto;
    min-width: 5.5rem;
    margin: 0 .4rem;
    padding-right: 2rem;
    background-position: right .65rem center;
}

.dataTables_wrapper .row { align-items: center; }

.dataTables_wrapper .dataTables_paginate { float: none; text-align: right; padding-top: .4rem; }

.dataTables_wrapper .dataTables_paginate .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.page-item { padding: 0; margin: .15rem; }

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item),
.pagination .page-link {
    display: block;
    border-radius: var(--ef-radius-xs) !important;
    border: 1px solid transparent;
    margin: 0 .12rem;
    padding: .4rem .65rem !important;
    color: var(--ef-muted) !important;
    font-weight: 600;
    font-size: .87rem;
    line-height: 1.5;
    transition: background .18s var(--ef-ease), color .18s var(--ef-ease), box-shadow .18s var(--ef-ease);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):hover,
.pagination .page-link:hover {
    background: var(--ef-primary-soft) !important;
    border-color: transparent !important;
    color: var(--ef-primary-600) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).current,
.pagination .page-item.active .page-link {
    background: var(--ef-grad-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--ef-glow);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.pagination .page-item.disabled .page-link { opacity: .4; pointer-events: none; }

.dataTables_wrapper .dataTables_info { padding-top: .85rem; }

.dt-buttons .btn { margin-right: .35rem; }

table.dataTable thead th.ef-no-sort { cursor: default; background-image: none; }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }

.modal-content {
    border: 0;
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--ef-line-2);
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--ef-primary-tint), transparent 60%), #fff;
}

.modal-header .modal-title { font-size: 1.1rem; font-weight: 700; color: var(--ef-ink); }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--ef-line-2); padding: 1.1rem 1.5rem; gap: .6rem; }

.swal2-popup { border-radius: var(--ef-radius-lg); font-family: var(--ef-font); font-size: 1rem; }
.swal2-title { font-size: 1.25rem; font-weight: 700; color: var(--ef-ink); }
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel { border-radius: var(--ef-radius) !important; font-weight: 600; }

/* ========================================================================
   15. Dashboard tiles
   ===================================================================== */
.small-box {
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow);
    overflow: hidden;
    border: 0;
    transition: transform .28s var(--ef-ease), box-shadow .28s var(--ef-ease);
}

.small-box:hover { transform: translateY(-4px); box-shadow: var(--ef-shadow-md); }

.small-box > .inner { padding: 1.4rem 1.5rem; }

.small-box h3 {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: #fff;
    margin-bottom: .2rem;
}

.small-box p { font-size: .95rem; font-weight: 600; opacity: .92; color: #fff; }

.small-box .icon > i {
    font-size: 4.5rem;
    opacity: .22;
    top: 12px;
    transition: transform .3s var(--ef-ease), opacity .3s var(--ef-ease);
}

.small-box:hover .icon > i { transform: scale(1.08) rotate(-4deg); opacity: .3; }

.small-box .small-box-footer {
    background: rgba(0, 0, 0, .14);
    font-weight: 600;
    font-size: .87rem;
    padding: .7rem;
    transition: background .18s var(--ef-ease);
}

.small-box .small-box-footer:hover { background: rgba(0, 0, 0, .22); }

.small-box.bg-info    { background: var(--ef-grad-info) !important; }
.small-box.bg-success { background: var(--ef-grad-success) !important; }
.small-box.bg-warning { background: var(--ef-grad-warning) !important; }
.small-box.bg-danger  { background: var(--ef-grad-danger) !important; }
.small-box.bg-primary { background: var(--ef-grad-primary) !important; }

.info-box {
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow);
    border: 1px solid var(--ef-line);
    background: var(--ef-surface);
    padding: .9rem;
    min-height: 92px;
    transition: transform .28s var(--ef-ease), box-shadow .28s var(--ef-ease);
}

.info-box:hover { transform: translateY(-3px); box-shadow: var(--ef-shadow-md); }

.info-box .info-box-icon {
    border-radius: var(--ef-radius);
    width: 62px;
    height: 62px;
    font-size: 1.6rem;
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .45);
}

.info-box .info-box-icon.bg-primary { background: var(--ef-grad-primary) !important; }
.info-box .info-box-icon.bg-success { background: var(--ef-grad-success) !important; }
.info-box .info-box-icon.bg-info    { background: var(--ef-grad-info) !important; }
.info-box .info-box-icon.bg-warning,
.info-box .info-box-icon.bg-orange  { background: var(--ef-grad-warning) !important; }
.info-box .info-box-icon.bg-danger  { background: var(--ef-grad-danger) !important; }

.info-box .info-box-text {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ef-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* An info-box that carries its own background colour cannot use the token
   text colours, which assume the default light surface. Dark fills take white
   text; the light fills (amber, yellow) take dark text, since white on amber
   is unreadable. */
.info-box[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-warning):not(.bg-yellow):not(.bg-orange) .info-box-text,
.info-box[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-warning):not(.bg-yellow):not(.bg-orange) .info-box-number,
.info-box[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-warning):not(.bg-yellow):not(.bg-orange) .progress-description {
    color: #fff;
}

.info-box.bg-warning .info-box-text,
.info-box.bg-warning .info-box-number,
.info-box.bg-warning .progress-description,
.info-box.bg-yellow .info-box-text,
.info-box.bg-yellow .info-box-number,
.info-box.bg-orange .info-box-text,
.info-box.bg-orange .info-box-number {
    color: #23282d;
}

.info-box[class*="bg-"]:not(.bg-white):not(.bg-light) .info-box-text {
    opacity: .93;
}

/* Same pairing for the dashboard stat tiles. */
.small-box.bg-warning h3,
.small-box.bg-warning p,
.small-box.bg-warning .small-box-footer,
.small-box.bg-yellow h3,
.small-box.bg-yellow p {
    color: #23282d;
}

.small-box.bg-warning .small-box-footer { background: rgba(0, 0, 0, .08); }

.info-box .info-box-number {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--ef-ink);
    letter-spacing: -.03em;
}

/* Small screens */
@media (max-width: 767.98px) {
    body { font-size: 14.5px; }

    .card .card-body,
    .card .card-header,
    .card .card-footer { padding-left: 1.1rem; padding-right: 1.1rem; }

    .content-header { padding-top: 1.25rem; }
    .content-header h1,
    .content-header .m-0 { font-size: 1.45rem; }

    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
    .table td .btn { padding: .35rem .6rem; font-size: .78rem; }
    .table td .btn.ef-icon-btn { width: 34px; height: 34px; padding: 0; }
    .small-box h3 { font-size: 1.9rem; }
}

.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--ef-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .ef-table-wrap { border: 0; overflow: visible; box-shadow: none; }
    .card { box-shadow: none; border-color: #ddd; }
    .content-wrapper { background: #fff; }
    .btn, .card-footer, .dataTables_filter, .dataTables_length, .dataTables_paginate { display: none !important; }
}

/* ========================================================================
   16. Multi-step forms
   ===================================================================== */
.ef-stepper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: nowrap;
    padding: 1.35rem 1.5rem 1.6rem;
    margin-bottom: 1.5rem;
    background: var(--ef-surface);
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The connector runs behind the markers. */
.ef-stepper::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: 3rem;
    right: 3rem;
    height: 2px;
    background: var(--ef-line);
    z-index: 0;
}

.ef-stepper__item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 0 .25rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: center;
    font-family: var(--ef-font);
    transition: transform .2s var(--ef-ease);
}

.ef-stepper__item:hover { transform: translateY(-2px); }
.ef-stepper__item:focus { outline: none; }
.ef-stepper__item:focus-visible .ef-stepper__dot { box-shadow: var(--ef-ring); }

.ef-stepper__dot {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ef-surface);
    border: 2px solid var(--ef-line);
    color: var(--ef-faint);
    font-size: .92rem;
    font-weight: 700;
    transition: background .25s var(--ef-ease), border-color .25s var(--ef-ease),
                color .25s var(--ef-ease), box-shadow .25s var(--ef-ease),
                transform .25s var(--ef-spring);
}

.ef-stepper__label {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ef-faint);
    max-width: 130px;
    transition: color .25s var(--ef-ease);
}

/* Completed */
.ef-stepper__item.is-done .ef-stepper__dot {
    background: var(--ef-grad-success);
    border-color: transparent;
    color: #fff;
    font-size: 0;
}

.ef-stepper__item.is-done .ef-stepper__dot::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .85rem;
}

.ef-stepper__item.is-done .ef-stepper__label { color: var(--ef-muted); }

/* Current */
.ef-stepper__item.is-active .ef-stepper__dot {
    background: var(--ef-grad-primary);
    border-color: transparent;
    color: #fff;
    transform: scale(1.12);
    box-shadow: var(--ef-glow);
}

.ef-stepper__item.is-active .ef-stepper__label {
    color: var(--ef-primary);
    font-weight: 700;
}

/* Left behind with problems */
.ef-stepper__item.is-invalid-step .ef-stepper__dot {
    background: var(--ef-grad-danger);
    border-color: transparent;
    color: #fff;
}

.ef-stepper__item.is-invalid-step .ef-stepper__label { color: var(--ef-danger); }

.ef-stepper__track {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: .85rem;
    height: 4px;
    border-radius: 999px;
    background: var(--ef-line-2);
    overflow: hidden;
}

.ef-stepper__fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--ef-grad-primary);
    transition: width .35s var(--ef-ease);
}

.ef-stepper__count {
    position: absolute;
    top: .6rem;
    right: 1.5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ef-faint);
}

.ef-step { animation: ef-rise .35s var(--ef-ease) backwards; }

.ef-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: 1.1rem 1.5rem;
    background: var(--ef-surface);
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-lg);
    box-shadow: var(--ef-shadow);
}

.ef-nav__next { margin-left: auto; }
.ef-nav__back + .ef-nav__next { margin-left: auto; }

/* The form's own submit button joins the navigation bar on the last step. */
.ef-nav:empty { display: none; }

@media (max-width: 767.98px) {
    .ef-stepper {
        padding: 1.1rem 1rem 1.5rem;
        gap: .35rem;
    }

    .ef-stepper::before { left: 2rem; right: 2rem; top: 2.2rem; }
    .ef-stepper__item { min-width: 74px; }
    .ef-stepper__dot { width: 32px; height: 32px; font-size: .82rem; }
    .ef-stepper__label { font-size: .7rem; max-width: 88px; }
    .ef-stepper__count { font-size: .66rem; right: 1rem; }
    .ef-nav { padding: .9rem 1rem; }
}

/* A step built from a grid card takes the full width of the wizard, so one
   step is never squeezed into the half-column the original layout used. */
.content .row > .ef-wizard__col {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Two-column field layout inside a wizard step. */
.ef-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.75rem;
    align-items: start;
}

.ef-grid-2 > .ef-span-2 { grid-column: 1 / -1; }

@media (max-width: 991.98px) {
    .ef-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* A stepper sitting inside a card should not read as a second card. */
.card-body .ef-stepper,
.card-body .ef-nav {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.card-body .ef-stepper {
    border-bottom: 1px solid var(--ef-line-2);
    border-radius: 0;
    margin-bottom: 1.5rem;
    /* Room for the "step n of m" line, which would otherwise sit on the dots
       once the stepper is narrow. */
    padding-top: 1.75rem;
}

.card-body .ef-stepper__track { left: 0; right: 0; bottom: .55rem; }
.card-body .ef-stepper__count { right: 0; top: .1rem; }
.card-body .ef-stepper::before { left: 2.5rem; right: 2.5rem; top: 3.6rem; }

.card-body .ef-nav {
    border-top: 1px solid var(--ef-line-2);
    border-radius: 0;
    margin-top: 1.5rem;
    padding-bottom: 0;
}

/* ========================================================================
   17. Charts
   ===================================================================== */
/* The dashboard canvases carry an inline min-height and Chart.js runs with
   maintainAspectRatio:false, so the chart is exactly as tall as the space it
   is given. The taller card chrome here made that read as too long, so the
   canvases are brought back to a flatter, more readable proportion. */
.card-body > canvas,
.card-body canvas[id] {
    min-height: 0 !important;
    height: 248px !important;
    max-height: 248px;
}

/* A chart card must never be stretched to match a taller neighbour: the
   canvas would grow with the body and the card would keep getting taller. */
.content .row > [class*="col-"] > .card.ef-chart-card:only-child,
.content .row > [class*="col-"] > .card.ef-chart-card:only-child > .card-body {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .card-body > canvas,
    .card-body canvas[id] {
        height: 210px !important;
        max-height: 210px;
    }
}

/* ========================================================================
   18. Language switcher
   ===================================================================== */
.ef-lang .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.ef-lang__code {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .12rem .4rem;
    border-radius: 6px;
    background: var(--ef-primary-soft);
    color: var(--ef-primary-600);
}

.ef-lang__menu {
    min-width: 232px;
    padding: .5rem;
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-shadow-lg);
}

.ef-lang__menu .dropdown-header {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ef-faint);
    padding: .3rem .6rem .5rem;
}

.ef-lang__menu .dropdown-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .55rem .6rem;
    border-radius: var(--ef-radius-xs);
    font-size: .92rem;
    color: var(--ef-ink-2);
}

.ef-lang__menu .dropdown-item:hover {
    background: var(--ef-primary-soft);
    color: var(--ef-primary-600);
}

.ef-lang__menu .dropdown-item.active {
    background: var(--ef-grad-primary);
    color: #fff;
}

.ef-lang__native { font-weight: 600; }

.ef-lang__english {
    font-size: .78rem;
    color: var(--ef-faint);
}

.ef-lang__menu .dropdown-item.active .ef-lang__english { color: rgba(255, 255, 255, .75); }
.ef-lang__tick { margin-left: auto; font-size: .78rem; }

/* Login screen switcher */
.ef-lang-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: 1.25rem auto 0;
    max-width: 420px;
}

.ef-lang-bar__item {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ef-muted);
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s var(--ef-ease), color .15s var(--ef-ease), border-color .15s var(--ef-ease);
}

.ef-lang-bar__item:hover {
    background: var(--ef-surface);
    border-color: var(--ef-line);
    color: var(--ef-primary);
    text-decoration: none;
}

.ef-lang-bar__item.is-active {
    background: var(--ef-grad-primary);
    border-color: transparent;
    color: #fff;
}

/* ========================================================================
   19. Right-to-left (Arabic)
   ===================================================================== */
[dir="rtl"] body,
[dir="rtl"] .content-wrapper { text-align: right; }

/* AdminLTE positions the shell with fixed left offsets. */
[dir="rtl"] .main-sidebar { left: auto; right: 0; }
/* AdminLTE sets the shell offset with several highly specific rules, so the
   mirrored offset is forced here. Scoped to [dir="rtl"], it cannot affect the
   left-to-right layout. */
[dir="rtl"] .content-wrapper,
[dir="rtl"] .main-header,
[dir="rtl"] .main-footer {
    margin-left: 0 !important;
    margin-right: 250px !important;
}

[dir="rtl"] .sidebar-collapse .content-wrapper,
[dir="rtl"] .sidebar-collapse .main-header,
[dir="rtl"] .sidebar-collapse .main-footer {
    margin-right: 4.6rem !important;
}

[dir="rtl"] .main-sidebar .nav-sidebar .nav-link { text-align: right; }
[dir="rtl"] .nav-sidebar .nav-link:hover { transform: translateX(-2px); }
[dir="rtl"] .nav-sidebar .nav-icon { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .nav-sidebar .nav-link > .right,
[dir="rtl"] .nav-sidebar .nav-link > p > .right { left: 1rem; right: auto; transform: rotate(180deg); }
[dir="rtl"] .nav-treeview { padding-right: 0; }

[dir="rtl"] .main-sidebar[class*="sidebar-dark-"] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    box-shadow: inset -3px 0 0 var(--ef-primary-300);
    background: linear-gradient(270deg, rgba(99, 102, 241, .55), rgba(99, 102, 241, .18));
}

[dir="rtl"] .navbar-nav.ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; }
[dir="rtl"] .ef-lang__tick { margin-left: 0; margin-right: auto; }

[dir="rtl"] .content-header .float-sm-right { float: left !important; }
[dir="rtl"] .breadcrumb { padding-right: .95rem; }

/* Cards, forms and tables mirror their edge treatments. */
[dir="rtl"] .card > .card-header::after { left: 0; right: 0; }
[dir="rtl"] .card .card-header { flex-direction: row; }
[dir="rtl"] .alert { border-left-width: 1px; border-right-width: 4px; }
[dir="rtl"] .alert-success { border-right-color: var(--ef-success); }
[dir="rtl"] .alert-danger  { border-right-color: var(--ef-danger); }
[dir="rtl"] .alert-warning { border-right-color: var(--ef-warning); }
[dir="rtl"] .alert-info    { border-right-color: var(--ef-info); }
[dir="rtl"] .alert .close { margin-left: 0; margin-right: auto; }

[dir="rtl"] .input-group-prepend > .input-group-text {
    border-right: 1.5px solid var(--ef-line);
    border-left: 0;
    border-radius: 0 var(--ef-radius) var(--ef-radius) 0;
}

[dir="rtl"] .input-group-append > .input-group-text,
[dir="rtl"] .input-group-append > .btn {
    border-left: 1.5px solid var(--ef-line);
    border-right: 0;
    border-radius: var(--ef-radius) 0 0 var(--ef-radius);
}

[dir="rtl"] .input-group > .input-group-prepend + .form-control {
    border-radius: var(--ef-radius) 0 0 var(--ef-radius);
}

[dir="rtl"] .input-group > .form-control:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--ef-radius);
    border-bottom-right-radius: var(--ef-radius);
}

[dir="rtl"] select.form-control:not([multiple]),
[dir="rtl"] select.custom-select {
    padding-right: 1rem;
    padding-left: 2.6rem;
    background-position: left 1rem center;
}

[dir="rtl"] .invalid-feedback::before,
[dir="rtl"] .ef-error::before { margin-right: 0; margin-left: .4rem; }

[dir="rtl"] .table thead th,
[dir="rtl"] .table tbody td { text-align: right; }

/* Figures stay left-to-right; only their alignment flips. */
[dir="rtl"] .table td.ef-num,
[dir="rtl"] .table th.ef-num { text-align: left; direction: ltr; }

[dir="rtl"] .table-hover tbody tr:hover { box-shadow: inset -3px 0 0 var(--ef-primary); }
[dir="rtl"] .table td .btn + .btn,
[dir="rtl"] .table td form + form,
[dir="rtl"] .table td .btn + form { margin-left: 0; margin-right: .35rem; }

[dir="rtl"] .dataTables_wrapper .dataTables_filter input { margin-left: 0; margin-right: .6rem; }
[dir="rtl"] .dataTables_wrapper .dataTables_paginate { text-align: left; }
[dir="rtl"] .dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-start; }

[dir="rtl"] .ef-nav__next { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ef-nav__back i,
[dir="rtl"] .ef-nav__next i { transform: scaleX(-1); }
[dir="rtl"] .ef-label__req { margin-left: 0; margin-right: .15rem; }
[dir="rtl"] .ef-grid-2 { direction: rtl; }
[dir="rtl"] .small-box .icon { left: 10px; right: auto; }
[dir="rtl"] .info-box .info-box-icon { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .content-header .breadcrumb { padding-left: .95rem; }

/* Numerals and money keep Latin digits and LTR flow inside RTL text. */
[dir="rtl"] .ef-hint--value,
[dir="rtl"] .info-box-number,
[dir="rtl"] .small-box h3 { direction: ltr; display: inline-block; }

@media (max-width: 991.98px) {
    [dir="rtl"] .content-wrapper,
    [dir="rtl"] .main-header,
    [dir="rtl"] .main-footer { margin-right: 0 !important; }
}

/* ========================================================================
   20. Sign-in screens
   ===================================================================== */
/* The auth card is only ~360px wide, so its header needs tighter padding
   than a normal card, and its buttons have to tolerate the longer wording
   that other languages bring ("Anmelden", "Se connecter", "Iniciar sesión"). */
.login-page .card-header,
.register-page .card-header {
    padding: 1.35rem 1rem .8rem;
    justify-content: center;
}

.login-box .h1,
.register-box .h1,
.login-logo a,
.register-logo a {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.login-page .card-body,
.register-page .card-body { padding: 1.35rem 1.25rem; }

.login-page .btn-block,
.register-page .btn-block {
    padding: .7rem .5rem;
    font-size: .9rem;
    line-height: 1.35;
}

.login-page .login-box-msg,
.register-page .register-box-msg {
    font-size: .92rem;
    color: var(--ef-muted);
    padding-bottom: 1rem;
}

/* Below ~400px the remember/submit row is too cramped side by side. */
@media (max-width: 400px) {
    .login-page .row > .col-8,
    .login-page .row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .login-page .row > .col-4 { margin-top: .75rem; }
}

/* ========================================================================
   21. Dark mode
   ------------------------------------------------------------------------
   The palette is driven by the tokens in section 1, so most of the interface
   follows automatically once they are redefined. What remains below are the
   places where AdminLTE — or this file — commits to a literal light colour.

   The theme is set as data-theme on <html> before first paint, so there is
   no flash of the wrong theme on load.
   ===================================================================== */
:root[data-theme="dark"] {
    --ef-primary:        #6366f1;
    --ef-primary-600:    #818cf8;
    --ef-primary-700:    #a5b4fc;
    --ef-primary-400:    #818cf8;
    --ef-primary-300:    #a5b4fc;
    --ef-primary-soft:   rgba(99, 102, 241, .17);
    --ef-primary-tint:   rgba(99, 102, 241, .13);

    --ef-accent:         #f472b6;
    --ef-accent-soft:    rgba(236, 72, 153, .16);

    --ef-info:           #38bdf8;
    --ef-success:        #34d399;
    --ef-warning:        #fbbf24;
    --ef-danger:         #f87171;
    --ef-secondary:      #94a3b8;

    --ef-ink:      #eef2fb;
    --ef-ink-2:    #d4dbeb;
    --ef-body:     #a9b2c7;
    --ef-muted:    #8e98ae;
    --ef-faint:    #838da4;
    --ef-place:    #8b95ab;

    --ef-surface:  #161c2a;
    --ef-canvas:   #0e131e;
    --ef-subtle:   #1c2333;
    --ef-line:     #2a3347;
    --ef-line-2:   #222a3b;

    --ef-shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
    --ef-shadow-sm: 0 1px 3px rgba(0, 0, 0, .34), 0 1px 2px rgba(0, 0, 0, .24);
    --ef-shadow:    0 1px 3px rgba(0, 0, 0, .34), 0 12px 28px -12px rgba(0, 0, 0, .62);
    --ef-shadow-md: 0 2px 6px rgba(0, 0, 0, .38), 0 20px 44px -16px rgba(0, 0, 0, .72);
    --ef-shadow-lg: 0 8px 16px rgba(0, 0, 0, .44), 0 32px 64px -20px rgba(0, 0, 0, .8);

    --ef-ring:     0 0 0 4px rgba(129, 140, 248, .22);
    --ef-ring-err: 0 0 0 4px rgba(248, 113, 113, .2);
    --ef-ring-ok:  0 0 0 4px rgba(52, 211, 153, .2);

    color-scheme: dark;
}

/* Page backdrop */
:root[data-theme="dark"] .content-wrapper {
    background-image:
        radial-gradient(1100px 420px at 12% -8%, rgba(99, 102, 241, .16), transparent 65%),
        radial-gradient(900px 380px at 88% -4%, rgba(236, 72, 153, .10), transparent 60%);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .preloader { background-color: var(--ef-canvas); }

/* Top bar */
:root[data-theme="dark"] .main-header.navbar {
    background: rgba(22, 28, 42, .86);
    border-bottom-color: var(--ef-line);
}

:root[data-theme="dark"] .main-footer {
    background: var(--ef-surface);
    border-top-color: var(--ef-line);
}

:root[data-theme="dark"] .content-header .breadcrumb {
    background: rgba(28, 35, 51, .8);
    border-color: var(--ef-line);
}

/* Surfaces that AdminLTE paints white */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .info-box,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .swal2-popup {
    background-color: var(--ef-surface);
    color: var(--ef-body);
}

:root[data-theme="dark"] .card .card-header,
:root[data-theme="dark"] .card.card-primary:not(.card-outline) > .card-header,
:root[data-theme="dark"] .card.card-info:not(.card-outline) > .card-header,
:root[data-theme="dark"] .card.card-success:not(.card-outline) > .card-header,
:root[data-theme="dark"] .card.card-warning:not(.card-outline) > .card-header,
:root[data-theme="dark"] .card.card-danger:not(.card-outline) > .card-header,
:root[data-theme="dark"] .card.card-secondary:not(.card-outline) > .card-header {
    background:
        linear-gradient(135deg, var(--ef-header-tint, rgba(99, 102, 241, .14)) 0%, rgba(255, 255, 255, 0) 62%),
        var(--ef-surface);
    color: var(--ef-ink);
    border-bottom-color: var(--ef-line-2);
}

:root[data-theme="dark"] .card .card-footer,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .modal-header {
    background: var(--ef-subtle);
    border-color: var(--ef-line-2);
}

:root[data-theme="dark"] .card-body .ef-stepper,
:root[data-theme="dark"] .card-body .ef-nav { background: transparent; }

/* Form controls */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-theme="dark"] .select2-container .select2-selection--single,
:root[data-theme="dark"] .select2-container .select2-selection--multiple,
:root[data-theme="dark"] .select2-container .select2-search--dropdown .select2-search__field {
    background-color: var(--ef-subtle);
    border-color: var(--ef-line);
    color: var(--ef-ink);
}

:root[data-theme="dark"] .form-control:focus { background-color: var(--ef-subtle); }

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] {
    background-color: #11172333;
    background-color: rgba(10, 14, 22, .55);
    color: var(--ef-muted);
}

:root[data-theme="dark"] .input-group-text {
    background: linear-gradient(180deg, var(--ef-subtle), #171e2c);
    border-color: var(--ef-line);
    color: var(--ef-muted);
}

:root[data-theme="dark"] .btn-secondary {
    background: var(--ef-subtle);
    border-color: var(--ef-line);
    color: var(--ef-ink-2);
}

:root[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background: #232c40;
    border-color: #38445e;
    color: var(--ef-ink);
}

:root[data-theme="dark"] .btn-outline-primary,
:root[data-theme="dark"] .btn-outline-warning,
:root[data-theme="dark"] .btn-outline-danger,
:root[data-theme="dark"] .btn-outline-success,
:root[data-theme="dark"] .btn-outline-info { background: transparent; }

/* Native date/time pickers ship a dark glyph; invert it on a dark field. */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.65);
}

/* Tables */
:root[data-theme="dark"] .table thead th {
    background: linear-gradient(180deg, var(--ef-subtle), #171e2c);
    border-bottom-color: var(--ef-line);
    color: var(--ef-muted);
}

:root[data-theme="dark"] .table tbody td { border-top-color: var(--ef-line-2); color: var(--ef-ink-2); }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .022); }
:root[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--ef-primary-soft); }
:root[data-theme="dark"] .table tfoot td,
:root[data-theme="dark"] .table tfoot th {
    background: linear-gradient(180deg, var(--ef-subtle), #171e2c);
    border-top-color: var(--ef-line);
    color: var(--ef-ink);
}
:root[data-theme="dark"] .ef-table-wrap { border-color: var(--ef-line); }

/* Menus and overlays */
:root[data-theme="dark"] .dropdown-item { color: var(--ef-ink-2); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus { background: var(--ef-primary-soft); color: var(--ef-primary-600); }
:root[data-theme="dark"] .dropdown-divider { border-top-color: var(--ef-line); }
:root[data-theme="dark"] .dropdown-header { color: var(--ef-faint); }
:root[data-theme="dark"] .close,
:root[data-theme="dark"] .alert .close { color: var(--ef-ink); opacity: .7; }

:root[data-theme="dark"] .close:hover,
:root[data-theme="dark"] .alert .close:hover { opacity: 1; }
:root[data-theme="dark"] .text-muted { color: var(--ef-muted) !important; }

:root[data-theme="dark"] .select2-container .select2-results__option { color: var(--ef-ink-2); }
:root[data-theme="dark"] .swal2-title { color: var(--ef-ink); }
:root[data-theme="dark"] .swal2-html-container,
:root[data-theme="dark"] .swal2-content { color: var(--ef-body); }

/* Tinted components: the light washes need dark equivalents. */
:root[data-theme="dark"] .alert-success { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .3); color: #6ee7b7; }
:root[data-theme="dark"] .alert-danger  { background: rgba(239, 68, 68, .12);  border-color: rgba(239, 68, 68, .3);  color: #fca5a5; }
:root[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); color: #fcd34d; }
:root[data-theme="dark"] .alert-info    { background: rgba(14, 165, 233, .12); border-color: rgba(14, 165, 233, .3); color: #7dd3fc; }

:root[data-theme="dark"] .badge-success   { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
:root[data-theme="dark"] .badge-danger    { background: rgba(239, 68, 68, .18);  color: #fca5a5; }
:root[data-theme="dark"] .badge-warning   { background: rgba(245, 158, 11, .18); color: #fcd34d; }
:root[data-theme="dark"] .badge-info      { background: rgba(14, 165, 233, .18); color: #7dd3fc; }
:root[data-theme="dark"] .badge-primary   { background: var(--ef-primary-soft);  color: var(--ef-primary-300); }
:root[data-theme="dark"] .badge-secondary { background: rgba(148, 163, 184, .18); color: var(--ef-muted); }

:root[data-theme="dark"] .input-group.ef-group-invalid .input-group-text {
    background: rgba(239, 68, 68, .14);
    color: var(--ef-danger);
}

:root[data-theme="dark"] .ef-empty__icon {
    background: linear-gradient(135deg, var(--ef-primary-soft), rgba(99, 102, 241, .06));
    color: var(--ef-primary-300);
}

:root[data-theme="dark"] .ef-lang__code { background: var(--ef-primary-soft); color: var(--ef-primary-600); }
:root[data-theme="dark"] .ef-lang-bar__item:hover { background: var(--ef-surface); border-color: var(--ef-line); }

/* icheck draws its own box with a hard-coded white fill. */
:root[data-theme="dark"] .icheck-primary > input:first-child + label::before,
:root[data-theme="dark"] .icheck-secondary > input:first-child + label::before,
:root[data-theme="dark"] .icheck-success > input:first-child + label::before,
:root[data-theme="dark"] .icheck-danger > input:first-child + label::before,
:root[data-theme="dark"] .icheck-warning > input:first-child + label::before,
:root[data-theme="dark"] .icheck-info > input:first-child + label::before {
    background-color: var(--ef-subtle);
    border-color: #3c4763;
}

:root[data-theme="dark"] .icheck-primary > input:first-child:checked + label::before {
    background-color: var(--ef-primary);
    border-color: var(--ef-primary);
}

/* Stat tiles keep their colour but are toned down so they do not glare. */
:root[data-theme="dark"] .small-box { filter: saturate(.88) brightness(.92); }
:root[data-theme="dark"] .info-box .info-box-icon { box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .7); }

/* The sidebar is dark in both themes; deepen it slightly to match. */
:root[data-theme="dark"] .main-sidebar,
:root[data-theme="dark"] .main-sidebar.sidebar-dark-primary {
    background: linear-gradient(185deg, #141232 0%, #1a1745 45%, #12102e 100%);
}

/* ========================================================================
   22. Theme toggle
   ===================================================================== */
.ef-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--ef-radius-sm);
    background: transparent;
    color: var(--ef-muted);
    cursor: pointer;
    transition: background .15s var(--ef-ease), color .15s var(--ef-ease), transform .25s var(--ef-spring);
}

.ef-theme:hover {
    background: var(--ef-primary-soft);
    color: var(--ef-primary-600);
    transform: rotate(-15deg);
}

.ef-theme:focus-visible { outline: 2px solid var(--ef-primary); outline-offset: 2px; }

/* One icon per theme; only the relevant one is shown. */
.ef-theme__sun { display: none; }
:root[data-theme="dark"] .ef-theme__sun { display: inline; }
:root[data-theme="dark"] .ef-theme__moon { display: none; }

/* Colours cross-fade when the theme flips, but never on first paint. */
:root.ef-theme-ready body,
:root.ef-theme-ready .content-wrapper,
:root.ef-theme-ready .card,
:root.ef-theme-ready .table thead th,
:root.ef-theme-ready .form-control,
:root.ef-theme-ready .main-header.navbar,
:root.ef-theme-ready .main-footer {
    transition: background-color .3s var(--ef-ease), border-color .3s var(--ef-ease), color .3s var(--ef-ease);
}

@media (prefers-reduced-motion: reduce) {
    :root.ef-theme-ready * { transition: none !important; }
    .ef-theme:hover { transform: none; }
}

/* ========================================================================
   23. Currency affix on amount fields
   ===================================================================== */
.ef-currency {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ef-muted);
    line-height: 1;
    transition: color .18s var(--ef-ease);
}

.input-group:focus-within .ef-currency { color: #fff; }

/* A symbol like "UGX" needs more room than a single glyph. */
.input-group-prepend > .input-group-text:has(.ef-currency) { min-width: 58px; }

/* ========================================================================
   24. Report tables — section bands and total rows
   ===================================================================== */
/*
 * Bootstrap's utility backgrounds were drawn for decoration on a white
 * page, and a financial statement uses them for the rows that matter most.
 * White on `bg-info` is 3.0:1, on `bg-success` 3.1:1, and `bg-light` keeps
 * its near-white fill after the page turns dark, so a section heading all
 * but vanishes. Each of these rows therefore states its own ink and fill.
 * The utilities carry `!important`, so matching them takes the same.
 */
.table tr.bg-light,
.table tr.bg-light > td,
.table tr.bg-light > th,
.table td.bg-light,
.table th.bg-light {
    background-color: #eef1f6 !important;
    background-image: none !important;
    color: var(--ef-ink);
}

:root[data-theme="dark"] .table tr.bg-light,
:root[data-theme="dark"] .table tr.bg-light > td,
:root[data-theme="dark"] .table tr.bg-light > th,
:root[data-theme="dark"] .table td.bg-light,
:root[data-theme="dark"] .table th.bg-light {
    background-color: rgba(255, 255, 255, .07) !important;
    background-image: none !important;
    color: var(--ef-ink);
}

/* Deepened so white ink clears 4.5:1 — the same tone in either theme,
   because a total row should read the same way on paper and on screen. */
.table tr.bg-info,
.table tr.bg-info > td,
.table tr.bg-info > th {
    background-color: #0e7490 !important;
    background-image: none !important;
    color: #fff !important;
}

.table tr.bg-success,
.table tr.bg-success > td,
.table tr.bg-success > th {
    background-color: #15803d !important;
    background-image: none !important;
    color: #fff !important;
}

.table tr.bg-danger,
.table tr.bg-danger > td,
.table tr.bg-danger > th {
    background-color: #b91c1c !important;
    background-image: none !important;
    color: #fff !important;
}

.table tr.bg-primary,
.table tr.bg-primary > td,
.table tr.bg-primary > th {
    background-color: #1d4ed8 !important;
    background-image: none !important;
    color: #fff !important;
}

/* Amber stays amber; nothing white survives on it, so the ink goes dark. */
.table tr.bg-warning,
.table tr.bg-warning > td,
.table tr.bg-warning > th {
    background-color: #ffc107 !important;
    background-image: none !important;
    color: #23282d !important;
}

/* A total row keeps its fill when the table stripes or the pointer
   passes over it — the row is a statement, not a listing. */
.table-hover tbody tr.bg-light:hover > td,
.table-hover tbody tr.bg-info:hover > td,
.table-hover tbody tr.bg-success:hover > td,
.table-hover tbody tr.bg-danger:hover > td,
.table-hover tbody tr.bg-primary:hover > td,
.table-hover tbody tr.bg-warning:hover > td {
    background-color: inherit !important;
}

/* AdminLTE paints a top-level active item with the skin colour through
   `.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active`,
   which outranks section 3 and drops a flat blue pill — at 4:1 — into an
   otherwise indigo sidebar. */
.main-sidebar[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar[class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--ef-grad-primary);
    color: #fff;
}

/* Indigo at footer size needs lifting off the dark surface to stay read. */
:root[data-theme="dark"] .main-footer a,
:root[data-theme="dark"] .main-footer strong {
    color: var(--ef-primary-300);
}

/* ========================================================================
   25. Report legibility — pagination, tiles and stray Bootstrap ink
   ===================================================================== */
/*
 * A report is read, not glanced at, so everything on these pages is held to
 * 4.5:1. What follows are the places the audit found short of it.
 */

/* Laravel's paginator renders `.page-link`, which keeps Bootstrap's white
   fill — a row of white pills on a dark page. DataTables' own buttons were
   already handled in section 14; this is the other half of the pair. */
.pagination .page-link,
.pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
}

:root[data-theme="dark"] .pagination .page-link {
    background-color: rgba(255, 255, 255, .05);
    color: var(--ef-ink-2) !important;
}

:root[data-theme="dark"] .pagination .page-item.active .page-link {
    color: #fff !important;
}

/* A disabled control still has to be readable to explain why it is off;
   dimming it to 40% put it under 3:1. */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.pagination .page-item.disabled .page-link {
    opacity: 1;
    color: var(--ef-faint) !important;
}

/* Select2's placeholder and its clear cross both sat near the background. */
.select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--ef-muted);
}

/* The bootstrap4 theme drops a grey `#ccc` disc behind the cross, which
   leaves the glyph at 1.7:1 and reads as a stray dot on a dark field. */
.select2-container .select2-selection__clear {
    background-color: transparent !important;
    color: var(--ef-muted);
    opacity: 1;
    width: auto;
    height: auto;
    padding: 0 .15rem;
    border-radius: var(--ef-radius-xs);
}

.select2-container .select2-selection__clear:hover {
    background-color: var(--ef-primary-tint) !important;
}

/* Bootstrap's contextual ink was mixed for white paper. On the dark canvas
   the theme's own tones carry the same meaning and stay readable. */
:root[data-theme="dark"] .text-danger  { color: var(--ef-danger) !important; }
:root[data-theme="dark"] .text-success { color: var(--ef-success) !important; }
:root[data-theme="dark"] .text-info    { color: var(--ef-info) !important; }
:root[data-theme="dark"] .text-primary { color: var(--ef-primary-300) !important; }
:root[data-theme="dark"] .text-warning { color: var(--ef-warning) !important; }

:root[data-theme="dark"] .ef-hint--value { color: var(--ef-primary-300); }

:root[data-theme="dark"] .badge-secondary {
    background: rgba(148, 163, 184, .22);
    color: var(--ef-ink-2);
}

/* A summary tile states a figure in small type, where white on Bootstrap's
   info, success and primary lands near 3:1. The hues are deepened rather
   than the ink lightened, so the tiles keep their meaning. */
.info-box.bg-info,
.small-box.bg-info { background-color: #0e7490 !important; }

.info-box.bg-success,
.small-box.bg-success { background-color: #15803d !important; }

.info-box.bg-primary,
.small-box.bg-primary { background-color: #1d4ed8 !important; }

.info-box.bg-danger,
.small-box.bg-danger { background-color: #b91c1c !important; }

/* The icon panel inside a tile keeps its gradient, so it needs to stay
   distinct from the deepened body behind it. */
.info-box.bg-info .info-box-icon,
.info-box.bg-success .info-box-icon,
.info-box.bg-primary .info-box-icon,
.info-box.bg-danger .info-box-icon {
    background: rgba(0, 0, 0, .18) !important;
    color: #fff;
}

/* Bootstrap's `.thead-dark` paints white type through `.table .thead-dark th`,
   which outranks section 11 and leaves a report header white on near-white. */
.table .thead-dark th {
    background: linear-gradient(180deg, #f8fafc, #eef1f8);
    color: var(--ef-muted);
    border-color: var(--ef-line);
}

:root[data-theme="dark"] .table .thead-dark th {
    background: linear-gradient(180deg, var(--ef-subtle), #171e2c);
    color: var(--ef-muted);
    border-color: var(--ef-line);
}

/* Bootstrap's green reads at 3.1:1 on white; the deeper tone says the same
   thing and can actually be read at report sizes. */
.text-success { color: #157347 !important; }
.text-danger  { color: #c62330 !important; }

:root[data-theme="dark"] .text-success { color: var(--ef-success) !important; }
:root[data-theme="dark"] .text-danger  { color: var(--ef-danger) !important; }

/* A disabled page button is `--ef-faint` on white at 2.6:1 — quiet is fine,
   invisible is not. */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.pagination .page-item.disabled .page-link {
    color: var(--ef-muted) !important;
}

/* The required marker is the one glyph a member must not miss; the accent
   pink reads at 3.5:1 on white, a shade under what small type needs. */
.form-group > label .text-danger,
label .text-danger,
.ef-label__req {
    color: #db2777 !important;
}

:root[data-theme="dark"] .form-group > label .text-danger,
:root[data-theme="dark"] label .text-danger,
:root[data-theme="dark"] .ef-label__req {
    color: var(--ef-accent) !important;
}

/* Bootstrap's muted grey is a touch light on a tinted callout. */
.text-muted { color: var(--ef-muted) !important; }

/* ========================================================================
   26. User guide
   ===================================================================== */
/*
 * Long-form reading rather than a data screen: a narrow measure, generous
 * spacing, and two callouts that have to be impossible to skim past — the
 * warnings are the reason the guide exists.
 */
.ef-guide {
    --ef-guide-measure: 74ch;
}

.ef-guide__intro .card-body {
    padding: 1.25rem 1.5rem;
}

.ef-guide__intro p {
    margin: 0;
    max-width: var(--ef-guide-measure);
    color: var(--ef-body, var(--ef-ink-2));
    font-size: .98rem;
    line-height: 1.7;
}

/* --- the contents page ------------------------------------------------ */
.ef-guide__phase {
    margin-top: 1.75rem;
}

.ef-guide__phase-title {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ef-muted);
    margin: 0 0 .85rem;
}

.ef-guide__card {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    height: calc(100% - 1.25rem);
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.15rem;
    background: var(--ef-surface);
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform .18s var(--ef-ease), box-shadow .18s var(--ef-ease), border-color .18s var(--ef-ease);
}

.ef-guide__card:hover,
.ef-guide__card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--ef-primary-300);
    box-shadow: var(--ef-shadow-md);
    color: inherit;
    text-decoration: none;
}

.ef-guide__card-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--ef-radius-sm);
    background: var(--ef-grad-primary);
    color: #fff;
    font-size: 1rem;
}

.ef-guide__card-body {
    display: block;
    min-width: 0;
}

.ef-guide__card-title {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ef-ink);
    margin-bottom: .2rem;
}

.ef-guide__card-summary {
    display: block;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--ef-muted);
}

.ef-guide__card-count {
    display: block;
    margin-top: .55rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ef-primary);
}

/* --- the chapter list beside a chapter -------------------------------- */
.ef-guide__toc {
    position: sticky;
    top: 1rem;
    background: var(--ef-surface);
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius);
    padding: 1rem .75rem;
    margin-bottom: 1.25rem;
}

.ef-guide__toc-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ef-muted);
    padding: 0 .5rem;
    margin: 0 0 .6rem;
}

.ef-guide__toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ef-guide__toc-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border-radius: var(--ef-radius-sm);
    font-size: .875rem;
    color: var(--ef-body, var(--ef-ink-2));
    text-decoration: none;
    transition: background .15s var(--ef-ease), color .15s var(--ef-ease);
}

.ef-guide__toc-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--ef-muted);
    font-size: .8rem;
}

.ef-guide__toc-item:hover {
    background: var(--ef-primary-tint);
    color: var(--ef-primary-600);
    text-decoration: none;
}

.ef-guide__toc-item--current,
.ef-guide__toc-item--current:hover {
    background: var(--ef-primary-soft);
    color: var(--ef-primary-600);
    font-weight: 700;
}

.ef-guide__toc-item--current i {
    color: var(--ef-primary);
}

/* --- a chapter -------------------------------------------------------- */
.ef-guide__summary {
    max-width: var(--ef-guide-measure);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ef-muted);
    margin-bottom: 1.75rem;
}

.ef-guide__step {
    padding-top: 1.5rem;
    border-top: 1px solid var(--ef-line-2, var(--ef-line));
}

.ef-guide__step:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ef-guide__step-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .6rem;
}

.ef-guide__step-num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ef-primary-soft);
    color: var(--ef-primary-600);
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ef-guide__step-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ef-ink);
}

.ef-guide__step-body {
    padding-left: calc(28px + .75rem);
    padding-bottom: 1.5rem;
}

.ef-guide__step-body p {
    max-width: var(--ef-guide-measure);
    font-size: .95rem;
    line-height: 1.72;
    color: var(--ef-body, var(--ef-ink-2));
    margin-bottom: .8rem;
}

/* --- the menu trail --------------------------------------------------- */
.ef-guide__path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .9rem !important;
    padding: .4rem .7rem;
    background: var(--ef-primary-tint);
    border-radius: var(--ef-radius-sm);
    width: fit-content;
    max-width: 100%;
}

.ef-guide__path-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ef-muted);
    margin-right: .15rem;
}

.ef-guide__path-part {
    font-size: .86rem;
    font-weight: 600;
    color: var(--ef-primary-600);
}

.ef-guide__path-sep {
    color: var(--ef-muted);
    font-size: .8rem;
}

/* --- the warning callout ---------------------------------------------- */
.ef-guide__how {
    max-width: var(--ef-guide-measure);
    margin: .5rem 0 1.1rem;
    padding: .85rem 1rem .6rem;
    background: var(--ef-primary-tint);
    border: 1px solid var(--ef-line);
    border-left: 4px solid var(--ef-primary);
    border-radius: var(--ef-radius-sm);
}

.ef-guide__how-title {
    display: block;
    margin-bottom: .4rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ef-primary-600);
}

.ef-guide__how ol {
    margin: 0;
    padding-left: 1.35rem;
}

.ef-guide__how li {
    margin-bottom: .4rem;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--ef-body, var(--ef-ink-2));
}

.ef-guide__how li::marker {
    font-weight: 700;
    color: var(--ef-primary-600);
}

[dir="rtl"] .ef-guide__how { border-left: 1px solid var(--ef-line); border-right: 4px solid var(--ef-primary); }
[dir="rtl"] .ef-guide__how ol { padding-left: 0; padding-right: 1.35rem; }

.ef-guide__warn {
    display: flex;
    gap: .75rem;
    max-width: var(--ef-guide-measure);
    margin: 1rem 0 1.1rem;
    padding: .85rem 1rem;
    background: #fff8e6;
    border: 1px solid #f3d79a;
    border-left: 4px solid #d98f00;
    border-radius: var(--ef-radius-sm);
}

.ef-guide__warn-icon {
    flex: 0 0 auto;
    color: #a86800;
    font-size: .95rem;
    line-height: 1.6;
}

.ef-guide__warn-title {
    display: block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a5600;
    margin-bottom: .2rem;
}

.ef-guide__warn p {
    margin: 0 !important;
    color: #5c3d00 !important;
    font-size: .92rem !important;
    line-height: 1.65 !important;
}

/* --- the deep link ---------------------------------------------------- */
.ef-guide__open {
    background: var(--ef-grad-primary);
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .85);
}

.ef-guide__open:hover,
.ef-guide__open:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.ef-guide__open i {
    font-size: .78rem;
    margin-right: .25rem;
}

/* --- previous / next -------------------------------------------------- */
.ef-guide__nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ef-line);
}

.ef-guide__nav-link {
    display: block;
    max-width: 48%;
    padding: .7rem .95rem;
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-sm);
    text-decoration: none;
    transition: border-color .15s var(--ef-ease), background .15s var(--ef-ease);
}

.ef-guide__nav-link:hover {
    background: var(--ef-primary-tint);
    border-color: var(--ef-primary-300);
    text-decoration: none;
}

.ef-guide__nav-link--next {
    margin-left: auto;
    text-align: right;
}

.ef-guide__nav-label {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ef-muted);
}

.ef-guide__nav-title {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ef-primary-600);
}

/* --- dark ------------------------------------------------------------- */
:root[data-theme="dark"] .ef-guide__warn {
    background: rgba(217, 143, 0, .12);
    border-color: rgba(217, 143, 0, .38);
    border-left-color: #f0a500;
}

:root[data-theme="dark"] .ef-guide__how { background: rgba(99, 102, 241, .08); border-color: var(--ef-line); border-left-color: var(--ef-primary); }
:root[data-theme="dark"] .ef-guide__how li { color: var(--ef-ink-2) !important; }
:root[data-theme="dark"] .ef-guide__warn-icon { color: #fbbf24; }
:root[data-theme="dark"] .ef-guide__warn-title { color: #fcd34d; }
:root[data-theme="dark"] .ef-guide__warn p { color: var(--ef-ink-2) !important; }

/* --- right-to-left ---------------------------------------------------- */
[dir="rtl"] .ef-guide__step-body {
    padding-left: 0;
    padding-right: calc(28px + .75rem);
}

/* The trail reads the other way, so the chevron has to point the other way. */
[dir="rtl"] .ef-guide__path-sep { transform: scaleX(-1); }
[dir="rtl"] .ef-guide__path-label { margin-right: 0; margin-left: .15rem; }
[dir="rtl"] .ef-guide__warn { border-left: 1px solid #f3d79a; border-right: 4px solid #d98f00; }
[dir="rtl"] .ef-guide__nav-link--next { margin-left: 0; margin-right: auto; text-align: left; }
[dir="rtl"] .ef-guide__open i { margin-right: 0; margin-left: .25rem; }

:root[data-theme="dark"][dir="rtl"] .ef-guide__warn,
[dir="rtl"] :root[data-theme="dark"] .ef-guide__warn {
    border-left-color: rgba(217, 143, 0, .38);
    border-right-color: #f0a500;
}

/* --- print one chapter ------------------------------------------------ */
@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .ef-guide__toc,
    .ef-guide__nav,
    .ef-guide__open { display: none !important; }

    .ef-guide__step { break-inside: avoid; }
    .content-wrapper { margin: 0 !important; }
}

/* Indigo at this size needs lifting off the dark canvas to stay readable. */
:root[data-theme="dark"] .ef-guide__card-count { color: var(--ef-primary-300); }
:root[data-theme="dark"] .ef-guide__toc-item:hover,
:root[data-theme="dark"] .ef-guide__toc-item--current,
:root[data-theme="dark"] .ef-guide__nav-title,
:root[data-theme="dark"] .ef-guide__path-part { color: var(--ef-primary-300); }

/* ========================================================================
   27. Endpoint reference
   ===================================================================== */
/*
 * A long list read by someone looking for one line in it, so the verb, the
 * path and the permission all have to be scannable at a glance, and the
 * detail stays folded away until asked for.
 */
.ef-api__intro p {
    max-width: 82ch;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--ef-body, var(--ef-ink-2));
    white-space: pre-line;
}

.ef-api__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    margin-top: .9rem;
}

.ef-api__stat {
    font-size: .83rem;
    color: var(--ef-muted);
}

.ef-api__stat b {
    font-size: 1rem;
    color: var(--ef-ink);
    margin-right: .15rem;
}

.ef-api__download {
    background: var(--ef-grad-primary);
    border: 0;
    color: #fff;
    font-weight: 600;
}

.ef-api__download:hover,
.ef-api__download:focus-visible { color: #fff; text-decoration: none; }

.ef-api__regen {
    margin: .85rem 0 0 !important;
    font-size: .85rem;
    color: var(--ef-muted);
}

.ef-api__regen code,
.ef-api__path,
.ef-api__params code,
.ef-api__fields code {
    font-family: 'DejaVu Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85em;
    background: var(--ef-primary-tint);
    color: var(--ef-primary-600);
    padding: .1rem .4rem;
    border-radius: var(--ef-radius-xs);
    /* A route is never Arabic prose. Under RTL the leading slash is a neutral
       character and bidi reordering throws it to the far end, so /Account/Create
       reads as Account/Create/. Isolating each one keeps it left-to-right. */
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

.ef-api__search-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ef-muted);
}

.ef-api__count {
    margin: .55rem 0 0 !important;
    font-size: .82rem;
    color: var(--ef-muted);
}

.ef-api__group { margin-top: 1.5rem; }

.ef-api__group-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ef-muted);
    margin: 0 0 .6rem;
}

.ef-api__group-title span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 0;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--ef-primary-soft);
    color: var(--ef-primary-600);
}

.ef-api__op {
    background: var(--ef-surface);
    border: 1px solid var(--ef-line);
    border-radius: var(--ef-radius-sm);
    margin-bottom: .45rem;
    overflow: hidden;
}

.ef-api__op > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    padding: .6rem .85rem;
    cursor: pointer;
    list-style: none;
}

.ef-api__op > summary::-webkit-details-marker { display: none; }
.ef-api__op > summary:hover { background: var(--ef-primary-tint); }
.ef-api__op[open] > summary { border-bottom: 1px solid var(--ef-line); }

.ef-api__verb {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: center;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .22rem .45rem;
    border-radius: var(--ef-radius-xs);
    color: #fff;
}

.ef-api__verb--get { background: #0e7490; }
.ef-api__verb--post { background: #15803d; }
/* White on this red is 6.5:1, the same margin as the other two verbs. */
.ef-api__verb--delete { background: #b91c1c; }

.ef-api__chip {
    font-size: .72rem;
    font-weight: 600;
    padding: .12rem .45rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ef-api__chip--perm { background: var(--ef-primary-soft); color: var(--ef-primary-600); }
.ef-api__chip--module { background: rgba(14, 116, 144, .14); color: #0b5f74; }
.ef-api__chip--open { background: transparent; border-color: var(--ef-line); color: var(--ef-muted); }

.ef-api__detail { padding: .9rem 1rem 1rem; }

.ef-api__detail p {
    max-width: 82ch;
    font-size: .89rem;
    line-height: 1.65;
    color: var(--ef-body, var(--ef-ink-2));
    margin-bottom: .5rem;
}

.ef-api__detail h3 {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ef-muted);
    margin: 1rem 0 .45rem;
}

.ef-api__params,
.ef-api__responses {
    margin: 0;
    padding-left: 1.1rem;
}

.ef-api__params li,
.ef-api__responses li {
    font-size: .87rem;
    line-height: 1.6;
    color: var(--ef-body, var(--ef-ink-2));
}

.ef-api__fields { font-size: .85rem; margin-bottom: 0; }
.ef-api__fields td { vertical-align: middle; }

:root[data-theme="dark"] .ef-api__chip--module { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
:root[data-theme="dark"] .ef-api__regen code,
:root[data-theme="dark"] .ef-api__path,
:root[data-theme="dark"] .ef-api__params code,
:root[data-theme="dark"] .ef-api__fields code { color: var(--ef-primary-300); }
:root[data-theme="dark"] .ef-api__group-title span { color: var(--ef-primary-300); }

[dir="rtl"] .ef-api__params,
[dir="rtl"] .ef-api__responses { padding-left: 0; padding-right: 1.1rem; }
[dir="rtl"] .ef-api__stat b { margin-right: 0; margin-left: .15rem; }

/* ========================================================================
   28. Header search
   ===================================================================== */
/*
 * Opens over the whole top bar (AdminLTE toggles .navbar-search-open), on the
 * same frosted surface, so it reads as the bar changing mode rather than a
 * stray box. One wide field, a clear primary action, a quiet way out.
 */
.main-header .navbar-search-block.ef-search {
    /* Solid, so the bar's own links do not ghost through behind the field. */
    background: var(--ef-surface);
    border-bottom: 1px solid var(--ef-line);
    padding: 0 16px;
    z-index: 1040;
}

.main-header .navbar-search-block.ef-search.navbar-search-open {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ef-search-in .18s var(--ef-ease);
}

@keyframes ef-search-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.ef-search__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    margin: 0;
}

.ef-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ef-muted);
    font-size: .95rem;
    pointer-events: none;
}

.main-header .ef-search__input.form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 16px 0 44px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--ef-ink);
    background: var(--ef-canvas);
    border: 1.5px solid var(--ef-line);
    border-radius: 999px;
    box-shadow: none;
    transition: border-color .15s var(--ef-ease), box-shadow .15s var(--ef-ease), background-color .15s var(--ef-ease);
}

/* Muted rather than the lighter --ef-place: this is the only instruction on screen. */
.main-header .ef-search__input.form-control::placeholder { color: var(--ef-muted); opacity: 1; }

.main-header .ef-search__input.form-control:focus {
    background: var(--ef-surface);
    border-color: var(--ef-primary);
    box-shadow: var(--ef-ring);
    outline: 0;
}

/* The native clear "x" duplicates the close button. */
.ef-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }


.main-header .ef-search__submit.btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    min-width: 96px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--ef-grad-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: var(--ef-glow);
}

.main-header .ef-search__submit.btn i { font-size: .8rem; }

.main-header .ef-search__submit.btn:hover,
.main-header .ef-search__submit.btn:focus-visible {
    color: #fff;
    box-shadow: var(--ef-glow-hover);
    filter: brightness(1.05);
}

.main-header .ef-search__close.btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--ef-line);
    background: var(--ef-surface);
    color: var(--ef-muted);
}

.main-header .ef-search__close.btn:hover,
.main-header .ef-search__close.btn:focus-visible {
    color: var(--ef-ink);
    border-color: var(--ef-line-2);
    background: var(--ef-primary-soft);
}

/* Right-to-left: the icon and hint trade sides. */
[dir="rtl"] .ef-search__icon { left: auto; right: 16px; }
[dir="rtl"] .main-header .ef-search__input.form-control { padding: 0 44px 0 16px; }
[dir="rtl"] .ef-search__submit i { transform: scaleX(-1); }

/* Phones: keep the field usable — the button collapses to its icon. */
@media (max-width: 575.98px) {
    .main-header .navbar-search-block.ef-search { padding: 0 8px; }
    .main-header .ef-search__submit.btn { min-width: 44px; width: 44px; padding: 0; justify-content: center; }
    .main-header .ef-search__submit.btn span { display: none; }
    .main-header .ef-search__input.form-control { padding-right: 14px; }
    [dir="rtl"] .main-header .ef-search__input.form-control { padding-left: 14px; padding-right: 44px; }
}

/* ========================================================================
   29. Search results
   ===================================================================== */
/*
 * Someone at the counter looking one member up: identity first, then the
 * four numbers they are usually asked about, then the detail. Unrecorded
 * fields collapse to a dash instead of a wall of "N/A".
 */
.ef-srch { max-width: 1280px; }

/* refine bar */
.ef-srch__bar {
    position: relative;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.ef-srch__bar-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--ef-muted); pointer-events: none;
}
.ef-srch .ef-srch__bar-input.form-control {
    height: 50px; padding: 0 18px 0 46px;
    border-radius: 999px; border: 1.5px solid var(--ef-line);
    background: var(--ef-surface); color: var(--ef-ink);
    font-size: 1rem; font-weight: 500; box-shadow: var(--ef-shadow-xs);
}
.ef-srch .ef-srch__bar-input.form-control::placeholder { color: var(--ef-muted); opacity: 1; }
.ef-srch .ef-srch__bar-input.form-control:focus { border-color: var(--ef-primary); box-shadow: var(--ef-ring); }
.ef-srch__bar-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ef-srch .ef-srch__bar-btn.btn {
    height: 50px; padding: 0 26px; border-radius: 999px; border: 0;
    background: var(--ef-grad-primary); color: #fff; font-weight: 700; box-shadow: var(--ef-glow);
}
.ef-srch .ef-srch__bar-btn.btn:hover { color: #fff; box-shadow: var(--ef-glow-hover); }

/* empty / prompt */
.ef-srch__empty {
    text-align: center; padding: 48px 24px; border-radius: var(--ef-radius-lg);
}
.ef-srch__empty h2 { font-size: 1.2rem; font-weight: 700; color: var(--ef-ink); margin: 14px 0 6px; }
.ef-srch__empty p { color: var(--ef-muted); max-width: 52ch; margin: 0 auto; }
.ef-srch__empty-icon {
    width: 64px; height: 64px; margin: 0 auto; border-radius: 20px;
    display: grid; place-items: center; font-size: 1.5rem;
    background: var(--ef-primary-soft); color: var(--ef-primary);
}
.ef-srch__empty-icon--muted { background: var(--ef-subtle); color: var(--ef-muted); }

.ef-srch__lead { font-weight: 600; color: var(--ef-ink); margin-bottom: 12px; }
.ef-srch__muted { color: var(--ef-muted); font-weight: 500; }

/* match list */
.ef-srch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ef-srch__hit {
    display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; margin: 0;
    border-radius: var(--ef-radius); color: inherit; text-decoration: none;
    transition: border-color .15s var(--ef-ease), box-shadow .15s var(--ef-ease), transform .15s var(--ef-ease);
}
.ef-srch__hit:hover, .ef-srch__hit:focus-visible {
    color: inherit; text-decoration: none; border-color: var(--ef-primary-300);
    box-shadow: var(--ef-shadow-md); transform: translateY(-1px);
}
.ef-srch__hit-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ef-srch__hit-name { font-weight: 700; color: var(--ef-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-srch__hit-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--ef-muted); }
.ef-srch__hit-meta i { font-size: .72rem; margin-right: 3px; }
.ef-srch__hit-go { color: var(--ef-faint); }

.ef-srch__avatar {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff;
    background: var(--ef-grad-primary);
}
.ef-srch__avatar--lg { width: 64px; height: 64px; font-size: 1.35rem; box-shadow: 0 0 0 3px var(--ef-surface), 0 0 0 5px var(--ef-primary-300); }

.ef-srch__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; }
.ef-srch__notice { border-radius: var(--ef-radius); }

/* identity */
.ef-srch__hero {
    /* .card is a column by default; this card is a row. */
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 22px; border-radius: var(--ef-radius-lg); margin-bottom: 16px;
}
.ef-srch__hero-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ef-srch__hero-text { min-width: 0; }
.ef-srch__hero-name { font-size: 1.45rem; font-weight: 800; color: var(--ef-ink); margin: 0 0 8px; letter-spacing: -.01em; }
.ef-srch__hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ef-srch__meta { color: var(--ef-muted); font-size: .88rem; }
.ef-srch__meta i { font-size: .78rem; margin-right: 4px; }
.ef-srch__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ef-srch .ef-srch__btn.btn {
    border-radius: 999px; padding: .5rem 1rem; font-weight: 700; border: 0;
    background: var(--ef-grad-primary); color: #fff;
}
.ef-srch .ef-srch__btn.btn:hover { color: #fff; filter: brightness(1.05); }
.ef-srch .ef-srch__btn--ghost.btn { background: var(--ef-surface); color: var(--ef-primary); border: 1.5px solid var(--ef-line); }
.ef-srch .ef-srch__btn--ghost.btn:hover { background: var(--ef-primary-soft); color: var(--ef-primary); filter: none; }

/* pills */
.ef-srch__pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 700; white-space: nowrap;
    background: var(--ef-subtle); color: var(--ef-ink-2);
}
.ef-srch__pill i { font-size: .7rem; }
.ef-srch__pill--brand   { background: var(--ef-primary-soft); color: var(--ef-primary-700); }
.ef-srch__pill--success { background: rgba(21, 128, 61, .12);  color: #166534; }
.ef-srch__pill--warning { background: rgba(180, 83, 9, .12);   color: #92400e; }
.ef-srch__pill--danger  { background: rgba(185, 28, 28, .12);  color: #991b1b; }
.ef-srch__pill--info    { background: rgba(14, 116, 144, .12); color: #155e75; }
.ef-srch__pill--neutral { background: var(--ef-subtle); color: var(--ef-muted); }

/* stats */
.ef-srch__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ef-srch__stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; margin: 0; border-radius: var(--ef-radius); }
.ef-srch__stat-label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ef-muted); }
.ef-srch__stat-value { font-size: 1.3rem; font-weight: 800; color: var(--ef-ink); font-variant-numeric: tabular-nums; }
.ef-srch__stat-value small { font-size: .8rem; font-weight: 600; color: var(--ef-muted); }
.ef-srch__stat-value.is-negative { color: #b91c1c; }
.ef-srch__stat-sub { font-size: .8rem; color: var(--ef-muted); }
.ef-srch__stat.is-alert { border-color: rgba(185, 28, 28, .35); background: linear-gradient(0deg, rgba(185, 28, 28, .05), rgba(185, 28, 28, .05)), var(--ef-surface); }
.ef-srch__stat.is-alert .ef-srch__stat-label { color: #b91c1c; }

/* details */
.ef-srch__details { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ef-srch__group { padding: 16px 18px; margin: 0; border-radius: var(--ef-radius); }
.ef-srch__group-title { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ef-primary); margin: 0 0 10px; }
.ef-srch__dl { margin: 0; }
.ef-srch__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--ef-line); }
.ef-srch__row:first-child { border-top: 0; }
.ef-srch__row dt { font-weight: 500; color: var(--ef-muted); font-size: .86rem; }
.ef-srch__row dd { margin: 0; font-weight: 600; color: var(--ef-ink); font-size: .88rem; text-align: right; overflow-wrap: anywhere; }
.ef-srch__none { color: var(--ef-faint); font-weight: 500; }

/* sections + tables */
.ef-srch__section { padding: 0; border-radius: var(--ef-radius-lg); overflow: hidden; margin-bottom: 16px; }
.ef-srch__section-head { padding: 16px 20px; border-bottom: 1px solid var(--ef-line); }
.ef-srch__section-head h3 { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--ef-ink); display: flex; align-items: center; gap: 8px; }
.ef-srch__count { font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ef-primary-soft); color: var(--ef-primary-700); }
.ef-srch__none-block { padding: 20px; margin: 0; color: var(--ef-muted); }
.ef-srch .table-responsive { padding: 4px 8px 8px; }
.ef-srch__table { margin: 0; }
.ef-srch__table thead th {
    border-top: 0; border-bottom: 1px solid var(--ef-line) !important;
    font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ef-muted);
    background: transparent !important; background-image: none !important; white-space: nowrap;
}
.ef-srch__table td { vertical-align: middle; border-top: 1px solid var(--ef-line); color: var(--ef-ink-2); }
.ef-srch__table tbody tr:hover td { background: var(--ef-primary-tint); }
.ef-srch__table tr.is-match td { background: var(--ef-primary-soft); }
.ef-srch__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ef-srch__strong { font-weight: 700; color: var(--ef-ink); }
.ef-srch__icon-link { color: var(--ef-muted); padding: 4px 6px; border-radius: 8px; }
.ef-srch__icon-link:hover { color: var(--ef-primary); background: var(--ef-primary-soft); }

/* dark: status text colours lifted for the dark surface */
:root[data-theme="dark"] .ef-srch__pill--success { color: #86efac; background: rgba(34, 197, 94, .14); }
:root[data-theme="dark"] .ef-srch__pill--warning { color: #fcd34d; background: rgba(245, 158, 11, .14); }
:root[data-theme="dark"] .ef-srch__pill--danger  { color: #fca5a5; background: rgba(239, 68, 68, .14); }
:root[data-theme="dark"] .ef-srch__pill--info    { color: #67e8f9; background: rgba(6, 182, 212, .14); }
:root[data-theme="dark"] .ef-srch__pill--brand   { color: var(--ef-primary-300); }
:root[data-theme="dark"] .ef-srch__count         { color: var(--ef-primary-300); }
:root[data-theme="dark"] .ef-srch__group-title   { color: var(--ef-primary-300); }
:root[data-theme="dark"] .ef-srch .ef-srch__btn--ghost.btn,
:root[data-theme="dark"] .ef-srch .ef-srch__btn--ghost.btn:hover,
:root[data-theme="dark"] .ef-srch__back           { color: var(--ef-primary-300); }
:root[data-theme="dark"] .ef-srch__stat-value.is-negative,
:root[data-theme="dark"] .ef-srch__stat.is-alert .ef-srch__stat-label { color: #fca5a5; }

/* RTL */
[dir="rtl"] .ef-srch__bar-icon { left: auto; right: 18px; }
[dir="rtl"] .ef-srch .ef-srch__bar-input.form-control { padding: 0 46px 0 18px; }
[dir="rtl"] .ef-srch__row dd { text-align: left; }
[dir="rtl"] .ef-srch__hit-go, [dir="rtl"] .ef-srch__back i { transform: scaleX(-1); }
[dir="rtl"] .ef-srch__hit-meta i, [dir="rtl"] .ef-srch__meta i { margin-right: 0; margin-left: 4px; }

@media (max-width: 991.98px) { .ef-srch__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .ef-srch__stats { grid-template-columns: 1fr; }
    .ef-srch .ef-srch__bar-btn.btn { padding: 0 16px; }
    .ef-srch__hero { padding: 16px; }
}