/**
 * admin-catalog.css
 *
 * Master shared stylesheet untuk modul Katalog Admin:
 * Produk, Kategori, Satuan, Varian, Modifier, Brand, Label Print.
 *
 * Setiap view hanya boleh berisi CSS yang SPESIFIK untuk halaman itu.
 * Semua class yang SAMA di banyak view harus ada di sini.
 *
 * ---------------------------------------------------------------
 * DAFTAR CLASS SHARED:
 *   .ka-sticky     — sticky filter area
 *   .ka-glass      — glassmorphism card (filter bar, summary)
 *   .ka-input      — shared input/select style
 *   .ka-input.has-icon-left — input dengan icon kiri
 *   .ka-card       — item card dengan hover effect
 *   .ka-card-lg    — card dengan radial gradient (product, brand, variant)
 *   .ka-sheet      — modal bottom sheet
 *   .ka-cloak      — page fade-in on load
 *   .ka-ready      — page fade-in ready state
 *   .ka-upload-box — upload image dashed box
 *   .ka-stock-row  — stok outlet row
 *   .ka-pill       — badge/pill kecil
 *   .ka-info-panel — info panel dalam card
 *   .ka-info-line  — baris info label + value
 *   .ka-overlay    — global loading overlay
 *   .ka-spinner    — spinner animasi
 *   .ka-avatar     — icon avatar dalam card
 * ---------------------------------------------------------------
 */

/* ================================================================
   1. STICKY AREA
   ================================================================ */

.ka-sticky {
    position: sticky;
    top: 0;
    z-index: 35;
    margin-inline: -.75rem;
    padding: .2rem .75rem .25rem; /* Made sticky header sit flush to top edge again */
    background: rgba(245, 245, 247, .78);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
}

/* Add top padding to main container to restore space/gap below the topbar header */
main:has(.ka-sticky) {
    padding-top: 0.75rem !important;
}

.dark .ka-sticky {
    background: rgba(10, 10, 12, .78);
}

@media (min-width: 640px) {
    .ka-sticky {
        margin-inline: -1.25rem;
        padding-inline: 1.25rem;
        padding-top: .25rem;
        padding-bottom: .3rem;
    }
}

/* Slimmer padding for glass containers (filters row) inside sticky header */
.ka-sticky .ka-glass {
    padding: .35rem .6rem !important; /* Even tighter filter row padding */
}

/* Reduce catalog top tabs bottom margin */
.ka-sticky > div.mb-4 {
    margin-bottom: 0.25rem !important;
}



/* Shrink select dropdowns, input elements, and buttons in filter row */
.ka-sticky select,
.ka-sticky input,
.ka-sticky button.ios-btn {
    padding-top: .32rem !important;
    padding-bottom: .32rem !important;
    font-size: .75rem !important;
    border-radius: .75rem !important;
}

.ka-sticky button.ios-btn i {
    width: .8rem !important;
    height: .8rem !important;
}

/* Global compact summary badges row inside sticky header */
#productSummaryBadges,
#categorySummaryBadges,
#unitSummaryBadges,
#variantSummaryBadges,
#modifierSummaryBadges,
#brandSummaryBadges,
.ka-sticky-summary-row {
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
    padding: .15rem 0 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .045) !important;
    margin-top: .2rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

#productSummaryBadges::-webkit-scrollbar,
#categorySummaryBadges::-webkit-scrollbar,
#unitSummaryBadges::-webkit-scrollbar,
#variantSummaryBadges::-webkit-scrollbar,
#modifierSummaryBadges::-webkit-scrollbar,
#brandSummaryBadges::-webkit-scrollbar,
.ka-sticky-summary-row::-webkit-scrollbar {
    display: none !important;
}

.dark #productSummaryBadges,
.dark #categorySummaryBadges,
.dark #unitSummaryBadges,
.dark #variantSummaryBadges,
.dark #modifierSummaryBadges,
.dark #brandSummaryBadges,
.dark .ka-sticky-summary-row {
    border-color: rgba(255, 255, 255, .07) !important;
}

/* Global compact style for individual summary badges */
.product-summary-badge,
.cat-summary-badge,
.unit-summary-badge,
.variant-summary-badge,
.modifier-summary-badge,
.brand-summary-badge,
.ka-summary-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .2rem !important;
    border-radius: 999px !important;
    padding: .12rem .45rem !important;
    font-size: .65rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}


/* ================================================================
   2. GLASS CARD (filter bar, summary cards)
   ================================================================ */

.ka-glass {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 1.35rem;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.dark .ka-glass {
    background: rgba(28, 28, 30, .78);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
}

/* ================================================================
   3. SHARED INPUT / SELECT
   ================================================================ */

.ka-input {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .07);
    background: rgba(255, 255, 255, .78);
    border-radius: 1rem;
    padding: .82rem .95rem;
    font-size: .9rem;
    font-weight: 500;
    color: #1D1D1F;
    outline: none;
    transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ka-input.has-icon-left {
    padding-left: 2.65rem !important;
}

.ka-input:focus {
    border-color: rgba(0, 122, 255, .34);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .10);
}

.ka-input:disabled,
.ka-input[disabled] {
    opacity: .65;
    cursor: not-allowed;
    background: rgba(118, 118, 128, .10);
}

.dark .ka-input {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .08);
    color: #F5F5F7;
}

.dark .ka-input:focus {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(10, 132, 255, .34);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, .14);
}

/* ================================================================
   4. ITEM CARD — Standard (satuan, kategori, modifier)
   ================================================================ */

.ka-card {
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 1.55rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .055);
    padding: 1.1rem;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.dark .ka-card {
    background: rgba(28, 28, 30, .76);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
}

.ka-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 122, 255, .16);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .075);
}

.dark .ka-card:hover {
    box-shadow: 0 22px 52px rgba(0, 0, 0, .40);
}

/* ================================================================
   5. ITEM CARD — Large (produk, brand, variant) — radial gradient
   ================================================================ */

.ka-card-lg {
    background:
        radial-gradient(circle at 92% 8%, rgba(0, 122, 255, .08), transparent 28%),
        rgba(255, 255, 255, .88);
    border: 1px solid rgba(0, 122, 255, .10);
    border-radius: 1.7rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
    padding: 1rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    backdrop-filter: blur(24px) saturate(165%);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
}

.dark .ka-card-lg {
    background:
        radial-gradient(circle at 92% 8%, rgba(10, 132, 255, .14), transparent 28%),
        rgba(28, 28, 30, .82);
    border-color: rgba(10, 132, 255, .12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

.ka-card-lg:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 122, 255, .18);
    box-shadow: 0 24px 56px rgba(15, 23, 42, .08);
}

.dark .ka-card-lg:hover {
    box-shadow: 0 24px 56px rgba(0, 0, 0, .42);
}

/* ================================================================
   6. MODAL BOTTOM SHEET
   ================================================================ */

.ka-sheet {
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 -18px 70px rgba(15, 23, 42, .20);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
}

.dark .ka-sheet {
    background: rgba(28, 28, 30, .94);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 -18px 70px rgba(0, 0, 0, .55);
}

@media (max-width: 1023px) {
    .ka-sheet {
        border-radius: 1.8rem 1.8rem 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
    }

    .ka-sheet-wrapper .modal-shell {
        align-items: flex-end !important;
        padding: 0 !important;
    }
}

@media (min-width: 1024px) {
    .ka-sheet {
        border-radius: 1.65rem;
        max-height: 90vh;
    }
}

/* ================================================================
   7. PAGE CLOAK — fade-in saat halaman pertama load
   ================================================================ */

.ka-cloak {
    opacity: 0;
    transform: translateY(4px);
}

.ka-ready {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
}

/* ================================================================
   8. UPLOAD BOX — drag/click upload gambar
   ================================================================ */

.ka-upload-box {
    border: 2px dashed rgba(0, 0, 0, .10);
    background: rgba(255, 255, 255, .58);
    transition: border-color .16s ease, background .16s ease;
}

.ka-upload-box:hover {
    border-color: rgba(0, 122, 255, .34);
    background: rgba(0, 122, 255, .045);
}

.dark .ka-upload-box {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
}

.dark .ka-upload-box:hover {
    border-color: rgba(10, 132, 255, .38);
    background: rgba(10, 132, 255, .10);
}

/* ================================================================
   9. STOCK ROW — baris stok per outlet dalam modal
   ================================================================ */

.ka-stock-row {
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .64);
    border: 1px solid rgba(0, 0, 0, .055);
    padding: .85rem;
}

.dark .ka-stock-row {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
}

/* ================================================================
   10. AVATAR — icon dalam card
   ================================================================ */

.ka-avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ================================================================
   11. PILL / BADGE kecil
   ================================================================ */

.ka-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .38rem .6rem;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ================================================================
   12. INFO PANEL — panel dalam card produk/varian
   ================================================================ */

.ka-info-panel {
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(0, 0, 0, .05);
    padding: .65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70);
    height: 100%;
}

.dark .ka-info-panel {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ================================================================
   13. INFO LINE — baris label + value dalam ka-info-panel
   ================================================================ */

.ka-info-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    min-width: 0;
    border-radius: .8rem;
    padding: .38rem .55rem;
    background: rgba(0, 0, 0, .022);
}

.dark .ka-info-line {
    background: rgba(255, 255, 255, .04);
}

.ka-info-line span {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 500;
    color: #8E8E93;
}

.ka-info-line strong {
    min-width: 0;
    max-width: 62%;
    text-align: right;
    font-size: .74rem;
    font-weight: 600;
    color: #1D1D1F;
    line-height: 1.2;
}

.dark .ka-info-line strong {
    color: #F5F5F7;
}

/* ================================================================
   14. STATUS DOT
   ================================================================ */

.ka-status-dot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 2px solid #1D1D1F;
    background: transparent;
}

.dark .ka-status-dot {
    border-color: #F5F5F7;
}

.ka-status-dot.is-active {
    border-color: #34C759;
    background: #34C759;
    box-shadow: inset 0 0 0 3px white;
}

.dark .ka-status-dot.is-active {
    box-shadow: inset 0 0 0 3px #1C1C1E;
}

/* ================================================================
   15. LOADING OVERLAY — tampil saat fetch data
      Dikontrol via JS: showKaCatalogLoading() / hideKaCatalogLoading()
   ================================================================ */

.ka-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.ka-overlay.is-visible {
    pointer-events: auto;
    opacity: 1;
}

.ka-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ka-overlay-card {
    position: relative;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.45rem;
    box-shadow: 0 28px 64px rgba(15, 23, 42, .22);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    padding: 1.75rem 2rem;
    text-align: center;
    min-width: 12rem;
    transform: translateY(6px) scale(.97);
    transition: transform .18s ease;
}

.dark .ka-overlay-card {
    background: rgba(28, 28, 30, .92);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 28px 64px rgba(0, 0, 0, .55);
}

.ka-overlay.is-visible .ka-overlay-card {
    transform: translateY(0) scale(1);
}

/* ================================================================
   16. SPINNER
   ================================================================ */

.ka-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(0, 122, 255, .15);
    border-top-color: #007AFF;
    border-radius: 50%;
    animation: ka-spin .7s linear infinite;
    margin: 0 auto .75rem;
}

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

/* ================================================================
   17. CONTAINER LOADING — overlay tipis di atas container
   ================================================================ */

.ka-container-loading-wrap {
    position: relative;
    min-height: 8rem;
}

.ka-container-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 245, 247, .60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 1.35rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

.dark .ka-container-overlay {
    background: rgba(10, 10, 12, .55);
}

.ka-container-overlay.is-visible {
    pointer-events: auto;
    opacity: 1;
}

/* ================================================================
   18. LOGO / PHOTO FRAME (produk, brand)
   ================================================================ */

.ka-photo-frame {
    width: 100%;
    min-height: 10.5rem;
    height: 100%;
    border-radius: 1.4rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(0, 122, 255, .05), rgba(255, 255, 255, .72));
    border: 1px solid rgba(0, 122, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
}

.ka-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .35rem;
}

.dark .ka-photo-frame {
    background: linear-gradient(180deg, rgba(10, 132, 255, .12), rgba(255, 255, 255, .03));
    border-color: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ================================================================
   19. MINI CHIP — chip sangat kecil
   ================================================================ */

.ka-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .42rem .55rem;
    font-size: .68rem;
    line-height: 1;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
}

/* ================================================================
   20. SENTINEL — invisible element untuk infinite scroll trigger
   ================================================================ */

.ka-sentinel {
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}

.ka-load-more-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1.25rem;
    color: #8E8E93;
    font-size: .82rem;
    font-weight: 500;
}

/* ================================================================
   21. NO-SCROLLBAR — hide scrollbar tapi tetap scrollable
   ================================================================ */

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ================================================================
   22. INVENTORY STICKY AREA GLOBAL STANDARDIZATION
   ================================================================ */

.inventory-sticky-area {
    padding: .2rem .75rem .25rem !important;
}

@media (min-width: 640px) {
    .inventory-sticky-area {
        padding-top: .25rem !important;
        padding-bottom: .3rem !important;
    }
}

/* Align padding for main container having inventory sticky area to match catalog */
main:has(.inventory-sticky-area) {
    padding-top: 0.75rem !important;
}



/* Shrink select dropdowns, input elements, buttons, and date picker capsule in inventory filter row */
.inventory-sticky-area select,
.inventory-sticky-area input,
.inventory-sticky-area button.ios-btn,
.inventory-sticky-area .date-picker-capsule,
.inventory-sticky-area .product-filter-select,
.inventory-sticky-area .product-search-wrap input {
    padding-top: .32rem !important;
    padding-bottom: .32rem !important;
    font-size: .75rem !important;
    border-radius: .75rem !important;
}

/* Slimmer padding for glass containers (filters row) inside inventory sticky area */
.inventory-sticky-area [class*="glass"] {
    padding: .35rem .6rem !important;
}

/* Reduce inventory top tabs bottom margin */
.inventory-sticky-area > div.mb-4 {
    margin-bottom: 0.25rem !important;
}

/* Inventory Summary Badges Compact styling */
.inventory-sticky-area [id*="SummaryBadges"] {
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
    padding: .15rem 0 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .045) !important;
    margin-top: .2rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.dark .inventory-sticky-area [id*="SummaryBadges"] {
    border-color: rgba(255, 255, 255, .07) !important;
}

.inventory-sticky-area .stock-summary-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .2rem !important;
    border-radius: 999px !important;
    padding: .12rem .45rem !important;
    font-size: .65rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ================================================================
   23. TRANSAKSI STICKY AREA GLOBAL STANDARDIZATION
   ================================================================ */

.transaksi-sticky-area {
    padding: .2rem .75rem .25rem !important;
}

@media (min-width: 640px) {
    .transaksi-sticky-area {
        padding-top: .25rem !important;
        padding-bottom: .3rem !important;
    }
}

/* Align padding for main container having transaksi sticky area to match catalog/inventory */
main:has(.transaksi-sticky-area) {
    padding-top: 0.75rem !important;
}

/* NOTE: We do NOT shrink the submenu navigation links inside .transaksi-sticky-area! */
/* We keep them at px-4 py-2.5 text-sm rounded-2xl as per user request */

/* Shrink select dropdowns, input elements, buttons, and date picker capsule in transaksi/retur filter row */
.transaksi-sticky-area select,
.transaksi-sticky-area input,
.transaksi-sticky-area button.ios-btn,
.transaksi-sticky-area .date-picker-capsule,
.transaksi-sticky-area .product-filter-select,
.transaksi-sticky-area .product-search-wrap input {
    padding-top: .32rem !important;
    padding-bottom: .32rem !important;
    font-size: .75rem !important;
    border-radius: .75rem !important;
}

/* Slimmer padding for glass containers (filters row) inside transaksi sticky area */
.transaksi-sticky-area [class*="glass"] {
    padding: .35rem .6rem !important;
}

/* Reduce transaksi top tabs bottom margin */
.transaksi-sticky-area > div.mb-4 {
    margin-bottom: 0.25rem !important;
}

/* Transaksi/Retur Summary Badges Compact styling */
.transaksi-sticky-area #transaksiSummaryBadges,
.transaksi-sticky-area #returSummaryBadges {
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
    padding: .15rem 0 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .045) !important;
    margin-top: .2rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.dark .transaksi-sticky-area #transaksiSummaryBadges,
.dark .transaksi-sticky-area #returSummaryBadges {
    border-color: rgba(255, 255, 255, .07) !important;
}

.transaksi-sticky-area .transaksi-summary-badge,
.transaksi-sticky-area .retur-summary-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .2rem !important;
    border-radius: 999px !important;
    padding: .12rem .45rem !important;
    font-size: .65rem !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ================================================================
   GPU HARDWARE ACCELERATION & MOBILE OPTIMIZATIONS (60 FPS)
   ================================================================ */
*,
::before,
::after {
    -webkit-tap-highlight-color: transparent;
}

header,
nav,
aside,
.ka-sticky,
.ka-glass,
.ka-card,
.product-compact-card {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fix Modal Overlay Leaks & Stacking Context (Superadmin, Admin, & Kasir) */
body.ka-modal-open header,
body.ka-modal-open nav,
body.ka-modal-open aside,
body.ka-modal-open .ka-sticky {
    z-index: 1 !important;
}

body.ka-modal-open {
    overflow: hidden !important;
}

/*
 * MODAL BACKDROP — semi-transparent overlay behind modal content.
 * Uses ABSOLUTE positioning to fill the fixed parent modal wrapper.
 */
.modal-backdrop,
.ka-sheet-backdrop,
.customer-modal-backdrop,
.product-modal-backdrop,
div[id$="Modal"] > div[class*="backdrop"],
div[id$="modal"] > div[class*="backdrop"],
div[class*="modal-backdrop"] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background-color: rgba(0, 0, 0, 0.60) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/*
 * FIXED MODAL SHELL WRAPPERS — forces top-level modals to fixed viewport.
 */
.ka-sheet-wrapper.hidden,
div[id$="Modal"].hidden,
div[id$="modal"].hidden {
    display: none !important;
}

div[id$="Modal"]:not(.hidden),
div[id$="modal"]:not(.hidden),
.ka-sheet-wrapper:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    display: flex !important;
}

/*
 * MODAL SHELL — inner container for modal content.
 */
.modal-shell {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    display: flex !important;
}

/* Desktop default: centered floating modal */
@media (min-width: 1024px) {
    div[id$="Modal"]:not(.hidden),
    div[id$="modal"]:not(.hidden),
    .ka-sheet-wrapper:not(.hidden),
    .modal-shell {
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
    }
}

/*
 * MODAL CONTENT — the actual card/panel the user interacts with.
 * pointer-events: auto to re-enable clicks on the modal card.
 */
.product-modal-sheet,
.customer-modal-sheet,
.ka-sheet,
.modal-content,
[class*="-modal-sheet"],
[class*="-sheet"],
[id*="ModalSheet"],
[id*="modalSheet"],
[id*="ModalContent"],
[id*="modalContent"] {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Custom iOS color utilities */
.text-iosBlue { color: #007AFF !important; }
.bg-iosBlue { background-color: #007AFF !important; }
.text-iosGreen { color: #34C759 !important; }
.bg-iosGreen { background-color: #34C759 !important; }
.text-iosOrange { color: #FF9500 !important; }
.bg-iosOrange { background-color: #FF9500 !important; }
.text-iosRed { color: #FF3B30 !important; }
.bg-iosRed { background-color: #FF3B30 !important; }
.text-iosPurple { color: #AF52DE !important; }
.bg-iosPurple { background-color: #AF52DE !important; }
.text-iosText { color: #1D1D1F !important; }
.text-iosMuted { color: #86868B !important; }
.bg-iosBg { background-color: #F5F5F7 !important; }
.bg-iosDark { background-color: #0A0A0C !important; }

/* Dark mode overrides for global text classes */
.dark .text-iosText { color: #FFFFFF !important; }
.dark .text-iosMuted { color: #A9A9B2 !important; }

.shadow-ios { box-shadow: 0 18px 40px rgba(0,0,0,.08) !important; }
.shadow-iosSoft { box-shadow: 0 8px 22px rgba(0,0,0,.05) !important; }
.shadow-iosDark { box-shadow: 0 18px 45px rgba(0,0,0,.38) !important; }

/* Override html5-qrcode default dark circular shaded overlay */
#posQrReader {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}

#posQrReader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#posQrReader #qr-shaded-region,
#posQrReader #posQrReader__scan_region img,
#posQrReader > div > svg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* iOS Bottom-Sheet Modal for Mobile & Tablet Devices (< 1024px) */
@media (max-width: 1023px) {
    /* Force the container and shell to align content to the bottom of screen */
    div[id$="Modal"]:not(.hidden),
    div[id$="modal"]:not(.hidden),
    .ka-sheet-wrapper:not(.hidden) {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .modal-shell {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ka-sheet-wrapper.hidden,
    div[id$="Modal"].hidden,
    div[id$="modal"].hidden {
        display: none !important;
    }

    /* Style the modal card as a bottom sheet (full width on bottom, rounded only on top) */
    .product-modal-sheet,
    .customer-modal-sheet,
    .ka-sheet,
    .modal-content,
    [class*="-modal-sheet"],
    [class*="-sheet"],
    [id*="ModalSheet"],
    [id*="modalSheet"],
    [id*="ModalContent"],
    [id*="modalContent"],
    [class*="-bottom-sheet"] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-top-left-radius: 1.8rem !important;
        border-top-right-radius: 1.8rem !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        max-height: 92vh !important;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35) !important;
        transform-origin: bottom center !important;
        z-index: 10 !important;
    }

    /* Add drag-indicator handle (the little bar at the top of the iOS sheet) if present */
    .modifier-modal-drag-handle,
    .modal-drag-handle {
        width: 36px !important;
        height: 5px !important;
        background-color: rgba(0, 0, 0, 0.18) !important;
        border-radius: 3px !important;
        margin: 8px auto 0 auto !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    .dark .modifier-modal-drag-handle,
    .dark .modal-drag-handle {
        background-color: rgba(255, 255, 255, 0.28) !important;
    }
}

/* ================================================================
   24. GLOBAL FONT WEIGHT NORMALIZATION (SOFTER & CLEANER TYPOGRAPHY)
   ================================================================ */
.font-black {
    font-weight: 600 !important;
}
.font-bold {
    font-weight: 500 !important;
}
.font-semibold {
    font-weight: 500 !important;
}

/* Ensure labels, select dropdowns, inputs, buttons, and titles in all sheets are not heavily bold */
.modal-content label,
.modal-content strong,
.modal-content select,
.modal-content input,
.modal-content textarea,
.modal-content button,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.ka-sheet label,
.ka-sheet strong,
.ka-sheet select,
.ka-sheet input,
.ka-sheet textarea,
.ka-sheet button,
.ka-sheet h3,
.ka-sheet h4,
.ka-sheet h5,
[class*="-sheet"] label,
[class*="-sheet"] strong,
[class*="-sheet"] select,
[class*="-sheet"] input,
[class*="-sheet"] textarea,
[class*="-sheet"] button,
[class*="-sheet"] h3,
[class*="-sheet"] h4,
[class*="-sheet"] h5 {
    font-weight: 500 !important;
}

/* Header titles can have slightly more weight (semibold) for visual hierarchy */
.modal-content h3,
.modal-content h4,
.ka-sheet h3,
.ka-sheet h4,
[class*="-sheet"] h3,
[class*="-sheet"] h4,
#modalTitle,
#inlineModifierFormTitle,
#variantFormTitle {
    font-weight: 600 !important;
}