/* * ABOTRIX V15.2 * Unified Responsive Core * Desktop / Laptop / Tablet / Mobile / Kiosk */ html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } img, svg, video, canvas { max-width: 100%; height: auto; } input, select, textarea, button { max-width: 100%; } .app, .app-shell, .workspace-shell, .dashboard-shell, main, #content { min-width: 0; max-width: 100%; } .app *, .workspace-shell *, .dashboard-shell *, #content * { min-width: 0; } .table-wrap, .table-responsive, .inventory-table-wrap, .report-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (min-width: 769px) and (max-width: 1200px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid, .dashboard-grid { grid-template-columns: 1fr !important; } .pos-layout { grid-template-columns: minmax(0, 1fr) !important; } .pos-cart { position: static !important; } } /* ========================================================= MOBILE CORE ========================================================= */ @media (max-width: 768px) { html, body { width: 100%; max-width: 100vw; overflow-x: hidden !important; } main, .app main, #content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 12px !important; padding-right: 12px !important; } .cards, .grid, .dashboard-grid, .kds-grid, .menu-form, .checkout-grid, .pos-layout { grid-template-columns: 1fr !important; } .card, .panel, form, input, select, textarea, .pos-menu, .pos-cart { width: 100% !important; max-width: 100% !important; } .pos-cart { position: static !important; } .pos-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } button, .button, .primary, .secondary { min-height: 44px; } .device-hub-hero { grid-template-columns: 1fr !important; } .device-hub-hero-actions { width: 100%; flex-direction: column; align-items: stretch; } .device-hub-hero-actions > * { width: 100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { main, .app main, #content { padding-left: 10px !important; padding-right: 10px !important; } .pos-products, .cards, .grid { grid-template-columns: 1fr !important; } .login-card { width: auto; margin: 12px; padding: 22px; } .hero { padding: 35px 18px; } } /* ========================================================= TOUCH DEVICES ========================================================= */ @media (hover: none) and (pointer: coarse) { button, a, input, select { min-height: 44px; } } /* ========================================================= KIOSK CORE ========================================================= */ @media (min-width: 900px) and (max-height: 850px) { .pos-layout { min-height: calc(100vh - 140px); } .pos-cart { max-height: calc(100vh - 150px); overflow-y: auto; } } /* ========================================================= CLIENT WORKSPACE BASE ========================================================= */ .app { width: 100%; min-height: 100vh; } .app aside, .app main, .app nav, .app header, #content { min-width: 0; } .app main { width: auto; max-width: none; } #content { width: 100%; } #content > *, .panel, .card { max-width: 100%; } /* ========================================================= DESKTOP CLIENT SHELL ========================================================= */ @media (min-width: 1201px) { .app aside { width: 260px; } .app main { margin-left: 260px; padding: 28px 32px 40px; } .cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .app header { margin-bottom: 18px; } } /* ========================================================= TABLET / LAPTOP CLIENT SHELL ========================================================= */ @media (min-width: 769px) and (max-width: 1200px) { .app aside { width: 220px !important; padding: 18px 12px !important; } .app main { margin-left: 220px !important; padding: 22px !important; } .brand img { max-width: 170px !important; } .app nav button { padding: 10px !important; font-size: 13px; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid, .dashboard-grid { grid-template-columns: 1fr !important; } } /* ========================================================= MOBILE CLIENT SHELL ========================================================= */ @media (max-width: 768px) { .app { display: block !important; min-height: 100vh; } .app aside { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; padding: 12px !important; display: block !important; } .app .brand { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px !important; } .app .brand img { width: 145px !important; max-width: 48vw !important; } .app .brand small { font-size: 10px; } .app nav { display: flex !important; gap: 7px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 4px 0 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .app nav button { flex: 0 0 auto !important; min-height: 42px; padding: 9px 13px !important; white-space: nowrap; font-size: 12px !important; } .app aside .logout { width: 100% !important; margin-top: 7px !important; } .app main { width: 100% !important; margin: 0 !important; padding: 16px 12px calc(24px + env(safe-area-inset-bottom)) !important; } .app header { width: 100%; margin-bottom: 14px; } .app header h1 { margin: 3px 0; font-size: clamp(23px, 7vw, 30px) !important; line-height: 1.15; } .app header p { font-size: 13px; line-height: 1.45; } #content { width: 100% !important; overflow: visible !important; } .cards { grid-template-columns: 1fr !important; gap: 10px !important; } .card, .panel { width: 100% !important; padding: 15px !important; border-radius: 14px !important; } .grid, .dashboard-grid { grid-template-columns: 1fr !important; } form { max-width: 100% !important; } form input, form select, form textarea { width: 100% !important; font-size: 16px; } .table-wrap, .table-responsive, .inventory-table-wrap, .report-table-wrap { width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .restaurant-toolbar { display: flex !important; gap: 7px; overflow-x: auto !important; padding-bottom: 7px; -webkit-overflow-scrolling: touch; } .restaurant-toolbar button { flex: 0 0 auto !important; white-space: nowrap; } } /* ========================================================= SMALL MOBILE CLIENT SHELL ========================================================= */ @media (max-width: 480px) { .app main { padding-left: 10px !important; padding-right: 10px !important; } .app nav button { min-height: 40px; padding: 8px 11px !important; font-size: 11px !important; } .card, .panel { padding: 13px !important; } .card strong { font-size: 24px !important; } } /* ========================================================= KIOSK / TOUCHSCREEN CLIENT SHELL ========================================================= */ @media (min-width: 900px) and (max-height: 850px) { .app main { padding-top: 16px !important; padding-bottom: 16px !important; } .app header h1 { font-size: 27px !important; } button, .button, .primary, .secondary { min-height: 44px; } .pos-layout { height: calc(100vh - 125px); min-height: 0 !important; } .pos-menu, .pos-cart { max-height: 100%; overflow-y: auto; } } /* ========================================================= ABOTRIX V15.2.2 FINAL MOBILE AUTHENTICATED SHELL FIX Removes inherited desktop/mobile spacer ========================================================= */ @media (max-width: 768px) { body.abotrix-authenticated #appView, body.abotrix-v12-ui #appView, #appView.app { display: block !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-height: 100dvh !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; } /* ----------------------------------------- MOBILE TOP BAR ----------------------------------------- */ #appView > .mobile-app-bar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 64px !important; margin: 0 !important; padding: 10px 14px !important; z-index: 1100 !important; } /* ----------------------------------------- SIDEBAR BECOMES DRAWER It must NOT reserve page height ----------------------------------------- */ body.abotrix-authenticated #appView > aside, body.abotrix-authenticated #appView > aside.v12-sidebar, body.abotrix-v12-ui #appView > aside, #appView > aside { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: min(86vw, 310px) !important; height: 100dvh !important; min-height: 0 !important; max-height: 100dvh !important; margin: 0 !important; padding: 74px 14px calc(16px + env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; overflow-y: auto !important; transform: translateX(-105%) !important; z-index: 1200 !important; } #appView.mobile-nav-open > aside { transform: translateX(0) !important; } /* ----------------------------------------- MAIN CONTENT Critical part of the fix ----------------------------------------- */ body.abotrix-authenticated #appView > main, body.abotrix-v12-ui #appView > main, #appView > main, #appView.app > main { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; margin-left: 0 !important; /* 64px fixed bar + 12px breathing room */ padding: 76px 12px calc(24px + env(safe-area-inset-bottom)) !important; overflow: visible !important; transform: none !important; } /* ----------------------------------------- PAGE HEADER ----------------------------------------- */ #appView > main > header { position: relative !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 14px !important; padding: 0 !important; transform: none !important; } #appView > main > header:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; } /* ----------------------------------------- DYNAMIC PAGE CONTENT ----------------------------------------- */ #appView #content { position: relative !important; top: auto !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; } #appView #content > :first-child { margin-top: 0 !important; } /* ----------------------------------------- RESTAURANT CLIENT WORKSPACE ----------------------------------------- */ #appView .restaurant-shell, #appView .restaurant-workspace, #appView .restaurant-dashboard, #appView .dashboard-shell, #appView .workspace-shell { position: relative !important; top: auto !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; margin-top: 0 !important; padding-top: 0 !important; transform: none !important; } /* ----------------------------------------- TOOLBAR / SECTION NAVIGATION ----------------------------------------- */ #appView .restaurant-toolbar { width: 100% !important; margin-top: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 480px) { body.abotrix-authenticated #appView > main, body.abotrix-v12-ui #appView > main, #appView > main { padding: 74px 10px calc(20px + env(safe-area-inset-bottom)) !important; } } /* ABOTRIX V15.2.3 — MOBILE DRAWER VISIBILITY FIX */ @media (max-width: 768px) { #appView > aside { visibility: visible !important; opacity: 1 !important; } #appView.mobile-nav-open > aside { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; z-index: 1200 !important; } #appView > .app-backdrop { z-index: 1150 !important; } #appView > .mobile-app-bar { z-index: 1100 !important; } } /* ABOTRIX V15.2.3 — MOBILE DRAWER VISIBILITY FIX */ @media (max-width: 768px) { #appView > aside { visibility: visible !important; opacity: 1 !important; } #appView.mobile-nav-open > aside { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; z-index: 1200 !important; } #appView > .app-backdrop { z-index: 1150 !important; } #appView > .mobile-app-bar { z-index: 1100 !important; } } /* ========================================================= ABOTRIX V15.2.4 FINAL MOBILE NAVIGATION DRAWER OVERRIDE ========================================================= */ @media (max-width: 768px) { body.abotrix-authenticated #appView, body.abotrix-v12-ui #appView, #appView.app { display: block !important; width: 100% !important; min-height: 100dvh !important; } /* SIDEBAR DRAWER */ body.abotrix-authenticated #appView > aside, body.abotrix-authenticated #appView > aside.v12-sidebar, body.abotrix-v12-ui #appView > aside, body.abotrix-v12-ui #appView > aside.v12-sidebar, #appView > aside, #appView > aside.v12-sidebar { display: block !important; position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: min(86vw, 310px) !important; min-width: min(86vw, 310px) !important; max-width: 310px !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 76px 14px calc(18px + env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; overflow-y: auto !important; transform: translate3d(-105%, 0, 0) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 1300 !important; transition: transform .25s ease !important; } /* OPEN DRAWER */ body.abotrix-authenticated #appView.mobile-nav-open > aside, body.abotrix-authenticated #appView.mobile-nav-open > aside.v12-sidebar, body.abotrix-v12-ui #appView.mobile-nav-open > aside, body.abotrix-v12-ui #appView.mobile-nav-open > aside.v12-sidebar, #appView.mobile-nav-open > aside, #appView.mobile-nav-open > aside.v12-sidebar { transform: translate3d(0, 0, 0) !important; visibility: visible !important; opacity: 1 !important; } /* NAVIGATION INSIDE DRAWER */ body.abotrix-authenticated #appView > aside #nav, body.abotrix-v12-ui #appView > aside #nav, #appView > aside #nav { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 6px !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; } body.abotrix-authenticated #appView > aside #nav > *, body.abotrix-v12-ui #appView > aside #nav > *, #appView > aside #nav > * { display: flex !important; width: 100% !important; min-width: 0 !important; flex: none !important; white-space: normal !important; } /* BACKDROP */ #appView > .app-backdrop { position: fixed !important; inset: 0 !important; z-index: 1250 !important; background: rgba(2, 12, 27, .58) !important; } #appView.mobile-nav-open > .app-backdrop { display: block !important; } /* MOBILE TOP BAR */ #appView > .mobile-app-bar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1200 !important; } /* MAIN PAGE */ body.abotrix-authenticated #appView > main, body.abotrix-v12-ui #appView > main, #appView > main { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 82px 12px calc(24px + env(safe-area-inset-bottom)) !important; } } /* ========================================================= ABOTRIX V15.2.5 MOBILE CASHIER POS COMPLETE FLOW FIX Products -> Cart -> Totals -> Payment ========================================================= */ @media (max-width: 768px) { #appView .pos-shell, #content .pos-shell, .restaurant-pos-layout, .pos-shell { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; gap: 14px !important; overflow: visible !important; } /* PRODUCT / CATALOG SIDE */ #appView .pos-catalog, #content .pos-catalog, .pos-catalog { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; position: static !important; } #appView .pos-products, #content .pos-products, .pos-products { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-content: start !important; } /* TRANSACTION / CART SIDE */ #appView .pos-cart, #content .pos-cart, .pos-cart { display: block !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 14px 0 0 !important; overflow: visible !important; transform: none !important; z-index: auto !important; } /* CART ITEMS */ #appView .pos-cart .cart-lines, #content .pos-cart .cart-lines, .pos-cart .cart-lines { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* CHECKOUT */ #appView .pos-cart .checkout-grid, #content .pos-cart .checkout-grid, .pos-cart .checkout-grid { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; } .pos-cart .field-pair, .pos-cart .payment-box { grid-template-columns: 1fr !important; } .pos-cart .totals-box { width: 100% !important; max-width: 100% !important; } /* PAYMENT BUTTON MUST STAY IN NORMAL MOBILE FLOW */ #appView .pos-cart .pay-now, #content .pos-cart .pay-now, .pos-cart .pay-now { position: static !important; width: 100% !important; min-height: 54px !important; margin-top: 12px !important; } } /* SMALL PHONES */ @media (max-width: 390px) { #appView .pos-products, #content .pos-products, .pos-products { grid-template-columns: 1fr !important; } } /* ========================================================= ABOTRIX V15.2.6 MOBILE NAVIGATION DRAWER WIDTH ========================================================= */ @media (max-width: 768px) { body.abotrix-authenticated #appView > aside, body.abotrix-authenticated #appView > aside.v12-sidebar, body.abotrix-v12-ui #appView > aside, #appView > aside, .app aside { width: min(76vw, 275px) !important; min-width: 245px !important; max-width: 275px !important; } } /* ========================================================= ABOTRIX V15.2.7 CLIENT MOBILE DRAWER FINAL SIZE ========================================================= */ @media (max-width: 768px) { body.abotrix-authenticated #appView > aside, body.abotrix-authenticated #appView > aside.v12-sidebar, body.abotrix-v12-ui #appView > aside, #appView > aside.v12-sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 230px !important; min-width: 230px !important; max-width: 230px !important; height: 100dvh !important; padding: calc(72px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) 14px !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 1200 !important; transform: translateX(-105%) !important; box-shadow: 12px 0 30px rgba(0, 0, 0, 0.24) !important; } /* OPEN DRAWER */ body.abotrix-authenticated #appView.mobile-nav-open > aside, body.abotrix-authenticated #appView.mobile-nav-open > aside.v12-sidebar, body.abotrix-v12-ui #appView.mobile-nav-open > aside, #appView.mobile-nav-open > aside.v12-sidebar { transform: translateX(0) !important; } /* LOGO AREA */ body.abotrix-v12-ui .v12-sidebar .brand { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 16px !important; padding: 0 0 14px !important; } body.abotrix-v12-ui .v12-sidebar .brand img { width: 125px !important; max-width: 125px !important; height: auto !important; margin: 0 auto !important; } /* Remove empty/version text beside logo */ body.abotrix-v12-ui .v12-sidebar .brand small { display: none !important; } /* NAVIGATION */ body.abotrix-v12-ui #nav { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 5px !important; overflow: visible !important; padding: 0 !important; } body.abotrix-v12-ui #nav .v12-nav-item { width: 100% !important; min-height: 44px !important; padding: 10px 12px !important; margin: 0 !important; white-space: normal !important; text-align: left !important; font-size: 14px !important; } /* LOGOUT */ body.abotrix-v12-ui .v12-sidebar .logout { width: 100% !important; margin-top: 12px !important; min-height: 44px !important; } } /* ========================================================= ABOTRIX V15.2.8 MOBILE DRAWER CLICK + OVERLAY FIX ========================================================= */ @media (max-width: 768px) { /* Drawer must always sit ABOVE the dark backdrop */ body.abotrix-authenticated #appView > aside, body.abotrix-authenticated #appView > aside.v12-sidebar, body.abotrix-v12-ui #appView > aside, body.abotrix-v12-ui #appView > aside.v12-sidebar, #appView > aside, #appView > aside.v12-sidebar { z-index: 1500 !important; visibility: visible !important; opacity: 1 !important; filter: none !important; backdrop-filter: none !important; pointer-events: auto !important; } /* Navigation and buttons must remain interactive */ #appView > aside #nav, #appView > aside #nav *, #appView > aside button, #appView > aside .v12-nav-item, #appView > aside .logout { position: relative !important; z-index: 1501 !important; opacity: 1 !important; filter: none !important; pointer-events: auto !important; } /* Darken ONLY the page behind the drawer */ #appView > .app-backdrop { z-index: 1400 !important; background: rgba(2, 12, 27, 0.55) !important; opacity: 1 !important; pointer-events: auto !important; } /* Keep top bar below open drawer */ #appView > .mobile-app-bar { z-index: 1300 !important; } /* Open drawer */ #appView.mobile-nav-open > aside, #appView.mobile-nav-open > aside.v12-sidebar { transform: translate3d(0, 0, 0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* ========================================================= ABOTRIX V15.2.9 MOBILE MENU MANAGEMENT / PRODUCT FORM FIX ========================================================= */ @media (max-width: 768px) { /* Main Menu Management form */ #content .menu-form, #appView .menu-form { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } /* Every field becomes full width */ #content .menu-form > *, #appView .menu-form > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-column: 1 / -1 !important; } /* Labels */ #content .menu-form label, #appView .menu-form label { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Inputs */ #content .menu-form input:not([type="checkbox"]):not([type="radio"]), #content .menu-form select, #content .menu-form textarea, #appView .menu-form input:not([type="checkbox"]):not([type="radio"]), #appView .menu-form select, #appView .menu-form textarea { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 46px !important; margin: 6px 0 0 !important; padding: 11px 12px !important; font-size: 16px !important; box-sizing: border-box !important; } /* Description */ #content .menu-form textarea, #appView .menu-form textarea { min-height: 110px !important; resize: vertical !important; overflow-wrap: anywhere !important; white-space: normal !important; } /* Checkbox rows */ #content .menu-form input[type="checkbox"], #appView .menu-form input[type="checkbox"] { width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 9px 0 0 !important; flex: 0 0 22px !important; } #content .menu-form label:has(input[type="checkbox"]), #appView .menu-form label:has(input[type="checkbox"]) { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; padding: 8px 0 !important; } /* Save Menu Item button */ #content .menu-form button, #appView .menu-form button { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; min-height: 50px !important; margin-top: 6px !important; white-space: normal !important; font-size: 15px !important; } /* --------------------------------------------------------- Product photo / form parent containers Prevent desktop two-column form from surviving on mobile --------------------------------------------------------- */ #content form:has(.menu-form), #appView form:has(.menu-form), #content .panel:has(.menu-form) { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; gap: 16px !important; overflow: visible !important; } #content form:has(.menu-form) > *, #appView form:has(.menu-form) > *, #content .panel:has(.menu-form) > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-column: 1 / -1 !important; } /* File upload controls */ #content input[type="file"], #appView input[type="file"] { width: 100% !important; max-width: 100% !important; min-height: 46px !important; overflow: hidden !important; } /* Product photo boxes */ #content [class*="photo"], #content [class*="image-upload"], #content [class*="upload"] { max-width: 100% !important; grid-column: 1 / -1 !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { #content .menu-form, #appView .menu-form { gap: 10px !important; } #content .menu-form input, #content .menu-form select, #content .menu-form textarea { font-size: 16px !important; } } /* ========================================================= ABOTRIX V15.2.10 MENU MANAGEMENT MOBILE PARENT GRID FIX ========================================================= */ @media (max-width: 768px) { /* Override the inline desktop 240px + 1fr parent grid */ #menuForm > div:first-child { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; gap: 18px !important; align-items: stretch !important; overflow: visible !important; } /* Photo section and form section */ #menuForm > div:first-child > section { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-column: 1 / -1 !important; } /* Product photo preview */ #menuImagePreview { width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 10 !important; min-height: 190px !important; } #menuPhotoInput { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: 12px !important; } /* Actual product fields */ #menuForm .menu-form { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; } #menuForm .menu-form > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-column: 1 / -1 !important; } #menuForm .menu-form input:not([type="checkbox"]), #menuForm .menu-form select, #menuForm .menu-form textarea { width: 100% !important; max-width: 100% !important; min-height: 46px !important; box-sizing: border-box !important; font-size: 16px !important; } /* Featured + Show Online */ #menuForm .menu-form > div { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; } #menuForm .menu-form > div label { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 9px !important; width: 100% !important; min-height: 42px !important; } #menuForm input[type="checkbox"] { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 22px !important; margin: 0 !important; } #menuForm textarea[name="description"] { width: 100% !important; min-height: 120px !important; resize: vertical !important; } #menuForm button.primary { display: block !important; width: 100% !important; min-height: 52px !important; margin-top: 4px !important; } #menuFormMessage { width: 100% !important; margin-top: 12px !important; } } /* ========================================================= ABOTRIX V15.2.11 MOBILE RESTAURANT TOOLBAR TOP ALIGNMENT ========================================================= */ @media (max-width: 768px) { /* Main page needs room for: 64px ABOTRIX bar + ~64px restaurant toolbar */ body.abotrix-authenticated #appView > main, body.abotrix-v12-ui #appView > main, #appView > main { padding-top: 138px !important; } /* Restaurant navigation directly below ABOTRIX header */ #appView .restaurant-toolbar { position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; z-index: 1150 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; height: 64px !important; margin: 0 !important; padding: 8px 12px !important; background: #f7f8fc !important; border-bottom: 1px solid #dfe5ee !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch; box-shadow: 0 5px 14px rgba(7, 24, 43, 0.08) !important; } /* Buttons */ #appView .restaurant-toolbar button { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; min-height: 46px !important; margin: 0 !important; padding: 10px 16px !important; white-space: nowrap !important; border-radius: 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active toolbar button */ #appView .restaurant-toolbar .primary-tool { background: #07182b !important; color: #ffffff !important; } /* Remove scrollbar visually */ #appView .restaurant-toolbar::-webkit-scrollbar { display: none; } #appView .restaurant-toolbar { scrollbar-width: none; } } /* Small phones */ @media (max-width: 390px) { #appView .restaurant-toolbar { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; } #appView .restaurant-toolbar button { padding: 9px 13px !important; font-size: 13px !important; } } /* ========================================================= ABOTRIX V15.2.12 MOBILE TOOLBAR PERFECT FIT ========================================================= */ @media (max-width: 768px) { #appView .restaurant-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px !important; width: 100% !important; height: auto !important; min-height: 62px !important; padding: 8px 8px !important; overflow: hidden !important; } #appView .restaurant-toolbar button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 46px !important; padding: 8px 6px !important; margin: 0 !important; font-size: 12px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 11px !important; } #appView .restaurant-toolbar .context-tool { background: #07182b !important; color: #fff !important; } } /* Extra-small mobile */ @media (max-width: 390px) { #appView .restaurant-toolbar { gap: 5px !important; padding: 7px 6px !important; } #appView .restaurant-toolbar button { padding: 7px 4px !important; font-size: 11px !important; } } /* ========================================================= ABOTRIX V15.2.13 INVENTORY CENTER MOBILE SUB-NAVIGATION Dashboard | Ingredient Master | Categories ========================================================= */ @media (max-width: 768px) { /* Inventory sub navigation */ #content .inv-tabs, #appView .inv-tabs { display: grid !important; grid-template-columns: minmax(0, 0.90fr) minmax(0, 1.35fr) minmax(0, 0.95fr) !important; width: 100% !important; max-width: 100% !important; gap: 6px !important; margin: 12px 0 16px !important; padding: 0 !important; overflow: visible !important; } /* All three inventory navigation buttons */ #content .inv-tabs button, #appView .inv-tabs button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 8px 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; border-radius: 12px !important; } /* Ingredient Master is longer, allow clean 2-line text if required */ #content .inv-tabs button:nth-child(2), #appView .inv-tabs button:nth-child(2) { padding-left: 4px !important; padding-right: 4px !important; } /* Active Inventory tab */ #content .inv-tabs button.active, #appView .inv-tabs button.active { background: #07182b !important; color: #ffffff !important; } } /* Galaxy S10 / smaller phones */ @media (max-width: 390px) { #content .inv-tabs, #appView .inv-tabs { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr) minmax(0, 0.90fr) !important; gap: 5px !important; } #content .inv-tabs button, #appView .inv-tabs button { min-height: 46px !important; padding: 7px 3px !important; font-size: 11px !important; } } /* ========================================================= ABOTRIX V15.2.16 MOBILE LOGIN SCREEN Compact app-style login / no unnecessary page scrolling Does NOT affect authenticated client workspace ========================================================= */ @media (max-width: 700px) { /* Login screen itself */ body:not(.abotrix-authenticated) { margin: 0 !important; min-height: 100dvh !important; overflow-x: hidden !important; background: #0b5278 !important; } body:not(.abotrix-authenticated) #loginView.login { width: 100% !important; min-height: 100dvh !important; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; padding: 22px 14px 24px !important; gap: 14px !important; overflow-x: hidden !important; background: linear-gradient( 160deg, #06172b 0%, #0b4f76 48%, #08769a 100% ) !important; } /* Compact hero */ body:not(.abotrix-authenticated) #loginView .hero { width: 100% !important; max-width: 430px !important; padding: 0 10px !important; margin: 0 auto !important; text-align: center !important; } /* Main ABOTRIX logo */ body:not(.abotrix-authenticated) #loginView .login-brand-logo { display: block !important; width: min(190px, 52vw) !important; max-width: 190px !important; height: auto !important; margin: 0 auto 10px !important; } /* Commercial SaaS eyebrow */ body:not(.abotrix-authenticated) #loginView .hero .eyebrow { margin: 4px 0 8px !important; font-size: 11px !important; line-height: 1.25 !important; letter-spacing: .16em !important; } /* Main title */ body:not(.abotrix-authenticated) #loginView .hero h1 { max-width: 390px !important; margin: 0 auto 8px !important; font-size: clamp(27px, 7.4vw, 34px) !important; line-height: 1.06 !important; } /* Subtitle */ body:not(.abotrix-authenticated) #loginView .hero p { max-width: 380px !important; margin: 0 auto !important; font-size: 14px !important; line-height: 1.4 !important; } /* Login card */ body:not(.abotrix-authenticated) #loginView .login-card { width: 100% !important; max-width: 410px !important; margin: 0 auto !important; padding: 20px !important; border-radius: 22px !important; align-self: auto !important; box-shadow: 0 18px 45px rgba(0,0,0,.20) !important; } body:not(.abotrix-authenticated) #loginView .login-card h2 { margin: 0 0 14px !important; font-size: 27px !important; line-height: 1.1 !important; } /* Form controls */ body:not(.abotrix-authenticated) #loginView .login-card input { width: 100% !important; min-height: 48px !important; margin: 6px 0 10px !important; padding: 11px 13px !important; font-size: 16px !important; } body:not(.abotrix-authenticated) #loginView .login-card button { min-height: 48px !important; } /* Prevent giant gaps */ body:not(.abotrix-authenticated) #loginView form { margin: 0 !important; } } /* Extra compact phones */ @media (max-width: 480px) and (max-height: 850px) { body:not(.abotrix-authenticated) #loginView.login { padding-top: 14px !important; gap: 10px !important; } body:not(.abotrix-authenticated) #loginView .login-brand-logo { width: 150px !important; margin-bottom: 6px !important; } body:not(.abotrix-authenticated) #loginView .hero h1 { font-size: 27px !important; margin-bottom: 5px !important; } body:not(.abotrix-authenticated) #loginView .hero p { font-size: 13px !important; } body:not(.abotrix-authenticated) #loginView .login-card { padding: 17px !important; } } /* ========================================================= ABOTRIX V15.2.17 MOBILE LOGIN FINAL LAYOUT - Hide authenticated mobile shell while logged out - Remove duplicate header - Compact login to viewport ========================================================= */ /* CRITICAL: Never allow responsive .app rules to override .hidden */ #appView.hidden, #loginView.hidden { display: none !important; } @media (max-width: 768px) { /* ------------------------------------------------------- LOGIN PAGE ------------------------------------------------------- */ body:not(.abotrix-authenticated) { margin: 0 !important; width: 100% !important; min-height: 100dvh !important; overflow-x: hidden !important; background: #07466c !important; } /* Absolutely hide authenticated mobile elements */ body:not(.abotrix-authenticated) #appView, body:not(.abotrix-authenticated) .mobile-app-bar, body:not(.abotrix-authenticated) .app-backdrop { display: none !important; } body:not(.abotrix-authenticated) #loginView.login { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 100dvh !important; height: auto !important; margin: 0 !important; padding: max(16px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important; gap: 14px !important; overflow-x: hidden !important; background: linear-gradient( 160deg, #06172b 0%, #08466c 52%, #08789d 100% ) !important; } /* ------------------------------------------------------- HERO / BRAND ------------------------------------------------------- */ body:not(.abotrix-authenticated) #loginView .hero { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 410px !important; margin: 0 !important; padding: 0 12px !important; text-align: center !important; } body:not(.abotrix-authenticated) #loginView .login-brand-logo { display: block !important; width: 150px !important; max-width: 42vw !important; height: auto !important; margin: 0 auto 8px !important; object-fit: contain !important; } body:not(.abotrix-authenticated) #loginView .hero .eyebrow { margin: 0 0 7px !important; font-size: 10px !important; line-height: 1.2 !important; letter-spacing: .17em !important; color: #a9edf7 !important; } body:not(.abotrix-authenticated) #loginView .hero h1 { max-width: 380px !important; margin: 0 auto 7px !important; font-size: clamp( 25px, 7vw, 31px ) !important; line-height: 1.08 !important; color: #ffffff !important; } body:not(.abotrix-authenticated) #loginView .hero p { max-width: 370px !important; margin: 0 auto !important; font-size: 13px !important; line-height: 1.4 !important; color: #d9eef7 !important; } /* ------------------------------------------------------- LOGIN CARD ------------------------------------------------------- */ body:not(.abotrix-authenticated) #loginView .login-card { width: 100% !important; max-width: 390px !important; margin: 0 !important; padding: 18px !important; border-radius: 20px !important; background: #ffffff !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .22) !important; } body:not(.abotrix-authenticated) #loginView .login-card h2 { margin: 0 0 12px !important; font-size: 25px !important; line-height: 1.1 !important; } body:not(.abotrix-authenticated) #loginView .login-card input { width: 100% !important; min-height: 46px !important; margin: 5px 0 9px !important; padding: 10px 12px !important; font-size: 16px !important; } body:not(.abotrix-authenticated) #loginView .login-card button { width: 100% !important; min-height: 46px !important; margin-top: 5px !important; } body:not(.abotrix-authenticated) #loginView .text-button { min-height: 38px !important; margin-top: 3px !important; padding: 6px 0 !important; } body:not(.abotrix-authenticated) #loginView .login-legal { margin-top: 6px !important; font-size: 11px !important; line-height: 1.5 !important; text-align: center !important; } } /* ========================================================= SHORTER PHONE SCREENS Examples: 360x760, 414x846 ========================================================= */ @media (max-width: 768px) and (max-height: 860px) { body:not(.abotrix-authenticated) #loginView.login { justify-content: flex-start !important; padding-top: 12px !important; gap: 9px !important; } body:not(.abotrix-authenticated) #loginView .login-brand-logo { width: 125px !important; margin-bottom: 5px !important; } body:not(.abotrix-authenticated) #loginView .hero .eyebrow { margin-bottom: 4px !important; } body:not(.abotrix-authenticated) #loginView .hero h1 { font-size: 24px !important; margin-bottom: 4px !important; } body:not(.abotrix-authenticated) #loginView .hero p { font-size: 12px !important; } body:not(.abotrix-authenticated) #loginView .login-card { padding: 15px 16px !important; } body:not(.abotrix-authenticated) #loginView .login-card h2 { font-size: 23px !important; margin-bottom: 9px !important; } } CSScd ~/abotrix-build/ABOTRIX_Restaurant_Enterprise_V12_0_0_LTS cat >> static/css/abotrix-responsive-v152.css <<'CSS' /* ========================================================= ABOTRIX V15.2.17 MOBILE LOGIN FINAL LAYOUT - Hide authenticated mobile shell while logged out - Remove duplicate header - Compact login to viewport ========================================================= */ /* CRITICAL: Never allow responsive .app rules to override .hidden */ #appView.hidden, #loginView.hidden { display: none !important; } @media (max-width: 768px) { /* ------------------------------------------------------- LOGIN PAGE ------------------------------------------------------- */ body:not(.abotrix-authenticated) { margin: 0 !important; width: 100% !important; min-height: 100dvh !important; overflow-x: hidden !important; background: #07466c !important; } /* Absolutely hide authenticated mobile elements */ body:not(.abotrix-authenticated) #appView, body:not(.abotrix-authenticated) .mobile-app-bar, body:not(.abotrix-authenticated) .app-backdrop { display: none !important; } body:not(.abotrix-authenticated) #loginView.login { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 100dvh !important; height: auto !important; margin: 0 !important; padding: max(16px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important; gap: 14px !important; overflow-x: hidden !important; background: linear-gradient( 160deg, #06172b 0%, #08466c 52%, #08789d 100% ) !important; } /* ------------------------------------------------------- HERO / BRAND ------------------------------------------------------- */ body:not(.abotrix-authenticated) #loginView .hero { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 410px !important; margin: 0 !important; padding: 0 12px !important; text-align: center !important; } body:not(.abotrix-authenticated) #loginView .login-brand-logo { display: block !important; width: 150px !important; max-width: 42vw !important; height: auto !important; margin: 0 auto 8px !important; object-fit: contain !important; } body:not(.abotrix-authenticated) #loginView .hero .eyebrow { margin: 0 0 7px !important; font-size: 10px !important; line-height: 1.2 !important; letter-spacing: .17em !important; color: #a9edf7 !important; } body:not(.abotrix-authenticated) #loginView .hero h1 { max-width: 380px !important; margin: 0 auto 7px !important; font-size: clamp( 25px, 7vw, 31px ) !important; line-height: 1.08 !important; color: #ffffff !important; } body:not(.abotrix-authenticated) #loginView .hero p { max-width: 370px !important; margin: 0 auto !important; font-size: 13px !important; line-height: 1.4 !important; color: #d9eef7 !important; } /* ------------------------------------------------------- LOGIN CARD ------------------------------------------------------- */ body:not(.abotrix-authenticated) #loginView .login-card { width: 100% !important; max-width: 390px !important; margin: 0 !important; padding: 18px !important; border-radius: 20px !important; background: #ffffff !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .22) !important; } body:not(.abotrix-authenticated) #loginView .login-card h2 { margin: 0 0 12px !important; font-size: 25px !important; line-height: 1.1 !important; } body:not(.abotrix-authenticated) #loginView .login-card input { width: 100% !important; min-height: 46px !important; margin: 5px 0 9px !important; padding: 10px 12px !important; font-size: 16px !important; } body:not(.abotrix-authenticated) #loginView .login-card button { width: 100% !important; min-height: 46px !important; margin-top: 5px !important; } body:not(.abotrix-authenticated) #loginView .text-button { min-height: 38px !important; margin-top: 3px !important; padding: 6px 0 !important; } body:not(.abotrix-authenticated) #loginView .login-legal { margin-top: 6px !important; font-size: 11px !important; line-height: 1.5 !important; text-align: center !important; } } /* ========================================================= SHORTER PHONE SCREENS Examples: 360x760, 414x846 ========================================================= */ @media (max-width: 768px) and (max-height: 860px) { body:not(.abotrix-authenticated) #loginView.login { justify-content: flex-start !important; padding-top: 12px !important; gap: 9px !important; } body:not(.abotrix-authenticated) #loginView .login-brand-logo { width: 125px !important; margin-bottom: 5px !important; } body:not(.abotrix-authenticated) #loginView .hero .eyebrow { margin-bottom: 4px !important; } body:not(.abotrix-authenticated) #loginView .hero h1 { font-size: 24px !important; margin-bottom: 4px !important; } body:not(.abotrix-authenticated) #loginView .hero p { font-size: 12px !important; } body:not(.abotrix-authenticated) #loginView .login-card { padding: 15px 16px !important; } body:not(.abotrix-authenticated) #loginView .login-card h2 { font-size: 23px !important; margin-bottom: 9px !important; } } /* ========================================================= ABOTRIX ONE-SCREEN WORKSPACE V1 Desktop / Laptop Enterprise Standard ========================================================= */ @media (min-width: 1024px) { /* * Keep the application workspace inside the available * browser viewport. Individual data areas handle overflow. */ body.abotrix-v12-ui #appView > main { min-width: 0 !important; } body.abotrix-v12-ui #content { min-width: 0 !important; } /* ------------------------------------------------------- MENU MANAGEMENT ------------------------------------------------------- */ #content .menu-page, #content .menu-management-page { max-width: 100% !important; } #content .menu-grid, #content .menu-table-wrap { max-height: clamp(260px, 40vh, 430px) !important; overflow-y: auto !important; overflow-x: auto !important; } /* ------------------------------------------------------- SALES & REPORTS ------------------------------------------------------- */ #content .sales-page { max-width: 100% !important; } #content .sales-page table, #content .sales-page .table-wrap { max-width: 100% !important; } #content .sales-page .table-wrap { max-height: clamp(250px, 38vh, 420px) !important; overflow: auto !important; } /* ------------------------------------------------------- INVENTORY CENTER ------------------------------------------------------- */ #content .inventory-page { max-width: 100% !important; } #content .inventory-table-wrap, #content .inventory-table-panel { max-width: 100% !important; } #content .inventory-table-wrap { max-height: clamp(260px, 40vh, 430px) !important; overflow-y: auto !important; overflow-x: auto !important; } /* ------------------------------------------------------- FOOD COST & RECIPES ------------------------------------------------------- */ #content .recipe-page { max-width: 100% !important; } #content .recipe-page table { width: 100% !important; } #content .recipe-page .table-wrap, #content .recipe-page .recipe-table-wrap { max-height: clamp(250px, 38vh, 410px) !important; overflow-y: auto !important; overflow-x: auto !important; } /* ------------------------------------------------------- SUPPLIERS ------------------------------------------------------- */ #content .supplier-table-wrap { max-height: clamp(260px, 40vh, 430px) !important; overflow-y: auto !important; overflow-x: auto !important; } /* ------------------------------------------------------- EXPENSE MANAGEMENT ------------------------------------------------------- */ #content .expense-kpi-grid { gap: 10px !important; } #content .expense-kpi-card { min-height: 0 !important; } #content .expense-filter-panel { margin-bottom: 12px !important; } #content .expense-main-grid { gap: 12px !important; } #content .expense-table-wrap, #content .expense-records-table-wrap { max-height: clamp(240px, 36vh, 400px) !important; overflow-y: auto !important; overflow-x: auto !important; } /* ------------------------------------------------------- PRODUCTION & COMMISSARY ------------------------------------------------------- */ #content .production-page, #content .commissary-page { max-width: 100% !important; } #content .production-page .table-wrap, #content .commissary-page .table-wrap { max-height: clamp(250px, 38vh, 410px) !important; overflow-y: auto !important; overflow-x: auto !important; } /* ------------------------------------------------------- GENERIC ENTERPRISE TABLE BEHAVIOR Sticky headers remain visible while records scroll. ------------------------------------------------------- */ #content .inventory-table-wrap thead th, #content .supplier-table-wrap thead th, #content .recipe-table-wrap thead th, #content .expense-table-wrap thead th, #content .expense-records-table-wrap thead th { position: sticky !important; top: 0 !important; z-index: 5 !important; } /* Scrollbar remains intentionally visible so users know that additional records are available below. */ #content .inventory-table-wrap, #content .supplier-table-wrap, #content .recipe-table-wrap, #content .expense-table-wrap, #content .expense-records-table-wrap, #content .menu-table-wrap { scrollbar-width: thin; } } /* ========================================================= TABLET STANDARD Do NOT force desktop one-screen layout. ========================================================= */ @media (min-width: 769px) and (max-width: 1023px) { #content .inventory-table-wrap, #content .supplier-table-wrap, #content .recipe-table-wrap, #content .expense-table-wrap, #content .expense-records-table-wrap, #content .menu-table-wrap { max-height: 48vh !important; overflow: auto !important; -webkit-overflow-scrolling: touch; } } /* ========================================================= MOBILE STANDARD Natural vertical page + touch-scroll data areas. ========================================================= */ @media (max-width: 768px) { #content .inventory-table-wrap, #content .supplier-table-wrap, #content .recipe-table-wrap, #content .expense-table-wrap, #content .expense-records-table-wrap, #content .menu-table-wrap { max-height: 55vh !important; overflow: auto !important; -webkit-overflow-scrolling: touch; } } /* ========================================================= ABOTRIX - MENU MANAGEMENT TABLE HEADER FIX Keep header labels fully visible ========================================================= */ @media (min-width: 769px) { #content .menu-table-wrap thead { position: sticky !important; top: 0 !important; z-index: 10 !important; } #content .menu-table-wrap thead tr { height: 38px !important; min-height: 38px !important; } #content .menu-table-wrap thead th { position: sticky !important; top: 0 !important; z-index: 11 !important; height: 38px !important; min-height: 38px !important; padding: 10px 12px !important; line-height: 18px !important; vertical-align: middle !important; overflow: visible !important; background: #eef3f8 !important; } } /* ========================================================= ABOTRIX V13 - NEW RECIPE PRODUCT SELECTOR ========================================================= */ .recipe-product-selector { position: relative; z-index: 2; width: min(560px, calc(100vw - 40px)); overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(0, 0, 0, .30); } .recipe-product-selector-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 26px 20px; border-bottom: 1px solid #e5eaf1; } .recipe-product-selector-header small { color: #673de6; font-weight: 900; letter-spacing: .08em; } .recipe-product-selector-header h2 { margin: 5px 0 4px; font-size: 25px; } .recipe-product-selector-header p { margin: 0; color: #69788d; } .recipe-product-selector-body { display: grid; gap: 18px; padding: 25px 26px; } .recipe-product-selector-body label { display: grid; gap: 8px; color: #24364b; font-weight: 800; } .recipe-product-selector-body select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #d4ddea; border-radius: 11px; background: #fff; font: inherit; } .recipe-product-preview { display: grid; gap: 5px; padding: 16px; border: 1px solid #e1e7ef; border-radius: 13px; background: #f7f9fc; } .recipe-product-preview strong { color: #102a43; font-size: 16px; } .recipe-product-preview span { color: #6c7b8d; font-size: 13px; } .recipe-product-selector-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 26px; border-top: 1px solid #e5eaf1; } .recipe-product-selector-footer button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px; font-weight: 800; cursor: pointer; } .recipe-product-selector-footer button.primary { color: #fff; background: linear-gradient( 135deg, #6d42f5, #5633dd ); } .recipe-product-selector-footer button:disabled { opacity: .45; cursor: not-allowed; } /* ========================================================== ABOTRIX V13 NEW RECIPE PRODUCT SELECTOR MODAL ========================================================== */ #recipeProductSelectorModal.recipe-modal-shell { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: grid !important; place-items: center !important; width: 100vw !important; height: 100vh !important; padding: 24px !important; box-sizing: border-box !important; } #recipeProductSelectorModal .recipe-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(8, 25, 45, 0.72) !important; backdrop-filter: blur(4px); } #recipeProductSelectorModal .recipe-product-selector { position: relative !important; z-index: 100001 !important; display: flex !important; flex-direction: column !important; width: min(560px, calc(100vw - 48px)) !important; max-width: 560px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #dce5ee !important; border-radius: 20px !important; box-shadow: 0 28px 80px rgba(5, 20, 35, 0.30) !important; } /* HEADER */ #recipeProductSelectorModal .recipe-product-selector-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 20px !important; padding: 24px 26px 20px !important; border-bottom: 1px solid #e5ebf1 !important; } #recipeProductSelectorModal .recipe-product-selector-header small { display: block !important; margin-bottom: 6px !important; color: #6338e6 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .08em !important; } #recipeProductSelectorModal .recipe-product-selector-header h2 { margin: 0 !important; color: #102a43 !important; font-size: 26px !important; line-height: 1.15 !important; } #recipeProductSelectorModal .recipe-product-selector-header p { margin: 7px 0 0 !important; color: #66778a !important; font-size: 14px !important; line-height: 1.45 !important; } #recipeProductSelectorModal .recipe-modal-close { flex: 0 0 auto !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: #eef1f5 !important; color: #102a43 !important; font-size: 26px !important; font-weight: 900 !important; cursor: pointer !important; } /* BODY */ #recipeProductSelectorModal .recipe-product-selector-body { display: grid !important; gap: 18px !important; padding: 24px 26px !important; } #recipeProductSelectorModal .recipe-product-selector-body label { display: grid !important; gap: 8px !important; color: #253b53 !important; font-size: 13px !important; font-weight: 800 !important; } #recipeProductSelectorModal #newRecipeMenuProduct { width: 100% !important; height: 46px !important; padding: 0 12px !important; box-sizing: border-box !important; border: 1px solid #ccd8e4 !important; border-radius: 10px !important; background: #ffffff !important; color: #102a43 !important; font-size: 14px !important; } /* PRODUCT PREVIEW */ #recipeProductSelectorModal .recipe-product-preview { display: grid !important; gap: 5px !important; padding: 16px !important; background: #f6f8fb !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; } #recipeProductSelectorModal .recipe-product-preview strong { color: #102a43 !important; font-size: 15px !important; } #recipeProductSelectorModal .recipe-product-preview span { color: #66778a !important; font-size: 13px !important; } /* FOOTER */ #recipeProductSelectorModal .recipe-product-selector-footer { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 10px !important; padding: 18px 26px !important; background: #fafbfd !important; border-top: 1px solid #e5ebf1 !important; } #recipeProductSelectorModal .recipe-product-selector-footer button { min-height: 44px !important; padding: 10px 18px !important; border: 0 !important; border-radius: 11px !important; font-weight: 800 !important; cursor: pointer !important; } #recipeProductSelectorModal .recipe-product-selector-footer button:not(.primary) { background: #e9edf2 !important; color: #102a43 !important; } #recipeProductSelectorModal .recipe-product-selector-footer .primary { background: linear-gradient( 135deg, #7047f5, #5435df ) !important; color: #ffffff !important; } #recipeProductSelectorModal .recipe-product-selector-footer .primary:disabled { opacity: .45 !important; cursor: not-allowed !important; } /* MOBILE */ @media (max-width: 620px) { #recipeProductSelectorModal.recipe-modal-shell { padding: 14px !important; } #recipeProductSelectorModal .recipe-product-selector { width: 100% !important; max-width: 100% !important; } #recipeProductSelectorModal .recipe-product-selector-header, #recipeProductSelectorModal .recipe-product-selector-body, #recipeProductSelectorModal .recipe-product-selector-footer { padding-left: 18px !important; padding-right: 18px !important; } #recipeProductSelectorModal .recipe-product-selector-footer { display: grid !important; grid-template-columns: 1fr 1fr !important; } #recipeProductSelectorModal .recipe-product-selector-footer button { width: 100% !important; } } /* ========================================================== ABOTRIX V13 NEW RECIPE PRODUCT SELECTOR MODAL ========================================================== */ #recipeProductSelectorModal.recipe-modal-shell { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: grid !important; place-items: center !important; width: 100vw !important; height: 100vh !important; padding: 24px !important; box-sizing: border-box !important; } #recipeProductSelectorModal .recipe-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(8, 25, 45, 0.72) !important; backdrop-filter: blur(4px); } #recipeProductSelectorModal .recipe-product-selector { position: relative !important; z-index: 100001 !important; display: flex !important; flex-direction: column !important; width: min(560px, calc(100vw - 48px)) !important; max-width: 560px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #dce5ee !important; border-radius: 20px !important; box-shadow: 0 28px 80px rgba(5, 20, 35, 0.30) !important; } /* HEADER */ #recipeProductSelectorModal .recipe-product-selector-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 20px !important; padding: 24px 26px 20px !important; border-bottom: 1px solid #e5ebf1 !important; } #recipeProductSelectorModal .recipe-product-selector-header small { display: block !important; margin-bottom: 6px !important; color: #6338e6 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .08em !important; } #recipeProductSelectorModal .recipe-product-selector-header h2 { margin: 0 !important; color: #102a43 !important; font-size: 26px !important; line-height: 1.15 !important; } #recipeProductSelectorModal .recipe-product-selector-header p { margin: 7px 0 0 !important; color: #66778a !important; font-size: 14px !important; line-height: 1.45 !important; } #recipeProductSelectorModal .recipe-modal-close { flex: 0 0 auto !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: #eef1f5 !important; color: #102a43 !important; font-size: 26px !important; font-weight: 900 !important; cursor: pointer !important; } /* BODY */ #recipeProductSelectorModal .recipe-product-selector-body { display: grid !important; gap: 18px !important; padding: 24px 26px !important; } #recipeProductSelectorModal .recipe-product-selector-body label { display: grid !important; gap: 8px !important; color: #253b53 !important; font-size: 13px !important; font-weight: 800 !important; } #recipeProductSelectorModal #newRecipeMenuProduct { width: 100% !important; height: 46px !important; padding: 0 12px !important; box-sizing: border-box !important; border: 1px solid #ccd8e4 !important; border-radius: 10px !important; background: #ffffff !important; color: #102a43 !important; font-size: 14px !important; } /* PRODUCT PREVIEW */ #recipeProductSelectorModal .recipe-product-preview { display: grid !important; gap: 5px !important; padding: 16px !important; background: #f6f8fb !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; } #recipeProductSelectorModal .recipe-product-preview strong { color: #102a43 !important; font-size: 15px !important; } #recipeProductSelectorModal .recipe-product-preview span { color: #66778a !important; font-size: 13px !important; } /* FOOTER */ #recipeProductSelectorModal .recipe-product-selector-footer { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 10px !important; padding: 18px 26px !important; background: #fafbfd !important; border-top: 1px solid #e5ebf1 !important; } #recipeProductSelectorModal .recipe-product-selector-footer button { min-height: 44px !important; padding: 10px 18px !important; border: 0 !important; border-radius: 11px !important; font-weight: 800 !important; cursor: pointer !important; } #recipeProductSelectorModal .recipe-product-selector-footer button:not(.primary) { background: #e9edf2 !important; color: #102a43 !important; } #recipeProductSelectorModal .recipe-product-selector-footer .primary { background: linear-gradient( 135deg, #7047f5, #5435df ) !important; color: #ffffff !important; } #recipeProductSelectorModal .recipe-product-selector-footer .primary:disabled { opacity: .45 !important; cursor: not-allowed !important; } /* MOBILE */ @media (max-width: 620px) { #recipeProductSelectorModal.recipe-modal-shell { padding: 14px !important; } #recipeProductSelectorModal .recipe-product-selector { width: 100% !important; max-width: 100% !important; } #recipeProductSelectorModal .recipe-product-selector-header, #recipeProductSelectorModal .recipe-product-selector-body, #recipeProductSelectorModal .recipe-product-selector-footer { padding-left: 18px !important; padding-right: 18px !important; } #recipeProductSelectorModal .recipe-product-selector-footer { display: grid !important; grid-template-columns: 1fr 1fr !important; } #recipeProductSelectorModal .recipe-product-selector-footer button { width: 100% !important; } }