/* ShopKichele — bootstrap-bridge.css (extracted from index.html) */ /* ============ BOOTSTRAP BRIDGE ============ Bootstrap 5.3 is loaded FIRST (see ) purely as a layout / forms / tables / component toolkit. This layer (a) maps Bootstrap's CSS variables onto ShopKichele's semantic tokens so every Bootstrap component follows the brand and the dark theme, and (b) undoes the few Reboot defaults that would otherwise alter existing screens. ShopKichele visuals stay in charge. */ :root, html[data-theme="dark"]{ --bs-body-bg:var(--app-bg); --bs-body-color:var(--app-text); --bs-body-font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --bs-body-font-size:15px; --bs-body-line-height:1.45; --bs-emphasis-color:var(--app-text); --bs-secondary-color:var(--app-text-muted); --bs-tertiary-color:var(--app-text-subtle); --bs-tertiary-bg:var(--app-surface-2); --bs-secondary-bg:var(--app-surface-2); --bs-border-color:var(--app-border); --bs-border-color-translucent:var(--app-border); --bs-border-radius:10px; --bs-border-radius-sm:8px; --bs-border-radius-lg:14px; --bs-primary:var(--app-brand); --bs-link-color:var(--app-brand); --bs-link-hover-color:var(--app-brand-hover); --bs-link-color-rgb:11,42,98; --bs-link-hover-color-rgb:7,28,66; --bs-success:var(--app-success); --bs-warning:var(--app-warning); --bs-danger:var(--app-danger); --bs-info:var(--app-info); --bs-focus-ring-color:rgba(47,111,237,.3); --bs-heading-color:inherit; } html[data-theme="dark"]{ --bs-link-color-rgb:61,111,214; --bs-link-hover-color-rgb:86,134,236; } /* Reboot corrections — keep the app's existing typography & element defaults */ h1,h2,h3,h4,h5,h6{font-weight:700;color:inherit} a{text-decoration:none} a:hover{text-decoration:underline} p{margin:0 0 .6em} button{border-radius:inherit} label{display:block;font-size:13px;color:var(--app-text-muted);margin:0 0 5px} input,select,textarea{color:var(--app-text)} .small{font-size:13px} /* Grid safety: rows nested in padded app containers must not overflow */ .stack > .row, .sk-card > .row{margin-left:0;margin-right:0} .form-check-input:checked{background-color:var(--app-brand);border-color:var(--app-brand)} .form-check-input:focus{border-color:var(--app-focus);box-shadow:0 0 0 3px rgba(47,111,237,.18)} /* Forms: Bootstrap controls rendered in ShopKichele skin */ .form-label{margin-bottom:5px;font-size:13px;color:var(--app-text-muted);font-weight:500} .form-control,.form-select{background-color:var(--app-surface);color:var(--app-text);border:1px solid var(--app-border); border-radius:10px;min-height:42px;padding:8px 11px;font-size:14px;width:100%} .form-control:focus,.form-select:focus{background-color:var(--app-surface);color:var(--app-text); border-color:var(--app-focus);box-shadow:0 0 0 3px rgba(47,111,237,.18)} .form-control::placeholder{color:var(--app-text-subtle)} .form-control-sm,.form-select-sm{min-height:36px;padding:5px 9px;font-size:13px;border-radius:9px} .form-control-lg,.form-select-lg{min-height:48px;font-size:15px;border-radius:12px} .form-select{padding-right:2.25rem; --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235F6C80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")} html[data-theme="dark"] .form-select{ --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA7B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")} .input-group>.form-control,.input-group>.form-select{min-height:46px} .input-group .input-group-text{background:var(--app-surface-2);border-color:var(--app-border);color:var(--app-text-muted);border-radius:10px} .input-group .sk-btn{width:auto;min-height:46px;border-radius:12px} .input-group>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0} .input-group>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0} .form-check{min-height:auto;margin-bottom:0;display:flex;align-items:center;gap:8px;padding-left:0} .form-check .form-check-input{float:none;margin:0;width:20px;height:20px;min-height:0;padding:0;flex:none; background-color:var(--app-surface);border:1.5px solid var(--app-text-subtle);border-radius:6px;cursor:pointer} .form-check .form-check-input:checked{background-color:var(--app-brand);border-color:var(--app-brand)} .form-check .form-check-label{margin:0;font-size:14px;color:var(--app-text);cursor:pointer} .form-text{color:var(--app-text-subtle);font-size:12px} .invalid-feedback{font-size:12px;color:var(--app-danger)} .was-validated .form-control:invalid,.form-control.is-invalid{border-color:var(--app-danger);background-image:none;padding-right:11px} /* Tables */ .table{--bs-table-bg:transparent;--bs-table-color:var(--app-text);--bs-table-border-color:var(--app-border); --bs-table-striped-bg:var(--app-surface-2);--bs-table-striped-color:var(--app-text); --bs-table-hover-bg:var(--app-surface-2);--bs-table-hover-color:var(--app-text); --bs-table-active-bg:var(--app-surface-2);font-size:13.5px;margin-bottom:0} .table>thead th{color:var(--app-text-muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em; border-bottom:1px solid var(--app-border);white-space:nowrap} .table>:not(caption)>*>*{padding:10px;background-color:var(--bs-table-bg);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))} .table>tbody>tr:last-child>*{border-bottom:0} .table-responsive{-webkit-overflow-scrolling:touch} /* Dropdowns / menus */ .dropdown-menu{--bs-dropdown-bg:var(--app-surface-elevated);--bs-dropdown-color:var(--app-text); --bs-dropdown-border-color:var(--app-border);--bs-dropdown-link-color:var(--app-text); --bs-dropdown-link-hover-color:var(--app-text);--bs-dropdown-link-hover-bg:var(--app-surface-2); --bs-dropdown-link-active-bg:var(--app-brand);--bs-dropdown-link-active-color:var(--app-brand-contrast); --bs-dropdown-divider-bg:var(--app-border);--bs-dropdown-header-color:var(--app-text-subtle); --bs-dropdown-border-radius:14px;--bs-dropdown-padding-y:6px;--bs-dropdown-item-padding-y:9px;--bs-dropdown-item-padding-x:14px; box-shadow:var(--app-shadow);font-size:14px;z-index:1080} .dropdown-item{display:flex;align-items:center;gap:10px;border-radius:9px;margin:0 6px;width:auto;min-height:40px} .dropdown-item .lucide{width:16px;height:16px;color:var(--app-text-muted)} .dropdown-item.text-danger .lucide{color:inherit} .dropdown-toggle::after{display:none} /* Badges / pagination / progress / accordion / alerts */ .badge{font-weight:600;border-radius:999px;padding:4px 9px;font-size:11px;line-height:1.2} .badge.text-bg-success{background:var(--app-success-soft)!important;color:var(--app-success)!important} .badge.text-bg-warning{background:var(--app-warning-soft)!important;color:var(--app-warning)!important} .badge.text-bg-danger{background:var(--app-danger-soft)!important;color:var(--app-danger)!important} .badge.text-bg-info{background:var(--app-info-soft)!important;color:var(--app-info)!important} .badge.text-bg-secondary{background:var(--app-surface-2)!important;color:var(--app-text-muted)!important} .pagination{--bs-pagination-bg:var(--app-surface);--bs-pagination-color:var(--app-text); --bs-pagination-border-color:var(--app-border);--bs-pagination-hover-bg:var(--app-surface-2); --bs-pagination-hover-color:var(--app-text);--bs-pagination-focus-bg:var(--app-surface-2);--bs-pagination-focus-color:var(--app-text); --bs-pagination-active-bg:var(--app-brand);--bs-pagination-active-border-color:var(--app-brand); --bs-pagination-disabled-bg:var(--app-surface);--bs-pagination-disabled-color:var(--app-text-subtle); --bs-pagination-disabled-border-color:var(--app-border);--bs-pagination-border-radius:10px;margin:0} .pagination .page-link{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:13.5px} .progress{--bs-progress-bg:var(--app-surface-2);--bs-progress-bar-bg:var(--app-brand);--bs-progress-border-radius:999px;height:8px} .accordion{--bs-accordion-bg:var(--app-surface);--bs-accordion-color:var(--app-text);--bs-accordion-border-color:var(--app-border); --bs-accordion-btn-color:var(--app-text);--bs-accordion-btn-bg:var(--app-surface);--bs-accordion-active-bg:var(--app-surface-2); --bs-accordion-active-color:var(--app-text);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-border-radius:14px} .alert{border-radius:12px;font-size:14px} /* Modal / Offcanvas / Toast — skinned to match the existing sheets */ .modal{--bs-modal-bg:var(--app-surface);--bs-modal-color:var(--app-text);--bs-modal-border-color:var(--app-border); --bs-modal-header-border-color:var(--app-border);--bs-modal-footer-border-color:var(--app-border); --bs-modal-border-radius:20px;--bs-modal-box-shadow:var(--app-shadow);z-index:1090} .modal-backdrop{z-index:1085} .offcanvas,.offcanvas-lg,.offcanvas-md{--bs-offcanvas-bg:var(--app-surface);--bs-offcanvas-color:var(--app-text); --bs-offcanvas-border-color:var(--app-border);z-index:1090} .offcanvas-backdrop{z-index:1085} .offcanvas-bottom{border-radius:22px 22px 0 0;height:auto;max-height:88dvh;padding-bottom:var(--safe-b)} .toast{--bs-toast-bg:var(--app-surface-elevated);--bs-toast-color:var(--app-text);--bs-toast-border-color:var(--app-border); --bs-toast-header-bg:var(--app-surface-elevated);--bs-toast-header-color:var(--app-text);--bs-toast-border-radius:14px} html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)} .btn-close:focus{box-shadow:0 0 0 3px rgba(47,111,237,.25)} .tooltip{--bs-tooltip-bg:var(--app-text);--bs-tooltip-color:var(--app-bg);--bs-tooltip-border-radius:8px;font-size:12.5px} .popover{--bs-popover-bg:var(--app-surface-elevated);--bs-popover-body-color:var(--app-text);--bs-popover-border-color:var(--app-border); --bs-popover-header-bg:var(--app-surface-2);--bs-popover-header-color:var(--app-text);--bs-popover-border-radius:12px} /* Text/utility colour helpers resolve to app tokens (dark-mode safe) */ .text-body-secondary,.text-muted{color:var(--app-text-muted)!important} .text-success{color:var(--app-success)!important} .text-danger{color:var(--app-danger)!important} .text-warning{color:var(--app-warning)!important} .text-info{color:var(--app-info)!important} .text-primary{color:var(--app-brand)!important} .border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--app-border)!important} .bg-body-tertiary{background-color:var(--app-surface-2)!important} /* ShopKichele buttons inside Bootstrap layouts: let the layout decide width */ .d-flex>.sk-btn,.input-group>.sk-btn,.dropdown>.sk-btn,.btn-group>.sk-btn{width:auto} .sk-btn.sk-btn-icon{width:46px;min-width:46px;padding:0} .sk-btn.w-100{width:100%} .sk-row.flex-wrap{flex-wrap:wrap} .pill{white-space:nowrap;flex:none} /* POS: desktop side-by-side cart, mobile keeps the sticky cart bar + sheet */ .pos-cart-panel{position:sticky;top:76px} @media(min-width:992px){ .cartbar{display:none !important} } .pos-layout .pos-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} @media(max-width:359.98px){ .pos-layout .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }