/* ==========================================================================
   BlizzSuite ERP - Web Edition
   Powered by BlizzSuite.com | A Product of BlizzCode.com

   One stylesheet, no build step. The colour tokens below are the only
   place a colour is defined; nothing hard-codes a hex value.
   ========================================================================== */

:root {
    /* Brand */
    --blz-primary:        #155EEF;
    --blz-primary-hover:  #2563EB;
    --blz-navy:           #102A43;

    /* Text */
    --blz-text:           #101828;
    --blz-text-secondary: #64748B;
    --blz-text-muted:     #718096;

    /* Surfaces */
    --blz-bg:             #F8FAFC;
    --blz-bg-light:       #F4F7FA;
    --blz-card:           #FFFFFF;
    --blz-blue-light:     #EEF4FF;

    /* Lines */
    --blz-border:         #DCE5EF;
    --blz-border-light:   #CBD8E6;

    /* Status */
    --blz-success:        #067647;
    --blz-success-bg:     #ECFDF3;
    --blz-warning:        #F59E0B;
    --blz-warning-bg:     #FFFAEB;
    --blz-danger:         #B42318;
    --blz-danger-bg:      #FEF3F2;

    /* Metrics */
    --blz-radius:         10px;
    --blz-radius-sm:      6px;
    --blz-radius-lg:      14px;
    --blz-shadow:         0 1px 2px rgba(16, 24, 40, .06);
    --blz-shadow-md:      0 4px 12px rgba(16, 24, 40, .08);
    --blz-shadow-lg:      0 12px 32px rgba(16, 24, 40, .12);
    --blz-sidebar-w:      248px;
    --blz-sidebar-w-sm:   68px;
    --blz-topbar-h:       60px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--blz-text);
    background: var(--blz-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 .5rem; font-weight: 600; color: var(--blz-text); line-height: 1.3; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p  { margin: 0 0 .75rem; }

a { color: var(--blz-primary); text-decoration: none; }
a:hover { color: var(--blz-primary-hover); text-decoration: underline; }

code, kbd, pre, .blz-mono {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .92em;
}

/* Screen-reader-only text: icon buttons still announce their purpose. */
.blz-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;
}

/* ------------------------------------------------------------- layout -- */

.blz-shell { display: flex; min-height: 100vh; }

.blz-sidebar {
    width: var(--blz-sidebar-w);
    flex: 0 0 var(--blz-sidebar-w);
    background: var(--blz-navy);
    color: #CBD8E6;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transition: width .18s ease, transform .18s ease;
    overflow: hidden;
}

.blz-sidebar__brand {
    height: var(--blz-topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex: 0 0 auto;
}
.blz-sidebar__brand img { height: 26px; width: auto; display: block; }

/* The mark hides when the sidebar is open. This selector has to be at least as
   specific as the rule above, or "display: block" there wins and both the full
   logo and the mark appear side by side. */
.blz-sidebar__brand img.blz-sidebar__brand-mark { display: none; height: 26px; }

.blz-sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px 24px; }
.blz-sidebar__nav::-webkit-scrollbar { width: 6px; }
.blz-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.blz-nav-group {
    padding: 14px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(203, 216, 230, .55);
}

.blz-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    border-radius: var(--blz-radius-sm);
    color: #CBD8E6;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
.blz-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.blz-nav-link.is-active { background: var(--blz-primary); color: #fff; }
.blz-nav-link svg { flex: 0 0 18px; width: 18px; height: 18px; }
.blz-nav-link__badge {
    margin-left: auto;
    background: var(--blz-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    padding: 1px 6px;
}

.blz-main {
    flex: 1 1 auto;
    margin-left: var(--blz-sidebar-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left .18s ease;
}

/* Collapsed sidebar: the POS asks for this so the counter gets the screen. */
.blz-shell.is-collapsed .blz-sidebar { width: var(--blz-sidebar-w-sm); flex-basis: var(--blz-sidebar-w-sm); }
.blz-shell.is-collapsed .blz-main { margin-left: var(--blz-sidebar-w-sm); }
.blz-shell.is-collapsed .blz-nav-link span,
.blz-shell.is-collapsed .blz-nav-group,
.blz-shell.is-collapsed .blz-sidebar__brand img:not(.blz-sidebar__brand-mark) { display: none; }
.blz-shell.is-collapsed .blz-sidebar__brand img.blz-sidebar__brand-mark { display: block; }
.blz-shell.is-collapsed .blz-sidebar__brand { justify-content: center; }
.blz-shell.is-collapsed .blz-nav-link { justify-content: center; padding: 10px 0; }

/* ------------------------------------------------------------- topbar -- */

.blz-topbar {
    height: var(--blz-topbar-h);
    background: var(--blz-card);
    border-bottom: 1px solid var(--blz-border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.blz-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--blz-radius-sm);
    color: var(--blz-text-secondary);
    cursor: pointer;
}
.blz-icon-btn:hover { background: var(--blz-bg-light); color: var(--blz-text); }

.blz-search { position: relative; flex: 1 1 auto; max-width: 460px; }
.blz-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-sm);
    background: var(--blz-bg-light);
    font: inherit;
    color: var(--blz-text);
}
.blz-search input:focus {
    outline: none;
    border-color: var(--blz-primary);
    background: var(--blz-card);
    box-shadow: 0 0 0 3px rgba(21, 94, 239, .12);
}
.blz-search__icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--blz-text-muted); pointer-events: none;
}

.blz-search__results {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    background: var(--blz-card);
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    box-shadow: var(--blz-shadow-lg);
    max-height: 420px;
    overflow-y: auto;
    display: none;
    z-index: 60;
}
.blz-search__results.is-open { display: block; }
.blz-search__group-label {
    padding: 8px 12px 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--blz-text-muted);
}
.blz-search__item {
    display: block; padding: 8px 12px; color: var(--blz-text); cursor: pointer;
    border-left: 2px solid transparent;
}
.blz-search__item:hover, .blz-search__item.is-active {
    background: var(--blz-blue-light); border-left-color: var(--blz-primary); text-decoration: none;
}
.blz-search__item small { display: block; color: var(--blz-text-secondary); font-size: 12px; }

.blz-topbar__spacer { flex: 1 1 auto; }

.blz-branch-pill {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 12px;
    border: 1px solid var(--blz-border);
    border-radius: 999px;
    background: var(--blz-card);
    font-size: 13px; color: var(--blz-text); cursor: pointer;
}
.blz-branch-pill:hover { border-color: var(--blz-border-light); background: var(--blz-bg-light); }

.blz-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--blz-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}

/* ------------------------------------------------------------ content -- */

.blz-content { padding: 20px; flex: 1 1 auto; }

.blz-page-head {
    display: flex; align-items: flex-start; gap: 16px;
    flex-wrap: wrap; margin-bottom: 18px;
}
.blz-page-head__title { flex: 1 1 auto; min-width: 200px; }
.blz-page-head__title h1 { margin-bottom: 2px; }
.blz-page-head__subtitle { color: var(--blz-text-secondary); font-size: 13.5px; margin: 0; }
.blz-page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.blz-breadcrumb { font-size: 12.5px; color: var(--blz-text-muted); margin-bottom: 6px; }
.blz-breadcrumb a { color: var(--blz-text-secondary); }

/* -------------------------------------------------------------- cards -- */

.blz-card {
    background: var(--blz-card);
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    box-shadow: var(--blz-shadow);
    margin-bottom: 16px;
}
.blz-card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--blz-border);
}
.blz-card__head h2, .blz-card__head h3 { margin: 0; font-size: 15px; }
.blz-card__head-actions { margin-left: auto; display: flex; gap: 8px; }
.blz-card__body { padding: 16px; }
.blz-card__body--flush { padding: 0; }
.blz-card__foot {
    padding: 12px 16px; border-top: 1px solid var(--blz-border);
    background: var(--blz-bg-light);
    border-radius: 0 0 var(--blz-radius) var(--blz-radius);
}

/* ---------------------------------------------------------------- KPI -- */

.blz-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.blz-kpi {
    background: var(--blz-card);
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    padding: 15px 16px;
    box-shadow: var(--blz-shadow);
    display: block;
    color: inherit;
}
a.blz-kpi:hover { border-color: var(--blz-primary); text-decoration: none; box-shadow: var(--blz-shadow-md); }
.blz-kpi__label {
    font-size: 12.5px; color: var(--blz-text-secondary);
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.blz-kpi__value { font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.blz-kpi__meta { font-size: 12.5px; color: var(--blz-text-muted); margin-top: 4px; }

/* ------------------------------------------------------------- tables -- */

.blz-table-wrap { overflow-x: auto; }
.blz-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.blz-table th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--blz-text-secondary);
    padding: 10px 14px;
    background: var(--blz-bg-light);
    border-bottom: 1px solid var(--blz-border);
    white-space: nowrap;
}
.blz-table td { padding: 11px 14px; border-bottom: 1px solid var(--blz-border); vertical-align: middle; }
.blz-table tbody tr:last-child td { border-bottom: 0; }
.blz-table tbody tr:hover { background: var(--blz-bg-light); }
.blz-table .is-numeric, .blz-table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.blz-table tfoot td {
    font-weight: 600; background: var(--blz-bg-light);
    border-top: 2px solid var(--blz-border); border-bottom: 0;
}
.blz-table__sub { display: block; font-size: 12px; color: var(--blz-text-muted); }

/* ------------------------------------------------------------ buttons -- */

.blz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--blz-radius-sm);
    font: inherit; font-weight: 500; font-size: 13.5px;
    cursor: pointer; white-space: nowrap;
    background: var(--blz-card); color: var(--blz-text);
    border-color: var(--blz-border);
}
.blz-btn:hover { background: var(--blz-bg-light); text-decoration: none; }
.blz-btn:disabled, .blz-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.blz-btn svg { width: 16px; height: 16px; }

.blz-btn--primary { background: var(--blz-primary); border-color: var(--blz-primary); color: #fff; }
.blz-btn--primary:hover { background: var(--blz-primary-hover); border-color: var(--blz-primary-hover); color: #fff; }
.blz-btn--danger { background: var(--blz-danger); border-color: var(--blz-danger); color: #fff; }
.blz-btn--danger:hover { background: #9A1D14; color: #fff; }
.blz-btn--success { background: var(--blz-success); border-color: var(--blz-success); color: #fff; }
.blz-btn--ghost { background: transparent; border-color: transparent; color: var(--blz-text-secondary); }
.blz-btn--ghost:hover { background: var(--blz-bg-light); color: var(--blz-text); }
.blz-btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.blz-btn--lg { height: 44px; padding: 0 20px; font-size: 15px; }
.blz-btn--block { width: 100%; }

.blz-btn-group { display: inline-flex; }
.blz-btn-group .blz-btn { border-radius: 0; margin-left: -1px; }
.blz-btn-group .blz-btn:first-child { border-radius: var(--blz-radius-sm) 0 0 var(--blz-radius-sm); margin-left: 0; }
.blz-btn-group .blz-btn:last-child { border-radius: 0 var(--blz-radius-sm) var(--blz-radius-sm) 0; }
.blz-btn-group .blz-btn.is-active { background: var(--blz-primary); border-color: var(--blz-primary); color: #fff; }

/* ------------------------------------------------------------- forms --- */

.blz-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 16px;
}
.blz-field { display: flex; flex-direction: column; gap: 5px; }
.blz-field--full { grid-column: 1 / -1; }
.blz-label { font-size: 13px; font-weight: 500; color: var(--blz-text); }
.blz-label .blz-required { color: var(--blz-danger); }
.blz-hint { font-size: 12px; color: var(--blz-text-muted); }

.blz-input, .blz-select, .blz-textarea {
    width: 100%;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-sm);
    background: var(--blz-card);
    font: inherit;
    color: var(--blz-text);
}
.blz-textarea { min-height: 84px; resize: vertical; }
.blz-input:focus, .blz-select:focus, .blz-textarea:focus {
    outline: none;
    border-color: var(--blz-primary);
    box-shadow: 0 0 0 3px rgba(21, 94, 239, .12);
}
.blz-input.is-invalid, .blz-select.is-invalid { border-color: var(--blz-danger); }
.blz-input:disabled, .blz-select:disabled { background: var(--blz-bg-light); color: var(--blz-text-muted); }
.blz-input.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.blz-field__error { font-size: 12px; color: var(--blz-danger); }

.blz-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.blz-check input { width: 16px; height: 16px; accent-color: var(--blz-primary); }

.blz-form-actions {
    display: flex; gap: 10px; align-items: center;
    padding-top: 16px; margin-top: 16px;
    border-top: 1px solid var(--blz-border);
}

/* Searchable selector: users pick by name, never by an id. */
.blz-picker { position: relative; }
.blz-picker__results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--blz-card); border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-sm); box-shadow: var(--blz-shadow-lg);
    max-height: 280px; overflow-y: auto; display: none; z-index: 50;
}
.blz-picker__results.is-open { display: block; }
.blz-picker__item { padding: 8px 11px; cursor: pointer; }
.blz-picker__item:hover, .blz-picker__item.is-active { background: var(--blz-blue-light); }
.blz-picker__item small { display: block; font-size: 12px; color: var(--blz-text-secondary); }
.blz-picker__empty { padding: 12px; color: var(--blz-text-muted); font-size: 13px; }

/* ------------------------------------------------------------- badges -- */

.blz-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
    background: var(--blz-bg-light); color: var(--blz-text-secondary);
    border: 1px solid var(--blz-border);
}
.blz-badge--success { background: var(--blz-success-bg); color: var(--blz-success); border-color: #ABEFC6; }
.blz-badge--warning { background: var(--blz-warning-bg); color: #B54708; border-color: #FEDF89; }
.blz-badge--danger  { background: var(--blz-danger-bg);  color: var(--blz-danger);  border-color: #FECDCA; }
.blz-badge--info    { background: var(--blz-blue-light); color: var(--blz-primary); border-color: #C7D7FE; }

/* ------------------------------------------------------------- alerts -- */

.blz-alert {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    background: var(--blz-card);
    margin-bottom: 14px;
}
.blz-alert svg { flex: 0 0 18px; margin-top: 1px; }
.blz-alert__body { flex: 1 1 auto; }
.blz-alert__title { font-weight: 600; margin-bottom: 2px; }
.blz-alert__text { font-size: 13.5px; color: var(--blz-text-secondary); }
.blz-alert--success { background: var(--blz-success-bg); border-color: #ABEFC6; color: var(--blz-success); }
.blz-alert--warning { background: var(--blz-warning-bg); border-color: #FEDF89; color: #B54708; }
.blz-alert--danger  { background: var(--blz-danger-bg);  border-color: #FECDCA; color: var(--blz-danger); }
.blz-alert--info    { background: var(--blz-blue-light); border-color: #C7D7FE; color: var(--blz-primary); }
.blz-alert--success .blz-alert__text,
.blz-alert--warning .blz-alert__text,
.blz-alert--danger .blz-alert__text,
.blz-alert--info .blz-alert__text { color: inherit; opacity: .88; }

.blz-toast-stack {
    position: fixed; top: 16px; right: 16px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px; max-width: 380px;
}
.blz-toast {
    background: var(--blz-card); border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius); box-shadow: var(--blz-shadow-lg);
    padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
    animation: blz-toast-in .2s ease;
}
@keyframes blz-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.blz-toast--success { border-left: 3px solid var(--blz-success); }
.blz-toast--error   { border-left: 3px solid var(--blz-danger); }
.blz-toast--warning { border-left: 3px solid var(--blz-warning); }
.blz-toast--info    { border-left: 3px solid var(--blz-primary); }

/* Section that failed to load: the rest of the page still works. */
.blz-section-error {
    padding: 14px; border: 1px dashed var(--blz-border-light);
    border-radius: var(--blz-radius); background: var(--blz-bg-light);
    color: var(--blz-text-secondary); font-size: 13px;
}
.blz-section-error__title { display: block; font-weight: 500; color: var(--blz-text); }
.blz-section-error__code { display: block; margin-top: 4px; font-size: 12px; color: var(--blz-text-muted); }

/* -------------------------------------------------------- empty state -- */

.blz-empty { text-align: center; padding: 44px 20px; }
.blz-empty__icon {
    width: 46px; height: 46px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blz-blue-light); color: var(--blz-primary);
    border-radius: 50%;
}
.blz-empty__title { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.blz-empty__text { color: var(--blz-text-secondary); max-width: 460px; margin: 0 auto 16px; font-size: 13.5px; }
.blz-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ filters -- */

.blz-filters {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    padding: 14px 16px; background: var(--blz-card);
    border: 1px solid var(--blz-border); border-radius: var(--blz-radius);
    margin-bottom: 16px;
}
.blz-filters .blz-field { min-width: 150px; }

/* --------------------------------------------------------- pagination -- */

.blz-pagination {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--blz-border);
    font-size: 13px; color: var(--blz-text-secondary); flex-wrap: wrap;
}
.blz-pagination__pages { margin-left: auto; display: flex; gap: 4px; }
.blz-pagination__page {
    min-width: 32px; height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--blz-border); border-radius: var(--blz-radius-sm);
    color: var(--blz-text); background: var(--blz-card);
}
.blz-pagination__page:hover { background: var(--blz-bg-light); text-decoration: none; }
.blz-pagination__page.is-active { background: var(--blz-primary); border-color: var(--blz-primary); color: #fff; }
.blz-pagination__gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--blz-text-muted); }

/* ------------------------------------------------------------- action -- */

.blz-next-action {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 16px;
    background: var(--blz-blue-light);
    border: 1px solid #C7D7FE;
    border-radius: var(--blz-radius);
}
.blz-next-action__text { flex: 1 1 auto; font-size: 13.5px; }
.blz-next-action__text strong { display: block; }

.blz-action-list { display: flex; flex-direction: column; }
.blz-action-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--blz-border);
}
.blz-action-item:last-child { border-bottom: 0; }
.blz-action-item__icon {
    width: 32px; height: 32px; border-radius: var(--blz-radius-sm);
    display: flex; align-items: center; justify-content: center; flex: 0 0 32px;
}
.blz-action-item--info    .blz-action-item__icon { background: var(--blz-blue-light); color: var(--blz-primary); }
.blz-action-item--warning .blz-action-item__icon { background: var(--blz-warning-bg); color: #B54708; }
.blz-action-item--danger  .blz-action-item__icon { background: var(--blz-danger-bg);  color: var(--blz-danger); }
.blz-action-item__body { flex: 1 1 auto; min-width: 0; }
.blz-action-item__title { font-size: 13.5px; font-weight: 500; }

/* ---------------------------------------------------------- setup bar -- */

.blz-setup { border-left: 3px solid var(--blz-primary); }
.blz-progress { height: 7px; background: var(--blz-border); border-radius: 4px; overflow: hidden; }
.blz-progress__bar { height: 100%; background: var(--blz-primary); border-radius: 4px; transition: width .3s ease; }
.blz-progress--success .blz-progress__bar { background: var(--blz-success); }
.blz-progress--warning .blz-progress__bar { background: var(--blz-warning); }

.blz-steps { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.blz-step { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.blz-step__mark {
    width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--blz-border-light); color: transparent;
}
.blz-step.is-done .blz-step__mark { background: var(--blz-success); border-color: var(--blz-success); color: #fff; }
.blz-step.is-done .blz-step__label { color: var(--blz-text-secondary); }
.blz-step__label { flex: 1 1 auto; }

/* --------------------------------------------------------------- POS --- */

.blz-pos { display: grid; grid-template-columns: 1fr 396px; gap: 16px; align-items: start; }
.blz-pos__cart { min-height: 340px; }
.blz-pos__scan { display: flex; gap: 10px; margin-bottom: 14px; }
.blz-pos__scan .blz-picker { flex: 1 1 auto; }
.blz-pos__totals { font-size: 14px; }
.blz-pos__total-row { display: flex; justify-content: space-between; padding: 5px 0; }
.blz-pos__total-row--grand {
    font-size: 20px; font-weight: 600;
    border-top: 2px solid var(--blz-border); margin-top: 8px; padding-top: 12px;
}
.blz-pos__change {
    background: var(--blz-success-bg); color: var(--blz-success);
    border-radius: var(--blz-radius-sm); padding: 10px 12px; margin-top: 10px;
    display: flex; justify-content: space-between; font-weight: 600;
}
.blz-qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--blz-border); border-radius: var(--blz-radius-sm); overflow: hidden;
}
.blz-qty button {
    width: 28px; height: 30px; border: 0; background: var(--blz-bg-light);
    cursor: pointer; color: var(--blz-text); font-size: 15px; line-height: 1;
}
.blz-qty button:hover { background: var(--blz-border); }
.blz-qty input { width: 54px; height: 30px; border: 0; text-align: center; font: inherit; }
.blz-qty input:focus { outline: none; }

/* ------------------------------------------------------------- misc ---- */

.blz-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.blz-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.blz-dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; font-size: 13.5px; }
.blz-dl dt { color: var(--blz-text-secondary); }
.blz-dl dd { margin: 0; font-weight: 500; }

.blz-timeline { list-style: none; margin: 0; padding: 0; }
.blz-timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--blz-border); }
.blz-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.blz-timeline li::before {
    content: ''; position: absolute; left: -6px; top: 3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--blz-card); border: 2px solid var(--blz-primary);
}
.blz-timeline__time { font-size: 12px; color: var(--blz-text-muted); }

.blz-muted { color: var(--blz-text-secondary); }
.blz-small { font-size: 12.5px; }
.blz-nowrap { white-space: nowrap; }
.blz-positive { color: var(--blz-success); }
.blz-negative { color: var(--blz-danger); }
.blz-mb-0 { margin-bottom: 0; }
.blz-mb-2 { margin-bottom: 16px; }
.blz-flex { display: flex; gap: 10px; align-items: center; }
.blz-flex-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.blz-flex-wrap { flex-wrap: wrap; }

/* -------------------------------------------------------------- auth --- */

.blz-auth {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: linear-gradient(160deg, var(--blz-navy) 0%, #0B1F33 100%);
}
.blz-auth__card {
    width: 100%; max-width: 396px; background: var(--blz-card);
    border-radius: var(--blz-radius-lg); box-shadow: var(--blz-shadow-lg); padding: 30px;
}
.blz-auth__brand { text-align: center; margin-bottom: 22px; }
.blz-auth__brand img { height: 34px; }
.blz-auth__foot { text-align: center; margin-top: 20px; font-size: 12px; color: var(--blz-text-muted); }

/* ------------------------------------------------------------ footer --- */

.blz-footer {
    padding: 14px 20px; border-top: 1px solid var(--blz-border);
    font-size: 12.5px; color: var(--blz-text-muted);
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.blz-footer__spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------ modal ---- */

.blz-modal-backdrop {
    position: fixed; inset: 0; background: rgba(16, 42, 67, .48);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; z-index: 150; overflow-y: auto;
}
.blz-modal {
    background: var(--blz-card); border-radius: var(--blz-radius-lg);
    box-shadow: var(--blz-shadow-lg); width: 100%; max-width: 560px;
}
.blz-modal__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--blz-border);
}
.blz-modal__head h3 { margin: 0; }
.blz-modal__body { padding: 18px; }
.blz-modal__foot {
    padding: 14px 18px; border-top: 1px solid var(--blz-border);
    display: flex; gap: 10px; justify-content: flex-end;
    background: var(--blz-bg-light); border-radius: 0 0 var(--blz-radius-lg) var(--blz-radius-lg);
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .blz-pos { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .blz-sidebar { transform: translateX(-100%); }
    .blz-shell.is-mobile-open .blz-sidebar { transform: none; }
    .blz-main { margin-left: 0; }
    .blz-shell.is-collapsed .blz-main { margin-left: 0; }
    .blz-content { padding: 14px; }
    .blz-search { max-width: none; }
}

/* -------------------------------------------------------------- print -- */

@media print {
    .blz-sidebar, .blz-topbar, .blz-footer, .blz-no-print { display: none !important; }
    .blz-main { margin-left: 0 !important; }
    body { background: #fff; }
    .blz-card { border: 0; box-shadow: none; }
}

/* ---------------------------------------------------- document thumbnails -- */
/* Customer paperwork is checked by eye, so it is shown as pictures rather than
   a list of filenames nobody can judge. */
.blz-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.blz-doc-tile {
    display: block;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-sm);
    overflow: hidden;
    background: var(--blz-bg-light);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.blz-doc-tile:hover {
    border-color: var(--blz-primary);
    box-shadow: 0 0 0 3px rgba(21, 94, 239, .12);
}
.blz-doc-tile img {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
    background: #fff;
}
.blz-doc-tile__file {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    color: var(--blz-text-secondary);
}
.blz-doc-tile__label {
    display: block;
    padding: 7px 9px;
    font-size: 12px;
    border-top: 1px solid var(--blz-border);
    background: #fff;
}

/* ------------------------------------------------------------- charts ----- */
/* Charts are drawn on the server as SVG, so these only handle layout. */
.blz-donut {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.blz-legend { flex: 1 1 200px; min-width: 190px; }
.blz-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12.5px;
}
.blz-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}
.blz-legend__label {
    flex: 1 1 auto;
    color: var(--blz-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blz-legend__value {
    color: var(--blz-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- setup walkthrough -- */
/* The steps are numbered because the order genuinely matters: opening stock
   cannot be entered before the products exist. */
.blz-steps { list-style: none; counter-reset: blzstep; margin: 0; padding: 0; }
.blz-steps__item { counter-increment: blzstep; border-top: 1px solid var(--blz-border); }
.blz-steps__item:first-child { border-top: 0; }
.blz-steps__item a {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 4px 12px;
    padding: 11px 4px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--blz-radius-sm);
}
.blz-steps__item a:hover { background: var(--blz-bg-light); }
.blz-steps__item a::before {
    content: counter(blzstep);
    grid-row: span 2;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--blz-primary-soft, #EFF4FF);
    color: var(--blz-primary);
    font-size: 12px; font-weight: 600;
    margin-top: 2px;
}
.blz-steps__title { font-weight: 600; font-size: 13.5px; }
.blz-steps__summary { color: var(--blz-text-secondary); font-size: 12.5px; }

/* --------------------------------------------------------- repeating rows -- */
.blz-repeat-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--blz-border);
    position: relative;
}
.blz-repeat-row:last-child { border-bottom: 0; }

/* ----------------------------------------------------- attendance strip ---- */
/* A month at a glance. Colour alone does not carry the meaning: every day
   carries its date and status in a title, and the legend names each colour. */
.blz-attendance-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.blz-attendance-day {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px; font-size: 11px;
    background: var(--blz-bg-light); color: var(--blz-text-secondary);
    border: 1px solid var(--blz-border);
}
.blz-attendance-day.is-present  { background: #ECFDF3; border-color: #ABEFC6; color: #067647; }
.blz-attendance-day.is-late     { background: #FFFAEB; border-color: #FEDF89; color: #B54708; }
.blz-attendance-day.is-half_day { background: #FFFAEB; border-color: #FEDF89; color: #B54708; }
.blz-attendance-day.is-absent   { background: #FEF3F2; border-color: #FECDCA; color: #B42318; }
.blz-attendance-day.is-leave    { background: #EFF4FF; border-color: #B2CCFF; color: #155EEF; }
.blz-attendance-day.is-holiday  { background: #F4F3FF; border-color: #D9D6FE; color: #5925DC; }

/* ------------------------------------------------------------ POS screen --- */
.blz-pos-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0 14px;
}
.blz-pos-bar__left { display: flex; align-items: center; gap: 10px; }
.blz-pos-bar__left h1 { font-size: 19px; margin: 0; }
.blz-pos-bar__right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.blz-key {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid var(--blz-border);
    border-radius: 3px;
    font-size: 10px;
    color: var(--blz-text-secondary);
    background: #fff;
}

/* --------------------------------------------------------- reveal password -- */
.blz-reveal { position: relative; display: block; }
.blz-reveal input { padding-right: 38px; width: 100%; }
.blz-reveal__btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    padding: 4px;
    cursor: pointer;
    color: var(--blz-text-secondary);
    display: flex;
    border-radius: 4px;
}
.blz-reveal__btn:hover { color: var(--blz-text); background: var(--blz-bg-light); }

/* ------------------------------------------------------- business report --- */
/* The profit story reads top to bottom, so subtotals and the final line are
   weighted differently rather than relying on colour alone. */
.blz-pl tr.is-subtotal td { border-top: 1px solid var(--blz-border); font-weight: 600; }
.blz-pl tr.is-total td {
    border-top: 2px solid var(--blz-text);
    font-weight: 700;
    font-size: 15px;
    background: var(--blz-bg-light);
}
.blz-pl tr.is-negative td:first-child { padding-left: 22px; color: var(--blz-text-secondary); }

.blz-delta { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.blz-delta.is-good { color: #067647; }
.blz-delta.is-bad  { color: #B42318; }
.blz-delta.is-flat { color: var(--blz-text-secondary); font-weight: 400; }

@media print {
    .blz-no-print, .blz-sidebar, .blz-topbar, .blz-footer { display: none !important; }
    .blz-main { margin-left: 0 !important; }
    .blz-card { break-inside: avoid; border: 1px solid #ddd; box-shadow: none; }
    .blz-kpi-row { break-inside: avoid; }
}

/* ------------------------------------------------------------ invoice QR --- */
.blz-doc__qr { margin: 14px 0; text-align: center; }
.blz-doc__qr svg { display: inline-block; }
.blz-doc__qr span { display: block; font-size: 9pt; color: #475467; margin-top: 3px; }
.blz-receipt__qr { text-align: center; margin: 8px 0; }

/* ===========================================================================
   Tablet and phone
   ===========================================================================
   A shop owner checks figures on a phone between customers, and a cashier may
   run the till on a tablet. The desktop layout is the same interface, not a
   cut-down one: nothing is hidden, because the number somebody needs is always
   the one that got removed.

   Tables are the hard part. An ERP is full of wide tables, and squeezing eight
   columns into 360 pixels makes all of them unreadable. So on a phone the
   important tables become stacked cards, one record at a time, with each cell
   labelled. Tables that are genuinely a grid of numbers keep scrolling
   sideways instead, with the first column pinned so you can tell which row you
   are reading.
   =========================================================================== */

/* ---- 1200px: laptops and large tablets ---------------------------------- */
@media (max-width: 1200px) {
    .blz-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .blz-kpi-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .blz-content { padding: 18px; }
}

/* ---- 900px: tablets ------------------------------------------------------ */
@media (max-width: 900px) {
    /* The sidebar slides over the page rather than pushing it, so the content
       keeps its full width when the menu is closed. */
    .blz-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 60;
        box-shadow: 4px 0 24px rgba(16, 24, 40, .18);
    }
    .blz-shell.is-mobile-open::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(16, 24, 40, .45);
    }

    .blz-grid-2, .blz-grid-3 { grid-template-columns: 1fr; }
    .blz-form-grid { grid-template-columns: 1fr 1fr; }
    .blz-field--full { grid-column: 1 / -1; }

    .blz-page-head { flex-wrap: wrap; gap: 10px; }
    .blz-page-head__actions { width: 100%; }
    .blz-page-head__actions .blz-btn { flex: 1 1 auto; justify-content: center; }

    .blz-filters { flex-wrap: wrap; }
    .blz-filters .blz-field { flex: 1 1 160px; }

    /* Tap targets. A finger is about 9mm across; 30px controls are a lottery. */
    .blz-btn { min-height: 40px; }
    .blz-input, .blz-select { min-height: 40px; font-size: 15px; }
    .blz-icon-btn { min-width: 40px; min-height: 40px; }

    /* 16px stops iOS zooming the whole page when a field is focused. */
    .blz-input, .blz-select, .blz-textarea { font-size: 16px; }
}

/* ---- 680px: phones ------------------------------------------------------- */
@media (max-width: 680px) {
    .blz-content { padding: 12px; }
    .blz-form-grid { grid-template-columns: 1fr; }
    .blz-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .blz-kpi { padding: 12px; }
    .blz-kpi__value { font-size: 18px; }
    .blz-card { border-radius: 10px; margin-bottom: 12px; }
    .blz-card__head { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .blz-card__head h2 { font-size: 15px; }
    .blz-card__body { padding: 14px; }

    /* The global search stays easy to reach. Multi-branch staff must also be
       able to switch branch on a phone, so the branch selector moves to its own
       row instead of disappearing (cashiers may not have Settings access). */
    .blz-search { flex: 1 1 auto; }

    /* --- stacked tables ---
       Each row becomes a card and each cell carries its column name, so a
       record can be read without scrolling sideways. Applied to tables marked
       data-stack, which is most of them; the exceptions are grids of numbers
       where the columns only mean anything side by side. */
    table[data-stack] thead { display: none; }
    table[data-stack], table[data-stack] tbody,
    table[data-stack] tr, table[data-stack] td { display: block; width: 100%; }

    table[data-stack] tr {
        border: 1px solid var(--blz-border);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 4px 2px;
        background: #fff;
    }
    table[data-stack] td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 7px 12px;
        border: 0;
        text-align: right;
    }
    table[data-stack] td::before {
        content: attr(data-label);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--blz-text-secondary);
        text-align: left;
        flex: 0 0 auto;
    }
    /* A cell with nothing to show would otherwise leave a stray label. */
    table[data-stack] td:empty { display: none; }
    table[data-stack] td.is-numeric { text-align: right; }
    table[data-stack] .blz-table__sub { display: block; text-align: right; }

    /* Tables that stay a table keep the first column visible while the rest
       scrolls, so you can always tell which row you are looking at. */
    .blz-table-wrap { -webkit-overflow-scrolling: touch; }
    .blz-table-wrap.is-scrollable::after {
        content: 'Scroll sideways for more →';
        display: block;
        padding: 6px 12px;
        font-size: 11.5px;
        color: var(--blz-text-secondary);
    }

    /* Charts drawn at desktop proportions become unreadable slivers. */
    .blz-donut { flex-direction: column; align-items: stretch; gap: 10px; }
    .blz-donut svg { margin: 0 auto; }

    .blz-dl { grid-template-columns: 1fr; gap: 2px; }
    .blz-dl dt { margin-top: 8px; }

    /* The report's profit story: the formula column is the first thing to go,
       because the label and the amount are what a phone is for. */
    .blz-pl td:nth-child(2) { display: none; }
}

/* ---- the till on a tablet ------------------------------------------------ */
@media (max-width: 1100px) {
    .blz-pos { grid-template-columns: 1fr; }
    /* Payment and totals belong above the cart on a narrow screen: a cashier
       looks at the amount far more often than at the list of lines. */
    .blz-pos__side { order: -1; }
}

@media (max-width: 680px) {
    .blz-pos-bar { padding: 8px 0 10px; }
    .blz-pos-bar__left h1 { font-size: 16px; }
    .blz-pos-bar__right { width: 100%; margin-left: 0; }
    .blz-pos-bar__right .blz-btn { flex: 1 1 auto; justify-content: center; }

    /* The cart stays a table: quantity, price and total only mean anything
       next to each other. */
    .blz-pos__cart th:nth-child(4), .blz-pos__cart td:nth-child(4) { display: none; }
}

/* ---- printing from a phone ----------------------------------------------- */
@media print {
    table[data-stack] thead { display: table-header-group; }
    table[data-stack], table[data-stack] tbody { display: table; }
    table[data-stack] tr { display: table-row; border: 0; }
    table[data-stack] td { display: table-cell; text-align: inherit; }
    table[data-stack] td::before { content: none; }
    .blz-table-wrap.is-scrollable::after { content: none; }
}

/* ---------------------------------------------------------- incentive tiers -- */
/* Where a program has reached, and how far the next tier is. The markers carry
   their tier name in a title, so the bar is not the only way to read it. */
.blz-tier-track {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--blz-bg-light);
    border: 1px solid var(--blz-border);
}
.blz-tier-track__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #155EEF, #12B76A);
}
.blz-tier-mark {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 20px;
    background: var(--blz-text-secondary);
    opacity: .45;
}
.blz-tier-mark.is-reached { background: #067647; opacity: 1; width: 3px; }

/* --------------------------------------------------------- full screen --- */
/* Full screen is browser-native. We deliberately keep the ERP header/sidebar
   visible so the same header control can exit full screen and navigation does
   not disappear unexpectedly. */
.blz-icon-btn.is-active { background: var(--blz-primary-soft, #EFF4FF); color: var(--blz-primary); }
.blz-fullscreen-btn [hidden] { display: none !important; }
:fullscreen .blz-topbar,
:-webkit-full-screen .blz-topbar { top: 0; }

/* ------------------------------------------------------------ option chips -- */
.blz-chip-set { display: flex; flex-wrap: wrap; gap: 6px; }
.blz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--blz-border);
    border-radius: 999px;
    font-size: 12.5px;
    cursor: pointer;
    background: #fff;
    user-select: none;
}
.blz-chip input { margin: 0; }
.blz-chip:has(input:checked) {
    border-color: var(--blz-primary);
    background: var(--blz-primary-soft, #EFF4FF);
    color: var(--blz-primary);
    font-weight: 500;
}

/* ---------------------------------------------------- the main report card -- */
/* The business report is the one somebody should open first, so it is not one
   tile among eight. */
.blz-report-main {
    display: block;
    text-decoration: none;
    color: inherit;
    border-color: var(--blz-primary);
    background: linear-gradient(180deg, var(--blz-primary-soft, #EFF4FF), #fff 70%);
}
.blz-report-main:hover { box-shadow: 0 0 0 3px rgba(21, 94, 239, .12); }
.blz-report-main__label {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 600; color: var(--blz-primary);
}
.blz-report-main__text {
    margin: 6px 0 14px;
    color: var(--blz-text-secondary);
    font-size: 13.5px;
    max-width: 60ch;
}
.blz-section-heading {
    font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--blz-text-secondary); margin: 22px 0 10px;
}

/* ========================================================================
   Responsive & POS hardening — 1.0.2
   Keeps the same UI, but removes the layouts that became cramped or unusable
   on laptops, tablets and phones.
   ======================================================================== */

html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
body.blz-modal-open { overflow: hidden; }
.blz-modal-backdrop[hidden] { display: none !important; }
.blz-modal__close { margin-left: auto; flex: 0 0 auto; }
.blz-form-grid--single { grid-template-columns: 1fr; }

/* Password fields keep their native input sizing after the reveal button is
   injected. This also fixes reveal controls inside flex/grid fields. */
.blz-reveal { width: 100%; min-width: 0; }
.blz-flex > .blz-reveal { flex: 1 1 auto; }
.blz-reveal__btn {
    width: 34px;
    height: 34px;
    right: 2px;
    padding: 0;
    align-items: center;
    justify-content: center;
    z-index: 2;
    touch-action: manipulation;
}
.blz-reveal__btn:focus-visible {
    outline: 2px solid var(--blz-primary);
    outline-offset: 1px;
}

/* Cash-shift form: fields and action stay visually connected instead of the
   Open Shift button floating away from the form on medium screens. */
.blz-shift-open-card .blz-form-grid {
    grid-template-columns: minmax(190px, 1fr) minmax(160px, .65fr) minmax(210px, 1.15fr) auto;
    align-items: end;
}
.blz-shift-open-submit .blz-btn {
    min-height: 38px;
    min-width: 122px;
    justify-content: center;
}

/* POS desktop / laptop */
body.blz-pos-mode .blz-content { padding: 12px 16px 16px; }
body.blz-pos-mode .blz-footer { padding-top: 10px; padding-bottom: 10px; }
.blz-pos {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
    gap: 12px;
}
.blz-pos__main, .blz-pos__side { min-width: 0; }
.blz-pos__side {
    position: sticky;
    top: calc(var(--blz-topbar-h) + 12px);
    max-height: calc(100vh - var(--blz-topbar-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}
.blz-pos__cart .blz-card__body {
    display: flex;
    flex-direction: column;
    min-height: min(620px, calc(100vh - 150px));
}
.blz-pos__cart-table {
    flex: 1 1 auto;
    max-height: calc(100vh - 265px);
    overflow: auto;
    overscroll-behavior: contain;
}
.blz-pos__cart-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.blz-pos__cart-table thead th { box-shadow: 0 1px 0 var(--blz-border); }
.blz-pos__scan { align-items: end; }

.blz-pos-shift-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    margin: -2px 0 12px;
    border: 1px solid #FEDF89;
    border-radius: var(--blz-radius);
    background: var(--blz-warning-bg);
    color: #93370D;
}
.blz-pos-shift-note span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #B54708;
}

/* The global header owns fullscreen. Native browser fullscreen keeps the ERP
   shell intact; only the browser chrome disappears. */
body.blz-pos-mode.blz-is-fullscreen .blz-pos__side {
    max-height: calc(100vh - var(--blz-topbar-h) - 24px);
}
body.blz-pos-mode.blz-is-fullscreen .blz-pos__cart .blz-card__body {
    min-height: min(680px, calc(100vh - 150px));
}
body.blz-pos-mode.blz-is-fullscreen .blz-pos__cart-table {
    max-height: calc(100vh - 265px);
}

/* POS action toolbar: Open Shift / Hold / Held / Invoices behave like one
   compact control group instead of four differently-sized loose elements. */
.blz-pos-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.blz-pos-actions [data-shift-action] {
    display: inline-flex;
    align-items: stretch;
}
.blz-pos-action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.blz-pos-action .blz-badge { margin-left: 1px; }
.blz-pos-action .blz-key { margin-left: 1px; }

.blz-pos-shift-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.blz-pos-shift-modal__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.blz-pos-shift-modal__buttons .blz-btn { min-width: 96px; }

/* Small laptops / tablets: keep the cashier flow in reading order. The old
   rule moved payment above product search, which made the till feel broken. */
@media (max-width: 1100px) {
    .blz-pos { grid-template-columns: 1fr; }
    .blz-pos__side {
        order: 0;
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .blz-pos__cart .blz-card__body { min-height: 420px; }
    .blz-pos__cart-table { max-height: 520px; }
}

/* Tablets */
@media (max-width: 900px) {
    .blz-topbar {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .blz-topbar > a.blz-flex .blz-small { display: none; }
    .blz-footer { flex-wrap: wrap; gap: 5px 8px; }
    .blz-shift-open-card .blz-form-grid { grid-template-columns: 1fr 1fr; }
    .blz-shift-open-card .blz-field:nth-child(3) { grid-column: 1 / -1; }
    .blz-shift-open-submit { grid-column: 1 / -1; }
    .blz-shift-open-submit .blz-btn { width: 100%; }
}

/* Phones */
@media (max-width: 680px) {
    .blz-topbar {
        height: auto;
        min-height: var(--blz-topbar-h);
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 10px;
    }
    .blz-topbar .blz-search {
        order: 50;
        flex: 1 0 100%;
        width: 100%;
        max-width: none;
    }
    .blz-topbar form[action$="/branch/switch"] {
        order: 45;
        flex: 1 0 100%;
        width: 100%;
    }
    .blz-topbar form[action$="/branch/switch"] .blz-select {
        width: 100% !important;
        min-width: 0 !important;
    }
    .blz-topbar__spacer { min-width: 0; }
    .blz-content { padding: 10px; }
    .blz-card__head-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }
    .blz-card__head-actions .blz-btn { flex: 1 1 auto; }
    .blz-card__foot { display: flex; flex-wrap: wrap; gap: 8px; }
    .blz-form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .blz-form-actions .blz-btn { width: 100%; }
    .blz-shift-open-card .blz-form-grid { grid-template-columns: 1fr; }
    .blz-shift-open-card .blz-field:nth-child(3),
    .blz-shift-open-submit { grid-column: auto; }

    .blz-modal-backdrop {
        align-items: flex-end;
        padding: 10px;
    }
    .blz-modal {
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        border-radius: 12px;
    }
    .blz-modal__head, .blz-modal__body { padding: 14px; }
    .blz-modal__foot {
        padding: 12px 14px;
        flex-wrap: wrap;
    }
    .blz-modal__foot .blz-btn { flex: 1 1 auto; }
    .blz-pos-shift-modal__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }
    .blz-pos-shift-modal__buttons { width: 100%; }
    .blz-pos-shift-modal__buttons .blz-btn { flex: 1 1 50%; }
    .blz-pos-shift-modal__manage { width: 100%; justify-content: center; }

    body.blz-pos-mode .blz-content { padding: 8px; }
    .blz-pos-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding-top: 4px;
    }
    .blz-pos-bar__left {
        width: 100%;
        justify-content: space-between;
        min-width: 0;
    }
    .blz-pos-bar__left .blz-badge {
        max-width: 62%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .blz-pos-bar__right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
        gap: 6px;
    }
    .blz-pos-bar__right > *,
    .blz-pos-bar__right [data-shift-action],
    .blz-pos-bar__right [data-shift-action] > * { width: 100%; }
    .blz-pos-bar__right .blz-btn {
        min-width: 0;
        width: 100%;
        min-height: 40px;
        padding-left: 9px;
        padding-right: 9px;
    }
    .blz-pos-action .blz-key { display: none; }
    .blz-pos-shift-note {
        align-items: stretch;
        flex-direction: column;
    }
    .blz-pos-shift-note .blz-btn { width: 100%; }
    .blz-pos__scan {
        flex-direction: column;
        align-items: stretch;
    }
    .blz-pos__scan .blz-field { max-width: none !important; width: 100%; }
    .blz-pos__cart .blz-card__body { min-height: 0; padding: 12px; }
    .blz-pos__cart-table {
        max-height: none;
        margin-left: -12px !important;
        margin-right: -12px !important;
    }
    .blz-pos__side .blz-card { margin-bottom: 10px; }
    .blz-pos__total-row--grand { font-size: 18px; }
    .blz-pos__change { padding: 9px 10px; }

    /* POS rows become labelled cards. Keep every value readable and prevent
       quantity / discount controls from overflowing a 320px phone. */
    .blz-pos__cart table[data-stack] td {
        align-items: center;
        gap: 10px;
    }
    .blz-pos__cart table[data-stack] td::before { min-width: 66px; }
    .blz-pos__cart table[data-stack] td:first-child {
        display: block;
        text-align: left;
    }
    .blz-pos__cart table[data-stack] td:first-child::before { display: none; }
    .blz-pos__cart .blz-qty { margin-left: auto; }
    .blz-pos__cart [data-line-discount] { max-width: 100px; }
}

@media (max-width: 420px) {
    .blz-topbar { padding-left: 8px; padding-right: 8px; }
    .blz-topbar > a[href$="/help"] { display: none; }
    .blz-kpi-row { grid-template-columns: 1fr; }
    .blz-pos-bar__right { grid-template-columns: 1fr 1fr; }
}

/* A desktop-collapsed sidebar must become a full drawer on tablets/phones.
   Without this, POS starts collapsed and the mobile menu opens as a 68px icon
   strip with every label hidden. */
@media (max-width: 900px) {
    .blz-shell.is-collapsed .blz-sidebar {
        width: var(--blz-sidebar-w);
        flex-basis: var(--blz-sidebar-w);
    }
    .blz-shell.is-collapsed .blz-nav-link span,
    .blz-shell.is-collapsed .blz-nav-group,
    .blz-shell.is-collapsed .blz-sidebar__brand img:not(.blz-sidebar__brand-mark) { display: initial; }
    .blz-shell.is-collapsed .blz-sidebar__brand img:not(.blz-sidebar__brand-mark) { display: block; }
    .blz-shell.is-collapsed .blz-sidebar__brand img.blz-sidebar__brand-mark { display: none; }
    .blz-shell.is-collapsed .blz-sidebar__brand { justify-content: flex-start; }
    .blz-shell.is-collapsed .blz-nav-link { justify-content: flex-start; padding: 9px 11px; }
}

@media (max-width: 680px) {
    .blz-pos__cart table[data-stack] td:nth-child(4) { display: flex; }
    .blz-pos__cart-table::after { content: none; }
}

@media (max-width: 900px) {
    .blz-shell.is-collapsed .blz-nav-group { display: block; }
}


/* ======================================================================
   v1.1 Shop UX: clearer counter workflow and guided hand-over
   ====================================================================== */

.blz-network-status {
    position: fixed;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(620px, calc(100vw - 24px));
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .16);
    font-size: 13px;
}
.blz-network-status[hidden] { display: none !important; }
.blz-network-status strong { white-space: nowrap; }
.blz-network-status span { opacity: .9; }
.blz-network-status.is-offline { background: #7A271A; color: #fff; }
.blz-network-status.is-online { background: #05603A; color: #fff; }

.blz-pos-recovery,
.blz-pos-success {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--blz-radius);
}
.blz-pos-recovery[hidden], .blz-pos-success[hidden] { display: none !important; }
.blz-pos-recovery {
    border: 1px solid #B2DDFF;
    background: #EFF8FF;
    color: #175CD3;
}
.blz-pos-success {
    border: 1px solid #ABEFC6;
    background: #ECFDF3;
    color: #067647;
}
.blz-pos-recovery strong,
.blz-pos-success strong,
.blz-pos-recovery span,
.blz-pos-success span { display: block; }
.blz-pos-recovery span,
.blz-pos-success span { margin-top: 2px; font-size: 12px; }
.blz-pos-success__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.blz-pos-new-customer { margin-top: -4px; margin-bottom: 10px; }
.blz-modal--sm { max-width: 440px; }

.blz-pos-payment-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
}
.blz-pos-payment-chip {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    background: var(--blz-surface);
    color: var(--blz-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease, background .15s ease;
}
.blz-pos-payment-chip:hover { border-color: var(--blz-primary); }
.blz-pos-payment-chip:active { transform: scale(.97); }
.blz-pos-payment-chip.is-active {
    border-color: var(--blz-primary);
    background: var(--blz-primary-soft, #EFF4FF);
    box-shadow: 0 0 0 1px var(--blz-primary);
}

.blz-pos-mobile-pay { display: none; }

.blz-setup-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    margin-bottom: 10px;
    border: 1px solid var(--blz-border);
    border-radius: calc(var(--blz-radius) + 2px);
    background: var(--blz-surface);
}
.blz-setup-hero__eyebrow {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--blz-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.blz-setup-hero h2 { margin: 0 0 4px; font-size: 26px; }
.blz-setup-hero p { margin: 0; color: var(--blz-muted); }
.blz-setup-progress { height: 9px; margin-bottom: 18px; }
.blz-setup-wizard { display: grid; gap: 10px; margin-bottom: 18px; }
.blz-setup-wizard__step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    background: var(--blz-surface);
}
.blz-setup-wizard__step.is-done { background: #F6FEF9; }
.blz-setup-wizard__number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blz-primary-soft, #EFF4FF);
    color: var(--blz-primary);
    font-weight: 700;
}
.blz-setup-wizard__step.is-done .blz-setup-wizard__number { background: #DCFAE6; color: #067647; }
.blz-setup-wizard__body h3 { margin: 0 0 3px; font-size: 15px; }
.blz-setup-wizard__body p { margin: 0 0 9px; color: var(--blz-muted); font-size: 13px; }
.blz-setup-checks { margin-bottom: 18px; }
.blz-handover-list { display: grid; gap: 8px; }
.blz-handover-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 12px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    text-decoration: none;
    color: inherit;
}
.blz-handover-list a:hover { border-color: var(--blz-primary); }
.blz-handover-list span { color: var(--blz-muted); font-size: 12px; }

@media (max-width: 680px) {
    body.blz-pos-mode { padding-bottom: 76px; }
    .blz-pos-recovery,
    .blz-pos-success { align-items: stretch; flex-direction: column; }
    .blz-pos-success__actions { width: 100%; }
    .blz-pos-success__actions .blz-btn { flex: 1 1 50%; justify-content: center; }
    .blz-pos-payment-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blz-pos-mobile-pay {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 10px;
        border: 1px solid var(--blz-border);
        border-radius: 12px;
        background: var(--blz-surface);
        box-shadow: 0 10px 34px rgba(16, 24, 40, .2);
    }
    .blz-pos-mobile-pay > div { min-width: 0; }
    .blz-pos-mobile-pay span { display: block; color: var(--blz-muted); font-size: 11px; }
    .blz-pos-mobile-pay strong { display: block; font-size: 18px; line-height: 1.15; }
    .blz-pos-mobile-pay .blz-btn { min-height: 44px; }
    .blz-network-status { top: 6px; border-radius: 12px; align-items: flex-start; }
    .blz-network-status span { display: block; }
    .blz-setup-hero { align-items: stretch; flex-direction: column; padding: 16px; }
    .blz-setup-hero .blz-btn { width: 100%; justify-content: center; }
    .blz-setup-wizard__step { grid-template-columns: 32px minmax(0, 1fr); padding: 12px; }
    .blz-setup-wizard__number { width: 30px; height: 30px; }
    .blz-setup-wizard__body .blz-flex-between { align-items: flex-start; gap: 8px; }
}

/* ======================================================================
   v1.2 Shop UX: cashier speed, training and mistake prevention
   ====================================================================== */

.blz-confirm-dialog__message {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
}
.blz-confirm-dialog .blz-modal__foot { justify-content: flex-end; }

.blz-pos-action--guide > span:first-child {
    width: 17px;
    height: 17px;
    display: inline-grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.blz-pos-quick {
    margin: -2px 0 14px;
    padding: 10px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
    background: var(--blz-surface-subtle, #F8FAFC);
}
.blz-pos-quick[hidden],
.blz-pos-quick__group[hidden] { display: none !important; }
.blz-pos-quick__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.blz-pos-quick__head strong,
.blz-pos-quick__head span { display: block; }
.blz-pos-quick__head span { margin-top: 1px; color: var(--blz-muted); font-size: 11px; }
.blz-pos-quick__group + .blz-pos-quick__group { margin-top: 8px; }
.blz-pos-quick__label {
    display: block;
    margin-bottom: 5px;
    color: var(--blz-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.blz-pos-quick__list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
.blz-pos-quick-product {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    min-width: 138px;
    max-width: 190px;
    border: 1px solid var(--blz-border);
    border-radius: 9px;
    background: var(--blz-surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.blz-pos-quick-product:hover {
    border-color: var(--blz-primary);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}
.blz-pos-quick-product__add {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 9px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.blz-pos-quick-product__add strong,
.blz-pos-quick-product__add span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blz-pos-quick-product__add strong { font-size: 12px; }
.blz-pos-quick-product__add span { margin-top: 2px; color: var(--blz-muted); font-size: 10px; }
.blz-pos-quick-product__star {
    width: 32px;
    flex: 0 0 32px;
    border: 0;
    border-left: 1px solid var(--blz-border);
    background: transparent;
    color: #98A2B3;
    font-size: 15px;
    cursor: pointer;
}
.blz-pos-quick-product__star:hover,
.blz-pos-quick-product__star.is-favorite { color: #DC8A00; background: #FFFAEB; }

.blz-pos-guide-modal { max-width: 620px; }
.blz-pos-guide-steps { display: grid; gap: 9px; }
.blz-pos-guide-step {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius);
}
.blz-pos-guide-step > b {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blz-primary-soft, #EFF4FF);
    color: var(--blz-primary);
    font-size: 12px;
}
.blz-pos-guide-step strong,
.blz-pos-guide-step span { display: block; }
.blz-pos-guide-step span { margin-top: 2px; color: var(--blz-muted); font-size: 12px; line-height: 1.45; }
.blz-pos-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--blz-border);
}
.blz-pos-shortcuts span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 7px;
    background: var(--blz-surface-subtle, #F8FAFC);
    color: var(--blz-muted);
    font-size: 11px;
}
.blz-pos-shortcuts kbd {
    min-width: 25px;
    padding: 2px 5px;
    border: 1px solid var(--blz-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--blz-surface);
    color: var(--blz-text);
    font: 600 10px/1.3 Inter, sans-serif;
    text-align: center;
}

.blz-print-test-card { border-color: #B2DDFF; background: #F5FBFF; }
.blz-print-test-card__row { align-items: center; }
.blz-print-test-card__actions { flex-wrap: wrap; justify-content: flex-end; }
.blz-test-print-banner {
    max-width: 80mm;
    margin: 0 auto 10px;
    padding: 8px 10px;
    border: 1px solid #B2DDFF;
    border-radius: 8px;
    background: #EFF8FF;
    color: #175CD3;
    text-align: center;
    font-size: 12px;
}
.blz-test-print-banner strong,
.blz-test-print-banner span { display: block; }
.blz-test-print-banner span { margin-top: 2px; font-size: 10px; }

@media (max-width: 680px) {
    .blz-confirm-dialog .blz-modal__foot { flex-direction: column-reverse; }
    .blz-confirm-dialog .blz-modal__foot .blz-btn { width: 100%; }
    .blz-pos-quick { margin-left: 0; margin-right: 0; padding: 9px; }
    .blz-pos-quick__head { align-items: flex-start; }
    .blz-pos-quick__head > div { min-width: 0; }
    .blz-pos-quick__head span { display: none; }
    .blz-pos-quick-product { min-width: 128px; max-width: 155px; }
    .blz-pos-guide-modal .blz-modal__foot { align-items: stretch; flex-direction: column; }
    .blz-pos-guide-modal .blz-modal__foot .blz-btn { width: 100%; }
    .blz-pos-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blz-print-test-card__row { align-items: stretch; flex-direction: column; }
    .blz-print-test-card__actions { width: 100%; }
    .blz-print-test-card__actions .blz-btn { flex: 1 1 100%; justify-content: center; }
}

/* ========================================================================
   Counter UX v1.3 - fast feedback, safer touch targets and return workflow
   ======================================================================== */
.blz-toast--action { align-items: center; }
.blz-toast--action .blz-alert__body { flex: 1 1 auto; min-width: 0; }
.blz-toast__action {
    flex: 0 0 auto; border: 0; border-radius: 7px; padding: 6px 9px;
    background: var(--blz-primary); color: #fff; font: inherit; font-weight: 700;
    cursor: pointer;
}
.blz-toast__action:active { transform: scale(.96); }

.blz-pos-scan-feedback {
    display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 8px 0 2px;
    padding: 7px 10px; border: 1px solid var(--blz-border); border-radius: 8px;
    background: var(--blz-bg-light); color: var(--blz-text-secondary); font-size: 12px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.blz-pos-scan-feedback[hidden] { display: none !important; }
.blz-pos-scan-feedback strong { color: var(--blz-text); }
.blz-pos-scan-feedback.is-success {
    background: var(--blz-success-bg); border-color: #ABEFC6; color: var(--blz-success);
    transform: translateY(-1px);
}
.blz-pos-scan-feedback.is-warning {
    background: var(--blz-warning-bg); border-color: #FEDF89; color: #B54708;
}
.blz-pos-scan-feedback.is-error {
    background: var(--blz-danger-bg); border-color: #FECDCA; color: var(--blz-danger);
}
.blz-pos-scan-feedback__dot {
    width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; background: currentColor;
}
.blz-pos-sound-toggle { margin-left: auto; white-space: nowrap; }

.blz-pos__cart tr.is-low-stock td:first-child { box-shadow: inset 3px 0 0 var(--blz-warning); }
.blz-pos__cart tr.is-out-stock td:first-child { box-shadow: inset 3px 0 0 var(--blz-danger); }
.blz-pos-stock-note { font-weight: 600; }

.blz-return-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-bottom: 1px solid var(--blz-border); background: var(--blz-bg-light);
}
.blz-return-toolbar__summary { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.blz-return-toolbar__summary strong { font-size: 14px; }
.blz-return-toolbar__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.blz-return-qty-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.blz-return-qty-wrap .blz-input { width: 86px !important; }
.blz-table tr.is-selected-return { background: var(--blz-primary-soft, #EFF4FF); }
.blz-return-submit-note { display: flex; align-items: center; gap: 6px; }

.blz-today-strip {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px;
}
.blz-today-stat {
    display: block; padding: 11px 12px; border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius); background: var(--blz-card); color: inherit; text-decoration: none;
}
.blz-today-stat:hover { border-color: var(--blz-primary); text-decoration: none; }
.blz-today-stat__label { display: block; color: var(--blz-muted); font-size: 11px; }
.blz-today-stat__value { display: block; margin-top: 3px; font-size: 17px; font-weight: 700; line-height: 1.2; }
.blz-today-stat__meta { display: block; margin-top: 2px; color: var(--blz-muted); font-size: 10.5px; }
.blz-stock-badge { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; }

@media (max-width: 991.98px) {
    .blz-today-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blz-today-stat:last-child { grid-column: 1 / -1; }
    .blz-return-toolbar { align-items: stretch; flex-direction: column; }
    .blz-return-toolbar__actions .blz-btn { flex: 1 1 auto; }
}

@media (max-width: 575.98px) {
    .blz-today-strip { gap: 6px; }
    .blz-today-stat { padding: 9px 10px; }
    .blz-return-qty-wrap { justify-content: flex-start; }
    .blz-return-qty-wrap .blz-input { width: 100px !important; }
    .blz-pos-scan-feedback { align-items: flex-start; flex-wrap: wrap; }
    .blz-pos-sound-toggle { margin-left: 17px; }
}

/* Touch-screen tills/tablets need forgiving targets, not desktop-sized icons. */
@media (pointer: coarse) {
    .blz-pos .blz-btn,
    .blz-pos-bar .blz-btn { min-height: 42px; }
    .blz-pos .blz-icon-btn { min-width: 40px; min-height: 40px; }
    .blz-pos .blz-qty button { width: 40px; height: 40px; font-size: 19px; }
    .blz-pos .blz-qty input { min-height: 40px; width: 54px; }
    .blz-pos-payment-chip { min-height: 46px; padding: 9px 10px; }
    .blz-pos-quick-product { min-height: 54px; }
    .blz-pos-quick-product__star { width: 38px; min-height: 52px; }
    .blz-pos-mobile-pay .blz-btn { min-height: 50px; }
    [data-sales-return-form] .blz-btn { min-height: 40px; }
}

/* ========================================================================
   Shop UX v1.4 - customer context, closing workflow and end-of-day summary
   ======================================================================== */
.blz-pos-customer-context {
    margin-top: 10px; padding: 10px; border: 1px solid var(--blz-border); border-radius: 9px;
    background: var(--blz-bg-light);
}
.blz-pos-customer-context[hidden] { display: none !important; }
.blz-pos-customer-context.is-loading { opacity: .72; }
.blz-pos-customer-context__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.blz-pos-customer-context__head > div { min-width: 0; }
.blz-pos-customer-context__head strong,
.blz-pos-customer-context__head span { display: block; }
.blz-pos-customer-context__head span { color: var(--blz-muted); font-size: 11px; margin-top: 1px; }
.blz-pos-customer-context__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.blz-pos-customer-context__stats > span { padding: 7px 8px; border-radius: 7px; background: var(--blz-card); border: 1px solid var(--blz-border); min-width: 0; }
.blz-pos-customer-context__stats small,
.blz-pos-customer-context__stats strong { display: block; }
.blz-pos-customer-context__stats small { color: var(--blz-muted); font-size: 9.5px; }
.blz-pos-customer-context__stats strong { margin-top: 2px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blz-pos-customer-context__recent { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.blz-pos-customer-context__recent-label { width: 100%; color: var(--blz-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.blz-pos-customer-context__recent > a,
.blz-pos-customer-context__recent > span:not(.blz-pos-customer-context__recent-label) {
    display: flex; flex-direction: column; min-width: 110px; padding: 6px 8px; border: 1px solid var(--blz-border);
    border-radius: 7px; background: var(--blz-card); color: inherit; text-decoration: none;
}
.blz-pos-customer-context__recent > a:hover { border-color: var(--blz-primary); text-decoration: none; }
.blz-pos-customer-context__recent strong { font-size: 10.5px; }
.blz-pos-customer-context__recent span span,
.blz-pos-customer-context__recent a span { color: var(--blz-muted); font-size: 9.5px; margin-top: 1px; }

.blz-shift-close-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.blz-shift-close-steps > span { display: flex; align-items: flex-start; gap: 7px; padding: 9px; border: 1px solid var(--blz-border); border-radius: 8px; background: var(--blz-bg-light); font-size: 11.5px; }
.blz-shift-close-steps b { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 50%; background: var(--blz-primary); color: #fff; font-size: 10px; }
.blz-shift-variance { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--blz-border); border-radius: 8px; }
.blz-shift-variance strong,
.blz-shift-variance span { display: block; }
.blz-shift-variance span { margin-top: 2px; font-size: 11.5px; }
.blz-shift-variance.is-balanced { border-color: #ABEFC6; background: var(--blz-success-bg); color: var(--blz-success); }
.blz-shift-variance.is-warning { border-color: #FEDF89; background: var(--blz-warning-bg); color: #B54708; }

.blz-eod-kpis { margin-bottom: 14px; }
.blz-eod-shifts { margin-top: 14px; }

@media (max-width: 680px) {
    .blz-pos-customer-context__stats { grid-template-columns: 1fr 1fr; }
    .blz-pos-customer-context__stats > span:last-child { grid-column: 1 / -1; }
    .blz-pos-customer-context__head { align-items: flex-start; }
    .blz-shift-close-steps { grid-template-columns: 1fr; }
}

@media print {
    .blz-eod-kpis { grid-template-columns: repeat(3, 1fr) !important; }
    .blz-eod-shifts { break-before: auto; }
    .blz-content { padding: 0 !important; }
}

/* ==========================================================================
   v1.5.0 - opening workflow, hand-over and duplicate prevention
   ========================================================================== */
.blz-shift-handover {
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid var(--blz-border, #dfe5ec);
    border-radius: 8px;
    background: var(--blz-surface-subtle, #f8fafc);
    font-size: 12px;
    line-height: 1.4;
}
.blz-shift-handover strong { display:block; margin-bottom:2px; }
.blz-shift-handover span { color: var(--blz-muted, #667085); }
.blz-shift-handover.is-warning { border-color:#f4c66a; background:#fff9eb; }
.blz-shift-handover.is-good { border-color:#b9dfc6; background:#f3fbf5; }

.blz-customer-duplicate-box {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #f0c36d;
    background: #fff9e9;
    border-radius: 9px;
}
.blz-customer-duplicate-box__title { font-weight:700; font-size:13px; margin-bottom:6px; }
.blz-customer-duplicate-list { display:grid; gap:6px; }
.blz-customer-duplicate-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:7px 8px; background:rgba(255,255,255,.75); border-radius:7px;
}
.blz-customer-duplicate-row > span { min-width:0; }
.blz-customer-duplicate-row strong, .blz-customer-duplicate-row small { display:block; }
.blz-customer-duplicate-row small { color:var(--blz-muted, #667085); margin-top:2px; }

.blz-start-day-status {
    display:flex; align-items:center; gap:13px; padding:14px 16px; margin-bottom:16px;
    border:1px solid #efd08c; border-radius:12px; background:#fff9eb;
}
.blz-start-day-status.is-ready { border-color:#b9dfc6; background:#f2fbf5; }
.blz-start-day-status__icon { flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.8); }
.blz-start-day-status > div:nth-child(2) { flex:1; min-width:0; }
.blz-start-day-status strong, .blz-start-day-status span { display:block; }
.blz-start-day-status span { margin-top:2px; color:var(--blz-muted, #667085); font-size:13px; }
.blz-start-day-registers { display:grid; }
.blz-start-day-register { padding:13px 15px; border-bottom:1px solid var(--blz-border, #e5e7eb); }
.blz-start-day-register:last-child { border-bottom:0; }
.blz-start-day-register__top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.blz-start-day-register__top strong, .blz-start-day-register__top span { display:block; }
.blz-start-day-register__top > div > span { color:var(--blz-muted, #667085); font-size:12px; margin-top:1px; }
.blz-start-day-register__float { margin-top:8px; padding-top:8px; border-top:1px dashed var(--blz-border, #e5e7eb); font-size:12px; color:var(--blz-muted, #667085); }
.blz-opening-checklist { display:grid; gap:8px; }
.blz-opening-checklist a { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--blz-border, #e5e7eb); border-radius:9px; text-decoration:none; color:inherit; }
.blz-opening-checklist a:hover { background:var(--blz-surface-subtle, #f8fafc); }
.blz-opening-checklist b { width:25px; height:25px; border-radius:50%; display:grid; place-items:center; background:#eef2f6; flex:0 0 auto; }
.blz-opening-checklist span, .blz-opening-checklist strong, .blz-opening-checklist small { display:block; }
.blz-opening-checklist small { color:var(--blz-muted, #667085); margin-top:2px; line-height:1.35; }
.blz-notification-filter { margin-bottom:12px; }
.blz-sale-row-actions { white-space:nowrap; }
.blz-sale-row-actions .blz-btn { margin:2px 2px 2px 0; }

@media (max-width: 767.98px) {
    .blz-start-day-status { align-items:flex-start; flex-wrap:wrap; }
    .blz-start-day-status .blz-btn { width:100%; }
    .blz-start-day-grid { grid-template-columns:1fr; }
    .blz-customer-duplicate-row { align-items:flex-start; flex-direction:column; }
    .blz-customer-duplicate-row .blz-btn { width:100%; }
}

/* ==========================================================================
   v1.6.0 - back-office clarity, safer receiving/payments and owner attention
   ========================================================================== */
.blz-payment-quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.blz-payment-allocation { margin-top:16px; padding:14px; border:1px solid var(--blz-border, #e5e7eb); border-radius:10px; background:var(--blz-surface-subtle, #f8fafc); }
.blz-payment-allocation__table { margin-top:12px; }
.blz-allocation-input { width:110px; display:inline-block; margin-right:5px; }
.blz-payment-allocation__summary { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--blz-border, #e5e7eb); font-size:13px; }
.blz-payment-allocation__summary span { color:var(--blz-muted, #667085); }
.blz-payment-allocation__summary strong { color:var(--blz-text, #101828); margin-left:4px; }

.blz-receive-order-summary .blz-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--blz-muted, #667085); margin-bottom:3px; }
.blz-receive-table .blz-input { min-width:96px; }
.blz-receive-serial-box { margin-top:10px; padding:10px; border:1px dashed var(--blz-border, #d0d5dd); border-radius:8px; background:#fff; min-width:280px; }
.blz-receive-serial-box textarea { min-height:78px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
.blz-receive-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.blz-receive-summary { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--blz-muted, #667085); }
.blz-receive-summary strong { color:var(--blz-text, #101828); margin-left:4px; }

.blz-adjustment-product { margin-top:18px; }
.blz-adjustment-preview { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:16px; }
.blz-adjustment-preview > div { padding:11px 12px; border:1px solid var(--blz-border, #e5e7eb); border-radius:9px; background:var(--blz-surface-subtle, #f8fafc); }
.blz-adjustment-preview span, .blz-adjustment-preview strong { display:block; }
.blz-adjustment-preview span { font-size:11px; color:var(--blz-muted, #667085); margin-bottom:3px; }
.blz-adjustment-preview strong { font-size:17px; }

.blz-audit-filters { margin-bottom:14px; }
.blz-audit-table td { vertical-align:top; }
.blz-audit-detail-row > td { background:var(--blz-surface-subtle, #f8fafc); padding:0 !important; }
.blz-audit-diff { padding:14px 18px 18px; }
.blz-audit-diff__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.blz-table--compact th, .blz-table--compact td { padding-top:7px; padding-bottom:7px; }

.blz-owner-attention { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.blz-attention-card { display:block; padding:12px 13px; border:1px solid var(--blz-border, #e5e7eb); border-radius:10px; background:#fff; text-decoration:none; color:inherit; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.blz-attention-card:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(16,24,40,.07); }
.blz-attention-card span, .blz-attention-card strong, .blz-attention-card small { display:block; }
.blz-attention-card span { color:var(--blz-muted, #667085); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.blz-attention-card strong { font-size:24px; line-height:1.15; margin:3px 0; }
.blz-attention-card small { color:var(--blz-muted, #667085); }
.blz-attention-card.is-warning { border-color:#efcc7b; background:#fffaf0; }
.blz-attention-card.is-danger { border-color:#f0b3ad; background:#fff5f4; }

.blz-settings-finder { max-width:760px; margin-bottom:18px; }
.blz-settings-group { margin-bottom:24px; }
.blz-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.blz-section-heading h2 { margin:0; font-size:17px; }
.blz-section-heading span { color:var(--blz-muted, #667085); font-size:12px; }
.blz-settings-card[hidden] { display:none !important; }
.blz-empty-filter { padding:18px; border:1px dashed var(--blz-border, #d0d5dd); border-radius:10px; color:var(--blz-muted, #667085); background:var(--blz-surface-subtle, #f8fafc); }

@media (max-width: 1199.98px) {
    .blz-owner-attention { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .blz-adjustment-preview { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
    .blz-owner-attention { grid-template-columns:1fr 1fr; }
    .blz-receive-footer { align-items:stretch; }
    .blz-receive-footer .blz-btn { width:100%; }
    .blz-receive-summary { width:100%; justify-content:space-between; }
    .blz-payment-allocation { padding:10px; }
    .blz-allocation-input { width:92px; }
    .blz-section-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 520px) {
    .blz-owner-attention { grid-template-columns:1fr; }
    .blz-adjustment-preview { grid-template-columns:1fr 1fr; }
}

/* ========================================================================== */
/* v1.9 Final Shop Experience: action feedback, safer forms, mobile save UX  */
/* ========================================================================== */

/* A thin progress line answers the most common shop-floor question after a
   click: "did it register?" It is deliberately subtle so it never covers POS. */
.blz-page-activity {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background: transparent;
    transition: opacity .12s ease;
}
.blz-page-activity span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: var(--blz-primary);
    transform: translateX(-110%);
}
.blz-page-activity.is-active { opacity: 1; }
.blz-page-activity.is-active span { animation: blz-page-activity 1.05s ease-in-out infinite; }
.blz-page-activity.is-done span {
    width: 100%;
    transform: translateX(0);
    animation: none;
    transition: width .14s ease, transform .14s ease;
}
@keyframes blz-page-activity {
    0% { transform: translateX(-110%); }
    55% { transform: translateX(105%); }
    100% { transform: translateX(275%); }
}

.blz-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: blz-spin .65s linear infinite;
}
.blz-spinner--sm { width: 14px; height: 14px; flex-basis: 14px; border-width: 2px; }
@keyframes blz-spin { to { transform: rotate(360deg); } }

.blz-btn { transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease, box-shadow .12s ease; }
.blz-btn:active:not(:disabled):not(.is-disabled) { transform: scale(.98); }
.blz-btn.is-loading { cursor: wait; }
.blz-btn.is-loading .blz-spinner { color: currentColor; }

/* Keyboard focus is intentionally stronger than mouse focus. A shop may use a
   barcode scanner + keyboard even when the interface is otherwise touch-first. */
.blz-btn:focus-visible,
.blz-icon-btn:focus-visible,
.blz-input:focus-visible,
.blz-select:focus-visible,
.blz-textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--blz-primary);
    outline-offset: 2px;
}

.blz-required { color: var(--blz-danger); font-weight: 700; }
.blz-validation-summary { margin-bottom: 16px; }
.blz-field__error[role="alert"] { line-height: 1.35; }
.blz-input.is-invalid,
.blz-select.is-invalid,
.blz-textarea.is-invalid {
    border-color: var(--blz-danger);
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .08);
}

.blz-unsaved-indicator {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #B54708;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.blz-unsaved-indicator::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F79009;
}
.blz-unsaved-indicator[hidden] { display: none !important; }

.blz-picker.is-loading .blz-input,
.blz-search.is-loading input { cursor: progress; }
.blz-picker__loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Long data-entry pages keep Save/Cancel within thumb reach on a phone. The
   sticky treatment is opt-in from JS only for substantial forms. */
@media (max-width: 680px) {
    .blz-form--long .blz-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 18;
        margin: 18px -14px -14px;
        padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid var(--blz-border);
        box-shadow: 0 -8px 22px rgba(16, 24, 40, .08);
        backdrop-filter: blur(8px);
    }
    .blz-form--long .blz-form-actions .blz-unsaved-indicator {
        width: 100%;
        justify-content: center;
        order: -1;
        margin: 0 0 2px;
    }
    .blz-toast-stack {
        left: 12px;
        right: 12px;
        top: calc(12px + env(safe-area-inset-top));
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blz-page-activity span,
    .blz-spinner { animation-duration: 1.5s; }
    .blz-btn { transition: none; }
}
@media (max-width: 680px) {
    .blz-form--long .blz-mobile-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 18;
        padding-bottom: calc(11px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -8px 22px rgba(16, 24, 40, .08);
        backdrop-filter: blur(8px);
    }
    .blz-form--long .blz-mobile-form-actions .blz-unsaved-indicator {
        width: 100%;
        justify-content: center;
        margin: 4px 0 0;
    }
}

/* ==========================================================================
   v1.9.1 Dashboard & Reports visual polish
   ========================================================================== */

.blz-report-shell {
    display: grid;
    gap: 16px;
}

.blz-report-toolbar {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-lg);
    background: var(--blz-card);
    box-shadow: var(--blz-shadow);
}
.blz-report-toolbar .blz-field { min-width: 150px; margin: 0; }
.blz-report-toolbar__actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.blz-report-period {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--blz-bg-light);
    color: var(--blz-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.blz-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.blz-report-kpi {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-lg);
    background: var(--blz-card);
    box-shadow: var(--blz-shadow);
}
.blz-report-kpi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.blz-report-kpi__label {
    color: var(--blz-text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.blz-report-kpi__value {
    overflow: hidden;
    color: var(--blz-text);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blz-report-kpi__meta {
    margin-top: 5px;
    color: var(--blz-text-muted);
    font-size: 11.5px;
}
.blz-report-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--blz-blue-light);
    color: var(--blz-primary);
    flex: 0 0 auto;
}

.blz-report-grid-main {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
    gap: 16px;
    align-items: stretch;
}
.blz-report-grid-equal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.blz-chart-card {
    min-width: 0;
    overflow: hidden;
}
.blz-chart-card .blz-card__head {
    min-height: 54px;
    align-items: center;
}
.blz-chart-card .blz-card__body {
    min-width: 0;
    padding: 16px 18px 18px;
}
.blz-chart-card__subtitle {
    display: block;
    margin-top: 2px;
    color: var(--blz-text-muted);
    font-size: 11.5px;
    font-weight: 400;
}
.blz-chart-summary {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--blz-border);
    color: var(--blz-text-secondary);
    font-size: 11.5px;
}
.blz-chart-summary strong { color: var(--blz-text); font-weight: 650; }

.blz-chart { width: 100%; min-width: 0; }
.blz-chart svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.blz-chart--line { min-height: 220px; }
.blz-chart--line svg { min-height: 220px; }
.blz-chart--bars svg { min-height: 86px; }
.blz-chart-gridline { stroke: var(--blz-border); stroke-width: 1; }
.blz-chart-axis { fill: var(--blz-text-muted); font-size: 10px; }
.blz-chart-line {
    fill: none;
    stroke: var(--blz-primary);
    stroke-width: 2.75;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.blz-chart-dot {
    fill: var(--blz-card);
    stroke: var(--blz-primary);
    stroke-width: 2.3;
}
.blz-chart-track { fill: var(--blz-bg-light); }
.blz-chart-bar-label { fill: var(--blz-text); font-size: 11.5px; font-weight: 550; }
.blz-chart-bar-value { fill: var(--blz-text-secondary); font-size: 11px; font-weight: 600; }
.blz-chart-donut-label { fill: var(--blz-text-muted); font-size: 10px; }
.blz-chart-donut-value { fill: var(--blz-text); font-size: 15px; font-weight: 700; }
.blz-chart-empty {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed var(--blz-border);
    border-radius: var(--blz-radius);
    background: var(--blz-bg-light);
    color: var(--blz-text-muted);
    text-align: center;
    font-size: 12.5px;
}
.blz-chart-empty__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blz-card);
    color: var(--blz-primary);
    box-shadow: var(--blz-shadow);
    font-size: 16px;
}

.blz-donut { flex-wrap: nowrap; gap: 18px; }
.blz-donut > svg { flex: 0 0 190px; width: 190px; max-width: 190px; }
.blz-legend { min-width: 0; flex: 1 1 auto; }
.blz-legend__item {
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--blz-border);
}
.blz-legend__item:last-child { border-bottom: 0; }
.blz-legend__swatch { width: 9px; height: 9px; border-radius: 50%; }
.blz-legend__text { min-width: 0; flex: 1 1 auto; }
.blz-legend__label { display: block; font-weight: 550; }
.blz-legend__amount { display: block; margin-top: 1px; color: var(--blz-text-muted); font-size: 10.5px; }
.blz-legend__value { font-weight: 650; color: var(--blz-text-secondary); }

.blz-dashboard-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
    gap: 16px;
    margin-bottom: 16px;
}
.blz-dashboard-ranking {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.blz-dashboard-ranking .blz-card { min-width: 0; }

.blz-report-table-card { overflow: hidden; }
.blz-report-table-card .blz-card__head { background: var(--blz-card); }
.blz-report-table-card .blz-table thead th {
    background: var(--blz-bg-light);
    color: var(--blz-text-secondary);
    font-size: 11px;
    letter-spacing: .015em;
    text-transform: uppercase;
}
.blz-report-table-card .blz-table tbody tr:hover { background: rgba(21, 94, 239, .025); }
.blz-report-table-card .blz-table tfoot td { background: var(--blz-bg-light); font-weight: 700; }

.blz-ageing-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.blz-ageing-cell {
    padding: 10px;
    border: 1px solid var(--blz-border);
    border-radius: 8px;
    background: var(--blz-card);
}
.blz-ageing-cell__label { display: block; color: var(--blz-text-muted); font-size: 10.5px; }
.blz-ageing-cell__value { display: block; margin-top: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }

.blz-report-hub-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.blz-report-hub-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 16px;
    border: 1px solid var(--blz-border);
    border-radius: var(--blz-radius-lg);
    background: var(--blz-card);
    color: inherit;
    box-shadow: var(--blz-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.blz-report-hub-card:hover {
    transform: translateY(-2px);
    border-color: var(--blz-primary);
    box-shadow: var(--blz-shadow-md);
    text-decoration: none;
}
.blz-report-hub-card__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    border-radius: 9px;
    background: var(--blz-blue-light);
    color: var(--blz-primary);
}
.blz-report-hub-card__title { color: var(--blz-text); font-size: 14px; font-weight: 700; }
.blz-report-hub-card__text { margin-top: 5px; color: var(--blz-text-secondary); font-size: 12px; line-height: 1.45; }
.blz-report-hub-card__link { margin-top: auto; padding-top: 12px; color: var(--blz-primary); font-size: 11.5px; font-weight: 650; }

@media (max-width: 1199.98px) {
    .blz-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blz-dashboard-charts, .blz-report-grid-main { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr); }
    .blz-report-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899.98px) {
    .blz-dashboard-charts,
    .blz-dashboard-ranking,
    .blz-report-grid-main,
    .blz-report-grid-equal { grid-template-columns: 1fr; }
    .blz-donut { justify-content: center; }
    .blz-ageing-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blz-ageing-cell:last-child { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .blz-report-toolbar { padding: 11px; gap: 9px; }
    .blz-report-toolbar .blz-field { flex: 1 1 calc(50% - 6px); min-width: 125px; }
    .blz-report-toolbar__actions { width: 100%; margin-left: 0; }
    .blz-report-toolbar__actions .blz-btn,
    .blz-report-toolbar > .blz-btn { flex: 1 1 auto; justify-content: center; }
    .blz-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .blz-report-kpi { padding: 12px; }
    .blz-report-kpi__value { font-size: 18px; }
    .blz-report-kpi__icon { width: 27px; height: 27px; }
    .blz-chart-card .blz-card__body { padding: 12px; }
    .blz-chart--line { min-height: 190px; overflow-x: auto; }
    .blz-chart--line svg { min-width: 600px; min-height: 190px; }
    .blz-chart--bars { overflow-x: auto; }
    .blz-chart--bars svg { min-width: 590px; }
    .blz-donut { flex-direction: column; align-items: stretch; }
    .blz-donut > svg { align-self: center; flex-basis: 175px; width: 175px; max-width: 175px; }
    .blz-legend { width: 100%; }
    .blz-report-hub-grid { grid-template-columns: 1fr; }
    .blz-report-hub-card { min-height: 124px; }
    .blz-ageing-strip { grid-template-columns: 1fr; }
    .blz-ageing-cell:last-child { grid-column: auto; }
}

@media print {
    .blz-report-toolbar { display: none !important; }
    .blz-report-kpis { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .blz-report-kpi { box-shadow: none; break-inside: avoid; padding: 10px; }
    .blz-report-kpi__value { font-size: 17px; }
    .blz-dashboard-charts, .blz-report-grid-main, .blz-report-grid-equal, .blz-dashboard-ranking {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .blz-chart-card { break-inside: avoid; box-shadow: none; }
    .blz-chart--line svg, .blz-chart--bars svg { min-width: 0 !important; }
    .blz-report-table-card { break-inside: auto; }
}

/* Some owner views pre-date .blz-kpi-grid and use blz-kpi-row. Give both the
   same dependable grid rather than relying on breakpoint-only declarations. */
.blz-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Dashboard KPI cards carry the same quiet depth as report cards, while still
   staying compact enough for a till or small laptop. */
.blz-kpi-grid .blz-kpi,
.blz-today-stat {
    border-radius: var(--blz-radius-lg);
    box-shadow: var(--blz-shadow);
}
.blz-kpi-grid .blz-kpi:hover,
.blz-today-stat:hover {
    transform: translateY(-1px);
    box-shadow: var(--blz-shadow-md);
}
.blz-kpi-grid .blz-kpi,
.blz-today-stat {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
@media (max-width: 767.98px) {
    .blz-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 479.98px) {
    .blz-kpi-row { grid-template-columns: 1fr; }
}