/* ==========================================================================
   HezCredit admin styling.

   Ported from DizaSms (include/assets/css/diza.css), which is the visual
   reference: editorial rather than "dashboard template" - near-square corners,
   ruled cards instead of floating rounded panels, monospace numerics, stat
   tiles as plain links.

   Two deliberate departures from the source:

   1. The accent scale is remapped to the HezCredit brand (deep purple #381164
      with amber #f7931d) instead of DizaSms vermilion. The source does the same
      trick - it kept a "blue" scale by NAME and repointed it - so every
      var(--dz-blue-*) in a view picks up the brand with no view edits.
   2. The canvas stays cool and light to match the mobile app, rather than the
      warm paper of the source.

   Sections 3 (top navigation), 10 (marketing site) and 11 (auth pages) are not
   ported: HezCredit keeps its existing sidebar chrome and login screens.
   ========================================================================== */


:root {
    /* Brand scale. Kept under the --dz-blue-* names the ported components use. */
    --dz-blue-50:  #F3EFFA;
    --dz-blue-100: #E7DFF4;
    --dz-blue-200: #CFC0E8;
    --dz-blue-300: #A98FD0;
    --dz-blue-400: #7B55B0;
    --dz-blue-500: #381164;
    --dz-blue-600: #2E0F53;
    --dz-blue-700: #240B41;
    --dz-blue-900: #150626;

    --dz-accent:   #381164;   /* brand purple - buttons, links, active states */
    --dz-accent-2: #2E0F53;
    --dz-gold:     #F7931D;   /* the logo's orange - see the scale below */

    --dz-ink:      #191623;
    --dz-ink-2:    #3A3547;
    --dz-muted:    #746D80;
    --dz-faint:    #A7A2B8;

    --dz-line:     #DCD4EC;
    --dz-line-2:   #EBE6F4;
    --dz-surface:  #FFFFFF;
    /* The canvas has to sit a clear step below the surface or nothing on the page reads
       as an object. The port originally used #F6F5FA against a white surface - close
       enough to white that cards dissolved into the background, which is exactly what
       made the panel feel flat next to the DizaSms original. That design worked because
       its paper ground (#F4F0E6) was visibly darker than its cards. Same relationship
       here, tinted to the brand purple instead of warm paper. */
    --dz-canvas:   #EDE9F6;
    --dz-canvas-2: #E4DDF1;
    --dz-canvas-3: #D9D0EA;

    /* The logo's orange, as a usable scale. Used for emphasis - active nav, counters,
       focus rings - never for whole surfaces, so it stays an accent against the purple. */
    --dz-orange-50:  #FEF3E5;
    --dz-orange-100: #FCE3C4;
    --dz-orange-300: #FBBE72;
    --dz-orange:     #F7931D;
    --dz-orange-600: #D97A0B;
    --dz-orange-700: #A85C05;

    --dz-dark:     #150626;
    --dz-dark-2:   #191623;
    --dz-dark-line:#2A2136;

    --dz-success:  #1F6F5C;
    --dz-warning:  #B45309;
    --dz-danger:   #B23A2E;
    --dz-info:     var(--dz-accent);

    /* Square corners - kills "rounded-everything". */
    --dz-r-sm: 2px;
    --dz-r:    2px;
    --dz-r-lg: 3px;
    --dz-r-xl: 4px;

    --dz-shadow-sm: 0 1px 2px rgba(25, 22, 35, .05);
    --dz-shadow:    0 2px 4px rgba(25, 22, 35, .05), 0 12px 28px rgba(25, 22, 35, .07);
    --dz-shadow-lg: 0 10px 34px rgba(25, 22, 35, .14);
    --dz-shadow-hard: 8px 8px 0 var(--dz-ink);
    --dz-shadow-blue: none;

    --dz-nav-h: 66px;

    --dz-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dz-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}


/* 2. Base =============================================================== */

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--dz-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dz-ink-2);
    background: var(--dz-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dz-ink);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .92rem; }

a { color: var(--dz-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--dz-accent-2); }

hr { border-color: var(--dz-line); opacity: 1; }
::selection { background: var(--dz-accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dz-canvas); }
::-webkit-scrollbar-thumb { background: #cbc3b1; border: 2px solid var(--dz-canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--dz-faint); }

.fw-bold, .fw-semibold { letter-spacing: -.01em; }

/* 4. Buttons ============================================================ */

.btn {
    font-weight: 600;
    font-size: .92rem;
    border-radius: 2px;
    padding: 11px 18px;
    border: 1px solid transparent;
    transition: transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.35;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px var(--dz-blue-100); outline: none; }

.btn-primary {
    background: var(--dz-accent);
    border-color: var(--dz-accent);
    color: #fff;
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--dz-accent-2);
    border-color: var(--dz-accent-2);
    color: #fff;
}
.btn-primary:disabled, .btn-primary.disabled { background: var(--dz-blue-300); border-color: var(--dz-blue-300); box-shadow: none; }

.btn-outline-primary { border-color: var(--dz-ink); color: var(--dz-ink); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--dz-accent); border-color: var(--dz-accent); color: #fff; }

.btn-outline-secondary { border-color: var(--dz-ink); color: var(--dz-ink); background: transparent; }
.btn-outline-secondary:hover { background: var(--dz-ink); border-color: var(--dz-ink); color: var(--dz-canvas); }

.btn-light { background: var(--dz-canvas-2); border-color: var(--dz-line); color: var(--dz-ink-2); }
.btn-light:hover { background: var(--dz-line-2); color: var(--dz-ink); }

.btn-success { background: var(--dz-success); border-color: var(--dz-success); color: #fff; }
.btn-success:hover { background: #185c4b; border-color: #185c4b; color: #fff; }
.btn-danger  { background: var(--dz-danger);  border-color: var(--dz-danger);  color: #fff; }
.btn-danger:hover { background: #94271d; border-color: #94271d; color: #fff; }
.btn-warning { background: var(--dz-warning); border-color: var(--dz-warning); color: #fff; }
.btn-warning:hover { background: #92420a; border-color: #92420a; color: #fff; }
.btn-outline-danger { border-color: var(--dz-danger); color: var(--dz-danger); background: transparent; }
.btn-outline-danger:hover { background: var(--dz-danger); border-color: var(--dz-danger); color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.btn-white { background: var(--dz-ink); color: #fff; border-color: var(--dz-ink); }
.btn-white:hover { background: #000; color: #fff; }

.btn-sm { padding: 7px 12px; font-size: .82rem; border-radius: 2px; }
.btn-lg { padding: 15px 26px; font-size: 1rem; border-radius: 2px; }

/* 5. Cards ============================================================== */

.card {
    background: var(--dz-surface);
    border: 1px solid var(--dz-ink);
    border-radius: 3px;
    box-shadow: none;
    margin-bottom: 22px;
    /* Deliberately NOT overflow:hidden - a card that clips its children also
       clips any dropdown menu opened inside it (the group action menus). The
       corner radius is 3px, so there is nothing meaningful to clip anyway. */
    overflow: visible;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--dz-line);
    padding: 18px 22px;
    font-weight: 700;
}
.card-body { padding: 22px; }
.card-footer { background: var(--dz-canvas-2); border-top: 1px solid var(--dz-line); padding: 16px 22px; }
.card-title { font-size: 1rem; font-weight: 700; color: var(--dz-ink); margin-bottom: 0; letter-spacing: -.01em; }

a .card { transition: transform .15s ease, box-shadow .15s ease; }
a:hover .card { transform: translateY(-3px); box-shadow: var(--dz-shadow-hard); }

/* 6. Forms ============================================================== */

.form-label {
    font-family: var(--dz-mono);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dz-ink);
    margin-bottom: 8px;
}
.form-control, .form-select {
    border: 1px solid #C9C1AE;
    border-radius: 2px;
    padding: 12px 14px;
    font-size: .94rem;
    color: var(--dz-ink);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--dz-faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--dz-accent);
    box-shadow: 0 0 0 3px var(--dz-blue-100);
    background-color: #fff;
}
.form-control:disabled, .form-control[readonly] { background: var(--dz-canvas); color: var(--dz-muted); }
textarea.form-control { line-height: 1.6; }

.input-group-text {
    background: var(--dz-canvas);
    border: 1px solid #C9C1AE;
    border-radius: 2px;
    color: var(--dz-muted);
}

.form-check-input { border-color: #C9C1AE; border-radius: 2px; width: 1.05em; height: 1.05em; margin-top: .2em; }
.form-check-input:checked { background-color: var(--dz-accent); border-color: var(--dz-accent); }
.form-check-input:focus { border-color: var(--dz-accent); box-shadow: 0 0 0 3px var(--dz-blue-100); }
.form-check-label { font-size: .92rem; }

.pass-group { position: relative; }
.pass-group .toggle-password,
.pass-group .toggle-password-a {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--dz-faint);
    font-size: 1.05rem;
    z-index: 4;
}
.pass-group .toggle-password:hover { color: var(--dz-accent); }
.pass-input { padding-right: 42px !important; }

.dz-otp { display: flex; gap: 10px; justify-content: center; }
.dz-otp input {
    width: 52px; height: 60px;
    text-align: center;
    font-family: var(--dz-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dz-ink);
    border: 1px solid #C9C1AE;
    border-radius: 3px;
}
.dz-otp input:focus { border-color: var(--dz-accent); box-shadow: 0 0 0 3px var(--dz-blue-100); outline: none; }

/* 7. Tables ============================================================= */

.table {
    color: var(--dz-ink-2);
    font-size: .91rem;
    margin-bottom: 0;
    vertical-align: middle;
}
.table > thead th,
.table thead.thead-light th {
    background: var(--dz-canvas);
    color: var(--dz-muted);
    font-family: var(--dz-mono);
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--dz-line);
    padding: 13px 18px;
    white-space: nowrap;
}
.table > tbody > tr > td { padding: 14px 18px; border-bottom: 1px solid var(--dz-line-2); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover { background: var(--dz-blue-50); }
.table-responsive { border-radius: 3px; }

/* 8. Badges, alerts, misc =============================================== */

.badge {
    font-family: var(--dz-mono);
    font-weight: 600;
    font-size: .66rem;
    padding: 5px 9px;
    border-radius: 2px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.bg-primary   { background: var(--dz-accent) !important; }
.bg-success   { background: var(--dz-success) !important; }
.bg-danger    { background: var(--dz-danger) !important; }
.bg-warning   { background: var(--dz-warning) !important; }
.bg-info      { background: var(--dz-info) !important; }
.bg-secondary { background: #8a8272 !important; }
.text-primary { color: var(--dz-accent) !important; }
.text-success { color: var(--dz-success) !important; }
.text-danger  { color: var(--dz-danger) !important; }
.text-warning { color: var(--dz-warning) !important; }
.text-info    { color: var(--dz-info) !important; }
.text-muted   { color: var(--dz-muted) !important; }

.alert {
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 14px 18px;
    font-size: .92rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.alert-danger  { background: #FBEEEC; border-color: #E7C3BD; color: #8f2a20; }
.alert-success { background: #E9F3F0; border-color: #B4D8CE; color: #185c4b; }
.alert-warning { background: #FBF1E4; border-color: #E7CDA6; color: #92420a; }
.alert-info    { background: var(--dz-blue-50); border-color: var(--dz-blue-200); color: var(--dz-accent-2); }
.alert .btn-close { margin-left: auto; }

.modal-content {
    border: 1px solid var(--dz-ink);
    border-radius: 3px;
    box-shadow: var(--dz-shadow-lg);
    overflow: hidden;
    background: var(--dz-surface);
}
.modal-header { border-bottom: 1px solid var(--dz-line); padding: 18px 22px; }
.modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--dz-line); padding: 16px 22px; background: var(--dz-canvas); }
.modal-backdrop.show { opacity: .5; }

.nav-tabs { border-bottom: 1px solid var(--dz-line); gap: 4px; }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--dz-muted);
    font-weight: 600;
    font-size: .92rem;
    padding: 11px 16px;
}
.nav-tabs .nav-link:hover { color: var(--dz-accent); border-bottom-color: var(--dz-blue-200); }
.nav-tabs .nav-link.active { color: var(--dz-ink); border-bottom-color: var(--dz-accent); background: transparent; }

.progress { height: 8px; border-radius: 0; background: var(--dz-line-2); }
.progress-bar { background: var(--dz-accent); }

code, pre, .dz-code { font-family: var(--dz-mono); font-size: .86em; }
code { color: var(--dz-accent-2); background: var(--dz-blue-50); padding: 2px 7px; border-radius: 2px; }
pre {
    background: var(--dz-ink);
    color: #D8D2C4;
    padding: 20px 22px;
    border-radius: 3px;
    overflow-x: auto;
    font-size: .84rem;
    line-height: 1.7;
}
pre code { background: transparent; color: inherit; padding: 0; }

/* 9. Compatibility layer for classes the app views already use =========== */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}
.page-header .page-title h4 { font-size: 1.7rem; margin-bottom: 4px; letter-spacing: -.03em; }
.page-header .page-title h6 { font-size: .92rem; font-weight: 400; color: var(--dz-muted); margin-bottom: 0; }
.page-btn { display: flex; gap: 10px; flex-wrap: wrap; }
.page-btn .btn { white-space: nowrap; }
.add-item { display: flex; }

.fs-13 { font-size: .81rem !important; }
.fs-12 { font-size: .76rem !important; }
.fs-14 { font-size: .88rem !important; }
.fs-16 { font-size: 1rem !important; }
.text-gray-9 { color: var(--dz-ink-2) !important; }
.text-gray-6 { color: var(--dz-muted) !important; }
.text-gray-5 { color: var(--dz-faint) !important; }
.hover-a:hover { color: var(--dz-accent-2); }

.avatar {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 2px;
    flex-shrink: 0;
}
.avatar-lg { width: 52px; height: 52px; border-radius: 3px; }
.avatar-sm { width: 32px; height: 32px; }

.bg-primary-transparent   { background: var(--dz-blue-100) !important; }
.bg-success-transparent   { background: #DCEBE6 !important; }
.bg-danger-transparent    { background: #F4DDD9 !important; }
.bg-warning-transparent   { background: #F5E4CB !important; }
.bg-info-transparent      { background: var(--dz-blue-100) !important; }
.bg-secondary-transparent { background: #E7E2D5 !important; }

.text-primary.fs-4, .text-primary.fs-5 { color: var(--dz-accent) !important; }

/* 12. App shell ========================================================= */

.dz-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--dz-canvas); }
.dz-app-body { flex: 1; padding: 34px 0 54px; }
.dz-app-footer { border-top: 1px solid var(--dz-line); background: var(--dz-surface); padding: 18px 0; font-family: var(--dz-mono); font-size: .78rem; color: var(--dz-muted); text-align: center; }

.dz-banner { border-radius: 2px; padding: 13px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; font-weight: 500; margin-bottom: 22px; }
.dz-banner .btn { margin-left: auto; }

@media (max-width: 575.98px) {
    .dz-section { padding: 56px 0; }
    .card-body { padding: 18px; }
    .page-header { margin-bottom: 20px; }
    .dz-stats { padding: 0 16px; }
    .dz-stat { padding: 26px 8px 26px 16px; }
    .dz-cta { padding: 40px 22px; }
    .table > thead th, .table > tbody > tr > td { padding: 11px 13px; }
}

.dz-divider { height: 1px; background: var(--dz-line); border: 0; margin: 26px 0; }
.dz-muted-box { background: var(--dz-canvas); border: 1px dashed var(--dz-line); border-radius: 2px; padding: 18px; color: var(--dz-muted); font-size: .9rem; }
.dz-empty { text-align: center; padding: 56px 20px; }
.dz-empty i { font-size: 2.6rem; color: var(--dz-blue-300); }
.dz-empty p { color: var(--dz-muted); margin: 12px 0 18px; }

/* 13. Plugin skins (select2, DataTables) ================================ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border: 1px solid #C9C1AE; border-radius: 2px; min-height: 46px; padding: 5px 8px; background: #fff; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; color: var(--dz-ink); padding-left: 6px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--dz-accent); box-shadow: 0 0 0 3px var(--dz-blue-100); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--dz-canvas-2); border: 1px solid var(--dz-line); color: var(--dz-ink); border-radius: 2px; padding: 3px 9px; font-size: .84rem; font-weight: 500; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--dz-danger); margin-right: 5px; border: 0; background: transparent; }
.select2-dropdown { border: 1px solid var(--dz-ink); border-radius: 3px; box-shadow: var(--dz-shadow-lg); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--dz-accent); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--dz-blue-50); color: var(--dz-accent-2); }
.select2-search--dropdown .select2-search__field { border-radius: 2px; border: 1px solid #C9C1AE; padding: 8px 10px; }

.dataTables_wrapper { padding: 16px 18px 4px; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid #C9C1AE; border-radius: 2px; padding: 8px 13px; margin-left: 8px; font-size: .9rem; min-width: 220px; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--dz-accent); box-shadow: 0 0 0 3px var(--dz-blue-100); outline: none; }
.dataTables_wrapper .dataTables_length select { border: 1px solid #C9C1AE; border-radius: 2px; padding: 7px 10px; margin: 0 6px; }
.dataTables_wrapper .dataTables_info { color: var(--dz-muted); font-family: var(--dz-mono); font-size: .8rem; padding-top: 14px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 2px !important; border: 1px solid transparent !important; color: var(--dz-ink-2) !important; font-size: .88rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--dz-blue-50) !important; border-color: var(--dz-blue-200) !important; color: var(--dz-accent-2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--dz-accent) !important; border-color: var(--dz-accent) !important; color: #fff !important; }
.page-link { color: var(--dz-accent); border-color: var(--dz-line); border-radius: 2px; }
.page-item.active .page-link { background: var(--dz-accent); border-color: var(--dz-accent); }

.dz-checklist { list-style: none; padding: 0; margin: 0; }
.dz-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: .95rem; color: var(--dz-ink-2); }
.dz-checklist li i { color: var(--dz-accent); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

/* 14. Editorial view components (dashboard, compose) ==================== */

.dz-kicker {
    font-family: var(--dz-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dz-accent);
    margin-bottom: 12px;
}
.dz-mono { font-family: var(--dz-mono); font-weight: 600; color: var(--dz-ink); }
.dz-link-mono { font-family: var(--dz-mono); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Stat tiles — ruled cards, no rounded icon chips */
.dz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 22px; }
.dz-tile { display: block; background: var(--dz-surface); border: 1px solid var(--dz-ink); border-radius: 3px; padding: 22px 22px 24px; color: var(--dz-ink); transition: transform .15s ease, box-shadow .15s ease; }
.dz-tile:hover { transform: translateY(-3px); box-shadow: var(--dz-shadow-hard); color: var(--dz-ink); }
.dz-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dz-tile-label { font-family: var(--dz-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dz-muted); }
.dz-tile-top i { font-size: 1.2rem; color: var(--dz-accent); }
.dz-tile-value { font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.03em; color: var(--dz-ink); line-height: 1; }

/* Table cells */
/* The message column is the only elastic one; cap it so it cannot starve the
   count/cost columns of the width they need to stay on one line. */
.dz-cell-msg {
    display: inline-block;
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--dz-ink);
    font-weight: 500;
}
.dz-cell-msg:hover { color: var(--dz-accent); }
.dz-when { color: var(--dz-faint) !important; font-weight: 500; font-size: .78rem; }
.dz-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--dz-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dz-ink-2); }
.dz-status-dot { width: 7px; height: 7px; flex-shrink: 0; }

/* Account summary rows */
.dz-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--dz-line-2); }
.dz-summary-row:last-of-type { border-bottom: 0; }
.dz-summary-row > span:first-child { font-size: .88rem; color: var(--dz-muted); }
.dz-summary-row .dz-mono { font-size: .84rem; }

/* Quick actions — ink panel */
.dz-actions { background: var(--dz-ink); border-radius: 3px; padding: 20px; margin-bottom: 22px; }
.dz-actions-label { font-family: var(--dz-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #8F877A; margin-bottom: 12px; }
.dz-action { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--dz-dark-line); color: #EDE8DC; font-size: .92rem; font-weight: 500; }
.dz-action:hover { color: #fff; }
.dz-action > i:first-child { font-size: 1.15rem; color: var(--dz-accent); }
.dz-action-arrow { margin-left: auto; font-size: 1rem; color: #5F594F; }

/* Compose */
.dz-hint { display: block; font-size: .78rem; color: var(--dz-faint); margin-top: 7px; }
.dz-counter { font-family: var(--dz-mono); font-size: .76rem; color: var(--dz-muted); }

.dz-cost { background: var(--dz-ink); border-color: var(--dz-ink); box-shadow: 8px 8px 0 var(--dz-accent); }
.dz-cost .card-header { border-bottom-color: var(--dz-dark-line); }
.dz-cost-label { font-family: var(--dz-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #8F877A; }
.dz-cost-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--dz-dark-line); }
.dz-cost-row > span:first-child { font-size: .9rem; color: #9A9284; }
.dz-cost-row .dz-mono { color: #EDE8DC; }
.dz-cost-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 4px; }
.dz-cost-total > span:first-child { font-size: .92rem; font-weight: 600; color: #EDE8DC; }
.dz-cost-total > span:last-child { font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; color: var(--dz-accent); line-height: 1; }

/* Delivery lists — a campaign's numbers as one copyable block. A 500-row table
   is unreadable and cannot be pasted anywhere; a comma-separated list can. */
.dz-numbers {
    width: 100%;
    font-family: var(--dz-mono);
    font-size: .82rem;
    line-height: 1.75;
    color: var(--dz-ink);
    background: var(--dz-canvas);
    border: 1px solid var(--dz-line);
    border-radius: 2px;
    padding: 13px 14px;
    resize: vertical;
}
.dz-numbers:focus { border-color: var(--dz-accent); box-shadow: 0 0 0 3px var(--dz-blue-100); outline: none; }
.dz-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dz-list-count { font-family: var(--dz-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dz-muted); }


/* ==========================================================================
   15. Template override layer

   The stock template styles buttons as `.btn.btn-primary { ... !important }`
   (specificity 0,2,0 plus !important), so plain `.btn-primary` rules in the
   sections above never win no matter how late the file loads. These rules
   match that weight so the panel actually takes the HezCredit accent.
   ========================================================================== */

.btn.btn-primary {
    background-color: var(--dz-accent) !important;
    border: 1px solid var(--dz-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary.focus,
.btn.btn-primary:active, .btn.btn-primary.active {
    background-color: var(--dz-accent-2) !important;
    border: 1px solid var(--dz-accent-2) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn.btn-secondary {
    background-color: var(--dz-ink) !important;
    border: 1px solid var(--dz-ink) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus {
    background-color: #000 !important;
    border-color: #000 !important;
}

.btn.btn-success  { background-color: var(--dz-success) !important; border: 1px solid var(--dz-success) !important; box-shadow: none !important; }
.btn.btn-danger   { background-color: var(--dz-danger)  !important; border: 1px solid var(--dz-danger)  !important; box-shadow: none !important; }
.btn.btn-warning  { background-color: var(--dz-warning) !important; border: 1px solid var(--dz-warning) !important; color: #fff !important; box-shadow: none !important; }

/* Outline variants: ink rule by default, accent on hover. */
.btn.btn-outline-primary,
.btn.btn-outline-secondary {
    background-color: transparent !important;
    border: 1px solid var(--dz-ink) !important;
    color: var(--dz-ink) !important;
    box-shadow: none !important;
}
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus {
    background-color: var(--dz-accent) !important;
    border-color: var(--dz-accent) !important;
    color: #fff !important;
}
.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:focus {
    background-color: var(--dz-ink) !important;
    border-color: var(--dz-ink) !important;
    color: var(--dz-canvas) !important;
}

.btn.btn-outline-success { background-color: transparent !important; border: 1px solid var(--dz-success) !important; color: var(--dz-success) !important; box-shadow: none !important; }
.btn.btn-outline-success:hover { background-color: var(--dz-success) !important; color: #fff !important; }
.btn.btn-outline-danger  { background-color: transparent !important; border: 1px solid var(--dz-danger)  !important; color: var(--dz-danger)  !important; box-shadow: none !important; }
.btn.btn-outline-danger:hover  { background-color: var(--dz-danger)  !important; color: #fff !important; }
.btn.btn-outline-warning { background-color: transparent !important; border: 1px solid var(--dz-warning) !important; color: var(--dz-warning) !important; box-shadow: none !important; }
.btn.btn-outline-warning:hover { background-color: var(--dz-warning) !important; color: #fff !important; }
.btn.btn-outline-info    { background-color: transparent !important; border: 1px solid var(--dz-accent)  !important; color: var(--dz-accent)  !important; box-shadow: none !important; }
.btn.btn-outline-info:hover    { background-color: var(--dz-accent)  !important; color: #fff !important; }

/* The template rounds buttons; the reference squares them. */
.btn, .btn.btn-sm, .btn.btn-lg { border-radius: var(--dz-r) !important; }

/* The template's sign-in screen carries a large orange diagonal graphic across the
   bottom. It belongs to the stock theme, not the brand, and fights the purple. The
   reference panel's auth screens are plain, so drop it. */
.login-wrapper.login-new,
.login-wrapper.login-new .login-content.user-login { background-image: none !important; }


/* 12. App chrome ========================================================
   The stock theme assumes a dark header, so several chrome pieces are
   invisible against our light one. These are corrections, not a redesign.
   ====================================================================== */

/* The hamburger's bars are #ffffff in style.css - white on our white header,
   so the only way to reach the sidebar under 992px was invisible. */
.mobile_btn .bar-icon span { background-color: var(--dz-ink) !important; }
.mobile_btn { display: none; }
@media (max-width: 991.96px) {
    .mobile_btn {
        display: inline-flex !important;
        align-items: center;
        position: static !important;
        float: none !important;
        height: auto;
        line-height: 1;
        width: auto;
        padding: 0 14px 0 0;
    }
    .mobile_btn .bar-icon { margin-top: 0; }
}

/* Lay the header out as one row so the logo, finder and avatar can't drift
   apart when the template's floats stop applying. */
.header .main-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    max-width: none;
    min-height: 65px;
}
.header .main-header .header-left { flex: 0 0 auto; width: auto; }
.header .main-header .user-menu {
    float: none !important;
    margin-left: auto;
    align-items: center;
}
/* The template hides this above 991px and shows the desktop menu instead;
   with the flex row above, one avatar is enough at every width. */
.header .mobile-user-menu { display: none !important; }

/* Below 992 the theme takes the header apart for a phone layout it no longer has:
   .header-left goes position:absolute at width:100%, so the logo block covers the whole
   bar - overlapping the hamburger on one side and the finder on the other - and
   .user-menu is hidden in favour of .mobile-user-menu, which is hidden above. The result
   was three elements stacked on the same pixels and no avatar at all. Keep the flex row
   at every width instead. */
@media (max-width: 991.96px) {
    .header .main-header .header-left {
        position: static !important;
        width: auto !important;
        padding-left: 0 !important;
        text-align: left !important;
        border: 0;
    }
    .header .main-header .header-left .logo { display: inline-block !important; width: auto !important; text-align: left !important; }
    .header .main-header .user-menu { display: flex !important; }
    /* The finder gives up width before the logo or the avatar do. */
    .header .main-header .dz-finder-btn { min-width: 0; flex: 0 1 auto; overflow: hidden; }
}

/* Finder trigger. An icon at narrow widths, icon + label when there is room. */
.dz-finder-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--dz-canvas-2);
    border: 1px solid var(--dz-line);
    border-radius: 2px;
    color: var(--dz-muted);
    font-size: .88rem;
    font-weight: 500;
    padding: 9px 14px;
    min-width: 0;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.dz-finder-btn:hover { border-color: var(--dz-accent); color: var(--dz-accent); background: var(--dz-surface); }
.dz-finder-btn i { font-size: 1.05rem; flex-shrink: 0; }
.dz-finder-btn kbd {
    font-family: var(--dz-mono);
    font-size: .68rem;
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    border-radius: 2px;
    padding: 2px 6px;
    color: var(--dz-faint);
}
@media (max-width: 767.98px) {
    .dz-finder-btn { padding: 9px 11px; }
    .dz-finder-btn .dz-finder-label, .dz-finder-btn kbd { display: none; }
}

/* Finder modal: a search field docked above a scrolling result list. */
.dz-finder-modal .modal-body { padding: 0; }
.dz-finder-search { position: relative; border-bottom: 1px solid var(--dz-line); }
.dz-finder-search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dz-faint);
    font-size: 1.15rem;
}
.dz-finder-search input {
    border: 0;
    border-radius: 0;
    padding: 20px 20px 20px 52px;
    font-size: 1rem;
    width: 100%;
    background: transparent;
}
.dz-finder-search input:focus { outline: none; box-shadow: none; }
.dz-finder-results { max-height: 60vh; overflow-y: auto; }
.dz-finder-group-label {
    font-family: var(--dz-mono);
    font-size: .66rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dz-muted);
    padding: 14px 20px 7px;
    background: var(--dz-canvas);
    position: sticky;
    top: 0;
    z-index: 1;
}
.dz-finder-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--dz-line-2);
    color: var(--dz-ink);
}
.dz-finder-item:hover, .dz-finder-item:focus { background: var(--dz-blue-50); color: var(--dz-ink); }
.dz-finder-item .dz-finder-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--dz-canvas-2);
    color: var(--dz-accent);
    border-radius: 2px;
}
.dz-finder-item-main { min-width: 0; flex: 1; }
.dz-finder-item-main strong { display: block; font-weight: 600; font-size: .93rem; }
.dz-finder-item-main span { font-size: .8rem; color: var(--dz-muted); }
.dz-finder-empty { padding: 48px 20px; text-align: center; color: var(--dz-muted); }
.dz-finder-empty i { font-size: 2.2rem; color: var(--dz-blue-300); display: block; margin-bottom: 10px; }

/* The page header is a flex row: anything dropped inside it becomes a column
   beside the title. Keep it to the title and its action buttons. */
.page-header { flex-wrap: wrap; row-gap: 12px; }


/* 13. Colour pass =======================================================
   The port kept the DizaSms structure but drained its colour: a near-white
   canvas, a white sidebar and flat buttons. What made the original work was
   the distance between the ground and the things sitting on it. These
   sections restore that, in purple and the logo's orange.
   ====================================================================== */

/* ---- Sidebar ---------------------------------------------------------
   It was white on near-white, so it read as empty space rather than as a
   panel. Now it sits on its own tint with a hard edge, and the active item
   is marked with the logo's orange. */
.sidebar {
    background: var(--dz-canvas-2) !important;
    border-right: 1px solid var(--dz-line) !important;
}
.sidebar .sidebar-logo {
    background: var(--dz-surface);
    border-bottom: 1px solid var(--dz-line);
    padding: 14px 20px;
}
.sidebar .submenu-hdr {
    font-family: var(--dz-mono);
    font-size: .64rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dz-muted);
    padding: 22px 20px 8px;
    margin: 0;
}
.sidebar #sidebar-menu ul li a {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 20px;
    margin: 1px 10px;
    border-radius: 3px;
    color: var(--dz-ink-2);
    font-weight: 500;
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar #sidebar-menu ul li a i { color: var(--dz-muted); transition: color .15s ease; }
.sidebar #sidebar-menu ul li a:hover {
    background: var(--dz-surface);
    color: var(--dz-accent);
}
.sidebar #sidebar-menu ul li a:hover i { color: var(--dz-accent); }
/* Marked by the page, see include/aside.php */
.sidebar #sidebar-menu ul li a.active {
    background: var(--dz-surface);
    color: var(--dz-accent);
    border-left-color: var(--dz-orange);
    font-weight: 600;
    box-shadow: var(--dz-shadow-sm);
}
.sidebar #sidebar-menu ul li a.active i { color: var(--dz-orange); }

/* ---- Buttons ---------------------------------------------------------
   Flat fills with no feedback. Give them weight, a hover state and a focus
   ring that is visible against both the canvas and a card. */
.btn-primary {
    background: var(--dz-accent);
    border-color: var(--dz-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(56, 17, 100, .18);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--dz-accent-2);
    border-color: var(--dz-accent-2);
    color: #fff;
    box-shadow: 0 3px 10px rgba(56, 17, 100, .26);
}
/* For the one action on a page that should pull the eye. */
.btn-accent {
    background: var(--dz-orange);
    border-color: var(--dz-orange);
    color: var(--dz-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(168, 92, 5, .2);
}
.btn-accent:hover, .btn-accent:focus {
    background: var(--dz-orange-600);
    border-color: var(--dz-orange-600);
    color: #fff;
    box-shadow: 0 3px 10px rgba(168, 92, 5, .28);
}
.btn-outline-primary {
    border-color: var(--dz-line);
    color: var(--dz-accent);
    background: var(--dz-surface);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--dz-blue-50);
    border-color: var(--dz-accent);
    color: var(--dz-accent-2);
}
.btn-secondary {
    background: var(--dz-canvas-2);
    border-color: var(--dz-line);
    color: var(--dz-ink-2);
}
.btn-secondary:hover { background: var(--dz-canvas-3); color: var(--dz-ink); border-color: var(--dz-line); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--dz-orange-100); outline: none; }

/* Counters and badges pick up the orange so numbers read at a glance. */
.dz-counter {
    background: var(--dz-orange-50);
    color: var(--dz-orange-700);
    border: 1px solid var(--dz-orange-100);
    border-radius: 2px;
    padding: 1px 7px;
    font-weight: 600;
}

/* Cards now sit on a tinted ground, so they need a defined edge. */
.card {
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    box-shadow: var(--dz-shadow-sm);
}
.card-header { background: var(--dz-surface); border-bottom: 1px solid var(--dz-line); }
.dz-tile { box-shadow: var(--dz-shadow-sm); }
.dz-tile-top i { color: var(--dz-orange); }
.thead-light th, .table thead th { background: var(--dz-canvas); }

/* The header is the only white band above the tinted canvas; keep it distinct. */
.header { background: var(--dz-surface) !important; border-bottom: 1px solid var(--dz-line); }
.dz-finder-btn { background: var(--dz-canvas); }
.dz-finder-btn:hover { background: var(--dz-canvas-2); }


/* 14. Sign-in ===========================================================
   It was one narrow column of oversized fields on an empty white page. Split
   it: the brand panel carries the colour and says what the product is, the
   form side stays quiet so the two fields are the only thing to do.
   ====================================================================== */

/* header_auth.php puts bg-white on the body; the split owns the page instead. */
body.account-page {
    background: var(--dz-canvas) !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}
/* The theme's page loader stays in flow after it fades, leaving a band of canvas
   under the split. There is nothing to wait for on this page. */
body.account-page #global-loader { display: none !important; }

.hez-auth {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    flex: 1;
    min-height: 100vh;
}
/* Pin both columns rather than relying on the grid row inheriting a height from a
   flex parent the theme also styles - the brand panel was coming up short of the
   fold and leaving a band of canvas under it. */
.hez-auth > .hez-auth-brand,
.hez-auth > .hez-auth-form { min-height: 100vh; }

/* ---- Brand side ---- */
.hez-auth-brand {
    background:
        radial-gradient(circle at 15% 12%, rgba(247, 147, 29, .16), transparent 45%),
        linear-gradient(155deg, var(--dz-accent) 0%, var(--dz-dark) 100%);
    color: #fff;
    padding: 56px 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}
.hez-auth-brand-inner { max-width: 30rem; }

.hez-auth-logo { margin-bottom: 48px; }
/* Only a dark lockup exists, so it is knocked out to white here and the brand
   orange comes back as the rule underneath rather than being lost in the filter. */
.hez-auth-logo img {
    height: 46px; width: auto; display: block;
    filter: brightness(0) invert(1);
}
.hez-auth-rule {
    display: block; width: 56px; height: 4px;
    background: var(--dz-orange); margin-top: 16px;
}

.hez-auth-brand h1 {
    color: #fff;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 16px;
}
.hez-auth-sub { color: rgba(255,255,255,.72); font-size: 1rem; margin: 0 0 40px; }

.hez-auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.hez-auth-points li { display: flex; gap: 15px; align-items: flex-start; }
.hez-auth-points i {
    font-size: 1.1rem; color: var(--dz-orange);
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 3px;
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center;
}
.hez-auth-points b { display: block; color: #fff; font-weight: 600; font-size: .95rem; }
.hez-auth-points span { color: rgba(255,255,255,.6); font-size: .85rem; }

.hez-auth-note { color: rgba(255,255,255,.45); font-size: .78rem; margin: 0; }
.hez-auth-note a { color: rgba(255,255,255,.7); }
.hez-auth-note a:hover { color: #fff; }

/* ---- Form side ---- */
.hez-auth-form {
    background: var(--dz-surface);
    display: flex; align-items: center; justify-content: center;
    padding: 56px 40px;
}
.hez-auth-form-inner { width: 100%; max-width: 24rem; }
.hez-auth-form h2 { font-size: 1.9rem; font-weight: 800; margin: 10px 0 8px; }
.hez-auth-lede { color: var(--dz-muted); margin: 0 0 30px; }

/* The stock theme oversizes these; bring them back to a normal control. */
.hez-auth-form .form-control {
    padding: 11px 14px;
    height: auto;
    font-size: .95rem;
    background: var(--dz-canvas);
    border-color: var(--dz-line);
}
.hez-auth-form .form-control:focus { background: var(--dz-surface); border-color: var(--dz-accent); }
.hez-auth-form .input-group-text { background: var(--dz-canvas); border-color: var(--dz-line); color: var(--dz-muted); }
.hez-auth-form .form-label { font-weight: 600; font-size: .85rem; color: var(--dz-ink); margin-bottom: 6px; }
.hez-auth-form .pass-group { position: relative; }
.hez-auth-form .pass-group .form-control { padding-right: 40px; }
.hez-auth-form .toggle-password {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--dz-muted); cursor: pointer; z-index: 5;
}
.hez-auth-form .btn-primary { padding: 12px 18px; font-size: .95rem; }
.hez-auth-help { margin: 22px 0 0; font-size: .82rem; color: var(--dz-faint); text-align: center; }

/* Stack on a narrow screen: the form first, the brand panel trimmed underneath. */
@media (max-width: 900px) {
    .hez-auth { grid-template-columns: 1fr; min-height: 0; }
    .hez-auth-brand { order: 2; padding: 40px 28px 32px; }
    .hez-auth-brand h1 { font-size: 1.5rem; }
    .hez-auth-points { display: none; }
    .hez-auth-form { order: 1; min-height: 78vh; padding: 40px 24px; }
}


/* ==========================================================================
   15. Admin redesign
   --------------------------------------------------------------------------
   The interior was flat next to the sign-in screen: near-white on near-white,
   2px corners, no hierarchy between a page, a card and a number. This section
   is the redesign - white cards on a light purple canvas, restrained 8px
   corners, IBM Plex Mono for every figure, and one accent per meaning.

   It is loaded last on purpose and supersedes sections 4-14 above, which are
   kept so the sign-in screen and the auth flow are untouched.
   ========================================================================== */

:root {
    /* Ground and rules. The canvas is a shade of the brand purple so white
       cards read as objects sitting on it rather than as holes in it. */
    --dz-canvas:    #F4F2FA;
    --dz-canvas-2:  #EEEAF4;
    --dz-canvas-3:  #E7DFF4;
    --dz-line:      #E6E0F1;   /* card and control edges */
    --dz-line-2:    #F0ECF8;   /* row rules inside a card */
    --hez-nav-rule: #F2EEF9;   /* the lightest rule - sidebar rows, tile feet */
    --hez-th-bg:    #FAF8FD;   /* table head band */
    --hez-row-hover:#F7F5FB;
    --hez-tint:     #F3EFFA;   /* active nav, info banners, pill grounds */

    /* Status grounds, paired with the ink already defined in section 1. */
    --hez-green-bg: #DCEBE6;
    --hez-amber-bg: #FEF3E5;
    --hez-amber-ink:#A85C05;
    --hez-red-bg:   #F4DDD9;
    --hez-red-line: #E7C3BD;
    --hez-gray-bg:  #EEEAF4;

    /* Roundness is deliberately restrained: cards 8, controls 7, pills 6. */
    --dz-r-sm: 6px;
    --dz-r:    7px;
    --dz-r-lg: 8px;
    --dz-r-xl: 10px;

    --dz-shadow-sm: 0 2px 6px rgba(25, 22, 35, .04);
    --hez-shadow-hero: 0 16px 38px rgba(56, 17, 100, .30);

    --hez-sidebar-w: 252px;
    --hez-topbar-h:  74px;
}

::-webkit-scrollbar-track { background: var(--dz-canvas); }
::-webkit-scrollbar-thumb { background: var(--dz-canvas-3); border: 2px solid var(--dz-canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--dz-faint); }


/* ---- Shell ------------------------------------------------------------
   The sidebar owns the full height and carries the logo; the top bar starts
   where the sidebar ends. The stock theme pins the header across the whole
   viewport and repeats the logo inside it, which left two lockups stacked
   above one another. */

@media (min-width: 992px) {
    .sidebar { top: 0 !important; }
    .header {
        left: var(--hez-sidebar-w) !important;
        height: var(--hez-topbar-h) !important;
    }
    /* The lockup lives in the sidebar at this width. */
    .header .main-header .header-left { display: none !important; }
    .page-wrapper { padding-top: var(--hez-topbar-h) !important; }
}

.header { border-bottom: 1px solid var(--dz-line) !important; box-shadow: none !important; }
.header .main-header { padding: 0 28px; gap: 16px; min-height: 0; height: 100%; }

.page-wrapper .content { padding: 28px 32px 44px; }
@media (max-width: 991.96px) {
    .page-wrapper .content { padding: 20px 16px 32px; }
}

.copyright-footer {
    border-top: 1px solid var(--dz-line) !important;
    padding: 16px 32px;
    font-family: var(--dz-mono);
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--dz-muted);
}
.copyright-footer p { font-size: inherit !important; color: inherit !important; }


/* ---- Sidebar ----------------------------------------------------------
   Nav rows run the full width and are separated by a hairline, a deliberate
   choice so an inactive row still reads as its own row. The active one takes
   the tint plus an amber bar on its leading edge. */

.sidebar {
    background: var(--dz-surface) !important;
    border-right: 1px solid var(--dz-line) !important;
    display: flex;
    flex-direction: column;
}
.sidebar .sidebar-logo {
    height: auto;
    padding: 22px 22px 20px;
    border-bottom: 0;
    background: var(--dz-surface);
    flex: 0 0 auto;
}
.sidebar .sidebar-logo .logo img { height: 32px; width: auto; display: block; }
.sidebar .sidebar-inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    height: auto !important;
}
.sidebar .sidebar-menu { padding: 0; }
.sidebar .sidebar-menu > ul > li { margin-bottom: 0; }

.sidebar .submenu-hdr {
    font-family: var(--dz-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dz-faint);
    padding: 20px 22px 6px;
    margin: 0;
}
.sidebar #sidebar-menu > ul > li:first-child .submenu-hdr { padding-top: 14px; }

.sidebar #sidebar-menu ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--hez-nav-rule);
    border-left: 3px solid transparent;
    color: var(--dz-ink-2);
    font-weight: 500;
    font-size: .92rem;
    box-shadow: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar #sidebar-menu ul li a i {
    font-size: 1.2rem;
    color: var(--dz-muted);
    margin-right: 0 !important;
    min-width: 0;
}
.sidebar #sidebar-menu ul li a:hover {
    background: var(--hez-row-hover);
    color: var(--dz-accent);
    box-shadow: none;
}
.sidebar #sidebar-menu ul li a:hover i { color: var(--dz-accent); }
.sidebar #sidebar-menu ul li a.active {
    background: var(--hez-tint);
    border-left-color: var(--dz-orange);
    color: var(--dz-accent);
    font-weight: 600;
    box-shadow: none;
}
.sidebar #sidebar-menu ul li a.active i { color: var(--dz-accent); }

/* One level of nesting, for Settings.
   The theme only styles a submenu sitting directly under #sidebar-menu > ul; this one
   lives inside the Administration group, a level deeper, so it gets its own rules. The
   children are indented rather than promoted to top level: they are one area of the
   panel, and three more full-width rows would bury the sections above them. */
.sidebar #sidebar-menu ul li.submenu > a { cursor: pointer; }
.sidebar #sidebar-menu ul li.submenu > a .menu-arrow {
    margin-left: auto;
    font-size: .95rem !important;
    transition: transform .18s ease;
}
.sidebar #sidebar-menu ul li.submenu > a.subdrop .menu-arrow { transform: rotate(90deg); }

/* Collapsed by default; aside.php renders it open on its own pages so the current
   section is never hidden behind a closed group. */
.sidebar #sidebar-menu ul li.submenu > ul { display: none; }

.sidebar #sidebar-menu ul li.submenu > ul > li > a {
    position: relative;
    padding-left: 56px;
    font-size: .86rem;
    color: var(--dz-muted);
}
/* A dot where the parent rows carry an icon, so the column still reads as a column. */
.sidebar #sidebar-menu ul li.submenu > ul > li > a::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dz-faint);
    transition: background .15s ease;
}
.sidebar #sidebar-menu ul li.submenu > ul > li > a:hover::before,
.sidebar #sidebar-menu ul li.submenu > ul > li > a.active::before { background: var(--dz-orange); }

/* The open parent stays quiet - the orange marker belongs to the page you are on, and
   two of them on screen at once points at nothing. */
.sidebar #sidebar-menu ul li.submenu > a.hez-nav-open { color: var(--dz-accent); }
.sidebar #sidebar-menu ul li.submenu > a.hez-nav-open i { color: var(--dz-accent); }

/* Waiting work, counted where the eye already is. */
.hez-nav-count {
    margin-left: auto;
    font-family: var(--dz-mono);
    font-size: .64rem;
    font-weight: 600;
    background: var(--hez-amber-bg);
    color: var(--hez-amber-ink);
    padding: 1px 8px;
    border-radius: 4px;
}

.hez-help {
    flex: 0 0 auto;
    margin: 14px;
    padding: 15px;
    border-radius: var(--dz-r-lg);
    background: var(--hez-tint);
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--dz-ink);
}
.hez-help:hover { color: var(--dz-ink); background: var(--dz-canvas-3); }
.hez-help-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--dz-r-lg);
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    display: grid;
    place-items: center;
}
.hez-help-icon i { font-size: 1.2rem; color: var(--dz-accent); }
.hez-help-text { line-height: 1.3; min-width: 0; }
.hez-help-text b { display: block; font-weight: 600; font-size: .84rem; color: var(--dz-ink); }
.hez-help-text span { font-size: .76rem; color: var(--dz-muted); }


/* ---- Top bar ----------------------------------------------------------
   A search pill on the left, the signed-in user on the right, nothing in
   between. The finder trigger is restyled in place rather than replaced so
   its keyboard shortcut and modal keep working. */

.dz-finder-btn {
    position: relative;
    min-width: 340px;
    background: var(--dz-canvas);
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-r-lg);
    color: var(--dz-faint);
    font-size: .9rem;
    font-weight: 400;
    padding: 11px 16px 11px 42px;
    text-align: left;
    gap: 0;
}
.dz-finder-btn:hover { border-color: var(--dz-accent); background: var(--dz-canvas); color: var(--dz-muted); }
.dz-finder-btn i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dz-faint);
    font-size: 1.05rem;
}
.dz-finder-btn .dz-finder-label { flex: 1; }
.dz-finder-btn kbd {
    margin-left: auto;
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    border-radius: 4px;
}
@media (max-width: 1199.98px) { .dz-finder-btn { min-width: 240px; } }
@media (max-width: 767.98px) {
    .dz-finder-btn { min-width: 0; padding: 11px 12px 11px 38px; }
    .dz-finder-btn i { left: 12px; }
}

.hez-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}
.hez-bell { position: relative; display: inline-flex; color: var(--dz-muted); }
.hez-bell:hover { color: var(--dz-accent); }
.hez-bell i { font-size: 1.35rem; }
.hez-bell-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    background: var(--dz-orange);
    border-radius: 50%;
    border: 2px solid var(--dz-surface);
}
.hez-topbar-divider { width: 1px; height: 30px; background: var(--dz-line); }

.header .main-header .user-menu .nav-link.userset { padding: 0; }
.hez-user { display: flex; align-items: center; gap: 11px; }
.hez-user img {
    width: 40px;
    height: 40px;
    border-radius: var(--dz-r-lg);
    object-fit: cover;
    border: 1px solid var(--dz-line);
}
.hez-user-text { line-height: 1.25; text-align: left; }
.hez-user-text b { display: block; font-weight: 700; font-size: .9rem; color: var(--dz-ink); }
.hez-user-text span { font-size: .72rem; color: var(--dz-muted); }
.hez-user > .ti-chevron-down { font-size: 1rem; color: var(--dz-faint); }
@media (max-width: 767.98px) {
    .header .main-header { padding: 0 14px; gap: 10px; }
    .hez-topbar-right { gap: 12px; }
    /* Below this width only the avatar survives - the name, the rule and the
       caret together cost more room than the header has. */
    .hez-user-text,
    .hez-topbar-divider,
    .hez-user > .ti-chevron-down { display: none; }
}


/* ---- Page header ------------------------------------------------------ */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.page-header .page-title .dz-kicker { color: var(--dz-orange); margin-bottom: 8px; }
.page-header .page-title h1,
.page-header .page-title h3,
.page-header .page-title h4 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--dz-ink);
}
.page-header .page-title h6 {
    margin: 6px 0 0;
    font-size: .9rem;
    font-weight: 400;
    color: var(--dz-muted);
    letter-spacing: 0;
}
/* The dashboard greets rather than labels, so it runs a size larger. */
.page-header.hez-greeting .page-title h4 { font-size: 2.1rem; }
.page-header.hez-greeting .page-title h6 { font-size: .95rem; }
.page-header .page-btn { display: flex; gap: 10px; flex-wrap: wrap; }


/* ---- Buttons ---------------------------------------------------------- */

.btn, .btn.btn-sm, .btn.btn-lg { border-radius: var(--dz-r) !important; }
.btn {
    font-family: var(--dz-font);
    font-weight: 600;
    font-size: .88rem;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: none !important;
}
.btn i { font-size: 1rem; }

.btn.btn-primary {
    background-color: var(--dz-accent) !important;
    border: 1px solid var(--dz-accent) !important;
    color: #fff !important;
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
    background-color: var(--dz-accent-2) !important;
    border-color: var(--dz-accent-2) !important;
}

/* The default secondary action: white, hairline edge, purple on hover. */
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-secondary,
.btn.btn-light {
    background-color: var(--dz-surface) !important;
    border: 1px solid var(--dz-line) !important;
    color: var(--dz-ink-2) !important;
}
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus,
.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:focus,
.btn.btn-secondary:hover, .btn.btn-secondary:focus,
.btn.btn-light:hover {
    background-color: var(--dz-surface) !important;
    border-color: var(--dz-accent) !important;
    color: var(--dz-accent) !important;
}

.btn.btn-success, .btn.btn-outline-success:hover {
    background-color: var(--dz-success) !important;
    border: 1px solid var(--dz-success) !important;
    color: #fff !important;
}
.btn.btn-outline-success {
    background-color: var(--dz-surface) !important;
    border: 1px solid #B4D8CE !important;
    color: var(--dz-success) !important;
}
.btn.btn-outline-danger, .btn.btn-outline-warning {
    background-color: var(--dz-surface) !important;
    border: 1px solid var(--hez-red-line) !important;
    color: var(--dz-danger) !important;
}
.btn.btn-outline-danger:hover, .btn.btn-outline-warning:hover {
    background-color: var(--dz-danger) !important;
    border-color: var(--dz-danger) !important;
    color: #fff !important;
}
.btn.btn-outline-info {
    background-color: var(--dz-surface) !important;
    border: 1px solid var(--dz-line) !important;
    color: var(--dz-accent) !important;
}
.btn.btn-outline-info:hover { background-color: var(--hez-tint) !important; color: var(--dz-accent) !important; }

/* Amber is reserved for the single call to action on the reserve hero. */
.btn.btn-accent {
    background-color: var(--dz-orange) !important;
    border: 1px solid var(--dz-orange) !important;
    color: var(--dz-dark) !important;
    font-weight: 700;
    font-size: .9rem;
    padding: 13px 22px;
}
.btn.btn-accent:hover, .btn.btn-accent:focus {
    background-color: var(--dz-orange-300) !important;
    border-color: var(--dz-orange-300) !important;
    color: var(--dz-dark) !important;
}

.btn.btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: var(--dz-r-sm) !important; }
.btn.btn-lg { padding: 14px 24px; font-size: .95rem; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--hez-tint) !important; outline: none; }

/* Square icon buttons - the row actions on Agents and Users. */
.hez-icon-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-r-sm);
    color: var(--dz-ink-2);
    transition: border-color .15s ease, color .15s ease;
}
.hez-icon-btn i { font-size: 1rem; }
.hez-icon-btn:hover { border-color: var(--dz-accent); color: var(--dz-accent); }
.hez-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }


/* ---- Cards ------------------------------------------------------------ */

.card {
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-r-lg);
    box-shadow: var(--dz-shadow-sm);
    margin-bottom: 18px;
}
.card-header {
    background: var(--dz-surface);
    border-bottom: 1px solid var(--dz-line-2);
    padding: 18px 22px;
    border-radius: var(--dz-r-lg) var(--dz-r-lg) 0 0;
}
/* The template title-cases every card heading, which turns "Recent loans" into
   "Recent Loans". Sentence case is the house style. */
.card .card-title, .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dz-ink);
    letter-spacing: -.01em;
    text-transform: none;
}
.card-body { padding: 22px; }
.card-footer { background: var(--dz-surface); border-top: 1px solid var(--dz-line-2); padding: 16px 22px; }
a:hover .card { transform: none; box-shadow: 0 4px 14px rgba(25, 22, 35, .07); }

.hez-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    row-gap: 12px;
}


/* ---- Tables ----------------------------------------------------------- */

.table { font-size: .88rem; color: var(--dz-ink-2); }
.table > thead th,
.table thead.thead-light th {
    background: var(--hez-th-bg);
    color: var(--dz-faint);
    font-family: var(--dz-mono);
    font-weight: 600;
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--dz-line);
    padding: 11px 22px;
}
.table > tbody > tr > td { padding: 13px 22px; border-bottom: 1px solid var(--dz-line-2); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover { background: var(--hez-row-hover); }
.table a { color: var(--dz-accent); }
.table-responsive { border-radius: 0; overflow-x: auto; }

/* Columns clip before they wrap. Every wide table declares the width it needs
   and scrolls inside .table-responsive rather than squeezing. */
.hez-table-sm { min-width: 540px; }
.hez-table-md { min-width: 720px; }
.hez-table-lg { min-width: 900px; }
.hez-table-xl { min-width: 1080px; }

.dz-mono { font-family: var(--dz-mono); font-weight: 600; color: var(--dz-ink); }
.dz-when { color: var(--dz-faint) !important; font-weight: 500; font-size: .78rem; font-family: var(--dz-mono); }
.dz-link-mono { font-family: var(--dz-font); font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; }


/* ---- Status ----------------------------------------------------------- */

.hez-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--dz-mono);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: var(--dz-r-sm);
    white-space: nowrap;
}
.hez-pill-amber  { background: var(--hez-amber-bg); color: var(--hez-amber-ink); }
.hez-pill-green  { background: var(--hez-green-bg); color: var(--dz-success); }
.hez-pill-red    { background: var(--hez-red-bg);   color: var(--dz-danger); }
.hez-pill-gray   { background: var(--hez-gray-bg);  color: var(--dz-muted); }
.hez-pill-purple { background: var(--hez-tint);     color: var(--dz-accent); }
.hez-pill strong { font-weight: 600; }

/* Dot variant - a solid dot plus a mono label, for status columns that sit
   beside other text and would be shouted down by a filled pill. */
.dz-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--dz-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dz-ink-2);
}
.dz-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.badge {
    font-family: var(--dz-mono);
    font-weight: 600;
    font-size: .64rem;
    padding: 4px 9px;
    border-radius: var(--dz-r-sm);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.badge.bg-success, .badge.bg-soft-success { background: var(--hez-green-bg) !important; color: var(--dz-success) !important; }
.badge.bg-warning, .badge.bg-soft-warning { background: var(--hez-amber-bg) !important; color: var(--hez-amber-ink) !important; }
.badge.bg-danger,  .badge.bg-soft-danger  { background: var(--hez-red-bg)   !important; color: var(--dz-danger)  !important; }

.dz-counter {
    font-family: var(--dz-mono);
    font-size: .64rem;
    font-weight: 600;
    background: var(--hez-amber-bg);
    color: var(--hez-amber-ink);
    padding: 1px 8px;
    border-radius: 4px;
}


/* ---- Stat tiles -------------------------------------------------------
   A coloured top edge carries the meaning: purple neutral, amber watch,
   green positive, red negative. No sparklines - a 60px chart of six points
   was decoration, not information. */

.dz-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}
.dz-tiles-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.dz-tile {
    display: block;
    background: var(--dz-surface);
    border: 1px solid var(--dz-line);
    border-top: 3px solid var(--dz-accent);
    border-radius: var(--dz-r-lg);
    padding: 20px 22px;
    color: var(--dz-ink);
    box-shadow: var(--dz-shadow-sm);
    transition: box-shadow .15s ease;
}
.dz-tile:hover { transform: none; box-shadow: 0 4px 14px rgba(25, 22, 35, .07); color: var(--dz-ink); }
.dz-tile-amber { border-top-color: var(--dz-orange); }
.dz-tile-green { border-top-color: var(--dz-success); }
.dz-tile-red   { border-top-color: var(--dz-danger); }

.dz-tile-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 18px;
}
.dz-tile-top i { font-size: 1.1rem; color: var(--dz-faint); }
.dz-tile-label {
    font-family: var(--dz-mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dz-muted);
}
.dz-tile-value {
    font-family: var(--dz-mono);
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -.03em;
    color: var(--dz-ink);
    line-height: 1;
    word-break: break-word;
}
.dz-tile-sm .dz-tile-value { font-size: 1.35rem; }

.dz-tile-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hez-nav-rule);
}
.dz-tile-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--dz-mono);
    font-size: .74rem;
    font-weight: 600;
    color: var(--dz-success);
}
.dz-tile-delta i { font-size: .9rem; }
.dz-tile-delta-bad { color: var(--dz-danger); }
.dz-tile-note, .dz-tile .dz-hint { font-size: .76rem; color: var(--dz-faint); margin: 0; }
.dz-tile .dz-hint { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hez-nav-rule); }
.dz-tile-foot .dz-hint { display: inline; margin: 0; padding: 0; border: 0; }


/* ---- Company reserve hero ---------------------------------------------
   The one figure the business is actually run on, given the weight to match.
   Everything else on the dashboard is a tile. */

.hez-hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(247, 147, 29, .22), transparent 46%),
        linear-gradient(150deg, var(--dz-accent) 0%, var(--dz-dark) 100%);
    color: #fff;
    border-radius: var(--dz-r-xl);
    padding: 30px 34px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    box-shadow: var(--hez-shadow-hero);
}
.hez-hero-main { flex: 1 1 320px; min-width: 0; }
.hez-hero-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.hez-hero-chip {
    width: 30px;
    height: 30px;
    border-radius: var(--dz-r);
    background: rgba(255, 255, 255, .12);
    display: grid;
    place-items: center;
}
.hez-hero-chip i { color: var(--dz-orange); font-size: 1.05rem; }
.hez-hero-label {
    font-family: var(--dz-mono);
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}
.hez-hero-figure { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.hez-hero-cur { font-family: var(--dz-mono); font-weight: 500; font-size: 1.2rem; color: rgba(255, 255, 255, .6); }
.hez-hero-value {
    font-family: var(--dz-mono);
    font-weight: 600;
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    letter-spacing: -.03em;
    line-height: 1;
}
.hez-hero-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--dz-mono);
    font-size: .8rem;
    font-weight: 600;
    background: rgba(31, 111, 92, .26);
    color: #7BE3C4;
    padding: 3px 9px;
    border-radius: var(--dz-r-sm);
}
.hez-hero-delta-bad { background: rgba(178, 58, 46, .3); color: #F3B5AC; }
.hez-hero-subs { display: flex; gap: 30px; flex-wrap: wrap; }
.hez-hero-sub-label { font-size: .74rem; color: rgba(255, 255, 255, .55); margin-bottom: 3px; }
.hez-hero-sub-value { font-family: var(--dz-mono); font-weight: 600; }
@media (max-width: 575.98px) { .hez-hero { padding: 24px 20px; gap: 24px; } }


/* ---- Wallet activity list --------------------------------------------
   Money in and money out read as a list, not a table: the direction is a
   coloured chip and the amount carries its own sign. */

.hez-activity { padding: 8px 22px; }
.hez-activity-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--dz-line-2);
}
.hez-activity-row:last-child { border-bottom: 0; }
.hez-activity-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--dz-r-lg);
    display: grid;
    place-items: center;
}
.hez-activity-icon i { font-size: 1.2rem; }
.hez-activity-in  { background: var(--hez-green-bg); color: var(--dz-success); }
.hez-activity-out { background: var(--hez-amber-bg); color: var(--dz-orange-600); }
/* Pending and failed movements: the money has not moved, so they get no direction
   colour and no sign - they read as neutral against the settled rows around them. */
.hez-activity-icon:not(.hez-activity-in):not(.hez-activity-out) {
    background: var(--hez-gray-bg);
    color: var(--dz-muted);
}
.hez-activity-main { flex: 1; min-width: 0; }
.hez-activity-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--dz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hez-activity-meta { font-size: .76rem; color: var(--dz-faint); }
/* A status pill sits inline after the name, so the line wraps rather than clipping it. */
.hez-activity-name .hez-pill { vertical-align: middle; margin-left: 6px; }
.hez-activity-amount { font-family: var(--dz-mono); font-weight: 600; white-space: nowrap; }
.hez-amount-in  { color: var(--dz-success); }
.hez-amount-out { color: var(--dz-warning); }
.hez-amount-muted { color: var(--dz-muted); }


/* ---- Identity photo --------------------------------------------------- */

/* The passport photo captured at registration, shown on the agent and customer
   profiles. Fixed frame so a portrait and a landscape capture line up the same. */
.hez-idphoto {
    display: block;
    width: 108px;
    height: 132px;
    margin-bottom: 18px;
    border-radius: var(--dz-r-lg);
    border: 1px solid var(--dz-line-2);
    overflow: hidden;
    background: var(--hez-gray-bg);
}
.hez-idphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hez-idphoto-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    color: var(--dz-muted);
    text-align: center;
    font-size: .72rem;
    padding: 8px;
}
.hez-idphoto-empty i { font-size: 1.5rem; }


/* ---- Forms ------------------------------------------------------------ */

.form-label {
    font-family: var(--dz-mono);
    font-weight: 500;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dz-muted);
    margin-bottom: 7px;
}
.form-control, .form-select {
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-r);
    padding: 11px 14px;
    font-size: .92rem;
    color: var(--dz-ink);
    background-color: var(--dz-surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--dz-accent);
    box-shadow: 0 0 0 3px var(--hez-tint);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--dz-canvas);
    color: var(--dz-ink);
    opacity: 1;
}
input[type="number"].form-control { font-family: var(--dz-mono); }
.form-control-sm, .form-select-sm { padding: 8px 12px; font-size: .85rem; border-radius: var(--dz-r-sm); }
/* A native select still draws its caret over the right edge, so it needs the
   room back that the padding above took away. */
.form-select { padding-right: 36px; background-position: right 12px center; }
.form-select-sm { padding-right: 32px; background-position: right 10px center; }
.input-group-text { background: var(--dz-canvas); border: 1px solid var(--dz-line); border-radius: var(--dz-r); color: var(--dz-muted); }
.form-check-input { border-color: var(--dz-line); border-radius: 4px; }
.dz-hint { display: block; font-size: .78rem; color: var(--dz-faint); margin-top: 7px; }

/* The in-card search field: an icon docked inside a pill. */
.search-set .input-icon-start { position: relative; }
.search-set .input-icon-addon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dz-faint) !important;
    z-index: 2;
    line-height: 1;
}
.search-set .table-search-input, .search-set input.form-control {
    padding-left: 38px;
    background: var(--dz-canvas);
    border-radius: var(--dz-r);
    min-width: 240px;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-r);
    min-height: 44px;
}
.select2-dropdown { border: 1px solid var(--dz-line); border-radius: var(--dz-r-lg); }


/* ---- Tabs -------------------------------------------------------------
   Two strips, used deliberately: pills where the tabs switch a data set,
   an underline where they switch a section of one page. */

.nav-tabs { border-bottom: 1px solid var(--dz-line); gap: 4px; }

.hez-tabs-pill { border-bottom: 0; gap: 6px; }
.hez-tabs-pill .nav-link {
    border: 0 !important;
    border-radius: var(--dz-r) !important;
    padding: 8px 14px;
    font-weight: 600;
    font-size: .88rem;
    color: var(--dz-muted);
    background: transparent;
}
.hez-tabs-pill .nav-link:hover { background: var(--hez-row-hover); color: var(--dz-ink); }
.hez-tabs-pill .nav-link.active { background: var(--hez-tint); color: var(--dz-accent); }

.hez-tabs-line { border-bottom: 1px solid var(--dz-line); gap: 24px; }
.hez-tabs-line .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 2px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--dz-muted);
    background: transparent !important;
    margin-bottom: -1px;
}
.hez-tabs-line .nav-link:hover { color: var(--dz-ink); }
.hez-tabs-line .nav-link.active { color: var(--dz-accent); border-bottom-color: var(--dz-accent) !important; }


/* ---- Progress, summaries, banners ------------------------------------- */

.progress { height: 8px; background: #EFEAF7; border-radius: 4px; overflow: hidden; }
.progress-bar { background: var(--dz-accent); border-radius: 4px; }
.progress-bar.is-peak { background: var(--dz-orange); }

.dz-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dz-line-2);
}
.dz-summary-row:last-of-type { border-bottom: 0; }
.dz-summary-row > span:first-child { font-size: .88rem; color: var(--dz-muted); }
.dz-summary-row .dz-mono { font-size: .88rem; }
.dz-summary-row.is-bad .dz-mono { color: var(--dz-danger); }

.dz-banner {
    background: var(--hez-tint);
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-r);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .88rem;
    color: var(--dz-ink-2);
    margin-bottom: 20px;
}
.dz-banner i { font-size: 1.15rem; color: var(--dz-accent); }

.alert { border-radius: var(--dz-r); border-width: 1px; }
.modal-content { border: 1px solid var(--dz-line); border-radius: var(--dz-r-lg); }
.modal-header { border-bottom: 1px solid var(--dz-line-2); padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--dz-line-2); padding: 16px 22px; background: var(--dz-surface); }
.modal-header .page-title h4 { font-size: 1.15rem; margin: 0; }

.dz-empty { padding: 48px 20px; }
.dz-empty i { font-size: 2.4rem; color: var(--dz-canvas-3); }
.dz-empty p { color: var(--dz-muted); margin: 12px 0 18px; font-size: .9rem; }

.dz-kicker {
    font-family: var(--dz-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dz-orange);
    margin-bottom: 8px;
}

/* Two-column page bodies. A plain grid rather than Bootstrap rows so the
   ratio is stated once, here, instead of in every view. */
.hez-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.hez-split-wide { grid-template-columns: 1.6fr 1fr; }
.hez-split-even { grid-template-columns: 1fr 1fr; }
.hez-split > * { min-width: 0; }
@media (max-width: 1199.98px) {
    .hez-split, .hez-split-wide, .hez-split-even { grid-template-columns: 1fr; }
}
.hez-stack { display: flex; flex-direction: column; gap: 18px; }
.hez-stack > .card { margin-bottom: 0; }