/*
 * iz-admin.css
 * Styles consolidés pour les pages admin IziBillet
 * Couvre : delivery/orders, delivery/point-of-sale, finance, settings, events
 */

/* ══════════════════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════════════════ */
:root {
    --iz-red: #dc2626;
    --iz-red-dark: #b91c1c;
    --iz-red-soft: #fee2e2;
    --iz-red-mid: #fca5a5;
    --iz-black: #0f0e0e;
    --iz-black-2: #1c1b1b;
    --iz-ink: #1a1a1a;
    --iz-ink-2: #44403c;
    --iz-ink-3: #78716c;
    --iz-surface: #ffffff;
    --iz-cream: #fafaf9;
    --iz-border: #e7e5e4;
    --iz-border-s: #d6d3d1;
    --iz-r: 10px;
    --iz-r-sm: 6px;
    --iz-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
    --iz-shadow-md: 0 4px 20px rgba(0, 0, 0, .10);

    /* IzTable design token bridge */
    --ink: var(--iz-ink);
    --muted: var(--iz-ink-2);
    --muted-2: var(--iz-ink-3);
    --line: var(--iz-border);
    --line-2: #f5f4f3;
    --surface: var(--iz-surface);
    --bg: var(--iz-cream);
    --accent: var(--iz-red);
    --success: #16a34a;
    --r-sm: var(--iz-r-sm);
    --r-md: var(--iz-r);
}


/* ══════════════════════════════════════════════════════
   2. BASE
══════════════════════════════════════════════════════ */
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--iz-cream);
}

.iz-page-title {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--iz-ink);
    margin-bottom: 2px;
}

.iz-page-sub {
    font-size: 13px;
    color: var(--iz-ink-3);
}

.iz-pane-title {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--iz-ink);
    margin-bottom: 20px;
}

.iz-req-note {
    font-size: 12px;
    color: var(--iz-ink-3);
    text-align: right;
    margin-bottom: 14px;
}

.iz-divider {
    height: 1px;
    background: var(--iz-border);
    margin: 4px 0;
}


/* ══════════════════════════════════════════════════════
   3. BUTTONS
══════════════════════════════════════════════════════ */
.iz-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--iz-r-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    line-height: 1.4;
    text-decoration: none;
}

.iz-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.iz-btn-primary {
    background: var(--iz-red);
    color: #fff;
    border-color: var(--iz-red);
}

.iz-btn-primary:hover {
    background: var(--iz-red-dark);
    border-color: var(--iz-red-dark);
    color: #fff;
}

.iz-btn-ghost {
    background: transparent;
    color: var(--iz-ink-2);
    border-color: var(--iz-border-s);
}

.iz-btn-ghost:hover {
    background: var(--iz-cream);
    border-color: var(--iz-ink-3);
    color: var(--iz-ink);
}

.iz-btn-success {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

.iz-btn-success:hover {
    background: #15803d;
    color: #fff;
}

.iz-btn-dark {
    background: var(--iz-black);
    color: #fff;
    border-color: var(--iz-black);
}

.iz-btn-dark:hover {
    background: var(--iz-black-2);
    color: #fff;
}

.iz-btn-red-soft {
    background: var(--iz-red-soft);
    color: var(--iz-red);
    border-color: var(--iz-red-mid);
}

.iz-btn-red-soft:hover {
    background: #fecaca;
}

.iz-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.iz-btn-icon {
    padding: 6px;
}

.iz-btn-lg {
    padding: 9px 20px;
}


/* ══════════════════════════════════════════════════════
   4. BADGES
══════════════════════════════════════════════════════ */
.iz-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.iz-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status */
.iz-badge-success {
    background: #dcfce7;
    color: #15803d;
}

.iz-badge-success::before {
    background: #16a34a;
}

.iz-badge-warning {
    background: #fef9c3;
    color: #92400e;
}

.iz-badge-warning::before {
    background: #d97706;
}

.iz-badge-danger {
    background: var(--iz-red-soft);
    color: var(--iz-red-dark);
}

.iz-badge-danger::before {
    background: var(--iz-red);
}

.iz-badge-info {
    background: #eff6ff;
    color: #1d4ed8;
}

.iz-badge-info::before {
    background: #3b82f6;
}

.iz-badge-primary {
    background: #f5f3ff;
    color: #6d28d9;
}

.iz-badge-primary::before {
    background: #7c3aed;
}

.iz-badge-gray {
    background: #f3f1ec;
    color: var(--iz-ink-3);
}

.iz-badge-gray::before {
    background: var(--iz-ink-3);
}

/* Event-specific */
.iz-badge-published {
    background: #dcfce7;
    color: #15803d;
}

.iz-badge-published::before {
    background: #16a34a;
}

.iz-badge-draft {
    background: #fef9c3;
    color: #92400e;
}

.iz-badge-draft::before {
    background: #d97706;
}

.iz-badge-blocked {
    background: var(--iz-red-soft);
    color: var(--iz-red-dark);
}

.iz-badge-blocked::before {
    background: var(--iz-red);
}

.iz-badge-public {
    background: #f0f9ff;
    color: #0369a1;
}

.iz-badge-private {
    background: #f1f5f9;
    color: #475569;
}

.iz-badge-test {
    background: #f0fdf4;
    color: #15803d;
}


/* ══════════════════════════════════════════════════════
   5. FORM ELEMENTS
══════════════════════════════════════════════════════ */
.iz-form-group {
    margin-bottom: 14px;
}

.iz-form-group:last-child {
    margin-bottom: 0;
}

.iz-form-label,
.iz-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--iz-ink-2);
    margin-bottom: 5px;
}

.iz-form-label .req,
.iz-label .req {
    color: var(--iz-red);
}

.iz-form-hint {
    font-size: 11px;
    color: var(--iz-ink-3);
    margin-top: 3px;
}

.iz-form-control,
.iz-control,
.iz-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--iz-border-s);
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--iz-ink);
    background: var(--iz-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.iz-form-control:focus,
.iz-control:focus,
.iz-input:focus {
    border-color: var(--iz-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09);
}

.iz-form-control::placeholder,
.iz-control::placeholder,
.iz-input::placeholder {
    color: var(--iz-ink-3);
}

.iz-form-control.is-invalid,
.iz-control.is-invalid {
    border-color: var(--iz-red) !important;
}

.iz-control.iz-readonly {
    background: var(--iz-cream);
    color: var(--iz-ink-2);
    cursor: default;
}

.iz-form-select,
.iz-select,
.iz-sel {
    width: 100%;
    padding: 9px 32px 9px 12px;
    border: 1px solid var(--iz-border-s);
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--iz-ink);
    background: var(--iz-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

/* Compact sel (non-100%) */
.iz-sel {
    width: auto;
    padding: 7px 30px 7px 10px;
    background-position: right 8px center;
}

.iz-form-select:focus,
.iz-select:focus,
.iz-sel:focus {
    border-color: var(--iz-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09);
}

.iz-form-select[multiple] {
    padding-right: 12px;
    background-image: none;
}

.iz-form-select.is-invalid,
.iz-select.is-invalid {
    border-color: var(--iz-red) !important;
}

.iz-invalid-msg {
    font-size: 12px;
    color: var(--iz-red);
    margin-top: 4px;
}

/* 2-column form row */
.iz-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.iz-form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

@media(max-width:640px) {

    .iz-form-row,
    .iz-form-row-3 {
        grid-template-columns: 1fr;
    }
}

.iz-form-sep {
    height: 1px;
    background: var(--iz-border);
    margin: 16px 0;
}

/* Settings-style horizontal row */
.iz-form-row-h {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--iz-border);
}

.iz-form-row-h:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.iz-form-row-h:first-child {
    padding-top: 0;
}

.iz-row-label {
    flex: 0 0 220px;
    min-width: 0;
}

.iz-row-control {
    flex: 1;
    min-width: 0;
}

@media(max-width:580px) {
    .iz-form-row-h {
        flex-direction: column;
        align-items: flex-start;
    }

    .iz-row-label {
        flex: none;
        width: 100%;
    }
}

/* Form actions bar */
.iz-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 8px;
}


/* ══════════════════════════════════════════════════════
   6. TOGGLE SWITCH
══════════════════════════════════════════════════════ */
.iz-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
}

.iz-toggle-row+.iz-toggle-row {
    border-top: 1px solid var(--iz-border);
}

.iz-toggle-info .iz-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--iz-ink);
}

.iz-toggle-info .iz-toggle-hint {
    font-size: 12px;
    color: var(--iz-ink-3);
}

.iz-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
}

.iz-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.iz-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--iz-border-s);
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s;
}

.iz-toggle-slider::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.iz-toggle input:checked+.iz-toggle-slider {
    background: var(--iz-red);
}

.iz-toggle input:checked+.iz-toggle-slider::before {
    transform: translateX(17px);
}


/* ══════════════════════════════════════════════════════
   7. RADIO PILLS
══════════════════════════════════════════════════════ */
.iz-radio-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.iz-radio-pill {
    position: relative;
}

.iz-radio-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.iz-radio-pill label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--iz-border-s);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--iz-ink-2);
    transition: all .15s;
    user-select: none;
}

.iz-radio-pill input:checked+label {
    background: var(--iz-red);
    border-color: var(--iz-red);
    color: #fff;
}

.iz-radio-pill label:hover {
    border-color: var(--iz-red);
    color: var(--iz-red);
}

.iz-radio-pill input:checked+label:hover {
    color: #fff;
}


/* ══════════════════════════════════════════════════════
   8. SECTION / CARD
══════════════════════════════════════════════════════ */
.iz-section,
.iz-table-card,
.iz-chart-card,
.iz-nav-wrap-card {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}

.iz-section-head {
    padding: 13px 18px;
    border-bottom: 1px solid var(--iz-border);
    background: var(--iz-cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.iz-section-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--iz-ink);
}

.iz-section-sub {
    font-size: 12px;
    color: var(--iz-ink-3);
    margin-top: 2px;
}

.iz-section-body {
    padding: 16px 18px;
}

/* Generic iz-card (form wrapper, settings) */
.iz-card {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}

.iz-card-head {
    padding: 14px 22px;
    border-bottom: 1px solid var(--iz-border);
    background: var(--iz-cream);
    display: flex;
    align-items: center;
    gap: 10px;
}

.iz-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--iz-red-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.iz-card-icon svg {
    width: 14px;
    height: 14px;
    color: var(--iz-red);
}

.iz-card-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--iz-ink);
}

.iz-card-body {
    padding: 20px 22px;
}


/* ══════════════════════════════════════════════════════
   9. MODAL
══════════════════════════════════════════════════════ */
.iz-modal {
    background: var(--iz-surface);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
    pointer-events: auto;
}

.iz-modal .modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    font-family: 'DM Sans', sans-serif;
}

.iz-modal .modal-header {
    border-bottom: 1px solid var(--iz-border);
    padding: 20px 24px 16px;
}

.iz-modal .modal-title {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--iz-ink);
}

.iz-modal .modal-body {
    padding: 20px 24px;
}

.iz-modal .modal-footer {
    border-top: 1px solid var(--iz-border);
    padding: 14px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.iz-modal .btn-close {
    opacity: .5;
}

.iz-modal .btn-close:hover {
    opacity: 1;
}

/* Confirm icon (inside modal) */
.iz-confirm-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--iz-red-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.iz-confirm-icon svg {
    width: 23px;
    height: 23px;
    color: var(--iz-red);
}


/* ══════════════════════════════════════════════════════
   10. ALERTS
══════════════════════════════════════════════════════ */
.iz-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    margin-bottom: 14px;
}

.iz-alert svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.iz-alert-danger {
    background: var(--iz-red-soft);
    border: 1px solid var(--iz-red-mid);
    color: var(--iz-red-dark);
}

.iz-alert-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.iz-alert-body {
    flex: 1;
}

.iz-alert-body strong {
    color: #78350f;
}

.iz-alert-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: var(--iz-r-sm);
    padding: 4px 10px;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
}

.iz-alert-action:hover {
    background: #fef3c7;
    color: #78350f;
}


/* ══════════════════════════════════════════════════════
   11. SEARCH BAR & TOOLBAR
══════════════════════════════════════════════════════ */
.iz-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.iz-search-wrap {
    position: relative;
}

.iz-search-wrap svg,
.iz-search-wrap .iz-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--iz-ink-3);
    pointer-events: none;
}

.iz-search-input,
.iz-search {
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--iz-border-s);
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--iz-ink);
    background: var(--iz-surface);
    outline: none;
    width: 260px;
    transition: border-color .15s, box-shadow .15s;
}

.iz-search-input:focus,
.iz-search:focus {
    border-color: var(--iz-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09);
}

.iz-search-input::placeholder,
.iz-search::placeholder {
    color: var(--iz-ink-3);
}


/* ══════════════════════════════════════════════════════
   12. FILTER BAR (pills + date picker)
══════════════════════════════════════════════════════ */
.iz-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.iz-filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--iz-border-s);
    background: var(--iz-surface);
    color: var(--iz-ink-2);
    transition: all .15s;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}

.iz-filter-pill:hover {
    border-color: var(--iz-red);
    color: var(--iz-red);
}

.iz-filter-pill.active {
    background: var(--iz-red);
    border-color: var(--iz-red);
    color: #fff;
}

.iz-date-input-wrap {
    position: relative;
}

.iz-date-input-wrap .iz-cal-icon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--iz-red);
    border-radius: 0 var(--iz-r-sm) var(--iz-r-sm) 0;
    color: #fff;
    pointer-events: none;
}

.iz-date-input {
    padding: 7px 44px 7px 12px;
    border: 1px solid var(--iz-border-s);
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--iz-ink);
    background: var(--iz-surface);
    outline: none;
    min-width: 210px;
}

.iz-date-input:focus {
    border-color: var(--iz-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09);
}


/* ══════════════════════════════════════════════════════
   13. NAVIGATION TABS
══════════════════════════════════════════════════════ */
/* Light nav (finance) */
.iz-nav-wrap {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    overflow: hidden;
}

.iz-nav-wrap .nav-link {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--iz-ink-3);
    border-radius: var(--iz-r-sm);
    padding: 8px 16px;
    white-space: nowrap;
    transition: all .15s;
}

.iz-nav-wrap .nav-link:hover {
    background: var(--iz-border);
    color: var(--iz-ink-2);
}

.iz-nav-wrap .nav-link.active {
    background: var(--iz-red);
    color: #fff !important;
    font-weight: 500;
}

.iz-nav-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: var(--iz-cream);
    border-bottom: 1px solid var(--iz-border);
    padding: 6px 8px;
    gap: 2px;
    overflow-x: auto;
}

.iz-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--iz-r-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--iz-ink-3);
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
    border: none;
    background: transparent;
}

.iz-nav-tab:hover {
    background: var(--iz-border);
    color: var(--iz-ink-2);
}

.iz-nav-tab.active {
    background: var(--iz-red);
    color: #fff;
    font-weight: 500;
}

.iz-nav-tab svg {
    width: 13px;
    height: 13px;
}

.iz-table-body {
    padding: 16px;
}

.iz-table-desc {
    font-size: 13px;
    color: var(--iz-ink-3);
    margin-bottom: 14px;
}

/* Dark nav (event show) */
.iz-nav-dark {
    background: var(--iz-black);
    border-radius: var(--iz-r);
    padding: 6px 10px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    overflow-x: auto;
}

.iz-nav-dark .nav-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(200, 195, 188, .75) !important;
    padding: 8px 14px !important;
    border-radius: var(--iz-r-sm) !important;
    border: none !important;
    transition: all .15s !important;
    white-space: nowrap;
}

.iz-nav-dark .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
}

.iz-nav-dark .nav-link.active {
    background: var(--iz-red) !important;
    color: #fff !important;
    font-weight: 500 !important;
}

/* Toggle tabs (pill style) */
.iz-tabs-wrap {
    background: var(--iz-cream);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    padding: 4px;
    display: inline-flex;
    gap: 3px;
}

.iz-tab {
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--iz-ink-3);
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.iz-tab:hover {
    color: var(--iz-ink);
}

.iz-tab.active {
    background: var(--iz-surface);
    color: var(--iz-ink);
    box-shadow: var(--iz-shadow);
}

.iz-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--iz-red);
    color: #fff;
}

.iz-tab:not(.active) .iz-tab-count {
    background: rgba(0, 0, 0, .12);
    color: var(--iz-ink-3);
}

/* Inner tab panes */
.iz-tab-pane {
    display: none;
}

.iz-tab-pane--active {
    display: block;
}

/* Inner tabs */
.iz-inner-tabs {
    display: flex;
    gap: 3px;
    background: var(--iz-cream);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    padding: 4px;
    width: fit-content;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.iz-inner-tab {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--iz-ink-3);
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
    user-select: none;
}

.iz-inner-tab.active,
.iz-inner-tab:focus {
    background: var(--iz-surface);
    color: var(--iz-ink);
    box-shadow: var(--iz-shadow);
    outline: none;
}

.iz-inner-tab:hover:not(.active) {
    color: var(--iz-ink);
}


/* ══════════════════════════════════════════════════════
   14. DATATABLES OVERRIDES
══════════════════════════════════════════════════════ */
.table.dt-responsive thead th,
#ajax-datatables-events thead th {
    background: var(--iz-black) !important;
    color: rgba(255, 255, 255, .85) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    padding: 11px 14px !important;
    border: none !important;
    white-space: nowrap;
}

.table.dt-responsive tbody td,
#ajax-datatables-events tbody td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--iz-border) !important;
    vertical-align: middle !important;
}

.table.dt-responsive tbody tr:last-child td,
#ajax-datatables-events tbody tr:last-child td {
    border-bottom: none !important;
}

.table.dt-responsive tbody tr,
#ajax-datatables-events tbody tr {
    transition: background .1s !important;
}

.table.dt-responsive tbody tr:hover,
#ajax-datatables-events tbody tr:hover {
    background: #faf8f5 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}

/* DT controls */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--iz-border-s) !important;
    border-radius: var(--iz-r-sm) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    outline: none !important;
    padding: 6px 10px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--iz-red) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--iz-red) !important;
    border-color: var(--iz-red) !important;
    color: #fff !important;
    border-radius: var(--iz-r-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--iz-red-soft) !important;
    border-color: var(--iz-red-soft) !important;
    color: var(--iz-red) !important;
    border-radius: var(--iz-r-sm) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    font-size: 13px !important;
    color: var(--iz-ink-3) !important;
}


/* ══════════════════════════════════════════════════════
   15. STATISTICS CARDS
══════════════════════════════════════════════════════ */
/* Grid containers */
.iz-stats-grid,
.iz-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.iz-stats-2 {
    grid-template-columns: 1fr 1fr;
}

.iz-stats-3 {
    grid-template-columns: repeat(3, 1fr);
}

.iz-stats-4 {
    grid-template-columns: repeat(4, 1fr);
}

.iz-stats-5 {
    grid-template-columns: repeat(5, 1fr);
}

.iz-stats-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Cells stretch to the tallest card in the row */
.iz-stats-grid,
.iz-stats,
.iz-stats-2,
.iz-stats-3,
.iz-stats-4,
.iz-stats-5,
.iz-stats-6 {
    align-items: stretch;
}

@media(max-width:1200px) {
    .iz-stats-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:992px) {

    .iz-stats-3,
    .iz-stats-4,
    .iz-stats-5,
    .iz-stats-6 {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:576px) {

    .iz-stats-grid,
    .iz-stats,
    .iz-stats-2,
    .iz-stats-3,
    .iz-stats-4,
    .iz-stats-5,
    .iz-stats-6 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ── Dashboard KPI row ── */
.iz-db-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.iz-db-kpi {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: var(--iz-shadow);
}

.iz-db-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--iz-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.iz-db-kpi-icon svg {
    width: 18px;
    height: 18px;
}

.iz-db-kpi-body {
    flex: 1;
    min-width: 0;
}

.iz-db-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--iz-ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.iz-db-kpi-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--iz-ink-1);
    line-height: 1.1;
}

.iz-db-kpi-sub {
    font-size: 11px;
    color: var(--iz-ink-3);
    margin-top: 4px;
}

.iz-db-kpi--wide {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .iz-db-kpi--wide {
        grid-column: span 1;
    }
}

/* ── Dashboard 2-col grid ── */
.iz-db-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 900px) {
    .iz-db-kpi-row {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .iz-db-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .iz-db-kpi-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Detail table (event details page) ── */
.iz-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.iz-detail-table tr {
    border-bottom: 1px solid var(--iz-border);
}

.iz-detail-table tr:last-child {
    border-bottom: none;
}

.iz-detail-table th {
    padding: 10px 16px;
    font-weight: 600;
    color: var(--iz-ink-2);
    white-space: nowrap;
    width: 1%;
    background: var(--iz-cream);
    vertical-align: top;
}

.iz-detail-table td {
    padding: 10px 16px;
    color: var(--iz-ink-3);
    vertical-align: middle;
}

/* ── Detail chip (pass options) ── */
.iz-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: var(--iz-cream);
    border: 1px solid var(--iz-border);
    color: var(--iz-ink-2);
    white-space: nowrap;
}

.iz-detail-chip--red {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Simple stat card */
.iz-stat,
.iz-stat-card {
    position: relative;
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    padding: 16px 18px;
    box-shadow: var(--iz-shadow);
    border-left: 3px solid var(--iz-border);
    transition: box-shadow .15s;
}

.iz-stat:hover,
.iz-stat-card:hover {
    box-shadow: var(--iz-shadow-md);
}

/* With flex layout (finance / pos) */
.iz-stat-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Color accents */
.iz-stat.s-red,
.iz-stat-card.s-red {
    border-left-color: var(--iz-red);
}

.iz-stat.s-black,
.iz-stat-card.s-black {
    border-left-color: var(--iz-black);
}

.iz-stat.s-amber,
.iz-stat-card.s-amber {
    border-left-color: #d97706;
}

.iz-stat.s-green,
.iz-stat-card.s-green {
    border-left-color: #16a34a;
}

.iz-stat.s-blue,
.iz-stat-card.s-blue {
    border-left-color: #2563eb;
}

.iz-stat.s-purple,
.iz-stat-card.s-purple {
    border-left-color: #7c3aed;
}

.iz-stat-info {
    flex: 1;
    min-width: 0;
}

.iz-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--iz-ink-3);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.iz-stat-val,
.iz-stat-count {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--iz-ink);
    line-height: 1;
}

.iz-stat-sub {
    font-size: 12px;
    color: var(--iz-ink-3);
    margin-top: 4px;
}

.iz-stat-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--iz-ink-3);
    margin-left: 2px;
}

.iz-stat-main {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.iz-stat-total {
    font-size: .85rem;
    color: var(--iz-ink-3);
    font-weight: 500;
}

/* Stat icon — always pinned top-right inside any iz-stat */
.iz-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    opacity: .8;
}

.iz-stat-icon svg {
    width: 18px;
    height: 18px;
}

.iz-stat .iz-stat-icon,
.iz-stat-card .iz-stat-icon {
    position: absolute;
    top: 14px;
    right: 14px;
}

.iz-stat:has(.iz-stat-icon) .iz-stat-info,
.iz-stat-card:has(.iz-stat-icon) .iz-stat-info {
    padding-right: 58px;
}

/* KPI variant — adds flex column layout for equal-height cards */
.iz-stat--kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

.iz-stat--kpi .iz-stat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Trend badges */
.iz-stat-trend {
    font-size: 12px;
    color: var(--iz-ink-3);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.iz-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.iz-trend-up {
    background: #dcfce7;
    color: #15803d;
}

.iz-trend-down {
    background: var(--iz-red-soft);
    color: var(--iz-red-dark);
}

/* Progress bar inside stat */
.iz-stat-bar {
    height: 4px;
    background: var(--iz-border);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 8px;
}

.iz-stat-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--iz-red);
    width: 0%;
    transition: width .8s cubic-bezier(.4, 0, .2, 1);
}

/* Chips on stat card */
.iz-stat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.iz-chip {
    background: var(--iz-cream);
    border: 1px solid var(--iz-border);
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.iz-chip-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--iz-red);
}

.iz-chip-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--iz-ink);
}

.iz-chip-tot {
    font-weight: 400;
    color: var(--iz-ink-3);
    font-size: 12px;
}


/* ══════════════════════════════════════════════════════
   16. PROGRESS BAR
══════════════════════════════════════════════════════ */
.iz-progress {
    height: 6px;
    background: var(--iz-border);
    border-radius: 99px;
    overflow: hidden;
    margin: 8px 0;
}

.iz-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--iz-red);
    transition: width .8s cubic-bezier(.4, 0, .2, 1);
}


/* ══════════════════════════════════════════════════════
   17. COUNTER ANIMATION
══════════════════════════════════════════════════════ */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.counter-value {
    animation: countUp .5s ease both;
}


/* ══════════════════════════════════════════════════════
   18. EMPTY STATE & PAGINATION
══════════════════════════════════════════════════════ */
.iz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 24px;
    text-align: center;
    color: var(--iz-ink-3);
}

.iz-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--iz-cream);
    border: 1px solid var(--iz-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.iz-empty-icon svg {
    width: 28px;
    height: 28px;
    color: var(--iz-ink-3);
    opacity: .5;
}

.iz-empty-title {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--iz-ink-2);
    margin-bottom: 6px;
}

.iz-empty-sub {
    font-size: 13px;
}

.iz-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.iz-pagination-info {
    font-size: 13px;
    color: var(--iz-ink-3);
}


/* ══════════════════════════════════════════════════════
   19. DROPDOWN ACTIONS MENU
══════════════════════════════════════════════════════ */
.iz-dropdown {
    position: relative;
    display: inline-block;
}

.iz-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    box-shadow: var(--iz-shadow-md);
    min-width: 170px;
    z-index: 1050;
    overflow: hidden;
    display: none;
}

.iz-dropdown-menu.show {
    display: block;
}

.iz-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--iz-ink-2);
    cursor: pointer;
    transition: background .1s;
    border: none;
    background: none;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
}

.iz-dropdown-item:hover {
    background: var(--iz-cream);
    color: var(--iz-ink);
}

.iz-dropdown-item svg {
    width: 13px;
    height: 13px;
    color: var(--iz-ink-3);
    flex-shrink: 0;
}

.iz-dropdown-item.danger {
    color: var(--iz-red);
}

.iz-dropdown-item.danger svg {
    color: var(--iz-red);
}

.iz-dropdown-sep {
    height: 1px;
    background: var(--iz-border);
    margin: 3px 0;
}


/* ══════════════════════════════════════════════════════
   20. PERSON / AGENT ROWS
══════════════════════════════════════════════════════ */
.iz-person-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.iz-person-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--iz-r-sm);
    text-decoration: none;
    color: var(--iz-ink-2);
    transition: background .15s;
}

.iz-person-list li a:hover,
.iz-person-list li a.active {
    background: var(--iz-red-soft);
}

.iz-person-list .p-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--iz-border);
}

.iz-person-list .p-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--iz-ink);
}

.iz-person-list .p-phone {
    font-size: 12px;
    color: var(--iz-ink-3);
}

.iz-agent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--iz-border);
    flex-shrink: 0;
}

.iz-agent-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--iz-ink);
    text-decoration: none;
}

.iz-agent-name:hover {
    color: var(--iz-red);
}

/* Avatar upload */
.iz-avatar-upload {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.iz-avatar-wrap {
    position: relative;
    display: inline-block;
}

.iz-avatar-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--iz-border);
}

.iz-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--iz-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #fff;
    transition: background .15s;
}

.iz-avatar-btn:hover {
    background: var(--iz-red-dark);
}

.iz-avatar-btn svg {
    width: 12px;
    height: 12px;
}

/* Info rows (sidebar) */
.iz-info-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--iz-border);
    font-size: 13px;
}

.iz-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.iz-info-row svg {
    width: 14px;
    height: 14px;
    color: var(--iz-red);
    flex-shrink: 0;
    margin-top: 2px;
}

.iz-info-key {
    color: var(--iz-ink-3);
    font-size: 12px;
}

.iz-info-val {
    color: var(--iz-ink);
    font-weight: 500;
    margin-top: 1px;
}

/* Person card */
.iz-person-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 0;
}

.iz-person-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--iz-border);
    margin-bottom: 10px;
}

.iz-person-name {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--iz-ink);
    margin-bottom: 4px;
}

.iz-person-sub {
    font-size: 12px;
    color: var(--iz-ink-3);
}

.iz-person-unassigned {
    color: var(--iz-ink-3);
    font-size: 13px;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.iz-person-unassigned svg {
    width: 36px;
    height: 36px;
    opacity: .3;
}


/* ══════════════════════════════════════════════════════
   21. DELIVERY — ORDERS CREATE
══════════════════════════════════════════════════════ */
/* Pass selector */
.iz-pass-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.iz-pass-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    cursor: pointer;
    transition: all .15s;
    background: var(--iz-surface);
}

.iz-pass-item:hover {
    border-color: var(--iz-red-mid);
    background: var(--iz-red-soft);
}

.iz-pass-item.iz-pass-selected {
    border-color: var(--iz-red);
    background: var(--iz-red-soft);
}

.iz-pass-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--iz-border-s);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.iz-pass-item.iz-pass-selected .iz-pass-checkbox {
    background: var(--iz-red);
    border-color: var(--iz-red);
}

.iz-pass-item.iz-pass-selected .iz-pass-checkbox::after {
    content: '✓';
    font-size: 10px;
    color: #fff;
    font-weight: 700;
}

.iz-pass-name {
    flex: 1;
    font-weight: 500;
    color: var(--iz-ink);
    font-size: 13px;
}

.iz-pass-price {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--iz-red);
    white-space: nowrap;
}

.iz-pass-qty-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.iz-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--iz-border-s);
    background: var(--iz-surface);
    color: var(--iz-ink-2);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.iz-qty-btn:hover {
    background: var(--iz-red);
    border-color: var(--iz-red);
    color: #fff;
}

.iz-qty-input {
    width: 40px;
    text-align: center;
    border: 1px solid var(--iz-border-s);
    border-radius: var(--iz-r-sm);
    padding: 3px 4px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--iz-ink);
    outline: none;
}

/* Amount display */
.iz-amount-display {
    background: var(--iz-cream);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.iz-amount-label {
    font-size: 12px;
    color: var(--iz-ink-3);
    font-weight: 500;
}

.iz-amount-val {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--iz-red);
}

.iz-amount-unit {
    font-size: 12px;
    color: var(--iz-ink-3);
    font-weight: 400;
    margin-left: 3px;
}

/* Zone dropdown */
.iz-zone-btn {
    width: 100%;
    padding: 9px 32px 9px 12px;
    border: 1px solid var(--iz-border-s);
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--iz-ink-3);
    background: var(--iz-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.iz-zone-btn.is-invalid {
    border-color: var(--iz-red) !important;
}

.iz-zone-btn.zone-selected {
    color: var(--iz-ink);
}

.iz-zone-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    box-shadow: var(--iz-shadow-md);
    display: none;
    overflow: hidden;
}

.iz-zone-dropdown.show {
    display: block;
}

.iz-zone-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--iz-border);
}

.iz-zone-search input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--iz-border-s);
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    color: var(--iz-ink);
}

.iz-zone-search input:focus {
    border-color: var(--iz-red);
}

.iz-zone-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

.iz-zone-item {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--iz-ink-2);
    transition: background .1s;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}

.iz-zone-item:hover {
    background: var(--iz-cream);
    color: var(--iz-ink);
}

.iz-zone-item svg {
    width: 12px;
    height: 12px;
    color: var(--iz-ink-3);
    flex-shrink: 0;
}

.iz-zone-item.iz-zone-add {
    color: var(--iz-red);
    border-top: 1px solid var(--iz-border);
    margin-top: 4px;
    padding-top: 10px;
}

.iz-zone-item.iz-zone-add svg {
    color: var(--iz-red);
}

.iz-zone-noresult {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--iz-ink-3);
    font-style: italic;
    display: none;
}

/* Horizontal step indicator (orders/create) */
.iz-steps-h {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    counter-reset: step;
}

.iz-step-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--iz-ink-3);
    flex: 1;
}

.iz-step-h.active {
    color: var(--iz-red);
}

.iz-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid var(--iz-border-s);
    color: var(--iz-ink-3);
}

.iz-step-h.active .iz-step-num {
    background: var(--iz-red);
    border-color: var(--iz-red);
    color: #fff;
}

.iz-step-h.done .iz-step-num {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.iz-step-label {
    white-space: nowrap;
}

.iz-step-line {
    flex: 1;
    height: 2px;
    background: var(--iz-border);
    margin: 0 6px;
    min-width: 20px;
}


/* ══════════════════════════════════════════════════════
   22. DELIVERY — ORDERS SHOW (tracking + table)
══════════════════════════════════════════════════════ */
.iz-order-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: flex-start;
}

@media(max-width:1100px) {
    .iz-order-layout {
        grid-template-columns: 1fr;
    }
}

.iz-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.iz-order-table thead th {
    background: var(--iz-black);
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 10px 14px;
    border: none;
    white-space: nowrap;
    text-align: left;
}

.iz-order-table thead th:last-child {
    text-align: right;
}

.iz-order-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--iz-border);
    vertical-align: middle;
    color: var(--iz-ink-2);
}

.iz-order-table tbody tr:last-child td {
    border-bottom: none;
}

.iz-order-table tfoot td,
.iz-order-table tfoot th {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--iz-ink-2);
    border-top: 1px solid var(--iz-border);
}

.iz-order-table tfoot tr:last-child td,
.iz-order-table tfoot tr:last-child th {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--iz-ink);
}

.iz-order-table .text-right {
    text-align: right;
}

/* Tracking accordion */
.iz-tracking {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.iz-tracking-item {
    position: relative;
}

.iz-tracking-item:not(:last-child) .iz-tracking-body::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--iz-border);
    z-index: 0;
}

.iz-tracking-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    position: relative;
}

.iz-tracking-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
    position: relative;
}

.iz-tracking-info {
    flex: 1;
    padding-top: 6px;
}

.iz-tracking-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--iz-ink);
    margin-bottom: 1px;
}

.iz-tracking-date {
    font-size: 12px;
    color: var(--iz-ink-3);
}

.iz-tracking-content {
    padding: 0 0 12px 50px;
    font-size: 13px;
    color: var(--iz-ink-2);
    line-height: 1.7;
}

.iz-tracking-comment-title {
    font-weight: 600;
    color: var(--iz-ink);
    margin-bottom: 2px;
}

.iz-tracking-comment-sub {
    font-size: 12px;
    color: var(--iz-ink-3);
    margin-bottom: 4px;
}


/* ══════════════════════════════════════════════════════
   23. DELIVERY — INVOICE
══════════════════════════════════════════════════════ */
.iz-print-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.iz-invoice {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow-md);
    max-width: 860px;
    margin: 0 auto;
    overflow: hidden;
}

.iz-invoice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--iz-border);
    flex-wrap: wrap;
    gap: 20px;
}

.iz-invoice-logo {
    height: 28px;
    margin-bottom: 16px;
}

.iz-invoice-address {
    font-size: 13px;
    color: var(--iz-ink-3);
    line-height: 1.7;
}

.iz-invoice-address strong {
    color: var(--iz-ink-2);
}

.iz-invoice-contact {
    text-align: right;
    font-size: 13px;
    color: var(--iz-ink-3);
    line-height: 1.8;
}

.iz-invoice-contact a {
    color: var(--iz-red);
    text-decoration: none;
}

.iz-invoice-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--iz-border);
}

@media(max-width:640px) {
    .iz-invoice-meta {
        grid-template-columns: 1fr 1fr;
    }
}

.iz-meta-cell {
    padding: 18px 24px;
    border-right: 1px solid var(--iz-border);
}

.iz-meta-cell:last-child {
    border-right: none;
}

.iz-meta-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--iz-ink-3);
    margin-bottom: 5px;
}

.iz-meta-val {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--iz-ink);
}

.iz-meta-sub {
    font-size: 12px;
    color: var(--iz-ink-3);
    margin-top: 2px;
}

.iz-invoice-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--iz-border);
}

@media(max-width:560px) {
    .iz-invoice-addresses {
        grid-template-columns: 1fr;
    }
}

.iz-address-cell {
    padding: 20px 28px;
}

.iz-address-cell:first-child {
    border-right: 1px solid var(--iz-border);
}

.iz-address-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iz-ink-3);
    margin-bottom: 8px;
}

.iz-address-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--iz-ink);
    margin-bottom: 3px;
}

.iz-address-line {
    font-size: 13px;
    color: var(--iz-ink-3);
    line-height: 1.6;
}

.iz-invoice-body {
    padding: 24px 28px;
}

.iz-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.iz-items-table thead th {
    background: var(--iz-black);
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 14px;
    border: none;
}

.iz-items-table thead th:last-child {
    text-align: right;
}

.iz-items-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--iz-border);
    vertical-align: middle;
    color: var(--iz-ink-2);
}

.iz-items-table tbody tr:last-child td {
    border-bottom: none;
}

.iz-item-name {
    font-weight: 600;
    color: var(--iz-ink);
    margin-bottom: 2px;
}

.iz-item-sub {
    font-size: 12px;
    color: var(--iz-ink-3);
}

.iz-items-table .text-right {
    text-align: right;
}

.iz-invoice-totals {
    border-top: 2px solid var(--iz-border);
    margin-top: 4px;
    padding-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.iz-totals-table {
    width: 260px;
    border-collapse: collapse;
    font-size: 13px;
}

.iz-totals-table td,
.iz-totals-table th {
    padding: 6px 0;
    color: var(--iz-ink-2);
    vertical-align: middle;
}

.iz-totals-table td:last-child,
.iz-totals-table th:last-child {
    text-align: right;
}

.iz-totals-table .iz-grand {
    border-top: 1px solid var(--iz-border);
    padding-top: 10px;
}

.iz-totals-table .iz-grand th {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--iz-ink);
    padding-top: 10px;
}

.iz-totals-table .iz-grand td {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--iz-red);
    padding-top: 10px;
}

.iz-payment-note {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--iz-cream);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    color: var(--iz-ink-3);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.iz-payment-note svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--iz-red);
    margin-top: 1px;
}

.iz-invoice-footer {
    padding: 18px 28px;
    border-top: 1px solid var(--iz-border);
    background: var(--iz-cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.iz-invoice-footer-brand {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--iz-ink-2);
}

.iz-invoice-footer-brand em {
    color: var(--iz-red);
    font-style: normal;
}

@media print {
    body {
        background: #fff;
    }

    .iz-print-bar {
        display: none !important;
    }

    .iz-invoice {
        box-shadow: none;
        border: none;
        max-width: 100%;
    }

    @page {
        margin: 1cm;
    }
}


/* ══════════════════════════════════════════════════════
   24. DELIVERY — POINT OF SALE
══════════════════════════════════════════════════════ */
.iz-pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.iz-pos-card {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}

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

.iz-pos-card-accent {
    height: 4px;
    background: var(--iz-red);
    flex-shrink: 0;
}

.iz-pos-card-body {
    padding: 20px 20px 16px;
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.iz-pos-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--iz-red-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.iz-pos-icon svg {
    width: 20px;
    height: 20px;
    color: var(--iz-red);
}

.iz-pos-name {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--iz-ink);
    margin-bottom: 4px;
    line-height: 1.3;
}

.iz-pos-location {
    font-size: 12px;
    color: var(--iz-ink-3);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.iz-pos-location svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.iz-pos-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.iz-pos-stat {
    padding: 10px 12px;
    text-align: center;
}

.iz-pos-stat:first-child {
    border-right: 1px solid var(--iz-border);
}

.iz-pos-stat-val {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--iz-ink);
    line-height: 1;
    margin-bottom: 3px;
}

.iz-pos-stat-label {
    font-size: 11px;
    color: var(--iz-ink-3);
}

/* POS show layout */
.iz-show-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: flex-start;
}

@media(max-width:992px) {
    .iz-show-layout {
        grid-template-columns: 1fr;
    }
}

.iz-pos-info-card {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.iz-pos-info-banner {
    height: 6px;
    background: var(--iz-red);
}

.iz-pos-info-body {
    padding: 22px 20px;
}

.iz-pos-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--iz-r-sm);
    background: var(--iz-red-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.iz-pos-avatar svg {
    width: 24px;
    height: 24px;
    color: var(--iz-red);
}

.iz-pos-addr {
    font-size: 13px;
    color: var(--iz-ink-3);
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 18px;
}

.iz-pos-addr svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.iz-pos-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════
   25. FINANCE
══════════════════════════════════════════════════════ */
.iz-summary-wrap {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.iz-summary-head {
    padding: 13px 18px;
    border-bottom: 1px solid var(--iz-border);
    background: var(--iz-cream);
    display: flex;
    align-items: center;
    gap: 8px;
}

.iz-summary-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--iz-ink);
}

.iz-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
}

.iz-summary-table thead th {
    background: var(--iz-black);
    color: rgba(255, 255, 255, .82);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 12px;
    border: none;
    white-space: nowrap;
}

.iz-summary-table tbody tr {
    border-bottom: 1px solid var(--iz-border);
}

.iz-summary-table tbody tr:last-child {
    border-bottom: none;
}

.iz-summary-table tbody th {
    text-align: left;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--iz-ink-2);
    background: var(--iz-cream);
    white-space: nowrap;
}

.iz-summary-table tbody td {
    padding: 9px 12px;
    color: var(--iz-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.iz-summary-table .iz-total-row th,
.iz-summary-table .iz-total-row td {
    background: var(--iz-red);
    color: #fff;
}

/* Chart */
.iz-chart-section {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
}

.iz-chart-card {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    overflow: hidden;
}

.iz-chart-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--iz-border);
    background: var(--iz-cream);
}

.iz-chart-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--iz-ink);
}

.iz-chart-body {
    padding: 16px 18px;
}


/* ══════════════════════════════════════════════════════
   26. SETTINGS
══════════════════════════════════════════════════════ */
.iz-fieldset {
    padding: 0;
    border: none;
    margin: 0;
}

.iz-fieldset+.iz-fieldset {
    border-top: 1px solid var(--iz-border);
}

.iz-fieldset-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px 14px;
    background: var(--iz-cream);
    border-bottom: 1px solid var(--iz-border);
}

.iz-fieldset-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--iz-red-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.iz-fieldset-icon svg {
    width: 15px;
    height: 15px;
    color: var(--iz-red);
}

.iz-fieldset-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--iz-ink);
    margin: 0;
}

.iz-fieldset-body {
    padding: 20px 24px;
}

.iz-submit-bar {
    padding: 16px 24px;
    border-top: 1px solid var(--iz-border);
    background: var(--iz-cream);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Operator badges */
.iz-op-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.iz-op-orange {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.iz-op-mtn {
    background: #fefce8;
    color: #ca8a04;
    border: 1px solid #fef08a;
}

.iz-op-moov {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}


/* ══════════════════════════════════════════════════════
   27. EVENTS — INDEX
══════════════════════════════════════════════════════ */
.iz-event-date {
    text-align: center;
    min-width: 32px;
}

.iz-event-date .m {
    font-size: 10px;
    font-weight: 600;
    color: var(--iz-red);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.iz-event-date .d {
    font-size: 17px;
    font-weight: 700;
    color: var(--iz-ink);
    line-height: 1.1;
}

.iz-event-img {
    width: 42px;
    height: 42px;
    border-radius: var(--iz-r-sm);
    object-fit: cover;
    background: var(--iz-cream);
    flex-shrink: 0;
}

.iz-event-name {
    font-weight: 500;
    color: var(--iz-ink);
    font-size: 13px;
    line-height: 1.3;
}

.iz-event-meta {
    font-size: 12px;
    color: var(--iz-ink-3);
}

/* Package selection (create event modal) */
.iz-pkg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iz-pkg-item {
    position: relative;
}

.iz-pkg-item input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.iz-pkg-label {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: var(--iz-r-sm);
    border: 1.5px solid var(--iz-border);
    cursor: pointer;
    transition: all .15s;
}

.iz-pkg-label:hover {
    border-color: var(--iz-red-mid);
}

.iz-pkg-item input:checked+.iz-pkg-label {
    border-color: var(--iz-red);
    background: var(--iz-red-soft);
}

.iz-pkg-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--iz-ink);
}

.iz-pkg-desc {
    font-size: 12px;
    color: var(--iz-ink-3);
    margin-top: 2px;
}

.iz-pkg-item input:checked+.iz-pkg-label .iz-pkg-name {
    color: var(--iz-red-dark);
}


/* ══════════════════════════════════════════════════════
   28. EVENTS — SHOW (header + nav)
══════════════════════════════════════════════════════ */
.iz-event-header {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    box-shadow: var(--iz-shadow);
    margin-bottom: 20px;
}

.iz-event-cover {
    height: 120px;
    background: var(--iz-black);
    position: relative;
    overflow: hidden;
    border-radius: var(--iz-r) var(--iz-r) 0 0;
}

.iz-event-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
}

.iz-event-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(15, 14, 14, .7));
}

.iz-event-meta-bar {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.iz-event-org {
    display: flex;
    align-items: center;
    gap: 10px;
}

.iz-event-org-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--iz-border);
}

.iz-event-org-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--iz-ink-2);
}

.iz-event-org-email {
    font-size: 12px;
    color: var(--iz-ink-3);
}

.iz-event-title {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--iz-ink);
    text-align: center;
    padding: 0 22px 4px;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.iz-test-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .04em;
}

/* Event show action button */
.iz-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--iz-r-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--iz-red);
    background: var(--iz-red);
    color: #fff;
    transition: all .15s;
}

.iz-actions-btn:hover {
    background: var(--iz-red-dark);
    border-color: var(--iz-red-dark);
    color: #fff;
}

.iz-actions-menu {
    border: 1px solid var(--iz-border) !important;
    border-radius: var(--iz-r-sm) !important;
    box-shadow: var(--iz-shadow-md) !important;
    padding: 4px !important;
    min-width: 200px;
}

.iz-actions-menu .dropdown-item {
    border-radius: 4px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    color: var(--iz-ink-2) !important;
    transition: background .1s !important;
}

.iz-actions-menu .dropdown-item:hover {
    background: var(--iz-cream) !important;
    color: var(--iz-ink) !important;
}

.iz-actions-menu .dropdown-divider {
    margin: 3px 0 !important;
    border-color: var(--iz-border) !important;
}

@media(max-width:576px) {
    .iz-event-meta-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .iz-stat-card {
        min-width: 100%;
        flex-basis: 100%;
    }
}


/* ══════════════════════════════════════════════════════
   29. EVENTS — CREATE / EDIT (wizard)
══════════════════════════════════════════════════════ */
.iz-wizard-wrap {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.iz-wizard-aside {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
}

.iz-wizard-body {
    flex: 1;
    min-width: 0;
}

.iz-wizard-event-name {
    text-transform: uppercase;
    margin: 12px 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--iz-ink-1);
    line-height: 1.3;
    word-break: break-word;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--iz-border);
}

@media(max-width:768px) {
    .iz-wizard-wrap {
        flex-direction: column;
    }

    .iz-wizard-aside {
        width: 100%;
        position: static;
    }
}

.iz-back {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--iz-ink-3);
    text-decoration: none;
    margin-bottom: 18px;
    transition: color .15s;
}

.iz-back:hover {
    color: var(--iz-red);
}

.iz-back svg {
    width: 14px;
    height: 14px;
}

/* Vertical wizard steps */
.iz-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.iz-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--iz-r-sm);
    font-size: 13px;
    font-weight: 400;
    color: var(--iz-ink-3);
    text-decoration: none;
    transition: all .15s;
}

.iz-step:hover:not(.iz-step--disabled) {
    background: var(--iz-border);
    color: var(--iz-ink-2);
}

.iz-step.iz-step--active {
    background: var(--iz-red-soft);
    color: var(--iz-red);
    font-weight: 500;
}

.iz-step.iz-step--done {
    color: #16a34a;
}

.iz-step.iz-step--disabled {
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

.iz-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.iz-step--active .iz-step-dot {
    background: var(--iz-red);
    border-color: var(--iz-red);
    color: #fff;
}

.iz-step--done .iz-step-dot {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
    font-size: 9px;
}

.iz-step-divider {
    height: 1px;
    background: var(--iz-border);
    margin: 12px 0;
}

.iz-aside-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.iz-aside-actions .iz-btn {
    width: 100%;
    justify-content: center;
    font-size: 13px;
}

/* Attendance mode pills (hybrid pass form) */
.iz-attendance-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 14px;
    border: 1.5px solid rgba(0, 0, 0, .12);
    border-radius: 100px;
    font-size: .83rem;
    font-weight: 500;
    color: var(--iz-ink-2);
    transition: border-color .15s, background .15s, color .15s;
    -webkit-user-select: none;
    user-select: none;
}
.iz-attendance-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.iz-attendance-pill:has(input:checked) {
    border-color: #6366f1;
    background: rgba(99, 102, 241, .08);
    color: #6366f1;
}

/* Pass card (event form) */
.iz-pass-card {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    padding: 20px 22px;
    margin-bottom: 16px;
    position: relative;
}

.iz-pass-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.iz-pass-label {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--iz-ink-3);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.iz-pass-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--iz-border);
}


@media (max-width: 900px) {
    .ticket-layout {
        flex-direction: column !important;
    }

    .ticket-preview-col {
        width: 100% !important;
        position: static !important;
        order: -1;
    }
}

.iz-pass-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.iz-pass-section-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--iz-ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.iz-pass-section-title svg {
    width: 14px;
    height: 14px;
    color: var(--iz-ink-3);
}

.iz-pass-section-body {
    margin-top: 12px;
}

/* Date block (event form) */
.iz-date-block {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r);
    padding: 20px 22px;
    margin-bottom: 16px;
}

.iz-date-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.iz-date-block-num {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--iz-ink-3);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Day pills */
.iz-day-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.iz-day-pills input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.iz-day-pill-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--iz-border-s);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--iz-ink-2);
    transition: all .15s;
    user-select: none;
}

.iz-day-pills input:checked+.iz-day-pill-label {
    background: var(--iz-red);
    border-color: var(--iz-red);
    color: #fff;
}

.iz-day-pill-label:hover {
    border-color: var(--iz-red);
    color: var(--iz-red);
}

/* Image upload */
.iz-img-area {
    border: 2px dashed var(--iz-border-s);
    border-radius: var(--iz-r);
    background: var(--iz-cream);
    height: 300px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
}

.iz-img-area:hover {
    border-color: var(--iz-red);
    background: var(--iz-red-soft);
}

.iz-img-area.display-image {
    background-size: cover;
    background-position: center;
}

.iz-img-area.display-image .iz-img-placeholder,
.iz-img-area.display-image #upload-image-btn,
.iz-img-area.display-image .iz-img-hint {
    opacity: 0;
    pointer-events: none;
}

.iz-img-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.iz-img-thumb {
    width: 78px;
    height: 58px;
    border-radius: var(--iz-r-sm);
    border: 2px solid transparent;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: border-color .15s;
    position: relative;
    overflow: hidden;
}

.iz-img-thumb.focus-click {
    border-color: var(--iz-red);
}

.iz-thumb-add {
    width: 78px;
    height: 58px;
    border-radius: var(--iz-r-sm);
    border: 2px dashed var(--iz-border-s);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--iz-ink-3);
    transition: all .15s;
}

.iz-thumb-add:hover,
.iz-thumb-add.focus-click {
    border-color: var(--iz-red);
    color: var(--iz-red);
}

.iz-img-cover-label {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    display: none;
}

.iz-img-hover {
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.iz-img-area.display-image .iz-img-hover,
.iz-img-thumb .iz-img-hover {
    display: flex;
    opacity: 0;
    transition: opacity .15s;
}

.iz-img-area:hover .iz-img-hover,
.iz-img-thumb:hover .iz-img-hover {
    opacity: 1;
}

/* Payment method cards */
.iz-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.iz-payment-card {
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}

.iz-payment-card.active {
    border-color: var(--iz-red);
    background: var(--iz-red-soft);
}

.iz-payment-card.active::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 10px;
    font-weight: 700;
    color: var(--iz-red);
}

.iz-payment-card.disabled {
    opacity: .45;
    cursor: default;
}

.iz-payment-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--iz-ink-2);
}

/* Custom form builder */
.iz-field-group {
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: var(--iz-r-sm);
    padding: 13px 15px;
    margin-bottom: 10px;
}

.iz-field-group-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.iz-field-group-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--iz-ink-2);
    flex: 1;
}

.iz-field-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--iz-ink-3);
    text-align: center;
    border: 2px dashed var(--iz-border);
    border-radius: var(--iz-r);
    background: var(--iz-cream);
}

.iz-field-empty svg {
    width: 36px;
    height: 36px;
    opacity: .35;
    margin-bottom: 10px;
}

/* FilePond overrides */
.filepond--root {
    font-family: 'DM Sans', sans-serif;
}

.filepond--panel-root {
    background: var(--iz-cream);
    border: 2px dashed var(--iz-border-s);
    border-radius: var(--iz-r);
}

.filepond--drop-label {
    color: var(--iz-ink-3);
    font-size: 13px;
}

.filepond--label-action {
    color: var(--iz-red);
    text-decoration: underline;
}

/* Bootstrap overrides (create-edit) */
.form-control:focus,
.form-select:focus {
    border-color: var(--iz-red) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09) !important;
}

.form-check-input:checked {
    background-color: var(--iz-red) !important;
    border-color: var(--iz-red) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .09) !important;
    border-color: var(--iz-red-mid) !important;
}

.btn-check:checked+.btn-outline-secondary {
    background-color: var(--iz-red) !important;
    border-color: var(--iz-red) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    border-color: var(--iz-border-s) !important;
    color: var(--iz-ink-2) !important;
}

.btn-outline-secondary:hover {
    background: var(--iz-red-soft) !important;
    border-color: var(--iz-red-mid) !important;
    color: var(--iz-red) !important;
}


/* ══════════════════════════════════════════════════════
   30. MISSING BUTTON VARIANTS
══════════════════════════════════════════════════════ */
.iz-btn-outline {
    background: transparent;
    color: var(--iz-ink-2);
    border-color: var(--iz-border-s);
}

.iz-btn-outline:hover {
    background: var(--iz-cream);
    border-color: var(--iz-ink-3);
    color: var(--iz-ink);
}

.iz-btn-danger {
    background: var(--iz-red);
    color: #fff;
    border-color: var(--iz-red);
}

.iz-btn-danger:hover {
    background: var(--iz-red-dark);
    border-color: var(--iz-red-dark);
    color: #fff;
}

.iz-btn-warning {
    background: #d97706;
    color: #fff;
    border-color: #d97706;
}

.iz-btn-warning:hover {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}

/* Full-width button */
.iz-btn-block {
    width: 100%;
    justify-content: center;
}

/* Loading state */
.iz-btn.loading {
    opacity: .7;
    pointer-events: none;
    cursor: wait;
}


/* ══════════════════════════════════════════════════════
   31. MISSING BADGE ALIASES
══════════════════════════════════════════════════════ */
/* iz-badge-ok / iz-badge-bad — used by IzTable JS renderers */
.iz-badge-ok {
    background: #dcfce7;
    color: #15803d;
}

.iz-badge-ok::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #16a34a;
}

.iz-badge-bad {
    background: var(--iz-red-soft);
    color: var(--iz-red-dark);
}

.iz-badge-bad::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--iz-red);
}

.iz-badge-neutral {
    background: #f3f1ec;
    color: var(--iz-ink-3);
}

.iz-badge-neutral::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--iz-ink-3);
}

.iz-badge-ok,
.iz-badge-bad,
.iz-badge-neutral {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
}


/* ══════════════════════════════════════════════════════
   32. STANDALONE MODAL COMPONENTS (iz-modal-*)
   Used when modal HTML doesn't rely on Bootstrap's
   .modal-header / .modal-body structure
══════════════════════════════════════════════════════ */
.iz-modal-header,
.iz-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--iz-border);
    background: var(--iz-cream);
}

.iz-modal-title {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--iz-ink);
    margin: 0;
}

.iz-modal-body {
    padding: 20px 24px;
}

.iz-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--iz-border);
    background: var(--iz-cream);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.iz-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--iz-r-sm);
    border: none;
    background: transparent;
    color: var(--iz-ink-3);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    padding: 0;
}

.iz-modal-close:hover {
    background: var(--iz-red-soft);
    color: var(--iz-red);
}

.iz-modal-close svg {
    width: 16px;
    height: 16px;
}

/* Confirm icon variants */
.iz-confirm-icon-danger {
    background: var(--iz-red-soft);
    color: var(--iz-red);
}

.iz-confirm-icon-danger i,
.iz-confirm-icon-danger svg {
    color: var(--iz-red);
}

.iz-confirm-icon-success {
    background: #dcfce7;
    color: #15803d;
}

.iz-confirm-icon-success i,
.iz-confirm-icon-success svg {
    color: #15803d;
}

.iz-confirm-icon-warning {
    background: #fef9c3;
    color: #d97706;
}

.iz-confirm-icon-warning i,
.iz-confirm-icon-warning svg {
    color: #d97706;
}

/* Modal scroll body */
.iz-modal-body-scroll {
    max-height: 60vh;
    overflow-y: auto;
}


/* ══════════════════════════════════════════════════════
   33. TOOLBAR LEFT / RIGHT SLOTS
══════════════════════════════════════════════════════ */
.iz-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.iz-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════
   34. TABLE SCROLL WRAPPER (mobile horizontal scroll)
══════════════════════════════════════════════════════ */
.iz-table-scroll {
    overflow-x: auto;
}

.iz-table-scroll table {
    min-width: 600px;
}


/* ══════════════════════════════════════════════════════
   35. LOADER / SKELETON
══════════════════════════════════════════════════════ */
@keyframes iz-shimmer {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

.iz-skeleton {
    background: linear-gradient(90deg, var(--iz-border) 25%, var(--iz-cream) 50%, var(--iz-border) 75%);
    background-size: 1200px 100%;
    animation: iz-shimmer 1.5s infinite linear;
    border-radius: var(--iz-r-sm);
}

.iz-skeleton-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 99px;
}

.iz-skeleton-line:last-child {
    margin-bottom: 0;
    width: 70%;
}

.iz-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--iz-border);
    border-top-color: var(--iz-red);
    border-radius: 50%;
    animation: iz-spin .7s linear infinite;
}

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


/* ══════════════════════════════════════════════════════
   36. RESPONSIVE — GLOBAL BREAKPOINTS
   xs < 480 | sm < 640 | md < 768 | lg < 992 | xl < 1200
══════════════════════════════════════════════════════ */

/* ── md : Tablets ─────────────────────────────────── */
@media (max-width: 768px) {

    /* Page header */
    .iz-page-title {
        font-size: 18px;
    }

    /* Toolbar: stack left and right */
    .iz-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .iz-toolbar-left,
    .iz-toolbar-right {
        width: 100%;
    }

    /* Nav tabs: allow horizontal scroll, prevent wrapping */
    .iz-nav-header {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }

    .iz-nav-header::-webkit-scrollbar {
        display: none;
    }

    .iz-nav-dark {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .iz-nav-dark::-webkit-scrollbar {
        display: none;
    }

    /* Inner tabs: scroll on mobile */
    .iz-inner-tabs {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .iz-inner-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Tabs wrap */
    .iz-tabs-wrap {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .iz-tabs-wrap::-webkit-scrollbar {
        display: none;
    }

    /* Filter bar: allow wrap */
    .iz-filter-bar {
        gap: 6px;
    }

    .iz-date-input {
        min-width: 0;
        width: 100%;
    }

    .iz-date-input-wrap {
        width: 100%;
    }

    /* Section body */
    .iz-section-body {
        padding: 12px 14px;
    }

    .iz-card-body {
        padding: 16px 16px;
    }

    .iz-fieldset-body {
        padding: 16px 16px;
    }

    .iz-table-body {
        padding: 10px 12px;
    }

    /* Invoice */
    .iz-invoice-header {
        padding: 20px 18px 18px;
    }

    .iz-invoice-body {
        padding: 16px 18px;
    }

    .iz-invoice-contact {
        text-align: left;
    }

    /* POS show layout handled separately */

    /* Wizard */
    .iz-wizard-wrap {
        flex-direction: column;
    }

    .iz-wizard-aside {
        width: 100%;
        position: static;
    }

    /* Steps horizontal: compress */
    .iz-step-label {
        display: none;
    }

    .iz-steps-h {
        gap: 0;
    }
}

/* ── sm : Large phones ────────────────────────────── */
@media (max-width: 640px) {

    /* Page title */
    .iz-page-title {
        font-size: 17px;
    }

    .iz-pane-title {
        font-size: 17px;
    }

    /* Form rows collapse to 1 column */
    .iz-form-row,
    .iz-form-row-3 {
        grid-template-columns: 1fr;
    }

    /* Stats grid: 2 columns */
    .iz-stats-grid,
    .iz-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .iz-stats-3,
    .iz-stats-4 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Stat card: make number slightly smaller */
    .iz-stat-val,
    .iz-stat-count {
        font-size: 20px;
    }

    /* Toolbar: search full width */
    .iz-search-input,
    .iz-search {
        width: 100%;
    }

    /* Card head: stack */
    .iz-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Order layout sidebar stacks */
    .iz-order-layout {
        grid-template-columns: 1fr;
    }

    /* Show layout */
    .iz-show-layout {
        grid-template-columns: 1fr;
    }

    .iz-pos-info-card {
        position: static;
    }

    /* Invoice meta: 2 columns */
    .iz-invoice-meta {
        grid-template-columns: 1fr 1fr;
    }

    .iz-invoice-addresses {
        grid-template-columns: 1fr;
    }

    .iz-invoice-totals {
        justify-content: flex-start;
    }

    .iz-totals-table {
        width: 100%;
    }

    /* Modal: full-width on small screens */
    .modal-dialog .iz-modal,
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .iz-modal-footer {
        flex-direction: column-reverse;
    }

    .iz-modal-footer .iz-btn {
        width: 100%;
        justify-content: center;
    }

    /* Finance summary: horizontal scroll */
    .iz-summary-wrap {
        overflow-x: auto;
    }

    /* Form horizontal row: stack */
    .iz-form-row-h {
        flex-direction: column;
        align-items: flex-start;
    }

    .iz-row-label {
        flex: none;
        width: 100%;
    }
}

/* ── xs : Small phones ────────────────────────────── */
@media (max-width: 480px) {

    /* Stats: single column */
    .iz-stats-grid,
    .iz-stats,
    .iz-stats-2,
    .iz-stats-3,
    .iz-stats-4 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Event header meta bar */
    .iz-event-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .iz-event-title {
        font-size: 16px;
    }

    /* Card padding */
    .iz-section-body {
        padding: 10px 12px;
    }

    .iz-card-body {
        padding: 12px 14px;
    }

    /* POS grid: single column */
    .iz-pos-grid {
        grid-template-columns: 1fr;
    }

    /* Pass item: wrap qty below name */
    .iz-pass-item {
        flex-wrap: wrap;
    }

    .iz-pass-qty-wrap {
        margin-left: auto;
    }

    /* Stat chips: single row scroll */
    .iz-stat-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .iz-stat-chips::-webkit-scrollbar {
        display: none;
    }

    /* Submit bar: stack */
    .iz-submit-bar {
        flex-direction: column-reverse;
    }

    .iz-submit-bar .iz-btn {
        width: 100%;
        justify-content: center;
    }

    /* Form actions: stack */
    .iz-form-actions {
        flex-direction: column;
    }

    .iz-form-actions .iz-btn {
        width: 100%;
        justify-content: center;
    }

    /* Print bar */
    .iz-print-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Aside actions */
    .iz-aside-actions .iz-btn {
        font-size: 12px;
        padding: 7px 14px;
    }

    /* Step labels show again at xs (collapsed text not needed) */
    .iz-step-label {
        display: block;
        font-size: 11px;
    }

    /* Wizard horizontal steps: hide label to save space */
    .iz-steps-h .iz-step-label {
        display: none;
    }
}


/* ══════════════════════════════════════════════════════
   37. TOUCH / MOBILE UX IMPROVEMENTS
══════════════════════════════════════════════════════ */
/* Larger tap targets on mobile */
@media (max-width: 768px) {
    .iz-btn {
        min-height: 40px;
    }

    .iz-nav-tab {
        padding: 10px 14px;
        min-height: 40px;
    }

    .iz-inner-tab {
        padding: 8px 14px;
        min-height: 38px;
    }

    .iz-dropdown-item {
        padding: 11px 14px;
    }

    /* Prevent double-tap zoom on buttons/labels */
    .iz-btn,
    .iz-radio-pill label,
    .iz-filter-pill,
    .iz-toggle {
        touch-action: manipulation;
    }

    /* Tables: horizontal scroll inside card */
    .iz-table-card {
        overflow-x: auto;
    }

    .iz-summary-wrap {
        overflow-x: auto;
    }
}

/* Sticky mobile toolbar (pinned to bottom) — opt-in with .iz-toolbar-sticky */
@media (max-width: 640px) {
    .iz-toolbar-sticky {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: var(--iz-surface);
        border-top: 1px solid var(--iz-border);
        padding: 10px 16px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .iz-toolbar-sticky+* {
        padding-bottom: 72px;
    }
}


/* ══════════════════════════════════════════════════════
   38. UTILITY CLASSES
══════════════════════════════════════════════════════ */
.iz-text-red {
    color: var(--iz-red) !important;
}

.iz-text-green {
    color: #16a34a !important;
}

.iz-text-muted {
    color: var(--iz-ink-3) !important;
}

.iz-text-ink {
    color: var(--iz-ink) !important;
}

.iz-text-center {
    text-align: center !important;
}

.iz-text-right {
    text-align: right !important;
}

.iz-text-sm {
    font-size: 12px !important;
}

.iz-text-xs {
    font-size: 11px !important;
}

.iz-fw-500 {
    font-weight: 500 !important;
}

.iz-fw-600 {
    font-weight: 600 !important;
}

.iz-fw-700 {
    font-weight: 700 !important;
}

.iz-mt-0 {
    margin-top: 0 !important;
}

.iz-mb-0 {
    margin-bottom: 0 !important;
}

.iz-mt-8 {
    margin-top: 8px !important;
}

.iz-mb-8 {
    margin-bottom: 8px !important;
}

.iz-mt-16 {
    margin-top: 16px !important;
}

.iz-mb-16 {
    margin-bottom: 16px !important;
}

.iz-gap-8 {
    gap: 8px !important;
}

.iz-gap-12 {
    gap: 12px !important;
}

.iz-gap-16 {
    gap: 16px !important;
}

.iz-d-flex {
    display: flex !important;
}

.iz-d-grid {
    display: grid !important;
}

.iz-d-none {
    display: none !important;
}

.iz-d-block {
    display: block !important;
}

.iz-flex-center {
    align-items: center;
    justify-content: center;
}

.iz-flex-between {
    justify-content: space-between !important;
}

.iz-flex-wrap {
    flex-wrap: wrap !important;
}

.iz-flex-col {
    flex-direction: column !important;
}

.iz-flex-1 {
    flex: 1 !important;
}

.iz-w-full {
    width: 100% !important;
}

.iz-h-full {
    height: 100% !important;
}

.iz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Show/hide by breakpoint */
@media (max-width: 768px) {
    .iz-hide-md {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .iz-hide-sm {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .iz-hide-xs {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .iz-show-md {
        display: none !important;
    }
}

@media (min-width: 641px) {
    .iz-show-sm {
        display: none !important;
    }
}

@media (min-width: 481px) {
    .iz-show-xs {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════════════
   39. PRINT ENHANCEMENTS
══════════════════════════════════════════════════════ */
@media print {

    /* Hide interactive UI */
    .iz-nav-dark,
    .iz-nav-header,
    .iz-toolbar,
    .iz-filter-bar,
    .iz-inner-tabs,
    .iz-tabs-wrap,
    .iz-dropdown,
    .iz-btn-icon,
    .iz-print-bar,
    .iz-submit-bar,
    .iz-pagination-bar {
        display: none !important;
    }

    /* Reset card shadows */
    .iz-section,
    .iz-card,
    .iz-table-card,
    .iz-chart-card {
        box-shadow: none !important;
        border-color: #ddd !important;
    }

    /* Ensure text is black */
    body,
    .iz-ink-2,
    .iz-ink-3 {
        color: #000 !important;
    }

    /* Page breaks */
    .iz-section {
        page-break-inside: avoid;
    }

    .iz-stat-card {
        page-break-inside: avoid;
    }

    .iz-invoice {
        box-shadow: none;
        border: none;
        max-width: 100%;
    }

    @page {
        margin: 1.5cm;
    }
}

/* iz-badge-discount / iz-badge-promo — réductions dans les tables */
.iz-badge-discount {
    background: #fef3c7;
    color: #92400e;
}

.iz-badge-discount::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #d97706;
}

.iz-badge-promo {
    background: #ede9fe;
    color: #5b21b6;
}

.iz-badge-promo::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #7c3aed;
}

.iz-badge-discount,
.iz-badge-promo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.76em;
    font-weight: 600;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   PARTICIPANTS — per-pass breakdown chips
══════════════════════════════════════════════════════ */
.iz-pt-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.iz-pt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--iz-surface);
    border: 1px solid var(--iz-border);
    border-radius: 20px;
    padding: 4px 12px 4px 10px;
    font-size: 0.80em;
    box-shadow: var(--iz-shadow);
}

.iz-pt-chip-name {
    color: var(--iz-ink-2);
    font-weight: 500;
}

.iz-pt-chip-total {
    background: #f0f0f0;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
    color: var(--iz-ink);
}

.iz-pt-chip-scanned {
    background: #dcfce7;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
    color: #15803d;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.iz-pt-chip-scanned i {
    font-size: 0.95em;
}


/* ══════════════════════════════════════════════════════
   40. SURVEYS — enquêtes clients
══════════════════════════════════════════════════════ */

/* Two-column grid for the charts row */
.iz-svy-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Two-column grid for the tables row */
.iz-svy-tables-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Bar chart row (rating + trigger) */
.iz-svy-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.iz-svy-bar-row:last-child {
    margin-bottom: 0;
}

.iz-svy-bar-label {
    width: 2.2rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--iz-ink-2);
    flex-shrink: 0;
}

.iz-svy-bar-label-lg {
    width: 9rem;
}

.iz-svy-bar-track {
    flex: 1;
    height: 7px;
    background: var(--iz-border);
    border-radius: 99px;
    overflow: hidden;
}

.iz-svy-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.iz-svy-bar-amber {
    background: #d97706;
}

.iz-svy-bar-red {
    background: var(--iz-red);
}

.iz-svy-bar-gray {
    background: var(--iz-ink-3);
}

.iz-svy-bar-count {
    width: 1.8rem;
    font-size: 12px;
    color: var(--iz-ink-3);
    text-align: right;
    flex-shrink: 0;
}

/* Empty state inside survey sections */
.iz-svy-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 13px;
    color: var(--iz-ink-3);
}

/* Responsive: stack on tablet */
@media (max-width: 900px) {

    .iz-svy-charts-row,
    .iz-svy-tables-row {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════
   INPUT AFFIX (input + unit suffix)
══════════════════════════════════════════════════════ */
.iz-affix-wrap {
    display: flex;
    align-items: stretch;
}

.iz-affix-wrap .iz-control {
    border-radius: var(--iz-r-sm) 0 0 var(--iz-r-sm);
    flex: 1;
    min-width: 0;
}

.iz-affix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--iz-border-s);
    border-left: none;
    border-radius: 0 var(--iz-r-sm) var(--iz-r-sm) 0;
    background: var(--iz-cream);
    font-size: 12px;
    font-weight: 500;
    color: var(--iz-ink-2);
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   CHECKBOX CHIP (même style que iz-radio-pill)
══════════════════════════════════════════════════════ */
.iz-check-chip {
    position: relative;
}

.iz-check-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.iz-check-chip label {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--iz-border-s);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--iz-ink-2);
    transition: border-color .15s, background .15s, color .15s;
    -webkit-user-select: none;
    user-select: none;
}

.iz-check-chip input:checked+label {
    background: var(--iz-red);
    border-color: var(--iz-red);
    color: #fff;
}

.iz-check-chip label:hover {
    border-color: var(--iz-red);
    color: var(--iz-red);
}

.iz-check-chip input:checked+label:hover {
    color: #fff;
}