/* ==========================================================================
   EzBiz modern UI — design system + component skin
   Loaded last (after bootstrap, material-dashboard.css and site.css), so it
   only restyles. No markup, IDs or JS hooks depend on anything in here.

   Sections
   1.  Design tokens (light + dark)
   2.  Base / typography
   3.  App shell: sidebar, topbar, content, footer
   4.  Cards & page headers
   5.  Buttons
   6.  Forms (ActiveForm, Select2, datepickers, input-tag)
   7.  Tables (GridView, DetailView, ListView, multiple-input)
   8.  Pagination & summary
   9.  Alerts, badges, breadcrumbs
   10. Dropdowns, modals, nav tabs
   11. Utilities overrides (material gradients, bg/text helpers)
   12. Preloader
   13. Responsive (576 / 768 / 992 / 1200)
   14. Dark mode extras
   15. Print
   ========================================================================== */

/* 1. Design tokens --------------------------------------------------------- */
:root {
    /* Brand (taken from the EzBiz logo: red / black / grey) */
    --ez-primary: #dc2626;
    --ez-primary-hover: #b91c1c;
    --ez-primary-active: #991b1b;
    --ez-primary-rgb: 220, 38, 38;
    --ez-primary-soft: #fef2f2;
    --ez-primary-soft-2: #fee2e2;
    --ez-ink: #111827;
    --ez-ink-rgb: 17, 24, 39;

    /* Semantic */
    --ez-success: #16a34a;
    --ez-success-soft: #ecfdf3;
    --ez-success-ink: #166534;
    --ez-warning: #d97706;
    --ez-warning-soft: #fffbeb;
    --ez-warning-ink: #92400e;
    --ez-danger: #b91c1c;
    --ez-danger-soft: #fef2f2;
    --ez-danger-ink: #991b1b;
    --ez-info: #2563eb;
    --ez-info-hover: #1d4ed8;
    --ez-info-soft: #eff6ff;
    --ez-info-ink: #1e40af;
    --ez-secondary: #64748b;

    /* Neutrals / surfaces */
    --ez-surface: #ffffff;
    --ez-surface-2: #f8fafc;
    --ez-surface-3: #f1f5f9;
    --ez-border-strong: #d1d5db;

    /* Shell */
    --ez-sidebar-w: 264px;
    --ez-sidebar-w-collapsed: 76px;
    --ez-topbar-h: 64px;
    --ez-sidebar-bg: #ffffff;
    --ez-sidebar-text: #374151;
    --ez-sidebar-icon: #6b7280;
    --ez-sidebar-hover: #f3f4f6;
    --ez-topbar-bg: rgba(255, 255, 255, 0.86);

    /* Typography */
    --ez-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ez-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ez-fs-xs: 0.75rem;
    --ez-fs-sm: 0.8125rem;
    --ez-fs-md: 1rem;
    --ez-fs-lg: 1.125rem;
    --ez-fs-xl: 1.375rem;
    --ez-fs-2xl: 1.625rem;

    /* Spacing scale (4px grid) */
    --ez-space-1: 0.25rem;
    --ez-space-2: 0.5rem;
    --ez-space-3: 0.75rem;
    --ez-space-4: 1rem;
    --ez-space-5: 1.25rem;
    --ez-space-6: 1.5rem;
    --ez-space-8: 2rem;
    --ez-gutter: 1rem;

    /* Radius */
    --ez-radius-sm: 6px;
    --ez-radius: 8px;
    --ez-radius-xl: 16px;
    --ez-radius-pill: 999px;

    /* Shadows */
    --ez-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ez-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --ez-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --ez-shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.18);
    --ez-focus-ring: 0 0 0 3px rgba(var(--ez-primary-rgb), 0.28);

    /* Motion */
    --ez-ease: cubic-bezier(0.2, 0, 0, 1);
    --ez-dur: 0.18s;

    /* Hand the brand to Bootstrap variables used by components */
    --bs-primary: var(--ez-primary);
    --bs-primary-rgb: var(--ez-primary-rgb);
    --bs-body-font-family: var(--ez-font);
    --bs-body-color: var(--ez-text);
    --bs-body-bg: var(--ez-bg);
    --bs-border-color: var(--ez-border);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --ez-primary: #ef4444;
    --ez-primary-hover: #f87171;
    --ez-primary-active: #fca5a5;
    --ez-primary-rgb: 239, 68, 68;
    --ez-primary-soft: rgba(239, 68, 68, 0.14);
    --ez-primary-soft-2: rgba(239, 68, 68, 0.22);

    --ez-success: #22c55e;
    --ez-success-soft: rgba(34, 197, 94, 0.14);
    --ez-success-ink: #86efac;
    --ez-warning: #f59e0b;
    --ez-warning-soft: rgba(245, 158, 11, 0.14);
    --ez-warning-ink: #fcd34d;
    --ez-danger: #f87171;
    --ez-danger-soft: rgba(248, 113, 113, 0.14);
    --ez-danger-ink: #fca5a5;
    --ez-info: #3b82f6;
    --ez-info-hover: #60a5fa;
    --ez-info-soft: rgba(59, 130, 246, 0.14);
    --ez-info-ink: #93c5fd;
    --ez-secondary: #94a3b8;

    --ez-bg: #0b1120;
    --ez-surface: #111827;
    --ez-surface-2: #172033;
    --ez-surface-3: #1f2937;
    --ez-border-strong: #374151;
    --ez-text: #e5e7eb;
    --ez-text-muted: #9ca3af;
    --ez-text-subtle: #6b7280;
    --ez-heading: #f9fafb;
    --ez-link: #f87171;

    --ez-sidebar-bg: #0f172a;
    --ez-sidebar-text: #d1d5db;
    --ez-sidebar-icon: #9ca3af;
    --ez-sidebar-hover: #1e293b;
    --ez-sidebar-active-text: #fecaca;
    --ez-topbar-bg: rgba(17, 24, 39, 0.86);

    --ez-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ez-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --ez-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
    --ez-shadow-lg: 0 18px 36px -10px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
}

/* 2. Base / typography ----------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body.ez-body {
    font-family: var(--ez-font);
    background: var(--ez-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.ez-body h1, .ez-body h2, .ez-body h3, .ez-body h4, .ez-body h5, .ez-body h6,
.ez-body .h1, .ez-body .h2, .ez-body .h3, .ez-body .h4, .ez-body .h5, .ez-body .h6 {
    font-family: var(--ez-font);
    color: var(--ez-heading);
    font-weight: 600;
    line-height: 1.3;
}

.ez-body h1, .ez-body .h1 { margin-bottom: var(--ez-space-4); }
.ez-body h5, .ez-body .h5 { font-size: 0.9375rem; }
.ez-body h6, .ez-body .h6 { font-size: var(--ez-fs-base); }

.ez-body p { color: inherit; }

.ez-body a {
    color: var(--ez-link);
    text-decoration: none;
    transition: color var(--ez-dur) var(--ez-ease);
}

.ez-body img,
.ez-body svg,
.ez-body video,
.ez-body canvas,
.ez-body iframe {
    max-width: 100%;
}
.ez-body img:not([height]) { height: auto; }

.ez-body hr { border-color: var(--ez-border); opacity: 1; }

.ez-body code, .ez-body pre { font-family: var(--ez-font-mono); }

.ez-body .material-icons,
.ez-body .material-icons-round {
    font-feature-settings: "liga";
}

/* Visible keyboard focus everywhere */
.ez-body :focus { outline: none; }
.ez-body :focus-visible {
    outline: 2px solid var(--ez-primary);
    outline-offset: 2px;
    border-radius: var(--ez-radius-sm);
}
.ez-body .form-control:focus-visible,
.ez-body .form-select:focus-visible { outline: none; }

.ez-skip-link {
    position: absolute;
    left: var(--ez-space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--ez-space-2) var(--ez-space-4);
    background: var(--ez-ink);
    color: #fff !important;
    border-radius: var(--ez-radius);
}
.ez-skip-link:focus { top: var(--ez-space-3); }

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* 3. App shell -------------------------------------------------------------- */
.ez-app {
    min-height: 100vh;
    display: block;
}

/* --- Sidebar --- */
#sidenav-main.ez-sidebar {
    position: fixed;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    inset: 0 auto 0 0;
    z-index: 1045;
    width: var(--ez-sidebar-w);
    max-width: 86vw;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ez-ease), width 0.2s var(--ez-ease), box-shadow 0.2s var(--ez-ease);
    overflow: hidden;
}

.ez-sidebar-open #sidenav-main.ez-sidebar {
    transform: translateX(0);
    box-shadow: var(--ez-shadow-lg);
}

.ez-sidebar__brand {
    flex: 0 0 auto;
    height: var(--ez-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ez-space-2);
    padding: 0 var(--ez-space-4);
    border-bottom: 1px solid var(--ez-border);
}

.ez-sidebar__brand a.navbar-brand-img,
.ez-sidebar__brand a.navbar-brand {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 4px 6px;
    border-radius: var(--ez-radius);
    background: #fff; /* logo artwork has a white background */
    min-width: 0;
}
.ez-sidebar__brand img.navbar-brand-img { height: 38px !important; width: auto; max-width: 170px; display: block; }
.ez-sidebar__brand .navbar-brand-img img {
    display: block;
    height: 38px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

.ez-sidebar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--ez-radius);
    background: transparent;
    color: var(--ez-text-muted);
    cursor: pointer;
}
.ez-sidebar__close:hover { background: var(--ez-sidebar-hover); color: var(--ez-text); }

.ez-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ez-space-3) var(--ez-space-3) var(--ez-space-6);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
}
.ez-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.ez-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.ez-sidebar__scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
/* scrollbar only while the pointer or keyboard focus is on the menu (space kept, so nothing shifts) */
.ez-sidebar__scroll:hover, .ez-sidebar__scroll:focus-within { scrollbar-color: var(--ez-border-strong) transparent; }
.ez-sidebar__scroll:hover::-webkit-scrollbar-thumb,
.ez-sidebar__scroll:focus-within::-webkit-scrollbar-thumb { background: var(--ez-border-strong); }

/* the collapse wrapper must always be visible inside the sidebar */
#sidenav-collapse-main.ez-sidebar__collapse {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    visibility: visible;
}

.ez-sidebar .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ez-sidebar .nav-item { position: relative; width: 100%; }
.ez-sidebar .nav-item:empty { display: none; }

.ez-sidebar .nav-link,
.ez-sidebar .nav-link.text-dark {
    display: flex !important;
    align-items: center;
    gap: var(--ez-space-3);
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: var(--ez-radius) !important;
    color: var(--ez-sidebar-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: var(--ez-fs-base);
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: background-color var(--ez-dur) var(--ez-ease), color var(--ez-dur) var(--ez-ease);
}

.ez-sidebar .nav-link > div,
.ez-sidebar .nav-link > div.text-dark {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    color: var(--ez-sidebar-icon) !important;
}
.ez-sidebar .nav-link .material-icons {
    font-size: 20px;
    line-height: 1;
    opacity: 1 !important;
}

.ez-sidebar .nav-link .nav-link-text {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s var(--ez-ease);
}

.ez-sidebar .nav-link:hover {
    background: var(--ez-sidebar-hover) !important;
    color: var(--ez-text) !important;
}
.ez-sidebar .nav-link:hover > div { color: var(--ez-text) !important; }

#sidenav-main .nav-link.active,
#sidenav-main .nav-link.bg-gradient-primary,
.ez-sidebar .nav-link.active,
.ez-sidebar .nav-link.bg-gradient-primary {
    font-weight: 600;
}
.ez-sidebar .nav-link.active > div,
.ez-sidebar .nav-link.bg-gradient-primary > div,
#sidenav-main .nav-link.active > div { color: var(--ez-primary) !important; }
.ez-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ez-primary);
}

/* group toggles (Bootstrap dropdowns rendered inline in the sidebar) */
.ez-sidebar .nav-link[data-bs-toggle="dropdown"]::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: 0 2px 0 auto;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.55;
    transition: transform var(--ez-dur) var(--ez-ease);
}
.ez-sidebar .nav-link[data-bs-toggle="dropdown"].show::after,
.ez-sidebar .nav-link[data-bs-toggle="dropdown"][aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.ez-sidebar .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 2px 0 4px !important;
    padding: 2px 0 2px 22px !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}
.ez-sidebar .dropdown-menu::before {
    /* material-dashboard draws an arrow here */
    display: none !important;
}
.ez-sidebar .dropdown-menu.show {
    display: block;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible;
}
/* beat material-dashboard's ".dropdown:not(.dropdown-hover) .dropdown-menu.show { margin-top: 2.8rem !important }" */
#sidenav-main .dropdown .dropdown-menu,
#sidenav-main .dropdown .dropdown-menu.show { margin: 2px 0 4px !important; }
.ez-sidebar .dropdown-menu > li {
    position: relative;
    border-left: 1px solid var(--ez-border);
    padding-left: 10px;
}
.ez-sidebar .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ez-space-2);
    min-height: 36px;
    padding: 7px 10px !important;
    border-radius: var(--ez-radius-sm) !important;
    color: var(--ez-sidebar-text) !important;
    background: transparent !important;
    font-size: var(--ez-fs-sm);
    font-weight: 500;
    white-space: normal;
}
.ez-sidebar .dropdown-item i { width: 16px; text-align: center; color: var(--ez-sidebar-icon); }
.ez-sidebar .dropdown-item:hover,
.ez-sidebar .dropdown-item:focus {
    background: var(--ez-sidebar-hover) !important;
    color: var(--ez-text) !important;
}
.ez-sidebar .dropdown-item.active,
.ez-sidebar .dropdown-item.bg-gradient-primary {
    font-weight: 600 !important;
}
.ez-sidebar .dropdown-item.active i,
.ez-sidebar .dropdown-item.bg-gradient-primary i { color: var(--ez-primary); }



/* Backdrop for off-canvas sidebar */
.ez-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ez-ease), visibility 0.2s;
}
.ez-sidebar-open .ez-backdrop { opacity: 1; visibility: visible; }
.ez-sidebar-open { overflow: hidden; }

/* --- Main column --- */
/* material-dashboard puts PerfectScrollbar on .main-content on Windows; keep normal page scrolling */
main.ez-main.ps { overflow: visible !important; }

main.ez-main {
    position: relative;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 !important;
    max-height: none !important;
    height: auto !important;
    border-radius: 0 !important;
    transition: margin-left 0.2s var(--ez-ease);
}

/* --- Topbar --- */
#navbarBlur.ez-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: var(--ez-topbar-h);
    margin: 0 !important;
    padding: 0 !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border: 0;
    border-image: none !important;
}
/* material-dashboard toggles these on scroll; keep them visual-only */
#navbarBlur.ez-topbar.blur,
#navbarBlur.ez-topbar.shadow-blur {
    background: var(--ez-topbar-bg) !important;
    box-shadow: var(--ez-shadow-sm) !important;
}

#navbarBlur .ez-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ez-space-2);
    width: 100%;
    min-height: var(--ez-topbar-h);
    padding: 0 1rem !important;
}
@media (min-width: 576px) { #navbarBlur .ez-topbar__inner { padding: 0 1.25rem !important; } }

.ez-topbar__lead {
    display: flex;
    align-items: center;
    gap: var(--ez-space-2);
    min-width: 0;
    flex: 1 1 auto;
}

.ez-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ez-radius);
    background: transparent;
    color: var(--ez-text);
    cursor: pointer;
    transition: background-color var(--ez-dur) var(--ez-ease), color var(--ez-dur) var(--ez-ease);
}
.ez-icon-btn:hover { background: var(--ez-surface-3); color: var(--ez-heading); }
.ez-icon-btn .material-icons { font-size: 22px; }

/* "Install app" (web/js/pwa.js): icon on phones, icon + text from 992px */
.ez-install-btn { color: var(--ez-info, #2563eb); }
.ez-install-btn[hidden] { display: none !important; }
.ez-install-btn__text { display: none; }
@media (min-width: 992px) {
    .ez-install-btn { width: auto; height: 40px; gap: 6px; padding: 0 14px; border-color: #bfdbfe; font-size: var(--ez-fs-sm, 13px); font-weight: 600; }
    .ez-install-btn .material-icons { font-size: 20px; }
    .ez-install-btn__text { display: inline; }
}

.ez-topbar__title {
    min-width: 0;
    margin: 0 !important;
}
.ez-topbar__title h4,
.ez-topbar__title h6 {
    margin: 0 !important;
    font-size: var(--ez-fs-md) !important;
    font-weight: 600 !important;
    color: var(--ez-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ez-topbar__logo { flex: 0 0 auto; margin: 0 !important; }
.ez-topbar__logo a { display: inline-flex; align-items: center; margin: 0 !important; padding: 3px 6px; border-radius: var(--ez-radius); background: #fff; }
.ez-topbar__logo img { display: block; height: 34px; width: auto; max-width: 140px; object-fit: contain; }

.ez-topbar__more { display: inline-flex; }

/* the existing #navbar collapse becomes the action area */
#navbar.ez-topbar__actions {
    flex-basis: 100%;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
}
#navbar .ez-topbar__actions-inner,
#navbar .navbar-nav { min-width: 0; max-width: 100%; }
.ez-topbar__actions-inner {
    display: flex;
    flex-direction: column;
    gap: var(--ez-space-3);
    padding: var(--ez-space-3) 0 var(--ez-space-4);
}
#navbar.ez-topbar__actions .ms-md-auto {
    margin: 0 !important;
    padding: 0 !important;
}
#navbar.ez-topbar__actions .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ez-space-2);
    margin: 0;
}
#navbar.ez-topbar__actions .nav-item {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
}
#navbar.ez-topbar__actions .nav-item > .btn,
#navbar.ez-topbar__actions .ms-md-auto > .btn {
    margin: 0 !important;
    white-space: nowrap;
}

/* Orders-left counter chip */
.ez-quota {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.ez-quota .material-icons { font-size: 18px; }
.ez-caret { font-size: 18px; color: var(--ez-text-muted); }

/* topbar dropdowns: anchor under their trigger (material-dashboard pins them to left:0 + 45px) */
#navbar .dropdown .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 8px !important;
    transform: none !important;
}
#navbar .dropdown .dropdown-menu.dropdown-menu-end { right: 0 !important; }
#navbar .dropdown .dropdown-menu.show { margin-top: 8px !important; }

/* Topbar global search (kartik Select2) */
#navbar .select2-container--krajee-bs5,
.navbar .select2-container--krajee-bs5 {
    display: inline-block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}
#navbar .nav-item { min-width: 0; }
#navbar .select2-container--krajee-bs5 .select2-selection {
    min-height: 40px;
    border-radius: var(--ez-radius) !important;
    border-color: var(--ez-border) !important;
    background: var(--ez-surface-2) !important;
}

/* Verification / admin / bell / user icons */
#navbar .nav-item .fa-2x { font-size: 1.35rem; }
#navbar .nav-item a.text-success,
#navbar .nav-item a.text-warning,
#navbar .nav-item a.text-danger,
#navbar .nav-item a.nav-link.text-body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--ez-radius);
}
#navbar .nav-item a.nav-link.text-body:hover { background: var(--ez-surface-3); }

.notificationTop {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--ez-radius) !important;
    color: var(--ez-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.notificationTop:hover { background: var(--ez-surface-3) !important; }
.notificationTop .badge {
    top: 2px !important;
    right: 0 !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px !important;
    border-radius: var(--ez-radius-pill) !important;
    background: var(--ez-primary) !important;
    color: #fff !important;
    font-size: 0.6875rem;
    line-height: 18px;
    box-shadow: 0 0 0 2px var(--ez-surface) !important;
}

/* User menu */
.ez-user-menu .ez-user-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ez-space-2);
    min-height: 44px;
    margin: 0;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-pill);
    color: var(--ez-text);
    font-weight: 500;
    font-size: var(--ez-fs-sm);
    cursor: pointer;
    transition: border-color var(--ez-dur) var(--ez-ease), box-shadow var(--ez-dur) var(--ez-ease);
}
.ez-user-menu .ez-user-btn:hover { box-shadow: var(--ez-shadow-xs); }
.ez-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--ez-fs-sm);
    text-transform: uppercase;
}
.ez-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ez-user-menu .dropdown-menu { min-width: 220px; }
.ez-user-menu .dropdown-header {
    padding: var(--ez-space-2) var(--ez-space-3) var(--ez-space-3);
    font-size: var(--ez-fs-sm);
    color: var(--ez-text-muted);
    white-space: normal;
}
.ez-user-menu .dropdown-header strong { display: block; color: var(--ez-heading); font-size: var(--ez-fs-base); }
.ez-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ez-space-2);
    min-height: 40px;
}
.ez-user-menu .dropdown-item i,
.ez-user-menu .dropdown-item .material-icons { width: 18px; font-size: 18px; text-align: center; }
.profile-icon { margin-right: 0 !important; }

/* --- Content --- */
.ez-content {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    padding: var(--ez-space-4) var(--ez-gutter) var(--ez-space-6);
}

.ez-breadcrumbs { margin-bottom: var(--ez-space-3); }

/* --- Footer --- */
.ez-main .footer {
    height: auto;
    margin-top: auto;
    padding: var(--ez-space-4) var(--ez-gutter) !important;
    border-top: 1px solid var(--ez-border);
    background: transparent;
    font-size: var(--ez-fs-sm);
    color: var(--ez-text-muted);
}
.ez-main .footer .container-fluid { padding: 0; }
.ez-main .footer .row { --bs-gutter-y: 0.5rem; }
.ez-main .footer .copyright { color: var(--ez-text-muted) !important; }
.ez-main .footer .copyright .fa-heart { color: var(--ez-primary); }
.ez-main .footer a { color: var(--ez-text) !important; font-weight: 600; }
.ez-main .footer .nav-footer .nav-link {
    padding: 4px 10px;
    color: var(--ez-text-muted) !important;
    font-weight: 500;
}
.ez-main .footer .nav-footer .nav-link:hover { color: var(--ez-primary) !important; }

/* 4. Cards & page headers ---------------------------------------------------- */
.ez-body .card {
    --bs-card-bg: var(--ez-surface);
    --bs-card-border-color: var(--ez-border);
    --bs-card-border-radius: var(--ez-radius-lg);
    --bs-card-inner-border-radius: calc(var(--ez-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    position: relative;
    background: var(--ez-surface);
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-lg);
    color: var(--ez-text);
    min-width: 0;
}
.ez-body .card + .card { margin-top: var(--ez-space-4); }
.ez-body .card .card-header {
    background: transparent;
    border-bottom: 0;
    padding: 1rem 1.25rem 0;
}
.ez-body .card .card-header.p-0:empty { display: none; }
.ez-body .card .card-header h5,
.ez-body .card .card-header h6 {
    margin-bottom: var(--ez-space-2);
    color: var(--ez-heading);
}
.ez-body .card .card-header h6 { font-size: var(--ez-fs-md); }
.ez-body .card .card-header p:last-child { margin-bottom: 0; }
.ez-body .card .card-body { padding: 1.25rem; }
.ez-body .card .card-footer {
    background: transparent;
    border-top: 1px solid var(--ez-border);
    padding: 0.875rem 1.25rem;
}

/* Material "floating" gradient headers become flat, aligned card headers */
.ez-body .card .card-header.mt-n4 {
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
}
.ez-body .card .card-header.mt-n4 > .bg-gradient-primary,
.ez-body .card .card-header.mt-n4 > .bg-gradient-dark,
.ez-body .card .card-header.mt-n4 > .bg-gradient-info,
.ez-body .card .card-header.mt-n4 > .bg-gradient-success {
    margin: 0 !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: var(--ez-radius-lg) var(--ez-radius-lg) 0 0 !important;
    box-shadow: none !important;
}
.ez-body .shadow-primary,
.ez-body .shadow-dark,
.ez-body .shadow-info,
.ez-body .shadow-success { box-shadow: none !important; }

/* Gii-style page wrappers ("store-index", "orders-view", …): add rhythm */
.ez-content > [class$="-index"],
.ez-content > [class$="-view"],
.ez-content > [class$="-create"],
.ez-content > [class$="-update"],
.ez-content > [class$="-form"] {
    min-width: 0;
}
.ez-content > [class$="-view"] > h1:first-child,
.ez-content > [class$="-create"] > h1:first-child,
.ez-content > [class$="-update"] > h1:first-child,
.ez-content > [class$="-index"] > h1:first-child {
    font-size: var(--ez-fs-xl);
    margin: 0 0 var(--ez-space-4);
}

/* Optional page header helper for views */
.ez-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ez-space-3);
    margin-bottom: var(--ez-space-4);
}
.ez-page-header h1 { margin: 0; }
.ez-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--ez-space-2); }

/* Dashboard stat cards (material "card-header p-3 pt-2" + floating icon square) */
.ez-body .card .icon-shape {
    border-radius: var(--ez-radius) !important;
    box-shadow: none !important;
}
.ez-body .card .card-header:has(> .icon-shape.position-absolute) {
    display: flex;
    align-items: center;
}
.ez-body .card .card-header > .icon-shape.position-absolute.mt-n4 {
    position: static !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    color: #fff;
}
.ez-body .card .card-header > .icon-shape .material-icons,
.ez-body .card .card-header > .icon-shape i { position: static; top: auto; font-size: 24px; line-height: 1; opacity: 1; }
.ez-body .card .card-header > .text-end p { color: var(--ez-text-muted); font-weight: 500; }
.ez-body .card .card-header > .text-end h4 { font-size: var(--ez-fs-2xl) !important; font-weight: 700; color: var(--ez-heading); letter-spacing: -0.02em; }
.ez-body .card hr.horizontal { margin: 0 !important; background: var(--ez-border); opacity: 1; height: 1px; border: 0; }
.ez-body .card .card-footer p { font-size: var(--ez-fs-sm); color: var(--ez-text-muted); }

/* whole cards wrapped in a link (dashboard tiles) */
.ez-body a > .card { color: var(--ez-text); height: 100%; transition: border-color var(--ez-dur) var(--ez-ease), box-shadow var(--ez-dur) var(--ez-ease), transform var(--ez-dur) var(--ez-ease); }
.ez-body a:hover > .card { border-color: var(--ez-border-strong); box-shadow: var(--ez-shadow-md); transform: translateY(-1px); }
.ez-body a:focus-visible > .card { box-shadow: var(--ez-focus-ring); }

/* 5. Buttons ---------------------------------------------------------------- */
.ez-body .btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: var(--ez-fs-base);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.4;
    --bs-btn-border-radius: var(--ez-radius);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: var(--ez-focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    font-family: var(--ez-font);
    text-transform: none;
    letter-spacing: 0;
    background-image: none;
    box-shadow: none;
    transition: background-color var(--ez-dur) var(--ez-ease), border-color var(--ez-dur) var(--ez-ease),
        color var(--ez-dur) var(--ez-ease), box-shadow var(--ez-dur) var(--ez-ease);
}
.ez-body .btn:not([class*="btn-outline-"]) { border: 1px solid transparent; }
.ez-body .btn:hover { box-shadow: none; transform: none; }
.ez-body .btn:focus-visible { box-shadow: var(--ez-focus-ring) !important; outline: none; }
.ez-body .btn.w-100 { display: flex; }
.ez-body .btn.d-block { display: flex !important; }
.ez-body .btn > i + span, .ez-body .btn > span + i { margin: 0; }

.ez-body .btn-sm,
.ez-body .btn-group-sm > .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: var(--ez-fs-sm);
    --bs-btn-border-radius: var(--ez-radius-sm);
    min-height: 32px;
}
.ez-body .btn-lg {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-font-size: var(--ez-fs-md);
    min-height: 46px;
}
.ez-body .btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: var(--ez-fs-xs);
    min-height: 26px;
}

/* Solid variants */
.ez-body .btn-primary,
.ez-body .btn.bg-gradient-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ez-primary);
    --bs-btn-border-color: var(--ez-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ez-primary-hover);
    --bs-btn-hover-border-color: var(--ez-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ez-primary-active);
    --bs-btn-active-border-color: var(--ez-primary-active);
    --bs-btn-disabled-bg: var(--ez-primary);
    --bs-btn-disabled-border-color: var(--ez-primary);
    background: var(--ez-primary) !important;
    color: #fff !important;
}
.ez-body .btn-primary:hover,
.ez-body .btn.bg-gradient-primary:hover { background: var(--ez-primary-hover) !important; }

.ez-body .btn-dark,
.ez-body .btn.bg-gradient-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ez-ink);
    --bs-btn-border-color: var(--ez-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    background: var(--ez-ink) !important;
    color: #fff !important;
}
.ez-body .btn-dark:hover,
.ez-body .btn.bg-gradient-dark:hover { background: #000 !important; }

.ez-body .btn-info,
.ez-body .btn.bg-gradient-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ez-info);
    --bs-btn-border-color: var(--ez-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ez-info-hover);
    --bs-btn-hover-border-color: var(--ez-info-hover);
    background: var(--ez-info) !important;
    color: #fff !important;
}
.ez-body .btn-info:hover,
.ez-body .btn.bg-gradient-info:hover { background: var(--ez-info-hover) !important; }

.ez-body .btn-success,
.ez-body .btn.bg-gradient-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ez-success);
    --bs-btn-border-color: var(--ez-success);
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #15803d;
    --bs-btn-hover-color: #fff;
    background: var(--ez-success) !important;
    color: #fff !important;
}
.ez-body .btn-success:hover,
.ez-body .btn.bg-gradient-success:hover { background: #15803d !important; }

.ez-body .btn-warning,
.ez-body .btn.bg-gradient-warning {
    --bs-btn-color: #1f2937;
    --bs-btn-bg: #f59e0b;
    --bs-btn-border-color: #f59e0b;
    --bs-btn-hover-bg: #d97706;
    --bs-btn-hover-border-color: #d97706;
    --bs-btn-hover-color: #111827;
    background: #f59e0b !important;
    color: #1f2937 !important;
}
.ez-body .btn-warning:hover,
.ez-body .btn.bg-gradient-warning:hover { background: #d97706 !important; }

/* Danger is a soft button so it never reads as the (red) primary action */
.ez-body .btn-danger,
.ez-body .btn.bg-gradient-danger {
    --bs-btn-color: var(--ez-danger-ink);
    --bs-btn-bg: var(--ez-danger-soft);
    --bs-btn-border-color: #fecaca;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ez-danger);
    --bs-btn-hover-border-color: var(--ez-danger);
    background: var(--ez-danger-soft) !important;
    color: var(--ez-danger-ink) !important;
    border-color: #fecaca !important;
}
.ez-body .btn-danger:hover,
.ez-body .btn.bg-gradient-danger:hover {
    background: var(--ez-danger) !important;
    border-color: var(--ez-danger) !important;
    color: #fff !important;
}

.ez-body .btn-secondary,
.ez-body .btn.bg-gradient-secondary,
.ez-body .btn-light,
.ez-body .btn-default {
    --bs-btn-color: var(--ez-text);
    --bs-btn-bg: var(--ez-surface);
    --bs-btn-border-color: var(--ez-border-strong);
    --bs-btn-hover-color: var(--ez-heading);
    --bs-btn-hover-bg: var(--ez-surface-3);
    --bs-btn-hover-border-color: var(--ez-border-strong);
    background: var(--ez-surface) !important;
    color: var(--ez-text) !important;
    border: 1px solid var(--ez-border-strong) !important;
}
.ez-body .btn-secondary:hover,
.ez-body .btn.bg-gradient-secondary:hover,
.ez-body .btn-light:hover,
.ez-body .btn-default:hover { background: var(--ez-surface-3) !important; }

/* Outline variants */
.ez-body [class*="btn-outline-"] {
    background: transparent;
    border-width: 1px;
    border-style: solid;
}
.ez-body .btn-outline-primary {
    --bs-btn-color: var(--ez-primary);
    --bs-btn-border-color: rgba(var(--ez-primary-rgb), 0.45);
    --bs-btn-hover-color: var(--ez-primary-hover);
    --bs-btn-hover-bg: var(--ez-primary-soft);
    --bs-btn-hover-border-color: var(--ez-primary);
    --bs-btn-active-bg: var(--ez-primary-soft-2);
    --bs-btn-active-color: var(--ez-primary-active);
    color: var(--ez-primary-hover) !important;
    border-color: rgba(var(--ez-primary-rgb), 0.45) !important;
}
.ez-body .btn-outline-primary:hover { background: var(--ez-primary-soft) !important; }
.ez-body .btn-outline-dark,
.ez-body .btn-outline-secondary {
    --bs-btn-color: var(--ez-text);
    --bs-btn-border-color: var(--ez-border-strong);
    --bs-btn-hover-color: var(--ez-heading);
    --bs-btn-hover-bg: var(--ez-surface-3);
    --bs-btn-hover-border-color: var(--ez-border-strong);
    color: var(--ez-text) !important;
    border-color: var(--ez-border-strong) !important;
}
.ez-body .btn-outline-dark:hover,
.ez-body .btn-outline-secondary:hover { background: var(--ez-surface-3) !important; }
.ez-body .btn-outline-success { color: var(--ez-success) !important; border-color: var(--ez-success) !important; }
.ez-body .btn-outline-danger { color: var(--ez-danger) !important; border-color: var(--ez-danger) !important; }
.ez-body .btn-outline-info { color: var(--ez-info) !important; border-color: var(--ez-info) !important; }
.ez-body .btn-outline-warning { color: var(--ez-warning) !important; border-color: var(--ez-warning) !important; }
.ez-body .btn-outline-success:hover { background: var(--ez-success-soft) !important; }
.ez-body .btn-outline-danger:hover { background: var(--ez-danger-soft) !important; }
.ez-body .btn-outline-info:hover { background: var(--ez-info-soft) !important; }
.ez-body .btn-outline-warning:hover { background: var(--ez-warning-soft) !important; }

.ez-body .btn-link {
    color: var(--ez-link) !important;
    background: transparent !important;
    min-height: 0;
}

.ez-body .btn:disabled,
.ez-body .btn.disabled { opacity: 0.55; }

.ez-body .btn-group > .btn { min-height: 36px; }

/* "Add row" button used by unclead/multiple-input */
.ez-body .js-input-plus {
    --bs-btn-bg: var(--ez-info) !important;
    --bs-btn-border-color: var(--ez-info) !important;
    --bs-btn-hover-bg: var(--ez-info-hover) !important;
    box-shadow: none !important;
}

/* 6. Forms ------------------------------------------------------------------ */
.ez-body label,
.ez-body .form-label,
.ez-body .control-label,
.ez-body .col-form-label {
    display: inline-block;
    margin-bottom: 6px;
    margin-left: 0;
    color: var(--ez-text);
    font-size: var(--ez-fs-sm);
    font-weight: 500;
}

.ez-body .form-group,
.ez-body .mb-3.field,
.ez-body div[class*="field-"] {
    margin-bottom: var(--ez-space-4);
}

.ez-body .form-control,
.ez-body .form-select,
.ez-body select.form-control,
.ez-body textarea.form-control {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--ez-font);
    font-size: var(--ez-fs-base);
    line-height: 1.45 !important;
    color: var(--ez-text);
    background-color: var(--ez-surface) !important;
    background-image: none;
    border: 1px solid var(--ez-border-strong) !important;
    border-radius: var(--ez-radius) !important;
    box-shadow: var(--ez-shadow-xs);
    transition: border-color var(--ez-dur) var(--ez-ease), box-shadow var(--ez-dur) var(--ez-ease);
}
.ez-body .form-select,
.ez-body select.form-control {
    padding-right: 2.25rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px 10px !important;
    -webkit-appearance: none;
    appearance: none;
}
.ez-body select[multiple].form-control,
.ez-body select[size].form-control { background-image: none !important; padding-right: 0.75rem !important; }
.ez-body textarea.form-control { min-height: 88px; resize: vertical; }
.ez-body input[type="file"].form-control { padding: 0.4rem 0.6rem !important; }

.ez-body .form-control::placeholder { color: var(--ez-text-subtle); opacity: 1; }

.ez-body .form-control:hover,
.ez-body .form-select:hover { border-color: #9ca3af !important; }

.ez-body .form-control:focus,
.ez-body .form-select:focus {
    border-color: var(--ez-primary) !important;
    box-shadow: var(--ez-focus-ring) !important;
    outline: none;
}

.ez-body .form-control:disabled,
.ez-body .form-control[readonly],
.ez-body .form-select:disabled {
    background-color: var(--ez-surface-3) !important;
    color: var(--ez-text-muted);
    cursor: not-allowed;
}
.ez-body .form-control[readonly] { cursor: default; }

/* validation (Yii adds .has-error / .is-invalid / .has-success) */
.ez-body .has-error .form-control,
.ez-body .form-control.is-invalid {
    border-color: var(--ez-danger) !important;
    background-image: none !important;
}
.ez-body .has-error .form-control:focus,
.ez-body .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.2) !important; }
.ez-body .has-success .form-control,
.ez-body .form-control.is-valid { border-color: var(--ez-border-strong) !important; background-image: none !important; }

.ez-body .help-block,
.ez-body .invalid-feedback {
    display: block;
    margin-top: 4px;
    font-size: var(--ez-fs-xs) !important;
    color: var(--ez-danger) !important;
}
.ez-body .help-block:empty,
.ez-body .invalid-feedback:empty { display: none; }
.ez-body .hint-block,
.ez-body .form-text {
    margin-top: 4px;
    color: var(--ez-text-muted);
}

.ez-body .error-summary {
    padding: var(--ez-space-3) var(--ez-space-4);
    margin-bottom: var(--ez-space-4);
    color: var(--ez-danger-ink);
    background: var(--ez-danger-soft);
    border: 1px solid #fecaca;
    border-left: 4px solid var(--ez-danger);
    border-radius: var(--ez-radius);
}
.ez-body .error-summary ul { margin: 6px 0 0; padding-left: 1.1rem; }

/* checkboxes / radios / switches */
.ez-body .form-check { min-height: 24px; padding-left: 1.75em; margin-bottom: 6px; }
.ez-body .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.18em;
    margin-left: -1.75em;
    border: 1px solid var(--ez-border-strong);
    background-color: var(--ez-surface);
    cursor: pointer;
}
.ez-body .form-check-input:checked {
    background-color: var(--ez-primary) !important;
    border-color: var(--ez-primary) !important;
}
.ez-body .form-check-input:focus { box-shadow: var(--ez-focus-ring); border-color: var(--ez-primary); }
.ez-body .form-check-label { margin: 0; font-weight: 400; cursor: pointer; }
.ez-body .form-switch .form-check-input { width: 2.2em; border-radius: 2em; }
.ez-body .form-switch .form-check-input:after { display: none; }
.ez-body input[type="checkbox"]:not(.form-check-input),
.ez-body input[type="radio"]:not(.form-check-input) {
    accent-color: var(--ez-primary);
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

/* input groups */
.ez-body .input-group { flex-wrap: nowrap; }
.ez-body .input-group > .form-control { min-width: 0; }
.ez-body .input-group-text {
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    font-size: var(--ez-fs-base);
    color: var(--ez-text-muted);
    background: var(--ez-surface-3);
    border: 1px solid var(--ez-border-strong);
    border-radius: var(--ez-radius);
}
.ez-body .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.ez-body .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.ez-body .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px;
}
.ez-body .input-group .btn { min-height: 40px; margin-bottom: 0; }

/* phone prefix control (".input-tag" table in several forms) */
.ez-body .input-tag { width: 100%; border-collapse: separate; }
.ez-body .input-tag span {
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    font-size: var(--ez-fs-base);
    color: var(--ez-text-muted);
    background: var(--ez-surface-3);
    border-color: var(--ez-border-strong);
    border-radius: var(--ez-radius) 0 0 var(--ez-radius);
}
.ez-body .input-tag td { width: 1%; }
.ez-body .input-tag td + td { width: auto; }
.ez-body .input-tag .form-group,
.ez-body .input-tag div[class*="field-"] { margin-bottom: 0; }
.ez-body .input-tag .form-control { border-radius: 0 var(--ez-radius) var(--ez-radius) 0 !important; }

/* Select2 (kartik krajee-bs5 theme) */
.ez-body .select2-container--krajee-bs5 .select2-selection {
    min-height: 40px;
    border: 1px solid var(--ez-border-strong) !important;
    border-radius: var(--ez-radius) !important;
    background-color: var(--ez-surface) !important;
    box-shadow: var(--ez-shadow-xs);
    font-size: var(--ez-fs-base);
    color: var(--ez-text);
}
.ez-body .select2-container--krajee-bs5 .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0.4rem 2.25rem 0.4rem 0.75rem;
}
.ez-body .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ez-text);
    line-height: 1.45;
    padding: 0;
}
.ez-body .select2-container--krajee-bs5.select2-container--focus .select2-selection,
.ez-body .select2-container--krajee-bs5.select2-container--open .select2-selection {
    border-color: var(--ez-primary) !important;
    box-shadow: var(--ez-focus-ring) !important;
}
.ez-body .select2-container--krajee-bs5 .select2-dropdown {
    border-color: var(--ez-border) !important;
    border-radius: var(--ez-radius) !important;
    box-shadow: var(--ez-shadow-md);
    background: var(--ez-surface);
    overflow: hidden;
}
.ez-body .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected],
.ez-body .select2-container--krajee-bs5 .select2-results__option--highlighted {
    background: var(--ez-primary) !important;
    color: #fff !important;
}
.ez-body .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
    border-radius: var(--ez-radius-sm);
    border-color: var(--ez-border-strong);
}
.ez-body .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
    border-radius: var(--ez-radius-pill);
    background: var(--ez-surface-3);
    border-color: var(--ez-border);
    color: var(--ez-text);
}
.ez-body .select2-container--krajee-bs5 .select2-selection__placeholder { color: var(--ez-text-subtle) !important; }

/* kartik date/datetime pickers */
.ez-body .datepicker.dropdown-menu,
.ez-body .datetimepicker.dropdown-menu {
    border-radius: var(--ez-radius);
    border: 1px solid var(--ez-border);
    box-shadow: var(--ez-shadow-md);
    font-family: var(--ez-font);
}
.ez-body .datepicker table tr td.active,
.ez-body .datepicker table tr td.active:hover,
.ez-body .datepicker table tr td.active.active,
.ez-body .datetimepicker table tr td.active,
.ez-body .datetimepicker table tr td span.active {
    background: var(--ez-primary) !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none;
}
.ez-body .krajee-datepicker,
.ez-body .kv-date-picker { min-width: 0; }

/* kartik file input */
.ez-body .file-input .file-preview { border-radius: var(--ez-radius); border-color: var(--ez-border); }
.ez-body .file-drop-zone { border-radius: var(--ez-radius); border-color: var(--ez-border-strong); }

/* Form action rows */
.ez-body .form-group:last-child > .btn,
.ez-body form .form-group > .btn-success,
.ez-body form .form-group > .btn-primary { margin-bottom: 0; }

/* 7. Tables ----------------------------------------------------------------- */
.ez-body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ez-text);
    --bs-table-striped-bg: var(--ez-surface-2);
    --bs-table-striped-color: var(--ez-text);
    --bs-table-hover-bg: var(--ez-surface-3);
    --bs-table-hover-color: var(--ez-text);
    --bs-table-border-color: var(--ez-border);
    width: 100%;
    margin-bottom: 0;
    color: var(--ez-text);
    font-size: var(--ez-fs-sm);
    vertical-align: middle;
    border-color: var(--ez-border);
}
.ez-body .table > :not(caption) > * > * {
    padding: 0.7rem 0.85rem;
    border-bottom-color: var(--ez-border);
    background-color: var(--bs-table-bg);
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg, transparent);
}
.ez-body .table thead th,
.ez-body .table > thead > tr > th {
    position: relative;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--ez-border) !important;
    opacity: 1 !important;
    vertical-align: middle;
}
.ez-body .table thead th a {
    color: var(--ez-text-muted);
    text-decoration: none;
}
.ez-body .table thead th a:hover { color: var(--ez-heading); }
.ez-body .table thead th a.asc,
.ez-body .table thead th a.desc { color: var(--ez-heading); }
.ez-body a.asc:after { border-bottom-color: currentColor; }
.ez-body a.desc:after { border-top-color: currentColor; }

.ez-body .table > :not(:first-child) { border-top: 0; }
.ez-body .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
.ez-body .table-bordered > :not(caption) > * { border-width: 0; }
.ez-body .table tbody tr:last-child > * { border-bottom: 0; }
.ez-body .table tbody tr { transition: background-color var(--ez-dur) var(--ez-ease); }
.ez-body .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--ez-surface-2); }
.ez-body .grid-view .table > tbody > tr:hover > *,
.ez-body .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--ez-surface-3); }
.ez-body .table td p { margin-bottom: 0; }

/* GridView container: card-like, scrolls sideways on small screens */
.ez-body .grid-view {
    position: relative;
    max-width: 100%;
    min-width: 0;
}
.ez-body .grid-view > .table,
.ez-body .grid-view > table,
.ez-body .table-responsive > .table {
    border: 1px solid var(--ez-border);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.ez-body .grid-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ez-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ez-body .table-responsive > .grid-view { overflow-x: visible; }
.ez-body .table-responsive > .grid-view > .table { overflow: visible; }

/* grid filters row */
.ez-body .grid-view .filters td,
.ez-body .grid-view tr.filters > td {
    padding: 0.5rem 0.6rem !important;
    background: var(--ez-surface) !important;
    border-bottom: 1px solid var(--ez-border) !important;
}
.ez-body .grid-view .filters .form-control,
.ez-body .grid-view .filters select {
    min-height: 34px;
    min-width: 90px;
    padding: 0.3rem 0.55rem !important;
    font-size: var(--ez-fs-sm);
    box-shadow: none;
}
.ez-body .grid-view .filters select.form-control { padding-right: 1.9rem !important; background-position: right 0.55rem center !important; }

/* ActionColumn icons (Yii renders inline SVG / glyphicons) */
.ez-body .grid-view td a[title],
.ez-body .grid-view td a[aria-label] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    border-radius: var(--ez-radius-sm);
    color: var(--ez-text-muted);
    vertical-align: middle;
    transition: background-color var(--ez-dur) var(--ez-ease), color var(--ez-dur) var(--ez-ease);
}
.ez-body .grid-view td a[title]:hover,
.ez-body .grid-view td a[aria-label]:hover {
    background: var(--ez-primary-soft);
    color: var(--ez-primary-hover);
}
.ez-body .grid-view td a[title] > svg,
.ez-body .grid-view td a[aria-label] > svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}
.ez-body .grid-view td a[title].btn,
.ez-body .grid-view td a[aria-label].btn { color: inherit; }
.ez-body .grid-view td .btn { margin-bottom: 0; }
.ez-body .grid-view .empty { padding: var(--ez-space-6); color: var(--ez-text-muted); text-align: center; }
.ez-body .grid-view td .not-set,
.ez-body .detail-view .not-set { color: var(--ez-text-subtle); font-style: normal; }

/* DetailView */
.ez-body .detail-view {
    border: 1px solid var(--ez-border) !important;
    border-radius: var(--ez-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--ez-surface);
}
.ez-body .detail-view th {
    width: 32%;
    max-width: 320px;
    color: var(--ez-text-muted);
    font-weight: 500;
    font-size: var(--ez-fs-sm);
    background: var(--ez-surface-2) !important;
    white-space: normal;
}
.ez-body .detail-view td { color: var(--ez-heading); word-break: break-word; }
.ez-body .detail-view tr:last-child > * { border-bottom: 0 !important; }

/* ListView */
.ez-body .list-view > .summary { margin-bottom: var(--ez-space-3); }

/* unclead/multiple-input tables */
.ez-body table.multiple-input-list tr > th {
    background: var(--ez-surface-2) !important;
    border: 1px solid var(--ez-border) !important;
    color: var(--ez-text-muted);
    font-size: var(--ez-fs-xs) !important;
    font-weight: 600;
    padding: 0.5rem !important;
}
.ez-body table.multiple-input-list.table-renderer tbody tr > td { border: 1px solid var(--ez-border) !important; }
.ez-body .multiple-input-list__item td .form-control { min-height: 38px; box-shadow: none; }
.ez-body .multiple-input-list__item td .form-control:focus { box-shadow: inset 0 0 0 2px rgba(var(--ez-primary-rgb), 0.35) !important; }
.ez-body .multiple-input { overflow-x: auto; }
/* spreadsheet-style grids (bulk orders): cells stay borderless */
.ez-body .multiple-input-list .select2-container--krajee-bs5 .select2-selection {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Opt-in: stack table rows into cards on phones.
   Add class "ez-table-stack" to the GridView container (options => ['class' => 'grid-view ez-table-stack'])
   — modern.js copies header text into data-label on each cell. */

/* 8. Pagination & summary --------------------------------------------------- */
.ez-body .summary {
    margin: 0 0 var(--ez-space-3);
    font-size: var(--ez-fs-sm);
    color: var(--ez-text-muted);
}
.ez-body .summary b { color: var(--ez-heading); font-weight: 600; }

.ez-body .pagination {
    --bs-pagination-color: var(--ez-text);
    --bs-pagination-bg: var(--ez-surface);
    --bs-pagination-border-color: var(--ez-border);
    --bs-pagination-hover-color: var(--ez-heading);
    --bs-pagination-hover-bg: var(--ez-surface-3);
    --bs-pagination-active-bg: var(--ez-primary);
    --bs-pagination-active-border-color: var(--ez-primary);
    --bs-pagination-focus-box-shadow: var(--ez-focus-ring);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--ez-space-4) 0 0;
    padding: 0;
    list-style: none;
}
.ez-body .pagination li,
.ez-body .pagination .active {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: inherit !important;
}
.ez-body .pagination > li > a,
.ez-body .pagination > li > span,
.ez-body .pagination .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid var(--ez-border) !important;
    border-radius: var(--ez-radius) !important;
    background: var(--ez-surface) !important;
    color: var(--ez-text) !important;
    font-size: var(--ez-fs-sm);
    font-weight: 500;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background-color var(--ez-dur) var(--ez-ease), border-color var(--ez-dur) var(--ez-ease);
}
.ez-body .pagination > li > a:hover,
.ez-body .pagination .page-link:hover {
    background: var(--ez-surface-3) !important;
    border-color: var(--ez-border-strong) !important;
}
.ez-body .pagination > li.active > a,
.ez-body .pagination > li.active > span,
.ez-body .pagination .page-item.active .page-link {
    background: var(--ez-primary) !important;
    border-color: var(--ez-primary) !important;
    color: #fff !important;
}
.ez-body .pagination > li.disabled > a,
.ez-body .pagination > li.disabled > span,
.ez-body .pagination .page-item.disabled .page-link {
    color: var(--ez-text-subtle) !important;
    background: var(--ez-surface-2) !important;
    pointer-events: none;
}

/* nterms page-size widget */
.ez-body select#per-page,
.ez-body .grid-view + select,
.ez-body select[name="per-page"] {
    width: auto;
    display: inline-block;
}

/* 9. Alerts, badges, breadcrumbs --------------------------------------------- */
.ez-body .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ez-space-2);
    padding: 0.85rem 1rem;
    margin-bottom: var(--ez-space-4);
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--ez-radius);
    background-image: none !important;
    font-size: var(--ez-fs-base);
    line-height: 1.5;
    box-shadow: none;
}
.ez-body .alert.alert-dismissible { padding-right: 3rem; }
.ez-body .alert .btn-close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    opacity: 0.6;
    filter: none;
}
.ez-body .alert .btn-close:hover { opacity: 1; }
.ez-body .alert a { font-weight: 600; text-decoration: underline; color: inherit; }
.ez-body .alert-success { background: var(--ez-success-soft) !important; border-color: #bbf7d0; border-left-color: var(--ez-success); color: var(--ez-success-ink) !important; }
.ez-body .alert-info { background: var(--ez-info-soft) !important; border-color: #bfdbfe; border-left-color: var(--ez-info); color: var(--ez-info-ink) !important; }
.ez-body .alert-warning { background: var(--ez-warning-soft) !important; border-color: #fde68a; border-left-color: var(--ez-warning); color: var(--ez-warning-ink) !important; }
.ez-body .alert-danger,
.ez-body .alert-error { background: var(--ez-danger-soft) !important; border-color: #fecaca; border-left-color: var(--ez-danger); color: var(--ez-danger-ink) !important; }
.ez-body .alert-primary { background: var(--ez-primary-soft) !important; border-color: var(--ez-primary-soft-2); border-left-color: var(--ez-primary); color: var(--ez-primary-active) !important; }
.ez-body .alert-dark,
.ez-body .alert-secondary,
.ez-body .alert-light { background: var(--ez-surface-3) !important; border-color: var(--ez-border); border-left-color: var(--ez-secondary); color: var(--ez-text) !important; }
.ez-body .alert.text-white { color: inherit !important; }
.ez-body .alert .text-white { color: inherit !important; }

/* toastr / noty stay as-is but get the font + radius */
#toast-container > div { font-family: var(--ez-font); border-radius: var(--ez-radius) !important; box-shadow: var(--ez-shadow-md) !important; opacity: 1; }

.ez-body .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.28em 0.65em;
    border-radius: var(--ez-radius-pill);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.3;
    vertical-align: middle;
}
.ez-body .badge.bg-primary,
.ez-body .badge.bg-gradient-primary,
.ez-body .badge-primary { background: var(--ez-primary-soft-2) !important; color: var(--ez-primary-active) !important; }
.ez-body .badge.bg-success,
.ez-body .badge.bg-gradient-success,
.ez-body .badge-success { background: #dcfce7 !important; color: #166534 !important; }
.ez-body .badge.bg-danger,
.ez-body .badge.bg-gradient-danger,
.ez-body .badge-danger { background: #fee2e2 !important; color: #991b1b !important; }
.ez-body .badge.bg-warning,
.ez-body .badge.bg-gradient-warning,
.ez-body .badge-warning { background: #fef3c7 !important; color: #92400e !important; }
.ez-body .badge.bg-info,
.ez-body .badge.bg-gradient-info,
.ez-body .badge-info { background: #dbeafe !important; color: #1e40af !important; }
.ez-body .badge.bg-secondary,
.ez-body .badge.bg-gradient-secondary,
.ez-body .badge.bg-light,
.ez-body .badge-secondary { background: #f1f5f9 !important; color: #334155 !important; }
.ez-body .badge.bg-dark,
.ez-body .badge.bg-gradient-dark { background: var(--ez-ink) !important; color: #fff !important; }

.ez-body .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: var(--ez-fs-sm);
}
.ez-body .breadcrumb-item,
.ez-body .breadcrumb > li { color: var(--ez-text-muted); }
.ez-body .breadcrumb-item a,
.ez-body .breadcrumb > li > a { color: var(--ez-text-muted); font-weight: 500; }
.ez-body .breadcrumb-item a:hover,
.ez-body .breadcrumb > li > a:hover { color: var(--ez-primary); }
.ez-body .breadcrumb-item.active { color: var(--ez-heading); font-weight: 500; }
.ez-body .breadcrumb-item + .breadcrumb-item::before { color: var(--ez-text-subtle); content: "/"; padding: 0 6px; }

/* 10. Dropdowns, modals, nav tabs ------------------------------------------- */
.ez-body .dropdown-menu {
    --bs-dropdown-bg: var(--ez-surface);
    --bs-dropdown-color: var(--ez-text);
    --bs-dropdown-border-color: var(--ez-border);
    --bs-dropdown-link-color: var(--ez-text);
    --bs-dropdown-link-hover-bg: var(--ez-surface-3);
    --bs-dropdown-link-hover-color: var(--ez-heading);
    --bs-dropdown-link-active-bg: var(--ez-primary-soft);
    --bs-dropdown-link-active-color: var(--ez-primary-hover);
    padding: 6px;
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-lg);
    background: var(--ez-surface);
    box-shadow: var(--ez-shadow-lg);
    font-size: var(--ez-fs-base);
}
.ez-body .dropdown-menu::before { display: none !important; }
.ez-body .dropdown-item {
    border-radius: var(--ez-radius-sm);
    padding: 8px 10px;
    color: var(--ez-text);
}
.ez-body .dropdown-item:hover,
.ez-body .dropdown-item:focus { background: var(--ez-surface-3); color: var(--ez-heading); }
.ez-body .dropdown-divider { border-color: var(--ez-border); margin: 6px 0; }

/* topbar dropdowns (store switcher, notifications) */
#navbar .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px !important;
}
#navbar .dropdown-menu .dropdown-item { white-space: normal; }
#navbar .dropdown-menu .fa-3x { font-size: 1.5rem; color: var(--ez-text-muted); }
#navbar .dropdown-menu .w-95 { width: 100% !important; }

.ez-body .modal { --bs-modal-zindex: 1060; }
.ez-body .modal-backdrop { --bs-backdrop-zindex: 1055; --bs-backdrop-opacity: 0.5; }
.ez-body .modal-content {
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-xl);
    background: var(--ez-surface);
    color: var(--ez-text);
    box-shadow: var(--ez-shadow-lg);
    overflow: hidden;
}
.ez-body .modal-header {
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ez-border);
}
.ez-body .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--ez-fs-md) !important;
    font-weight: 600;
    color: var(--ez-heading);
}
.ez-body .modal-title .material-icons { font-size: 20px; color: var(--ez-primary); }
.ez-body .modal-body { padding: 1.25rem; }
.ez-body .modal-footer {
    gap: var(--ez-space-2);
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--ez-border);
    background: var(--ez-surface-2);
}
.ez-body .modal-footer > * { margin: 0; }
.ez-body .modal-footer .btn { margin-bottom: 0; }
.ez-body .btn-close { box-shadow: none; }
.ez-body .btn-close:focus { box-shadow: var(--ez-focus-ring); }
/* video help modal: keep aspect ratio instead of fixed 650px */
.ez-body iframe[src*="youtube.com"],
.ez-body iframe[src*="youtu.be"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--ez-radius); }
.ez-body .chart-canvas { max-width: 100%; }
#helpModal .modal-body iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: var(--ez-radius); }

.ez-body .nav-tabs {
    gap: 4px;
    border-bottom: 1px solid var(--ez-border);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.ez-body .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ez-text-muted);
    font-weight: 500;
    white-space: nowrap;
    background: transparent;
}
.ez-body .nav-tabs .nav-link:hover { color: var(--ez-heading); }
.ez-body .nav-tabs .nav-link.active { color: var(--ez-primary-hover); border-bottom-color: var(--ez-primary); background: transparent; }
.ez-body .nav-pills .nav-link.active { background: var(--ez-primary); color: #fff; }
.ez-body .moving-tab { display: none !important; }

.ez-body .list-group-item { border-color: var(--ez-border); background: var(--ez-surface); color: var(--ez-text); }
.ez-body .progress { height: 8px; border-radius: var(--ez-radius-pill); background: var(--ez-surface-3); }
.ez-body .progress-bar { background: var(--ez-primary); }

/* 11. Material utility overrides --------------------------------------------- */
.ez-body .bg-gradient-primary { background: var(--ez-primary) !important; background-image: none !important; }
.ez-body .bg-gradient-dark { background: var(--ez-ink) !important; background-image: none !important; }
.ez-body .bg-gradient-info { background: var(--ez-info) !important; background-image: none !important; }
.ez-body .bg-gradient-success { background: var(--ez-success) !important; background-image: none !important; }
.ez-body .bg-gradient-warning { background: #f59e0b !important; background-image: none !important; }
.ez-body .bg-gradient-danger { background: var(--ez-danger) !important; background-image: none !important; }
.ez-body .bg-gradient-secondary { background: var(--ez-secondary) !important; background-image: none !important; }
.ez-body .bg-primary { background-color: var(--ez-primary) !important; }
.ez-body .text-primary { color: var(--ez-primary) !important; }
.ez-body .text-gradient.text-primary { background: none; -webkit-text-fill-color: currentColor; }
.ez-body .border-primary { border-color: var(--ez-primary) !important; }
.ez-body .bg-gray-100,
.ez-body .bg-gray-200 { background-color: var(--ez-bg) !important; }
.ez-body .text-body { color: var(--ez-text) !important; }
.ez-body .border-radius-lg { border-radius: var(--ez-radius-lg) !important; }
.ez-body .border-radius-xl { border-radius: var(--ez-radius-xl) !important; }
.ez-body .border-radius-md { border-radius: var(--ez-radius) !important; }
.ez-body .horizontal.dark { background-image: linear-gradient(90deg, transparent, var(--ez-border), transparent); }

/* material "fixed-plugin" configurator is not used */
.ez-body .fixed-plugin { display: none !important; }

/* 12. Preloader --------------------------------------------------------------- */
#preloader {
    background: rgba(244, 245, 247, 0.72) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
:root[data-theme="dark"] #preloader { background: rgba(11, 17, 32, 0.72) !important; }
#preloader #loader {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid var(--ez-border);
    border-top-color: var(--ez-primary);
    animation: spin 0.8s linear infinite;
}
#preloader #loader::before,
#preloader #loader::after { display: none; }
#preloader.loaded { transition: opacity 0.2s ease-out 0.1s, visibility 0.2s 0.1s; }


/* 12b. Auth & onboarding pages (loginLayout: sign in, sign up, OTP, packages, payment) */
.ez-auth .page-header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch !important;
    min-height: 100vh;
    padding: var(--ez-space-8) 0 6rem;
    background-size: cover;
    background-position: center;
}
.ez-auth .page-header > .mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(127, 29, 29, 0.72)) !important;
    opacity: 1 !important;
}
.ez-auth .page-header > .container { position: relative; z-index: 1; width: 100%; }
.ez-auth .page-header .card {
    max-width: 440px;
    margin: 0 auto;
    border: 0;
    border-radius: var(--ez-radius-xl);
    box-shadow: var(--ez-shadow-lg);
}
.ez-auth .page-header .card .card-header.mt-n4 > .bg-gradient-primary {
    padding: 1.25rem 1.5rem !important;
    border-radius: var(--ez-radius-xl) var(--ez-radius-xl) 0 0 !important;
}
.ez-auth .page-header .card .card-header h4 { color: #fff !important; font-size: var(--ez-fs-lg) !important; }
.ez-auth .page-header .card .card-body { padding: 1.5rem; }
.ez-auth .page-header .card .form-control { min-height: 46px; }
.ez-auth .page-header .card .btn { min-height: 46px; }
.ez-auth .page-header .card hr { margin: var(--ez-space-5) 0 0; }
.ez-auth .page-header .card p.mt-4 { margin-top: var(--ez-space-4) !important; color: var(--ez-text-muted); }
.ez-auth .footer { color: rgba(255, 255, 255, 0.85); }
.ez-auth .footer .nav-link,
.ez-auth .footer a { color: rgba(255, 255, 255, 0.85) !important; }
.ez-auth .fadeIn3,
.ez-auth .fadeInBottom { animation-duration: 0.4s !important; }
@media (max-width: 575.98px) {
    .ez-auth .page-header { justify-content: flex-start; padding: var(--ez-space-8) 0 var(--ez-space-4); }
    .ez-auth .page-header .card .card-body { padding: 1.25rem; }
    .ez-auth .footer.position-absolute { position: static !important; padding-top: var(--ez-space-6) !important; }
}

/* 13. Responsive ------------------------------------------------------------- */

/* < 576px: phones */
@media (max-width: 575.98px) {
    .ez-body .card .card-body { padding: 1rem; }
    .ez-body .card .card-header { padding: 0.875rem 1rem 0; }
    .ez-body .modal-dialog { margin: 0.5rem; }
    .ez-user-name { display: none; }
    .ez-user-menu .ez-user-btn { padding: 4px; }
    .ez-topbar__title h4,
.ez-topbar__title h6 { font-size: var(--ez-fs-base) !important; }
}

/* < 768px: phones + small tablets — single column forms, big touch targets */
@media (max-width: 767.98px) {
    /* forms: one field per row */
    .ez-content form .row > [class^="col-"],
    .ez-content form .row > [class*=" col-"] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
    /* …but leave grids that live inside tables alone */
    .ez-content form table .row > [class*="col-"] { width: auto; flex: 1 1 0; }

    .ez-body .btn { min-height: 44px; }
    .ez-body .btn-sm,
    .ez-body .btn-group-sm > .btn { min-height: 38px; }
    .ez-body .grid-view td .btn-sm,
    .ez-body .table td .btn-sm { min-height: 34px; }
    .ez-body form .form-group > .btn,
    .ez-body form > .btn,
    .ez-body form .form-group .btn-success,
    .ez-body form .form-group .btn-primary {
        width: 100%;
        min-height: 46px;
    }

    .ez-body .form-control,
    .ez-body .form-select,
    .ez-body .select2-container--krajee-bs5 .select2-selection { min-height: 44px; font-size: 16px; } /* 16px stops iOS zoom */
    .ez-body .input-group-text,
    .ez-body .input-tag span { min-height: 44px; }

    .ez-body .grid-view td a[title],
    .ez-body .grid-view td a[aria-label] { min-width: 40px; min-height: 40px; }

    .ez-body .detail-view,
    .ez-body .detail-view tbody,
    .ez-body .detail-view tr,
    .ez-body .detail-view th,
    .ez-body .detail-view td { display: block; width: 100% !important; max-width: none; }
    .ez-body .detail-view th { padding-bottom: 0.15rem !important; border-bottom: 0 !important; }
    .ez-body .detail-view td { padding-top: 0.15rem !important; }

    /* card-style rows for opted-in grids */
    .ez-body .ez-table-stack > .table,
    .ez-body .ez-table-stack > .table > tbody,
    .ez-body .ez-table-stack > .table > tbody > tr,
    .ez-body .ez-table-stack > .table > tbody > tr > td { display: block; width: 100%; }
    .ez-body .ez-table-stack > .table { border: 0; overflow: visible; }
    .ez-body .ez-table-stack > .table > thead > tr:not(.filters) { display: none; }
    .ez-body .ez-table-stack > .table > thead > tr.filters { display: grid; grid-template-columns: 1fr 1fr; }
    .ez-body .ez-table-stack > .table > tbody > tr {
        margin-bottom: var(--ez-space-3);
        border: 1px solid var(--ez-border);
        border-radius: var(--ez-radius);
        background: var(--ez-surface);
        overflow: hidden;
    }
    .ez-body .ez-table-stack > .table > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        gap: var(--ez-space-3);
        text-align: right;
        border-bottom: 1px solid var(--ez-border) !important;
    }
    .ez-body .ez-table-stack > .table > tbody > tr > td:last-child { border-bottom: 0 !important; }
    .ez-body .ez-table-stack > .table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        color: var(--ez-text-muted);
        font-size: var(--ez-fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .ez-body .modal-footer { flex-wrap: wrap; }
    .ez-body .modal-footer > .btn,
    .ez-body .modal-footer > a.btn { flex: 1 1 auto; }

    .ez-body .nav-footer { flex-wrap: wrap; }
}

/* ≥ 576px */
@media (min-width: 576px) {
    :root { --ez-gutter: 1.25rem; }
}

/* ≥ 768px */
@media (min-width: 768px) {
    .ez-content { padding-top: var(--ez-space-5); }
}

/* < 992px: off-canvas sidebar + collapsible topbar actions */
@media (max-width: 991.98px) {
    #navbar.ez-topbar__actions:not(.show):not(.collapsing) { display: none; }
    #navbar.ez-topbar__actions .navbar-nav > .nav-item > .btn,
    #navbar.ez-topbar__actions .ms-md-auto > .btn { width: 100%; min-height: 44px; }
    #navbar.ez-topbar__actions .ms-md-auto { width: 100%; }
    #navbar.ez-topbar__actions .nav-item.dropdown > .btn { width: 100%; justify-content: space-between; }
    /* buttons + search take full rows, icon items share one row */
    #navbar.ez-topbar__actions .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    #navbar.ez-topbar__actions .navbar-nav > .nav-item { flex: 0 0 auto; }
    #navbar.ez-topbar__actions .navbar-nav > .nav-item:has(> .btn:not(.notificationTop)),
    #navbar.ez-topbar__actions .navbar-nav > .nav-item:has(.select2-container),
    #navbar.ez-topbar__actions .navbar-nav > .nav-item:has(> .form-control),
    #navbar.ez-topbar__actions .navbar-nav > .nav-item:has(> select) { flex: 1 0 100%; }
    #navbar.ez-topbar__actions .navbar-nav > .ez-user-menu { margin-left: auto !important; }
    #navbar.ez-topbar__actions .navbar-nav > .nav-item.dropdown { flex-wrap: wrap; }
    #navbar .dropdown-menu { position: static !important; transform: none !important; width: 100%; margin-top: 6px !important; box-shadow: var(--ez-shadow-sm); }
}

/* ≥ 992px: sidebar docked, topbar actions inline */
@media (min-width: 992px) {
    :root { --ez-gutter: 1.5rem; }

    .ez-mobile-only { display: none !important; }

    #sidenav-main.ez-sidebar {
        transform: none;
        box-shadow: none;
        max-width: none;
    }
    .ez-backdrop { display: none; }
    .ez-sidebar-open { overflow: visible; }

    main.ez-main { margin-left: var(--ez-sidebar-w); }
    main.ez-main.ez-main--full,
    .ez-sidebar-collapsed main.ez-main.ez-main--full { margin-left: 0; }

    #navbar.ez-topbar__actions {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 0;
        margin-left: auto;
    }
    /* actions wrap onto a second row when they don't fit (992–1199px with long names) */
    #navbarBlur .ez-topbar__inner { flex-wrap: wrap; row-gap: 0; }
    .ez-topbar__lead { flex: 1 1 0; min-width: 120px; }
    #navbar.ez-topbar__actions { flex: 0 0 auto; }
    .ez-topbar__actions-inner {
        flex-direction: row;
        align-items: center;
        gap: var(--ez-space-2);
        padding: 0;
    }
    #navbar.ez-topbar__actions .navbar-nav {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    #navbar .select2-container--krajee-bs5 { width: 200px !important; }

    /* collapsed (icon rail) sidebar */
    .ez-sidebar-collapsed main.ez-main { margin-left: var(--ez-sidebar-w-collapsed); }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar { width: var(--ez-sidebar-w-collapsed); }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar .nav-link-text,
.ez-sidebar-collapsed #sidenav-main.ez-sidebar .nav-item h6,
.ez-sidebar-collapsed #sidenav-main.ez-sidebar .dropdown-menu { display: none !important; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar .nav-link[data-bs-toggle="dropdown"]::after { display: none; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar .nav-link { justify-content: center; padding: 9px 0 !important; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar .ez-sidebar__brand { justify-content: center; padding: 0 8px; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar .ez-sidebar__brand img.navbar-brand-img { height: 38px !important; width: auto; max-width: 170px; display: block; }
    /* hover / keyboard focus expands the rail as an overlay */
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover,
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:focus-within {
        width: var(--ez-sidebar-w);
        box-shadow: var(--ez-shadow-lg);
    }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover .nav-link-text,
.ez-sidebar-collapsed #sidenav-main.ez-sidebar:focus-within .nav-link-text,
.ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover .nav-item h6,
.ez-sidebar-collapsed #sidenav-main.ez-sidebar:focus-within .nav-item h6 { display: block !important; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover .dropdown-menu.show,
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:focus-within .dropdown-menu.show { display: block !important; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover .nav-link,
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:focus-within .nav-link { justify-content: flex-start; padding: 9px 12px !important; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover .nav-link[data-bs-toggle="dropdown"]::after,
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:focus-within .nav-link[data-bs-toggle="dropdown"]::after { display: block; }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover .ez-sidebar__brand { justify-content: space-between; padding: 0 var(--ez-space-4); }
    .ez-sidebar-collapsed #sidenav-main.ez-sidebar:hover .ez-sidebar__brand img.navbar-brand-img { height: 38px !important; width: auto; max-width: 170px; display: block; }
.ez-sidebar__brand .navbar-brand-img img { max-width: 170px; height: 38px; }
}

/* ≥ 1200px */
@media (min-width: 1200px) {
    :root { --ez-gutter: 2rem; }
    #navbar .select2-container--krajee-bs5 { width: 220px !important; }
    .ez-body .card .card-body { padding: 1.5rem; }
    .ez-body .card .card-header { padding: 1.25rem 1.5rem 0; }
}

@media (min-width: 1400px) {
    #navbar .select2-container--krajee-bs5 { width: 300px !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ez-body *,
    .ez-body *::before,
    .ez-body *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* 14. Dark mode extras -------------------------------------------------------- */
:root[data-theme="dark"] .ez-body .bg-white,
:root[data-theme="dark"] .ez-body .bg-light { background-color: var(--ez-surface) !important; }
:root[data-theme="dark"] .ez-body .text-dark,
:root[data-theme="dark"] .ez-body .text-black { color: var(--ez-text) !important; }
:root[data-theme="dark"] .ez-body .text-body { color: var(--ez-text) !important; }
:root[data-theme="dark"] .ez-body .table { --bs-table-color: var(--ez-text); color: var(--ez-text); }
:root[data-theme="dark"] .ez-body .badge.bg-success { background: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; }
:root[data-theme="dark"] .ez-body .badge.bg-danger { background: rgba(248, 113, 113, 0.18) !important; color: #fca5a5 !important; }
:root[data-theme="dark"] .ez-body .badge.bg-warning { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .ez-body .badge.bg-info { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
:root[data-theme="dark"] .ez-body .badge.bg-secondary,
:root[data-theme="dark"] .ez-body .badge.bg-light { background: var(--ez-surface-3) !important; color: var(--ez-text) !important; }
:root[data-theme="dark"] .ez-body .btn-danger { border-color: rgba(248, 113, 113, 0.35) !important; }
:root[data-theme="dark"] .ez-body .btn-dark,
:root[data-theme="dark"] .ez-body .btn.bg-gradient-dark { background: var(--ez-surface-3) !important; border: 1px solid var(--ez-border-strong) !important; color: var(--ez-heading) !important; }
:root[data-theme="dark"] .ez-body .btn-dark:hover { background: #334155 !important; }
:root[data-theme="dark"] .ez-body .bg-gradient-dark { background: var(--ez-surface-3) !important; }
:root[data-theme="dark"] .ez-body .alert { border-color: var(--ez-border); }
:root[data-theme="dark"] .ez-body .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:root[data-theme="dark"] .ez-body .form-select,
:root[data-theme="dark"] .ez-body select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
:root[data-theme="dark"] .ez-body .select2-dropdown,
:root[data-theme="dark"] .ez-body .select2-results__option { background: var(--ez-surface); color: var(--ez-text); }
:root[data-theme="dark"] .ez-body .datepicker,
:root[data-theme="dark"] .ez-body .datetimepicker { background: var(--ez-surface); color: var(--ez-text); }
:root[data-theme="dark"] .ez-sidebar__brand .navbar-brand-img { background: #fff; border-radius: var(--ez-radius); }

/* 15. Print -------------------------------------------------------------------- */
@media print {
    #sidenav-main,
    #navbarBlur,
    .ez-backdrop,
    .ez-main .footer,
    #preloader { display: none !important; }
    main.ez-main { margin: 0 !important; }
    .ez-content { padding: 0 !important; }
    .ez-body { background: #fff !important; }
    .ez-body .card { box-shadow: none; border: 0; }
    .ez-body .grid-view,
    .ez-body .table-responsive { overflow: visible !important; }
}

/* ==========================================================================
   16. Theme v2: look of the approved mockup (soft canvas, solid red active
   nav, tinted KPI tiles, dot status pills, split sign-in, phone bottom bar).
   Overrides earlier sections; markup hooks are classes only.
   ========================================================================== */
:root {
    --ez-bg: #f5f6fa;
    --ez-border: #eceef3;
    --ez-radius-lg: 16px;
    --ez-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -8px rgba(16, 24, 40, 0.08);
    --ez-sidebar-active-bg: var(--ez-primary);
    --ez-sidebar-active-text: #ffffff;
    --ez-tile-red: #fff1f1;   --ez-tile-red-ink: #ef4444;
    --ez-tile-blue: #eef4ff;  --ez-tile-blue-ink: #3b82f6;
    --ez-tile-amber: #fff6eb; --ez-tile-amber-ink: #f59e0b;
    --ez-tile-green: #ecfbf3; --ez-tile-green-ink: #22c55e;
    --ez-bottom-nav-h: 64px;
}
:root[data-theme="dark"] {
    --ez-border: #273244;
    --ez-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ez-tile-red: rgba(239, 68, 68, 0.12);
    --ez-tile-blue: rgba(59, 130, 246, 0.12);
    --ez-tile-amber: rgba(245, 158, 11, 0.12);
    --ez-tile-green: rgba(34, 197, 94, 0.12);
}

/* soft brand glow on the canvas */
body.ez-body:not(.ez-auth) {
    background:
        radial-gradient(900px 420px at 100% -10%, rgba(var(--ez-primary-rgb), 0.06), transparent 60%),
        var(--ez-bg) !important;
    background-attachment: fixed !important;
}

/* --- Sidebar ------------------------------------------------------------- */
.ez-sidebar .ez-nav-section,
.ez-sidebar .nav-item h6 {
    list-style: none;
    margin: 18px 0 6px !important;
    padding: 0 12px !important;
    color: var(--ez-text-subtle) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 1 !important;
}
.ez-sidebar .navbar-nav > .ez-nav-section:first-child { margin-top: 6px !important; }
.ez-sidebar .nav-item.mt-3 { margin-top: 0 !important; }

.ez-sidebar .nav-link { border-radius: 10px !important; }
/* active page: solid brand pill */
#sidenav-main .nav-link.active:not([data-bs-toggle="dropdown"]),
#sidenav-main .nav-link.bg-gradient-primary:not([data-bs-toggle="dropdown"]) {
    background: var(--ez-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(var(--ez-primary-rgb), 0.6);
}
#sidenav-main .nav-link.active:not([data-bs-toggle="dropdown"]) > div,
#sidenav-main .nav-link.bg-gradient-primary:not([data-bs-toggle="dropdown"]) > div { color: #fff !important; }
/* open group that holds the active page: soft tint */
#sidenav-main .nav-link[data-bs-toggle="dropdown"].active,
#sidenav-main .nav-link[data-bs-toggle="dropdown"].bg-gradient-primary {
    background: var(--ez-primary-soft) !important;
    color: var(--ez-primary-hover) !important;
}
.ez-sidebar .nav-link.active::before { display: none; }
.ez-sidebar .dropdown-menu > li { border-left-color: transparent; }
.ez-sidebar .dropdown-item.active,
.ez-sidebar .dropdown-item.bg-gradient-primary {
    background: transparent !important;
    color: var(--ez-primary) !important;
}
.ez-sidebar .dropdown-item.active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--ez-primary);
}
:root[data-theme="dark"] #sidenav-main .nav-link[data-bs-toggle="dropdown"].active { background: rgba(var(--ez-primary-rgb), 0.14) !important; color: #fca5a5 !important; }

.ez-topbar__title h4 { font-size: 1.05rem !important; font-weight: 700 !important; }
.ez-user-meta { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.ez-user-role { font-size: 0.6875rem; font-weight: 500; color: var(--ez-text-muted); }
.ez-user-menu .ez-user-btn { border-color: transparent; background: transparent; }
.ez-user-menu .ez-user-btn:hover { background: var(--ez-surface); border-color: var(--ez-border); }
.ez-avatar { background: var(--ez-primary); color: #fff; }
/* search reads as a rounded search field */
#navbar .select2-container .select2-selection {
    border-radius: var(--ez-radius-pill) !important;
    background-color: var(--ez-surface-2) !important;
    padding-left: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}
#navbar .btn-sm { border-radius: var(--ez-radius-pill); }

/* --- Cards --------------------------------------------------------------- */
.ez-body .card {
    border-color: var(--ez-border);
    box-shadow: var(--ez-shadow-card);
}
.ez-body .card .card-header h5,
.ez-body .card .card-header h6 { font-weight: 700; }

/* Page greeting / header */
.ez-greeting { margin-bottom: var(--ez-space-6); }
.ez-greeting__title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem) !important; font-weight: 700 !important; letter-spacing: -0.02em; margin: 0 0 4px !important; }
.ez-greeting__sub { margin: 0; color: var(--ez-text-muted); }
.ez-page-header .btn .material-icons { font-size: 18px; vertical-align: -4px; margin-right: 2px; }

/* KPI tiles: tinted card + coloured icon, text beside the icon */
.ez-body .card:has(> .card-header > .icon-shape.position-absolute) {
    border-color: transparent;
    overflow: hidden;
}
.ez-body .card .card-header:has(> .icon-shape.position-absolute) {
    justify-content: flex-start;
    gap: 14px;
    padding: 1.15rem 1.25rem 0.5rem !important;
}
.ez-body .card .card-header > .icon-shape.position-absolute.mt-n4 {
    width: 52px;
    height: 52px;
    border-radius: 14px !important;
    background-image: none !important;
}
.ez-body .card .card-header:has(> .icon-shape.position-absolute) > .text-end { text-align: left !important; padding-top: 0 !important; }
.ez-body .card .card-header:has(> .icon-shape.position-absolute) > .text-end p { font-size: var(--ez-fs-sm) !important; color: var(--ez-text) !important; font-weight: 600; }
.ez-body .card .card-header:has(> .icon-shape.position-absolute) > .text-end h4 { font-size: 1.75rem !important; line-height: 1.15; }
.ez-body .card:has(> .card-header > .icon-shape.position-absolute) > hr.horizontal { display: none; }
.ez-body .card:has(> .card-header > .icon-shape.position-absolute) > .card-footer { border-top: 0; padding: 0.25rem 1.25rem 1.1rem !important; background: transparent; }
.ez-body .card:has(> .card-header > .icon-shape.position-absolute) > .card-footer p { font-size: var(--ez-fs-xs); }

.ez-body .card:has(> .card-header > .icon-shape.bg-gradient-dark.position-absolute)    { background: var(--ez-tile-red); }
.ez-body .card:has(> .card-header > .icon-shape.bg-gradient-primary.position-absolute) { background: var(--ez-tile-amber); }
.ez-body .card:has(> .card-header > .icon-shape.bg-gradient-success.position-absolute) { background: var(--ez-tile-green); }
.ez-body .card:has(> .card-header > .icon-shape.bg-gradient-info.position-absolute),
.ez-body .card:has(> .card-header > .icon-shape.bg-gradient-warning.position-absolute) { background: var(--ez-tile-blue); }
.ez-body .card .card-header > .icon-shape.bg-gradient-dark.position-absolute    { background: var(--ez-tile-red-ink) !important; box-shadow: 0 8px 16px -8px var(--ez-tile-red-ink) !important; }
.ez-body .card .card-header > .icon-shape.bg-gradient-primary.position-absolute { background: var(--ez-tile-amber-ink) !important; box-shadow: 0 8px 16px -8px var(--ez-tile-amber-ink) !important; }
.ez-body .card .card-header > .icon-shape.bg-gradient-success.position-absolute { background: var(--ez-tile-green-ink) !important; box-shadow: 0 8px 16px -8px var(--ez-tile-green-ink) !important; }
.ez-body .card .card-header > .icon-shape.bg-gradient-info.position-absolute,
.ez-body .card .card-header > .icon-shape.bg-gradient-warning.position-absolute { background: var(--ez-tile-blue-ink) !important; box-shadow: 0 8px 16px -8px var(--ez-tile-blue-ink) !important; }
.ez-body a:hover > .card:has(> .card-header > .icon-shape.position-absolute) { border-color: transparent; }

/* --- Buttons ------------------------------------------------------------- */
.ez-body .btn-primary,
.ez-body .bg-gradient-primary.btn {
    box-shadow: 0 6px 14px -8px rgba(var(--ez-primary-rgb), 0.7);
}

/* --- Tables -------------------------------------------------------------- */
.ez-body .table thead th,
.ez-body .table > thead > tr > th {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--ez-fs-sm);
    color: var(--ez-text-muted);
    background: var(--ez-surface-2) !important;
}
.ez-body .grid-view > .table,
.ez-body .grid-view > table,
.ez-body .table-responsive > .table { border-radius: 12px; }

/* status pills: soft colour + leading dot (Bootstrap "text-bg-*" badges too) */
.ez-body .badge.text-bg-success { background: #dcfce7 !important; color: #15803d !important; }
.ez-body .badge.text-bg-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.ez-body .badge.text-bg-warning { background: #ffedd5 !important; color: #c2410c !important; }
.ez-body .badge.text-bg-info    { background: #dbeafe !important; color: #1d4ed8 !important; }
.ez-body .badge.text-bg-primary { background: var(--ez-primary-soft-2) !important; color: var(--ez-primary-active) !important; }
.ez-body .badge.text-bg-secondary,
.ez-body .badge.text-bg-light   { background: #f1f5f9 !important; color: #334155 !important; }
.ez-body .badge.text-bg-dark    { background: #e5e7eb !important; color: #111827 !important; }
.ez-body .table .badge,
.ez-body .detail-view .badge { padding: 0.35em 0.75em; font-size: 0.75rem; }
.ez-body .table .badge:not(:empty)::before,
.ez-body .detail-view .badge:not(:empty)::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ez-body .table .badge.bg-dark,
.ez-body .table .badge.bg-gradient-dark { background: #e5e7eb !important; color: #111827 !important; }
:root[data-theme="dark"] .ez-body .badge.text-bg-success { background: rgba(34, 197, 94, 0.18) !important; color: #86efac !important; }
:root[data-theme="dark"] .ez-body .badge.text-bg-danger  { background: rgba(248, 113, 113, 0.18) !important; color: #fca5a5 !important; }
:root[data-theme="dark"] .ez-body .badge.text-bg-warning { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .ez-body .badge.text-bg-info    { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
:root[data-theme="dark"] .ez-body .badge.text-bg-dark,
:root[data-theme="dark"] .ez-body .table .badge.bg-dark,
:root[data-theme="dark"] .ez-body .table .badge.bg-gradient-dark { background: rgba(148, 163, 184, 0.18) !important; color: #e2e8f0 !important; }

/* --- Phone bottom bar ---------------------------------------------------- */
.ez-bottom-nav { display: none; }
@media (max-width: 991.98px) {
    .ez-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: calc(var(--ez-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: var(--ez-surface);
        border-top: 1px solid var(--ez-border);
        box-shadow: 0 -6px 20px -12px rgba(16, 24, 40, 0.18);
    }
    .ez-bottom-nav__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        background: transparent;
        color: var(--ez-text-muted) !important;
        font-size: 0.6875rem;
        font-weight: 600;
        text-decoration: none !important;
    }
    .ez-bottom-nav__item .material-icons { font-size: 22px; line-height: 1; }
    .ez-bottom-nav__item.active { color: var(--ez-primary) !important; }
    .ez-bottom-nav__fab { flex: 0 0 auto; padding: 0 6px; }
    .ez-bottom-nav__fab .material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        margin-top: -22px;
        border-radius: 50%;
        background: var(--ez-primary);
        color: #fff;
        font-size: 28px;
        box-shadow: 0 10px 20px -8px rgba(var(--ez-primary-rgb), 0.75);
    }
    .ez-body:has(.ez-bottom-nav) main.ez-main { padding-bottom: calc(var(--ez-bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
    .ez-sidebar-open .ez-bottom-nav { z-index: 1029; }
}

/* --- Split sign-in (login / registration) -------------------------------- */
.ez-auth-hero { display: none; }
.ez-auth--split .ez-auth-hero {
    display: block;
    position: relative;
    padding: 28px 20px 8px;
    text-align: center;
    background: var(--ez-surface);
}
.ez-auth--split .ez-auth-hero__logo { height: 48px !important; width: auto !important; max-width: 100%; }
.ez-auth--split .ez-auth-hero__tag,
.ez-auth--split .ez-auth-hero__title,
.ez-auth--split .ez-auth-hero__lead,
.ez-auth--split .ez-auth-hero__list,
.ez-auth--split .ez-auth-hero__art { display: none; }
body.ez-auth--split { background: var(--ez-surface) !important; }
.ez-auth--split .page-header { background-image: none !important; background: var(--ez-surface) !important; min-height: 0 !important; padding: 16px 0 24px; }
.ez-auth--split .page-header > .mask { display: none; }
.ez-auth--split .page-header .card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}
.ez-auth--split .page-header .card .card-header.mt-n4 { margin: 0 !important; }
.ez-auth--split .page-header .card .card-header.mt-n4 > .bg-gradient-primary {
    background: transparent !important;
    padding: 0 1.5rem !important;
}
.ez-auth--split .page-header .card .card-header h4 {
    color: var(--ez-heading) !important;
    text-align: left !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}
.ez-auth--split .page-header .card .form-control { min-height: 50px; border-radius: 12px; background: var(--ez-surface); }
.ez-auth--split .page-header .card .btn { min-height: 50px; border-radius: 12px; font-size: var(--ez-fs-md); }
.ez-auth--split .footer,
.ez-auth--split .footer .nav-link,
.ez-auth--split .footer a { color: var(--ez-text-muted) !important; }
.ez-auth--split .footer .copyright { color: var(--ez-text-muted) !important; }
.ez-auth--split .footer.position-absolute { position: static !important; }

@media (min-width: 992px) {
    .ez-auth--split .ez-auth-hero {
        position: fixed;
        inset: 0 auto 0 0;
        width: 52%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 56px clamp(40px, 6vw, 96px);
        text-align: left;
        overflow: hidden;
        background:
            radial-gradient(600px 400px at 90% 100%, rgba(var(--ez-primary-rgb), 0.18), transparent 70%),
            radial-gradient(500px 380px at 0% 0%, rgba(var(--ez-primary-rgb), 0.10), transparent 70%),
            linear-gradient(160deg, #fff7f7 0%, #ffecec 100%);
    }
    .ez-auth--split .ez-auth-hero__inner { position: relative; z-index: 1; max-width: 520px; }
    .ez-auth--split .ez-auth-hero__logo { height: 64px !important; }
    .ez-auth--split .ez-auth-hero__tag,
    .ez-auth--split .ez-auth-hero__title,
    .ez-auth--split .ez-auth-hero__lead,
    .ez-auth--split .ez-auth-hero__list,
    .ez-auth--split .ez-auth-hero__art { display: block; }
    .ez-auth--split .ez-auth-hero__tag { margin: 6px 0 40px; color: var(--ez-text-muted); font-weight: 500; }
    .ez-auth--split .ez-auth-hero__title {
        margin: 0 0 18px;
        font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.25rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: var(--ez-ink);
    }
    .ez-auth--split .ez-auth-hero__title span { color: var(--ez-primary); }
    .ez-auth--split .ez-auth-hero__lead { margin: 0 0 28px; max-width: 420px; font-size: var(--ez-fs-md); color: #374151; }
    .ez-auth--split .ez-auth-hero__list { margin: 0; padding: 0; list-style: none; }
    .ez-auth--split .ez-auth-hero__list li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-weight: 600; color: var(--ez-ink); }
    .ez-auth--split .ez-auth-hero__list .material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--ez-primary);
        color: #fff;
        font-size: 16px;
    }
    .ez-auth--split .ez-auth-hero__art { position: absolute; inset: 0; pointer-events: none; }
    .ez-auth--split .ez-auth-hero__art::before,
    .ez-auth--split .ez-auth-hero__art::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(var(--ez-primary-rgb), 0.12);
    }
    .ez-auth--split .ez-auth-hero__art::before { width: 520px; height: 520px; right: -200px; bottom: -220px; }
    .ez-auth--split .ez-auth-hero__art::after { width: 340px; height: 340px; right: -110px; bottom: -130px; border-color: rgba(var(--ez-primary-rgb), 0.18); }
    .ez-auth--split .ez-auth-hero__chip {
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 18px;
        background: #fff;
        color: var(--ez-primary);
        box-shadow: 0 18px 36px -16px rgba(16, 24, 40, 0.35);
    }
    .ez-auth--split .ez-auth-hero__chip .material-icons { font-size: 30px; }
    .ez-auth--split .ez-auth-hero__chip--a { right: 8%; top: 26%; transform: rotate(-8deg); }
    .ez-auth--split .ez-auth-hero__chip--b { right: 20%; bottom: 16%; transform: rotate(6deg); background: var(--ez-primary); color: #fff; }
    .ez-auth--split .ez-auth-hero__chip--c { right: 5%; top: 50%; color: var(--ez-success); }

    .ez-auth--split .main-content { margin-left: 52%; }
    .ez-auth--split .page-header { min-height: 100vh !important; padding: 40px 0; }
    .ez-auth--split .page-header .container { max-width: 520px; }
    .ez-auth--split .page-header .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .ez-auth--split .page-header .card {
        border: 1px solid var(--ez-border) !important;
        box-shadow: var(--ez-shadow-lg) !important;
        background: var(--ez-surface);
        padding: 12px 8px;
    }
    .ez-auth--split .page-header .card .card-header.mt-n4 > .bg-gradient-primary { padding-top: 1rem !important; }
    .ez-auth--split .footer.position-absolute { position: absolute !important; left: 52%; width: 48% !important; }
    .ez-auth--split .footer .container { max-width: 100%; padding: 0 32px; }
}
:root[data-theme="dark"] .ez-auth--split .ez-auth-hero { background: linear-gradient(160deg, #1b1220 0%, #2a1018 100%); }
:root[data-theme="dark"] .ez-auth--split .ez-auth-hero__title,
:root[data-theme="dark"] .ez-auth--split .ez-auth-hero__list li { color: #f8fafc; }
:root[data-theme="dark"] .ez-auth--split .ez-auth-hero__lead { color: #cbd5e1; }

@media print {
    .ez-bottom-nav, .ez-auth-hero { display: none !important; }
    .ez-auth--split .main-content { margin-left: 0 !important; }
}
@media (max-width: 1399.98px) { .ez-user-role { display: none; } }
:root[data-theme="dark"] .ez-sidebar .nav-item h6 { color: var(--ez-text-subtle) !important; }

/* 12c. Sign-in page (user-management/auth/login): full-screen workspace
   photo with a centred white card ------------------------------------------ */
.ez-auth--login { background: #f6f7fd !important; }
.ez-auth--login .ez-login__page {
    min-height: 100vh;
    padding: 2.5rem 0 0 !important;
    justify-content: center;
    background-color: #f6f7fd;
    background-image: url("../img/auth/login-bg-1623.jpg");
    background-image: image-set(url("../img/auth/login-bg-1623.webp") type("image/webp"), url("../img/auth/login-bg-1623.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.ez-auth--login .ez-login__wrap { flex: 1 0 auto; display: flex; align-items: center; }
.ez-auth--login .ez-login__wrap > .row { width: 100%; margin: 0; }
.ez-auth--login .ez-login__col { max-width: 420px; padding: 0; }
.ez-auth--login .page-header .card.ez-login__card {
    max-width: 420px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 70px -20px rgba(30, 41, 99, .28), 0 8px 24px rgba(30, 41, 99, .06);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.ez-auth--login .page-header .card.ez-login__card .card-body { padding: 2.25rem 2rem 1.75rem; }
.ez-auth--login .ez-login__card h1.ez-login__title { margin: 0; color: #0f1446; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; text-align: center; }
.ez-auth--login .ez-login__card h1.ez-login__title span { background: linear-gradient(90deg, #d61f8c, #b5179e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ez-auth--login .ez-login__card p.ez-login__sub { margin: .35rem 0 1.6rem; color: #5b6477; font-size: .95rem; text-align: center; }

.ez-login__field { position: relative; display: flex; align-items: center; }
.ez-login__field > .material-icons {
    position: absolute;
    left: 14px;
    color: #6b7280;
    font-size: 20px;
    pointer-events: none;
}
.ez-auth--login .page-header .card .ez-login__field .form-control {
    min-height: 50px;
    padding: .65rem 2.9rem .65rem 2.85rem !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 15px;
    box-shadow: none;
}
.ez-auth--login .page-header .card .ez-login__field .form-control:focus { border-color: #d61f8c !important; box-shadow: 0 0 0 3px rgba(214, 31, 140, .14) !important; }
.ez-login__field:focus-within > .material-icons { color: #d61f8c; }
.ez-login__eye {
    position: absolute;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}
.ez-login__eye:hover, .ez-login__eye:focus-visible { color: #0f1446; background: #f3f4f8; outline: none; }
.ez-login__eye .material-icons { font-size: 20px; }
.ez-auth--login #login-form .form-group,
.ez-auth--login #login-form .mb-3 { margin-bottom: 1rem; }
.ez-auth--login #login-form .invalid-feedback,
.ez-auth--login #login-form .help-block { display: block; margin-top: .35rem; font-size: 13px; }

.ez-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -.25rem 0 1rem; }
.ez-login__remember { margin: 0 !important; }
.ez-login__remember .form-check { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 0; padding-left: 0; }
.ez-auth--login .ez-login__remember .form-check-input {
    position: static;
    float: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #9ca3af;
    border-radius: 5px;
    background: #fff center / 12px no-repeat;
    opacity: 1;
    visibility: visible;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
}
.ez-auth--login .ez-login__remember .form-check-input:checked {
    border-color: #2563eb;
    background-color: #2563eb;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.ez-auth--login .ez-login__remember .form-check-input:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); outline: none; }
.ez-auth--login .ez-login__remember .form-check-label { margin: 0; padding: 0; color: #374151; font-size: 14px; white-space: nowrap; cursor: pointer; }
.ez-auth--login .ez-login__remember .form-check-label::before,
.ez-auth--login .ez-login__remember .form-check-label::after { display: none; }

.ez-auth--login .page-header .card .btn.ez-login__submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #f43341 0%, #e0247a 60%, #c2189c 100%) !important;
    box-shadow: 0 12px 24px -10px rgba(224, 36, 122, .6) !important;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.ez-login__submit .material-icons { position: absolute; top: 50%; right: 18px; font-size: 20px; line-height: 1; transform: translateY(-50%); transition: transform .2s; }
.ez-login__submit:hover .material-icons { transform: translate(3px, -50%); }

.ez-login__or { display: flex; align-items: center; gap: 14px; margin: 1.4rem 0 .9rem; color: #6b7280; font-size: 13px; }
.ez-login__or::before, .ez-login__or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.ez-auth--login .page-header .card p.ez-login__signup { margin: 0 !important; color: #4b5563; font-size: 14.5px; text-align: center; }
.ez-auth--login .ez-login__signup a { margin-left: 6px; background: none !important; -webkit-text-fill-color: #e0247a; color: #e0247a !important; font-weight: 700; }

.ez-auth--login .footer.ez-login__footer { position: static; margin-top: auto; color: #4b5563; }
.ez-auth--login .footer.ez-login__footer .copyright,
.ez-auth--login .footer.ez-login__footer a,
.ez-auth--login .footer.ez-login__footer .nav-link { color: #374151 !important; font-size: 13.5px; }
.ez-auth--login .footer.ez-login__footer .nav-item + .nav-item { border-left: 1px solid #9ca3af; }
.ez-auth--login .footer.ez-login__footer .nav-link { padding: 2px 16px; }

/* below 992px the photo's people sit behind the card: soften it */
@media (max-width: 991.98px) {
    .ez-auth--login .ez-login__page {
        background-image: linear-gradient(rgba(246, 247, 253, .55), rgba(246, 247, 253, .55)), url("../img/auth/login-bg-960.jpg");
        background-image: linear-gradient(rgba(246, 247, 253, .55), rgba(246, 247, 253, .55)), image-set(url("../img/auth/login-bg-960.webp") type("image/webp"), url("../img/auth/login-bg-960.jpg") type("image/jpeg"));
        background-position: 30% center;
    }
}
@media (max-width: 575.98px) {
    .ez-auth--login .ez-login__page { padding-top: 1.5rem !important; }
    .ez-auth--login .ez-login__wrap { padding: 0 16px; }
    .ez-auth--login .page-header .card.ez-login__card .card-body { padding: 1.75rem 1.25rem 1.5rem; }
    .ez-auth--login .ez-login__card h1.ez-login__title { font-size: 1.65rem; }
}
html[data-theme="dark"] .ez-auth--login .page-header .card.ez-login__card { background: rgba(255, 255, 255, .96); }

/* 14. Dashboard, sidebar and top bar v3 (user design, 2026-10-06) -------------- */

/* sidebar: softer panel, roomier items, red gradient pill for the active page */
#sidenav-main.ez-sidebar { background: #f8faff !important; border-right-color: #e8ecf5; }
.ez-sidebar .ez-nav-section { margin-top: 14px; padding: 8px 18px 6px; color: #7b8499; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; }
.ez-sidebar .nav-link { min-height: 42px; margin: 2px 12px; border-radius: 12px; color: #2d3550 !important; font-size: 14.5px; font-weight: 500; }
.ez-sidebar .nav-link > div,
.ez-sidebar .nav-link .material-icons { color: #4b5470 !important; }
#sidenav-main .nav-link.active,
#sidenav-main .nav-link.bg-gradient-primary,
.ez-sidebar .nav-link.active,
.ez-sidebar .nav-link.bg-gradient-primary {
    background: linear-gradient(90deg, #f0373f 0%, #e5195b 100%) !important;
    box-shadow: 0 10px 20px -10px rgba(229, 25, 91, .7);
    color: #fff !important;
}
#sidenav-main .nav-link.active > div,
#sidenav-main .nav-link.active .material-icons,
.ez-sidebar .nav-link.bg-gradient-primary > div,
.ez-sidebar .nav-link.bg-gradient-primary .material-icons { color: #fff !important; }
.ez-sidebar .nav-link:not(.active):hover { background: #eef1fa !important; }

/* top bar: white, wide rounded search, round icon buttons */
.ez-topbar { background: rgba(255, 255, 255, .92) !important; border-bottom: 1px solid #e8ecf5; box-shadow: 0 6px 24px -18px rgba(15, 23, 42, .25); }
.ez-search { position: relative; }
.ez-topbar .select2-container { min-width: 320px; }
@media (min-width: 1400px) { .ez-topbar .select2-container { min-width: 420px; } }
.ez-topbar .select2-container .select2-selection--single {
    height: 44px !important;
    padding-left: 36px;
    border: 1px solid #e3e7f0 !important;
    border-radius: 999px !important;
    background: #f5f7fc url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e") 14px center / 18px no-repeat !important;
}
.ez-topbar .select2-container .select2-selection__rendered { line-height: 42px !important; padding-right: 64px !important; }
.ez-topbar .select2-container .select2-selection__arrow { display: none; }
.ez-search kbd.ez-search-kbd {
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 2px 8px;
    border: 1px solid #dfe3ec;
    border-radius: 7px;
    background: #fff;
    color: #64748b;
    box-shadow: none;
    font: 600 11.5px/1.5 Inter, sans-serif;
    transform: translateY(-50%);
    pointer-events: none;
}
.ez-topbar .notificationTop .badge { background: #ef4444 !important; color: #fff; }
/* top-bar search results (its Select2 container is tagged .ez-gs-drop by modern.js) */
.ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-dropdown {
    width: auto !important;
    min-width: max(100%, 380px);
    margin-top: 6px;
    border: 1px solid var(--ez-border) !important;
    border-radius: 14px !important;
    background: var(--ez-surface);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06);
    overflow: hidden;
}
.ez-body .select2-container--krajee-bs5.ez-gs-drop.select2-container--above .select2-dropdown { margin-top: 0; margin-bottom: 6px; }
.ez-body .ez-gs-drop .select2-search--dropdown { padding: 10px 10px 8px; border-bottom: 1px solid var(--ez-border); }
.ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-search--dropdown .select2-search__field {
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--ez-border-strong) !important;
    border-radius: 10px !important;
    background: var(--ez-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e") 12px center / 17px no-repeat !important;
    color: var(--ez-text);
    font-size: 14px;
    box-shadow: none;
    outline: 0;
}
.ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-search__field:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; }
.ez-body .ez-gs-drop .select2-results > .select2-results__options {
    max-height: 320px;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.ez-body .ez-gs-drop .select2-results > .select2-results__options::-webkit-scrollbar { width: 8px; }
.ez-body .ez-gs-drop .select2-results > .select2-results__options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid var(--ez-surface); }
.ez-body .ez-gs-drop .select2-results > .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-results__option {
    margin: 0;
    padding: 9px 12px;
    border-radius: 9px;
    background: transparent;
    color: var(--ez-text);
    font-size: 14px;
    line-height: 1.35;
}
.ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-results__option--highlighted[aria-selected],
.ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-results__option--highlighted {
    background: #eff6ff !important;
    color: var(--ez-text) !important;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}
.ez-body .ez-gs-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ez-body .ez-gs-id { flex: 0 0 auto; font-weight: 700; color: var(--ez-heading); font-variant-numeric: tabular-nums; }
.ez-body .ez-gs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ez-text-muted); font-size: 13px; }
.ez-body .ez-gs-drop .select2-results__option--highlighted .ez-gs-id { color: #1d4ed8; }
/* searching / type more / no results */
.ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-results__message,
.ez-body .select2-container--krajee-bs5.ez-gs-drop .loading-results {
    padding: 14px 12px;
    background: transparent !important;
    color: var(--ez-text-muted) !important;
    font-size: 13px;
    text-align: center;
    box-shadow: none;
}
:root[data-theme="dark"] .ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-results__option--highlighted { background: rgba(59, 130, 246, .16) !important; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35); }
:root[data-theme="dark"] .ez-body .ez-gs-drop .select2-results__option--highlighted .ez-gs-id { color: #93c5fd; }
:root[data-theme="dark"] .ez-body .ez-gs-drop .select2-results__option { background: transparent; }
:root[data-theme="dark"] .ez-body .ez-gs-drop .select2-dropdown { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .ez-body .ez-gs-drop .select2-results > .select2-results__options { scrollbar-color: #475569 transparent; }
:root[data-theme="dark"] .ez-body .ez-gs-drop .select2-results > .select2-results__options::-webkit-scrollbar-thumb { background: #475569; }
@media (max-width: 575.98px) {
    .ez-body .select2-container.ez-gs-drop { left: 12px !important; right: 12px; }
    .ez-body .select2-container--krajee-bs5.ez-gs-drop .select2-dropdown { position: relative; min-width: 0; width: 100% !important; }
}

/* dashboard: greeting + New Order */
.ez-greeting__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 800; color: #0f1446; }
.ez-new-order {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, #f0373f, #e5195b) !important;
    box-shadow: 0 12px 24px -12px rgba(229, 25, 91, .7) !important;
    text-transform: none !important;
    font-size: 15px !important;
}

/* KPI cards */
.ez-kpi-link { display: block; height: 100%; color: inherit !important; text-decoration: none; }
.ez-kpi {
    --k: #e11d2a;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 20px 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--k) 12%, #fff) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--k) 9%, #fff) 0%, #fff 70%) !important;
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, .35) !important;
    transition: transform .2s, box-shadow .2s;
}
.ez-kpi::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -60px;
    width: 220px;
    height: 120px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--k) 8%, transparent);
    transform: rotate(-20deg);
    pointer-events: none;
}
.ez-kpi-link:hover .ez-kpi { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(15, 23, 42, .45) !important; }
.ez-kpi--red { --k: #e11d2a; }
.ez-kpi--amber { --k: #f59e0b; }
.ez-kpi--green { --k: #16a34a; }
.ez-kpi--blue { --k: #2563eb; }
.ez-kpi--purple { --k: #7c3aed; }
.ez-kpi__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--k);
    box-shadow: 0 10px 20px -10px var(--k);
    color: #fff;
}
.ez-kpi__icon .material-icons { color: #fff; font-size: 28px; }
.ez-kpi__body { position: relative; z-index: 1; min-width: 0; }
.ez-kpi__label { margin: 0; color: #1f2742; font-size: 14.5px; font-weight: 600; }
.ez-kpi h4.ez-kpi__value { margin: 2px 0 4px; color: #0f1446; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.ez-kpi__meta { margin: 0; color: #5b6477; font-size: 12.5px; }
.ez-kpi__meta span { color: #16a34a; font-weight: 700; }
.ez-kpi__sep { display: inline-block; width: 5px; height: 5px; margin: 0 5px 2px; border-radius: 1px; background: #16a34a; transform: rotate(45deg); }

/* chart cards */
.ez-chartcard,
.ez-dcard { height: auto; border: 1px solid #e8ecf5 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 10px 28px -20px rgba(15, 23, 42, .35) !important; }
.ez-chartcard { --k: #e11d2a; height: 100%; }
.ez-chartcard--red { --k: #e11d2a; }
.ez-chartcard--amber { --k: #f59e0b; }
.ez-chartcard--green { --k: #16a34a; }
.ez-chartcard--blue { --k: #2563eb; }
.ez-chartcard__head,
.ez-dcard__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 6px !important;
    background: transparent !important;
    border: 0 !important;
}
.ez-chartcard__head h6,
.ez-dcard__head h6 { margin: 0; color: #0f1446; font-size: 16px; font-weight: 700; }
.ez-chartcard__titles { flex: 1 1 auto; min-width: 0; }
.ez-chartcard .ez-chartcard__head { gap: 10px; padding: 16px 16px 4px !important; }
.ez-chartcard .ez-chartcard__head h6 { font-size: 15px; line-height: 1.25; }
.ez-chartcard .ez-chartcard__icon { width: 32px; height: 32px; }
.ez-chartcard .ez-chartcard__range { padding: 5px 9px; font-size: 11.5px; }
.ez-chartcard__icon,
.ez-dcard__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--k, #7c3aed) 14%, #fff);
    color: var(--k, #7c3aed);
}
.ez-chartcard__icon .material-icons,
.ez-dcard__icon .material-icons { color: inherit; font-size: 20px; }
.ez-dcard__icon--violet { --k: #7c3aed; }
.ez-dcard__icon--red { --k: #e11d2a; }
.ez-chartcard__range {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #e3e7f0;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
}
.ez-chartcard__body { padding: 8px 16px 16px !important; }
.ez-chartcard__body .chart { height: 180px; }

/* lower cards */
.ez-dcard__actions { display: flex; gap: 8px; margin-left: auto; }
.ez-dcard__actions .btn { min-height: 38px; padding: 8px 16px; border-radius: 10px; text-transform: none; font-size: 13.5px; }
.ez-btn-ghost { display: inline-flex !important; align-items: center; gap: 6px; border: 1px solid #dfe3ec !important; background: #fff !important; color: #1f2742 !important; box-shadow: none !important; }
.ez-btn-ghost .material-icons { font-size: 18px; }
.ez-dcard .card-body { padding: 10px 18px 18px !important; }
.ez-dcard .table { margin: 0; border: 1px solid #edf0f6; border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.ez-dcard .table thead th {
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f6 !important;
    background: #f6f8fc !important;
    color: #475069 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 1 !important;
}
.ez-dcard .table td { padding: 12px 14px !important; border-color: #f0f2f7 !important; color: #1f2742; font-size: 13.5px; vertical-align: middle; }
.ez-dcard .table td .text-xs { color: #1f2742 !important; font-size: 13px !important; }
.ez-dcard .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }
.ez-dcard .summary { margin-top: 8px; color: #5b6477; font-size: 12.5px; }
/* dashboard status pills: same soft tint + thin border as the grid status badges */
.ez-pill { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--bd-dot) 45%, transparent); border-radius: 8px; background: var(--bd-bg); color: var(--bd-fg); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ez-pill--dark { --bd-bg: var(--ez-bd-neutral-bg); --bd-fg: var(--ez-bd-neutral-fg); --bd-dot: var(--ez-bd-neutral-dot); }
.ez-pill--green { --bd-bg: var(--ez-bd-success-bg); --bd-fg: var(--ez-bd-success-fg); --bd-dot: var(--ez-bd-success-dot); }
.ez-pill--red { --bd-bg: var(--ez-bd-danger-bg); --bd-fg: var(--ez-bd-danger-fg); --bd-dot: var(--ez-bd-danger-dot); }
.ez-pill--amber { --bd-bg: var(--ez-bd-warning-bg); --bd-fg: var(--ez-bd-warning-fg); --bd-dot: var(--ez-bd-warning-dot); }
.ez-failed.border-danger { border-color: #e8ecf5 !important; }
.ez-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 50% !important; background: #fde2e4 !important; color: #b91c1c !important; font-size: 13px; }
.ez-waybills .badge { padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.ez-waybills .badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
.ez-waybills .badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; }
.ez-waybills .badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; }

/* orders overview: donut with the total in the middle + legend */
.ez-overview__body { display: flex; align-items: center; gap: 24px; }
.ez-overview__chart { position: relative; flex: 0 0 180px; height: 180px; }
.ez-overview__total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ez-overview__total strong { color: #0f1446; font-size: 28px; font-weight: 800; line-height: 1; }
.ez-overview__total span { margin-top: 4px; color: #5b6477; font-size: 12.5px; }
.ez-overview__legend { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }
.ez-overview__legend li { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f2f7; color: #334155; font-size: 14px; }
.ez-overview__legend li:last-child { border-bottom: 0; }
.ez-overview__legend strong { color: #0f1446; font-size: 15px; }
.ez-overview__dot { width: 12px; height: 12px; border-radius: 4px; }
.ez-overview__pct { color: #5b6477; text-align: right; }
@media (max-width: 575.98px) {
    .ez-overview__body { flex-direction: column; align-items: stretch; }
    .ez-overview__chart { flex-basis: 180px; width: 180px; margin: 0 auto; }
    .ez-kpi__meta { white-space: normal; }
}

/* dark theme keeps the cards readable */
html[data-theme="dark"] .ez-kpi,
html[data-theme="dark"] .ez-chartcard,
html[data-theme="dark"] .ez-dcard { background: var(--ez-surface) !important; border-color: var(--ez-border) !important; }
html[data-theme="dark"] .ez-kpi__label,
html[data-theme="dark"] .ez-kpi__value,
html[data-theme="dark"] .ez-chartcard__head h6,
html[data-theme="dark"] .ez-dcard__head h6,
html[data-theme="dark"] .ez-overview__total strong,
html[data-theme="dark"] .ez-overview__legend strong { color: var(--ez-text); }
html[data-theme="dark"] #sidenav-main.ez-sidebar { background: var(--ez-sidebar-bg) !important; }
html[data-theme="dark"] .ez-sidebar .nav-link:not(.active) { color: var(--ez-text) !important; }

/* 14b. One continuous white top bar: the sidebar's logo block matches the bar
   (white, no divider) and both carry the same soft shadow */
#sidenav-main.ez-sidebar { border-right: 0; }
#sidenav-main .ez-sidebar__scroll { border-right: 1px solid #e8ecf5; }
#sidenav-main .ez-sidebar__brand {
    position: relative;
    z-index: 2;
    background: #fff;
    border-bottom: 0;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
}
#navbarBlur.ez-topbar {
    background: #fff !important;
    border-bottom: 0;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .08) !important;
}
html[data-theme="dark"] #sidenav-main .ez-sidebar__brand,
html[data-theme="dark"] #navbarBlur.ez-topbar { background: var(--ez-surface) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .45) !important; }
html[data-theme="dark"] #sidenav-main .ez-sidebar__scroll { border-right-color: var(--ez-border); }

/* 15. Card-header toolbars (scan box, action buttons, page size): one row,
   every control 40px tall and centred, even 8-12px gaps. Matches the
   "row > col > .dropdown.float-lg-end" pattern the list pages share;
   the floats are kept in markup and simply ignored inside flex. */
.ez-body .card-header > .row:has(> [class*="col"] > .float-lg-end, #scanner),
.ez-body .card-header > form > .row:has(> [class*="col"] > .float-lg-end, #scanner) {
    --ez-tb-h: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
}
.ez-body .card-header > .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"],
.ez-body .card-header > form > .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
}
/* the column holding the floated actions takes the rest of the row and
   keeps their right-to-left float order */
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(> .float-lg-end) {
    display: flex;
    flex: 1 1 0;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .dropdown,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .dropdown > div:not(.btn) {
    display: flex;
    align-items: center;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) label {
    margin: 0 !important;
    white-space: nowrap;
    font-size: var(--ez-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ez-text);
}
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) label b { font-weight: inherit; }
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .btn {
    min-height: var(--ez-tb-h);
    height: var(--ez-tb-h);
    margin: 0 !important;
    white-space: nowrap;
}
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) input.form-control,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) select.form-control,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .form-select,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .select2-selection--single {
    height: var(--ez-tb-h) !important;
    min-height: var(--ez-tb-h) !important;
    margin: 0 !important;
}
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .select2-container { min-width: 220px; }
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) input[type="text"].form-control,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) input[type="search"].form-control { min-width: 220px; }
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) select.form-control,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .form-select { width: auto; min-width: 76px; padding-top: 0 !important; padding-bottom: 0 !important; }
/* a field with its own label (e.g. "Uploaded File") sits label-left, like the scan box */
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .form-group,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) [class*="field-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 !important;
}
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) .form-group > .help-block:empty,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) [class*="field-"] > .help-block:empty,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) [class*="field-"] > .invalid-feedback:empty { display: none; }
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) [class*="field-"] > .help-block,
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) [class*="field-"] > .invalid-feedback { flex-basis: 100%; margin: 0; }
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) input[type="file"] {
    height: var(--ez-tb-h);
    min-height: var(--ez-tb-h);
    width: auto;
    max-width: 100%;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ez-border-strong) !important;
    border-radius: var(--ez-radius);
    background: var(--ez-surface) !important;
    color: var(--ez-text);
    font-weight: 500;
    font-size: var(--ez-fs-sm);
}
.ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) input[type="file"]::file-selector-button {
    height: 100%;
    margin: 0 10px 0 0;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid var(--ez-border);
    background: var(--ez-surface-2, #f3f4f6);
    color: var(--ez-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
@media (max-width: 767.98px) {
    .ez-body .card-header > .row:has(> [class*="col"] > .float-lg-end, #scanner),
    .ez-body .card-header > form > .row:has(> [class*="col"] > .float-lg-end, #scanner) { --ez-tb-h: 44px; gap: 10px 12px; }
    /* a field column grows to fill its line next to its label */
    .ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(input, select):not(:has(> .float-lg-end)) { flex: 1 1 180px; }
    .ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(input, select):not(:has(> .float-lg-end)) .form-control { width: 100%; min-width: 0; }
    .ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(> .float-lg-end) { flex: 1 1 100%; justify-content: flex-end; }
    .ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(> .float-lg-end) > .dropdown:has(.btn) { flex: 1 1 calc(50% - 4px); }
    .ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(> .float-lg-end) > .dropdown > div { flex: 1 1 auto; }
    .ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(> .float-lg-end) .btn { width: 100%; white-space: normal; }
    /* page size and its label drop to their own line after the buttons */
    .ez-body .card-header .row:has(> [class*="col"] > .float-lg-end, #scanner) > [class*="col"]:has(> .float-lg-end) > .dropdown:not(:has(.btn)) { order: 99; }
}
/* a lone "Items Per Page" column directly in the card header */
.ez-body .card-header > [class*="col"]:has(> .float-lg-end) {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ez-body .card-header > [class*="col"]:has(> .float-lg-end) > .dropdown { float: none !important; margin: 0 !important; padding: 0 !important; }
.ez-body .card-header > [class*="col"]:has(> .float-lg-end) label { margin: 0 !important; font-size: var(--ez-fs-sm); font-weight: 600; }
.ez-body .card-header > [class*="col"]:has(> .float-lg-end) .form-select { width: auto; min-width: 76px; height: 40px; }
/* search/filter forms: the Search and Reset buttons line up with the
   bottom of the fields beside them instead of a fixed inline margin-top */
.ez-body .row:has(> [class*="col"] > .form-group[style*="margin-top"] > .btn) { align-items: flex-end; }
.ez-body .row > [class*="col"] > .form-group[style*="margin-top"]:has(> .btn) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0 !important;
    margin-bottom: 1rem;
}
.ez-body .row > [class*="col"] > .form-group[style*="margin-top"] > .btn { min-height: 40px; margin: 0 !important; }


/* 16. Order form (orders/create, orders/update): three plain cards
   (customer & delivery, order items, notes + save) on the page
   background; every field is 40px with a left icon box, in an even
   4-column grid. No decorative background. */
.ez-body .ez-ic-user { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-pin { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-truck { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-building { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-3v19M12 21h8V9l-8-3M8 9h.01M8 13h.01M8 17h.01M16 13h.01M16 17h.01M2 21h20'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-map { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-calendar { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-hash { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-receipt { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-weight { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l2 13H4zM9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-cash { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-return { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-card { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-coins { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-wallet { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h15a1 1 0 0 1 1 1v11H5a1 1 0 0 1-1-1V6a2 2 0 0 1 2-2h11v3'/%3E%3Ccircle cx='16' cy='13' r='1.3'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-file { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7zM14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-megaphone { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v3h3l7 4V7L6 11zM16 9a4 4 0 0 1 0 6M6 14l1 5h3'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-note { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v16H5zM9 9h6M9 13h6M9 17h3'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-user { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-pin { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-truck { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-building { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-3v19M12 21h8V9l-8-3M8 9h.01M8 13h.01M8 17h.01M16 13h.01M16 17h.01M2 21h20'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-map { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-calendar { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-hash { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-receipt { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-weight { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l2 13H4zM9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-cash { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-return { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-card { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-coins { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-wallet { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h15a1 1 0 0 1 1 1v11H5a1 1 0 0 1-1-1V6a2 2 0 0 1 2-2h11v3'/%3E%3Ccircle cx='16' cy='13' r='1.3'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-file { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7zM14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-megaphone { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v3h3l7 4V7L6 11zM16 9a4 4 0 0 1 0 6M6 14l1 5h3'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-note { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v16H5zM9 9h6M9 13h6M9 17h3'/%3E%3C/svg%3E"); }
.ez-body .ez-oform { background: transparent; border: 0; box-shadow: none; }
.ez-body .ez-oform > .card-body { padding: 0 !important; }
.ez-body .ez-oform .panel,
.ez-body .ez-oform .panel-body { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ez-body .ez-osec {
    margin: 0 0 16px;
    padding: 20px 22px 4px;
    background: var(--ez-surface);
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-xl, 16px);
    box-shadow: var(--ez-shadow-sm);
}
.ez-body .ez-osec__head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.ez-body .ez-osec__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
}
.ez-body .ez-osec__icon .material-icons { font-size: 26px; line-height: 1; }
.ez-body .ez-osec__icon--blue { background: #e8f0ff; color: #2563eb; }
.ez-body .ez-osec__icon--pink { background: #ffe8ef; color: #e11d48; }
.ez-body .ez-osec__icon--green { background: #dcfce7; color: #16a34a; }
.ez-body .ez-osec__title { margin: 0; }
.ez-body .ez-osec__sub { margin: 2px 0 0; }

/* field grid */
.ez-body .ez-ogrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 0 20px;
    margin: 0;
}
.ez-body .ez-ogrid > [class*="col"] { width: auto; max-width: none; margin: 0; padding: 0; }
.ez-body .ez-ogrid > .d-none { display: none !important; }
.ez-body .ez-ogrid > .ez-span-2 { grid-column: span 2; }
.ez-body .ez-ogrid > .ez-span-end { grid-column: 1 / -1; }
/* with the extra Recipient Phone field the last row has three free cells */
.ez-body .ez-ogrid:has(.field-orders-recipient_phone) > .ez-span-end { grid-column: span 3; }
.ez-body .ez-ogrid > [class*="col"] > [class*="field-"],
.ez-body .ez-ogrid > [class*="col"] > .form-group { margin-bottom: 18px; }
.ez-body .ez-ogrid > .ez-of--phone { margin-bottom: 18px; }
.ez-body .ez-ogrid label,
.ez-body .ez-oentry label,
.ez-body .ez-obar label {
    display: block;
    margin: 0 0 6px;
    font-size: var(--ez-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ez-text);
}
.ez-body .ez-ogrid .required > label::after { content: " *"; color: var(--ez-danger); }

/* left icon box inside inputs, plain selects and Select2 boxes */
.ez-body .ez-of input.form-control:not([type="hidden"]),
.ez-body .ez-of .select2-selection--single {
    height: 40px;
    min-height: 40px;
    padding-left: 54px !important;
    background-image: var(--ez-ic), linear-gradient(var(--ez-border), var(--ez-border)), linear-gradient(var(--ez-surface-2), var(--ez-surface-2)) !important;
    background-repeat: no-repeat !important;
    background-position: 13px center, 42px 0, 0 0 !important;
    background-size: 17px 17px, 1px 100%, 42px 100% !important;
}
.ez-body .ez-of select.form-control,
.ez-body .ez-of .form-select {
    height: 40px;
    padding-left: 54px !important;
    background-image: var(--ez-ic), linear-gradient(var(--ez-border), var(--ez-border)), linear-gradient(var(--ez-surface-2), var(--ez-surface-2)), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: 13px center, 42px 0, 0 0, right 0.75rem center !important;
    background-size: 17px 17px, 1px 100%, 42px 100%, 14px 10px !important;
}
.ez-body .ez-of .select2-selection--single {
    padding-right: 2.25rem !important;
    background-image: var(--ez-ic), linear-gradient(var(--ez-border), var(--ez-border)), linear-gradient(var(--ez-surface-2), var(--ez-surface-2)), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: 13px center, 42px 0, 0 0, right 0.75rem center !important;
    background-size: 17px 17px, 1px 100%, 42px 100%, 14px 10px !important;
}
.ez-body .ez-of .select2-selection--single .select2-selection__rendered { padding-left: 0 !important; line-height: 38px !important; }
.ez-body .ez-of .select2-container { width: 100% !important; }

/* phone fields: the "0" prefix is the icon box */
.ez-body .ez-of--phone .input-tag { border-collapse: collapse; }
.ez-body .ez-of--phone .input-tag td { padding: 0; vertical-align: top; }
.ez-body .ez-of--phone .input-tag span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    color: var(--ez-text-muted);
    font-weight: 600;
    background: var(--ez-surface-2);
    border: 1px solid var(--ez-border-strong) !important;
    border-right: 0 !important;
    border-radius: var(--ez-radius) 0 0 var(--ez-radius);
}
.ez-body .ez-of--phone .input-tag .form-control { height: 40px; border-color: var(--ez-border-strong) !important; }

/* order items: entry row reads as a table header + row */
.ez-body .ez-osec--items { padding-bottom: 20px; }
.ez-body .ez-oentry {
    align-items: flex-end;
    margin: 0;
    padding: 0 6px 14px;
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-lg, 12px);
    background: linear-gradient(var(--ez-surface-2), var(--ez-surface-2)) top / 100% 42px no-repeat;
}
.ez-body .ez-oentry > [class*="col"] { padding: 0 8px; }
.ez-body .ez-oentry label { display: flex; align-items: center; height: 42px; margin: 0 0 12px; color: var(--ez-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-body .ez-oentry [class*="field-"],
.ez-body .ez-oentry .form-group { margin-bottom: 0 !important; }
.ez-body .ez-oentry .form-control,
.ez-body .ez-oentry .form-select,
.ez-body .ez-oentry .select2-selection--single { height: 40px; min-height: 40px; }
.ez-body .ez-oentry .form-group.float-lg-end { float: none !important; display: flex; justify-content: flex-end; margin: 0 !important; }
.ez-body .ez-oentry__add {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #f43f5e, #e11d2a) !important;
    border: 0 !important;
    border-radius: var(--ez-radius) !important;
    box-shadow: 0 6px 14px rgba(225, 29, 42, .25) !important;
}
.ez-body .ez-oentry__add .material-icons { font-size: 22px; }
.ez-body .ez-oentry > .help-block, .ez-body .ez-oentry > [class*="field-orderitems-order_code"] { display: none; }
/* added lines */
.ez-body #items-list > hr:first-child { display: none; }
.ez-body .ez-oline { align-items: center; margin: 0; padding: 12px 6px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-oline > [class*="col"] { padding: 0 8px; }
.ez-body .ez-oline label { font-size: var(--ez-fs-sm); color: var(--ez-text); }
.ez-body .ez-oline + hr { display: none; }
.ez-body .ez-oline a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ez-radius); color: var(--ez-danger); background: var(--ez-danger-soft); }
/* totals box */
.ez-body .ez-ototals {
    width: 100%;
    max-width: 440px;
    margin: 18px 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-lg, 12px);
}
.ez-body .ez-ototals > .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 8px 18px; }
.ez-body .ez-ototals > .row:first-child { padding-top: 14px; }
.ez-body .ez-ototals > .row > [class*="col"] { width: auto; flex: 0 1 auto; padding: 0; }
.ez-body .ez-ototals > .row > .col-sm-1 { display: none; }
.ez-body .ez-ototals .float-lg-end { float: none !important; }
.ez-body .ez-ototals label { font-size: var(--ez-fs-sm); color: var(--ez-text-muted); }
.ez-body .ez-ototals label strong { color: var(--ez-text); }
.ez-body .ez-ototals > hr { display: none; }
.ez-body .ez-ototals > hr + .row { margin-top: 8px !important; padding: 14px 18px; background: #eef3ff; }
.ez-body .ez-ototals > hr + .row label { color: var(--ez-heading); }
.ez-body .ez-ototals > hr + .row > .col-sm-2 label { color: #2563eb; font-size: 1.35rem !important; }
html[data-theme="dark"] .ez-body .ez-ototals > hr + .row { background: rgba(37, 99, 235, .14); }
.ez-body #items-list > hr:last-child { display: none; }

/* bottom bar: notes + save */
.ez-body .ez-obar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 16px 22px; }
.ez-body .ez-obar > .ez-osec__icon { align-self: center; }
.ez-body .ez-obar__field { flex: 1 1 320px; min-width: 0; }
.ez-body .ez-obar__field [class*="field-"] { margin: 0 !important; }
.ez-body .ez-obar__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.ez-body .ez-obar__actions .form-group { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ez-body .ez-obar__actions p { margin: 0; font-size: var(--ez-fs-sm); }
.ez-body .ez-save {
    min-height: 44px;
    padding: 0 22px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #f43f5e, #e11d2a) !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(225, 29, 42, .25) !important;
}
.ez-body .ez-save:disabled { opacity: .55; box-shadow: none !important; }
.ez-body .ez-save .material-icons { font-size: 20px; }

@media (max-width: 1199.98px) {
    .ez-body .ez-ogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ez-body .ez-ogrid:has(.field-orders-recipient_phone) > .ez-span-end { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .ez-body .ez-osec { padding: 16px 14px 2px; border-radius: var(--ez-radius-lg, 12px); }
    .ez-body .ez-ogrid { grid-template-columns: minmax(0, 1fr); }
    .ez-body .ez-ogrid > .ez-span-2,
    .ez-body .ez-ogrid > .ez-span-end { grid-column: auto; }
    .ez-body .ez-of input.form-control:not([type="hidden"]),
    .ez-body .ez-of .form-select, .ez-body .ez-of select.form-control,
    .ez-body .ez-of--phone .input-tag span, .ez-body .ez-of--phone .input-tag .form-control,
    .ez-body .ez-of .select2-selection--single { height: 44px; min-height: 44px; }
    .ez-body .ez-oentry { background: none; padding: 4px 4px 14px; }
    .ez-body .ez-oentry label { height: auto; margin: 12px 0 6px; color: var(--ez-text); }
    .ez-body .ez-oentry .form-group.float-lg-end { justify-content: stretch; margin-top: 14px !important; }
    .ez-body .ez-oentry__add { width: 100%; height: 44px; }
    .ez-body .ez-ototals { max-width: none; }
    .ez-body .ez-obar { padding: 14px; }
    .ez-body .ez-obar__actions, .ez-body .ez-obar__actions .form-group, .ez-body .ez-save { width: 100%; }
}

/* 17. Sidebar: the open group that holds the current page keeps a red icon
   on its pink tint (the white active-page icon rule was hiding it) */
#sidenav-main .nav-link[data-bs-toggle="dropdown"].active > div,
#sidenav-main .nav-link[data-bs-toggle="dropdown"].active .material-icons,
#sidenav-main .nav-link[data-bs-toggle="dropdown"].bg-gradient-primary > div,
#sidenav-main .nav-link[data-bs-toggle="dropdown"].bg-gradient-primary .material-icons { color: var(--ez-primary) !important; opacity: 1 !important; }
:root[data-theme="dark"] #sidenav-main .nav-link[data-bs-toggle="dropdown"].active > div,
:root[data-theme="dark"] #sidenav-main .nav-link[data-bs-toggle="dropdown"].active .material-icons,
:root[data-theme="dark"] #sidenav-main .nav-link[data-bs-toggle="dropdown"].bg-gradient-primary > div,
:root[data-theme="dark"] #sidenav-main .nav-link[data-bs-toggle="dropdown"].bg-gradient-primary .material-icons { color: #fca5a5 !important; }

/* 18. Order form side column: Waybill Remaining card and the customer box
   that loads when a known phone number is typed */
.ez-body .ez-of .select2-selection__arrow { display: none !important; }
.ez-body .ez-side-placeholder { display: none; }

.ez-body .ez-wb {
    overflow: hidden;
    border: 1px solid var(--ez-border) !important;
    border-radius: 16px;
    box-shadow: var(--ez-shadow-sm);
}
.ez-body .ez-wb > .card-body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 16px 20px !important;
    text-align: left !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.ez-body .ez-wb > .card-body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #16a34a;
}
.ez-body .ez-wb.border-danger > .card-body::before { background: var(--ez-danger); }
.ez-body .ez-wb:not(.border-danger) > .card-body { background: linear-gradient(90deg, #f0fdf4, #f7fef9); }
.ez-body .ez-wb .ez-wb__icon { width: 38px; height: 38px; }
html[data-theme="dark"] .ez-body .ez-wb:not(.border-danger) > .card-body { background: rgba(22, 163, 74, .08); }
.ez-body .ez-wb__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #16a34a;
    background: #dcfce7;
}
.ez-body .ez-wb.border-danger .ez-wb__icon { color: var(--ez-danger); background: var(--ez-danger-soft); }
.ez-body .ez-wb__icon .material-icons { font-size: 24px; }
.ez-body .ez-wb__text { min-width: 0; }
.ez-body .ez-wb small { margin: 0 !important; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ez-text-muted); }
.ez-body .ez-wb #waybill-remaining { display: block; font-size: 1.6rem !important; font-weight: 800 !important; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ez-body .ez-wb #waybill-remaining.text-danger { font-size: 1rem !important; }

/* Customer panel (views/orders/_customer.php, loaded by AJAX into #selcted-customer
   on Create Order): separate cards per user's mockup. Details card, Our / All
   Orders tiles, trend chart from the same counts, then Add this Customer. */
.ez-body .ez-cust { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.ez-body .ez-cust__card { gap: 0 !important; overflow: hidden; margin: 0 !important; border: 1px solid var(--ez-border) !important; border-radius: 14px; box-shadow: var(--ez-shadow-sm); }
.ez-body .ez-cust__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(120deg, #fff1f2 0%, #fdf2f8 55%, #f5f3ff 100%); }
.ez-body .ez-cust__avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 700; background: linear-gradient(135deg, #f43f5e, #e11d2a); }
.ez-body .ez-cust__head small { display: inline-block; margin-bottom: 2px; padding: 1px 6px; border-radius: 5px; background: rgba(100, 116, 139, .12); color: #475569; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ez-body .ez-cust__head strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ez-heading); }
html[data-theme="dark"] .ez-body .ez-cust__head { background: linear-gradient(120deg, rgba(244, 63, 94, .14), rgba(124, 58, 237, .12)); }
/* details: name and address full width, the two phones side by side */
.ez-body .ez-cust__details { margin: 0 !important; border: 0 !important; border-radius: 0; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px 12px; }
.ez-body .ez-cust__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ez-body .ez-cust__row:nth-child(1), .ez-body .ez-cust__row:nth-child(4) { grid-column: 1 / -1; }
.ez-body .ez-cust__row > div { min-width: 0; line-height: 1.2; }
.ez-body .ez-cust__row small { display: block; font-size: 11px; color: var(--ez-text-muted); }
.ez-body .ez-cust__row strong { display: block; font-size: 13px; font-weight: 700; color: var(--ez-heading); overflow-wrap: anywhere; }
.ez-body .ez-cust__rowicon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; color: #64748b; }
.ez-body .ez-cust__rowicon::before { font-family: "Material Icons Round", "Material Icons"; font-size: 16px; font-feature-settings: "liga"; line-height: 1; content: "person"; }
.ez-body .ez-cust__row:nth-child(2) .ez-cust__rowicon { background: #eff6ff; color: #2563eb; }
.ez-body .ez-cust__row:nth-child(2) .ez-cust__rowicon::before,
.ez-body .ez-cust__row:nth-child(3) .ez-cust__rowicon::before { content: "phone_in_talk"; }
.ez-body .ez-cust__row:nth-child(4) .ez-cust__rowicon { background: #f5f3ff; color: #7c3aed; }
.ez-body .ez-cust__row:nth-child(4) .ez-cust__rowicon::before { content: "location_on"; }

/* one card: Our Orders, All Orders, trend chart */
.ez-body .ez-cust__stat { padding: 10px 12px 12px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-cust__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 6px !important; padding: 0; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ez-heading); }
.ez-body .ez-cust__title:has(.ez-cust__view) { flex-wrap: nowrap; }
.ez-body .ez-cust__title:has(.ez-cust__view) .ez-cust__ttext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-body .ez-cust__tiles + .ez-cust__title { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-cust__ttext { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-cust__view { float: none !important; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #2563eb !important; background: #eef3ff; text-decoration: none; }
.ez-body .ez-cust__view .material-icons { font-size: 15px; }
html[data-theme="dark"] .ez-body .ez-cust__view { background: rgba(37, 99, 235, .18); color: #93b4ff !important; }
.ez-body .ez-cust__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.ez-body .ez-cust__tile { min-width: 0; padding: 5px 4px; border-radius: 8px; text-align: center; line-height: 1.15; }
.ez-body .ez-cust__tile b { display: block; font-size: 15px; font-weight: 800; }
.ez-body .ez-cust__tile small { display: block; overflow: hidden; font-size: 10px; color: var(--ez-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.ez-body .ez-cust__tile--total { background: #f1f5f9; color: var(--ez-heading); }
.ez-body .ez-cust__tile--new { background: #eff6ff; color: #2563eb; }
.ez-body .ez-cust__tile--delivered { background: #f0fdf4; color: #16a34a; }
.ez-body .ez-cust__tile--going { background: #fff7ed; color: #ea580c; }
.ez-body .ez-cust__tile--return { background: #fee2e2; color: #dc2626; box-shadow: inset 0 0 0 1px #fca5a5; }
.ez-body .ez-cust__tile--return small { color: #b91c1c; font-weight: 600; }
html[data-theme="dark"] .ez-body .ez-cust__tile { background: rgba(148, 163, 184, .12); }
html[data-theme="dark"] .ez-body .ez-cust__tile--return { background: rgba(220, 38, 38, .18); }
/* short grouped bars, heights relative to the largest count */
.ez-body .ez-cust__chart { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ez-body .ez-cust__bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 58px; padding-top: 14px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-cust__bar { position: relative; flex: 0 1 20px; height: max(var(--h), 3px); border-radius: 4px 4px 0 0; }
.ez-body .ez-cust__bar span { position: absolute; bottom: 100%; left: 50%; font-size: 10.5px; font-weight: 700; line-height: 1.3; color: var(--ez-heading); transform: translateX(-50%); }
.ez-body .ez-cust__glabel { padding-top: 3px; font-size: 11px; font-weight: 600; color: var(--ez-text-muted); text-align: center; }
.ez-body .ez-cust__bar--new, .ez-body .ez-cust__key--new::before { background: #3b82f6; }
.ez-body .ez-cust__bar--delivered, .ez-body .ez-cust__key--delivered::before { background: #22c55e; }
.ez-body .ez-cust__bar--going, .ez-body .ez-cust__key--going::before { background: #fb923c; }
.ez-body .ez-cust__bar--return, .ez-body .ez-cust__key--return::before { background: #dc2626; }
.ez-body .ez-cust__legend { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; }
.ez-body .ez-cust__key { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--ez-text-muted); }
.ez-body .ez-cust__key::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }

.ez-body .ez-cust__foot { padding: 12px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-cust__blocked { margin: 0 !important; min-height: 42px; border-radius: 12px !important; }
.ez-body .ez-cust__add { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; margin: 0 !important; white-space: normal; }
.ez-body .ez-cust__add .material-icons { font-size: 18px; }
/* narrow side column (1366px with the sidebar open): tiles 3 + 2 */
@container (max-width: 300px) {
    .ez-body .ez-cust__tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ez-body .ez-cust__tile { grid-column: span 2; }
    .ez-body .ez-cust__tile:nth-child(n+4) { grid-column: span 3; }
    .ez-body .ez-cust__details { grid-template-columns: 1fr; }
    .ez-body .ez-cust__row { grid-column: 1 / -1; }
}
html[data-theme="dark"] .ez-body .ez-wb__icon { background: rgba(22, 163, 74, .18); }

/* 19. Brand accent line along the very top of the app chrome (logo red to
   pink to orange). Fixed, 3px, above the top bar and the sidebar's logo
   block; takes no layout space and ignores pointer events. */
body.ez-body:has(#navbarBlur)::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1060;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #e11d2a 0%, #ec4899 55%, #f97316 100%);
}
html[data-theme="dark"] body.ez-body:has(#navbarBlur)::before { opacity: .9; }

/* 20. Notification bell: the count sits on the bell's top-right corner */
#navbar .notificationTop,
.ez-topbar .notificationTop {
    position: relative !important;
    width: 42px;
    min-width: 42px !important;
    height: 42px;
    padding: 0 !important;
}
#navbar .notificationTop > .fa,
.ez-topbar .notificationTop > .fa { font-size: 22px !important; line-height: 1; }
#navbar .notificationTop > .badge,
.ez-topbar .notificationTop > .badge {
    position: absolute !important;
    top: 3px !important;
    right: 1px !important;
    left: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 700;
    line-height: 1 !important;
    color: #fff !important;
    background: #ef4444 !important;
    box-shadow: 0 0 0 2px var(--ez-surface) !important;
    pointer-events: none;
}

/* 21. Compact view for data grids (toggle added by modern.js, remembered per
   browser). Tighter cells, smaller type, slim filters and wrapping text so
   wide grids fit on a desktop screen; phones keep sideways scrolling. */
.ez-body .ez-compact-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    height: 40px;
    margin: 0 !important;
    width: 40px;
    justify-content: center;
    padding: 0 !important;
    white-space: nowrap;
    font-size: var(--ez-fs-sm) !important;
    font-weight: 600;
    color: var(--ez-text) !important;
    background: var(--ez-surface) !important;
    border: 1px solid var(--ez-border-strong) !important;
    border-radius: var(--ez-radius) !important;
}
.ez-body .ez-compact-toggle .material-icons { font-size: 20px; color: var(--ez-text-muted); }
.ez-body .ez-compact-toggle:hover { background: var(--ez-surface-2) !important; }
.ez-body .ez-compact-toggle[aria-pressed="true"] {
    color: #b91c1c !important;
    background: #fff1f2 !important;
    border-color: #fca5a5 !important;
}
.ez-body .ez-compact-toggle[aria-pressed="true"] .material-icons { color: #e11d2a; }
html[data-theme="dark"] .ez-body .ez-compact-toggle[aria-pressed="true"] { color: #fca5a5 !important; background: rgba(225, 29, 42, .16) !important; border-color: rgba(252, 165, 165, .4) !important; }
.ez-body .ez-compact-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
@media (max-width: 767.98px) { .ez-body .ez-compact-toggle { width: 44px; min-height: 44px; height: 44px; } }
.ez-body .card-header .ez-compact-slot { display: flex; align-items: center; }

html.ez-grid-compact .ez-content table.table > thead > tr > th {
    padding: 7px 6px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal !important;
    line-height: 1.25;
}
html.ez-grid-compact .ez-content table.table > tbody > tr > td {
    padding: 6px 6px !important;
}
html.ez-grid-compact .ez-content table.table > thead > tr.filters > td,
html.ez-grid-compact .ez-content table.table tr.filters > td { padding: 5px 4px !important; }
html.ez-grid-compact .ez-content table.table .filters .form-control,
html.ez-grid-compact .ez-content table.table .filters select,
html.ez-grid-compact .ez-content table.table .filters .select2-selection {
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px;
    padding: 2px 6px !important;
    font-size: 12px !important;
}
html.ez-grid-compact .ez-content table.table .filters select.form-control { padding-right: 1.4rem !important; background-position: right 0.35rem center !important; }
html.ez-grid-compact .ez-content table.table .filters .input-group { flex-wrap: nowrap; min-width: 0; }
html.ez-grid-compact .ez-content table.table .filters .input-group > * { min-height: 30px !important; height: 30px; padding-top: 0 !important; padding-bottom: 0 !important; }
html.ez-grid-compact .ez-content table.table .badge { padding: .25em .55em; font-size: 11px; }
html.ez-grid-compact .ez-content table.table td .btn,
html.ez-grid-compact .ez-content table.table td a[title],
html.ez-grid-compact .ez-content table.table td a[aria-label] { min-width: 28px; min-height: 28px; }
@media (min-width: 768px) {
    /* let long values (addresses, waybill numbers, inline widths) wrap so
       the table can shrink to the card instead of scrolling */
    html.ez-grid-compact .ez-content table.table { width: 100% !important; min-width: 0 !important; }
    html.ez-grid-compact .ez-content table.table > thead > tr > th,
    html.ez-grid-compact .ez-content table.table > tbody > tr > td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
    /* cells the views clip to one line (nowrap + ellipsis) wrap instead, so
       the full name/address shows without widening the column */
    html.ez-grid-compact .ez-content table.table > thead > tr > th[style*="nowrap"],
    html.ez-grid-compact .ez-content table.table > tbody > tr > td[style*="nowrap"] { white-space: normal !important; }
    /* headers and short tokens wrap only between words, never mid-word */
    html.ez-grid-compact .ez-content table.table > thead > tr > th,
    html.ez-grid-compact .ez-content table.table .not-set { overflow-wrap: normal !important; }
    /* width 0 + min-width 100%: filters fill their column but never set its width */
    html.ez-grid-compact .ez-content table.table .filters .form-control,
    html.ez-grid-compact .ez-content table.table .filters select,
    html.ez-grid-compact .ez-content table.table .filters .select2-container { width: 0 !important; min-width: 100% !important; }
    html.ez-grid-compact .ez-content table.table .filters .input-group { width: 0; min-width: 100%; }
    html.ez-grid-compact .ez-content table.table > tbody > tr > td .btn,
    html.ez-grid-compact .ez-content table.table > tbody > tr > td .badge { white-space: normal !important; overflow-wrap: normal !important; text-align: left; }
    html.ez-grid-compact .ez-content table.table > tbody > tr > td .btn * { white-space: normal !important; }
    html.ez-grid-compact .ez-content table.table > tbody > tr > td .btn.m-2 { margin: 2px !important; }
}
/* very wide grids (20+ columns) on ~1366px laptops: trim side padding a little more */
@media (min-width: 768px) and (max-width: 1439.98px) {
    html.ez-grid-compact .ez-content table.table > thead > tr > th,
    html.ez-grid-compact .ez-content table.table > tbody > tr > td { padding-left: 4px !important; padding-right: 4px !important; }
    html.ez-grid-compact .ez-content table.table > thead > tr > th { font-size: 10.5px !important; }
}

/* 22. Grid pages (user mockup, 2026-10-07): a header card with a tinted icon
   tile, title and subtitle beside the toolbar; the grid in its own card with
   a soft header row, light row striping, round tinted action icons, and the
   summary + pager on one footer line. Hooks are added by modern.js
   (decorateGrids): .ez-gcard, .ez-ghead, .ez-gtable, .ez-gwrap, .ez-actions,
   .ez-act--*, .ez-status-pill, .ez-nowrap. */
.ez-body .card.ez-gcard {
    overflow: visible;
    background: var(--ez-surface) !important;
    border: 1px solid var(--ez-border) !important;
    border-radius: var(--ez-radius-xl) !important;
    box-shadow: var(--ez-shadow-sm);
}
/* header and grid share one card; a hairline divides them */
.ez-body .card.ez-gcard > .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin: 0 !important;
    padding: 18px 22px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ez-border) !important;
    border-radius: var(--ez-radius-xl) var(--ez-radius-xl) 0 0 !important;
    box-shadow: none !important;
}
.ez-body .card.ez-gcard > .card-header > *:not(.ez-ghead) { flex: 1 1 460px; min-width: 0; margin: 0 !important; }
.ez-body .card.ez-gcard > .card-header > hr { display: none; }
.ez-body .card.ez-gcard > .card-body {
    padding: 18px 20px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.ez-body .card.ez-gcard .ez-col-empty { display: none !important; }

.ez-body .ez-ghead { display: flex; flex: 1 1 280px; align-items: center; gap: 16px; min-width: 0; }
/* the title block keeps its natural width; the toolbar takes the rest of the line */
.ez-body .card.ez-gcard > .card-header.ez-gheader { flex-wrap: nowrap; }
.ez-body .card.ez-gcard > .card-header.ez-gheader > .ez-ghead { flex: 0 0 auto; max-width: 42%; }
.ez-body .card.ez-gcard > .card-header.ez-gheader > *:not(.ez-ghead) { flex: 1 1 0; }
.ez-body .ez-ghead__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
    color: #e11d2a;
}
.ez-body .ez-ghead__icon .material-icons { font-size: 26px; color: inherit; }
.ez-body .ez-ghead__text { min-width: 0; }
.ez-body .ez-ghead__title {
    margin: 0;
}
.ez-body .ez-ghead__sub { margin: 4px 0 0; }

/* table: rounded, soft header band, two-line labels, light striping */
.ez-body .ez-content table.ez-gtable {
    border: 0 !important;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
}
.ez-body .ez-content table.ez-gtable > thead > tr:first-child > th {
    background: var(--ez-surface, #fff) !important;
    color: var(--ez-heading) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: normal;
    border-bottom: 1px solid #eef0f4 !important;
}
.ez-body .ez-content table.ez-gtable > thead > tr:first-child > th:first-child { border-top-left-radius: 12px; }
.ez-body .ez-content table.ez-gtable > thead > tr:first-child > th:last-child { border-top-right-radius: 12px; }
.ez-body .ez-content table.ez-gtable > thead > tr:first-child > th a { color: inherit !important; }
.ez-body .ez-content table.ez-gtable > thead > tr.filters > td {
    background: var(--ez-surface, #fff) !important;
    border-bottom: 1px solid var(--ez-border) !important;
}
.ez-body .ez-content table.ez-gtable > tbody > tr > td { border-bottom: 1px solid #eef0f4 !important; color: var(--ez-heading); }
.ez-body .ez-content table.ez-gtable > tbody > tr > * { --bs-table-accent-bg: transparent; }
.ez-body .ez-content table.ez-gtable > tbody > tr:hover > td { background: #f3f5fa; }
.ez-body .ez-content table.ez-gtable > tbody > tr:last-child > td { border-bottom: 0 !important; }
.ez-body .ez-content table.ez-gtable td.ez-nowrap,
html.ez-grid-compact .ez-content table.ez-gtable > tbody > tr > td.ez-nowrap--short,
html.ez-grid-compact .ez-content table.ez-gtable:not(.ez-gtable--tighter) > tbody > tr > td.ez-nowrap { white-space: nowrap !important; overflow-wrap: normal !important; }
.ez-body .ez-content table.ez-gtable td.ez-numwords,
html.ez-grid-compact .ez-content table.ez-gtable > tbody > tr > td.ez-numwords { overflow-wrap: normal !important; }
html.ez-grid-compact .ez-content table.ez-gtable:not(.ez-gtable--tighter) > tbody > tr > td.ez-text { min-width: 5.5em !important; }
html.ez-grid-compact .ez-content table.ez-gtable:not(.ez-gtable--tighter) > tbody > tr > td.ez-text-long { min-width: 7.5em !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tight:not(.ez-gtable--tighter) > tbody > tr > td.ez-text { min-width: 4.5em !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tight:not(.ez-gtable--tighter) > tbody > tr > td.ez-text-long { min-width: 6em !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tighter > tbody > tr > td .not-set { white-space: normal !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tighter > tbody > tr > td.ez-nowrap:not(.ez-nowrap--short) { white-space: normal !important; overflow-wrap: anywhere !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tight .ez-tok { white-space: normal; }
.ez-body .ez-gwrap { overflow-x: auto; }
/* a header with search fields or a scan box: title on its own line, each
   existing toolbar row full width beneath it, as before */
/* step 1: slimmer buttons and scan box */
.ez-body .card-header.ez-gh--s1 .btn { padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important; }
.ez-body .card-header.ez-gh--s1 .row { gap: 8px 10px !important; }
.ez-body .card-header.ez-gh--s1 > .row > [class*="col"] { gap: 6px !important; }
.ez-body .card-header.ez-gh--s1 input[type="text"].form-control,
.ez-body .card-header.ez-gh--s1 input[type="search"].form-control { width: 170px !important; min-width: 150px !important; }
.ez-body .card-header.ez-gh--s1 .ez-ghead { gap: 12px; }
.ez-body .card-header.ez-gh--s1 .ez-ghead__text { max-width: 210px; }
.ez-body .card-header.ez-gh--s1 .ez-ghead__icon { width: 48px; height: 48px; border-radius: 12px; }
.ez-body .card-header.ez-gh--s1 .ez-ghead__icon .material-icons { font-size: 26px; }
/* step 2 (long labels first, then all): buttons with an icon show the icon
   only; the label stays as tooltip and aria-label */
.ez-body .card-header.ez-gh--s1b .btn.ez-btn--long:has(> .ez-btn-label),
.ez-body .card-header.ez-gh--s2 .btn:has(> .ez-btn-label) { width: 40px; padding: 0 !important; justify-content: center; }
.ez-body .card-header.ez-gh--s1b .btn.ez-btn--long > .ez-btn-label,
.ez-body .card-header.ez-gh--s2 .btn > .ez-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ez-body .card-header.ez-gh--s1b .btn.ez-btn--long:has(> .ez-btn-label) > i,
.ez-body .card-header.ez-gh--s2 .btn:has(> .ez-btn-label) > i { margin: 0 !important; }
/* step 3: still too wide (search forms with labels): title on its own line, toolbar full width below */
.ez-body .card.ez-gcard > .card-header.ez-gh--wrap { flex-wrap: wrap; }
.ez-body .card.ez-gcard > .card-header.ez-gh--wrap > .ez-ghead { max-width: none; }
.ez-body .card.ez-gcard > .card-header.ez-gh--wrap > *:not(.ez-ghead) { flex: 1 1 100%; }
@media (max-width: 767.98px) {
    .ez-body .card.ez-gcard > .card-header.ez-gheader { flex-wrap: wrap; }
    .ez-body .card.ez-gcard > .card-header.ez-gheader > .ez-ghead { max-width: none; flex: 1 1 100%; }
    .ez-body .card.ez-gcard > .card-header.ez-gheader > *:not(.ez-ghead) { flex: 1 1 100%; }
}
.ez-body .ez-content table.ez-gtable .ez-tok { white-space: nowrap; }

/* status pills: rounded with a leading dot */
.ez-body .ez-content table.ez-gtable .ez-status-pill {
    display: inline-block !important;
    min-height: 28px;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    box-shadow: none !important;
}
.ez-body .ez-content table.ez-gtable .ez-status-pill::before {
    content: "\25CF\00a0";
    font-size: .8em;
    line-height: 1;
    color: currentColor;
}
.ez-body .ez-content table.ez-gtable .ez-status-pill.btn-dark::before { color: #22c55e; }
.ez-body .ez-content table.ez-gtable .ez-status-pill small { font-weight: 500; opacity: .85; }
.ez-body .ez-content table.ez-gtable .badge.bg-secondary { background: #eef0f6 !important; color: #334155 !important; }
.ez-body .ez-content table.ez-gtable .badge.bg-gradient-info { background: #e0e7ff !important; color: #3730a3 !important; border-radius: 8px; }
/* Order Type badge under the date (New Orders Date column) */
.ez-body .ez-content table .ez-otype { margin-top: 4px; }

/* action icons: round tinted buttons kept on one line */
.ez-body .ez-content table.ez-gtable td.ez-actions,
html.ez-grid-compact .ez-content table.ez-gtable > tbody > tr > td.ez-actions { white-space: nowrap !important; overflow-wrap: normal !important; }
.ez-body .ez-content table.ez-gtable a.ez-act {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0 2px !important;
    font-size: 14px;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color var(--ez-dur) var(--ez-ease), transform var(--ez-dur) var(--ez-ease);
}
.ez-body .ez-content table.ez-gtable a.ez-act:hover { transform: translateY(-1px); }
.ez-body .ez-content table.ez-gtable a.ez-act--delete { background: #fee2e2; color: #dc2626 !important; }
.ez-body .ez-content table.ez-gtable a.ez-act--other { background: var(--ez-surface-3); color: var(--ez-text) !important; }
.ez-body .ez-content table.ez-gtable a.ez-act--delete:hover { background: #fecaca; }
html.ez-grid-compact .ez-content table.ez-gtable a.ez-act { width: 28px; min-width: 28px; height: 28px; min-height: 28px; margin: 0 1px !important; font-size: 13px; }

/* footer: "Showing x of y" on the left, pager centred */
.ez-body .ez-gwrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px 12px;
}
.ez-body .ez-gwrap > * { grid-column: 1 / -1; min-width: 0; }
.ez-body .ez-gwrap > .summary { order: 2; grid-column: 1; margin: 0 !important; }
.ez-body .ez-gwrap > .pagination,
.ez-body .ez-gwrap > nav { order: 3; grid-column: 2; margin: 0 !important; }
.ez-body .ez-gwrap .pagination { justify-content: center; }
.ez-body .ez-gwrap .pagination > li > a,
.ez-body .ez-gwrap .pagination > li > span,
.ez-body .ez-gwrap .pagination .page-link { min-width: 38px; height: 38px !important; border-radius: 10px !important; }
.ez-body .ez-gwrap .pagination > li.active > a,
.ez-body .ez-gwrap .pagination > li.active > span,
.ez-body .ez-gwrap .pagination .page-item.active .page-link {
    background: #e11d2a !important;
    border-color: #e11d2a !important;
    box-shadow: 0 6px 14px -8px rgba(225, 29, 42, .8) !important;
}

@media (max-width: 767.98px) {
    .ez-body .card.ez-gcard > .card-header { padding: 14px !important; }
    .ez-body .card.ez-gcard > .card-header > *:not(.ez-ghead) { flex-basis: 100%; }
    .ez-body .card.ez-gcard > .card-body { padding: 12px !important; }
    .ez-body .ez-ghead__icon { width: 42px; height: 42px; border-radius: 11px; }
    .ez-body .ez-ghead__icon .material-icons { font-size: 22px; }
    .ez-body .ez-gwrap { grid-template-columns: minmax(0, 1fr); }
    .ez-body .ez-gwrap > .summary,
    .ez-body .ez-gwrap > .pagination,
    .ez-body .ez-gwrap > nav { grid-column: 1; }
    .ez-body .ez-gwrap > .summary { text-align: center; }
    .ez-body .ez-content table.ez-gtable a.ez-act { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
    /* the icon-only compact toggle keeps its square size in the phone toolbar */
    .ez-body .card-header .row > [class*="col"] > .ez-compact-slot { flex: 0 0 auto !important; }
    .ez-body .card-header .ez-compact-slot .ez-compact-toggle { width: 44px !important; }
}

html[data-theme="dark"] .ez-body .ez-ghead__icon { background: rgba(225, 29, 42, .18); color: #fca5a5; }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable > thead > tr:first-child > th { border-bottom-color: var(--ez-border) !important; }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable > tbody > tr > td { border-bottom-color: var(--ez-border) !important; }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable > tbody > tr:hover > td { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable a.ez-act--delete { background: rgba(248, 113, 113, .16); color: #fca5a5 !important; }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable .badge.bg-secondary { background: rgba(255, 255, 255, .08) !important; color: var(--ez-text) !important; }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable .badge.bg-gradient-info { background: rgba(129, 140, 248, .18) !important; color: #c7d2fe !important; }
/* last step for the widest grids: a little less side padding */
html.ez-grid-compact .ez-content table.ez-gtable--tighter > thead > tr > th,
html.ez-grid-compact .ez-content table.ez-gtable--tighter > tbody > tr > td,
html.ez-grid-compact .ez-content table.ez-gtable--tighter > thead > tr.filters > td { padding-left: 2px !important; padding-right: 2px !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tighter a.ez-act { width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin: 0 !important; font-size: 12px; }

/* "(not set)" and two-line badges ("Pre-Order" / "#22") never split mid-word */
.ez-body .ez-content table.ez-gtable .not-set,
.ez-body .ez-content table.ez-gtable .badge,
html.ez-grid-compact .ez-content table.ez-gtable > tbody > tr > td .not-set,
html.ez-grid-compact .ez-content table.ez-gtable > tbody > tr > td .badge { white-space: nowrap !important; overflow-wrap: normal !important; }

/* 23. Scan box (user mockup, 2026-10-07): one rounded field with a tinted
   barcode icon box, a thin divider, soft border and shadow; the visible
   "Scan Barcode" label is now visually hidden (still read by screen readers) */
.ez-body .ez-scan {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 300px;
    max-width: 100%;
    height: 40px;
    overflow: hidden;
    background: var(--ez-surface);
    border: 1px solid #d5dbe6;
    border-radius: 12px;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .12);
    transition: border-color var(--ez-dur) var(--ez-ease), box-shadow var(--ez-dur) var(--ez-ease);
}
.ez-body .ez-scan:focus-within {
    border-color: #e11d2a;
    box-shadow: 0 0 0 3px rgba(225, 29, 42, .14), 0 4px 14px -6px rgba(15, 23, 42, .12);
}
.ez-body .ez-scan__icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    background: #f1f5fb;
    color: #475569;
}
.ez-body .ez-scan__icon::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 0;
    bottom: 9px;
    width: 1px;
    background: #d5dbe6;
}
.ez-body .card-header .ez-scan > input#scanner,
.ez-body .ez-scan > input#scanner {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0;
    font-size: var(--ez-fs-sm);
    color: var(--ez-heading);
}
.ez-body .ez-scan > input#scanner::placeholder { color: #8391a7; }
.ez-body .card-header.ez-gh--s1 .ez-scan { width: 230px; }
@media (max-width: 767.98px) {
    .ez-body .ez-scan { width: 100%; height: 44px; }
}
html[data-theme="dark"] .ez-body .ez-scan { border-color: var(--ez-border-strong); box-shadow: none; }
html[data-theme="dark"] .ez-body .ez-scan__icon { background: var(--ez-surface-3); color: var(--ez-text); }
html[data-theme="dark"] .ez-body .ez-scan__icon::after { background: var(--ez-border-strong); }
/* scan result flash (order packing scan box): green when done, red when refused */
@keyframes ezScanOk { from { border-color: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .2); } }
@keyframes ezScanBad { from { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .2); } }
.ez-body .ez-scan.ez-scan--ok { animation: ezScanOk 1.2s var(--ez-ease); }
.ez-body .ez-scan.ez-scan--bad { animation: ezScanBad 1.6s var(--ez-ease); }

/* 24. Courier API status strips (Ongoing Orders, user mockup 2026-10-07):
   one tinted pill group per courier: name chip, then counts with dots */
.ez-body .ez-api {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    height: 40px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #fecdd3;
    background: #fff1f2;
    white-space: nowrap;
    font-size: 12px;
}
.ez-body .ez-api__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 10px;
    border-radius: 9px;
    background: #ffe4e6;
    color: var(--ez-heading);
    font-weight: 700;
}
.ez-body .ez-api__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    font-weight: 600;
}
.ez-body .ez-api__item + .ez-api__item { border-left: 1px solid rgba(15, 23, 42, .1); }
.ez-body .ez-api__item b { font-weight: 700; }
.ez-body .ez-api__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ez-body .ez-api__item--bad { color: #dc2626; }
.ez-body .ez-api__item--ok { color: #16a34a; }
.ez-body .ez-api--blue { background: #eff6ff; border-color: #bfdbfe; }
.ez-body .ez-api--blue .ez-api__name { background: #dbeafe; color: #1e3a8a; }
.ez-body .ez-api--amber { background: #fffbeb; border-color: #fde68a; }
.ez-body .ez-api--amber .ez-api__name { background: #fef3c7; color: #78350f; }
.ez-body .card-header .ez-api-col { margin: 0 !important; }
.ez-body .card-header.ez-gh--s1 .ez-api { font-size: 11.5px; }
.ez-body .card-header.ez-gh--s1 .ez-api__item { padding: 0 6px; }
.ez-body .card-header.ez-gh--s1 .ez-api__name { padding: 0 8px; }
/* still tight: "(24H)" is said once, on the courier chip, instead of on each count */
.ez-body .card-header.ez-gh--s1b .ez-api__span { display: none; }
.ez-body .card-header.ez-gh--s1b .ez-api__name::after { content: "24H"; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .7); font-size: 10px; font-weight: 700; }
.ez-body .card-header .row:has(> .ez-api-col) { align-items: center; }
@media (max-width: 767.98px) {
    .ez-body .ez-api { display: flex; flex-wrap: wrap; height: auto; row-gap: 4px; white-space: normal; }
    .ez-body .ez-api__name { height: 32px; }
    .ez-body .ez-api__item + .ez-api__item { border-left: 0; }
}
html[data-theme="dark"] .ez-body .ez-api { background: rgba(225, 29, 42, .10); border-color: rgba(225, 29, 42, .35); }
html[data-theme="dark"] .ez-body .ez-api__name { background: rgba(225, 29, 42, .18); color: var(--ez-heading); }
html[data-theme="dark"] .ez-body .ez-api--blue { background: rgba(59, 130, 246, .10); border-color: rgba(59, 130, 246, .35); }
html[data-theme="dark"] .ez-body .ez-api--blue .ez-api__name { background: rgba(59, 130, 246, .2); color: #bfdbfe; }
html[data-theme="dark"] .ez-body .ez-api--amber { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .35); }
html[data-theme="dark"] .ez-body .ez-api--amber .ez-api__name { background: rgba(245, 158, 11, .2); color: #fde68a; }
html[data-theme="dark"] .ez-body .ez-api__item--bad { color: #fca5a5; }
html[data-theme="dark"] .ez-body .ez-api__item--ok { color: #86efac; }
html[data-theme="dark"] .ez-body .ez-api__item + .ez-api__item { border-left-color: rgba(255, 255, 255, .12); }

/* 25. Grid page fixes (audit 2026-10-07) */
/* compact toggle at the end of a header with no button column */
.ez-body .card-header > .ez-compact-slot--end { display: flex; flex: 0 0 auto !important; align-items: center; margin-left: auto !important; }
.ez-body .card.ez-gcard > .card-header.ez-gh--wrap > .ez-compact-slot--end { flex: 0 0 auto !important; }
/* scaffold pages: the "Create ..." button row also carries the toggle */
.ez-body .ez-gtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ez-body .ez-gtools > .btn { margin: 0 !important; }
.ez-body .ez-gtools > .ez-compact-slot--end { display: flex; margin-left: auto; }
/* Only the bottom pager is shown (user request); the top copy stays in the markup but hidden. */
.ez-body .ez-gwrap > .ez-pager-top { display: none !important; }
/* very long unbroken values (e.g. "1111…" addresses) break inside their cell */
.ez-body .ez-content table.ez-gtable > tbody > tr > td:not(.ez-nowrap):not(.ez-actions):not(.ez-numwords) { overflow-wrap: anywhere; }
/* widest grids (24 columns) at laptop width: a size smaller in the last step */
html.ez-grid-compact .ez-content table.ez-gtable--tighter > thead > tr > th { font-size: 10px !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tighter > tbody > tr > td { font-size: 11px; }
/* action icons always stay on one line (user, 2026-10-12); a size smaller in the tightest grids */
html.ez-grid-compact .ez-content table.ez-gtable--tighter > tbody > tr > td.ez-actions { white-space: nowrap !important; }
html.ez-grid-compact .ez-content table.ez-gtable--tighter .ez-status-pill { padding: 3px 7px !important; margin: 0 !important; }
/* the hidden "Items Per Page" label's wrapper takes no room in the toolbar */
.ez-body .card-header .dropdown.ez-pps-label { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   26. Upload Orders: form toolbar + "Delivery Company Codes" card
   ========================================================================== */
/* the old divider under the upload form is redundant with the card header line */
.ez-body .ez-upload .card-header form > hr { display: none; }
/* file input: soft outlined field with a tinted "Choose File" button */
.ez-body .ez-upload input[type="file"] {
    width: 100%; min-height: 44px; padding: 4px !important;
    background: var(--ez-surface) !important; color: var(--ez-text-muted) !important;
    border: 1px dashed var(--ez-border-strong) !important; border-radius: 10px !important;
    font-size: var(--ez-fs-sm); font-weight: 500; text-transform: none; box-shadow: none !important;
}
.ez-body .ez-upload input[type="file"]:hover { border-color: var(--ez-primary) !important; }
.ez-body .ez-upload input[type="file"]::file-selector-button {
    margin-right: 10px; padding: 8px 14px; border: 0; border-radius: 8px;
    background: var(--ez-primary-soft-2); color: var(--ez-primary-active); font-weight: 600; cursor: pointer;
}
/* Save sits on the right under the grid like the other form actions */
.ez-body .ez-upload .card-body .float-lg-end > p { margin: 12px 0 0; }
.ez-body .ez-upload .card-body .row > [class*="col"]:has(> .float-lg-end > p) { flex: 0 0 100%; max-width: 100%; display: flex; justify-content: flex-end; }
/* Upload Status: Upload (secondary) and Save (primary) side by side */
.ez-body .ez-upload .ez-st-actions { display: flex; gap: 8px; flex-wrap: nowrap; }
@media (max-width: 991.98px) {
    .ez-body .status-temp-form .card-header form > .row > .col-lg-1 { flex: 0 0 100%; width: 100%; max-width: 100%; }
    .ez-body .status-temp-form .card-header form > .row > .col-lg-1 > .dropdown, .ez-body .ez-upload .ez-st-actions { float: none !important; width: 100%; padding: 0 !important; }
    .ez-body .ez-upload .ez-st-actions > .btn { flex: 1 1 0; width: auto !important; }
}

.ez-body .ez-codes {
    padding: 0; border: 1px solid var(--ez-border); border-radius: 16px;
    background: var(--ez-surface); box-shadow: 0 1px 2px rgba(var(--ez-ink-rgb), .04);
}
.ez-body .ez-codes__head {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; border-bottom: 1px solid var(--ez-border);
}
.ez-body .ez-codes__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--ez-primary-soft-2); color: var(--ez-primary);
}
.ez-body .ez-codes__icon .material-icons { font-size: 30px; color: inherit; }
.ez-body .ez-codes__title { margin: 0; }
.ez-body .ez-codes__sub { margin: 2px 0 0; }
.ez-body .ez-codes__list {
    margin: 0; padding: 20px 24px 24px; list-style: none;
    columns: 2; column-gap: 24px;
}
.ez-body .ez-codes__item {
    display: flex; align-items: center; gap: 14px; break-inside: avoid;
    margin: 0 0 10px; padding: 6px 12px 6px 6px; min-height: 44px;
    background: var(--ez-surface-2); border: 1px solid var(--ez-border); border-radius: 10px;
    color: var(--ez-text); font-size: .9375rem;
}
.ez-body .ez-codes__code {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-width: 44px; height: 32px; padding: 0 8px; border-radius: 8px;
    font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--ez-danger-soft); color: var(--ez-danger);
}
.ez-body .ez-codes__item:nth-child(6n+2) .ez-codes__code { background: var(--ez-info-soft); color: var(--ez-info-ink); }
.ez-body .ez-codes__item:nth-child(6n+3) .ez-codes__code { background: var(--ez-success-soft); color: var(--ez-success-ink); }
.ez-body .ez-codes__item:nth-child(6n+4) .ez-codes__code { background: #f3e8ff; color: #6b21a8; }
.ez-body .ez-codes__item:nth-child(6n+5) .ez-codes__code { background: var(--ez-warning-soft); color: #c2410c; }
.ez-body .ez-codes__item:nth-child(6n+6) .ez-codes__code { background: #ecfeff; color: #0e7490; }
.ez-body .ez-codes__name { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1200px) {
    .ez-body .ez-codes__list { columns: 3; column-gap: 20px; }
}
@media (max-width: 767.98px) {
    .ez-body .ez-codes__head { padding: 16px; }
    .ez-body .ez-codes__list { columns: 1; padding: 16px; }
}
html[data-theme="dark"] .ez-body .ez-codes__item:nth-child(6n+4) .ez-codes__code { background: rgba(168, 85, 247, .18); color: #d8b4fe; }
html[data-theme="dark"] .ez-body .ez-codes__item:nth-child(6n+6) .ez-codes__code { background: rgba(6, 182, 212, .16); color: #67e8f9; }

/* ==========================================================================
   27. Order grids: merged "Customer Details" column (see mergeCustomerColumns)
   ========================================================================== */
.ez-body table.ez-gtable > thead > tr > .ez-col-merged,
.ez-body table.ez-gtable > tbody > tr > .ez-col-merged { display: none !important; }
.ez-body table.ez-gtable > tbody > tr > td.ez-custcol { min-width: 170px; max-width: 260px; white-space: normal; }
.ez-body table.ez-gtable > thead > tr > .ez-custcol { min-width: 170px; }
.ez-body .ez-cust-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.ez-body .ez-cust-cell__name { font-weight: 600; color: var(--ez-heading); overflow-wrap: anywhere; }
.ez-body .ez-cust-cell__phone { display: flex; align-items: center; gap: 4px; color: var(--ez-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ez-body .ez-cust-cell__icon { display: inline-flex; color: var(--ez-text-muted); }
.ez-body .ez-cust-cell__phone--recipient .ez-cust-cell__icon { color: var(--ez-primary); }
.ez-body .ez-cust-cell__addr { color: var(--ez-text-muted); font-size: .92em; overflow-wrap: anywhere; }
.ez-body .ez-cust-filters { display: grid; gap: 4px; min-width: 170px; }
.ez-body .ez-cust-filters__item:first-child { grid-column: 1 / -1; }
.ez-body .ez-cust-filters__item .form-control { min-height: 30px; padding: 2px 6px; font-size: 11px; }
.ez-body table.ez-gtable.ez-cust-merged > thead > tr.filters > td { vertical-align: top; }

/* ==========================================================================
   28. Button hierarchy (levels + sizes). modern.js (classifyButtons) adds one
   level class to each existing button by what it does; ids, original
   classes, hrefs and handlers stay. Levels:
     primary   solid blue    main action: Create / Save / Submit / Upload / Search
     success   solid green   confirm / complete (Mark Collected, Paid)
     warning   solid orange  key process step (Dispatch to Deliver)
     danger    solid red     special high-priority action (Create Pre-Order)
     secondary tinted blue   common actions (Print Invoice, Print WayBill, Status)
     tertiary  white outline less frequent (Download/Export Template, Reset, Cancel)
     delete    red outline   destructive (Delete, Block, Not Paid)
     remove    tinted red    remove an item
   Sizes: lg 48px (main form action), md 40px (default), sm 32px (compact,
   in tables), icon 32px square. Phones: every toolbar/form button is 44px.
   ========================================================================== */
:root {
    --ez-b-blue: #2563eb;
    --ez-b-blue-hover: #1d4ed8;
    --ez-b-blue-soft: #eff6ff;
    --ez-b-blue-soft-2: #dbeafe;
    --ez-b-blue-line: #93c5fd;
    --ez-b-blue-ink: #1d4ed8;
    --ez-b-green: #16a34a;
    --ez-b-green-hover: #15803d;
    --ez-b-orange: #f59e0b;
    --ez-b-orange-hover: #d97706;
    --ez-b-red: #dc2626;
    --ez-b-red-hover: #b91c1c;
    --ez-b-red-soft: #fee2e2;
    --ez-b-red-line: #fca5a5;
    --ez-b-neutral-line: #d1d5db;
    --ez-b-neutral-ink: #1f2937;
    --ez-b-disabled-bg: #e5e7eb;
    --ez-b-disabled-ink: #9ca3af;
    --ez-bd-neutral-bg: #f1f5f9;
    --ez-bd-neutral-fg: #334155;
    --ez-bd-neutral-dot: #64748b;
    --ez-bd-success-bg: #dcfce7;
    --ez-bd-success-fg: #15803d;
    --ez-bd-success-dot: #16a34a;
    --ez-bd-warning-bg: #fef3c7;
    --ez-bd-warning-fg: #b45309;
    --ez-bd-warning-dot: #f59e0b;
    --ez-bd-danger-bg:  #fee2e2;
    --ez-bd-danger-fg:  #b91c1c;
    --ez-bd-danger-dot:  #dc2626;
    --ez-bd-info-bg:    #dbeafe;
    --ez-bd-info-fg:    #1d4ed8;
    --ez-bd-info-dot:    #2563eb;
    --ez-bd-purple-bg:  #f3e8ff;
    --ez-bd-purple-fg:  #7e22ce;
    --ez-bd-purple-dot:  #9333ea;
    --ez-bd-plain-bg:   #f1f5f9;
    --ez-bd-plain-fg:   #475569;
    --ez-bd-dark-bg:    #111827;
    --ez-bd-dark-fg:    #ffffff;
    --ez-bd-dark-dot:    #22c55e;
}
:root[data-theme="dark"] {
    --ez-b-blue-soft: rgba(59, 130, 246, .14);
    --ez-b-blue-soft-2: rgba(59, 130, 246, .24);
    --ez-b-blue-line: rgba(96, 165, 250, .55);
    --ez-b-blue-ink: #93c5fd;
    --ez-b-red-soft: rgba(239, 68, 68, .16);
    --ez-b-red-line: rgba(248, 113, 113, .55);
    --ez-b-neutral-line: #475569;
    --ez-b-neutral-ink: #e5e7eb;
    --ez-b-disabled-bg: #334155;
    --ez-b-disabled-ink: #64748b;
    --ez-bd-neutral-bg: rgba(148, 163, 184, .16);
    --ez-bd-neutral-fg: #cbd5e1;
    --ez-bd-success-bg: rgba(34, 197, 94, .16);
    --ez-bd-success-fg: #86efac;
    --ez-bd-warning-bg: rgba(245, 158, 11, .16);
    --ez-bd-warning-fg: #fcd34d;
    --ez-bd-danger-bg:  rgba(239, 68, 68, .16);
    --ez-bd-danger-fg:  #fca5a5;
    --ez-bd-info-bg:    rgba(59, 130, 246, .18);
    --ez-bd-info-fg:    #93c5fd;
    --ez-bd-purple-bg:  rgba(168, 85, 247, .18);
    --ez-bd-purple-fg:  #d8b4fe;
    --ez-bd-plain-bg:   rgba(148, 163, 184, .14);
    --ez-bd-plain-fg:   #cbd5e1;
    --ez-bd-dark-bg:    #e5e7eb;
    --ez-bd-dark-fg:    #111827;
}

/* base: one shape for every level */
.ez-body .btn.ez-b {
    min-height: 40px;
    padding: 0 16px !important;
    gap: 8px;
    border-radius: 10px !important;
    font-size: 14px !important;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: none !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.ez-body .btn.ez-b > i,
.ez-body .btn.ez-b > .fa,
.ez-body .btn.ez-b > .fas,
.ez-body .btn.ez-b > .material-icons { font-size: 15px; margin: 0 !important; line-height: 1; }
.ez-body .btn.ez-b > .material-icons { font-size: 18px; }
.ez-body .btn.ez-b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .35) !important; }

/* sizes */
.ez-body .btn.ez-b.ez-b--lg { min-height: 48px; padding: 0 22px !important; border-radius: 12px !important; }
.ez-body .btn.ez-b.ez-b--sm { min-height: 32px; padding: 0 12px !important; font-size: 12.5px !important; border-radius: 8px !important; gap: 6px; }
.ez-body .btn.ez-b.ez-b--icon { width: 32px; min-width: 32px; min-height: 32px; padding: 0 !important; border-radius: 8px !important; }

/* solid levels */
.ez-body .btn.ez-b--primary { background: var(--ez-b-blue) !important; border-color: var(--ez-b-blue) !important; color: #fff !important; }
.ez-body .btn.ez-b--primary:hover { background: var(--ez-b-blue-hover) !important; border-color: var(--ez-b-blue-hover) !important; }
.ez-body .btn.ez-b--success { background: var(--ez-b-green) !important; border-color: var(--ez-b-green) !important; color: #fff !important; }
.ez-body .btn.ez-b--success:hover { background: var(--ez-b-green-hover) !important; border-color: var(--ez-b-green-hover) !important; }
.ez-body .btn.ez-b--warning { background: var(--ez-b-orange) !important; border-color: var(--ez-b-orange) !important; color: #fff !important; }
.ez-body .btn.ez-b--warning:hover { background: var(--ez-b-orange-hover) !important; border-color: var(--ez-b-orange-hover) !important; }
.ez-body .btn.ez-b--danger { background: var(--ez-b-red) !important; border-color: var(--ez-b-red) !important; color: #fff !important; }
.ez-body .btn.ez-b--danger:hover { background: var(--ez-b-red-hover) !important; border-color: var(--ez-b-red-hover) !important; }
.ez-body .btn.ez-b--primary:hover, .ez-body .btn.ez-b--success:hover,
.ez-body .btn.ez-b--warning:hover, .ez-body .btn.ez-b--danger:hover { color: #fff !important; }

/* secondary: tinted blue with a blue outline */
.ez-body .btn.ez-b--secondary { background: var(--ez-b-blue-soft) !important; border-color: var(--ez-b-blue-line) !important; color: var(--ez-b-blue-ink) !important; }
.ez-body .btn.ez-b--secondary:hover { background: var(--ez-b-blue-soft-2) !important; color: var(--ez-b-blue-ink) !important; }
/* tertiary: white with a neutral outline */
.ez-body .btn.ez-b--tertiary { background: var(--ez-surface) !important; border-color: var(--ez-b-neutral-line) !important; color: var(--ez-b-neutral-ink) !important; }
.ez-body .btn.ez-b--tertiary:hover { background: var(--ez-surface-3) !important; color: var(--ez-b-neutral-ink) !important; }
/* destructive pair */
.ez-body .btn.ez-b--delete { background: var(--ez-surface) !important; border-color: var(--ez-b-red-line) !important; color: var(--ez-b-red) !important; }
.ez-body .btn.ez-b--delete:hover { background: var(--ez-b-red-soft) !important; color: var(--ez-b-red-hover) !important; }
.ez-body .btn.ez-b--remove { background: var(--ez-b-red-soft) !important; border-color: var(--ez-b-red-soft) !important; color: var(--ez-b-red) !important; }
.ez-body .btn.ez-b--remove:hover { border-color: var(--ez-b-red-line) !important; color: var(--ez-b-red-hover) !important; }
html[data-theme="dark"] .ez-body .btn.ez-b--delete,
html[data-theme="dark"] .ez-body .btn.ez-b--remove { color: #fca5a5 !important; }

/* disabled: one grey look for every level */
.ez-body .btn.ez-b:disabled,
.ez-body .btn.ez-b.disabled,
.ez-body .btn.ez-b[aria-disabled="true"] {
    background: var(--ez-b-disabled-bg) !important;
    border-color: var(--ez-b-disabled-bg) !important;
    color: var(--ez-b-disabled-ink) !important;
    opacity: 1;
    cursor: not-allowed;
}

/* phones: 44px tap height for toolbar and form buttons (table buttons stay compact) */
@media (max-width: 767.98px) {
    .ez-body .btn.ez-b:not(.ez-b--in-table) { min-height: 44px; }
    .ez-body .btn.ez-b.ez-b--icon:not(.ez-b--in-table) { width: 44px; min-width: 44px; }
}

/* table icon buttons follow the sheet: rounded squares, view grey, edit blue,
   delete red (the round-icon rules above stay for sizes) */
.ez-body .ez-content table.ez-gtable a.ez-act { border-radius: 8px; }
.ez-body .ez-content table.ez-gtable a.ez-act--view  { background: #f1f5f9; color: #334155 !important; }
.ez-body .ez-content table.ez-gtable a.ez-act--view:hover  { background: #e2e8f0; }
.ez-body .ez-content table.ez-gtable a.ez-act--edit  { background: var(--ez-b-blue-soft-2); color: var(--ez-b-blue) !important; }
.ez-body .ez-content table.ez-gtable a.ez-act--edit:hover  { background: #bfdbfe; }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable a.ez-act--view { background: rgba(148, 163, 184, .16); color: #cbd5e1 !important; }
html[data-theme="dark"] .ez-body .ez-content table.ez-gtable a.ez-act--edit { background: rgba(59, 130, 246, .2); color: #93c5fd !important; }
/* Customer Details filter: only the name box shows (one search box) */
.ez-body .ez-cust-filters__item--hidden { display: none !important; }
.ez-body .ez-cust-filters { grid-template-columns: 1fr; }
.ez-body .ez-cust-filters__item .form-control { height: auto; }

/* ==========================================================================
   29. Badge / status chip system. modern.js (classifyBadges) adds:
     .ez-badge + kind (--status, --detail, --counter, --tag)
              + tone (--neutral, --success, --warning, --danger, --info,
                      --purple, --dark, --plain) [+ --strong for key states]
              + size (--lg 32px, --md 28px, --sm 24px in tables)
   Every status is a soft tint with a thin border in its tone colour and a dot or simple icon.
   ========================================================================== */

:root .ez-body .ez-content .ez-badge {
    --bd-bg: var(--ez-bd-neutral-bg); --bd-fg: var(--ez-bd-neutral-fg); --bd-dot: var(--ez-bd-neutral-dot);
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    min-width: 0 !important;
    height: 28px;
    min-height: 0 !important;
    margin: 2px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: var(--bd-bg) !important;
    color: var(--bd-fg) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle;
    cursor: default;
}
:root .ez-body .ez-content a > .ez-badge, :root .ez-body .ez-content a.ez-badge { cursor: pointer; }
:root .ez-body .ez-content .ez-badge::before { content: none !important; display: none !important; }
:root .ez-body .ez-content .ez-badge > i,
:root .ez-body .ez-content .ez-badge > svg.svg-inline--fa,
:root .ez-body .ez-content .ez-badge__body > i,
:root .ez-body .ez-content .ez-badge__body > svg { display: none !important; }          /* the view's own icon; one icon set */
:root .ez-body .ez-content .ez-badge > br { display: none; }
.ez-body .ez-badge__dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--bd-dot); }
.ez-body .ez-badge__icon { display: inline-flex; flex: 0 0 auto; }
.ez-body .ez-badge__icon svg { display: block; }

/* tones */
:root .ez-body .ez-content .ez-badge--success { --bd-bg: var(--ez-bd-success-bg); --bd-fg: var(--ez-bd-success-fg); --bd-dot: var(--ez-bd-success-dot); }
:root .ez-body .ez-content .ez-badge--warning { --bd-bg: var(--ez-bd-warning-bg); --bd-fg: var(--ez-bd-warning-fg); --bd-dot: var(--ez-bd-warning-dot); }
:root .ez-body .ez-content .ez-badge--danger  { --bd-bg: var(--ez-bd-danger-bg);  --bd-fg: var(--ez-bd-danger-fg);  --bd-dot: var(--ez-bd-danger-dot); }
:root .ez-body .ez-content .ez-badge--info    { --bd-bg: var(--ez-bd-info-bg);    --bd-fg: var(--ez-bd-info-fg);    --bd-dot: var(--ez-bd-info-dot); }
:root .ez-body .ez-content .ez-badge--purple  { --bd-bg: var(--ez-bd-purple-bg);  --bd-fg: var(--ez-bd-purple-fg);  --bd-dot: var(--ez-bd-purple-dot); }
:root .ez-body .ez-content .ez-badge--plain   { --bd-bg: var(--ez-bd-plain-bg);   --bd-fg: var(--ez-bd-plain-fg); }
:root .ez-body .ez-content .ez-badge--dark    { --bd-bg: var(--ez-bd-dark-bg);    --bd-fg: var(--ez-bd-dark-fg);    --bd-dot: var(--ez-bd-dark-dot); }
/* status badges look like the Dispatch to Deliver box (user 2026-10-13): soft tint, thin border in
   the tone colour, squarer corners; Handed Over / Delivered / Collected are no longer solid */
:root .ez-body .ez-content .ez-badge--status {
    border-radius: 8px !important;
    border-color: color-mix(in srgb, var(--bd-dot) 45%, transparent) !important;
}
/* tags are slightly squarer than status pills */
:root .ez-body .ez-content .ez-badge--tag { border-radius: 8px !important; }
/* counters: dot + number */
:root .ez-body .ez-content .ez-badge--counter { padding: 0 10px !important; font-variant-numeric: tabular-nums; gap: 5px; }
/* legend tags and counters use the status-badge look: thin tone border, and the dark (New) tone is grey */
:root .ez-body .ez-content .ez-badge--tag,
:root .ez-body .ez-content .ez-badge--counter { border-color: color-mix(in srgb, var(--bd-dot) 45%, transparent) !important; }
:root .ez-body .ez-content .ez-badge--tag.ez-badge--dark,
:root .ez-body .ez-content .ez-badge--counter.ez-badge--dark { --bd-bg: var(--ez-bd-neutral-bg); --bd-fg: var(--ez-bd-neutral-fg); --bd-dot: var(--ez-bd-neutral-dot); }

/* status with details: tinted bordered box, icon, bold name + muted date */
:root .ez-body .ez-content .ez-badge--detail {
    display: inline-grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    border-color: color-mix(in srgb, var(--bd-dot) 45%, transparent) !important;
    white-space: normal !important;
    text-align: left !important;
}
.ez-body .ez-badge--detail .ez-badge__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ez-body .ez-badge--detail .ez-badge__body > small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ez-text-muted); opacity: 1 !important; white-space: normal; overflow-wrap: normal; word-break: keep-all; }
.ez-body .ez-badge--detail.ez-badge--stale .ez-badge__body > small { color: var(--ez-bd-danger-fg); }
.ez-body .ez-badge--detail .ez-badge__icon svg { width: 18px; height: 18px; }

/* sizes */
:root .ez-body .ez-content .ez-badge--lg { height: 32px; padding: 0 14px !important; font-size: 14px !important; }
:root .ez-body .ez-content .ez-badge--sm { height: 24px; padding: 0 9px !important; font-size: 11.5px !important; gap: 5px; }
:root .ez-body .ez-content .ez-badge--sm .ez-badge__icon svg { width: 12px; height: 12px; }
:root .ez-body .ez-content .ez-badge--sm .ez-badge__dot { width: 6px; height: 6px; flex-basis: 6px; }
:root .ez-body .ez-content .ez-badge--detail.ez-badge--md { height: auto; font-size: 12px !important; }
:root .ez-body .ez-content .ez-badge--detail { min-width: 150px !important; width: max-content !important; max-width: none !important; overflow: visible !important; }
/* the status name never wraps or clips (Dispatch to Destination is the longest); the cell grows to fit */
.ez-body .ez-content .ez-badge--detail .ez-badge__body { white-space: nowrap; }
.ez-body .ez-badge__line { display: inline-flex; align-items: center; gap: 6px; }
:root .ez-body .ez-content .ez-badge.ez-badge--xchg { padding: 2px 5px !important; gap: 0; border-radius: 6px; margin: 0; height: auto !important; min-height: 0 !important; }
:root .ez-body .ez-content .ez-badge--xchg .ez-badge__icon svg { width: 12px; height: 12px; }
:root .ez-body .ez-content .ez-badge--sm .ez-badge.ez-badge--xchg { padding: 1px 3px !important; border-radius: 5px; line-height: 1 !important; }
:root .ez-body .ez-content .ez-badge--sm .ez-badge--xchg .ez-badge__icon svg { width: 10px; height: 10px; }
html.ez-grid-compact .ez-content table.table > tbody > tr > td:has(> .ez-badge--detail) { min-width: 160px !important; }
.ez-body .ez-badge__date,
html.ez-grid-compact .ez-content table.table > tbody > tr > td .btn .ez-badge__date { white-space: nowrap !important; }

/* ==========================================================================
   30. Typography system (user's type sheet). Inter throughout.
     H1 page title 28/700/36 -0.5px   H2 section 20/600/28 -0.2px
     H3 card title 18/600/26 -0.2px   H4 table header 14/600/20
     Body large 16/400/24   Body 14/400/20   Small + caption 12/400/16
     Button + menu 14/500/20   Placeholder 14/400   Table cell (compact) 12/400/18
     Text: primary #111827, secondary #6B7280, muted #9CA3AF, link #2563EB,
     error #EF4444, success #16A34A, warning #F59E0B
   Compact grids keep their own smaller header sizes (and the tight/tighter
   fit steps), so wide tables still fit.
   ========================================================================== */
:root {
    --ez-t-primary: #111827;
    --ez-t-secondary: #6b7280;
    --ez-t-muted: #9ca3af;
    --ez-t-link: #2563eb;
    --ez-t-link-hover: #1d4ed8;
    --ez-t-error: #ef4444;
    --ez-t-success: #16a34a;
    --ez-t-warning: #f59e0b;
    --ez-heading: var(--ez-t-primary);
    --ez-text: var(--ez-t-primary);
    --ez-text-muted: var(--ez-t-secondary);
    --ez-text-subtle: var(--ez-t-muted);
    --ez-link: var(--ez-t-link);
    --bs-link-color: var(--ez-t-link);
    --bs-link-hover-color: var(--ez-t-link-hover);
    --ez-fs-base: 0.875rem;
    --ez-lh: 1.4286;               /* 14/20 */
}
:root[data-theme="dark"] {
    --ez-t-primary: #f3f4f6;
    --ez-t-secondary: #9ca3af;
    --ez-t-muted: #6b7280;
    --ez-t-link: #60a5fa;
    --ez-t-link-hover: #93c5fd;
    --ez-t-error: #f87171;
    --ez-t-success: #4ade80;
    --ez-t-warning: #fbbf24;
}

/* body */
body.ez-body { font-size: 14px; line-height: 20px; color: var(--ez-t-primary); font-weight: 400; }
.ez-body .lead, .ez-body .text-lg { font-size: 16px !important; line-height: 24px; font-weight: 400; }
.ez-body small, .ez-body .small, .ez-body .text-xs,
.ez-body .form-text, .ez-body .hint-block, .ez-body .help-block { font-size: 12px; line-height: 16px; }
.ez-body .text-sm { font-size: 14px !important; line-height: 20px; }

/* links */
.ez-body .ez-content a:not(.btn):not(.nav-link):not(.page-link):not(.ez-act):not(.dropdown-item) { color: var(--ez-t-link); }
.ez-body .ez-content a:not(.btn):not(.nav-link):not(.page-link):not(.ez-act):not(.dropdown-item):hover { color: var(--ez-t-link-hover); }
.ez-body a:hover { color: var(--ez-t-link-hover); }
.ez-body .breadcrumb-item a { color: var(--ez-t-secondary) !important; }
.ez-body .breadcrumb-item a:hover { color: var(--ez-t-primary) !important; }

/* headings */
.ez-body h1, .ez-body .h1, .ez-body .ez-ghead__title {
    font-size: 24px !important; font-weight: 700 !important; line-height: 32px !important; letter-spacing: -0.4px !important; color: var(--ez-t-primary);
}
/* page titles are 24px (user asked smaller, 2026-10-13); the dashboard greeting stays 28px */
.ez-body h1.ez-greeting__title { font-size: 28px !important; line-height: 36px !important; }
.ez-body .ez-ghead__sub { font-size: 14px; line-height: 20px; color: var(--ez-t-secondary); }
.ez-body h2, .ez-body .h2, .ez-body .ez-osec__title, .ez-body .ez-codes__title {
    font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; letter-spacing: -0.2px !important; color: var(--ez-t-primary);
}
.ez-body h3, .ez-body .h3,
.ez-body .card .card-header h5, .ez-body h5.card-title {
    font-size: 18px !important; font-weight: 600 !important; line-height: 26px !important; letter-spacing: -0.2px !important; color: var(--ez-t-primary);
}
.ez-body h4, .ez-body .h4 { font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; }
.ez-body h5, .ez-body .h5, .ez-body h6, .ez-body .h6 { letter-spacing: 0; }
.ez-body .ez-osec__sub, .ez-body .ez-codes__sub { font-size: 14px; line-height: 20px; color: var(--ez-t-secondary); }
/* the subtitle under a big title on phones/laptops stays readable but compact */
@media (max-width: 767.98px) {
    .ez-body h1, .ez-body .h1, .ez-body .ez-ghead__title { font-size: 20px !important; line-height: 26px !important; letter-spacing: -0.3px !important; }
    .ez-body h1.ez-greeting__title { font-size: 22px !important; line-height: 28px !important; }
    .ez-body h2, .ez-body .h2, .ez-body .ez-osec__title, .ez-body .ez-codes__title { font-size: 18px !important; line-height: 26px !important; }
    .ez-body .ez-ghead__sub { font-size: 12px; line-height: 16px; }
}

/* tables: header 14/600/20, cell 14/20 in the roomy view; compact view keeps
   its smaller header and 12px cells with an 18px line */
.ez-body .ez-content table.table > thead > tr > th { font-weight: 600 !important; color: var(--ez-t-secondary) !important; letter-spacing: 0 !important; text-transform: none !important; }
html:not(.ez-grid-compact) .ez-content table.table > thead > tr > th { font-size: 14px !important; line-height: 20px !important; }
html:not(.ez-grid-compact) .ez-content table.table > tbody > tr > td { font-size: 14px; line-height: 20px; }
html.ez-grid-compact .ez-content table.table { font-size: 12px; }
html.ez-grid-compact .ez-content table.table > tbody > tr > td { line-height: 18px; }
.ez-body .ez-content table.table > tbody > tr > td { color: var(--ez-t-primary); }

/* buttons and menu: 14/500/20 */
.ez-body .btn.ez-b { font-weight: 500 !important; line-height: 20px; }
.ez-body .btn.ez-b.ez-b--lg { font-size: 15px !important; }
.ez-body .ez-sidebar .nav-link, .ez-body .ez-sidebar .nav-link-text { font-size: 14px !important; font-weight: 500 !important; line-height: 20px; }
.ez-body .dropdown-menu .dropdown-item { font-size: 14px; font-weight: 500; line-height: 20px; }

/* forms: labels 14/500, inputs 14/400, placeholder muted */
.ez-body .ez-content .form-control,
.ez-body .ez-content .form-select,
.ez-body .ez-content .select2-selection__rendered { font-size: 14px; font-weight: 400; }
.ez-body .ez-content .form-control::placeholder { color: var(--ez-t-muted) !important; font-weight: 400; opacity: 1; }
.ez-body .ez-content .select2-selection__placeholder { color: var(--ez-t-muted) !important; }
.ez-body .ez-content label, .ez-body .ez-content .control-label, .ez-body .ez-content .form-label { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ez-t-primary); }
html.ez-grid-compact .ez-content table.table .filters .form-control,
html.ez-grid-compact .ez-content table.table .filters select { font-size: 12px !important; }

/* semantic text colours */
.ez-body .text-muted, .ez-body .text-secondary { color: var(--ez-t-secondary) !important; }
.ez-body .text-danger, .ez-body .invalid-feedback, .ez-body .help-block-error, .ez-body .has-error .help-block { color: var(--ez-t-error) !important; }
.ez-body .text-success { color: var(--ez-t-success) !important; }
.ez-body .text-warning { color: var(--ez-t-warning) !important; }
.ez-body .invalid-feedback, .ez-body .help-block-error { font-size: 12px; line-height: 16px; }
/* small labels styled as card titles (e.g. "Waybill Remaining") are captions */
.ez-body small.card-title { font-size: 12px !important; font-weight: 500 !important; line-height: 16px !important; letter-spacing: 0 !important; color: var(--ez-t-secondary) !important; }

/* ==========================================================================
   31. Order View (orders/view): header card, two-column cards, detail tables,
   read-only item rows and the status workflow timeline (_statusline).
   ========================================================================== */
.ez-body .ez-ov-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    padding: 20px 24px; border-radius: 16px;
}
.ez-body .ez-ov-head__icon,
.ez-body .ez-ov-card__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%); color: #e11d2a;
}
.ez-body .ez-ov-head__icon .material-icons { font-size: 30px; }
.ez-body .ez-ov-head__text { flex: 1 1 260px; min-width: 0; }
.ez-body .ez-ov-head__title { margin: 0 !important; }
.ez-body .ez-ov-head__sub { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ez-t-secondary); }
.ez-body .ez-ov-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ez-body .ez-ov-head__actions .btn { float: none !important; margin: 0 !important; }

.ez-body .ez-ov-card { border-radius: 16px; overflow: hidden; }
.ez-body .ez-ov-card__head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 18px 20px 12px;
}
.ez-body .ez-ov-card__head--inline { padding: 0; }
.ez-body .ez-ov-card__icon { width: 40px; height: 40px; border-radius: 10px; }
.ez-body .ez-ov-card__icon .material-icons { font-size: 22px; }
.ez-body .ez-ov-card__icon--blue { background: #dbeafe; color: #2563eb; }
.ez-body .ez-ov-card__icon--red { background: #fee2e2; color: #dc2626; }
.ez-body .ez-ov-card__title { margin: 0 !important; }
.ez-body .ez-ov-card > .card-body { padding: 4px 20px 20px; }
.ez-body .ez-ov-card .card-header { padding: 18px 20px 12px; background: transparent; border: 0; }
.ez-body .ez-ov-card .card-header .row { align-items: center; }
.ez-body .ez-ov-notes > hr { display: none; }
.ez-body .ez-ov-notes .card-header .float-lg-end { float: none !important; margin-left: auto !important; }
.ez-body .ez-ov-notes .card-header .col-lg-8 { display: flex; justify-content: flex-end; }

/* label / value tables (DetailView): soft grey label column */
.ez-body .ez-ov table.detail-view {
    width: 100%; margin: 0 0 4px; border: 1px solid var(--ez-border); border-radius: 12px;
    border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.ez-body .ez-ov table.detail-view > tbody > tr > th,
.ez-body .ez-ov table.detail-view > tbody > tr > td {
    padding: 9px 16px !important; font-size: 14px !important; line-height: 20px;
    border: 0 !important; border-bottom: 1px solid var(--ez-border) !important;
    background: transparent !important; box-shadow: none !important; vertical-align: middle;
}
.ez-body .ez-ov table.detail-view > tbody > tr:last-child > th,
.ez-body .ez-ov table.detail-view > tbody > tr:last-child > td { border-bottom: 0 !important; }
.ez-body .ez-ov table.detail-view > tbody > tr > th { width: 42% !important; font-weight: 400 !important; color: var(--ez-t-secondary) !important; background: var(--ez-surface-2) !important; }
.ez-body .ez-ov table.detail-view > tbody > tr > td { color: var(--ez-t-primary) !important; overflow-wrap: anywhere; }
.ez-body .ez-ov table.detail-view .not-set { color: var(--ez-t-muted); font-style: normal; }

/* read-only order item rows look like a small table */
.ez-body .ez-ov-items { overflow-x: auto; }
.ez-body .ez-ov-items > .row { margin: 0; border: 1px solid var(--ez-border); border-top: 0; flex-wrap: nowrap; }
.ez-body .ez-ov-items > .row > [class*="col"] { padding: 10px 12px; min-width: 70px; }
.ez-body .ez-ov-items > .ez-ov-items__head { border-top: 1px solid var(--ez-border); border-radius: 12px 12px 0 0; background: var(--ez-surface-2); font-size: 13px; font-weight: 600; color: var(--ez-t-secondary); }
.ez-body .ez-ov-items > .row:last-child { border-radius: 0 0 12px 12px; }
.ez-body .ez-ov-items > .row.mb-2 { margin-bottom: 0 !important; }
.ez-body .ez-ov-items .form-control:disabled {
    padding: 0 !important; min-height: 0; height: auto; border: 0 !important; background: transparent !important;
    box-shadow: none !important; color: var(--ez-t-primary) !important; font-size: 14px; opacity: 1; -webkit-text-fill-color: var(--ez-t-primary);
}

/* small grids inside the cards (notes, exchanged order) */
.ez-body .ez-ov-card .grid-view table.table { border: 1px solid var(--ez-border); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.ez-body .ez-ov-card .grid-view .summary { font-size: 12px; color: var(--ez-t-secondary); margin-bottom: 8px; }

/* status workflow: centred line, cards alternate left/right */
.ez-body .ez-ov-flow .timeline { container-type: inline-size; }
.ez-body .ez-ov-flow .timeline ul { margin: 8px 0 0; padding: 0; }
.ez-body .ez-ov-flow .timeline ul li { width: 2px; background: repeating-linear-gradient(to bottom, #cbd5e1 0 4px, transparent 4px 8px); padding-bottom: 24px; }
.ez-body .ez-ov-flow .timeline ul li::before {
    width: 22px; height: 22px; top: 22px; border: 3px solid #94a3b8; background: var(--ez-surface);
}
.ez-body .ez-ov-flow .timeline ul li:has(> .content.bg-warning)::before { border-color: #f59e0b; }
.ez-body .ez-ov-flow .timeline ul li:has(> .content.bg-success)::before { border-color: #16a34a; }
.ez-body .ez-ov-flow .timeline ul li:has(> .content.bg-danger)::before { border-color: #dc2626; }
.ez-body .ez-ov-flow .timeline ul li:has(> .content.bg-dark)::before { border-color: #1e3a5f; }
.ez-body .ez-ov-flow .timeline ul li.timeline-start { background: none; }
/* the line runs only from the first circle to START: no theme full-height line, no dashes above the first circle */
.ez-body .ez-ov-flow .timeline::before { content: none !important; display: none !important; }
.ez-body .ez-ov-flow .timeline ul li:first-child:not(.timeline-start) { background-size: 2px calc(100% - 33px); background-position: 0 33px; background-repeat: no-repeat; }
.ez-body .ez-ov-flow .timeline ul li.timeline-start::before {
    top: 0; width: 64px !important; height: 64px !important; padding-top: 0; display: flex; align-items: center; justify-content: center;
    border: 3px solid #dc2626; background: var(--ez-surface); color: var(--ez-t-primary) !important; font-size: 12px; font-weight: 700;
}
.ez-body .ez-ov-flow .timeline ul li .content {
    --tl: #94a3b8; --tl-soft: #f1f5f9;
    width: calc(50cqw - 44px); max-width: 260px; top: 0; padding: 12px;
    background: var(--ez-surface) !important; border: 1.5px solid var(--tl); border-radius: 12px !important;
    box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .35);
}
.ez-body .ez-ov-flow .timeline ul li:nth-child(odd) .content { left: 34px; }
.ez-body .ez-ov-flow .timeline ul li:nth-child(even) .content { left: calc(-1 * (min(50cqw - 44px, 260px)) - 32px); }
.ez-body .ez-ov-flow .timeline ul li .content::before { top: 32px; width: 24px; height: 2px; background: var(--tl); }
.ez-body .ez-ov-flow .timeline ul li:nth-child(odd) .content::before { left: -25px; }
.ez-body .ez-ov-flow .timeline ul li:nth-child(even) .content::before { right: -25px; left: auto; }
.ez-body .ez-ov-flow .timeline ul li .content.bg-warning { --tl: #f59e0b; --tl-soft: #fef3c7; }
.ez-body .ez-ov-flow .timeline ul li .content.bg-success { --tl: #16a34a; --tl-soft: #dcfce7; }
.ez-body .ez-ov-flow .timeline ul li .content.bg-danger  { --tl: #dc2626; --tl-soft: #fee2e2; }
.ez-body .ez-ov-flow .timeline ul li .content.bg-dark    { --tl: #1e3a5f; --tl-soft: #e2e8f0; }
.ez-body .ez-ov-flow .timeline ul li .content * { color: var(--ez-t-primary); }
.ez-body .ez-ov-flow .timeline-content-info { padding: 0; margin: 0 0 8px; background: transparent; }
.ez-body .ez-ov-flow .timeline-content-info-date { font-size: 13px; font-weight: 500; }
.ez-body .ez-ov-flow .timeline-content-info-date i { margin-right: 4px; color: var(--ez-t-secondary) !important; }
.ez-body .ez-ov-flow .timeline ul li .content p { margin: 0; padding: 8px 10px; text-align: left; border-radius: 10px; background: var(--tl-soft); }
.ez-body .ez-ov-flow .timeline ul li .content p b {
    display: inline-flex; align-items: center; border-radius: 999px;
    background: var(--tl); color: #fff !important; font-size: 13px; font-weight: 600;
}
.ez-body .ez-ov-flow .content-skills { margin: 8px 0 0; }
.ez-body .ez-ov-flow .content-skills hr { display: none; }
.ez-body .ez-ov-flow .content-skills span { margin: 0; font-size: 13px; color: var(--ez-t-secondary) !important; display: inline-flex; align-items: center; gap: 6px; }
.ez-body .ez-ov-flow .content-skills span::before {
    content: ""; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* phones: one column, cards to the right of the line */
@media (max-width: 575.98px) {
    .ez-body .ez-ov-head { padding: 16px; }
    .ez-body .ez-ov-head__actions { width: 100%; }
    .ez-body .ez-ov-head__actions .btn { flex: 1 1 auto; }
    .ez-body .ez-ov-flow .timeline ul li { margin-left: 24px; }
    .ez-body .ez-ov-flow .timeline ul li .content,
    .ez-body .ez-ov-flow .timeline ul li:nth-child(even) .content { left: 34px; width: calc(100cqw - 70px); max-width: none; }
    .ez-body .ez-ov-flow .timeline ul li:nth-child(even) .content::before { left: -25px; right: auto; }
    .ez-body .ez-ov table.detail-view > tbody > tr > th { width: 40% !important; }
}
html[data-theme="dark"] .ez-body .ez-ov-card__icon--blue { background: rgba(59, 130, 246, .18); color: #93c5fd; }
html[data-theme="dark"] .ez-body .ez-ov-card__icon--red,
html[data-theme="dark"] .ez-body .ez-ov-head__icon { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.ez-body .card.ez-ov-head { flex-direction: row !important; min-height: 0; }
.ez-body .ez-ov-head__actions .btn.ez-b { min-height: 40px; padding: 0 16px !important; font-size: 14px !important; border-radius: 10px !important; }
.ez-body .ez-ov-notes > .card-header > .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin: 0; }
.ez-body .ez-ov-notes > .card-header > .row > [class*="col"] { flex: 0 1 auto !important; width: auto !important; max-width: none !important; padding: 0; order: 0 !important; }
.ez-body .ez-ov-notes > .card-header > .row > .col-lg-8 { display: flex; justify-content: flex-end; }
.ez-body .ez-ov-flow .timeline ul { margin-bottom: 0; padding-bottom: 72px; }
.ez-body .ez-ov-flow .timeline ul li .content p b { height: auto; min-height: 28px; padding: 4px 14px; line-height: 1.3; }

/* 32. Bootstrap .row inside a scroll wrapper: its negative gutters made the
   wrapper 24px wider than the card, showing an empty sideways scrollbar. */
.ez-body .table-responsive > .row { margin-left: 0; margin-right: 0; }

/* 33. Change Status popup (Update Order Status) — .ez-smodal is added by modern.js
   to any modal holding OrderRout[STATUS_CODE]; status history markup is orders/status.php */
.ez-body .ez-smodal:not(.ez-gmodal) .modal-dialog { max-width: 640px; }
.ez-body .ez-smodal .modal-content { border-radius: 20px; }
.ez-body .ez-smodal .modal-header { align-items: flex-start; padding: 24px 28px; background: var(--ez-surface); }
.ez-body .ez-smodal__head { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; }
.ez-body .ez-smodal__icon {
    flex: 0 0 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ez-b-red-soft, #FEE2E2); color: var(--ez-b-red, #DC2626);
}
.ez-body .ez-smodal__icon .material-icons-round { font-size: 30px; }
.ez-body .ez-smodal .modal-title { font-size: 22px !important; line-height: 28px; font-weight: 700; color: var(--ez-t-primary); }
.ez-body .ez-smodal__sub { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ez-t-secondary); }
.ez-body .ez-smodal .modal-header .btn-close {
    flex: 0 0 40px; width: 40px; height: 40px; margin: 0 0 0 12px; padding: 0; border-radius: 10px;
    border: 1px solid var(--ez-border); background-color: var(--ez-surface-2); background-size: 12px; opacity: 1;
}
.ez-body .ez-smodal .modal-header .btn-close:hover { background-color: var(--ez-surface-3); }
.ez-body .ez-smodal .modal-body { padding: 24px 28px 8px; }
.ez-body .ez-smodal .modal-body .form-group,
.ez-body .ez-smodal .modal-body .mb-3 { margin-bottom: 20px !important; }
.ez-body .ez-smodal .modal-body label.control-label,
.ez-body .ez-smodal .modal-body .form-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ez-t-primary); }
.ez-body .ez-smodal .required > label.control-label::after { content: " *"; color: var(--ez-t-error); }
.ez-body .ez-smodal .modal-body .form-select { height: 48px; padding: 0 40px 0 16px; border-radius: 10px; font-size: 14px; }
.ez-body .ez-smodal .modal-body textarea.form-control { border-radius: 10px; padding: 12px 16px; }
/* previous reschedule notes (built by the page script) → info box */
.ez-body .ez-smodal [id^="view-previous-reschedule-notes"] > .card,
.ez-body .ez-smodal [id^="previous-reschedule-notes"] > .card {
    position: relative; padding: 18px 20px 18px 76px !important; margin-bottom: 20px !important;
    border: 1px solid #BFDBFE; border-radius: 14px; background: #EFF6FF !important; color: #1E3A8A !important;
    font-size: 14px !important; box-shadow: none;
}
.ez-body .ez-smodal [id*="previous-reschedule-notes"] > .card::before {
    content: "i"; position: absolute; left: 20px; top: 18px; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #2563EB; color: #fff;
    font: 700 20px/1 Georgia, serif;
}
.ez-body .ez-smodal [id*="previous-reschedule-notes"] > .card > strong { font-size: 15px; font-weight: 600; color: #1E3A8A; }
.ez-body .ez-smodal [id*="previous-reschedule-notes"] > .card > strong > .fa { display: none; }
.ez-body .ez-smodal [id*="previous-reschedule-notes"] > .card ul { margin-top: 6px; padding-left: 18px !important; color: var(--ez-t-secondary); }
.ez-body .ez-smodal [id*="previous-reschedule-notes"] > .card li::marker { color: #2563EB; }
.ez-body .ez-smodal [id*="previous-reschedule-notes"] > .card .text-muted { color: var(--ez-t-secondary) !important; }
/* status history */
.ez-body .ez-smodal .ez-sh__title {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 16px; padding-top: 20px;
    border-top: 1px solid var(--ez-border); font-size: 18px; font-weight: 600; color: var(--ez-t-primary);
}
.ez-body .ez-smodal .ez-sh__title .material-icons-round { font-size: 24px; }
.ez-body .ez-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.ez-body .ez-sh__step {
    --sh: #374151; --sh-ink: #fff; --sh-soft: #F3F4F6;
    flex: 0 0 128px; padding: 8px 8px 10px; border-radius: 12px; background: var(--sh-soft); text-align: center;
}
.ez-body .ez-sh__step--success { --sh: #16A34A; --sh-soft: #ECFDF3; }
.ez-body .ez-sh__step--danger  { --sh: #DC2626; --sh-soft: #FEF2F2; }
.ez-body .ez-sh__step--warning { --sh: #F59E0B; --sh-ink: #111827; --sh-soft: #FFF7ED; }
.ez-body .ez-sh__pill {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin-bottom: 8px; padding: 4px 8px;
    border-radius: 8px; background: var(--sh); color: var(--sh-ink); font-size: 13px; font-weight: 600; line-height: 1.2;
}
.ez-body .ez-sh__pill .material-icons-round { font-size: 18px; }
.ez-body .ez-sh__step--dark .ez-sh__pill .material-icons-round { font-size: 12px; }
.ez-body .ez-sh__date { font-size: 13px; font-weight: 600; color: var(--ez-t-primary); line-height: 18px; }
.ez-body .ez-sh__meta { font-size: 12px; color: var(--ez-t-secondary); line-height: 18px; }
.ez-body .ez-sh__arrow { font-size: 18px; color: var(--ez-t-primary); }
.ez-body .ez-sh__step--next { background: transparent; border: 1.5px dashed var(--ez-border-strong); }
.ez-body .ez-sh__step--next .ez-sh__pill { background: var(--ez-surface-2); color: var(--ez-t-secondary); font-weight: 500; }
.ez-body .ez-sh__step--next .ez-sh__meta { color: var(--ez-t-muted); }
.ez-body .ez-smodal .modal-footer { padding: 20px 28px; gap: 12px; background: var(--ez-surface); }
.ez-body .ez-smodal .modal-footer .btn { min-width: 120px; }
/* Add Your Note popup (note/_formpop, _formpopupdate load into #modalContent): 540px wide, labels above
   fields, calendar icon in Reminder Date, buttons in a separated footer like the other popups */
.ez-body .modal:has(#my-form-id) .modal-dialog { max-width: 540px; }
.ez-body .note-form .form-group, .ez-body .note-form .ez-note-date { margin-bottom: 16px; }
.ez-body .note-form label { display: block; margin: 0 0 6px; font-size: var(--ez-fs-sm); font-weight: 600; color: var(--ez-text); }
.ez-body .note-form textarea.form-control { min-height: 120px; resize: vertical; }
.ez-body .note-form .ez-note-date input.form-control { width: 100%; }
.ez-body .note-form .ez-note-foot { display: flex; justify-content: flex-end; gap: 12px; margin: 22px -28px 0; padding: 20px 28px 12px; border-top: 1px solid var(--ez-border); }
.ez-body .note-form .ez-note-foot .btn { min-width: 120px; margin: 0; }
@media (max-width: 575.98px) { .ez-body .note-form .ez-note-foot { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; } }
@media (max-width: 575.98px) {
    .ez-body .ez-smodal .modal-header, .ez-body .ez-smodal .modal-body, .ez-body .ez-smodal .modal-footer { padding-left: 18px; padding-right: 18px; }
    .ez-body .ez-smodal__icon { flex-basis: 44px; height: 44px; border-radius: 12px; }
    .ez-body .ez-smodal__icon .material-icons-round { font-size: 24px; }
    .ez-body .ez-smodal .modal-title { font-size: 18px !important; line-height: 24px; }
    .ez-body .ez-sh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .ez-body .ez-sh__arrow { display: none; }
}
.ez-body .ez-smodal .modal-header .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: center !important;
}
.ez-body .ez-smodal .modal-body .form-group.field-orders-order_code,
.ez-body .ez-smodal .modal-body .form-group.field-orderrout-order_code { margin: 0 !important; }
.ez-body .ez-smodal .modal-body .form-select:has(option:checked[value=""]) { color: var(--ez-t-muted); }
.ez-body .ez-smodal .modal-body .form-select option { color: var(--ez-t-primary); }

/* 34. Order View: thin separator under every card header */
.ez-body .ez-ov-card__head:not(.ez-ov-card__head--inline) { padding: 16px 20px; border-bottom: 1px solid var(--ez-border); margin-bottom: 16px; }
.ez-body .ez-ov-notes > .card-header { padding: 16px 20px !important; border-bottom: 1px solid var(--ez-border); margin-bottom: 16px; }

/* 35. Order View: Order Information + Customer Details + Order Items in one card */
.ez-body .ez-ov-main > .ez-ov-sec { border-top: 1px solid var(--ez-border); }
.ez-body .ez-ov-side { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.ez-body .ez-ov-side > .card { margin-bottom: 0; margin: 0 !important; }
.ez-body .ez-ov-side > .ez-ov-notes { flex: 0 0 auto; }
.ez-body .ez-ov-main > .ez-ov-sec > .card-body { padding-top: 0 !important; }
.ez-body .ez-ov-main > .ez-ov-sec > .card-body > .detail-view,
.ez-body .ez-ov-main > .ez-ov-sec > .card-body > .table { margin-top: 0 !important; }

/* 36. Print Waybill template popup (.ez-pmodal, added by modern.js) */
.ez-body .ez-pmodal .modal-dialog { max-width: 520px; }
.ez-body .ez-pmodal .ez-dup-label { display: none !important; }
.ez-body .ez-pmodal .ez-pmodal__label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ez-t-primary); }
.ez-body .ez-pmodal .modal-body { padding-bottom: 24px; }
.ez-body .ez-pmodal [role="radiogroup"], .ez-body .ez-pmodal #template { display: flex; flex-wrap: wrap; gap: 10px; }
.ez-body .ez-pmodal #template > label {
    display: inline-flex; align-items: center; gap: 8px; min-width: 76px; height: 44px; margin: 0; padding: 0 16px;
    border: 1px solid var(--ez-border); border-radius: 10px; background: var(--ez-surface);
    font-size: 14px; font-weight: 500; color: var(--ez-t-primary); cursor: pointer;
}
.ez-body .ez-pmodal #template > label:hover { border-color: var(--ez-border-strong); }
.ez-body .ez-pmodal #template > label:has(input:checked) { border-color: #2563EB; background: #EFF6FF; color: #1D4ED8; }
.ez-body .ez-pmodal #template input[type="radio"] { margin: 0; accent-color: #2563EB; }

/* 37. "Confirmation for ..." popups (.ez-cmodal, added by modern.js); icon tinted by action */
.ez-body .ez-cmodal .modal-dialog { max-width: 520px; }
.ez-body .ez-cmodal .modal-title { text-align: left !important; width: auto !important; }
.ez-body .ez-smodal--warning .ez-smodal__icon { background: #FFEDD5; color: #EA580C; }
.ez-body .ez-smodal--success .ez-smodal__icon { background: #DCFCE7; color: #16A34A; }
.ez-body .ez-smodal--danger .ez-smodal__icon { background: #FEE2E2; color: #DC2626; }
.ez-body .ez-smodal--primary .ez-smodal__icon { background: #DBEAFE; color: #2563EB; }
.ez-body .ez-cmodal .modal-body { padding: 0; }
.ez-body .ez-cmodal .modal-body .orders-form > *:not(.ez-cmodal__actions) { margin: 20px 28px 0; }
.ez-body .ez-cmodal .modal-body .orders-form > [style*="display: none"],
.ez-body .ez-cmodal .modal-body .orders-form > input[type="hidden"] { margin: 0; }
.ez-body .ez-cmodal .ez-cmodal__actions { margin: 0; padding: 20px 28px; }
.ez-body .ez-cmodal .ez-cmodal__actions > [class*="col"] {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 0; text-align: right !important;
}
.ez-body .ez-cmodal .ez-cmodal__actions .btn { min-width: 120px; margin: 0 !important; text-transform: capitalize; }
@media (max-width: 575.98px) {
    .ez-body .ez-cmodal .modal-body .orders-form > *:not(.ez-cmodal__actions) { margin-left: 18px; margin-right: 18px; }
    .ez-body .ez-cmodal .ez-cmodal__actions { padding: 18px; }
    .ez-body .ez-cmodal .ez-cmodal__actions .btn { flex: 1 1 0; }
}

/* 38. All other popups (.ez-gmodal, added by modern.js): same header/footer pattern, size kept */
.ez-body .ez-gmodal .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-sm) { max-width: 560px; }
.ez-body .ez-gmodal .modal-header { background: var(--ez-surface) !important; background-image: none !important; color: var(--ez-t-primary) !important; }
.ez-body .ez-gmodal .modal-title { color: var(--ez-t-primary) !important; text-align: left !important; width: auto !important; }
.ez-body .ez-smodal .modal-title > i,
.ez-body .ez-smodal .modal-title > .material-icons { display: none; }
.ez-body .ez-smodal .btn-close-white { filter: none; }
.ez-body .ez-gmodal .modal-body { padding-bottom: 24px; }
/* alerts that mix text with inline tags (<strong>, <span>…) must flow as text, not flex columns */
.ez-body .alert:has(> strong, > b, > span, > br, > code):not(:has(> div, > p, > ul)) { display: block; }
.ez-body .alert:has(> strong, > b, > span, > br, > code):not(:has(> div, > p, > ul)) > .fa:first-child { margin-right: 6px; }

/* 39. Admin dashboard (site/admin-dashboard) — same card system as the user dashboard */
.ez-dcard__icon--green { --k: #16a34a; }
.ez-dcard__icon--blue { --k: #2563eb; }
.ez-dcard__icon--amber { --k: #f59e0b; }
/* KPI cards with a per-store table under the numbers */
.ez-kpi--stores { flex-wrap: wrap; align-items: flex-start; }
.ez-kpi__stores { position: relative; z-index: 1; flex: 1 0 100%; margin-top: 6px; }
.ez-kpi__stores .table { margin: 0; background: transparent; font-size: 12px; }
.ez-kpi__stores .table thead td { padding: 6px 4px !important; border-bottom: 1px solid color-mix(in srgb, var(--k) 18%, #e5e7eb) !important; color: #374151; font-weight: 600; }
.ez-kpi__stores .table tbody td { padding: 5px 4px !important; border: 0 !important; color: #4b5563; background: transparent !important; }
.ez-kpi__stores .table td:not(:first-child) { text-align: right; width: 16%; }
.ez-adm-kpis > [class*="col"] { margin-bottom: 1.5rem !important; }
/* card bodies: tables fill the card */
.ez-adm .ez-dcard .card-body { padding: 8px 18px 18px !important; }
.ez-adm .ez-dcard .table-responsive { border: 0; }
.ez-adm-wallet .table, .ez-adm-sales .table, .ez-adm-smswallet .table { font-size: 13px !important; }
.ez-adm-wallet .table thead td, .ez-adm-sales .table thead td, .ez-adm-smswallet .table thead td,
.ez-adm-wallet .table thead th, .ez-adm-sales .table thead th, .ez-adm-smswallet .table thead th {
    background: var(--ez-surface-2, #f9fafb); color: #374151; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ez-adm .ez-dcard .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
/* payment tiles: two blocks (This Month / Up to Now), four tiles each */
.ez-adm-pay__cols { display: grid; gap: 16px; }
.ez-ovpay__label { margin: 0 0 8px; color: var(--ez-t-secondary, #6b7280); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ez-ovpay__grid { display: grid; gap: 8px; }
.ez-ovpay__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; padding: 10px 6px;
    border-radius: 12px; text-align: center;
}
.ez-ovpay__tile strong { font-size: 18px; font-weight: 700; line-height: 1.2; word-break: break-all; }
.ez-ovpay__tile span { font-size: 12px; opacity: .9; }
.ez-ovpay__tile--warning { background: #f59e0b; }
.ez-ovpay__tile--navy { background: #1e2a78; }
.ez-ovpay__tile--slate { background: #475569; }
.ez-ovpay__tile--success { background: #16a34a; }
.ez-ovpay__tile--danger { background: #dc2626; }
/* Remaining SMS Count banner */
.ez-smsbanner { display: flex; flex-direction: row !important; align-items: center; gap: 16px; padding: 20px 22px; border: 0 !important; border-radius: 18px !important; color: #fff; }
.ez-smsbanner--ok { background: linear-gradient(135deg, #16a34a, #15803d) !important; }
.ez-smsbanner--low { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
.ez-smsbanner__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.18); }
.ez-smsbanner__icon .material-icons { color: #fff; font-size: 28px; }
.ez-smsbanner__text { display: flex; flex-direction: column; }
.ez-smsbanner h4 { color: #fff !important; font-size: 26px; font-weight: 800; line-height: 1.1; }
.ez-smsbanner span { color: rgba(255,255,255,.92); font-size: 14px; font-weight: 500; }
/* User Performance toggle */
.ez-perf-toggle { display: inline-flex !important; gap: 4px !important; padding: 3px; border-radius: 10px; background: var(--ez-surface-2, #f3f4f6); }
.ez-perf-toggle .perf-toggle-btn { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 500; }
.ez-perf-toggle .perf-toggle-btn.active-toggle { background: #e11d2a; color: #fff; }
.ez-adm-failed .ez-dcard__actions .badge { min-width: 28px; padding: 6px 10px; border-radius: 999px; background: #fee2e2 !important; color: #dc2626 !important; font-size: 12px; }
.ez-adm .ez-dcard.mt-4 { margin-top: 0 !important; margin-bottom: 1.5rem; }
@media (max-width: 575.98px) {
    .ez-adm-pay__cols { grid-template-columns: 1fr; }
}
.ez-body .ez-perf-toggle .perf-toggle-btn.active-toggle { background-color: #e11d2a !important; color: #fff !important; }
.ez-kpi--stores .ez-kpi__body { flex: 1 1 0; }
.ez-kpi--stores .ez-kpi__meta { white-space: normal; }
.ez-kpi__stores .table td { word-break: normal !important; overflow-wrap: normal !important; white-space: normal; }
.ez-kpi__stores .table td:not(:first-child) { white-space: nowrap; }
.ez-adm-pay__cols, .ez-ovpay__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ez-adm-pay .card-body { padding: 8px 18px 18px !important; }
.ez-adm-wallet .table td, .ez-adm-wallet .table th { padding: 8px 6px !important; font-size: 12.5px !important; word-break: normal !important; }
.ez-adm-wallet .table td:first-child { white-space: nowrap; }
.ez-adm-failed .table td, .ez-adm-failed .table th { word-break: normal !important; }
/* dashboard tables size columns to whole words (the compact-grid "anywhere" wrap split names mid-word) */
html.ez-grid-compact .ez-content .ez-adm-kpis table.table > tbody > tr > td,
html.ez-grid-compact .ez-content .ez-adm table.table > tbody > tr > td,
html.ez-grid-compact .ez-content .ez-adm table.table > thead > tr > th,
.ez-body .ez-adm-kpis table.table td, .ez-body .ez-adm table.table td { overflow-wrap: break-word !important; word-break: normal !important; }
/* side-by-side cards in the same inner row keep their own height (no stretched blank space) */
.ez-adm .row > [class*="col"] > .ez-dcard { height: auto !important; }
/* KPI "this month / up to now" line wraps instead of being cut off on narrower cards */
.ez-kpi__body { flex: 1 1 0; }
.ez-kpi__meta { white-space: normal; }

/* 40. Admin dashboard overview tiles: tinted background + small icon (layout and sizes unchanged) */
.ez-ovpay__tile { --t: #f59e0b; background: color-mix(in srgb, var(--t) 12%, #fff) !important; border: 1px solid color-mix(in srgb, var(--t) 22%, #fff); color: #111827; }
.ez-ovpay__tile--warning { --t: #f59e0b; }
.ez-ovpay__tile--navy { --t: #2563eb; }
.ez-ovpay__tile--slate { --t: #475569; }
.ez-ovpay__tile--success { --t: #16a34a; }
.ez-ovpay__tile--danger { --t: #dc2626; }
.ez-ovpay__icon { display: inline-flex; line-height: 1; }
.ez-ovpay__icon .material-icons { color: var(--t); font-size: 18px; }
.ez-ovpay__tile strong { color: #111827; }
.ez-ovpay__tile span:not(.ez-ovpay__icon) { color: #4b5563; opacity: 1; }
html[data-theme="dark"] .ez-ovpay__tile { background: color-mix(in srgb, var(--t) 16%, var(--ez-surface)) !important; color: var(--ez-text); }
html[data-theme="dark"] .ez-ovpay__tile strong { color: var(--ez-heading); }
/* dashboard table cells flagged red/green (low stock, good sales): light tint, dark text */
.ez-body .ez-dcard td.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; font-weight: 600; }
.ez-body .ez-dcard td.bg-success { background: #dcfce7 !important; color: #15803d !important; font-weight: 600; }
.ez-body .ez-dcard td.bg-warning { background: #fef3c7 !important; color: #b45309 !important; font-weight: 600; }
/* dashboard Total rows (dark bg-dark rows in My Wallet / SMS Wallet): light grey, bold dark text, top border */
.ez-body .ez-dcard tr.bg-dark,
.ez-body .ez-dcard tr.bg-dark > td { background: #f3f4f6 !important; --bs-table-accent-bg: transparent; color: #111827 !important; }
.ez-body .ez-dcard tr.bg-dark > td { border-top: 2px solid #d1d5db !important; font-weight: 700 !important; }
.ez-body .ez-dcard tr.bg-dark > td.text-white { color: #111827 !important; }
.ez-body .ez-dcard tr.bg-dark > td.text-success { color: #15803d !important; }
.ez-body .ez-dcard tr.bg-dark > td.text-danger { color: #b91c1c !important; }
html[data-theme="dark"] .ez-body .ez-dcard tr.bg-dark > td { background: var(--ez-surface-2) !important; color: var(--ez-heading) !important; border-top-color: var(--ez-border) !important; }

/* ==========================================================================
   41. Order grids: Delivery Charge + Actual Delivery Charge in one column
   ========================================================================== */
.ez-body .ez-charge-filters__item--hidden { display: none !important; }
.ez-body .ez-charge-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ez-body .ez-charge-cell__value { font-variant-numeric: tabular-nums; }
.ez-body .ez-charge-cell__actual { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; color: #2563eb; }
.ez-body .ez-charge-cell__actual > small { font-size: 11px; font-weight: 500; }
.ez-body .ez-charge-cell__actual--none { color: var(--ez-text-muted, #9ca3af); }
html[data-theme="dark"] .ez-body .ez-charge-cell__actual:not(.ez-charge-cell__actual--none) { color: #60a5fa; }

/* ==========================================================================
   42. Edit Order: "Add Products" side panel (same column size as Create Order)
   ========================================================================== */
.ez-body .ez-addp > .card-body { padding: 18px; }
.ez-body .ez-addp__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--ez-border, #e5e7eb); }
.ez-body .ez-addp__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fee2e2; color: #dc2626; }
.ez-body .ez-addp__icon > i { font-size: 22px; }
.ez-body .ez-addp__title { font-size: 16px; font-weight: 700 !important; color: var(--ez-heading, #111827); line-height: 1.25; }
.ez-body .ez-addp__sub { display: block; font-size: 12px; color: var(--ez-text-secondary, #6b7280); line-height: 1.35; margin-top: 2px; }
.ez-body .ez-addp__grid { font-size: 13px; }
.ez-body .ez-addp__grid > .summary { font-size: 12px; color: var(--ez-text-secondary, #6b7280); margin-bottom: 8px; }
.ez-body .ez-addp__grid table.table { width: 100%; table-layout: auto; margin-bottom: 0; border: 1px solid var(--ez-border, #e5e7eb); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.ez-body .ez-addp__grid table.table > thead > tr > th { font-size: 12px !important; font-weight: 600; padding: 10px 12px !important; white-space: nowrap; background: var(--ez-surface-2, #f9fafb); }
.ez-body .ez-addp__grid table.table > tbody > tr > td { font-size: 13px !important; padding: 10px 12px !important; vertical-align: middle; border-top: 1px solid var(--ez-border, #eef0f3); }
/* Waybill ID: takes the free width, one line */
.ez-body .ez-addp__grid table.table > thead > tr > th:first-child,
.ez-body .ez-addp__grid table.table > tbody > tr > td:first-child { width: auto !important; white-space: nowrap !important; word-wrap: normal !important; font-weight: 600; color: var(--ez-heading, #111827); }
/* Items and Actions: narrow */
.ez-body .ez-addp__grid table.table > thead > tr > th:nth-child(2),
.ez-body .ez-addp__grid table.table > tbody > tr > td:nth-child(2) { width: 1%; white-space: nowrap; text-align: center; }
.ez-body .ez-addp__grid table.table > thead > tr > th:last-child,
.ez-body .ez-addp__grid table.table > tbody > tr > td:last-child { width: 1% !important; white-space: nowrap !important; text-align: center; }
.ez-body .ez-addp__grid .pagination { flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 12px 0 0; }
.ez-body .ez-addp__grid table.table > thead > tr > th a { font-size: 12px !important; }
.ez-body .ez-addp__grid table.table > tbody > tr > td:last-child a {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 8px; background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb;
}
.ez-body .ez-addp__grid table.table > tbody > tr > td:last-child a:hover { background: #dbeafe; }
html[data-theme="dark"] .ez-body .ez-addp__grid table.table > tbody > tr > td:last-child a { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); color: #93c5fd; }
html[data-theme="dark"] .ez-body .ez-addp__icon { background: rgba(220,38,38,.15); }
.ez-body .ez-addp__grid table.table > tbody > tr > td:first-child { max-width: 0; width: 100% !important; }
.ez-body .ez-addp__wb { display: block; }
.ez-body .ez-addp__desc { display: block; font-size: 12px; font-weight: 400; color: var(--ez-text-secondary, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* ==========================================================================
   43. Bulk Orders (orders/bulk): section header, labels above fields, waybill card
   ========================================================================== */
.ez-body .ez-bulk { border-radius: var(--ez-radius-xl, 16px); }
.ez-body .ez-bulk > .card-body { padding: 20px 22px 6px !important; }
.ez-body .ez-bulk .panel, .ez-body .ez-bulk .panel-body { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ez-body .ez-bulk__head { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-bulk__top { row-gap: 16px; align-items: flex-end; }
.ez-body .ez-bulk__top > .ez-of > label {
    display: block; margin: 0 0 6px; font-size: var(--ez-fs-sm); font-weight: 600; line-height: 1.3; color: var(--ez-text);
}
.ez-body .ez-bulk__top .form-select { width: 100%; }
.ez-body .ez-bulk__cust:not(:has(#selcted-customer > *)) { display: none; }
.ez-body .ez-bulk__top > div:has(> .ez-wb) { margin-left: auto; }
.ez-body .ez-bulk .ez-wb { margin: 0; }
.ez-body .ez-bulk .ez-wb #waybill-count { display: block; font-size: 1.6rem !important; font-weight: 800 !important; line-height: 1.15; overflow-wrap: anywhere; }
.ez-body .ez-bulk .ez-wb #waybill-count.text-danger { font-size: 1rem !important; }
.ez-body .ez-bulk .multiple-input { overflow-x: auto; }
html .ez-body .ez-bulk .ez-content table.table.multiple-input-list, html .ez-body .ez-content .ez-bulk table.table.multiple-input-list { min-width: 1500px !important; }
.ez-body .ez-bulk table.multiple-input-list > thead > tr > th { white-space: nowrap; font-size: 12px; }
/* Bulk Orders: phone cells show a fixed "0" in front (numbers are typed without it; value unchanged) */
.ez-body td.list-cell__CUSTOMER_PHONE_1 > .form-group,
.ez-body td.list-cell__CUSTOMER_PHONE_2 > .form-group { position: relative; margin: 0; }
.ez-body td.list-cell__CUSTOMER_PHONE_1 > .form-group::before,
.ez-body td.list-cell__CUSTOMER_PHONE_2 > .form-group::before {
    content: "0"; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; z-index: 1; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: var(--ez-text, #374151);
    background: var(--ez-surface-2, #f3f4f6); border-right: 1px solid var(--ez-border, #e5e7eb);
}
.ez-body td.list-cell__CUSTOMER_PHONE_1 > .form-group > input,
.ez-body td.list-cell__CUSTOMER_PHONE_2 > .form-group > input { padding-left: 38px !important; }
html .ez-body .ez-content .ez-bulk table.table.multiple-input-list > tbody > tr > td.list-cell__CUSTOMER_PHONE_1,
html .ez-body .ez-content .ez-bulk table.table.multiple-input-list > tbody > tr > td.list-cell__CUSTOMER_PHONE_2 { min-width: 140px !important; width: 140px !important; }

/* Bulk Orders: existing-customer card (orders/_customer_inline), same shape as the Waybill Remaining card */
.ez-body .ez-cinl { margin: 0; border: 1px solid #bfdbfe; border-radius: 14px; overflow: hidden; }
.ez-body .ez-cinl > .card-body { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px !important; }
.ez-body .ez-cinl > .card-body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: #2563eb; }
.ez-body .ez-cinl__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #dbeafe; color: #2563eb; }
.ez-body .ez-cinl__icon .material-icons { font-size: 24px; }
.ez-body .ez-cinl__text { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-cinl__text > small { display: block; font-size: 12px; font-weight: 600; color: var(--ez-text-muted); }
.ez-body .ez-cinl__name { display: block; font-size: 14px; font-weight: 700; color: var(--ez-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-body .ez-cinl__rows { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.ez-body .ez-cinl__row { display: inline-flex; align-items: center; gap: 4px; }
.ez-body .ez-cinl__lbl { font-size: 12px; font-weight: 600; color: var(--ez-text-secondary, #6b7280); margin-right: 2px; }
.ez-body .ez-cinl__n, .ez-body .ez-cinl__none {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px;
    border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ez-body .ez-cinl__n--new { background: var(--ez-bd-dark-bg, #e5e7eb); color: var(--ez-bd-dark-fg, #111827); }
.ez-body .ez-cinl__n--return { background: var(--ez-bd-danger-bg, #fee2e2); color: var(--ez-bd-danger-fg, #b91c1c); }
.ez-body .ez-cinl__n--delivered { background: var(--ez-bd-success-bg, #dcfce7); color: var(--ez-bd-success-fg, #15803d); }
.ez-body .ez-cinl__n--going { background: var(--ez-bd-warning-bg, #fef3c7); color: var(--ez-bd-warning-fg, #b45309); }
.ez-body .ez-cinl__none { background: var(--ez-bd-plain-bg, #f1f5f9); color: var(--ez-text-muted); font-weight: 500; }
.ez-body .ez-cinl__view { flex: 0 0 auto; margin: 0 !important; }
html[data-theme="dark"] .ez-body .ez-cinl { border-color: rgba(59,130,246,.35); }
html[data-theme="dark"] .ez-body .ez-cinl__icon { background: rgba(59,130,246,.18); color: #93c5fd; }

/* helper note box (Bulk Orders: "Waybill ID and Order Number may change after saving.") */
.ez-body .ez-hnote { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 20px; border: 1px solid; }
.ez-body .ez-hnote > .material-icons { font-size: 18px; line-height: 20px; flex: 0 0 auto; }
.ez-body .ez-hnote--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ez-body .ez-hnote--warning > .material-icons { color: #d97706; }
html[data-theme="dark"] .ez-body .ez-hnote--warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #fcd34d; }

/* Bulk Orders: Add Items popup (#myModal) wide enough to enter items */
.ez-body #myModal:not(.ez-lmodal):not(.ez-cmodal) .modal-dialog { max-width: min(1100px, calc(100vw - 32px)); }
.ez-body #myModal .multiple-input { overflow-x: auto; }
html .ez-body #myModal table.multiple-input-list { min-width: 860px !important; width: 100% !important; }
.ez-body #myModal table.multiple-input-list > thead > tr > th { white-space: nowrap; }
.ez-body #myModal table.multiple-input-list > tbody > tr > td { vertical-align: middle; }
html .ez-body #myModal table.table.multiple-input-list > tbody > tr > td.list-cell__ITEM_CODE { min-width: 280px !important; width: 30% !important; }
.ez-body #myModal table.multiple-input-list td.list-cell__ITEM_CODE .select2-container { width: 100% !important; }
.ez-body #myModal table.multiple-input-list td[class*="list-cell__"] input.form-control:not([type="hidden"]),
.ez-body #myModal table.multiple-input-list td[class*="list-cell__"] input[type="text"] { min-height: 40px; min-width: 90px; width: 100%; }
html .ez-body #myModal table.table.multiple-input-list > tbody > tr > td.list-cell__DESCRIPTION { min-width: 200px !important; }
html .ez-body #myModal table.multiple-input-list td[class*="list-cell__"] input[type="text"]:not([type="hidden"]) { border: 1px solid var(--ez-border-strong, #d1d5db) !important; border-radius: 8px !important; background-color: var(--ez-surface, #fff); }
html .ez-body #myModal table.multiple-input-list td[class*="list-cell__"] input[type="text"]:disabled, html .ez-body #myModal table.multiple-input-list td[class*="list-cell__"] input[type="text"][readonly] { background-color: var(--ez-surface-2, #f3f4f6); }
/* Bulk Orders: customer card and Waybill Remaining card share one height and padding */
.ez-body .ez-bulk .ez-wb, .ez-body .ez-bulk .ez-cinl { height: 84px; }
.ez-body .ez-bulk .ez-wb > .card-body, .ez-body .ez-bulk .ez-cinl > .card-body { height: 100%; padding: 12px 14px 12px 20px !important; align-items: center; }

/* ==========================================================================
   44. Edit Order popup (Bulk Orders, orders/_formEdit): sections, labels above icon fields
   ========================================================================== */
.ez-body .ez-eform { padding: 0 !important; }
.ez-body .ez-esec { margin: 0 0 14px; padding: 16px 18px 2px; border: 1px solid var(--ez-border); border-radius: 14px; background: var(--ez-surface); }
.ez-body .ez-esec__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.ez-body .ez-esec__head h6 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ez-heading); }
.ez-body .ez-esec__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; }
.ez-body .ez-esec__icon .material-icons { font-size: 18px; }
.ez-body .ez-esec__icon--blue { background: #e8f0ff; color: #2563eb; }
.ez-body .ez-esec__icon--pink { background: #ffe8ef; color: #e11d48; }
.ez-body .ez-esec__icon--amber { background: #fef3c7; color: #d97706; }
.ez-body .ez-esec__icon--green { background: #dcfce7; color: #16a34a; }
.ez-body .ez-egrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 0 16px; }
.ez-body .ez-ef { min-width: 0; margin-bottom: 14px; }
.ez-body .ez-ef--wide { grid-column: span 2; }
.ez-body .ez-ef__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ez-text); }
.ez-body .ez-ef .form-group, .ez-body .ez-ef [class*="field-"] { margin: 0 !important; }
.ez-body .ez-ef .form-control, .ez-body .ez-ef .form-select { height: 40px; width: 100%; }
.ez-body .ez-ef .form-control:disabled, .ez-body .ez-ef .form-control[readonly] { background-color: var(--ez-surface-2, #f3f4f6) !important; color: var(--ez-text-muted); cursor: not-allowed; }
/* phone: fixed "0" box in front (typed without it; value unchanged) */
.ez-body .ez-ef--phone .form-group { position: relative; }
.ez-body .ez-ef--phone .form-group::before {
    content: "0"; position: absolute; left: 1px; top: 1px; height: 38px; width: 40px; z-index: 1; pointer-events: none;
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--ez-text);
    background: var(--ez-surface-2, #f3f4f6); border-right: 1px solid var(--ez-border); border-radius: 7px 0 0 7px;
}
.ez-body .ez-ef--phone .form-control { padding-left: 52px !important; }
.ez-body .ez-eform__foot { margin: 6px 0 0 !important; padding-top: 14px !important; }
@media (max-width: 991.98px) { .ez-body .ez-egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ez-body .ez-egrid { grid-template-columns: 1fr; } .ez-body .ez-ef--wide { grid-column: auto; } }
.ez-body .ez-ef select.form-control, .ez-body .ez-ef .form-select { height: 40px !important; min-height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.ez-body .ez-ef .help-block:empty, .ez-body .ez-ef .invalid-feedback:empty { display: none; }
html .ez-body .modal .ez-eform .ez-egrid > .ez-ef > .form-group { margin: 0 !important; }

/* Edit Order popup: compact so every field and Save fit on a 1366x768 laptop without scrolling */
.ez-body #orderEdit .modal-dialog { margin-top: 12px; margin-bottom: 12px; }
.ez-body #orderEdit .modal-header { padding: 12px 20px !important; }
.ez-body #orderEdit .ez-smodal__head { gap: 12px; }
.ez-body #orderEdit .ez-smodal__icon { flex-basis: 40px !important; width: 40px !important; height: 40px !important; border-radius: 12px; }
.ez-body #orderEdit .ez-smodal__icon .material-icons, .ez-body #orderEdit .ez-smodal__icon i { font-size: 20px !important; }
.ez-body #orderEdit .modal-title { font-size: 18px !important; line-height: 24px !important; }
.ez-body #orderEdit .ez-smodal__sub { margin-top: 0; font-size: 12px; line-height: 16px; }
.ez-body #orderEdit .modal-body { padding: 4px 20px 0 !important; }
.ez-body #orderEdit .ez-eform > form > .alert { margin: 8px 0; }
html .ez-body #orderEdit .ez-eform .ez-ef .form-control,
html .ez-body #orderEdit .ez-eform .ez-ef .form-select,
html .ez-body #orderEdit .ez-eform .ez-ef select.form-control { height: 36px !important; min-height: 36px !important; font-size: 13px; }
.ez-body #orderEdit .ez-ef--phone .form-group::before { height: 34px; }
.ez-body #orderEdit .ez-ef__label { margin-bottom: 4px; font-size: 12px; line-height: 16px; }
.ez-body #orderEdit .ez-ef { margin-bottom: 10px; }
@media (min-width: 992px) {
    /* section title sits in a narrow left column, fields to its right: no title rows */
    .ez-body #orderEdit .ez-esec {
        display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start;
        margin: 0; padding: 10px 0 2px; border: 0; border-radius: 0; background: none;
    }
    .ez-body #orderEdit .ez-esec + .ez-esec { border-top: 1px solid var(--ez-border); }
    .ez-body #orderEdit .ez-esec__head { margin: 18px 0 0; gap: 8px; }
    .ez-body #orderEdit .ez-esec__head h6 { font-size: 13px; line-height: 16px; }
    .ez-body #orderEdit .ez-esec__icon { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; }
    .ez-body #orderEdit .ez-esec__icon .material-icons { font-size: 16px; }
}
/* footer stays visible at the bottom while the popup scrolls */
.ez-body #orderEdit .ez-eform__foot {
    position: sticky; bottom: 0; z-index: 2; margin: 4px -20px 0 !important; padding: 12px 20px !important;
    background: var(--ez-surface); border-top: 1px solid var(--ez-border) !important;
}
.ez-body #orderEdit .ez-eform__foot .btn { margin-bottom: 0; }

/* Bulk Orders entry rows: inputs are borderless, so a failed save must mark the field itself
   (bulk.php sets class "form-control is-invalid" on each field the server rejects) */
html .ez-body table.multiple-input-list td input.form-control.is-invalid,
html .ez-body table.multiple-input-list td select.form-control.is-invalid,
html .ez-body table.multiple-input-list td .form-select.is-invalid {
    border: 1.5px solid #dc2626 !important;
    border-radius: 6px !important;
    background-color: #fef2f2 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc2626' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 14px 14px !important;
    padding-right: 24px !important;
}
html[data-theme="dark"] .ez-body table.multiple-input-list td .is-invalid { background-color: rgba(220,38,38,.12) !important; }
/* plain inputs elsewhere (no left icon box): keep the theme's red "!" marker next to the red border */
.ez-body .form-group:not(.ez-of *) > input.form-control.is-invalid:not([type="date"]),
.ez-body .has-error:not(.ez-of *) > input.form-control:not([type="date"]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc2626' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 15px 15px !important; padding-right: 32px !important;
}
.ez-body .ez-of--phone .has-error .input-tag .form-control, .ez-body .ez-of--phone .input-tag .form-control.is-invalid { border-color: var(--ez-danger) !important; }
.ez-body .ez-own-head { display: none !important; }
/* header built from the card's own heading (Pre-Orders Queue): title left, filters + action right */
.ez-body .card.ez-gcard > .card-header.ez-gheader--own > .ez-ghead { flex: 1 1 0; min-width: 0; max-width: none; }
.ez-body .card.ez-gcard > .card-header.ez-gheader--own > .ez-ghead .ez-ghead__title { white-space: nowrap; }
.ez-body .card.ez-gcard > .card-header.ez-gheader--own > *:not(.ez-ghead):not(.ez-compact-slot) { flex: 0 0 auto; flex-wrap: nowrap !important; justify-content: flex-end !important; }
.ez-body .ez-gheader--own .ez-own-head + div { margin: 0 !important; gap: 8px; justify-content: flex-end; }
.ez-body .ez-gheader--own .ez-own-head + div > .btn-group { margin-right: 0 !important; }
.ez-body .card-header.ez-gheader--own .ez-ghead__text { max-width: none; }
@media (max-width: 1279.98px) {
    .ez-body .card.ez-gcard > .card-header.ez-gheader--own { flex-wrap: wrap !important; }
    .ez-body .card.ez-gcard > .card-header.ez-gheader--own > .ez-ghead { max-width: none; flex: 1 1 100%; }
    .ez-body .card-header.ez-gheader--own .ez-ghead__text { flex: 1 1 auto; }
    .ez-body .card.ez-gcard > .card-header.ez-gheader--own > *:not(.ez-ghead):not(.ez-compact-slot) { flex: 1 1 auto; flex-wrap: wrap !important; justify-content: flex-start !important; }
}
/* Pre-Orders header: tabs, Create button and compact toggle centred on one 40px line */
.ez-body .card-header.ez-gheader--own { align-items: center !important; }
.ez-body .ez-gheader--own .ez-own-head + div { align-items: center !important; }
.ez-body .ez-gheader--own .ez-own-head + div > .btn-group,
.ez-body .ez-gheader--own .ez-own-head + div > .btn { margin: 0 !important; align-self: center; }
.ez-body .ez-gheader--own .ez-own-head + div > .btn-group > .btn { height: 40px; display: inline-flex; align-items: center; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.ez-body .ez-gheader--own .ez-own-head + div > .btn { height: 40px; }
.ez-body .ez-gheader--own > .ez-compact-slot { align-self: center; margin-top: 0 !important; margin-bottom: 0 !important; }

/* ==========================================================================
   45. Header separators: icon + title (+ subtitle) headers get the same 1px line
       as the Order View cards, edge to edge, before the content
   ========================================================================== */
/* order form sections: Customer & Delivery Details, Order Items (create / update) */
.ez-body .ez-osec > .ez-osec__head { margin: 0 -22px 18px; padding: 0 22px 16px; border-bottom: 1px solid var(--ez-border); }
/* Bulk Orders card head already has its line (.ez-bulk__head) */
.ez-body .ez-bulk .ez-osec__head { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* dashboard cards (user + admin) */
.ez-body .card > .ez-dcard__head { padding-bottom: 14px !important; border-bottom: 1px solid var(--ez-border) !important; margin-bottom: 12px; }
/* Create Order: existing-customer card */
.ez-body .ez-cust__head { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ez-border); }
/* Edit Order popup sections when stacked (tablet / phone) */
@media (max-width: 991.98px) {
    .ez-body .ez-esec > .ez-esec__head { margin: 0 -18px 12px; padding: 0 18px 12px; border-bottom: 1px solid var(--ez-border); }
}

/* ==========================================================================
   46. Items page (item/create, views/item/_form.php): "Add New Item" form card
   on the left, "Items List" grid card on the right (stacked below 1200px).
   ========================================================================== */
.ez-body .ez-item-add .card-body { padding: 22px; }
.ez-body .ez-item-add > .card-body > .ez-item-add__head { margin: 0 -22px 20px; padding: 0 22px 16px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-item-add .ez-osec__title { font-size: 20px; font-weight: 700; }

/* field grid: 12 tracks; full = whole row, half = two per row */
.ez-body .ez-igrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 18px; }
.ez-body .ez-igrid > .ez-if--full { grid-column: span 12; }
.ez-body .ez-igrid > .ez-if--half { grid-column: span 6; }
@media (min-width: 768px) and (max-width: 1199.98px) {
    .ez-body .ez-igrid > .ez-if--full { grid-column: span 6; }
    .ez-body .ez-igrid--svc > .ez-if--full { grid-column: span 4; }
    .ez-body .ez-igrid > .ez-if--half { grid-column: span 3; }
}
.ez-body .ez-igrid .form-group { margin-bottom: 18px; }
/* Update Item popup: two columns, sized to the fields */
.ez-body #editModal .modal-dialog { max-width: 640px; }
.ez-body .ez-igrid--modal > .ez-if { grid-column: span 6; }
.ez-body .ez-igrid--modal > .ez-if--full { grid-column: span 12; }
@media (max-width: 575.98px) { .ez-body .ez-igrid--modal > .ez-if { grid-column: span 12; } }
.ez-body .ez-ilab { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.ez-body .ez-ilab > .material-icons { font-size: 18px; line-height: 1; color: var(--ez-text-muted); }
.ez-body .ez-ilab > label { margin: 0 !important; font-size: var(--ez-fs-sm); font-weight: 600; color: var(--ez-text); }
.ez-body .ez-igrid .required .ez-ilab > label::after { content: " *"; color: var(--ez-danger); }
.ez-body .ez-igrid .form-control,
.ez-body .ez-igrid .form-select { height: 44px; border-radius: 10px; font-size: 14px; }
.ez-body .ez-igrid .help-block:empty { display: none; }
.ez-body .ez-igrid .help-block { margin-top: 4px; font-size: 12px; color: var(--ez-danger); }
.ez-body .ez-igrid .has-error .form-control,
.ez-body .ez-igrid .has-error .form-select { border-color: var(--ez-danger) !important; }

/* LKR prefix box on the price inputs */
.ez-body .ez-lkr { flex-wrap: nowrap; }
.ez-body .ez-item-add .ez-lkr > .input-group-text,
.ez-body #editModal .ez-lkr > .input-group-text {
    position: static !important; display: flex; align-items: center; flex: 0 0 auto;
    height: 44px; padding: 0 12px; border: 1px solid var(--ez-border); border-right: 0;
    border-radius: 10px 0 0 10px !important; background: var(--ez-surface-2); color: var(--ez-text-muted);
    font-size: 13px; font-weight: 600;
}
.ez-body .ez-item-add .ez-lkr > .form-control,
.ez-body #editModal .ez-lkr > .form-control { flex: 1 1 auto; width: 1%; margin-left: 0 !important; border-radius: 0 10px 10px 0 !important; min-width: 0; padding-left: 12px !important; }

/* Order Defaults (order-default/index): Weight card + charges table, one LKR box per cell */
.ez-body .ez-odef .ez-item-add { height: 100%; }
.ez-body .ez-odef__table { margin: 0; }
.ez-body .ez-odef__table > :not(caption) > * > * { padding: 8px 10px; border-bottom: 1px solid var(--ez-border); background: transparent; vertical-align: middle; }
.ez-body .ez-odef__table thead th { font-size: 12px; font-weight: 600; color: var(--ez-t-secondary); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.ez-body .ez-odef__table tbody tr:last-child > * { border-bottom: 0; }
.ez-body .ez-odef__courier { font-size: 14px; font-weight: 600; color: var(--ez-text); white-space: nowrap; }
.ez-body .ez-odef__table td { min-width: 150px; }
.ez-body .ez-odef .form-control:disabled { background: var(--ez-surface-2); }
.ez-body .ez-odef .help-block { margin-top: 4px; font-size: 12px; color: var(--ez-danger); }
.ez-body .ez-odef .has-error .form-control { border-color: var(--ez-danger) !important; }
.ez-body .ez-odef__note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 8px 10px; border: 1px solid #bfdbfe; border-radius: 10px; background: var(--ez-info-soft); font-size: 12.5px; line-height: 1.45; color: var(--ez-t-secondary); }
.ez-body .ez-odef__note .material-icons { font-size: 16px; margin-top: 1px; color: #2563eb; }
.ez-body .ez-odef__note--ro { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .08); }
.ez-body .ez-odef__note--ro .material-icons { color: #d97706; }
@media (max-width: 767.98px) {
    /* phones: each courier becomes a small block, labels above the boxes */
    .ez-body .ez-odef__table thead { display: none; }
    .ez-body .ez-odef__table, .ez-body .ez-odef__table tbody, .ez-body .ez-odef__table tr, .ez-body .ez-odef__table th, .ez-body .ez-odef__table td { display: block; width: 100%; }
    .ez-body .ez-odef__table tr { padding: 10px 0; border-bottom: 1px solid var(--ez-border); }
    .ez-body .ez-odef__table tbody tr:last-child { border-bottom: 0; }
    .ez-body .ez-odef__table > :not(caption) > * > * { padding: 4px 0; border-bottom: 0; }
    .ez-body .ez-odef__table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ez-t-secondary); }
}
/* Create Order "View Defaults" popup (views/orders/_orderDefaults.php) */
.ez-body .ez-gmodal.ez-app-modal.ez-odef-pop .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-sm) { max-width: 640px; }
.ez-body .ez-odef-pop__weight { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--ez-border); border-radius: 10px; font-size: 14px; color: var(--ez-t-secondary); }
.ez-body .ez-odef-pop__weight span { display: inline-flex; align-items: center; gap: 6px; }
.ez-body .ez-odef-pop__weight .material-icons { font-size: 18px; color: #2563eb; }
.ez-body .ez-odef-pop__weight strong { color: var(--ez-text); font-weight: 600; }
.ez-body .ez-odef-pop__table { margin: 0; font-size: 13px; }
.ez-body .ez-odef-pop .table-responsive { overflow: visible; }
.ez-body .ez-odef-pop__table { table-layout: fixed; width: 100%; }
.ez-body .ez-odef-pop__table thead th:first-child { width: 34%; }
.ez-body .ez-odef-pop__table > :not(caption) > * > * { padding: 8px 10px; border-bottom: 1px solid var(--ez-border); background: transparent; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.ez-body .ez-odef-pop__table thead th { font-size: 12px; font-weight: 600; color: var(--ez-t-secondary); }
.ez-body .ez-odef-pop__table tbody tr:last-child > * { border-bottom: 0; }
.ez-body .ez-odef-pop__table tbody th { font-weight: 600; color: var(--ez-text); }
.ez-body .ez-odef-pop__table tr.is-selected > * { background: var(--ez-info-soft); }
.ez-body .ez-odef-pop__sel { display: none; margin-left: 8px; padding: 1px 6px; border: 1px solid #93c5fd; border-radius: 6px; font-size: 11px; font-weight: 600; color: #2563eb; }
.ez-body .ez-odef-pop__table tr.is-selected .ez-odef-pop__sel { display: inline-block; }
.ez-body .ez-odef-pop__none { color: var(--ez-t-muted, #9ca3af); font-weight: 400; }
.ez-body .ez-odef-pop__note { margin: 10px 0 0; font-size: 12.5px; color: var(--ez-t-secondary); }
@media (max-width: 575.98px) {
    .ez-body .ez-odef-pop__table thead { display: none; }
    .ez-body .ez-odef-pop__table, .ez-body .ez-odef-pop__table tbody, .ez-body .ez-odef-pop__table tr { display: block; width: 100%; }
    .ez-body .ez-odef-pop__table tr { padding: 6px 0; border-bottom: 1px solid var(--ez-border); }
    .ez-body .ez-odef-pop__table tbody tr:last-child { border-bottom: 0; }
    .ez-body .ez-odef-pop__table > :not(caption) > * > * { display: flex; justify-content: space-between; padding: 3px 4px; border-bottom: 0; }
    .ez-body .ez-odef-pop__table td::before { content: attr(data-label); color: var(--ez-t-secondary); }
}


.ez-body .ez-item-add__foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.ez-body .ez-item-add__save { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 26px; margin: 0; }
.ez-body .ez-item-add__save .material-icons { font-size: 20px; line-height: 1; }
.ez-body .ez-item-add__help { margin: 20px -22px 0; padding: 14px 22px 0; border-top: 1px solid var(--ez-border); }
@media (max-width: 575.98px) {
    .ez-body .ez-item-add__save { width: 100%; justify-content: center; height: 44px; }
}

/* Items List: header sized like the form card's header */
.ez-body .ez-items .ez-item-list .ez-ghead__title { font-size: 20px !important; font-weight: 700; }
/* Customer create / update: Block Status + Block button under each phone */
.ez-body .ez-cform .ez-cphone .form-group { margin-bottom: 8px; }
.ez-body .ez-cblock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.ez-body .ez-cblock__label { font-size: 12px; font-weight: 600; color: var(--ez-text-muted); }
.ez-body .ez-cblock .btn { margin: 0 0 0 auto; }
.ez-body .ez-cform .ez-if--full { grid-column: span 12; }
.ez-body .ez-cview__table { margin-bottom: 0; }
.ez-body .ez-cview__table td { color: var(--ez-heading); font-weight: 500; }
.ez-body .ez-cview__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ez-body .ez-cview__foot .btn { margin: 0; }
/* Update Customer: orders by current status (donut + list) */
.ez-body .ez-cstat.ez-dcard { box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04) !important; }
.ez-body .ez-cstat .ez-dcard__head > div { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-cstat .ez-dcard__head p { color: var(--ez-text-muted); font-size: 12.5px; margin-top: 1px; }
.ez-body .ez-cstat__body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px !important; }
.ez-body .ez-cstat__chart { position: relative; height: 180px; }
.ez-body .ez-cstat__total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ez-body .ez-cstat__total strong { font-size: 26px; font-weight: 800; line-height: 1; color: var(--ez-heading); }
.ez-body .ez-cstat__total span { margin-top: 4px; font-size: 12px; color: var(--ez-text-muted); }
.ez-body .ez-cstat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ez-body .ez-cstat__row { display: grid; grid-template-columns: 10px minmax(90px, 1.2fr) minmax(60px, 2fr) 34px 40px; align-items: center; gap: 12px; font-size: 13px; }
.ez-body .ez-cstat__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k); }
.ez-body .ez-cstat__name { font-weight: 600; color: var(--ez-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-body .ez-cstat__bar { height: 8px; border-radius: 99px; background: var(--ez-surface-3, #e5e9f0); overflow: hidden; }
.ez-body .ez-cstat__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--k); }
.ez-body .ez-cstat__n { text-align: right; font-weight: 700; color: var(--ez-heading); font-variant-numeric: tabular-nums; }
.ez-body .ez-cstat__pct { text-align: right; color: var(--ez-text-muted); font-variant-numeric: tabular-nums; }
/* totals under the chart, same card, 1px separator */
.ez-body .ez-cstat__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ez-border); }
.ez-body .ez-cstat__stat { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-width: 0; }
.ez-body .ez-cstat__stat + .ez-cstat__stat { border-left: 1px solid var(--ez-border); }
.ez-body .ez-cstat__stat small { display: block; font-size: 12px; color: var(--ez-text-muted); }
.ez-body .ez-cstat__stat strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--ez-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ez-body .ez-cstat__cur { font-size: 12px; font-weight: 700; color: var(--ez-text-muted); }
.ez-body .ez-cstat__sicon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.ez-body .ez-cstat__sicon .material-icons { font-size: 20px; }
.ez-body .ez-cstat__sicon--blue { background: #dbeafe; color: #2563eb; }
.ez-body .ez-cstat__sicon--green { background: #dcfce7; color: #16a34a; }
html[data-theme="dark"] .ez-body .ez-cstat__sicon--blue { background: rgba(59, 130, 246, .2); color: #93c5fd; }
html[data-theme="dark"] .ez-body .ez-cstat__sicon--green { background: rgba(22, 163, 74, .2); color: #86efac; }
@media (max-width: 575.98px) { .ez-body .ez-cstat__body { grid-template-columns: 1fr; } .ez-body .ez-cstat__foot { grid-template-columns: 1fr; } .ez-body .ez-cstat__stat + .ez-cstat__stat { border-left: 0; border-top: 1px solid var(--ez-border); } .ez-body .ez-cstat__chart { height: 170px; } }
.ez-body .ez-items .ez-item-list .ez-ghead__icon { width: 48px; height: 48px; }
.ez-body .ez-item-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.ez-body .ez-item-tools__cost { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--ez-surface-2); color: var(--ez-text-muted); font-size: 13px; font-weight: 500; }
.ez-body .ez-item-tools__cost strong { color: var(--ez-heading); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ez-body .ez-item-tools__right { display: flex; align-items: center; gap: 8px; }
.ez-body .ez-item-tools__right .btn { margin: 0; }
.ez-body .ez-item-tools__right select { width: auto; min-width: 84px; height: 40px; }

/* shop chip; repeated shops in consecutive rows show the chip once (modern.js groupShopRows) */
.ez-body .ez-shop { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ez-bd-info-bg); color: var(--ez-bd-info-fg); font-weight: 600; white-space: nowrap; }
.ez-body .ez-shop .material-icons { font-size: 15px; line-height: 1; }
.ez-body .ez-shop--none { background: var(--ez-bd-neutral-bg); color: var(--ez-text-muted); padding: 5px 14px; }
.ez-body .ez-items table.ez-gtable > tbody > tr > td.ez-shop-cont > .ez-shop { visibility: hidden; }
.ez-body .ez-items table.ez-gtable > tbody > tr > td.ez-shop-cont { border-top-color: transparent !important; }
.ez-body .ez-items table.ez-gtable > tbody > tr.ez-shop-start:not(:first-child) > td { border-top: 2px solid var(--ez-border) !important; }

/* edit / view: tinted squares like the other grids' action icons */
.ez-body .ez-items td:has(> .ez-iact) { position: relative; white-space: nowrap !important; }
.ez-body .ez-items .ez-iact { display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 2px; border-radius: 8px; font-size: 13px; vertical-align: middle; transition: background-color var(--ez-dur) var(--ez-ease); }
.ez-body .ez-items .ez-iact--edit { background: #e0e7ff; color: #4338ca; }
.ez-body .ez-items .ez-iact--view { background: #e0f2fe; color: #0369a1; }
.ez-body .ez-items .ez-iact--edit:hover { background: #c7d2fe; color: #4338ca !important; }
.ez-body .ez-items .ez-iact--view:hover { background: #bae6fd; color: #0369a1 !important; }
html[data-theme="dark"] .ez-body .ez-items .ez-iact--edit { background: rgba(129, 140, 248, .18); color: #a5b4fc; }
html[data-theme="dark"] .ez-body .ez-items .ez-iact--view { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
html .ez-body .ez-content .ez-items table.ez-gtable > tbody > tr > td.text-end { white-space: nowrap !important; overflow-wrap: normal !important; }
@media (max-width: 1599.98px) {
    .ez-body .ez-items .ez-iact { width: 28px; height: 28px; margin: 0 1px; }
    .ez-body .ez-items .ez-shop { padding: 4px 8px; gap: 4px; }
    html .ez-body .ez-content .ez-items table.ez-gtable tr.filters select { min-width: 0 !important; width: 96px !important; }
}
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .ez-body .ez-items > .col-xl-4 { width: 31%; }
    .ez-body .ez-items > .col-xl-8 { width: 69%; }
}

/* Items form: icons inside the inputs (ez-of), same as the order form; prices keep only LKR */
.ez-body .ez-ic-box { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-toggle { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='5'/%3E%3Ccircle cx='16' cy='12' r='2.5'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-box { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-toggle { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='5'/%3E%3Ccircle cx='16' cy='12' r='2.5'/%3E%3C/svg%3E"); }
html .ez-body .ez-item-add .ez-of input.form-control:not([type="hidden"]),
html .ez-body .ez-item-add .ez-of select.form-control,
html .ez-body .ez-item-add .ez-of .form-select,
html .ez-body #editModal .ez-of input.form-control:not([type="hidden"]),
html .ez-body #editModal .ez-of .form-select { height: 44px; min-height: 44px; }
html .ez-body .ez-item-add .ez-if--status.ez-of select.form-control { padding-left: 50px !important; padding-right: 26px !important; background-position: 13px center, 42px 0, 0 0, right 10px center !important; }
/* narrow form column (1200-1599px): Quantity and Status each take a full row so "Active" fits */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .ez-body .ez-igrid > .ez-if--half.ez-of { grid-column: span 12; }
}

/* ==========================================================================
   47. Upload pages (Upload Orders / Items / Payments, External Orders upload):
   the row "Errors" cell was a solid pink card; now a soft red error box,
   matching the badge system (red = failed). Markup unchanged.
   ========================================================================== */
.ez-body .ez-content table.ez-gtable td > .card.text-bg-primary {
    width: auto !important; max-width: 16rem; min-width: 10rem;
    margin: 0; border: 1px solid color-mix(in srgb, var(--ez-bd-danger-dot) 35%, transparent) !important;
    border-radius: 10px !important; background: var(--ez-bd-danger-bg) !important; box-shadow: none !important;
}
.ez-body .ez-content table.ez-gtable td > .card.text-bg-primary > .card-body {
    position: relative; padding: 7px 10px 7px 30px !important; background: transparent !important;
}
.ez-body .ez-content table.ez-gtable td > .card.text-bg-primary > .card-body::before {
    content: "!"; position: absolute; left: 9px; top: 8px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--ez-bd-danger-dot); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}
.ez-body .ez-content table.ez-gtable td > .card.text-bg-primary .card-text {
    margin: 0; color: var(--ez-bd-danger-fg) !important; font-size: 12px !important; font-weight: 500; line-height: 1.45;
}
/* the "Uploaded File" label next to the file box: hidden visually, kept for screen readers (user asked) */
.ez-body .ez-upload .form-group:has(> input[type="file"]) > label { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   48. Back button (layouts, user asked): on second-level pages, left of the
   breadcrumb trail. modern.js goes back in history when the previous page is
   ours (keeps list filters / page), else follows the link.
   ========================================================================== */
.ez-body .ez-breadcrumbs:has(> .ez-back) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ez-body .ez-breadcrumbs > .ez-back {
    display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px;
    border: 1px solid var(--ez-border); border-radius: 8px; background: var(--ez-surface);
    color: var(--ez-text) !important; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: border-color var(--ez-dur) var(--ez-ease), background-color var(--ez-dur) var(--ez-ease);
}
.ez-body .ez-breadcrumbs > .ez-back .material-icons { font-size: 18px; line-height: 1; }
.ez-body .ez-breadcrumbs > .ez-back:hover { border-color: var(--ez-primary); background: var(--ez-surface-2); }
.ez-body .ez-breadcrumbs > .ez-back + * { min-width: 0; }
.ez-body .ez-breadcrumbs > .ez-back + * .breadcrumb { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .ez-body .ez-breadcrumbs > .ez-back { height: 36px; }
}

/* ==========================================================================
   49. GRN: list filters with icons inside the inputs, Add GRN in the header;
   Create/Update GRN reuse the Add New Item form card (.ez-item-add, .ez-igrid).
   ========================================================================== */
.ez-body .ez-grn-actions { gap: 8px; }
.ez-body .ez-grn-actions .btn { margin: 0 !important; }
.ez-body .ez-grn-filter { margin: 0 0 16px; }
.ez-body .ez-grn-filter__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 16px; align-items: end; }
.ez-body .ez-grn-filter__grid .form-group { margin-bottom: 0; }
.ez-body .ez-grn-filter__grid label { display: block; margin: 0 0 6px; font-size: var(--ez-fs-sm); font-weight: 600; color: var(--ez-text); }
.ez-body .ez-grn-filter__btns .form-group { display: flex; gap: 8px; }
.ez-body .ez-grn-filter__btns .btn { height: 40px; margin: 0 !important; }
@media (max-width: 991.98px) {
    .ez-body .ez-grn-filter__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
    .ez-body .ez-grn-filter__btns { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .ez-body .ez-grn-filter__grid { grid-template-columns: minmax(0, 1fr); }
    .ez-body .ez-grn-filter__btns .btn { flex: 1 1 0; }
}
/* GRN form: select2 / date inputs at the form's 44px height */
html .ez-body .ez-item-add .ez-of .select2-selection--single { height: 44px !important; min-height: 44px; border-radius: 10px !important; }
html .ez-body .ez-item-add .ez-of .select2-selection--single .select2-selection__rendered { line-height: 42px !important; }
html .ez-body .ez-item-add .ez-of .select2-selection--single .select2-selection__arrow { height: 42px !important; }
.ez-body .ez-item-add .ez-item-add__head .btn { flex: 0 0 auto; }
/* Available Quantity card */
.ez-body .ez-grn-avail .card-body { padding: 22px; }
.ez-body .ez-grn-avail > .card-body > .ez-grn-avail__head { margin: 0 -22px 16px; padding: 0 22px 16px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-grn-avail .ez-osec__title { font-size: 18px; }
.ez-body .ez-grn-avail__table { margin: 0; font-size: 13px; }
.ez-body .ez-grn-avail__table th { padding: 10px 12px !important; background: var(--ez-surface-2); color: var(--ez-text-muted); font-size: 12px; font-weight: 600; border: 0 !important; white-space: nowrap; }
.ez-body .ez-grn-avail__table td { padding: 12px !important; border: 0 !important; color: var(--ez-heading); font-weight: 600; }
.ez-body .ez-grn-avail__table td:empty::before { content: "\2013"; color: var(--ez-text-muted); font-weight: 400; }
html .ez-body .card-header > .ez-grn-actions { margin-left: auto !important; justify-content: flex-end; }
.ez-body .ez-items .ez-gcard .ez-ghead__title { font-size: 20px !important; font-weight: 700; }
.ez-body .ez-items .ez-gcard .ez-ghead__icon { width: 48px; height: 48px; }
.ez-body .ez-item-add .ez-item-add__head { flex-wrap: wrap; row-gap: 10px; }
.ez-body .ez-item-add .ez-item-add__head > div { flex: 1 1 160px; min-width: 0; }

/* ==========================================================================
   50. External Services / Shops list: header toggle + Create Service grouped on
   the right at button height; actions cell: tinted squares + Disable/Enable on one line.
   Filter selects fill their column on every grid.
   ========================================================================== */
.ez-body .grid-view tr.filters select { width: 100%; }
html .ez-body .card-header > .ez-svc-actions { margin-left: auto !important; display: flex; align-items: center; justify-content: flex-end; }
.ez-body .ez-svc-actions .service-toggle-wrapper { height: 40px; padding: 0 14px !important; border-radius: 10px !important; background: var(--ez-surface) !important; border-color: var(--ez-border) !important; }
.ez-body .ez-svc-actions .btn { height: 40px; margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; }
.ez-body .ez-content table.ez-gtable td.ez-svc-acts { display: table-cell; }
.ez-body .ez-content table.ez-gtable td.ez-svc-acts > * { vertical-align: middle; }
.ez-body .ez-content table.ez-gtable td.ez-svc-acts > .btn { margin: 0 0 0 4px !important; }
.ez-body .ez-svc-actions .service-toggle-wrapper > span:first-child { white-space: nowrap; }
@media (max-width: 767.98px) {
    html .ez-body .card-header > .ez-svc-actions { margin-left: 0 !important; width: 100%; justify-content: flex-start; }
    .ez-body .ez-svc-actions > div > .d-flex { flex-wrap: wrap; justify-content: flex-start !important; gap: 8px; }
    .ez-body .ez-svc-actions .service-toggle-wrapper { margin-right: 0 !important; }
}

/* ==========================================================================
   51. External Service create / edit form (views/order-service/_form.php):
   same card + icon-in-input fields as the other forms; 2 columns from 768px.
   ========================================================================== */
.ez-body .ez-ic-phone { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-mail { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-phone { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-mail { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ez-body .ez-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.ez-body .ez-sgrid > .ez-sf--full { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .ez-body .ez-sgrid { grid-template-columns: minmax(0, 1fr); } }
.ez-body .ez-sgrid .form-group { margin-bottom: 18px; }
.ez-body .ez-sgrid .ez-ilab > label { margin: 0 !important; font-size: var(--ez-fs-sm); font-weight: 600; color: var(--ez-text); }
.ez-body .ez-sgrid .required .ez-ilab > label::after { content: " *"; color: var(--ez-danger); }
.ez-body .ez-sgrid .help-block:empty { display: none; }
.ez-body .ez-sgrid .help-block { margin-top: 4px; font-size: 12px; color: var(--ez-danger); }
/* textarea: same left icon box, icon at the top */
.ez-body .ez-of textarea.form-control {
    min-height: 92px; padding-left: 54px !important; border-radius: 10px;
    background-image: var(--ez-ic), linear-gradient(var(--ez-border), var(--ez-border)), linear-gradient(var(--ez-surface-2), var(--ez-surface-2)) !important;
    background-repeat: no-repeat !important;
    background-position: 13px 13px, 42px 0, 0 0 !important;
    background-size: 17px 17px, 1px 100%, 42px 100% !important;
}
.ez-body .ez-sform .ez-item-add__head .ez-sform__head-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ez-body .ez-sform .ez-item-add__head .ez-sform__head-btns .btn { margin: 0 !important; }
.ez-body .ez-sform__foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 4px -22px 0; padding: 18px 22px 0; border-top: 1px solid var(--ez-border); }
.ez-body .ez-sform__foot .btn { margin: 0 !important; height: 44px; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 575.98px) { .ez-body .ez-sform__foot .btn { flex: 1 1 0; justify-content: center; } }
html .ez-body .ez-sform .ez-item-add__head > .ez-sform__head-btns { flex: 0 0 auto !important; margin-left: auto; }
.ez-body .ez-sform .ez-sform__head-btns .btn { margin: 0 !important; }
.ez-body .ez-svc-view > .card-header { padding: 22px 22px 16px !important; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-svc-view__head { margin: 0 !important; flex-wrap: wrap; row-gap: 10px; }
.ez-body .ez-svc-view__head > div:not(.ez-sform__head-btns) { flex: 1 1 220px; min-width: 0; }
.ez-body .ez-svc-view > .card-body { padding: 18px 22px 22px !important; }

/* ===== 52. Customers list (customers/index): GRN-style header + filter row,
   My Orders legend on one line under the filters, narrow columns fit their
   content so the spare width goes to Name and Address ===================== */
.ez-body .ez-cust-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 6px 0 0; }
.ez-body .ez-cust-legend > .btn, .ez-body .ez-cust-legend > .ez-badge { margin: 0 !important; }
.ez-body .ez-content table.ez-gtable th.ez-cfit,
.ez-body .ez-content table.ez-gtable td.ez-cfit { width: 1%; white-space: nowrap !important; }
.ez-body .ez-content table.ez-gtable td.ez-cfit .btn,
.ez-body .ez-content table.ez-gtable td.ez-cfit .ez-badge { white-space: nowrap; }
/* 992-1199px: the top bar is one item too wide (page scrolled sideways);
   the account button shows just the avatar there, like on phones */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ez-user-menu .ez-user-meta, .ez-user-menu .ez-user-btn .ez-caret { display: none; }
    .ez-user-menu .ez-user-btn { padding: 4px; }
}

/* ===== 53. Marketing Expenses (markerting-expenses/create): Items-style form
   card + list card; total, Reset and page size on the list's title line ===== */
html .ez-body .card-header > .ez-mexp-actions { margin-left: auto !important; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ez-body .ez-mexp-actions .btn { margin: 0 !important; height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.ez-body .ez-mexp-actions select[name="per-page"] { width: auto; min-width: 72px; height: 40px; }
.ez-body .ez-mexp-total { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 6px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; box-shadow: 0 1px 2px rgba(220, 38, 38, .08); }
.ez-body .ez-mexp-total__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #fee2e2; color: #dc2626; }
.ez-body .ez-mexp-total__icon .material-icons { font-size: 18px; }
.ez-body .ez-mexp-total__text { display: flex; flex-direction: column; line-height: 1.15; }
.ez-body .ez-mexp-total__label { font-size: 11px; color: #6b7280; font-weight: 500; text-transform: none; }
.ez-body .ez-mexp-total__val { font-size: 16px; font-weight: 700; color: #dc2626; white-space: nowrap; }
.ez-body .ez-mexp-total__val small { font-size: 11px; font-weight: 600; color: #ef4444; }
html[data-theme="dark"] .ez-body .ez-mexp-total { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .25); }
html[data-theme="dark"] .ez-body .ez-mexp-total__icon { background: rgba(248, 113, 113, .18); color: #fca5a5; }
html[data-theme="dark"] .ez-body .ez-mexp-total__val, html[data-theme="dark"] .ez-body .ez-mexp-total__val small { color: #fca5a5; }
.ez-body .ez-mexp-dates__row { display: flex; flex-direction: column; gap: 6px; }
.ez-body .ez-mexp-dates__row > * { width: 100%; min-width: 130px; }
.ez-body .ez-mexp table.ez-gtable tr.filters > td { vertical-align: top; }

/* ===== 54. Reports (sidebar Reports menu; modern.js decorateReports) ======
   Title line: page header left, Export + page size + compact toggle right.
   Filters: even grid, labels on one line, all bottoms lined up, Search (and
   Reset) at the end. Table: scrolls sideways in the card, words never break
   mid-word, Customer Details kept short. */
html body.ez-rep-page .ez-rep-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 18px; padding-bottom: 20px !important; }
html body.ez-rep-page .ez-rep-head > * { grid-column: 1 / -1; min-width: 0; margin: 0 !important; }
html body.ez-rep-page .ez-rep-head > .ez-ghead { grid-column: 1; }
html body.ez-rep-page .ez-rep-head > .ez-rep-tools { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
html body.ez-rep-page .ez-rep-head > hr, html body.ez-rep-page .ez-rep-head > .ez-own-head { display: none; }
/* Same side padding on every report header so the separator's negative margin reaches the card edges */
html body.ez-rep-page .card.ez-rep-card > .card-header.ez-rep-head { padding-left: 22px !important; padding-right: 22px !important; }
@media (max-width: 575.98px) { html body.ez-rep-page .card.ez-rep-card > .card-header.ez-rep-head { padding-left: 14px !important; padding-right: 14px !important; } }
html body.ez-rep-page .card.ez-rep-card > .card-header.ez-rep-head > .ez-rep-sep { height: 1px; background: var(--ez-border); margin: 0 -22px !important; }
@media (max-width: 575.98px) { html body.ez-rep-page .card.ez-rep-card > .card-header.ez-rep-head > .ez-rep-sep { margin: 0 -14px !important; } }
html body.ez-rep-page .ez-rep-two { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
html body.ez-rep-page .ez-rep-two > strong { font-weight: 600; color: var(--ez-text, #111827); }
html body.ez-rep-page .ez-rep-two > small { font-size: 12px; color: var(--ez-t-secondary, #6B7280); }
html body.ez-rep-page .ez-rep-two > small:empty { display: none; }
/* The report header already ends in .ez-rep-sep, so a leading <hr> in the card body would double it (Product Cost KPI cards) */
html body.ez-rep-page .ez-rep-card > .card-body > hr.horizontal:first-child { display: none; }
.ez-body .ez-rep-tools > * { margin: 0 !important; float: none !important; padding: 0 !important; }
.ez-body .ez-rep-tools .ez-rep-export { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px !important; }
.ez-body .ez-rep-tools select[name="per-page"] { height: 40px; width: auto; min-width: 72px; }

.ez-body .ez-rep-filter { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 16px; align-items: end; margin: 0 !important; }
.ez-body .ez-rep-filter > * { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; min-width: 0; }
.ez-body .ez-rep-filter > .ez-rep-empty { display: none !important; }
.ez-body .ez-rep-filter .form-group { margin: 0 !important; }
html body.ez-rep-page .ez-rep-filter label { display: block; margin: 0 0 6px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--ez-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-body .ez-rep-filter .help-block:empty, .ez-body .ez-rep-filter .invalid-feedback:empty { display: none; }
.ez-body .ez-rep-filter input.form-control, .ez-body .ez-rep-filter select.form-control, .ez-body .ez-rep-filter .form-select { min-height: 40px; }
.ez-body .ez-rep-filter .select2-container .select2-selection { min-height: 40px; }
.ez-body .ez-rep-filter__btns .form-group { display: flex; gap: 8px; align-items: center; }
.ez-body .ez-rep-filter__btns .btn { height: 40px; margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; }
.ez-body .ez-rep-filter__btns a.btn[title="Reset Filter"] { width: 40px; justify-content: center; padding: 0 !important; }
/* Wide screens: narrower minimum so a typical 7-filter row keeps Search on the same line (2026-10-09) */
@media (min-width: 1400px) { .ez-body .ez-rep-filter { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

/* Income report total: light green box, small label, bold amount */
.ez-body .ez-rep-card .total-income { width: fit-content; margin: 4px 0 14px auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d !important; font-size: 16px !important; font-weight: 700 !important; text-align: left !important; }
.ez-body .ez-rep-card .total-income > strong { font-size: 12px; font-weight: 500; color: #6b7280; }
html[data-theme="dark"] .ez-body .ez-rep-card .total-income { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .25); color: #86efac !important; }
.ez-body .ez-rep-card .total-damaged { width: fit-content; margin: 4px 0 14px auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #b45309; font-size: 16px; font-weight: 700; }
.ez-body .ez-rep-card .total-damaged > strong { font-size: 12px; font-weight: 500; color: #6b7280; }
html[data-theme="dark"] .ez-body .ez-rep-card .total-damaged { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .25); color: #fcd34d; }
.ez-body .ez-rep-tools > .ez-rep-total { margin: 0 !important; padding: 0 14px !important; height: 40px; }
html body.ez-rep-page .card.ez-gcard > .card-header.ez-rep-head > .ez-ghead { max-width: none; }
/* table: wrap only at spaces; the card scrolls instead */
html body.ez-rep-page .ez-rep-card .table-responsive { overflow-x: auto; }
html body.ez-rep-page .ez-content table.ez-gtable.ez-gtable > thead > tr > th,
html body.ez-rep-page .ez-content table.ez-gtable.ez-gtable > tbody > tr > td { overflow-wrap: normal !important; word-wrap: normal !important; word-break: normal !important; hyphens: none !important; }
html body.ez-rep-page .ez-content table.ez-gtable.ez-gtable > tbody > tr > td { min-width: 0; }
html body.ez-rep-page .ez-cust-cell { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 10px; row-gap: 1px; min-width: 190px; max-width: 260px; }
html body.ez-rep-page .ez-cust-cell__name, html body.ez-rep-page .ez-cust-cell__addr { flex: 0 0 100%; }
html body.ez-rep-page .ez-cust-cell__addr { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
@media (max-width: 767.98px) {
    html body.ez-rep-page .ez-rep-head { grid-template-columns: minmax(0, 1fr); }
    html body.ez-rep-page .ez-rep-head > .ez-rep-tools { grid-column: 1; justify-content: flex-start; }
    .ez-body .ez-rep-filter { grid-template-columns: minmax(0, 1fr); }
}

/* District & City Report (reports/district, 2026-10-16): period note, KPI tiles, chart + top cities panels, district rows open to their cities */
.ez-body .ez-dc-period { margin: 18px 0 14px; font-size: 13px; color: var(--ez-t-secondary, #6B7280); }
.ez-body .ez-dc-kpis .ez-kpi__value { font-size: 20px !important; line-height: 1.25; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ez-body .ez-dc-kpis .ez-kpi__meta { white-space: normal; }
.ez-body .ez-dc-panel { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--ez-border); border-radius: 12px; padding: 16px 18px; background: var(--ez-surface); }
.ez-body .ez-dc-panel__title { margin: 0 0 12px; font-size: 16px !important; font-weight: 600 !important; color: var(--ez-text); }
.ez-body .ez-dc-chart { position: relative; flex: 1 1 auto; min-height: 320px; }
.ez-body .ez-dc-scroll { overflow-x: auto; }
.ez-body .ez-dc-nowrap { white-space: nowrap; }
.ez-body table.ez-dc-top { width: 100%; border-collapse: collapse; font-size: 13px; }
.ez-body table.ez-dc-top th { font-size: 12px; font-weight: 600; color: var(--ez-t-secondary, #6B7280); padding: 0 8px 8px; white-space: nowrap; border-bottom: 1px solid var(--ez-border); }
.ez-body table.ez-dc-top td { padding: 6px 8px; border-bottom: 1px solid var(--ez-border); vertical-align: middle; }
.ez-body table.ez-dc-top tr:last-child td { border-bottom: 0; }
.ez-body .ez-dc-rank { width: 28px; font-weight: 700; color: var(--ez-t-muted, #9CA3AF); }
.ez-body .ez-dc-empty { color: var(--ez-t-secondary, #6B7280); text-align: center; padding: 24px 8px !important; }
.ez-body .ez-dc-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.ez-body .ez-dc-toggle > .material-icons { font-size: 20px; color: var(--ez-t-secondary, #6B7280); transition: transform .15s ease; }
.ez-body .ez-dc-toggle[aria-expanded="true"] > .material-icons { transform: rotate(90deg); }
.ez-body .ez-dc-toggle:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 4px; }
.ez-body .ez-dc-strong { font-weight: 600; }
.ez-body .ez-dc-end { align-items: flex-end; }
.ez-body .ez-dc-toggle > .ez-rep-two { min-width: 150px; }
.ez-body table.ez-dc-top .ez-rep-two { min-width: 140px; }
.ez-body .ez-ls-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding-right: 12px; }
@media (min-width: 1200px) { .ez-body .ez-ls-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ez-body .ez-ls-detail__title { margin: 12px 0 2px; font-size: 13px !important; font-weight: 600 !important; color: var(--ez-text); }
.ez-body .ez-cr-section { height: auto; margin-bottom: 16px; }
.ez-body .ez-cr-hint { margin: -6px 0 14px; font-size: 13px; color: var(--ez-t-secondary, #6B7280); }
.ez-body .ez-cr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 992px) { .ez-body .ez-cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ez-body .ez-cr-list { display: flex; flex-direction: column; gap: 12px; }
.ez-body .ez-cr-card { border: 1px solid var(--ez-border); border-radius: 10px; padding: 14px 16px; background: var(--ez-surface); }
.ez-body .ez-cr-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ez-body .ez-cr-card__text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ez-text); }
.ez-body .ez-cr-rank { font-weight: 700; color: var(--ez-t-muted, #9CA3AF); min-width: 18px; }
.ez-body .ez-cr-score { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; }
.ez-body .ez-cr-score::before { content: "Score"; font-weight: 500; margin-right: 4px; }
html[data-theme="dark"] .ez-body .ez-cr-score { color: #93C5FD; background: rgba(37, 99, 235, .12); border-color: rgba(96, 165, 250, .3); }
.ez-body .ez-cr-conf { margin-left: auto; font-size: 12px; color: var(--ez-t-secondary, #6B7280); }
.ez-body .ez-cr-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 10px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-cr-fact { display: flex; flex-direction: column; line-height: 1.3; }
.ez-body .ez-cr-fact > small { font-size: 11.5px; color: var(--ez-t-secondary, #6B7280); }
.ez-body .ez-cr-fact > b { font-size: 13px; font-weight: 600; color: var(--ez-text); }
.ez-body .ez-cr-fact > b.ez-dc-ret { color: #DC2626; }
html[data-theme="dark"] .ez-body .ez-cr-fact > b.ez-dc-ret { color: #FCA5A5; }
.ez-body .ez-dc-ret { color: #DC2626; font-weight: 600; }
.ez-body .ez-dc-up { color: #16A34A; font-weight: 600; white-space: nowrap; }
.ez-body .ez-dc-down { color: #D97706; font-weight: 600; white-space: nowrap; }
.ez-body .ez-dc-flat, .ez-body .ez-dc-new { color: var(--ez-t-secondary, #6B7280); font-weight: 600; }
html body.ez-rep-page .ez-content table.ez-dc-table > tbody > tr.ez-dc-sub > td { padding: 0 0 8px 34px !important; background: var(--ez-surface-2, #F9FAFB) !important; }
html body.ez-rep-page .ez-content table.ez-dc-cities { margin: 0; background: transparent; }
html body.ez-rep-page .ez-content table.ez-dc-cities > thead > tr > th { background: transparent !important; font-size: 12px !important; }
html body.ez-rep-page .ez-content table.ez-dc-cities > tbody > tr > td { background: transparent !important; }
html[data-theme="dark"] .ez-body .ez-dc-ret { color: #FCA5A5; }
html[data-theme="dark"] .ez-body .ez-dc-up { color: #86EFAC; }
html[data-theme="dark"] .ez-body .ez-dc-down { color: #FCD34D; }
@media (max-width: 575.98px) { .ez-body .ez-dc-chart { min-height: 280px; } }
.ez-body a.ez-up-user { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ez-body a.ez-up-user:hover strong { color: #2563EB; }
.ez-body a.ez-up-user .ez-rep-two { min-width: 140px; }
.ez-body .ez-up-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; }
.ez-body .ez-up-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
html[data-theme="dark"] .ez-body .ez-up-avatar { color: #93C5FD; background: rgba(37, 99, 235, .12); border-color: rgba(96, 165, 250, .3); }
.ez-body a.ez-up-view { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: #2563EB; background: #EFF6FF; }
.ez-body a.ez-up-view .material-icons { font-size: 18px; }
html[data-theme="dark"] .ez-body a.ez-up-view { color: #93C5FD; background: rgba(37, 99, 235, .12); }
.ez-body .ez-up-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 16px; }
.ez-body .ez-up-head__text { flex: 1 1 260px; min-width: 0; }
.ez-body .ez-up-head__name { margin: 0 0 2px; font-size: 18px !important; font-weight: 600 !important; color: var(--ez-text); }
.ez-body .ez-up-head__btn { display: inline-flex; align-items: center; gap: 6px; }
.ez-body .ez-up-head__btn .material-icons { font-size: 18px; }
.ez-body .ez-up-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-up-note { margin: 10px 0 12px; font-size: 12px; color: var(--ez-t-secondary, #6B7280); }
.ez-body .ez-cb-count { display: inline-flex; align-items: center; height: 22px; margin-left: 6px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ez-t-secondary, #6B7280); background: var(--ez-surface-2, #F3F4F6); border: 1px solid var(--ez-border); vertical-align: middle; }
.ez-body table.ez-dc-top.ez-cb-freq .ez-rep-two { min-width: 0; }
.ez-body .ez-dc-kpis .ez-kpi__value small { font-size: 13px; font-weight: 500; color: var(--ez-t-secondary, #6B7280); }
.ez-body .ez-rep-filter__btns a.btn[title="Reset Filter"] .material-icons { font-size: 20px; }

/* 55. Empty grid values (2026-10-09): "(not set)" shows as a plain "-" like other empty cells (text swapped in modern.js dashNotSet) */
.ez-body .ez-content table .not-set { color: inherit !important; font-style: normal !important; }

/* 56. SMS Config create/update (2026-10-12): Items layout; parameter chips sit in a wrapped row */
.ez-body .ez-sms-params__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ez-body .ez-sms-params__list .badge { margin: 0 !important; }
.ez-body .ez-sms-recip .form-check { margin: 0 0 6px; padding-left: 1.75rem; }
.ez-body .ez-sms .ez-igrid > .ez-sms-content, .ez-body .ez-sms .ez-igrid > .ez-sms-recip { grid-column: span 12; }
html .ez-body .ez-sms .ez-item-list table.table > tbody > tr > td, html.ez-grid-compact .ez-body .ez-sms .ez-item-list table.table > tbody > tr > td { overflow-wrap: normal !important; word-break: normal !important; }

/* 57. Company Management (company/view, 2026-10-12): Company Details card left; Logo, Order Settings, Verification cards right */
.ez-body .ez-co .ez-co-dl { margin: 0; }
.ez-body .ez-co .ez-co-dl th { width: 40%; font-weight: 500 !important; color: var(--ez-t-secondary, #6B7280) !important; }
.ez-body .ez-co .ez-co-dl th, .ez-body .ez-co .ez-co-dl td { font-size: 14px !important; padding: 12px 14px !important; border-bottom: 1px solid var(--ez-border) !important; vertical-align: middle; }
.ez-body .ez-co-logo { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ez-body .ez-co-logo__preview { flex: 1 1 220px; max-width: 320px; height: 140px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ez-border); border-radius: 12px; background: var(--ez-surface-2, #f9fafb); padding: 16px; }
.ez-body .ez-co-logo__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ez-body .ez-co-logo__preview .material-icons { font-size: 44px; color: var(--ez-t-muted, #9CA3AF); }
.ez-body .ez-co-logo__form { flex: 1 1 220px; min-width: 0; }
.ez-body .ez-co-logo__form label { font-weight: 600; color: var(--ez-text); margin-bottom: 8px; }
.ez-body .ez-co-logo__form input[type="file"] { width: 100%; text-align: left; }
.ez-body .ez-co-logo__form .btn-primary { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; }
.ez-body .ez-co-cod { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ez-body .ez-co-cod .form-check { margin: 0; padding-left: 0; gap: 12px; }
.ez-body .ez-co-cod .form-check-input { margin: 0 !important; float: none; }
.ez-body .ez-co-cod .form-check-label { font-weight: 500; color: var(--ez-text); }
.ez-body .ez-co-cod .btn { height: 40px; padding: 0 22px; margin: 0; }
.ez-body .ez-co-logo__form label { display: block; }
/* Item view (item/view) reuses this layout: details card left, Item History card right; the short history list has no compact toggle */
.ez-body .items-view .ez-compact-bar { display: none !important; }
@media (max-width: 575.98px) {
    .ez-body .items-view .ez-co-dl th { padding: 12px 14px 2px !important; border-bottom: 0 !important; background: transparent !important; font-size: 12px !important; }
    .ez-body .items-view .ez-co-dl td { padding: 0 14px 12px !important; font-weight: 600; }
}

/* 58. Store create/update (2026-10-12): Items-style form card (3 fields a row on wide screens) + Store Logo card */
.ez-body .ez-store-grid > .ez-if { grid-column: span 12; }
@media (min-width: 768px) { .ez-body .ez-store-grid > .ez-if { grid-column: span 6; } }
@media (min-width: 1400px) { .ez-body .ez-store-grid > .ez-if { grid-column: span 4; } }
.ez-body .ez-store .ez-item-add__head .btn-dark { margin-left: auto; }
.ez-body .ez-co-logo--stack { flex-direction: column; align-items: stretch; gap: 16px; }
.ez-body .ez-co-logo--stack .ez-co-logo__preview { max-width: none; flex: 0 0 auto; }
.ez-body .ez-co-logo--stack .ez-co-logo__form { flex: 0 0 auto; }
.ez-body .ez-co-logo__form .form-group, .ez-body .ez-co-logo__form .field-store-store_logo { display: block !important; margin-bottom: 0; }
.ez-body .ez-co-logo__form input[type="file"].btn { display: block; width: 100% !important; max-width: 100%; height: auto; padding: 8px 10px !important; border: 1px dashed var(--ez-border) !important; border-radius: 10px; background: var(--ez-surface-2, #f9fafb) !important; box-shadow: none !important; font-size: 13px; text-transform: none; color: var(--ez-t-secondary, #6B7280); }

/* 59. Compact toggle appended to a generated header always sits at the right end
   (the gcard "margin: 0 !important" rule for header children was pulling it next to the title) */
.ez-body .card.ez-gcard > .card-header > .ez-compact-slot--end { margin-left: auto !important; flex: 0 0 auto !important; }

/* 60. Waybill Ranges (waybill-range/index, 2026-10-12): create form left, list right; the list's own
   "Create Waybill Range" link is hidden here since the form sits beside it (it stays on deliver-waybill-range/index) */
.ez-body .ez-wbr .deliver-waybill-range-index > p:first-child { display: none; }
.ez-body .ez-wbr .ez-item-add__head .btn-dark { margin-left: auto; }

/* 61. Api Config create/update (2026-10-12): Items layout; API links as rows with a monospace link box */
.ez-body .ez-api-link + .ez-api-link { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-api-links .ez-api-link__name { font-size: 14px !important; font-weight: 600; margin: 0 0 2px; color: var(--ez-text); }
.ez-body .ez-api-links .ez-api-link__hint { font-size: 12px; margin: 0 0 8px; color: var(--ez-t-secondary, #6B7280); }
.ez-body .ez-api-link__url { margin: 0; padding: 10px 12px; border: 1px solid var(--ez-border); border-radius: 10px; background: var(--ez-surface-2, #f9fafb); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; color: #2563EB; word-break: break-all; user-select: all; }
html[data-theme="dark"] .ez-body .ez-api-link__url { color: #93c5fd; }
.ez-body .ez-api-links .ez-api-link__name { line-height: 1.4; }

/* 62. Web Api Configurations: keep words whole in the list */
html .ez-body .ez-webapi .ez-item-list table.table > tbody > tr > td, html.ez-grid-compact .ez-body .ez-webapi .ez-item-list table.table > tbody > tr > td { overflow-wrap: normal !important; word-break: normal !important; }

/* 63. Package selection (company-package/create): user's mockup, five cards with a
   round icon badge, curved coloured header, tinted price box, solid Register Now */
.ez-pkg-page { --pk: #16a34a; --pk2: #22c55e; --pkt: #ecfdf3; }
.ez-auth .ez-pkg-page .page-header {
    padding: 40px 0 20px; justify-content: flex-start;
    background: #f5f7ff url("../img/auth/pkg-bg-960.jpg") center / cover no-repeat fixed;
    background-image: image-set(url("../img/auth/pkg-bg-960.webp") type("image/webp"), url("../img/auth/pkg-bg-960.jpg") type("image/jpeg"));
}
@media (min-width: 992px) {
    .ez-auth .ez-pkg-page .page-header { background-image: image-set(url("../img/auth/pkg-bg-1746.webp") type("image/webp"), url("../img/auth/pkg-bg-1746.jpg") type("image/jpeg")); }
}
.ez-auth .ez-pkg-page .footer.position-absolute { position: relative !important; z-index: 1; bottom: auto !important; margin-top: 36px; }
.ez-pkg { max-width: 1260px; }
.ez-pkg__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 60px; }
.ez-pkg__icon { display: inline-flex; color: #3b82f6; }
.ez-pkg__icon .material-icons { font-size: 54px; line-height: 1; }
.ez-pkg__icon--warn { color: #f59e0b; }
.ez-auth .ez-pkg__title { margin: 6px 0 0; color: #0f172a !important; font-size: 42px !important; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.ez-pkg__title span { color: #e11d48; }
.ez-pkg__sub { margin: 8px 0 0; color: #374151; font-size: 17px; }
.ez-pkg__line { display: block; width: 92px; height: 4px; margin-top: 18px; border-radius: 4px; background: linear-gradient(90deg, #ec4899, #3b82f6); }
.ez-pkg__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.ez-pkg-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 20px 44px -18px rgba(30, 41, 99, .35); }
.ez-pkg-card--free { --pk: #15803d; --pk2: #22c55e; --pkt: #ecfdf3; }
.ez-pkg-card--basic { --pk: #ea580c; --pk2: #fb923c; --pkt: #fff7ed; }
.ez-pkg-card--standard { --pk: #1d4ed8; --pk2: #0ea5e9; --pkt: #eff6ff; }
.ez-pkg-card--premium { --pk: #dc2626; --pk2: #f43f5e; --pkt: #fef2f2; }
.ez-pkg-card--custom { --pk: #7e22ce; --pk2: #a855f7; --pkt: #f5f3ff; }
.ez-pkg-card__badge { position: absolute; z-index: 2; top: -34px; left: 50%; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-left: -34px; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--pk2), var(--pk)); color: #fff; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .4); }
.ez-pkg-card__badge .material-icons { font-size: 30px; }
.ez-pkg .ez-pkg-card__top { height: auto !important; min-height: 140px; padding: 44px 14px 30px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--pk), var(--pk2)) !important; border-radius: 18px 18px 50% 50% / 18px 18px 28px 28px; }
.ez-auth .ez-pkg-card__name { margin: 0; color: #fff !important; font-size: 21px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
.ez-pkg-card__tag { margin: 4px 0 0; color: rgba(255, 255, 255, .92); font-size: 12.5px; line-height: 1.35; }
.ez-pkg-card__ribbon { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 76px; margin: 16px 16px 0; padding: 10px 8px; border-radius: 12px; background: var(--pkt); text-align: center; }
.ez-pkg-card__small { display: inline-flex; align-items: center; gap: 4px; color: var(--pk); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ez-pkg-card__small .material-icons { font-size: 16px; }
.ez-pkg-card__big { color: var(--pk); font-size: 24px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.ez-pkg-card--custom .ez-pkg-card__big { font-size: 15px; line-height: 1.35; }
.ez-pkg-card__list { list-style: none; margin: 14px 0 0; padding: 0 20px; flex: 1 1 auto; }
.ez-pkg-card__list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: #374151; font-size: 14px; line-height: 1.35; }
.ez-pkg-card__list li .material-icons { flex: 0 0 auto; font-size: 20px; color: var(--pk); }
.ez-pkg-card__list li:last-child span { font-weight: 700; color: #111827; }
.ez-pkg-card__foot { padding: 16px 16px 18px; }
.ez-pkg .ez-pkg-card__btn { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 46px; padding: 0 16px; border-radius: 10px; background: linear-gradient(135deg, var(--pk), var(--pk2)) !important; color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 8px 18px -8px var(--pk); transition: transform .15s ease, box-shadow .15s ease; }
.ez-pkg .ez-pkg-card__btn:hover { transform: translateY(-1px); color: #fff !important; }
.ez-pkg .ez-pkg-card__btn .material-icons { font-size: 20px; }
.ez-auth .ez-pkg__footer .copyright, .ez-auth .ez-pkg__footer .copyright a, .ez-auth .ez-pkg__footer .nav-link.text-white { color: #374151 !important; }
.ez-auth .ez-pkg__footer .nav-link.text-white:hover { color: #e11d48 !important; }
html[data-theme="dark"] .ez-pkg-card { background: #1f2937; }
html[data-theme="dark"] .ez-pkg-card__badge { border-color: #1f2937; }
html[data-theme="dark"] .ez-pkg-card__ribbon { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .ez-pkg-card__list li { color: #d1d5db; }
html[data-theme="dark"] .ez-pkg-card__list li:last-child span { color: #f9fafb; }
@media (max-width: 1199.98px) {
    .ez-pkg__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 56px; }
    .ez-pkg-card { grid-column: span 2; }
    .ez-pkg-card:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 767.98px) {
    .ez-auth .ez-pkg__title { font-size: 30px !important; }
    .ez-pkg__sub { font-size: 15px; }
    .ez-pkg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 16px; }
    .ez-pkg-card, .ez-pkg-card:nth-child(4) { grid-column: auto; }
    .ez-pkg-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 8px); justify-self: center; width: 100%; }
}
@media (max-width: 575.98px) {
    .ez-auth .ez-pkg__title { font-size: 26px !important; }
    .ez-pkg__grid { grid-template-columns: 1fr; }
    .ez-pkg-card:last-child { max-width: none; }
}


/* 64. Lock icon for password fields */
.ez-body .ez-ic-lock { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-lock { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* 65. My Subscriptions: orders-left chip in the list header */
.ez-body .ez-subs-left { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ez-body .ez-subs-left .material-icons { font-size: 18px; }
.ez-body .ez-subs-left strong { font-size: 16px; font-weight: 700; color: #065f46; }
html[data-theme="dark"] .ez-body .ez-subs-left { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #6ee7b7; }
html[data-theme="dark"] .ez-body .ez-subs-left strong { color: #a7f3d0; }

/* 66. Status badges never wrap inside grid cells (compact grids let .badge wrap,
   which split "Handed Over" over two lines inside a 28px pill); the column widens instead */
html.ez-grid-compact .ez-content table.table > tbody > tr > td .badge.ez-badge,
html.ez-grid-compact .ez-content table.table > tbody > tr > td .ez-badge,
html .ez-body .ez-content table.table > tbody > tr > td .ez-badge { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; line-height: 1.2 !important; flex-shrink: 0; }
html.ez-grid-compact .ez-content table.table > tbody > tr > td .ez-badge > span:not(.ez-badge__dot):not(.ez-badge__icon) { white-space: nowrap !important; }
html .ez-body .ez-content table.table > tbody > tr > td .ez-badge--detail .ez-badge__body > small { white-space: normal !important; }

/* 67. Top navbar Orders / Leads pills: leading icon */
.ez-body .btn.ez-navpill { display: inline-flex !important; align-items: center; gap: 5px; }
.ez-body .btn.ez-navpill .ez-navpill__icon { font-size: 16px; line-height: 1; margin: 0 0 0 -2px; }

/* 68. Sign up (user-management/auth/registration): workspace art behind the
   hero text, white form card on the right, same fields/inputs as sign in */
body.ez-auth--signup {
    background-color: #fbf4fb !important;
    background-image: linear-gradient(rgba(251, 244, 251, .55), rgba(251, 244, 251, .55)), url("../img/auth/signup-bg-960.jpg") !important;
    background-image: linear-gradient(rgba(251, 244, 251, .55), rgba(251, 244, 251, .55)), image-set(url("../img/auth/signup-bg-960.webp") type("image/webp"), url("../img/auth/signup-bg-960.jpg") type("image/jpeg")) !important;
    background-size: cover !important;
    background-position: 30% center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
.ez-auth--signup .ez-auth-hero__art { display: none !important; }
.ez-auth--signup .page-header { background: transparent !important; }
.ez-auth--signup .page-header .card.ez-signup__card {
    max-width: 470px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: 20px;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 30px 70px -20px rgba(30, 41, 99, .28), 0 8px 24px rgba(30, 41, 99, .06) !important;
    padding: 0 !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.ez-auth--signup .page-header .card.ez-signup__card .card-body { padding: 2.25rem 2rem 1.75rem; }
.ez-auth--signup .ez-signup__card h1.ez-login__title { margin: 0 0 1.5rem; color: #0f1446; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.ez-auth--signup .ez-signup__card h1.ez-login__title span { background: linear-gradient(90deg, #d61f8c, #b5179e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ez-auth--signup .page-header .card .ez-login__field .form-control {
    min-height: 50px;
    padding: .65rem 2.9rem .65rem 2.85rem !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    font-size: 15px;
    box-shadow: none;
}
.ez-auth--signup .page-header .card .ez-login__field .form-control:focus { border-color: #d61f8c !important; box-shadow: 0 0 0 3px rgba(214, 31, 140, .14) !important; }
.ez-auth--signup #user .form-group, .ez-auth--signup #user .mb-3 { margin-bottom: 1rem; }
.ez-auth--signup #user .invalid-feedback, .ez-auth--signup #user .help-block { display: block; margin-top: .35rem; font-size: 13px; }
.ez-signup__eye { padding: 0; }
.ez-signup__eye > i { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 !important; font-size: 17px; cursor: pointer; }
.ez-auth--signup .page-header .card p.ez-signup__cap-label { margin: .25rem 0 .4rem; color: #374151; font-size: 13.5px; font-weight: 500; }
.ez-signup__cap { display: flex; flex-direction: column; gap: 10px; }
.ez-signup__cap-img { display: flex; align-items: center; min-height: 58px; padding: 4px 12px; border: 1px solid #dfe3ec; border-radius: 12px; background: #f8f9fc; }
.ez-signup__cap-img img { max-height: 50px; width: auto; cursor: pointer; }
.ez-auth--signup .page-header .card .ez-signup__cap .form-control { min-height: 50px; border: 1px solid #dfe3ec !important; border-radius: 12px !important; background: #fff !important; font-size: 15px; padding: .65rem 1rem !important; box-shadow: none; }
.ez-auth--signup .page-header .card .ez-signup__cap .form-control:focus { border-color: #d61f8c !important; box-shadow: 0 0 0 3px rgba(214, 31, 140, .14) !important; }
.ez-auth--signup .page-header .card .btn.ez-login__submit {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 50px; margin: .5rem 0 0; border: 0; border-radius: 12px;
    background: linear-gradient(90deg, #f43341 0%, #e0247a 60%, #c2189c 100%) !important;
    box-shadow: 0 12px 24px -10px rgba(224, 36, 122, .6) !important;
    color: #fff; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.ez-auth--signup .page-header .card p.ez-login__signup { margin: 0 !important; color: #4b5563; font-size: 14.5px; text-align: center; }
.ez-auth--signup .ez-login__signup a { margin-left: 6px; background: none !important; -webkit-text-fill-color: #e0247a; color: #e0247a !important; font-weight: 700; }
.ez-auth--signup .footer.ez-login__footer,
.ez-auth--signup .footer.ez-login__footer .copyright,
.ez-auth--signup .footer.ez-login__footer a,
.ez-auth--signup .footer.ez-login__footer .nav-link { color: #374151 !important; font-size: 13.5px; }
.ez-auth--signup .footer.ez-login__footer .nav-item + .nav-item { border-left: 1px solid #9ca3af; }
.ez-auth--signup .footer.ez-login__footer .nav-link { padding: 2px 16px; }
.ez-auth--signup .ez-auth-hero { background: transparent !important; }
@media (min-width: 992px) {
    /* image height-fit and nudged right so the person sits between the text and the card */
    body.ez-auth--signup {
        background-image: linear-gradient(90deg, #fdf3fa 0, #fdf3fa 17vw, rgba(253, 243, 250, 0) 30vw), url("../img/auth/signup-bg-1746.jpg") !important;
        background-image: linear-gradient(90deg, #fdf3fa 0, #fdf3fa 17vw, rgba(253, 243, 250, 0) 30vw), image-set(url("../img/auth/signup-bg-1746.webp") type("image/webp"), url("../img/auth/signup-bg-1746.jpg") type("image/jpeg")) !important;
        background-size: 100% 100%, auto 100% !important;
        background-position: 0 0, 16vw center !important;
    }
    .ez-auth--signup .ez-auth-hero { width: 44%; padding-right: 0; }
    .ez-auth--signup .ez-auth-hero__title { max-width: 480px; font-size: clamp(2rem, 1rem + 2.2vw, 3rem); }
    .ez-auth--signup .ez-auth-hero__lead { max-width: 380px; }
    .ez-auth--signup .ez-auth-hero__list .material-icons { width: 34px; height: 34px; background: #fff; color: #e0247a; font-size: 18px; box-shadow: 0 6px 14px -6px rgba(224, 36, 122, .45); }
    .ez-auth--signup .main-content { margin-left: 60%; }
    .ez-auth--signup .page-header .container { max-width: 540px; }
    .ez-auth--signup .footer.position-absolute { left: 0; width: 100% !important; }
    .ez-auth--signup .footer .row > .col-md-6 { flex: 0 0 auto; width: auto; }
    .ez-auth--signup .footer .row { justify-content: space-between; flex-wrap: nowrap; }
}
@media (max-width: 991.98px) {
    .ez-auth--signup .ez-auth-hero { padding-bottom: 0; }
    .ez-auth--signup .footer.position-absolute { position: static !important; }
}
@media (max-width: 575.98px) {
    .ez-auth--signup .page-header .card.ez-signup__card .card-body { padding: 1.75rem 1.25rem 1.5rem; }
    .ez-auth--signup .ez-signup__card h1.ez-login__title { font-size: 1.65rem; }
}

/* 69. Business profile (company/create): sign-up background, wide card with a
   gradient header band, labelled fields with icons inside */
.ez-auth--profile .page-header .card.ez-bp__card {
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: 20px;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 30px 70px -20px rgba(30, 41, 99, .28), 0 8px 24px rgba(30, 41, 99, .06) !important;
    padding: 0 !important;
}
.ez-bp__head { padding: 22px 32px 20px; background: linear-gradient(90deg, #f43358 0%, #e0247a 50%, #8b3fd6 100%); color: #fff; text-align: center; }
.ez-auth .ez-bp__head h4.ez-bp__title { margin: 0; color: #fff !important; font-size: 1.6rem !important; font-weight: 800; letter-spacing: -.01em; }
.ez-auth--profile .page-header .card.ez-bp__card .card-body { padding: 1.5rem 2rem 1.5rem; }
.ez-auth .ez-bp h2.ez-bp__sec { display: flex; align-items: center; gap: 10px; margin: 0 0 1rem; color: #0f1446; font-size: 16px; font-weight: 700; }
.ez-bp h2.ez-bp__sec i { font-size: 17px; color: #0f1446; }
.ez-bp h2.ez-bp__sec--line { margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; }
.ez-auth .ez-bp label { margin: 0 0 6px; color: #374151; font-size: 13.5px; font-weight: 500; }
.ez-bp .form-group, .ez-bp .mb-3 { margin-bottom: 1rem; }
.ez-bp__field { position: relative; display: flex; align-items: center; }
.ez-bp__field > .material-icons { position: absolute; left: 13px; z-index: 1; color: #6b7280; font-size: 19px; pointer-events: none; }
.ez-auth .ez-bp .ez-bp__field .form-control {
    min-height: 46px; padding: .55rem .9rem .55rem 2.6rem !important;
    border: 1px solid #dfe3ec !important; border-radius: 10px !important; background: #fff !important; font-size: 14.5px; box-shadow: none;
}
.ez-auth .ez-bp .ez-bp__field .form-control:focus { border-color: #d61f8c !important; box-shadow: 0 0 0 3px rgba(214, 31, 140, .14) !important; }
.ez-bp__field:focus-within > .material-icons { color: #d61f8c; }
.ez-bp__zero { position: absolute; left: 40px; z-index: 1; top: 8px; bottom: 8px; display: flex; align-items: center; padding: 0 10px; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; color: #374151; font-size: 14px; pointer-events: none; }
.ez-auth .ez-bp .ez-bp__field--phone .form-control { padding-left: 4.6rem !important; }
.ez-bp__file { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 10px 4px 12px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8f9fc; }
.ez-bp__file > .material-icons { color: #6b7280; font-size: 22px; }
.ez-auth .ez-bp .ez-bp__file input[type="file"] { width: 100%; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #6b7280; font-size: 13px; text-align: left; text-transform: none; }
.ez-bp__file input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid #dfe3ec; border-radius: 8px; background: #fff; color: #0f1446; font-weight: 600; cursor: pointer; }
.ez-bp .help-block, .ez-bp .invalid-feedback { display: block; margin-top: .3rem; font-size: 12.5px; color: #dc2626; }
.ez-bp__foot { margin-top: .5rem; }
.ez-auth--profile .ez-bp__foot .btn.btn-success { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font-size: 16px; font-weight: 600; text-transform: none; }
.ez-bp__foot p { color: #374151; }
.ez-bp__foot p a { -webkit-text-fill-color: #dc2626; color: #dc2626 !important; background: none !important; }
@media (min-width: 992px) {
    .ez-auth--profile .ez-auth-hero { width: 46%; }
    .ez-auth--profile .main-content { margin-left: 46%; }
    .ez-auth--profile .page-header .container { max-width: 780px; }
    body.ez-auth--profile { background-position: 0 0, 6vw center !important; }
}
@media (max-width: 575.98px) {
    .ez-bp__head { padding: 18px 18px 16px; }
    .ez-auth .ez-bp__head h4.ez-bp__title { font-size: 1.3rem !important; }
    .ez-auth--profile .page-header .card.ez-bp__card .card-body { padding: 1.25rem 1.1rem; }
}
.ez-auth--profile .page-header .ez-bp .row > .col-md-7 { flex: 0 0 auto; }
@media (min-width: 768px) {
    .ez-auth--profile .page-header .ez-bp .row > .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .ez-auth--profile .page-header .ez-bp .row > .col-md-5 { flex: 0 0 41.667%; max-width: 41.667%; }
    .ez-auth--profile .page-header .ez-bp .row > .col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; }
}
.ez-auth--profile .footer.position-absolute { position: static !important; margin-top: 8px; }
@media (min-width: 992px) { .ez-auth--profile .page-header { padding-bottom: 8px !important; } }

/* 70. Mobile / email verification (company/otp, company/email): narrow card in the business-profile family */
.ez-auth--profile .page-header .card.ez-bp__card--narrow { max-width: 520px; }
.ez-auth .ez-otp p.ez-otp__sub { margin: 0 0 12px; color: #0f1446; font-size: 17px; font-weight: 700; text-align: center; }
.ez-otp__art { position: relative; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #f5e8ff 0%, #fdeaf4 70%, rgba(253, 234, 244, 0) 100%); }
.ez-otp__art .ez-otp__dev { font-size: 64px; color: #5b21b6; }
.ez-otp__bubble { position: absolute; top: 18px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #f43f7a, #c026d3); box-shadow: 0 8px 16px -6px rgba(192, 38, 211, .6); }
.ez-otp__bubble .material-icons { font-size: 20px; color: #fff; }
.ez-auth .ez-otp p.ez-otp__hint { margin: 0 0 8px; color: #4b5563; font-size: 14px; }
.ez-auth .ez-otp .form-control.ez-otp__input { min-height: 52px; border: 1px solid #dfe3ec !important; border-radius: 12px !important; background: #fff !important; font-size: 22px !important; letter-spacing: .3em; box-shadow: none; }
.ez-auth .ez-otp .form-control.ez-otp__input:focus { border-color: #d61f8c !important; box-shadow: 0 0 0 3px rgba(214, 31, 140, .14) !important; }
.ez-otp .text-sm { color: #4b5563; }
.ez-otp a.text-primary, .ez-otp__welcome a { -webkit-text-fill-color: #e0247a; color: #e0247a !important; background: none !important; }
.ez-otp__foot { margin-top: 16px; }
.ez-auth .ez-otp .btn.ez-otp__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #f43f7a 0%, #c026d3 60%, #7c3aed 100%) !important; box-shadow: 0 12px 24px -10px rgba(192, 38, 211, .55) !important; color: #fff; font-size: 16px; font-weight: 600; text-transform: none; }
.ez-auth .ez-otp .btn.ez-otp__btn:disabled { opacity: .55; box-shadow: none !important; }
.ez-otp p.ez-otp__welcome { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid #e5e7eb; color: #374151; }
.ez-bp__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.ez-bp__step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .88) !important; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: default; }
.ez-bp__step.is-current { background: #fff; color: #c026d3 !important; font-weight: 700; }

/* 71. Verification pages: user's OTP art (woman + phone) as the background, no
   left-side logo/text, card centred on the page */
body.ez-auth--verify {
    background-image: linear-gradient(rgba(251, 244, 251, .5), rgba(251, 244, 251, .5)), url("../img/auth/otp-bg-960.jpg") !important;
    background-image: linear-gradient(rgba(251, 244, 251, .5), rgba(251, 244, 251, .5)), image-set(url("../img/auth/otp-bg-960.webp") type("image/webp"), url("../img/auth/otp-bg-960.jpg") type("image/jpeg")) !important;
    background-position: 25% center !important;
}
.ez-auth--verify .ez-auth-hero { display: none !important; }
.ez-auth--verify .page-header > .container { margin-top: auto !important; margin-bottom: auto !important; }
@media (min-width: 992px) {
    body.ez-auth--verify {
        background-image: url("../img/auth/otp-bg-1746.jpg") !important;
        background-image: image-set(url("../img/auth/otp-bg-1746.webp") type("image/webp"), url("../img/auth/otp-bg-1746.jpg") type("image/jpeg")) !important;
        background-size: cover !important;
        background-position: left center !important;
    }
    .ez-auth--verify .main-content { margin-left: 0 !important; }
}
/* Footer across the whole page: copyright bottom-left, links bottom-right */
@media (min-width: 992px) {
    .ez-auth--verify .footer.ez-login__footer { position: fixed !important; left: 0; right: 0; bottom: 14px !important; width: auto !important; z-index: 2; }
    .ez-auth--verify .footer.ez-login__footer > .container { max-width: none; padding: 0 5vw; }
}


/* 72. Payment page (company-package/update): user's mockup. Logo, title, static
   3-step indicator; Billing Details card (with the bank panel from #payinfo pulled
   under it via display: contents) and a Payment Summary card on the right */
.ez-auth .ez-pay-page .page-header {
    position: relative; padding: 28px 0 20px; justify-content: flex-start;
    background: #f5f7ff url("../img/auth/pay-bg-960.jpg") center / cover no-repeat fixed;
    background-image: image-set(url("../img/auth/pay-bg-960.webp") type("image/webp"), url("../img/auth/pay-bg-960.jpg") type("image/jpeg"));
}
@media (min-width: 992px) {
    .ez-auth .ez-pay-page .page-header { background-image: image-set(url("../img/auth/pay-bg-1746.webp") type("image/webp"), url("../img/auth/pay-bg-1746.jpg") type("image/jpeg")); }
}
.ez-auth .ez-pay-page .footer.position-absolute { position: relative !important; z-index: 1; bottom: auto !important; margin-top: 28px; }
.ez-pay__logo { position: absolute; top: 28px; left: 4vw; z-index: 2; }
.ez-pay__logo img { width: auto !important; height: 58px !important; max-width: none; }
.ez-pay__intro { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 26px; }
.ez-auth .ez-pay__title { margin: 0; color: #0f172a !important; font-size: 38px !important; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ez-pay__title span { color: #e11d48; }
.ez-pay__sub { margin: 8px 0 0; color: #374151; font-size: 16px; }
.ez-pay__steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 0; margin: 20px 0 0; padding: 0; list-style: none; }
.ez-pay__steps li { display: flex; align-items: center; gap: 8px; color: #9ca3af; font-size: 13px; font-weight: 500; }
.ez-pay__steps li + li::before { content: ""; width: 40px; height: 1px; margin: 0 14px; background: #f9a8d4; }
.ez-pay__steps li span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #d1d5db; color: #fff; font-size: 13px; font-weight: 700; }
.ez-pay__steps li.is-current { color: #e11d48; font-weight: 600; }
.ez-pay__steps li.is-current span { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 6px 14px -6px #e11d48; }
.ez-pay__col { max-width: 1000px; }
.ez-pay .row { margin-left: 0; margin-right: 0; }
.ez-pay__grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 0 22px; align-items: start; filter: drop-shadow(0 18px 26px rgba(30, 41, 99, .13)); }
.ez-pay__grid > .ez-pay__details { grid-column: 1; grid-row: 1; width: auto; max-width: none; padding: 22px 24px 10px; background: #fff; border-radius: 18px 18px 0 0; }
.ez-pay__grid > #payinfo { display: contents; }
.ez-pay__grid:not(:has(.ez-pay__bank)) > .ez-pay__details { border-radius: 18px; padding-bottom: 18px; }
.ez-auth .ez-pay__cardtitle, .ez-pay__sum .card-header h5 { display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid #eef0f5; color: #111827; font-size: 18px !important; font-weight: 700; }
.ez-pay__cardtitle .material-icons { color: #1e3a8a; font-size: 28px; }
.ez-auth .ez-pay__store { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px !important; color: #111827; font-size: 14px !important; font-weight: 700; }
.ez-pay__store .material-icons { font-size: 18px; color: #111827; }
.ez-pay__table { margin: 0; }
.ez-pay__table td { padding: 6px 4px; border-color: #eef0f5; vertical-align: middle; }
.ez-pay__table td:first-child { width: 36%; min-width: 0 !important; }
.ez-pay__table td:first-child strong { color: #111827; font-size: 14px; font-weight: 600; }
.ez-pay__table td:last-child > label { display: block; padding: 8px 12px !important; border: 1px solid #e5e7eb; border-radius: 8px; background: #f6f7fb; color: #374151; font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
.ez-pay__table .form-group, .ez-pay__table .mb-3 { margin: 0 !important; }
.ez-pay__table .form-select { min-height: 40px; border: 1px solid #d1d5db !important; border-radius: 8px; padding: 7px 36px 7px 12px !important; background-color: #fff; font-size: 14px; }
.ez-pay__table .form-select:focus { border-color: #e11d48 !important; box-shadow: 0 0 0 3px rgba(225, 29, 72, .12) !important; }
.ez-pay__bank { display: block !important; grid-column: 1; grid-row: 2; margin: -1px 0 0 !important; padding: 14px 18px 8px; border: solid #fff !important; border-width: 0 24px 24px !important; border-radius: 0 0 18px 18px; background: #eef2ff padding-box !important; }
.ez-auth .ez-pay__banktitle { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid #dfe5f5; color: #111827; font-size: 16px !important; font-weight: 700; }
.ez-pay__banktitle .material-icons { color: #1e3a8a; font-size: 24px; }
.ez-pay__bank table { margin: 0; font-size: 14px !important; }
.ez-pay__bank td { padding: 8px 4px; border-color: #dfe5f5; background: none; color: #374151; }
.ez-pay__bank tr:last-child td { border-bottom: 0; }
.ez-pay__bank td:first-child { position: relative; width: 38%; padding-right: 28px; color: #111827; font-weight: 600; }
.ez-pay__bank td:first-child::after { content: ":"; position: absolute; right: 12px; }
.ez-pay__sum { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 18px; background: #fff; box-shadow: none; }
.ez-pay__sum .card-header { padding: 22px 22px 0 !important; background: none; }
.ez-pay__sum h5 .material-icons { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; font-size: 20px; }
.ez-pay__sum .card-header hr { display: none; }
.ez-pay__sum .card-body { padding: 6px 22px 22px !important; }
.ez-pay__sumtable { margin: 0; border-collapse: separate; border-spacing: 0; }
.ez-pay__sumtable td { padding: 14px 10px; border-bottom: 1px solid #eef0f5; vertical-align: middle; }
.ez-pay__sumtable h4, .ez-pay__sumtable h6 { margin: 0; color: #111827; font-size: 15px !important; font-weight: 600; white-space: nowrap; }
.ez-pay__sumtable .ez-pay__monthly td { border-bottom: 0; background: #fff1f2; }
.ez-pay__sumtable .ez-pay__monthly td:first-child { border-radius: 10px 0 0 10px; }
.ez-pay__sumtable .ez-pay__monthly td:last-child { border-radius: 0 10px 10px 0; }
.ez-pay__sumtable .ez-pay__monthly td:last-child h6 { color: #e11d48; font-size: 24px !important; font-weight: 800; }
.ez-pay__sum hr.border-white { display: none; }
.ez-pay__sum #pay_now { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin: 14px 0 0; border: 0; border-radius: 10px; background: linear-gradient(100deg, #f43f5e, #d946ef 60%, #8b5cf6) !important; color: #fff; font-size: 16px; font-weight: 700; text-transform: none; box-shadow: 0 12px 22px -12px rgba(217, 70, 239, .9); }
.ez-pay__sum #pay_now::before { content: "lock"; font-family: "Material Icons Round"; font-size: 20px; font-weight: 400; line-height: 1; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; }
.ez-pay__sum #pay_now::after { content: "arrow_forward"; position: absolute; right: 18px; font-family: "Material Icons Round"; font-size: 22px; font-weight: 400; line-height: 1; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; }
.ez-pay__sum #pay_now:disabled { opacity: .55; box-shadow: none; }
.ez-pay__secure { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 0 8px; }
.ez-pay__secure .material-icons { color: #16a34a; font-size: 36px; }
.ez-pay__secure strong { display: block; color: #111827; font-size: 14px; font-weight: 600; }
.ez-pay__secure span { display: block; color: #6b7280; font-size: 13px; line-height: 1.5; }
.ez-pay__sum--free .card-body h5 { justify-content: center; border: 0; }
.ez-auth .ez-pay__footer .nav-item + .nav-item { border-left: 1px solid #cbd5e1; }
.ez-auth .ez-pay__footer .nav-link { padding: 2px 16px !important; }
html[data-theme="dark"] .ez-pay__grid > .ez-pay__details, html[data-theme="dark"] .ez-pay__sum { background: #111827; }
html[data-theme="dark"] .ez-pay__bank { border-color: #111827 !important; background: rgba(99, 102, 241, .14) padding-box !important; }
html[data-theme="dark"] .ez-pay__table td:last-child > label { background: #1f2937; border-color: #374151; color: #e5e7eb; }
html[data-theme="dark"] .ez-auth .ez-pay__cardtitle, html[data-theme="dark"] .ez-pay__sum .card-header h5, html[data-theme="dark"] .ez-pay__sumtable h4, html[data-theme="dark"] .ez-pay__sumtable h6, html[data-theme="dark"] .ez-pay__table td:first-child strong, html[data-theme="dark"] .ez-pay__bank td { color: #f3f4f6; }
@media (max-width: 1399.98px) { .ez-pay__logo { position: static; display: block; width: max-content; margin: 0 auto 14px; } .ez-pay__logo img { height: 48px !important; } }
@media (max-width: 991.98px) {
    .ez-pay__grid { grid-template-columns: minmax(0, 1fr); }
    .ez-pay__sum { grid-column: 1; grid-row: 3; margin-top: 20px !important; }
    .ez-auth .ez-pay__title { font-size: 30px !important; }
}
@media (max-width: 575.98px) {
    .ez-auth .ez-pay__title { font-size: 25px !important; }
    .ez-pay__steps { gap: 8px 14px; }
    .ez-pay__steps li + li::before { display: none; }
    .ez-pay__steps li { font-size: 12px; }
    .ez-pay__bank td { font-size: 13px; }
    .ez-pay__bank td:first-child { width: 1%; white-space: nowrap; }
    .ez-pay__grid > .ez-pay__details { padding: 18px 16px 8px; }
    .ez-pay__bank { border-width: 0 14px 16px !important; }
    .ez-pay__table td:first-child { width: 34%; }
}

/* 73. Confirm payment (company-package/confirmation): user's mockup on the checkout
   art; reuses the payment page title/steps/footer; gateway form only wrapped */
.ez-auth .ez-conf-page .page-header {
    background-image: url("../img/auth/conf-bg-960.jpg");
    background-image: image-set(url("../img/auth/conf-bg-960.webp") type("image/webp"), url("../img/auth/conf-bg-960.jpg") type("image/jpeg"));
}
@media (min-width: 992px) {
    .ez-auth .ez-conf-page .page-header { padding-top: 40px; background-image: image-set(url("../img/auth/conf-bg-1746.webp") type("image/webp"), url("../img/auth/conf-bg-1746.jpg") type("image/jpeg")); }
}
.ez-pay__steps li.is-done { color: #111827; font-weight: 600; }
.ez-pay__steps li.is-done span { background: #16a34a; }
.ez-pay__steps li.is-done span .material-icons { font-size: 17px; }
.ez-conf-page .ez-pay__col { max-width: 1080px; }
.ez-conf__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ez-conf__info { grid-column: 1; grid-row: 1; padding: 22px 24px 14px; border-radius: 18px; background: #fff; }
.ez-conf__table { margin: 6px 0 0; }
.ez-conf__table td { padding: 5px 4px; border-color: #eef0f5; vertical-align: middle; }
.ez-conf__table td:first-child { width: 36%; }
.ez-conf__table td label { margin: 0; color: #111827; font-size: 14px; font-weight: 600; }
.ez-conf__table .form-control, .ez-conf__table .form-control:disabled { height: 40px; padding: 8px 14px !important; border: 0 !important; border-radius: 8px; background: #f1f4fb !important; color: #374151; font-size: 14px; opacity: 1; box-shadow: none !important; }
.ez-conf__sum { grid-row: 1; padding: 22px 22px 24px; }
.ez-conf__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 16px 18px; border: 1px solid #eef0f5; border-radius: 12px; }
.ez-conf__row span { color: #111827; font-size: 15px; font-weight: 600; }
.ez-conf__row strong { color: #111827; font-size: 15px; font-weight: 700; }
.ez-conf__row--amount { margin-top: 12px; border-color: #fde2e7; background: #fff1f2; }
.ez-conf__row--amount strong { color: #e11d48; font-size: 26px; font-weight: 800; white-space: nowrap; }
.ez-conf__sum .ez-pay__secure { margin: 22px 0 22px; }
.ez-conf__pay #payhere-payment { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 12px; background: linear-gradient(100deg, #f43f5e, #d946ef 60%, #7c3aed) !important; color: #fff; font-size: 17px; font-weight: 700; text-transform: none; box-shadow: 0 12px 22px -12px rgba(217, 70, 239, .9); }
.ez-conf__pay #payhere-payment::before { content: "lock"; font-family: "Material Icons Round"; font-size: 22px; font-weight: 400; line-height: 1; font-feature-settings: "liga"; }
.ez-conf__pay #payhere-payment::after { content: "arrow_forward"; font-family: "Material Icons Round"; font-size: 22px; font-weight: 400; line-height: 1; font-feature-settings: "liga"; }
html[data-theme="dark"] .ez-conf__info { background: #111827; }
html[data-theme="dark"] .ez-conf__table td label, html[data-theme="dark"] .ez-conf__row span, html[data-theme="dark"] .ez-conf__row strong { color: #f3f4f6; }
html[data-theme="dark"] .ez-conf__table .form-control { background: #1f2937 !important; color: #e5e7eb; }
@media (max-width: 991.98px) {
    .ez-conf__grid { grid-template-columns: minmax(0, 1fr); }
    .ez-conf__sum { grid-column: 1; grid-row: 2; margin-top: 20px !important; }
}
@media (max-width: 575.98px) {
    .ez-conf__info { padding: 18px 16px 10px; }
    .ez-conf__row--amount strong { font-size: 21px; }
}
/* Bank transfer variant (confirmationBT): dashed bank-slip box + Upload Now */
.ez-conf__slip { margin: 18px 0 18px; }
.ez-conf__sliplabel { display: block; margin: 0 0 6px; color: #111827; font-size: 14px; font-weight: 600; }
.ez-conf__file { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1.5px dashed #c7cfe0; border-radius: 12px; background: #f8f9fc; }
.ez-conf__file > .material-icons { color: #8b5cf6; font-size: 26px; }
.ez-conf__file .form-group, .ez-conf__file .mb-3 { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.ez-auth .ez-conf__file input[type="file"] { width: 100%; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #6b7280; font-size: 13px; text-align: left; text-transform: none; }
.ez-conf__file input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid #dfe3ec; border-radius: 8px; background: #fff; color: #0f1446; font-weight: 600; cursor: pointer; }
.ez-conf__pay .ez-conf__upload { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 12px; background: linear-gradient(100deg, #f43f5e, #d946ef 60%, #7c3aed) !important; color: #fff; font-size: 17px; font-weight: 700; text-transform: none; box-shadow: 0 12px 22px -12px rgba(217, 70, 239, .9); }
.ez-conf__pay .ez-conf__upload::before { content: "upload"; font-family: "Material Icons Round"; font-size: 22px; font-weight: 400; line-height: 1; font-feature-settings: "liga"; }
html[data-theme="dark"] .ez-conf__file { background: #1f2937; border-color: #374151; }
html[data-theme="dark"] .ez-conf__sliplabel { color: #f3f4f6; }

/* 74. "Create Your First Store" popup (#storeModal, views/layouts/_storeModal.php):
   user's mockup, illustration left, welcome text + four feature tiles right */
.ez-storemodal .modal-dialog { max-width: min(1100px, calc(100vw - 32px)); }
.ez-storemodal .modal-content { position: relative; overflow: hidden; border: 0; border-radius: 24px; background: #f7f8fd; box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .45); }
.ez-storemodal__close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 40px; height: 40px; padding: 0; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff !important; color: #374151; opacity: 1; box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .25); }
.ez-storemodal__close::before { content: "close"; font-family: "Material Icons Round"; font-size: 22px; line-height: 38px; font-feature-settings: "liga"; }
.ez-storemodal__grid { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); min-height: 520px; }
.ez-storemodal__art { position: relative; overflow: hidden; border-radius: 0 160px 160px 0 / 0 50% 50% 0; }
.ez-storemodal__art picture { position: absolute; inset: 0; }
.ez-storemodal__art img { display: block; width: 100% !important; height: 100% !important; max-width: none; max-height: none; object-fit: cover; object-position: 30% center; }
.ez-storemodal__body { display: flex; flex-direction: column; gap: 18px; padding: 36px 36px 30px 30px; }
.ez-storemodal__head { display: flex; align-items: flex-start; gap: 18px; padding-right: 48px; }
.ez-storemodal__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 18px; background: #e0ecff; color: #2563eb; }
.ez-storemodal__icon .material-icons { font-size: 40px; }
.ez-storemodal .ez-storemodal__hello { margin: 0; color: #2563eb !important; font-size: 18px; font-weight: 600; }
.ez-storemodal .ez-storemodal__title { margin: 2px 0 6px; color: #0f172a; font-size: 32px !important; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ez-storemodal__title span { color: #e11d48; }
.ez-storemodal__sub { margin: 0; color: #4b5563; font-size: 15px; }
.ez-storemodal__can { padding: 18px; border-radius: 16px; background: #eef1f8; }
.ez-storemodal .ez-storemodal__cantitle { margin: 0 0 12px; color: #111827; font-size: 16px !important; font-weight: 700; }
.ez-storemodal__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ez-storemodal__tile { --t: #16a34a; --tb: #e2f8ea; display: flex; align-items: flex-start; gap: 12px; min-height: 92px; padding: 14px; border-radius: 14px; background: var(--tb); }
.ez-storemodal__tile--pink { --t: #e11d48; --tb: #ffe8ec; }
.ez-storemodal__tile--blue { --t: #2563eb; --tb: #d9e6ff; }
.ez-storemodal__tile--orange { --t: #ea580c; --tb: #ffefdc; }
.ez-storemodal__tileicon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--t); box-shadow: 0 6px 14px -8px var(--t); }
.ez-storemodal .ez-storemodal__tileicon .material-icons { font-size: 26px; color: var(--t) !important; }
.ez-storemodal__tile strong { display: block; color: #111827; font-size: 15px; font-weight: 700; }
.ez-storemodal__tile div > span { display: block; margin-top: 2px; color: #4b5563; font-size: 13px; line-height: 1.45; }
.ez-storemodal__tip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #f3effb; }
.ez-storemodal__tipicon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #9333ea; }
.ez-storemodal__tip p { margin: 0; color: #374151; font-size: 14px; line-height: 1.5; }
.ez-storemodal__tip strong { color: #7c3aed; }
.ez-storemodal__foot { display: flex; justify-content: flex-end; margin-top: auto; }
.ez-storemodal .ez-storemodal__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin: 0; padding: 0 28px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; color: #fff !important; font-size: 18px; font-weight: 700; text-transform: none; box-shadow: 0 12px 24px -12px rgba(37, 99, 235, .9); }
.ez-storemodal__btn .nav-link-text { margin: 0 !important; }
.ez-storemodal__btn .material-icons { font-size: 22px; }
html[data-theme="dark"] .ez-storemodal .modal-content { background: #111827; }
html[data-theme="dark"] .ez-storemodal__can, html[data-theme="dark"] .ez-storemodal__tip { background: #1f2937; }
html[data-theme="dark"] .ez-storemodal__tile { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .ez-storemodal .ez-storemodal__title, html[data-theme="dark"] .ez-storemodal__tile strong, html[data-theme="dark"] .ez-storemodal .ez-storemodal__cantitle { color: #f3f4f6; }
html[data-theme="dark"] .ez-storemodal__sub, html[data-theme="dark"] .ez-storemodal__tile div > span, html[data-theme="dark"] .ez-storemodal__tip p { color: #cbd5e1; }
@media (max-width: 991.98px) {
    .ez-storemodal .modal-dialog { max-width: 640px; }
    .ez-storemodal__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .ez-storemodal__art { display: none; }
    .ez-storemodal__body { padding: 28px 22px 22px; }
}
@media (max-width: 575.98px) {
    .ez-storemodal__head { gap: 12px; padding-right: 40px; }
    .ez-storemodal__icon { width: 52px; height: 52px; border-radius: 14px; }
    .ez-storemodal__icon .material-icons { font-size: 28px; }
    .ez-storemodal .ez-storemodal__title { font-size: 24px !important; }
    .ez-storemodal__tiles { grid-template-columns: minmax(0, 1fr); }
    .ez-storemodal__tile { min-height: 0; }
    .ez-storemodal__foot .ez-storemodal__btn { width: 100%; justify-content: center; }
}
.ez-storemodal .ez-storemodal__grid { align-items: stretch; }
.ez-storemodal .ez-storemodal__art { align-self: stretch; height: auto; min-height: 100%; }
.ez-storemodal .ez-storemodal__title { display: block !important; }
.ez-storemodal .ez-storemodal__tileicon .material-icons, .ez-storemodal .ez-storemodal__icon .material-icons, .ez-storemodal .ez-storemodal__tipicon .material-icons { position: static !important; margin: 0 !important; transform: none !important; }

/* 75. Top-bar store switcher (views/site/_navstore.php): "Your Stores" panel per
   user's mockup. Same links (POST /store/selected), ids and store query. Create
   Store / Manage Stores use the existing store pages, admin-only like the menu. */
.ez-storesw__btn.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px !important; border: 1px solid #e5e7eb !important; border-radius: 999px !important; background: #fff !important; color: #111827 !important; font-size: 14px; font-weight: 600; text-transform: none; box-shadow: 0 1px 2px rgba(17, 24, 39, .06); }
.ez-storesw__btn.btn:hover, .ez-storesw__btn.btn[aria-expanded="true"] { border-color: #bfdbfe !important; background: #f8fbff !important; }
.ez-storesw__btnicon.material-icons { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #eff6ff; color: #2563eb; font-size: 17px !important; line-height: 1; }
.ez-storesw__btnname { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-storesw__btn .fa-chevron-down { color: #6b7280; font-size: 11px !important; }
.dropdown-menu.ez-storesw { width: 460px; max-width: calc(100vw - 24px); max-height: min(78vh, 640px); overflow-y: auto; padding: 0 !important; border: 1px solid #e5e7eb; border-radius: 16px !important; background: #fff; box-shadow: 0 24px 48px -16px rgba(17, 24, 39, .28) !important; }
.dropdown-menu.ez-storesw::before { display: none !important; }
.ez-storesw__head { display: flex !important; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid #eef0f3; }
.ez-storesw__headicon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #eff6ff; color: #2563eb; }
.ez-storesw__headicon .material-icons { font-size: 24px !important; }
.ez-storesw__headtext { flex: 1 1 auto; min-width: 0; }
.ez-storesw__title { margin: 2px 0 2px !important; color: #111827 !important; font-size: 18px !important; font-weight: 700 !important; }
.ez-storesw__sub { margin: 0; color: #6b7280; font-size: 13px; line-height: 1.45; white-space: normal; }
.ez-storesw__create { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 1px solid #93c5fd; border-radius: 10px; background: #fff; color: #2563eb !important; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ez-storesw__create .material-icons { font-size: 18px; }
.ez-storesw__create:hover { background: #eff6ff; }
.ez-storesw__item { margin: 0 !important; padding: 10px 14px 0; }
.ez-storesw__head + .ez-storesw__item { padding-top: 14px; }
.ez-storesw .ez-storesw__item:last-of-type { padding-bottom: 14px; }
.ez-storesw .ez-storesw__item > .dropdown-item { display: block; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px !important; background: #fff; white-space: normal; }
.ez-storesw .ez-storesw__item > .dropdown-item:hover { border-color: #bfdbfe; background: #f8fbff; }
.ez-storesw .ez-storesw__item > .dropdown-item.is-current { border-color: #93c5fd; background: #eff6ff; }
.ez-storesw__row { align-items: center; gap: 0; padding: 0 !important; }
.ez-storesw__tile { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; }
.ez-storesw__tile .material-icons { font-size: 22px !important; }
.ez-storesw__tile--blue { background: #dbeafe; color: #2563eb; }
.ez-storesw__tile--green { background: #dcfce7; color: #16a34a; }
.ez-storesw__tile--purple { background: #ede9fe; color: #7c3aed; }
.ez-storesw__tile--orange { background: #ffedd5; color: #ea580c; }
.ez-storesw__tile--pink { background: #fce7f3; color: #db2777; }
.ez-storesw__tile--teal { background: #ccfbf1; color: #0d9488; }
.ez-storesw__tile--grey { background: #f3f4f6; color: #9ca3af; }
.ez-storesw__info { flex: 1 1 auto; min-width: 0; }
.ez-storesw__info h6 { margin-bottom: 2px !important; color: #111827; font-size: 15px !important; }
.ez-storesw__info h6 span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-storesw__status { display: inline-flex; align-items: center; gap: 6px; color: #6b7280 !important; font-size: 12px !important; }
.ez-storesw__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.ez-storesw__status.is-active { color: #16a34a !important; }
.ez-storesw__status.is-active::before { background: #22c55e; }
.ez-storesw__check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 12px; border-radius: 50%; background: #2563eb; color: #fff; }
.ez-storesw__check .material-icons { font-size: 18px; }
.ez-storesw__switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 34px; margin-left: 12px; padding: 0 12px; border: 1px solid #93c5fd; border-radius: 10px; background: #fff; color: #2563eb; font-size: 13px; font-weight: 600; }
.ez-storesw__switch .material-icons { font-size: 16px; }
.ez-storesw .dropdown-item:hover .ez-storesw__switch { background: #2563eb; border-color: #2563eb; color: #fff; }
.ez-storesw__foot { border-top: 1px solid #eef0f3; }
.ez-storesw__manage { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; color: #2563eb !important; font-size: 14px; font-weight: 600; }
.ez-storesw__manage .material-icons { font-size: 19px; }
.ez-storesw__manage:hover { background: #f8fbff; }
/* laptop widths: a shorter pill so the top bar keeps to the screen width */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .ez-storesw__btn.btn { margin-right: 8px !important; padding: 0 10px 0 4px !important; gap: 6px; }
    .ez-storesw__btnicon.material-icons { width: 26px; height: 26px; font-size: 15px !important; }
    .ez-storesw__btnname { max-width: 96px; }
}
/* only the search box gives up width when the top bar is tight; buttons keep their size */
@media (min-width: 992px) { #navbar .navbar-nav > .nav-item:not(.ez-search) { flex-shrink: 0; } }
@media (max-width: 991.98px) {
    /* Phones/tablets: the switcher lives in the top-bar drawer, so the panel opens
       in place as a full-width sheet under the pill. */
    #navbar .dropdown-menu.ez-storesw { width: 100% !important; max-width: none; max-height: none; margin-top: 8px !important; }
    .ez-storesw__head { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 10px; }
    .ez-storesw__create { grid-column: 2; justify-self: start; }
    .ez-storesw__switch { padding: 0 10px; }
}
@media (max-width: 380px) {
    .ez-storesw__switch { font-size: 0; gap: 0; width: 34px; justify-content: center; padding: 0; }
    .ez-storesw__switch .material-icons { font-size: 16px; }
}

/* 76. Grid date filters (kartik DatePicker in a filter cell, e.g. order grids):
   one input with the calendar button inside it on the right; the clear (x)
   button shows only once a date is set. Same input and buttons. */
.ez-body .filters .input-group.date,
html.ez-grid-compact .ez-content table.table .filters .input-group.date { position: relative; flex-wrap: nowrap; width: auto; min-width: 118px !important; }
.ez-body .filters .input-group.date > .krajee-datepicker { flex: 1 1 auto; width: 100% !important; min-width: 0; padding-right: 32px !important; border-radius: 8px !important; }
.ez-body .filters .input-group.date > .input-group-text { position: absolute; top: 50%; z-index: 5; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #6b7280; transform: translateY(-50%); cursor: pointer; }
.ez-body .filters .input-group.date > .input-group-text:hover { background: #f3f4f6 !important; color: #111827; }
.ez-body .filters .input-group.date > .kv-date-picker { right: 5px; }
.ez-body .filters .input-group.date > .kv-date-remove { right: 29px; display: none; }
.ez-body .filters .input-group.date:has(> .krajee-datepicker[value]:not([value=""])) > .kv-date-remove { display: flex; }
.ez-body .filters .input-group.date:has(> .krajee-datepicker[value]:not([value=""])) > .krajee-datepicker { padding-right: 56px !important; }
.ez-body .filters .input-group.date .kv-dp-icon { font-size: 12px; }

/* 77. Grid action icons (view / edit / delete) stay on one line (user, 2026-10-12);
   they sit in the normal last column (no pinned panel, per user). */

/* 78. Invoice / Waybill "Generated" flags in order grids: icon-only soft green
   chips (receipt = invoice, truck = waybill); the hover title names which. */
.ez-body .ez-gen { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 8px; background: #dcfce7; color: #15803d; box-shadow: inset 0 0 0 1px #bbf7d0; vertical-align: middle; }
.ez-body .ez-gen .material-icons { font-size: 17px; line-height: 1; }
html[data-theme="dark"] .ez-body .ez-gen { background: rgba(22, 163, 74, .18) !important; color: #86efac !important; box-shadow: none; }
/* Order packing (orders/export "Packed" column, user 2026-10-15): Packed chip with a small
   undo, a light-green "Pack" button on unpacked rows, a short green flash on the packed row
   and the bottom toast used by the scan box and the Pack Orders screen. */
.ez-body .ez-pack-cell { display: inline-flex; align-items: center; gap: 4px; }
.ez-body .ez-content table td.ez-pack-td,
html.ez-grid-compact .ez-content table.ez-gtable > tbody > tr > td.ez-pack-td { min-width: 130px !important; white-space: nowrap !important; overflow-wrap: normal !important; }
.ez-body .ez-content a.ez-pack-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; background: #fffbeb; color: #b45309 !important; box-shadow: inset 0 0 0 1px #fcd34d; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--ez-dur) var(--ez-ease); }
.ez-body .ez-content a.ez-pack-btn:hover { background: #fef3c7; }
.ez-body .ez-content table a.ez-pack-undo { display: inline-flex; align-items: center; width: auto !important; min-width: 0 !important; height: 14px !important; min-height: 0 !important; margin: 0 0 0 1px !important; padding: 0 0 0 6px !important; border: 0; border-left: 1px solid rgba(22, 163, 74, .35); border-radius: 0; color: inherit !important; opacity: .75; font-size: 10px; line-height: 1; text-decoration: none; }
.ez-body .ez-content table a.ez-pack-undo:hover { opacity: 1; }
html[data-theme="dark"] .ez-body .ez-content a.ez-pack-btn { background: rgba(245, 158, 11, .14); color: #fcd34d !important; box-shadow: inset 0 0 0 1px rgba(252, 211, 77, .35); }
@keyframes ezPackFlash { from { background-color: #dcfce7; } to { background-color: transparent; } }
.ez-body .ez-content table tr.ez-pack-flash > td { animation: ezPackFlash 1.6s var(--ez-ease); }
.ez-pack-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2000; max-width: min(92vw, 480px); padding: 12px 18px; border-radius: 10px; background: #f0fdf4; color: #15803d; box-shadow: inset 0 0 0 1px #bbf7d0, 0 10px 30px rgba(17, 24, 39, .15); font: 600 14px/1.4 Inter, system-ui, sans-serif; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.ez-pack-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ez-pack-toast--warning { background: #fffbeb; color: #b45309; box-shadow: inset 0 0 0 1px #fde68a, 0 10px 30px rgba(17, 24, 39, .15); }
.ez-pack-toast--danger { background: #fef2f2; color: #b91c1c; box-shadow: inset 0 0 0 1px #fecaca, 0 10px 30px rgba(17, 24, 39, .15); }
html[data-theme="dark"] .ez-pack-toast { background: #052e16; color: #86efac; }
html[data-theme="dark"] .ez-pack-toast--warning { background: #451a03; color: #fcd34d; }
html[data-theme="dark"] .ez-pack-toast--danger { background: #450a0a; color: #fca5a5; }
@media (max-width: 767.98px) { .ez-pack-toast { bottom: 84px; } }
/* packing popups (pack.js popup(): Mark Packed result, nothing ticked, errors, undo confirm) */
.ez-body .ez-pack-modal .modal-dialog:not(.modal-lg) { max-width: 460px; }
.ez-body .ez-gmodal.ez-app-modal .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-sm) { max-width: 460px; }
.ez-body .ez-app-modal { z-index: 1070; }   /* message popups can open over another popup */
.ez-body .ez-app-modal .modal-dialog { display: flex; align-items: center; min-height: calc(100% - 3.5rem); margin-top: 1.75rem; margin-bottom: 1.75rem; }   /* always in the middle of the screen */
@media (max-width: 575.98px) { .ez-body .ez-app-modal .modal-dialog { min-height: calc(100% - 1rem); margin: .5rem; } }
.ez-body .ez-app-modal .ez-app-modal__text { margin: 0; color: var(--ez-text); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.ez-body .ez-pack-modal .ez-pack-modal__text { margin: 0; color: var(--ez-text); font-size: 14px; line-height: 1.5; }
.ez-body .ez-pack-tpls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ez-body .ez-pack-tpl { position: relative; margin: 0; cursor: pointer; }
.ez-body .ez-pack-tpl input { position: absolute; opacity: 0; }
.ez-body .ez-pack-tpl span { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 40px; padding: 0 14px; border: 1px solid var(--ez-border); border-radius: 8px; color: var(--ez-heading); font-weight: 600; }
.ez-body .ez-pack-tpl input:checked + span { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.ez-body .ez-pack-tpl input:focus-visible + span { outline: 2px solid #2563eb; outline-offset: 2px; }
html[data-theme="dark"] .ez-body .ez-pack-tpl input:checked + span { background: rgba(37, 99, 235, .18); color: #93c5fd; }

/* 79. Super admin dashboard (site/super-dashboard, .ez-sdash): six stat tiles in
   one light style, compact icon + title card headers with the compact toggle on
   the same line, wider column for Payment for Verification. */
.ez-sdash .ez-stile-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.ez-sdash .ez-stile { height: 100%; margin: 0; overflow: hidden; border: 1px solid var(--ez-border) !important; border-radius: 16px; background: #fff; box-shadow: var(--ez-shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.ez-sdash .ez-stile[onclick], .ez-sdash .ez-stile-link .ez-stile { cursor: pointer; }
.ez-sdash .ez-stile[onclick]:hover, .ez-sdash .ez-stile-link:hover .ez-stile { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .35); }
.ez-sdash .ez-stile__top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.ez-sdash .ez-stile__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--t-soft); color: var(--t-ink); }
.ez-sdash .ez-stile__icon .material-icons { font-size: 24px; }
.ez-sdash .ez-stile__text { min-width: 0; }
.ez-sdash .ez-stile__label { margin: 0; overflow: hidden; color: #6b7280; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; }
.ez-sdash .ez-stile__value { margin: 2px 0 0 !important; color: #111827 !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.01em; }
.ez-sdash .ez-stile__foot { flex: 1 1 auto; align-content: flex-start; display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 38px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--ez-border); background: var(--t-wash); color: #6b7280; font-size: 12px; }
.ez-sdash .ez-stile__foot b { color: var(--t-ink); font-weight: 700; }
.ez-sdash .ez-stile--green { --t-soft: #dcfce7; --t-ink: #15803d; --t-wash: #f0fdf4; }
.ez-sdash .ez-stile--red { --t-soft: #fee2e2; --t-ink: #dc2626; --t-wash: #fef2f2; }
.ez-sdash .ez-stile--blue { --t-soft: #dbeafe; --t-ink: #2563eb; --t-wash: #eff6ff; }
.ez-sdash .ez-stile--amber { --t-soft: #fef3c7; --t-ink: #b45309; --t-wash: #fffbeb; }
.ez-sdash .ez-stile--purple { --t-soft: #ede9fe; --t-ink: #7c3aed; --t-wash: #f5f3ff; }
.ez-sdash .ez-stile--grey { --t-soft: #f1f5f9; --t-ink: #64748b; --t-wash: #f8fafc; }
html[data-theme="dark"] .ez-sdash .ez-stile { background: var(--ez-surface); }
html[data-theme="dark"] .ez-sdash .ez-stile__value { color: var(--ez-heading) !important; }
html[data-theme="dark"] .ez-sdash .ez-stile__foot { background: rgba(148, 163, 184, .08); }

.ez-sdash .ez-sd-card { overflow: hidden; border-radius: 16px; margin: 0 !important; }
.ez-sdash .row > [class*="col"] > .ez-sd-card:only-child, .ez-sdash .row > .col-xxl-5 > .ez-sd-card { height: 100%; }
.ez-sdash .ez-sd-head { display: flex !important; align-items: center; gap: 12px; padding: 14px 16px !important; border-bottom: 1px solid var(--ez-border) !important; background: transparent; }
.ez-sdash .ez-sd-head h6 { flex: 1 1 auto; min-width: 0; margin: 0 !important; color: var(--ez-heading); font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.ez-sdash .ez-sd-head__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; }
.ez-sdash .ez-sd-head__icon .material-icons { font-size: 20px; }
.ez-sdash .ez-sd-head__icon--amber { background: #fef3c7; color: #b45309; }
.ez-sdash .ez-sd-head__icon--blue { background: #dbeafe; color: #2563eb; }
.ez-sdash .ez-sd-head__icon--purple { background: #ede9fe; color: #7c3aed; }
.ez-sdash .ez-sd-head__icon--green { background: #dcfce7; color: #15803d; }
.ez-sdash .ez-sd-head > .ez-compact-slot { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }
.ez-sdash .ez-sd-card > .card-body { padding-top: 12px !important; }
.ez-body .ez-sdash .card.ez-gcard > .card-header.ez-sd-head { flex-wrap: nowrap !important; padding: 14px 16px !important; }
.ez-body .ez-sdash .card > .card-header.ez-sd-head > * { flex: 0 0 auto !important; }
.ez-body .ez-sdash .card > .card-header.ez-sd-head > h6 { flex: 1 1 auto !important; }
.ez-sdash .ez-stile__label { white-space: normal; line-height: 1.3; }
.ez-sdash > .row:not(.ez-stiles) > [class*="col"] { display: flex; flex-direction: column; gap: 1.5rem; }
.ez-sdash .ez-sd-card + .ez-sd-card { margin-top: 0 !important; }

/* 80. Leads dashboard (modules/leads default/index, .ez-ldash): greeting, four
   light stat tiles, User Performance + month donut on top, then Latest Leads and
   Tasks. Cards reuse the .ez-dcard icon+title head with the button on the line. */
.ez-ldash .ez-greeting { margin-bottom: 1.25rem; }
.ez-ldash__tiles { row-gap: 1.25rem; margin-bottom: 1.5rem; }
.ez-ldash__row { row-gap: 1.5rem; margin-bottom: 1.5rem; }
.ez-ldash__row > [class*="col-"] { display: flex; flex-direction: column; gap: 1.5rem; }
.ez-ldash__row > [class*="col-"] > .card { flex: 1 1 auto; margin: 0; }
.ez-ltile-link { display: block; height: 100%; color: inherit !important; text-decoration: none; }
.ez-ltile { --k: #2563eb; height: 100%; margin: 0; padding: 18px; border: 1px solid #e8ecf5 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 10px 28px -22px rgba(15, 23, 42, .4) !important; transition: transform .15s ease, box-shadow .15s ease; }
.ez-ltile-link:hover .ez-ltile { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(15, 23, 42, .4) !important; }
.ez-ltile--blue { --k: #2563eb; }
.ez-ltile--amber { --k: #f59e0b; }
.ez-ltile--green { --k: #16a34a; }
.ez-ltile--red { --k: #e11d2a; }
.ez-ltile__top { display: flex; align-items: center; gap: 14px; }
.ez-ltile__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--k) 12%, #fff); color: var(--k); }
.ez-ltile__icon .material-icons { color: inherit; font-size: 26px; }
.ez-ltile__text { min-width: 0; }
.ez-ltile__label { margin: 0; color: #6b7280; font-size: 13px; font-weight: 600; }
.ez-ltile h4.ez-ltile__value { margin: 2px 0 0; color: #111827; font-size: 26px; font-weight: 800; line-height: 1.15; }
.ez-ltile__meta { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #f0f2f7; color: #6b7280; font-size: 12.5px; }
.ez-ltile__meta span { color: var(--k); font-weight: 700; }
.ez-ltile__dot { display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px; border-radius: 50%; background: #9ca3af; }
.ez-ldash .ez-dcard__head { min-height: 64px; padding: 12px 18px !important; border-bottom: 1px solid #eef1f6 !important; flex-wrap: nowrap; }
.ez-ldash .ez-dcard__head h6 { flex: 1 1 0; min-width: 0; font-size: 15.5px; }
.ez-ldash .ez-dcard__actions { flex: 0 0 auto; margin-left: 0; }
.ez-ldash .ez-dcard__actions .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 6px 12px; font-size: 13px; }
.ez-ldash .ez-dcard__actions .btn .material-icons { font-size: 16px; }
.ez-ldash .ez-dcard .card-body { padding: 14px 18px 18px !important; }
.ez-ldash .ez-dcard .table td { padding: 10px 12px !important; }
.ez-ldash .ez-lcard--latest .table td:nth-child(2) .text-xs { white-space: nowrap; }
.ez-lperf__toggle { display: inline-flex; padding: 3px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f3f4f6; }
.ez-lperf__toggle .perf-toggle-btn { padding: 5px 12px; border-radius: 8px; font-size: 12.5px; }
.ez-lperf__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.ez-lperf__chart { position: relative; height: 210px; }
.ez-lperf__table { border: 1px solid #eef1f6; border-radius: 12px; }
.ez-ldash .ez-lperf__tbl { margin: 0; border: 0; }
.ez-ldash .ez-lperf__tbl thead th { padding: 10px 12px !important; border-bottom: 1px solid #eef1f6 !important; background: #f8fafc !important; color: #6b7280 !important; font-size: 11.5px !important; font-weight: 600 !important; text-align: center; text-transform: none; letter-spacing: 0; opacity: 1 !important; white-space: nowrap; }
.ez-ldash .ez-lperf__tbl thead th.text-start { text-align: left; }
.ez-ldash .ez-lperf__tbl tbody td { padding: 11px 12px !important; border-color: #f1f3f8 !important; text-align: center; vertical-align: middle; white-space: nowrap; }
.ez-ldash .ez-lperf__tbl tbody tr:last-child td { border-bottom: 0 !important; }
.ez-ldash .ez-lperf__tbl td.ez-lperf__user { text-align: left; }
.ez-lperf__avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: #eff6ff; color: #2563eb; font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.ez-lperf__name { color: #111827; font-size: 13.5px; font-weight: 600; vertical-align: middle; }
.ez-lperf__num { color: #374151; font-size: 13.5px; font-weight: 700; }
.ez-lperf__num--won { color: #16a34a; }
.ez-lperf__num--lost { color: #ef4444; }
.ez-ldash .ez-lperf__tbl td.ez-lperf__rate { text-align: left; width: 34%; min-width: 140px; white-space: nowrap; }
/* the bar track fills the cell, the percentage sits at the right (user asked) */
.ez-ldash .ez-lperf__tbl td.ez-lperf__rate > .ez-lperf__bar { width: calc(100% - 62px); }
.ez-ldash .ez-lperf__pct { display: inline-block; min-width: 48px; text-align: right; vertical-align: middle; }
.ez-lperf__rate { --r: #ef4444; }
.ez-lperf__rate--green { --r: #16a34a; }
.ez-lperf__rate--amber { --r: #f59e0b; }
.ez-lperf__bar { display: inline-block; width: 70px; height: 6px; margin-right: 8px; overflow: hidden; border-radius: 99px; background: #eef1f6; vertical-align: middle; }
.ez-lperf__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--r); }
.ez-lperf__pct { color: var(--r); font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.ez-ldash .ez-lperf__tbl td.ez-lperf__empty { padding: 24px 12px !important; color: #9ca3af; text-align: center; }
@media (max-width: 575.98px) { .ez-ldash .ez-lperf__tbl td.ez-lperf__rate { min-width: 110px; } .ez-lperf__avatar { width: 26px; height: 26px; margin-right: 8px; } }
html[data-theme="dark"] .ez-lperf__table, html[data-theme="dark"] .ez-ldash .ez-lperf__tbl thead th, html[data-theme="dark"] .ez-ldash .ez-lperf__tbl tbody td { border-color: var(--ez-border) !important; }
html[data-theme="dark"] .ez-ldash .ez-lperf__tbl thead th { background: transparent !important; }
html[data-theme="dark"] .ez-lperf__name, html[data-theme="dark"] .ez-lperf__num { color: var(--ez-text); }
html[data-theme="dark"] .ez-lperf__bar { background: var(--ez-border); }
.ez-lcard--overview .card-body { display: flex; align-items: center; justify-content: center; }
.ez-lcard--overview .chart { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.ez-lcard--overview .chart canvas { max-height: 280px; }
@media (max-width: 575.98px) {
    .ez-ltile { padding: 14px; }
    .ez-ltile h4.ez-ltile__value { font-size: 22px; }
    .ez-ldash .ez-dcard__head { gap: 10px; padding: 10px 14px !important; }
    .ez-ldash .ez-dcard__head h6 { font-size: 14.5px; }
    .ez-ldash .ez-dcard .card-body { padding: 12px 14px 14px !important; }
    .ez-lperf__toggle .perf-toggle-btn { padding: 5px 8px; }
}
html[data-theme="dark"] .ez-ltile { background: var(--ez-surface) !important; border-color: var(--ez-border) !important; }
html[data-theme="dark"] .ez-ltile h4.ez-ltile__value { color: var(--ez-text) !important; }
html[data-theme="dark"] .ez-ltile__meta, html[data-theme="dark"] .ez-ldash .ez-dcard__head { border-color: var(--ez-border) !important; }
html[data-theme="dark"] .ez-lperf__toggle { background: transparent; border-color: var(--ez-border); }

/* 81. Leads Bulk Upload (leads/leads-temp/index, .ez-lupload): uses the shared
   .ez-upload toolbar; words are not split mid-word (the grid scrolls sideways
   instead), email on one line, errors in the soft red box with one line per field. */
html .ez-content .ez-lupload table.table > tbody > tr > td:not(.ez-nowrap) { overflow-wrap: break-word !important; }
html .ez-content .ez-lupload table.table > tbody > tr > td.ez-numwords,
html .ez-content .ez-lupload table.table > tbody > tr > td.ez-nowrap:not(.ez-nowrap--short):not(.ez-actions) { white-space: normal !important; overflow-wrap: anywhere !important; }
html .ez-content .ez-lupload table.table > tbody > tr > td.ez-lupload__email { white-space: nowrap !important; overflow-wrap: normal !important; }
.ez-body .ez-lupload table.ez-gtable td > .card.ez-lupload__err { min-width: 13rem; max-width: 17rem; }
.ez-body .ez-lupload table.ez-gtable td > .card.ez-lupload__err .card-text { overflow-wrap: anywhere; }
.ez-body .ez-lupload table.ez-gtable td > .card.ez-lupload__err .card-text strong { color: inherit; font-weight: 700; }


/* 82. Lead view / view-only (leads/leads/view, .ez-lview): Lead Details uses the
   Items-style form (labels above, icons inside, Delivery Charge in an LKR box,
   blue Save); Tasks / Lead Stages / Lead Actions get an icon+title head with the
   button on the line and a 1px line to the card edges. No generated page header. */
.ez-body .ez-ic-globe { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-globe { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-link { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-link { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.ez-body .ez-ic-tag { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l9 9-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .ez-body .ez-ic-tag { --ez-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l9 9-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); }
.ez-body .ez-lv-head__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.ez-body .ez-lv-head__badges .badge { font-size: 11.5px !important; }
.ez-body .ez-lv-head__act { flex: 0 0 auto; text-align: right; }
.ez-body .ez-lv-head__act .btn { height: 40px; display: inline-flex; align-items: center; padding: 0 18px; font-size: 14px; }
.ez-body .ez-lv-grid { grid-auto-flow: row dense; }
.ez-body .ez-lv-grid > .ez-if { grid-column: span 12; }
@media (min-width: 768px) { .ez-body .ez-lv-grid > .ez-if { grid-column: span 6; } }
@media (min-width: 1400px) {
    .ez-body .ez-lv-grid > .ez-if { grid-column: span 3; }
    .ez-body .ez-lv-grid > .ez-if.ez-lv-w2 { grid-column: span 6; }
}
/* Edit Order style: each section is its own card with an icon + title + subtitle head */
.ez-body .ez-lv-main > .ez-lv-form { margin-bottom: 1.25rem; }
.ez-body .ez-lv-main > .ez-lv-form:last-of-type { margin-bottom: 0; }
.ez-body .ez-lv-chead { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-lv-chead__text { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-lv-chead__title { margin: 0; color: var(--ez-heading, #111827); font-size: 20px; font-weight: 600; line-height: 1.25; }
.ez-body .ez-lv-chead__sub { margin: 2px 0 0; color: var(--ez-text-muted); font-size: 13.5px; }
.ez-body .ez-lv-chead__text > .ez-lv-head__badges { margin-top: 8px; }
.ez-body .ez-lv-chead > .ez-lv-head__act { margin-left: auto !important; }
.ez-body .ez-lv-form > .card-body { padding: 20px 22px 4px !important; }
.ez-body .ez-lv-form .ez-lv-foot { display: flex; justify-content: flex-end; margin: 0 0 18px; }
.ez-body .ez-lv-foot { grid-column: 1 / -1; padding-top: 4px; }
.ez-body .ez-lv-form .ez-of select.form-control, .ez-body .ez-lv-form .ez-of .form-select,
.ez-body .ez-lv-form .ez-of input.form-control:not([type="hidden"]) { height: 44px; min-height: 44px; }
.ez-body .ez-lv-side > .card { margin-bottom: 1.5rem; }
.ez-body .ez-lv-side > .card.mt-3 { margin-top: 0 !important; }
.ez-body .ez-lv-side > .card > .card-body { padding: 0 18px 16px !important; }
.ez-body .ez-lv-shead { display: flex; align-items: center; gap: 12px; margin: 0 -18px 14px; padding: 14px 18px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-lv-shead h6 { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ez-heading, #111827); font-size: 15.5px; font-weight: 700; }
.ez-body .ez-lv-shead .btn { float: none !important; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0 !important; padding: 0 12px; font-size: 13px !important; white-space: nowrap; }
.ez-body .ez-lv-side .grid-view .summary { display: none; }
html .ez-content .ez-lv-side table.table > tbody > tr > td:not(.ez-actions) { overflow-wrap: break-word !important; }
html .ez-content .ez-lv-side table.table > tbody > tr > td:first-child { min-width: 110px !important; }
/* one card (user 2026-10-13): Item Details / Social Media are divided sections; status badges at the right of the head */
.ez-body .ez-lv-chead > .ez-lv-head__badges { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; }
.ez-body .ez-lv-chead > .ez-lv-head__badges + .ez-lv-head__act { margin-left: 4px !important; }
.ez-body .ez-lv-sec { display: flex; align-items: center; gap: 10px; margin: 2px -22px 18px; padding: 16px 22px 0; border-top: 1px solid var(--ez-border); color: var(--ez-heading, #111827); font-size: 16px; font-weight: 600; }
.ez-body .ez-lv-sec__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; }
.ez-body .ez-lv-sec__icon .material-icons { font-size: 19px; }
.ez-body .ez-lv-sec__icon--pink { background: #ffe8ef; color: #e11d48; }
.ez-body .ez-lv-sec__icon--green { background: #dcfce7; color: #16a34a; }
@media (min-width: 768px) {
    .ez-body .ez-lv-chead { flex-wrap: nowrap; }
    .ez-body .ez-lv-chead > .ez-lv-head__act { flex: 0 0 auto; }
    .ez-body .ez-lv-chead > .ez-lv-head__badges { flex: 0 1 auto; justify-content: flex-end; }
}
.ez-body .ez-lv-chead > .ez-lv-head__badges { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 767.98px) {
    .ez-body .ez-lv-chead__text { flex: 1 1 calc(100% - 64px); }
    .ez-body .ez-lv-chead > .ez-lv-head__badges { margin-left: 0; }
    .ez-body .ez-lv-chead > .ez-lv-head__badges + .ez-lv-head__act { margin-left: auto !important; }
}
/* Lead page side cards: no compact-grid toggle (user 2026-10-13); compact stays on as everywhere */
.ez-body .ez-lv-side .ez-compact-slot { display: none !important; }

/* 83. Leads module popups (.ez-lmodal: Change Stage, Add Action, New Task, Change Task Status,
   Assign to User, Remarks): shared popup head/footer, sized to their few fields */
.ez-body .ez-lmodal.ez-lmodal--sm .modal-dialog { max-width: 460px !important; }
.ez-body .ez-lmodal.ez-lmodal--md .modal-dialog { max-width: 540px !important; }
.ez-body .ez-lmodal .modal-body .row { margin: 0; }
.ez-body .ez-lmodal .modal-body .row > [class*="col"] { padding: 0; }
.ez-body .ez-lmodal .modal-body .row.mt-3 { margin-top: 0 !important; }
.ez-body .ez-lmodal .modal-body label { display: block; margin: 0 0 6px; color: var(--ez-text); font-size: 13.5px; font-weight: 600; }
.ez-body .ez-lmodal .modal-body .form-group { margin-bottom: 16px; }
.ez-body .ez-lmodal .modal-body input.form-control:not([type="hidden"]),
.ez-body .ez-lmodal .modal-body select.form-control,
.ez-body .ez-lmodal .modal-body .form-select { height: 44px; min-height: 44px; border-radius: 10px; }
.ez-body .ez-lmodal .modal-body textarea.form-control { min-height: 96px; border-radius: 10px; }
.ez-body .ez-lmodal .modal-body > .orders-form > .row > [class*="col"] > label + select,
.ez-body .ez-lmodal .modal-body > .orders-form > .row > [class*="col"] > label + input,
.ez-body .ez-lmodal .modal-body .row > [class*="col"] > label + .input-group,
.ez-body .ez-lmodal .modal-body .row > [class*="col"] > label + input.form-control { margin-bottom: 16px; }
.ez-body .ez-lmodal .modal-body .help-block:empty { display: none; }
.ez-body .ez-lmodal .modal-body > .orders-form > .row:last-child:has(> [class*="col"] > div:empty:only-child) { display: none; }

/* 84. Meta Lead Inbox (leads/lead-meta-temp/index, .ez-metainbox): icon + title, Convert All
   Valid and the page-size select on one line, status tabs under a 1px line, row actions
   side by side, soft red error notes, emails kept whole, Lead Code as a small green chip.
   The page's own inline <style> moved here; markup classes kept. */
.ez-body .ez-metainbox .ez-mi-head { display: block !important; padding: 18px 22px 0 !important; }
.ez-body .ez-metainbox .ez-mi-top { position: relative; display: flex; align-items: center; gap: 14px; padding: 0 0 14px; }
/* the 1px line runs to the card edges (the shared header rule zeroes child margins) */
.ez-body .ez-metainbox .ez-mi-top::after { content: ""; position: absolute; left: -22px; right: -22px; bottom: 0; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-metainbox .ez-mi-title { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-metainbox .ez-mi-title h6 { font-size: 18px; font-weight: 600; color: var(--ez-heading); line-height: 1.3; }
.ez-body .ez-metainbox .ez-mi-title p { font-size: 13px; margin-top: 2px; }
.ez-body .ez-metainbox .ez-mi-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: nowrap; }
.ez-body .ez-metainbox .ez-mi-tools form { margin: 0; }
.ez-body .ez-metainbox .ez-mi-tools .btn { margin: 0 !important; height: 40px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ez-body .ez-metainbox .ez-mi-tools .ez-mi-size,
.ez-body .ez-metainbox .ez-mi-tools .ez-compact-slot { float: none !important; padding: 0 !important; margin: 0; }
.ez-body .ez-metainbox .ez-mi-tools .ez-mi-size select { height: 40px; min-width: 72px; }
.ez-body .ez-metainbox .meta-inbox-tabs { border-bottom: 0; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ez-body .ez-metainbox .meta-inbox-tabs .nav-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 12px 12px 10px; white-space: nowrap; border-radius: 0; }
.ez-body .ez-metainbox .meta-inbox-tabs .nav-link.active { font-weight: 600; }
.ez-body .ez-metainbox .badge-count { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
/* grid cells */
html .ez-body .ez-content .ez-metainbox table.table.ez-gtable > tbody > tr > td.ez-mi-nowrap,
html .ez-body .ez-content .ez-metainbox table.table.ez-gtable > tbody > tr > td.ez-mi-email { white-space: nowrap !important; overflow-wrap: normal !important; }
html .ez-content .ez-metainbox table.table > tbody > tr > td.ez-mi-date { overflow-wrap: normal !important; min-width: 6.5rem; }
/* a very long address is cut with "..." (full address on hover) instead of widening the grid */
.ez-body .ez-metainbox td.ez-mi-email > a { display: inline-block; max-width: 11.5rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
html .ez-content .ez-metainbox table.table > tbody > tr > td.ez-mi-addr,
html .ez-content .ez-metainbox table.table > tbody > tr > td:not(.ez-mi-email):not(.ez-mi-nowrap):not(.ez-mi-date):not(.ez-actions) { overflow-wrap: break-word !important; }
.ez-body .ez-metainbox table.ez-gtable td.ez-mi-addr { min-width: 8.5rem; }
.ez-body .ez-metainbox table.ez-gtable td > .card.ez-mi-err { min-width: 11rem; max-width: 14rem; }
.ez-body .ez-metainbox table.ez-gtable td > .card.ez-mi-err .card-text strong { color: inherit; font-weight: 700; }
.ez-body .ez-metainbox a.ez-mi-code { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--ez-bd-success-bg); color: var(--ez-bd-success-fg) !important; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.ez-body .ez-metainbox a.ez-mi-code i { font-size: 10px; opacity: .8; }
.ez-body .ez-metainbox a.ez-mi-code:hover { filter: brightness(.96); }
/* row actions: Convert, edit, delete side by side */
.ez-body .ez-metainbox .ez-mi-acts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ez-body .ez-metainbox .ez-mi-acts form { display: inline-flex !important; margin: 0; }
.ez-body .ez-metainbox .ez-mi-acts .btn { margin: 0 !important; height: 32px; min-width: 32px; padding: 0 9px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
@media (max-width: 767.98px) {
    .ez-body .ez-metainbox .ez-mi-head { padding: 14px 14px 0 !important; }
    .ez-body .ez-metainbox .ez-mi-top { flex-wrap: wrap; }
    .ez-body .ez-metainbox .ez-mi-top::after { left: -14px; right: -14px; }
    .ez-body .ez-metainbox .ez-mi-title { flex: 1 1 calc(100% - 64px); }
    .ez-body .ez-metainbox .ez-mi-tools { width: 100%; }
    .ez-body .ez-metainbox .ez-mi-tools .btn { height: 44px; flex: 1 1 auto; justify-content: center; }
    .ez-body .ez-metainbox .ez-mi-tools .ez-mi-size select { height: 44px; }
}

/* 85. Edit Staged Lead (leads/lead-meta-temp/update, .ez-metaedit): same card head, field grid
   and side card heads as the Lead page (section 82); payload as a soft code box, status details
   as a label / value list, current errors as a soft red note. */
.ez-body .ez-metaedit .ez-lv-form > .card-body { padding-bottom: 0 !important; }
.ez-body .ez-metaedit .ez-me-grid textarea.form-control { min-height: 44px; height: 44px; resize: vertical; }
.ez-body .ez-metaedit .ez-me-grid > .ez-if { margin-bottom: 6px; }
.ez-body .ez-metaedit .ez-me-foot { gap: 10px; padding-top: 16px; margin: 18px -22px 0 !important; padding: 16px 22px 18px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-metaedit .ez-me-foot .btn { height: 44px; margin: 0 !important; padding: 0 18px; font-size: 14px !important; display: inline-flex; align-items: center; gap: 8px; }
.ez-body .ez-metaedit .ez-me-foot .btn-outline-secondary { background: var(--ez-surface, #fff); color: var(--ez-heading, #111827); border: 1px solid var(--ez-border); }
.ez-body .ez-metaedit .ez-me-err { display: block !important; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13px; background: var(--ez-bd-danger-bg) !important; color: var(--ez-bd-danger-fg) !important; border: 1px solid color-mix(in srgb, var(--ez-bd-danger-dot) 35%, transparent) !important; }
.ez-body .ez-metaedit .ez-me-err strong { color: inherit; }
.ez-body .ez-metaedit .ez-me-err ul { padding-left: 18px; }
.ez-body .ez-metaedit .ez-me-shead__text { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-metaedit .ez-me-shead__text p { color: var(--ez-text-muted); font-size: 12.5px; margin-top: 1px; }
.ez-body .ez-metaedit .ez-me-payload { margin: 0; max-height: 420px; overflow: auto; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ez-border); background: var(--ez-surface-2, #f8fafc); color: var(--ez-heading, #111827); font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-theme="dark"] .ez-body .ez-metaedit .ez-me-payload { background: rgba(255,255,255,.04); }
.ez-body .ez-metaedit table.ez-me-meta { font-size: 13px; }
.ez-body .ez-metaedit table.ez-me-meta tr + tr td { border-top: 1px solid var(--ez-border) !important; }
.ez-body .ez-metaedit table.ez-me-meta td { padding: 10px 0 !important; vertical-align: middle; background: transparent !important; }
.ez-body .ez-metaedit table.ez-me-meta td:first-child { color: var(--ez-text-muted) !important; width: 42%; }
.ez-body .ez-metaedit table.ez-me-meta td:last-child { color: var(--ez-heading, #111827); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
/* phone hint moved to the footer, bottom left (user asked) */
.ez-body .ez-metaedit .ez-me-hint { display: flex; align-items: center; gap: 8px; margin-right: auto; padding: 8px 12px; border-radius: 10px; background: #e8f0ff; color: #1d4ed8; font-size: 12.5px; line-height: 1.4; }
.ez-body .ez-metaedit .ez-me-hint .material-icons { font-size: 18px; flex: 0 0 auto; }
html[data-theme="dark"] .ez-body .ez-metaedit .ez-me-hint { background: rgba(37,99,235,.16); color: #93c5fd; }
.ez-body .ez-metaedit .ez-me-foot { align-items: center; flex-wrap: wrap; }
@media (min-width: 768px) { .ez-body .ez-metaedit .ez-me-foot { flex-wrap: nowrap; } .ez-body .ez-metaedit .ez-me-hint { flex: 0 1 auto; min-width: 0; } .ez-body .ez-metaedit .ez-me-foot .btn { flex: 0 0 auto; } }
@media (max-width: 767.98px) { .ez-body .ez-metaedit .ez-me-hint { flex: 1 1 100%; } }

/* 86. Create / Update Lead (leads/leads/create + update, .ez-lcreate): one form card like the
   Lead page (icon head, Payment Information / Item Details / Other Links sections, icons in
   inputs, LKR boxes, blue Save); the leads list on the right gets an icon + title head. */
.ez-body .ez-lv-sec__icon--blue { background: #e8f0ff; color: #2563eb; }
.ez-body .ez-lcreate .ez-lc-form .ez-lv-foot { margin: 6px -22px 0 !important; padding: 16px 22px 18px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-lcreate .ez-lc-form > .card-body { padding-bottom: 0 !important; }
.ez-body .ez-lcreate .ez-lc-list .ez-ghead__title { font-size: 20px !important; font-weight: 700; }
.ez-body .ez-lcreate .ez-lc-list .ez-ghead__icon { width: 48px; height: 48px; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .ez-body .ez-lcreate .ez-lv-grid > .ez-if { grid-column: span 4; }
    .ez-body .ez-lcreate .ez-lv-grid > .ez-if.ez-lv-w2 { grid-column: span 4; }
}
@media (min-width: 768px) { .ez-body .ez-lcreate .ez-lv-grid > .ez-if.ez-lc-half { grid-column: span 6; } }

/* 87. Grid footer in narrow side lists (modern.js adds .ez-gwrap--narrow under 640px wide):
   "Showing x of y" on its own line, then a compact one-line pager (current page and two
   either side, plus the arrows) instead of squeezing the summary into a one-letter column. */
.ez-body .ez-gwrap.ez-gwrap--narrow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ez-body .ez-gwrap.ez-gwrap--narrow > .summary,
.ez-body .ez-gwrap.ez-gwrap--narrow > .pagination,
.ez-body .ez-gwrap.ez-gwrap--narrow > nav { grid-column: 1; }
.ez-body .ez-gwrap.ez-gwrap--narrow > .summary { text-align: center; font-size: 12.5px; }
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination { flex-wrap: nowrap; justify-content: safe center; gap: 3px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0 4px; }
/* only the current page and two either side, plus the arrows, so the pager fits on one line */
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li:not(.prev):not(.next) { display: none !important; }   /* theme sets .pagination li { display: block !important } */
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li.active:not(.prev):not(.next),
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li.active + li:not(.prev):not(.next),
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li.active + li + li:not(.prev):not(.next),
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li:not(.prev):not(.next):has(+ li.active),
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li:not(.prev):not(.next):has(+ li + li.active) { display: block !important; }
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li { margin: 0 !important; flex: 0 0 auto; }
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li > a,
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination > li > span,
.ez-body .ez-gwrap.ez-gwrap--narrow .pagination .page-link { min-width: 28px; height: 28px !important; padding: 0 5px !important; font-size: 12.5px; border-radius: 8px !important; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; }

/* 88. Lead Stages / Lead Actions timelines (leads/_activites.php, _actions.php, on the Lead page
   and the read-only Lead page): coloured dot joined by a dotted line, soft-tinted stage / action
   badge, bold title, date + user with icons, remark in a grey note box (actions only, when set).
   Rows lay out side by side when the card is wide, stacked in the side column. */
.ez-body .ez-lv-shead__text { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-lv-shead__text h6 { margin: 0; }
.ez-body .ez-lv-shead__text p { margin: 1px 0 0; color: var(--ez-text-muted); font-size: 12.5px; }
.ez-body .ez-ltl { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.ez-body .ez-ltl__item { --k: #2563eb; --kbg: #e8f0ff; --kfg: #1d4ed8; position: relative; display: flex; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--ez-border); border-radius: 12px; background: var(--ez-surface, #fff); }
.ez-body .ez-ltl__item:last-child { margin-bottom: 0; }
.ez-body .ez-ltl--green { --k: #16a34a; --kbg: var(--ez-bd-success-bg, #dcfce7); --kfg: var(--ez-bd-success-fg, #15803d); }
.ez-body .ez-ltl--red { --k: #dc2626; --kbg: var(--ez-bd-danger-bg, #fee2e2); --kfg: var(--ez-bd-danger-fg, #b91c1c); }
.ez-body .ez-ltl--amber { --k: #f59e0b; --kbg: #fef3c7; --kfg: #b45309; }
html[data-theme="dark"] .ez-body .ez-ltl--blue { --kbg: rgba(37,99,235,.16); --kfg: #93c5fd; }
html[data-theme="dark"] .ez-body .ez-ltl--amber { --kbg: rgba(245,158,11,.16); --kfg: #fcd34d; }
.ez-body .ez-ltl__dot { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 4px solid var(--k); background: var(--ez-surface, #fff); box-shadow: 0 0 0 3px var(--kbg); position: relative; z-index: 1; }
/* dotted line from this dot to the next row's dot */
.ez-body .ez-ltl__item:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: -24px; border-left: 2px dotted var(--ez-border-strong, #cbd5e1); }
.ez-body .ez-ltl__body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.ez-body .ez-ltl__badge { order: 2; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: 24px; padding: 0 10px; border-radius: 8px; background: var(--kbg); color: var(--kfg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ez-body .ez-ltl__main { flex: 1 1 0; min-width: 0; order: 1; }
.ez-body .ez-ltl__title { margin: 0; color: var(--ez-heading, #111827); font-size: 14px; font-weight: 700; line-height: 1.35; }
.ez-body .ez-ltl__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; color: var(--ez-text-muted); font-size: 12px; }
.ez-body .ez-ltl__meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ez-body .ez-ltl__meta .material-icons { font-size: 14px; }
.ez-body .ez-ltl__note { order: 3; flex: 1 1 100%; display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--ez-surface-2, #f1f5f9); color: var(--ez-text); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ez-body .ez-ltl__note .material-icons { font-size: 16px; color: var(--ez-text-muted); margin-top: 1px; }
/* wide card: badge, title + meta and the note box on one row like the mockup */
@container (min-width: 620px) {
    .ez-body .ez-ltl__body { flex-wrap: nowrap; align-items: center; }
    .ez-body .ez-ltl__badge { order: 0; min-width: 110px; height: 30px; }
    .ez-body .ez-ltl__main { flex: 1 1 auto; order: 0; }
    .ez-body .ez-ltl__note { order: 0; flex: 0 1 42%; margin: 0; }
    .ez-body .ez-ltl__dot { margin-top: 0; align-self: center; }
    .ez-body .ez-ltl__item:not(:last-child)::before { top: calc(50% + 8px); bottom: calc(-50% - 2px); }
}

/* 89. Activities (leads/leads-actions/index, .ez-lacts): lead name bold, requirement cut with
   "..." (full text on hover), action as a soft badge in the Lead Actions colours, date with the
   time in grey below. */
.ez-body .ez-lacts td.ez-lacts__lead { font-weight: 600; color: var(--ez-heading, #111827); white-space: nowrap; }
html .ez-body .ez-content .ez-lacts table.table > tbody > tr > td.ez-lacts__req { width: 50%; }
.ez-body .ez-lacts .ez-lacts__reqtxt { display: block; max-width: min(40vw, 640px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.ez-body .ez-lacts .ez-lacts__badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px; background: var(--kbg); color: var(--kfg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ez-body .ez-lacts .ez-lacts__badge.ez-ltl--blue { --kbg: #e8f0ff; --kfg: #1d4ed8; }
.ez-body .ez-lacts .ez-lacts__date { display: inline-flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.ez-body .ez-lacts .ez-lacts__date small { color: var(--ez-text-muted); font-size: 11px; }
@media (max-width: 767.98px) { .ez-body .ez-lacts .ez-lacts__reqtxt { max-width: 12rem; } }

/* 90. Leads dashboard: "New Lead" button at the right of the greeting (user asked) */
.ez-ldash .ez-greeting { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ez-ldash .ez-ldash__new { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0 !important; padding: 0 20px; font-size: 14px; white-space: nowrap; }
.ez-ldash .ez-ldash__new .material-icons { font-size: 20px; }
@media (max-width: 575.98px) { .ez-ldash .ez-ldash__new { width: 100%; justify-content: center; } }

/* 91. Leads dashboard "Leads by Source" card (default/_sources.php, user asked): donut with the
   total in the middle, one row per lead source (icon, count, bar, %, change vs the period
   before), footer with the overall change and View All Leads. */
.ez-lsrc .ez-lsrc__htext { flex: 1 1 auto; min-width: 0; }
.ez-lsrc .ez-lsrc__htext p { color: var(--ez-text-muted); font-size: 12.5px; margin-top: 1px; }
.ez-lsrc .ez-lsrc__period { width: auto; min-width: 130px; height: 40px; flex: 0 0 auto; }
.ez-lsrc .ez-lsrc__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px !important; }
.ez-lsrc .ez-lsrc__chart { position: relative; height: 240px; }
.ez-lsrc .ez-lsrc__total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ez-lsrc .ez-lsrc__total strong { font-size: 30px; font-weight: 800; color: var(--ez-heading, #111827); line-height: 1; }
.ez-lsrc .ez-lsrc__total span { color: var(--ez-text-muted); font-size: 12.5px; margin-top: 4px; }
.ez-lsrc .ez-lsrc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ez-lsrc .ez-lsrc__row { display: grid; grid-template-columns: 40px minmax(0, 1.3fr) auto minmax(60px, 2fr) 42px auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--k) 7%, var(--ez-surface, #fff)); border: 1px solid color-mix(in srgb, var(--k) 16%, transparent); }
.ez-lsrc .ez-lsrc__icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--k); color: #fff; font-size: 18px; }
.ez-lsrc .ez-lsrc__icon .material-icons { font-size: 21px; }
.ez-lsrc .ez-lsrc__name { font-weight: 700; color: var(--ez-heading, #111827); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-lsrc .ez-lsrc__n { display: flex; flex-direction: column; line-height: 1.1; }
.ez-lsrc .ez-lsrc__n strong { font-size: 18px; font-weight: 800; color: var(--ez-heading, #111827); }
.ez-lsrc .ez-lsrc__n small, .ez-lsrc .ez-lsrc__chg small { color: var(--ez-text-muted); font-size: 11.5px; }
.ez-lsrc .ez-lsrc__bar { height: 10px; border-radius: 99px; background: #e5e9f0; overflow: hidden; }
.ez-lsrc .ez-lsrc__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--k); }
.ez-lsrc .ez-lsrc__pct { color: var(--ez-text-muted); font-size: 13px; text-align: right; }
.ez-lsrc .ez-lsrc__chg { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ez-lsrc .ez-lsrc__delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 700; }
.ez-lsrc .ez-lsrc__delta .material-icons { font-size: 15px; }
.ez-lsrc .ez-lsrc__delta--up { background: var(--ez-bd-success-bg, #dcfce7); color: var(--ez-bd-success-fg, #15803d); }
.ez-lsrc .ez-lsrc__delta--down { background: var(--ez-bd-danger-bg, #fee2e2); color: var(--ez-bd-danger-fg, #b91c1c); }
.ez-lsrc .ez-lsrc__delta--new { background: #e8f0ff; color: #1d4ed8; }
.ez-lsrc .ez-lsrc__empty { grid-column: 1 / -1; text-align: center; padding: 30px 0; color: var(--ez-text-muted); }
.ez-lsrc .ez-lsrc__empty .material-icons { font-size: 36px; opacity: .6; }
.ez-lsrc .ez-lsrc__empty p { margin: 6px 0 0; }
.ez-lsrc .ez-lsrc__foot { display: flex; align-items: center; gap: 12px; margin: 0 18px; padding: 14px 0 16px; border-top: 1px solid var(--ez-border); }
.ez-lsrc .ez-lsrc__ficon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #ffe8ef; color: #e11d48; }
.ez-lsrc .ez-lsrc__foot p { flex: 1 1 auto; margin: 0; color: var(--ez-text-muted); font-size: 13.5px; }
.ez-lsrc .ez-lsrc__foot b { font-size: 17px; font-weight: 800; margin-right: 4px; }
.ez-lsrc .ez-lsrc__foot b.ez-up { color: #16a34a; }
.ez-lsrc .ez-lsrc__foot b.ez-down { color: #dc2626; }
.ez-lsrc .ez-lsrc__all { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 12px 0 14px; border: 1px solid var(--ez-border); background: var(--ez-surface, #fff); color: var(--ez-heading, #111827); font-size: 13.5px; white-space: nowrap; }
.ez-lsrc .ez-lsrc__all .material-icons { font-size: 18px; }
html[data-theme="dark"] .ez-lsrc .ez-lsrc__bar { background: var(--ez-border); }
@media (max-width: 991.98px) {
    .ez-lsrc .ez-lsrc__body { grid-template-columns: minmax(0, 1fr); }
    .ez-lsrc .ez-lsrc__chart { height: 210px; max-width: 260px; margin: 0 auto; width: 100%; }
}
@media (max-width: 575.98px) {
    .ez-lsrc .ez-lsrc__row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "i n c" "i b p" "i g g"; row-gap: 6px; }
    .ez-lsrc .ez-lsrc__icon { grid-area: i; width: 36px; height: 36px; align-self: start; }
    .ez-lsrc .ez-lsrc__name { grid-area: n; }
    .ez-lsrc .ez-lsrc__n { grid-area: c; flex-direction: row; align-items: baseline; gap: 4px; }
    .ez-lsrc .ez-lsrc__bar { grid-area: b; }
    .ez-lsrc .ez-lsrc__pct { grid-area: p; }
    .ez-lsrc .ez-lsrc__chg { grid-area: g; flex-direction: row; justify-content: flex-start; gap: 6px; }
    .ez-lsrc .ez-dcard__head { flex-wrap: wrap !important; }
    .ez-lsrc .ez-lsrc__period { width: 100%; }
    .ez-lsrc .ez-lsrc__foot { flex-wrap: wrap; }
    .ez-lsrc .ez-lsrc__all { width: 100%; justify-content: center; }
}

/* 92. Leads dashboard: Leads by Source now sits beside User Performance (narrow column), so it
   lays out by its own width: donut on top, compact source rows below. */
.ez-ldash .ez-lsrc { container-type: inline-size; }
@container (max-width: 960px) {
    .ez-lsrc .ez-lsrc__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ez-lsrc .ez-lsrc__chart { height: 170px; max-width: 200px; width: 100%; margin: 0 auto; }
    .ez-lsrc .ez-lsrc__total strong { font-size: 26px; }
    .ez-lsrc .ez-lsrc__list { gap: 8px; }
    .ez-lsrc .ez-lsrc__row { grid-template-columns: 32px minmax(0, 1fr) auto auto; grid-template-areas: "i n c g" "i b b p"; gap: 4px 10px; padding: 8px 12px; }
    .ez-lsrc .ez-lsrc__icon { grid-area: i; width: 32px; height: 32px; font-size: 14px; }
    .ez-lsrc .ez-lsrc__icon .material-icons { font-size: 17px; }
    .ez-lsrc .ez-lsrc__name { grid-area: n; font-size: 13.5px; }
    .ez-lsrc .ez-lsrc__n { grid-area: c; flex-direction: row; align-items: baseline; gap: 4px; }
    .ez-lsrc .ez-lsrc__n strong { font-size: 15px; }
    .ez-lsrc .ez-lsrc__bar { grid-area: b; height: 7px; }
    .ez-lsrc .ez-lsrc__pct { grid-area: p; font-size: 12px; min-width: 36px; }
    .ez-lsrc .ez-lsrc__chg { grid-area: g; }
    /* "vs yesterday" is said once in the footer; each chip keeps it as a tooltip */
    .ez-lsrc .ez-lsrc__chg small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ez-lsrc .ez-lsrc__delta { font-size: 11.5px; padding: 1px 6px; }
    .ez-lsrc .ez-lsrc__foot { flex-wrap: wrap; gap: 10px; }
    .ez-lsrc .ez-lsrc__foot p { flex: 1 1 0; font-size: 12.5px; }
    .ez-lsrc .ez-lsrc__foot b { font-size: 15px; }
    .ez-lsrc .ez-lsrc__all { width: 100%; justify-content: center; }
}
/* half-width slot: donut left, source rows right, so the card stays about as tall as User Performance */
@container (min-width: 440px) and (max-width: 960px) {
    .ez-lsrc .ez-lsrc__body { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; }
    .ez-lsrc .ez-lsrc__chart { height: 160px; max-width: none; }
    .ez-lsrc .ez-lsrc__all { width: auto; }
    .ez-lsrc .ez-lsrc__foot { flex-wrap: nowrap; }
}
@container (min-width: 640px) and (max-width: 960px) {
    .ez-lsrc .ez-lsrc__body { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
    .ez-lsrc .ez-lsrc__chart { height: 200px; }
}
/* wide card: the row's own columns may shrink, so the change chip never runs past the edge */
.ez-lsrc .ez-lsrc__row { min-width: 0; }
.ez-lsrc .ez-lsrc__chg { min-width: 0; }
@container (max-width: 520px) {
    .ez-lsrc .ez-lsrc__htext p { display: none; }
}
.ez-lsrc .ez-lsrc__htext h6 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* User Performance + Leads by Source row: same height, same 18px inner padding; the spare
   height goes to the performance chart and the source list is centred, so no dead space */
.ez-ldash__row:has(.ez-lsrc) .ez-dcard .card-body { padding: 18px !important; }
.ez-ldash__row:has(.ez-lsrc) .ez-lsrc__period { height: 38px; }
.ez-ldash__row:has(.ez-lsrc) .ez-lsrc__body { flex: 1 1 auto; align-content: center; }
.ez-ldash__row:has(.ez-lsrc) .ez-lperf__body { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; }
.ez-ldash__row:has(.ez-lsrc) .ez-lperf__chart { flex: 1 1 210px; height: auto; min-height: 210px; }
.ez-ldash__row:has(.ez-lsrc) .ez-lperf__chart canvas { position: absolute; inset: 0; }

/* 93. My Wallet (site/my-wallet, monthlyWallet.php + _monthlyWallet.php, user mockup 2026-10-14) built from
   the shared parts: grid card header with the month picker on the right, dashboard KPI tiles, standard
   grid, soft-tint pills for profit; only the totals row and the month in blue are page specific */
.ez-wallet .ez-wl-card > .card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ez-wallet .ez-wl-month-name { color: #2563eb; }
.ez-wallet .ez-wl-month { flex: 0 0 220px !important; width: 220px; max-width: 100%; margin: 0 0 0 auto; }
.ez-wallet .ez-wl-month .form-select { height: 40px; font-weight: 600; cursor: pointer; }
.ez-wallet .ez-wl-kpis { margin-bottom: 4px; }
.ez-wallet .ez-kpi { padding: 16px 18px; }
.ez-wallet .ez-kpi__value { font-size: 26px; white-space: nowrap; }
.ez-body .ez-wallet .ez-wl-table > tbody > .ez-wl-total > * { border-bottom: 0; background: var(--ez-surface-2) !important; font-weight: 700; color: var(--ez-t-primary); }
@media (max-width: 575.98px) {
    .ez-wallet .ez-wl-month { flex: 1 1 auto !important; width: auto; }
}

/* 94. Pack Orders (orders/pack, .ez-pack, user approved 2026-10-15): phone-first packing
   screen. Two counters, one big scan box + Camera button, the scanned order as a card with a
   big green Mark Packed, then the New orders still not packed as a list. Max 760px wide. */
.ez-body .ez-pack { max-width: 760px; margin: 0 auto; }
.ez-body .ez-pack .ez-pack-card { margin-bottom: 20px; }
.ez-body .ez-pack-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ez-body .ez-pack-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid #fcd34d; border-radius: 12px; background: var(--ez-tile-amber); }
.ez-body .ez-pack-stat--done { border-color: #86efac; background: #f0fdf4; }
.ez-body .ez-pack-stat__label { color: #6b7280; font-size: 12px; font-weight: 600; }
.ez-body .ez-pack-stat__num { color: var(--ez-tile-amber-ink); font-size: 26px; font-weight: 700; line-height: 1.2; }
.ez-body .ez-pack-stat--done .ez-pack-stat__num { color: #16a34a; }
.ez-body .ez-pack-scanrow { display: flex; gap: 10px; align-items: stretch; }
.ez-body .ez-pack-scanrow .ez-scan { flex: 1 1 auto; width: auto; height: 48px; }
.ez-body .ez-pack-scanrow .ez-scan > input#scanner { font-size: 16px; }
.ez-body .ez-content .btn.ez-pack-cambtn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 48px; margin: 0 !important; padding: 0 18px; }
.ez-body .ez-pack-cambtn .material-icons { font-size: 20px; }
.ez-body .ez-pack-cam { margin-top: 14px; }
.ez-body .ez-pack-cam__view { overflow: hidden; border-radius: 12px; background: #111827; }
.ez-body .ez-pack-cam__view video { display: block; width: 100% !important; }
.ez-body .ez-content .btn.ez-pack-cam__stop { width: 100%; height: 44px; margin: 10px 0 0 !important; }
.ez-body .ez-pack-cam__pick { margin-bottom: 10px; }
.ez-body .ez-pack-cam__hint { margin: 8px 0 0; color: #6b7280; font-size: 12px; line-height: 1.5; }
.ez-body .ez-pack-result { margin-top: 16px; padding: 16px; border: 1px solid var(--ez-border); border-radius: 12px; background: var(--ez-surface); }
.ez-body .ez-pack-msg { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.ez-body .ez-pack-msg--danger { background: #fef2f2; color: #b91c1c; }
.ez-body .ez-pack-msg--warning { background: #fffbeb; color: #b45309; }
.ez-body .ez-pack-actions { display: flex; gap: 10px; margin-top: 14px; }
.ez-body .ez-pack-actions .btn { flex: 1 1 0; height: 48px; margin: 0 !important; }
.ez-body .ez-pack-actions .btn.ez-pack-go { flex: 2 1 0; font-size: 16px; }
.ez-body .ez-pack-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ez-body .ez-pack-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--ez-border); border-radius: 12px; background: var(--ez-surface); }
.ez-body .ez-pack-item > .ez-po { flex: 1 1 auto; min-width: 0; }
/* one order, compact (list rows and the scanned-order card): small label/value grid, customer,
   description, then each item as "name  xqty" */
.ez-body .ez-po { font-size: 13px; line-height: 1.4; }
.ez-body .ez-po__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 0 0 8px; }
.ez-body .ez-po__meta > div { min-width: 0; }
.ez-body .ez-po__meta dt { color: #9ca3af; font-size: 11px; font-weight: 600; line-height: 1.3; }
.ez-body .ez-po__meta dd { margin: 0; color: var(--ez-heading); font-weight: 500; overflow-wrap: anywhere; }
.ez-body .ez-po__meta dd.ez-po__strong { font-size: 16px; font-weight: 800; line-height: 1.3; }
.ez-body .ez-po__docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ez-body .ez-po__doc { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; color: #6b7280; font-size: 12px; font-weight: 500; white-space: nowrap; }
.ez-body .ez-po__doc .material-icons { font-size: 15px; line-height: 1; }
.ez-body .ez-po__doc b { font-weight: 700; }
.ez-body .ez-po__doc.is-done { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
html[data-theme="dark"] .ez-body .ez-po__doc { border-color: var(--ez-border); background: transparent; color: var(--ez-text); }
html[data-theme="dark"] .ez-body .ez-po__doc.is-done { border-color: rgba(134, 239, 172, .35); background: rgba(22, 163, 74, .14); color: #86efac; }
.ez-body .ez-po__cust { color: var(--ez-heading); overflow-wrap: anywhere; }
.ez-body .ez-po__cust span { color: #6b7280; }
.ez-body .ez-po__addr { color: #6b7280; font-size: 12px; overflow-wrap: anywhere; }
.ez-body .ez-po__desc { margin-top: 4px; color: var(--ez-text); font-size: 12px; overflow-wrap: anywhere; }
.ez-body .ez-po__desc > span { margin-right: 4px; color: #9ca3af; font-size: 11px; font-weight: 600; }
.ez-body .ez-po__items { margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px dashed var(--ez-border); }
.ez-body .ez-po__items li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12px; }
.ez-body .ez-po__items li > span { min-width: 0; overflow-wrap: anywhere; }
.ez-body .ez-po__items b { color: var(--ez-heading); white-space: nowrap; }
.ez-body .ez-pack-item__acts { display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; width: max-content; }
.ez-body .ez-pack-print { display: flex; gap: 8px; }
.ez-body .ez-pack-item__acts .ez-pack-print { flex-direction: column; gap: 6px; }
.ez-body .ez-content .ez-pack-item__acts .btn { height: 36px !important; }
.ez-body .ez-content .ez-pack-print .btn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 5px; height: 34px; margin: 0 !important; padding: 0 8px; font-size: 12px; }
.ez-body .ez-pack-result .ez-pack-print { margin-top: 12px; }
.ez-body .ez-content .btn.ez-pack-item__btn { flex: 0 0 auto; height: 44px; margin: 0 !important; padding: 0 14px; border: 0; background: #fffbeb !important; color: #b45309 !important; box-shadow: inset 0 0 0 1px #fcd34d !important; }
.ez-body .ez-content .btn.ez-pack-item__btn:hover { background: #fef3c7 !important; }
.ez-body .ez-pack-empty { margin: 0; color: #6b7280; }
.ez-body .ez-pack .pagination { margin: 14px 0 0; }
html[data-theme="dark"] .ez-body .ez-pack-stat { border-color: rgba(252, 211, 77, .35); }
html[data-theme="dark"] .ez-body .ez-pack-stat--done { border-color: rgba(134, 239, 172, .35); background: rgba(22, 163, 74, .14); }
html[data-theme="dark"] .ez-body .ez-pack-stat__label { color: var(--ez-text); }
html[data-theme="dark"] .ez-body .ez-pack-msg--danger { background: rgba(239, 68, 68, .14); color: #fca5a5; }
html[data-theme="dark"] .ez-body .ez-content .btn.ez-pack-item__btn { background: rgba(245, 158, 11, .14) !important; color: #fcd34d !important; box-shadow: inset 0 0 0 1px rgba(252, 211, 77, .35) !important; }
html[data-theme="dark"] .ez-body .ez-pack-msg--warning { background: rgba(245, 158, 11, .14); color: #fcd34d; }
@media (max-width: 575.98px) {
    .ez-body .ez-pack .card.ez-gcard > .card-body { padding: 14px !important; }
    .ez-body .ez-pack-item { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
    .ez-body .ez-content .btn.ez-pack-item__btn { width: 100%; }
    .ez-body .ez-pack-item__acts { width: auto; }
    .ez-body .ez-pack-item__acts .ez-pack-print { flex-direction: row; }
    .ez-body .ez-content .ez-pack-item__acts .btn { height: 44px !important; }
    .ez-body .ez-po__meta { gap: 6px 8px; }
    .ez-body .ez-content .btn.ez-pack-cambtn { padding: 0 14px; }
}

/* 95. Paste Orders (orders/paste, .ez-paste, user approved 2026-10-15): paste client messages,
   web/js/paste-orders.js reads them into order cards. Settings row + big text box in the first
   card; the second card lists one soft card per order. Field tints: blue = read from the
   message, amber = a guess to check, red = missing. */
.ez-body .ez-paste .ez-paste-card { margin-bottom: 20px; }
.ez-body .ez-paste-set { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.ez-body .ez-paste-set__f label, .ez-body .ez-pf > label { display: block; margin: 0 0 6px; }
.ez-body .ez-paste-req { color: var(--ez-t-error); }
.ez-body .ez-paste-lkr, .ez-body .ez-paste-tel { display: flex; align-items: stretch; min-width: 0; }
.ez-body .ez-paste-lkr > span, .ez-body .ez-paste-tel > span {
    display: flex; align-items: center; flex: 0 0 auto; padding: 0 10px;
    border: 1px solid var(--ez-border-strong); border-right: 0; border-radius: 10px 0 0 10px;
    background: var(--ez-surface-2); color: var(--ez-t-secondary); font-size: 12.5px; font-weight: 600;
}
.ez-body .ez-content .ez-paste-lkr > .form-control, .ez-body .ez-content .ez-paste-tel > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; border-radius: 0 10px 10px 0 !important; }
.ez-body .ez-content textarea.ez-paste-text { min-height: 200px; font-family: var(--ez-font); line-height: 1.5; resize: vertical; }
.ez-body .ez-paste-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-top: 14px; }
.ez-body .ez-paste-hint { flex: 1 1 320px; margin: 0; font-size: 12.5px; color: var(--ez-t-secondary); }
.ez-body .ez-paste-actions__btns, .ez-body .ez-paste-head-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.ez-body .ez-paste .card.ez-gcard > .card-header > .ez-paste-head-acts { flex: 0 1 auto; }
.ez-body .ez-paste-key { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; border-radius: 3px; vertical-align: -1px; border: 1px solid; }
.ez-body .ez-paste-key:first-child { margin-left: 0; }
.ez-body .ez-paste-key--ok { background: var(--ez-info-soft); border-color: #93c5fd; }
.ez-body .ez-paste-key--check { background: var(--ez-warning-soft); border-color: #fcd34d; }
.ez-body .ez-paste-key--miss { background: var(--ez-danger-soft); border-color: #fca5a5; }
.ez-body .ez-paste-list { display: flex; flex-direction: column; gap: 14px; }
.ez-body .ez-paste-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ez-border); }
.ez-body .ez-paste-summary { font-size: 13px; color: var(--ez-t-secondary); }
.ez-body .btn.ez-b.is-busy { opacity: .7; pointer-events: none; }

/* one order */
.ez-body .ez-pcard { border: 1px solid var(--ez-border); border-radius: 12px; background: var(--ez-surface); }
.ez-body .ez-pcard__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-content .ez-pcard__pick { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; }
.ez-body .ez-pcard__pick .form-check-input { width: 18px; height: 18px; margin: 0; }
.ez-body .ez-pcard__badges { display: inline-flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.ez-body .ez-content .btn.ez-act.ez-pcard__del, .ez-body .ez-content .btn.ez-act.ez-pitem__del {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 !important; padding: 0;
    border-radius: 8px; background: var(--ez-danger-soft) !important; color: var(--ez-danger) !important; box-shadow: none !important;
}
.ez-body .ez-pcard__del .material-icons, .ez-body .ez-pitem__del .material-icons { font-size: 18px; }
.ez-body .ez-pcard__body { padding: 14px; }
.ez-body .ez-pcard__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.ez-body .ez-pf { min-width: 0; }
.ez-body .ez-pf--wide { grid-column: span 2; }
.ez-body .ez-pf__hint, .ez-body .ez-pf__stock { display: block; margin-top: 4px; font-size: 11.5px; line-height: 15px; color: var(--ez-warning-ink); }
.ez-body .ez-pf__stock { color: var(--ez-t-secondary); }
.ez-body .ez-pf__hint.is-miss, .ez-body .ez-pf__stock.is-miss { color: var(--ez-t-error); }
.ez-body .ez-content .form-control.ez-pf--ok, .ez-body .ez-content .form-select.ez-pf--ok { background-color: var(--ez-info-soft) !important; border-color: #93c5fd !important; }
.ez-body .ez-content .form-control.ez-pf--check, .ez-body .ez-content .form-select.ez-pf--check { background-color: var(--ez-warning-soft) !important; border-color: #fcd34d !important; }
.ez-body .ez-content .form-control.ez-pf--miss, .ez-body .ez-content .form-select.ez-pf--miss { background-color: var(--ez-danger-soft) !important; border-color: #fca5a5 !important; }
.ez-body .ez-pcard__cust { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--ez-info-soft); color: var(--ez-info-ink); font-size: 13px; }
.ez-body .ez-pcard__cust .material-icons { font-size: 18px; }
.ez-body .ez-pcard__cust > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ez-body .ez-pcard__items { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ez-border); }
.ez-body .ez-pitem { display: grid; grid-template-columns: minmax(0, 1fr) 90px 170px 32px; align-items: start; gap: 12px; }
.ez-body .ez-pitem__del { margin-top: 32px !important; }
.ez-body .ez-pitem + .ez-pitem > .ez-pf > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ez-body .ez-pitem + .ez-pitem .ez-pitem__del { margin-top: 6px !important; }
.ez-body .ez-content .btn.ez-pcard__additem { margin: 10px 0 0 !important; }
.ez-body .ez-pcard__totals { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--ez-surface-2); font-size: 13px; color: var(--ez-t-secondary); }
.ez-body .ez-pcard__sum { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; }
.ez-body .ez-pcard__totals b { color: var(--ez-heading); }
.ez-body .ez-pcard__codw { margin-left: auto; font-size: 14px; }
.ez-body .ez-pcard__codw b { color: #2563eb; font-size: 15px; }
.ez-body .ez-content .ez-pcard__codw label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ez-body .ez-pcard__codw .ez-paste-lkr { width: 160px; }
.ez-body .ez-pcard__diff { flex: 1 0 100%; text-align: right; color: var(--ez-warning-ink); font-size: 12px; }
.ez-body .ez-pcard__diff:empty { display: none; }
.ez-body .ez-pcard__errors { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid #fca5a5; border-radius: 10px; background: var(--ez-danger-soft); color: var(--ez-danger-ink); font-size: 13px; }
.ez-body .ez-pcard__errors ul { margin: 2px 0 0; padding-left: 18px; }
.ez-body .ez-pcard__msg { margin-top: 12px; font-size: 12.5px; }
.ez-body .ez-pcard__msg > summary { cursor: pointer; color: var(--ez-t-link); font-weight: 500; }
.ez-body .ez-pcard__msg pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--ez-surface-2); color: var(--ez-text); font-family: var(--ez-font); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ez-body .ez-pcard__other { margin: 6px 0 0; color: var(--ez-t-secondary); }
.ez-body .ez-pcard.is-blocked { border-color: #fca5a5; }
.ez-body .ez-pcard__done { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--ez-border); background: var(--ez-success-soft); color: var(--ez-success-ink); font-size: 13px; }
.ez-body .ez-pcard__done .material-icons { font-size: 20px; }
.ez-body .ez-pcard__done > span { flex: 1 1 240px; }
.ez-body .ez-pcard.is-done .ez-pcard__body { display: none; }
.ez-body .ez-pcard.is-done .ez-pcard__pick .form-check-input { display: none; }
html[data-theme="dark"] .ez-body .ez-content .form-control.ez-pf--ok, html[data-theme="dark"] .ez-body .ez-content .form-select.ez-pf--ok { border-color: rgba(147, 197, 253, .45) !important; }
html[data-theme="dark"] .ez-body .ez-content .form-control.ez-pf--check, html[data-theme="dark"] .ez-body .ez-content .form-select.ez-pf--check { border-color: rgba(252, 211, 77, .45) !important; }
html[data-theme="dark"] .ez-body .ez-content .form-control.ez-pf--miss, html[data-theme="dark"] .ez-body .ez-content .form-select.ez-pf--miss { border-color: rgba(252, 165, 165, .45) !important; }
html[data-theme="dark"] .ez-body .ez-pcard__errors { border-color: rgba(252, 165, 165, .35); color: #fca5a5; }
html[data-theme="dark"] .ez-body .ez-pcard__cust { color: #bfdbfe; }
html[data-theme="dark"] .ez-body .ez-pcard__done { color: #86efac; }
html[data-theme="dark"] .ez-body .ez-pcard__codw b { color: #93c5fd; }
html[data-theme="dark"] .ez-body .ez-pf__hint, html[data-theme="dark"] .ez-body .ez-pcard__diff { color: #fcd34d; }
@media (max-width: 1199.98px) {
    .ez-body .ez-paste-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ez-body .ez-pcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ez-body .ez-paste .card.ez-gcard > .card-body { padding: 14px !important; }
    .ez-body .ez-paste-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ez-body .ez-pcard__grid { grid-template-columns: minmax(0, 1fr); }
    .ez-body .ez-pf--wide { grid-column: auto; }
    .ez-body .ez-pitem { grid-template-columns: minmax(0, 1fr) 80px 32px; }
    .ez-body .ez-pitem > .ez-pf--price { grid-column: 1 / 3; grid-row: 2; }
    .ez-body .ez-pitem + .ez-pitem { padding-top: 10px; border-top: 1px dashed var(--ez-border); }
    .ez-body .ez-pitem + .ez-pitem > .ez-pf > label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .ez-body .ez-pitem__del, .ez-body .ez-pitem + .ez-pitem .ez-pitem__del { margin-top: 32px !important; }
    .ez-body .ez-paste-actions__btns, .ez-body .ez-paste-head-acts, .ez-body .ez-paste-foot { width: 100%; }
    .ez-body .ez-paste-actions__btns .btn, .ez-body .ez-paste-head-acts .btn, .ez-body .ez-paste-foot .btn { flex: 1 1 auto; }
    .ez-body .ez-pcard__codw { margin-left: 0; }
    .ez-body .ez-pcard__diff { text-align: left; }
}
/* Paste Order popup on Create Order (web/js/paste-fill.js): button on the right of the Customer &
   Delivery Details head, a result strip under it, same field tints as the Paste Orders cards */
.ez-body .ez-osec__head > .btn.ez-osec__act { flex: 0 0 auto; margin: 0 0 0 auto !important; }
.ez-body .ez-content .select2-selection.ez-pf--ok { background-color: var(--ez-info-soft) !important; border-color: #93c5fd !important; }
.ez-body .ez-content .select2-selection.ez-pf--check { background-color: var(--ez-warning-soft) !important; border-color: #fcd34d !important; }
.ez-body .ez-pfill-result { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid #bfdbfe; border-radius: 10px; background: var(--ez-info-soft); color: var(--ez-info-ink); font-size: 13px; }
.ez-body .ez-pfill-result > div { flex: 1 1 auto; min-width: 0; }
.ez-body .ez-pfill-result ul { margin: 4px 0 0; padding-left: 18px; }
.ez-body .ez-pfill-result ul:empty { display: none; }
.ez-body .ez-content .btn.ez-act.ez-pfill-result__x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 !important; padding: 0; background: transparent !important; box-shadow: none !important; color: inherit !important; }
.ez-body .ez-pfill-result__x .material-icons { font-size: 18px; }
.ez-body .ez-content .ez-pfill-result__t { margin: 6px 0 0; font-size: 13px; line-height: 18px; font-weight: 600; color: inherit; }
.ez-body .ez-pfill-result ul { overflow-wrap: anywhere; }
.ez-body .card.ez-pfill-msg { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--ez-border); border-radius: 16px; background: var(--ez-surface); box-shadow: var(--ez-shadow-sm); }
.ez-body .ez-pfill-msg__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-pfill-msg__icon { flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ez-info-soft); color: #2563eb; }
.ez-body .ez-pfill-msg__icon .material-icons { font-size: 18px; }
.ez-body .ez-pfill-msg__hd { flex: 1 1 170px; min-width: 0; }
.ez-body .ez-pfill-msg__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ez-body .ez-pfill-msg__sub { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--ez-t-secondary); }
.ez-body .ez-pfill-msg__acts { flex: 1 0 auto; display: flex; justify-content: flex-end; gap: 8px; }
.ez-body .ez-pfill-msg__acts .ez-b { flex: 1 1 0; min-height: 32px; height: 32px; padding: 0 12px; justify-content: center; white-space: nowrap; }
.ez-body .ez-pfill-msg__acts .ez-b .material-icons { font-size: 16px; }
.ez-pfill-modal .modal-footer .ez-pfill__clear { margin-right: auto !important; }
.ez-body .ez-pfill-msg__text { max-height: 420px; margin: 0; overflow: auto; font-family: var(--ez-font); font-size: 13px; line-height: 1.55; color: var(--ez-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ez-hl-msg { display: flex; flex-direction: column; gap: 3px; font-family: var(--ez-font); font-size: 13px; line-height: 1.45; color: var(--ez-text); white-space: normal !important; }
.ez-hl { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 3px 8px; border: 1px solid transparent; border-radius: 6px; overflow-wrap: anywhere; }
.ez-hl__t { min-width: 0; white-space: pre-wrap; }
.ez-hl__tag { flex: 0 0 auto; margin-top: 1px; font-size: 10.5px; font-style: normal; font-weight: 600; line-height: 1.5; white-space: nowrap; opacity: .9; }
.ez-hl--ok { background: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .25); }
.ez-hl--ok .ez-hl__tag { color: #15803d; }
.ez-hl--check { background: rgba(245, 158, 11, .09); border-color: rgba(245, 158, 11, .3); }
.ez-hl--check .ez-hl__tag { color: #b45309; }
.ez-hl--none { background: transparent; border-color: var(--ez-border); border-style: dashed; color: var(--ez-t-secondary); }
.ez-hl--none .ez-hl__tag { color: var(--ez-t-muted, #9ca3af); }
.ez-hl--skip { padding-top: 1px; padding-bottom: 1px; color: var(--ez-t-muted, #9ca3af); }
.ez-hl--blank { height: 4px; padding: 0; }
.ez-hl-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 8px; font-size: 11.5px; color: var(--ez-t-secondary); }
.ez-hl-key__i { display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 1px solid; border-radius: 3px; }
.ez-hl-key__i:first-child { margin-left: 0; }
.ez-hl-key__i--ok { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .45); }
.ez-hl-key__i--check { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .5); }
.ez-hl-key__i--none { border-style: dashed; border-color: var(--ez-t-muted, #9ca3af); }
html[data-theme="dark"] .ez-hl--ok .ez-hl__tag { color: #4ade80; }
html[data-theme="dark"] .ez-hl--check .ez-hl__tag { color: #fbbf24; }
.ez-pcard__msg .ez-hl-key { margin-top: 8px; }
.ez-pfill-modal .modal-dialog { max-width: 560px; }
.ez-pguide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: ezpg; }
.ez-pguide li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border: 1px solid var(--ez-border); border-radius: 12px; background: var(--ez-surface); font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--ez-t-secondary); counter-increment: ezpg; }
.ez-pguide li b { color: var(--ez-text); font-weight: 600; }
.ez-pguide li::before { content: counter(ezpg); position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 700; color: #2563eb; }
.ez-pguide__i { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ez-info-soft); color: #2563eb; }
.ez-pguide__i .material-icons { font-size: 18px; }
.ez-pguide__tip { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 8px 10px; border: 1px solid rgba(245, 158, 11, .35); border-radius: 10px; background: rgba(245, 158, 11, .08); font-size: 12.5px; line-height: 1.45; color: var(--ez-t-secondary); }
.ez-pguide__tip .material-icons { font-size: 16px; margin-top: 1px; color: #d97706; }
.ez-pguide__tip b { color: var(--ez-text); font-weight: 600; }
.ez-pguide__ex { margin: 0 0 10px; font-size: 12.5px; }
.ez-pguide__ex summary { display: inline-block; cursor: pointer; color: #2563eb; font-weight: 500; }
.ez-pguide__ex pre { margin: 6px 0 0; padding: 8px 10px; border: 1px dashed var(--ez-border); border-radius: 10px; background: var(--ez-bg, transparent); font-family: var(--ez-font); font-size: 12.5px; line-height: 1.5; color: var(--ez-text); white-space: pre-wrap; }
.ez-body .card.ez-pguide-card { margin: 0 0 12px; padding: 14px 16px 16px; border: 1px solid var(--ez-border); border-radius: 16px; background: var(--ez-surface); box-shadow: var(--ez-shadow-sm); }
.ez-body .card.ez-pguide-card[hidden] { display: none; }
.ez-body .ez-pguide-card__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--ez-border); }
.ez-body .ez-pguide-card__icon { flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ez-info-soft); color: #2563eb; }
.ez-body .ez-pguide-card__icon .material-icons { font-size: 18px; }
.ez-body .ez-pguide-card__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ez-body .ez-pguide-card__sub { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--ez-t-secondary); }
.ez-body .ez-pguide-card__btn { width: 100%; justify-content: center; margin: 4px 0 0; }
.ez-pguide--list { grid-template-columns: 1fr; gap: 0; }
.ez-pguide--list li { flex-direction: row; align-items: center; gap: 10px; padding: 7px 0 7px 18px; border: 0; border-radius: 0; background: none; text-align: left; font-size: 13px; }
.ez-pguide--list li::before { top: 50%; left: 0; transform: translateY(-50%); }
.ez-pguide--list .ez-pguide__i { flex: 0 0 30px; width: 30px; height: 30px; }
.ez-pguide--list .ez-pguide__i .material-icons { font-size: 16px; }
.ez-pguide--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 4px; }
@media (max-width: 640px) { .ez-pguide--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ez-pguide li { font-size: 11.5px; padding: 10px 4px 8px; } }
.ez-pfill-modal .ez-pfill__text { min-height: 150px; resize: vertical; line-height: 1.5; }
.ez-pfill-modal .ez-pfill__note { margin: 8px 0 0; font-size: 12.5px; color: var(--ez-t-secondary); }
.ez-pfill-modal .ez-pfill__note:empty { display: none; }
.ez-pfill-modal .ez-smodal__sub { margin: 2px 0 0; font-size: 13px; color: var(--ez-t-secondary); }
html[data-theme="dark"] .ez-body .ez-content .select2-selection.ez-pf--ok { border-color: rgba(147, 197, 253, .45) !important; }
html[data-theme="dark"] .ez-body .ez-content .select2-selection.ez-pf--check { border-color: rgba(252, 211, 77, .45) !important; }
html[data-theme="dark"] .ez-body .ez-pfill-result { border-color: rgba(147, 197, 253, .35); color: #bfdbfe; }
@media (max-width: 575.98px) {
    .ez-body .ez-osec__head { flex-wrap: wrap; }
    .ez-body .ez-osec__head > .btn.ez-osec__act { width: 100%; margin: 4px 0 0 !important; }
}