/* ===================================
   KNZ UI POLISH — additive, namespaced
   Safe to remove anytime. Does not override existing styles.
   =================================== */

/* ---------- Design tokens ---------- */
:root {
    --knz-color-success: #10b981;
    --knz-color-success-bg: #ecfdf5;
    --knz-color-error: #ef4444;
    --knz-color-error-bg: #fef2f2;
    --knz-color-warning: #f59e0b;
    --knz-color-warning-bg: #fffbeb;
    --knz-color-info: #3b82f6;
    --knz-color-info-bg: #eff6ff;
    --knz-color-neutral: #6b7280;
    --knz-color-neutral-bg: #f9fafb;
    --knz-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --knz-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --knz-shadow-lg: 0 10px 25px rgba(0,0,0,0.12);
    --knz-radius: 10px;
    --knz-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Toast notifications ---------- */
.knz-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    pointer-events: none;
}
[dir="rtl"] .knz-toast-container {
    right: auto;
    left: 20px;
}
.knz-toast {
    background: white;
    border-radius: var(--knz-radius);
    box-shadow: var(--knz-shadow-lg);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 4px solid var(--knz-color-neutral);
    transform: translateX(120%);
    opacity: 0;
    transition: transform var(--knz-transition), opacity var(--knz-transition);
    pointer-events: auto;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2937;
}
[dir="rtl"] .knz-toast {
    border-left: none;
    border-right: 4px solid var(--knz-color-neutral);
    transform: translateX(-120%);
}
.knz-toast.knz-toast-show {
    transform: translateX(0);
    opacity: 1;
}
.knz-toast-success {
    border-left-color: var(--knz-color-success);
    background: var(--knz-color-success-bg);
}
[dir="rtl"] .knz-toast-success { border-right-color: var(--knz-color-success); }
.knz-toast-error {
    border-left-color: var(--knz-color-error);
    background: var(--knz-color-error-bg);
}
[dir="rtl"] .knz-toast-error { border-right-color: var(--knz-color-error); }
.knz-toast-warning {
    border-left-color: var(--knz-color-warning);
    background: var(--knz-color-warning-bg);
}
[dir="rtl"] .knz-toast-warning { border-right-color: var(--knz-color-warning); }
.knz-toast-info {
    border-left-color: var(--knz-color-info);
    background: var(--knz-color-info-bg);
}
[dir="rtl"] .knz-toast-info { border-right-color: var(--knz-color-info); }
.knz-toast-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.knz-toast-success .knz-toast-icon { color: var(--knz-color-success); }
.knz-toast-error .knz-toast-icon { color: var(--knz-color-error); }
.knz-toast-warning .knz-toast-icon { color: var(--knz-color-warning); }
.knz-toast-info .knz-toast-icon { color: var(--knz-color-info); }
.knz-toast-body { flex: 1; min-width: 0; }
.knz-toast-title {
    font-weight: 600;
    margin: 0 0 2px 0;
}
.knz-toast-message {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
}
.knz-toast-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color var(--knz-transition);
    flex-shrink: 0;
}
.knz-toast-close:hover { color: #1f2937; }

/* ---------- Empty state ---------- */
.knz-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
    color: #6b7280;
    font-family: 'Inter', system-ui, sans-serif;
}
.knz-empty-icon {
    font-size: 56px;
    color: #d1d5db;
    margin-bottom: 16px;
    line-height: 1;
}
.knz-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 6px 0;
}
.knz-empty-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
    max-width: 360px;
}
.knz-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--knz-transition), transform var(--knz-transition);
}
.knz-empty-action:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

/* ---------- Button polish (opt-in via class knz-btn-polish) ---------- */
.knz-btn-polish {
    transition: transform var(--knz-transition), box-shadow var(--knz-transition), background var(--knz-transition);
}
.knz-btn-polish:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
    box-shadow: var(--knz-shadow-md);
}
.knz-btn-polish:active:not(:disabled):not(.disabled) {
    transform: translateY(0);
    box-shadow: var(--knz-shadow-sm);
}
.knz-btn-polish:disabled,
.knz-btn-polish.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- Loading overlay (full-screen blur) ---------- */
.knz-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--knz-transition);
}
.knz-loading-overlay.knz-loading-show {
    opacity: 1;
    pointer-events: auto;
}
.knz-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: knz-spin 800ms linear infinite;
}
@keyframes knz-spin { to { transform: rotate(360deg); } }

/* ---------- Subtle focus ring polish ---------- */
.knz-btn-polish:focus-visible,
.knz-empty-action:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.4);
    outline-offset: 2px;
}

/* ---------- Button loading state (inline spinner inside button) ---------- */
.knz-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: 0.85;
}
.knz-btn-loading > * {
    visibility: hidden !important;
}
.knz-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: knz-spin 700ms linear infinite;
    color: #fff;
    opacity: 0.95;
}
/* Adjust spinner color for light-background buttons */
.btn-light.knz-btn-loading::after,
.btn-outline-primary.knz-btn-loading::after,
.btn-outline-secondary.knz-btn-loading::after,
.btn-outline-success.knz-btn-loading::after,
.btn-outline-danger.knz-btn-loading::after,
.btn-outline-warning.knz-btn-loading::after,
.btn-outline-info.knz-btn-loading::after {
    color: #4f46e5;
}

/* ---------- Auto-loading: forms submitting via async handlers ---------- */
/* When you add data-knz-busy="1" to a button, it auto-gets the spinner */
button[data-knz-busy="1"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: 0.85;
}
button[data-knz-busy="1"] > * { visibility: hidden !important; }
button[data-knz-busy="1"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: knz-spin 700ms linear infinite;
    color: #fff;
    opacity: 0.95;
}

/* ---------- Skeleton row helper (reuses existing .skeleton animation) ---------- */
.knz-skeleton-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.knz-skeleton-bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ===================================
   AUTOMATIC EMPTY-STATE ENHANCEMENT
   Transforms existing "No invoices yet" rows + info alerts
   into friendly, pretty empty states without touching JS.
   =================================== */

/* 1) Empty rows in tables: <tr><td colspan="N" class="text-center text-muted">...</td></tr> */
tbody tr td[colspan].text-muted.text-center {
    padding: 48px 20px !important;
    font-size: 15px;
    color: #6b7280;
    background: linear-gradient(180deg, #fafafa 0%, #f5f7fa 100%);
    vertical-align: middle;
    border: none;
}
tbody tr td[colspan].text-muted.text-center::before {
    content: '\F1F4'; /* Bootstrap Icons: inbox */
    font-family: 'bootstrap-icons';
    font-weight: normal;
    font-style: normal;
    display: block;
    font-size: 52px;
    color: #d1d5db;
    margin-bottom: 14px;
    line-height: 1;
}
/* Subtle hover nothing — empty rows shouldn't look clickable */
tbody tr:has(td[colspan].text-muted.text-center) {
    cursor: default;
    background: transparent;
}
tbody tr:has(td[colspan].text-muted.text-center):hover {
    background: transparent;
}

/* 2) Empty alert-info panels (inline "no products" messages) */
.alert.alert-info:has(> .bi-info-circle):only-child,
.col-12 > .alert.alert-info:has(> .bi-info-circle) {
    padding: 40px 24px;
    text-align: center;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--knz-radius);
    color: #0369a1;
    font-size: 15px;
}
.alert.alert-info:has(> .bi-info-circle) .bi-info-circle {
    display: block;
    font-size: 42px;
    margin-bottom: 10px;
    color: #60a5fa;
    opacity: 0.8;
}

/* 3) Empty alert-warning panels (similar treatment) */
.alert.alert-warning:has(> .bi-exclamation-triangle):only-child {
    padding: 40px 24px;
    text-align: center;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: var(--knz-radius);
    color: #92400e;
    font-size: 15px;
}
.alert.alert-warning:has(> .bi-exclamation-triangle) .bi-exclamation-triangle {
    display: block;
    font-size: 42px;
    margin-bottom: 10px;
    color: #f59e0b;
    opacity: 0.85;
}

/* Fallback for browsers without :has() — keep original simple look, don't break anything */
@supports not selector(:has(*)) {
    /* Older browsers see no empty-state enhancement, but nothing breaks */
}

/* ===================================
   Keyboard-navigable rows (inventory, lists, etc.)
   Rows rendered with class .kb-nav-row + tabindex="0"
   =================================== */
tr.kb-nav-row,
.kb-nav-row {
    outline: none;
    cursor: pointer;
    transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* Kill Bootstrap's default gray hover tint on these rows so it doesn't
   compete with the blue keyboard highlight (the "black shadow" the user saw
   was actually the table-hover gray background). */
.table-hover > tbody > tr.kb-nav-row:hover > *,
.table > tbody > tr.kb-nav-row:hover > * {
    --bs-table-hover-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-accent-bg: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.kb-nav-row:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Active / focused row — full-width highlight bar with strong shadow. */
tr.kb-nav-row:focus,
tr.kb-nav-row:focus-visible,
tr.kb-nav-row.kb-row-active,
.kb-nav-row:focus,
.kb-nav-row:focus-visible,
.kb-nav-row.kb-row-active {
    background-color: #d6e7ff !important;
    background-image: linear-gradient(90deg, #d6e7ff 0%, #e9f2ff 100%) !important;
    box-shadow:
        0 0 0 2px #0d6efd inset,
        0 6px 18px rgba(13, 110, 253, 0.28),
        0 2px 4px rgba(13, 110, 253, 0.18) !important;
    position: relative;
    z-index: 2;
    transform: translateZ(0);
}

/* Force every cell inside the focused TABLE row to share the blue highlight. */
tbody tr.kb-nav-row:focus > td,
tbody tr.kb-nav-row:focus-visible > td,
tbody tr.kb-nav-row.kb-row-active > td,
tbody tr.kb-nav-row:focus > th,
tbody tr.kb-nav-row:focus-visible > th,
tbody tr.kb-nav-row.kb-row-active > th {
    background-color: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-accent-bg: transparent !important;
    border-top-color: #0d6efd !important;
    border-bottom-color: #0d6efd !important;
}

/* Card / non-table layouts (e.g. the inventory card-row in the screenshot). */
div.kb-nav-row:focus,
div.kb-nav-row:focus-visible,
div.kb-nav-row.kb-row-active,
li.kb-nav-row:focus,
li.kb-nav-row:focus-visible,
li.kb-nav-row.kb-row-active {
    border-radius: 8px;
    outline: 2px solid #0d6efd !important;
    outline-offset: -2px;
}