/*! * Prato Design System — Single Harmonious Mode * * Audience: blue-collar ↔ white-collar mixed usage * Device mix: phone 50% / tablet 30% / desktop 20% * * Usage: * - Recommended: add class "prato" to to scope styles safely. * * - If you want global overrides, replace "body.prato" and ".prato" selectors with "body" / remove ".prato ". */ /* ======================================== 1) TOKENS ======================================== */ :root { /* ---- Colors (Vibrant & Deep - Apple Style) ---- */ --bg-body: #F2F2F7; /* iOS System Grey 6 */ --bg-card: #FFFFFF; /* Pure White */ --bg-input: #FFFFFF; --text-primary: #1C1C1E; /* SF Black */ --text-secondary: #8E8E93; /* SF Grey */ --text-tertiary: #C7C7CC; /* SF Light Grey */ --brand: #007AFF; /* iOS Blue */ --urgent: #FF3B30; /* iOS Red */ --processing: #FF9500; /* iOS Orange */ --success: #34C759; /* iOS Green */ --warning: #FFCC00; /* iOS Yellow */ --purple: #AF52DE; /* iOS Purple */ --border: rgba(60, 60, 67, 0.12); /* Subtle separator */ /* ---- Typography ---- */ --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Harmonious Compact */ --font-base: 17px; /* Mobile Standard */ --font-sm: 15px; --font-lg: 19px; --font-xl: 34px; /* Large Title */ /* ---- Sizing ---- */ --touch-target: 44px; /* Apple HIG Minimum */ --input-minh: 44px; --radius-lg: 12px; /* Continuous Curvature */ --radius-xl: 18px; /* Card Radius */ /* ---- Physics & Depth ---- */ --border-w: 0.5px; /* Retina Hairline */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12); --spring-duration: 0.5s; --spring-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */ /* ---- Focus ring ---- */ --focus-ring: 0 0 0 4px rgba(0, 122, 255, 0.15); /* ---- Breakpoints ---- */ --bp-md: 768px; --bp-lg: 992px; --bp-max: 768px; /* Max width for "App" feel on desktop */ /* ---- Spacing ---- */ --spacing-section: 16px; } /* ======================================== Animation & Glassmorphism ======================================== */ .glass { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 0.5px solid rgba(60, 60, 67, 0.12); } .anim-spring { animation: springPop 0.6s var(--spring-easing) forwards; opacity: 0; transform: scale(0.9); } .anim-slide-in { animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateX(20px); } @keyframes springPop { to { opacity: 1; transform: scale(1); } } @keyframes slideInRight { to { opacity: 1; transform: translateX(0); } } /* Desktop Constraint: magical "iPhone on Desk" feel */ @media (min-width: 768px) { body { background-color: #E5E5EA; /* Darker bg to frame the app */ display: flex; flex-direction: column; /* Stack header, content, footer */ align-items: center; /* Center them horizontally */ min-height: 100vh; } #appCapsule, .appHeader, .appBottomMenu { max-width: var(--bp-max); width: 100%; margin: 0 auto; /* Redundant if align-items works, but good safety */ left: auto; /* Reset fixed positioning stretching */ right: auto; } .appHeader { position: sticky; top: 0; border-radius: 0; box-shadow: var(--shadow-sm); z-index: 1000; /* Ensure header stays on top */ } .appBottomMenu { position: sticky; bottom: 0; border-radius: 0; box-shadow: var(--shadow-lg); } #appCapsule { background: var(--bg-body); min-height: 100vh; margin-top: 0; margin-bottom: 0; box-shadow: var(--shadow-lg); /* If header/footer are sticky inside, we need careful handling. For now, let's assume valid flow. */ } /* Modal Max-Width Constraint (768px) */ .modal.action-sheet .modal-dialog, .action-sheet.inset .modal-dialog { max-width: var(--bp-max); min-width: 0; /* Override style.css min-width: 100% */ width: 100%; left: 0; right: 0; margin-left: auto; margin-right: auto; } .dialogbox .modal-dialog .modal-content, .dialog-box .modal-dialog .modal-content { max-width: var(--bp-max); width: 90%; } .modalbox .modal-dialog .modal-content { max-width: var(--bp-max); left: 50%; right: auto; transform: translateX(-50%); } .modalbox.show .modal-dialog .modal-content { transform: translateX(-50%); } } /* Tablet: consistent with mobile base but more width */ @media (min-width: 576px) { :root { --font-base: 16px; --touch-target: 42px; --input-minh: 44px; } } /* Desktop: Compact Professional Mode */ @media (min-width: 768px) { :root { --font-base: 15px; /* clearly smaller for desktop density */ --touch-target: 38px; /* mouse-friendly compact size */ --input-minh: 38px; --shadow-heavy: 0 2px 6px rgba(0, 0, 0, 0.1); } } /* ======================================== 2) BASE STYLES ======================================== */ /* ======================================== 2) BASE STYLES ======================================== */ body { font-family: var(--font-stack); font-size: var(--font-base); background-color: var(--bg-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.35; } /* Preserve typographic hierarchy instead of “font-size nuclear overwrite” */ body p, body li { font-size: 1rem; } body small, body .text-muted, body .form-text { font-size: var(--font-sm); color: var(--text-secondary); } /* Links: larger tap target, consistent focus */ body a { color: var(--brand); text-decoration: none; font-weight: 500; padding: 4px; } body a:hover { text-decoration: none; /* iOS Polish: No underline on hover */ text-underline-offset: 3px; } body a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; text-decoration: none; /* Polish */ } /* Unified keyboard focus for interactive controls */ .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .dropdown-item:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ======================================== 3) INPUTS (Big-enough, not bulky) ======================================== */ .form-control, .form-select { min-height: var(--input-minh); height: auto; font-size: var(--font-lg); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); padding: 8px 12px; background-color: var(--bg-input); color: var(--text-primary); box-shadow: none; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: var(--focus-ring); } /* Placeholder readability */ .form-control::placeholder { color: var(--text-tertiary); } /* ======================================== 4) BUTTONS (Physicality, restrained) ======================================== */ .btn { min-height: var(--touch-target); font-size: var(--font-lg); font-weight: 600; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.08s ease-out, box-shadow 0.08s ease-out; border: none; } .btn:active { transform: translateY(1px); box-shadow: var(--shadow-active); } /* Primary (brand) */ .btn-primary, .btn-procut-main, .btn-product-main, .bg-primary { background: linear-gradient(135deg, #007AFF 0%, #0062CC 100%) !important; color: #fff; border: none; } /* Success */ .btn-success, .bg-success { background: linear-gradient(135deg, #34C759 0%, #248A3D 100%) !important; color: #fff; border: none; } /* Warning */ .bg-warning { background: linear-gradient(135deg, #FFCC00 0%, #F5A623 100%) !important; color: #fff; } /* Danger */ .btn-danger, .bg-danger { background: linear-gradient(135deg, #FF3B30 0%, #D70015 100%) !important; color: #fff; border: none; } /* Info */ .bg-info { background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%) !important; color: #fff; } /* Purple */ .bg-purple { background: linear-gradient(135deg, #AF52DE 0%, #5856D6 100%) !important; color: #fff; } /* Dark */ .bg-dark { background: linear-gradient(135deg, #2C2C2E 0%, #000000 100%) !important; color: #fff; } .btn-primary:active, .btn-procut-main:active, .btn-product-main:active { box-shadow: none; transform: translateY(3px); } .btn-success:active { box-shadow: none; transform: translateY(3px); } /* Disabled */ .btn:disabled, .btn.disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* ======================================== 5) CARDS (Containers) ======================================== */ .card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-heavy); background: var(--bg-card); overflow: hidden; } /* Status bars */ .card-order-urgent { border-left: 10px solid var(--urgent); } .card-order-processing { border-left: 10px solid var(--processing); } /* ======================================== 6) DROPDOWNS (Aligned with system scale) ======================================== */ .dropdown-menu { border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); padding: 8px 0; margin-top: 6px; font-size: 1rem; z-index: 1060; } .dropdown-item { padding: 8px 12px; font-weight: 500; color: var(--text-primary); transition: background-color 0.15s ease-in-out; } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(26, 54, 93, 0.08); color: var(--brand); } .dropdown-item.active, .dropdown-item:active { background-color: var(--brand); color: #fff; } .dropdown-divider { margin: 6px 0; border-top-color: var(--border); } /* ======================================== 7) FILTER BUTTONS & CHIPS ======================================== */ .btn-filter { border-radius: 10px; padding: 8px 14px; font-size: 0.95rem; font-weight: 600; min-width: 84px; min-height: 36px; border: 1px solid #DEE2E6; background: #F8F9FA; color: #495057; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .btn-filter:hover, .btn-filter:active, .btn-filter.show { background: #fff; border-color: var(--brand); color: var(--brand); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } /* iOS Filter Chips (Steve's Request) */ .filter-scroll-view { display: flex; overflow-x: auto; white-space: nowrap; padding: 8px 4px 12px 4px; gap: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: linear-gradient(to right, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%); } .filter-scroll-view::-webkit-scrollbar { display: none; } .filter-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 18px; /* Classic Pill */ background-color: rgba(118, 118, 128, 0.12); /* System Fill */ color: var(--text-primary); font-size: 14px; font-weight: 500; border: none; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); position: relative; flex-shrink: 0; } .filter-chip ion-icon { font-size: 16px; margin-right: 4px; color: var(--text-secondary); margin-top: -1px; transition: color 0.3s ease; } .filter-chip .chevron { font-size: 10px; margin-left: 6px; margin-right: -2px; opacity: 0.5; transition: color 0.3s ease; } /* Active State: Blue */ .filter-chip.active { background-color: var(--brand); color: white; box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3); transform: translateY(-1px); } .filter-chip.active ion-icon, .filter-chip.active .chevron { color: white; opacity: 0.9; } /* Dropdown overrides for chips */ .dropdown-menu-chip { border-radius: 14px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; border: none !important; overflow: hidden; margin-top: 8px !important; min-width: 200px; animation: dropdownSlideIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .dropdown-menu-chip .dropdown-item { padding: 10px 16px; font-size: 15px; border-bottom: 0.5px solid var(--border); } .dropdown-menu-chip .dropdown-item:last-child { border-bottom: none; } .dropdown-menu-chip .dropdown-item.active { background-color: var(--bg-body); color: var(--brand); font-weight: 600; } /* ======================================== Summary Clean Table (Grid Variant) ======================================== */ .summary-clean { background: #fff; border-radius: 12px; margin: 16px 16px 24px 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; padding: 0; } .summary-cell { position: relative; text-align: center; padding: 12px 4px; background: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 70px; } /* Remove old separators if present, using explicit border classes now */ .summary-cell:after { content: none; } .summary-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.2px; } .summary-value { font-size: 16px; font-weight: 600; font-family: var(--font-stack); font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1.2; } .summary-value.lg { font-size: 18px; } /* Grid Borders */ .border-end-cell { border-right: 0.5px solid rgba(60, 60, 67, 0.1) !important; } .border-bottom-cell { border-bottom: 0.5px solid rgba(60, 60, 67, 0.1) !important; } /* ======================================== iOS Modal Styles (Elegant) ======================================== */ .modal-content.ios { border-radius: 14px; border: none; background-color: #F2F2F7; overflow: hidden; } .modal-header.ios { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); } .ios-amount-input { font-size: 36px; font-weight: 700; letter-spacing: -1px; border: none; background: transparent; text-align: center; width: 100%; color: #000; padding: 10px 0; } .ios-amount-input:focus { outline: none; } .ios-modal-hint { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: 20px; } /* ======================================== 8) UTILITIES (Prefixed to avoid collisions) ======================================== */ /* Typography helpers */ .pr-text-lg { font-size: 20px !important; } .pr-text-xl { font-size: 24px !important; font-weight: 700; } .pr-text-xxl { font-size: 28px !important; font-weight: 800; } /* Color helpers (expect variables exist) */ .pr-text-urgent { color: var(--urgent) !important; } .pr-text-success { color: var(--success) !important; } .pr-text-brand { color: var(--brand) !important; } /* Spacing scale (kept from your original: 3=>12px, 4=>18px) */ .pr-gap-3 { gap: 12px !important; } .pr-p-3 { padding: 12px !important; } .pr-p-4 { padding: 18px !important; } .pr-px-3 { padding-left: 12px !important; padding-right: 12px !important; } .pr-py-3 { padding-top: 12px !important; padding-bottom: 12px !important; } .pr-px-4 { padding-left: 18px !important; padding-right: 18px !important; } .pr-py-4 { padding-top: 18px !important; padding-bottom: 18px !important; } .pr-pt-3 { padding-top: 12px !important; } .pr-pr-3 { padding-right: 12px !important; } .pr-pb-3 { padding-bottom: 12px !important; } .pr-pl-3 { padding-left: 12px !important; } .pr-pt-4 { padding-top: 18px !important; } .pr-pr-4 { padding-right: 18px !important; } .pr-pb-4 { padding-bottom: 18px !important; } .pr-pl-4 { padding-left: 18px !important; } /* Optional backward-compatible aliases (unprefixed). Remove if you don't need them. */ .text-lg { font-size: 20px !important; } .text-xl { font-size: 24px !important; font-weight: 700; } .text-xxl { font-size: 28px !important; font-weight: 800; } .text-urgent { color: var(--urgent) !important; } .text-success { color: var(--success) !important; } .text-brand { color: var(--brand) !important; } /* Legacy spacing aliases (unprefixed). Remove if you don't need them. */ .gap-3 { gap: 12px !important; } .p-3 { padding: 12px !important; } .p-4 { padding: 18px !important; } /* ======================================== 9) RESPONSIVE HELPERS ======================================== */ /* Hide elements on mobile (<=768px) */ @media (max-width: 768px) { .hide-on-mobile { display: none !important; } } /* ======================================== 10) DETAIL PAGE LIST GRID (iOS Standard) ======================================== */ /* Desktop Header (Hidden on Mobile) */ .desktop-header { display: none; /* Mobile default */ padding: 12px 16px; margin: 0 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: rgba(118, 118, 128, 0.05); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom: 0.5px solid var(--border); } /* Grid Item Container */ .list-item-grid { display: grid; width: 100%; padding: 12px 16px; align-items: center; /* Mobile Layout: 2 Rows */ /* Row 1: Name (Left) | Amount (Right) */ /* Row 2: Color (Left) | Calc (Right) */ grid-template-areas: "name amount" "color calc"; grid-template-columns: 1fr auto; gap: 4px 12px; } /* Cell Styling */ .cell-name { grid-area: name; font-size: 17px; font-weight: 500; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .cell-color { grid-area: color; font-size: 14px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; text-align: left; } .cell-amount { grid-area: amount; text-align: right; font-size: 17px; font-weight: 600; color: #000; font-variant-numeric: tabular-nums; } .cell-calc { grid-area: calc; text-align: right; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* Desktop Only Cells */ .cell-price-d, .cell-qty-d { display: none; } /* Tablet/Desktop Override (>768px) */ @media (min-width: 768px) { .desktop-header { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 1fr; gap: 10px; text-align: right; } .desktop-header div:nth-child(1), .desktop-header div:nth-child(2) { text-align: left; } /* Remove top radius from list to attach to header */ .listview.inset { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; } .list-item-grid { /* Desktop Layout: 1 Row, 5 Columns */ grid-template-areas: "name color price qty amount"; grid-template-columns: 2fr 2fr 1fr 1fr 1fr; gap: 10px; padding: 16px; } .cell-name { font-size: 15px; font-weight: 500; } .cell-color { font-size: 15px; color: #000; display: flex; align-items: center; } .cell-calc { display: none; } /* Hide mobile combo */ .cell-price-d { grid-area: price; display: block; text-align: right; font-variant-numeric: tabular-nums; } .cell-qty-d { grid-area: qty; display: block; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .cell-amount { font-size: 15px; } } /* Grouped Inset List (For Detail Pages) */ .listview.inset { margin: 0 16px 24px 16px; background: transparent; border-radius: 12px; overflow: hidden; } .listview.inset li { background: var(--bg-card); border-bottom: 0.5px solid var(--border); padding: 0; position: relative; } .listview.inset li:last-child { border-bottom: none; } .listview.inset li:active { background: #E5E5EA; /* iOS Active State */ } /* Section Header for Detail Pages */ .section-header { padding: 12px 16px 4px 16px; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: -0.2px; } /* Bottom Toolbar (iOS UIToolbar - Pixel Perfect) */ .appBottomMenu { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(249, 249, 249, 0.94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 0.33px solid rgba(0, 0, 0, 0.3); height: 49px; /* iOS standard toolbar height */ display: flex; padding-bottom: env(safe-area-inset-bottom); } .appBottomMenu .item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #007AFF; /* Pure iOS Blue */ text-decoration: none; gap: 1px; -webkit-tap-highlight-color: transparent; } .appBottomMenu .item:active { opacity: 0.4; transition: opacity 0.1s ease-out; } .appBottomMenu .item ion-icon { font-size: 22px; /* Reduced to iOS standard */ --ionicon-stroke-width: 32px; /* Thinner strokes */ } .appBottomMenu .item span { font-size: 10px; font-weight: 400; /* Regular, not medium */ letter-spacing: -0.24px; } .appBottomMenu .item.danger { color: #FF3B30; /* System Red */ } .appBottomMenu .item.danger ion-icon { --ionicon-stroke-width: 40px; /* Slightly bolder for visibility */ } /* ======================================== iOS INSET GROUPED COMPONENTS (Settings Style) ======================================== */ /* Section Label (above grouped cells) */ .ios-section-label { padding: 8px 16px 6px 24px; font-size: 13px; color: #8E8E93; text-transform: uppercase; letter-spacing: -0.08px; font-weight: 400; } /* Inset Grouped Container */ .ios-inset-group { background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: none; } /* Single Cell Row */ .ios-cell { display: flex; align-items: center; padding: 11px 16px; min-height: 44px; background: #FFFFFF; border-bottom: 0.33px solid rgba(60, 60, 67, 0.29); } .ios-cell:last-child { border-bottom: none; } /* Cell with Label on Left, Value/Input on Right */ .ios-cell-label { font-size: 17px; color: #000000; flex-shrink: 0; } .ios-cell-value { flex: 1; text-align: right; font-size: 17px; color: #8E8E93; } /* Currency/Unit Prefix */ .ios-cell-prefix { font-size: 17px; color: #000000; font-weight: 400; margin-right: 4px; } /* Suffix (like % or units) */ .ios-cell-suffix { font-size: 17px; color: #000000; font-weight: 400; margin-left: 4px; } /* Input inside cell */ .ios-cell-input { flex: 1; border: none; background: transparent; font-size: 17px; text-align: right; color: #000000; outline: none; padding: 0; font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; } .ios-cell-input::placeholder { color: #C7C7CC; } .ios-cell-input:focus { outline: none; } /* Large Amount Input (for modals) */ .ios-amount-display { display: flex; align-items: baseline; justify-content: center; padding: 20px 16px; } .ios-amount-currency { font-size: 28px; font-weight: 300; color: #000; margin-right: 2px; } .ios-amount-value { font-size: 56px; font-weight: 200; color: #000; letter-spacing: -2px; font-variant-numeric: tabular-nums; border: none; background: transparent; text-align: center; width: 180px; outline: none; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; } .ios-amount-value::placeholder { color: #C7C7CC; } /* ======================================== 11) RESPONSIVE LIST GRID (Tablet Optimization) ======================================== */ /* Mobile: Ensure no overflow */ .image-listview.inset { margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; /* Edge to edge on small screens if needed, or keep radius with no neg margin */ } /* Tablet/Desktop optimizations */ @media (min-width: 768px) { .image-listview.inset { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; background: transparent !important; margin-top: 0; /* FIX: Remove negative margins that cause overflow */ margin-left: 0 !important; margin-right: 0 !important; } .image-listview.inset li { border-bottom: 0; } .image-listview.inset li .item { background: #fff; border-radius: 10px; margin-bottom: 0; } /* FIX: Reduce whitespace above sticky search bar on desktop */ #appCapsule.app-management { padding-top: 20px !important; } /* FIX: Adjust sticky top position for search bar */ .app-management .sticky-top { position: sticky !important; top: 56px !important; z-index: 1000 !important; margin-top: -10px !important; width: 100% !important; max-width: 768px !important; margin-left: auto !important; margin-right: auto !important; } /* Tablet (iPad Portrait/Landscape) and up: 2-column grid */ .image-listview.inset { /* Two equal columns */ gap: 16px; /* Space between cards */ /* Remove container background */ border: none !important; } .image-listview.inset>li { background: var(--bg-card); border-radius: 12px; overflow: hidden; border-bottom: none !important; /* Remove list lines */ box-shadow: var(--shadow-sm); /* Mini cards */ } .image-listview.inset>li:after { display: none !important; /* No dividers in grid */ } } /* ======================================== 11) REFINED BADGES (Subtle vs Loud) ======================================== */ .badge { font-weight: 500; font-size: 13px; padding: 6px 10px; border-radius: 20px; letter-spacing: -0.2px; } /* Default subtle badge (Grey) */ .badge-secondary, .badge-subtle { background-color: rgba(142, 142, 147, 0.12) !important; color: var(--text-secondary) !important; } /* Primary subtle (Blue tint) */ .badge-primary-subtle { background-color: rgba(0, 122, 255, 0.12) !important; color: var(--brand) !important; } /* Urgent (Red - keeps punch) */ .badge-danger { background-color: var(--urgent) !important; color: #fff !important; } /* ======================================== 12) SIDEBAR & LIST OVERRIDES (Touch Friendly) ======================================== */ .image-listview>li { padding: 0 !important; margin: 0 !important; min-height: 52px; /* Enforce >44px touch target + breathing room */ } .image-listview>li .item { min-height: 52px !important; padding: 12px 48px 12px 20px !important; /* Increased right padding to prevent clipping with arrow */ display: flex; align-items: center; } .image-listview>li:after { left: 58px !important; /* Align divider with text start */ bottom: 0 !important; background-color: var(--border) !important; height: 1px !important; /* Sharp retina line */ } .image-listview>li:last-child:after { display: none !important; /* No divider on last item */ } /* ======================================== 13) iOS 1:1 REFINEMENT (Steve's Cycle 1) ======================================== */ /* Large Title (iOS Standard) */ .header-large-title { font-size: 34px; font-weight: 700; color: #000; padding: 4px 16px 8px 16px; /* Visual alignment */ letter-spacing: 0.37px; /* SF Pro Tracking */ line-height: 41px; } /* Dynamic Header States */ .appHeader .pageTitle { display: block; opacity: 0; /* Hidden initially */ transition: opacity 0.2s ease-in-out; } .appHeader.show-title .pageTitle { opacity: 1; } .appHeader.transparent { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; } /* Squircle Icon Box (32px box -> ~7px radius for iOS feel) */ /* ======================================== /* ======================================== 14) iOS DEVICE ADAPTATION (Phone vs Tablet) ======================================== */ /* ---- iOS Metrics & Variables ---- */ :root { /* Device-specific dimensions */ --ios-nav-height: 44px; --ios-tab-bar-height: 49px; --ios-search-height: 36px; --ios-segment-height: 32px; --ios-cell-height: 44px; /* Control sizes */ --ios-switch-width: 51px; --ios-switch-height: 31px; /* Layout */ --content-margin: 16px; --card-gap: 16px; /* Safe Area (iPhone X+) */ --safe-area-top: env(safe-area-inset-top, 20px); --safe-area-bottom: env(safe-area-inset-bottom, 20px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); } /* iPad Overrides */ @media (min-width: 768px) { :root { --ios-nav-height: 50px; --ios-cell-height: 50px; --content-margin: 24px; --card-gap: 20px; } } @media (min-width: 1024px) { :root { --content-margin: 40px; } } /* ---- Safe Area Utilities ---- */ .safe-area-top { padding-top: var(--safe-area-top); } .safe-area-bottom { padding-bottom: var(--safe-area-bottom); } /* Header with Safe Area (scoped to Prato to avoid conflicts) */ .prato .appHeader { padding-top: var(--safe-area-top); min-height: calc(var(--ios-nav-height) + var(--safe-area-top)); } /* Bottom Menu with Safe Area (scoped to Prato) */ .prato .appBottomMenu { padding-bottom: var(--safe-area-bottom); min-height: calc(var(--ios-tab-bar-height) + var(--safe-area-bottom)); } /* ---- iOS Segmented Control ---- */ .ios-segmented-control { display: flex; background-color: var(--search-fill); border-radius: 9px; padding: 2px; height: var(--ios-segment-height); width: 100%; box-sizing: border-box; } .ios-segmented-control .segment-option { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--text-primary); border-radius: 7px; transition: all 0.2s ease; cursor: pointer; user-select: none; } .ios-segmented-control .segment-option.active { background-color: var(--bg-card); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); font-weight: 600; } /* ---- iOS Switch ---- */ .ios-switch { position: relative; display: inline-block; width: var(--ios-switch-width); height: var(--ios-switch-height); } .ios-switch input { opacity: 0; width: 0; height: 0; } .ios-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--search-fill); transition: .4s; border-radius: 31px; } .ios-switch .slider:before { position: absolute; content: ""; height: 27px; width: 27px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.15); } .ios-switch input:checked + .slider { background-color: var(--success, #34C759); } .ios-switch input:checked + .slider:before { transform: translateX(20px); } /* ---- iOS Search Bar ---- */ .ios-search-bar { background-color: var(--search-fill); border-radius: 10px; height: var(--ios-search-height); display: flex; align-items: center; padding: 0 8px; font-size: 17px; margin: 8px var(--content-margin); } .ios-search-bar input { border: none; background: transparent; width: 100%; height: 100%; padding-left: 6px; font-size: 17px; color: var(--text-primary); } .ios-search-bar input:focus { outline: none; } .ios-search-bar input::placeholder { color: var(--text-secondary); } /* ---- iPad / Tablet Adaptations ---- */ @media (min-width: 768px) { /* 2-Column Grid for Cards */ .ipad-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin: 0 var(--content-margin); } /* Readable Content Constraint */ .readable-width { max-width: 680px; margin-left: auto; margin-right: auto; } /* Form Sheet Modal Style */ .modal-sheet-container { display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.4); } .modal-sheet-content { width: 540px; max-height: 80vh; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.2); background: var(--bg-card); } /* Enforce inset lists on iPad */ .listview.inset { margin-left: var(--content-margin); margin-right: var(--content-margin); border-radius: 10px; } /* iPad-specific cell padding */ .ios-cell { padding: 14px 20px; } /* Sidebar Navigation for iPad (optional) */ .ipad-sidebar { width: 240px; height: 100vh; position: fixed; left: 0; top: 0; background: var(--bg-card); border-right: 0.5px solid var(--border); padding-top: calc(var(--safe-area-top) + 20px); } .ipad-sidebar + .main-content { margin-left: 240px; } } /* ---- Device-Specific Utilities ---- */ /* Hide on mobile (<=768px) */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } /* Hide on tablet/desktop (>=768px) */ @media (min-width: 768px) { .hide-ipad { display: none !important; } } /* Full-width on mobile, constrained on iPad */ .responsive-width { width: 100%; } @media (min-width: 768px) { .responsive-width { max-width: 680px; margin-left: auto; margin-right: auto; } } /* Touch target enforcement */ .touch-target { min-height: 44px; min-width: 44px; } @media (min-width: 768px) { .touch-target { min-height: 38px; } } /* ---- Squircle Icon Box ---- */ .squircle-icon { width: 32px; height: 32px; border-radius: 7px; /* ~22% for iOS feel */ display: flex; align-items: center; justify-content: center; background: var(--brand); color: white; } .squircle-icon.large { width: 40px; height: 40px; border-radius: 9px; } /* ---- Spring Animation Utilities ---- */ .spring-pop { animation: springPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .spring-slide-up { animation: springSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes springPop { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes springSlideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* ---- iOS-style Pull to Refresh (visual only) ---- */ .pull-refresh-indicator { height: 50px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 13px; } .pull-refresh-indicator::before { content: ""; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; margin-right: 8px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ======================================== 15) SALE MODULE NORMALIZATION (No inline styles) ======================================== */ .sale-page .sale-capsule { padding-top: calc(var(--ios-nav-height) + var(--safe-area-top)); padding-bottom: calc(var(--ios-tab-bar-height) + var(--safe-area-bottom)); min-height: calc(100vh - var(--ios-nav-height)); } .sale-page .page-title-text { font-size: 17px; } .sale-page .header-action-text { font-size: 17px; } .sale-page .header-add-button { padding-right: 16px; } .sale-page .header-add-icon { font-size: 28px; } .sale-page .sticky-search { position: sticky; top: calc(var(--ios-nav-height) + var(--safe-area-top)); z-index: 800; margin-left: -1px; margin-right: -1px; } .sale-page .sale-search-panel { background: rgba(242, 242, 247, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .sale-page .ios-search-input { height: var(--ios-search-height); border-radius: 10px; background: var(--search-fill); padding-left: 36px; } .sale-page .search-wrapper .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 10; font-size: 20px; color: var(--text-secondary); } .sale-page .search-clear-btn { position: absolute; right: 10px; top: 9px; color: var(--text-secondary); display: none; cursor: pointer; } .sale-page .search-clear-icon { font-size: 18px; } .sale-page .filter-scroll-view { padding-bottom: 8px; } .sale-page .summary-clean { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .sale-page .summary-clean { grid-template-columns: repeat(4, 1fr); } } .sale-page .image-listview.inset .item .in { flex-wrap: nowrap; } .sale-page .price-tag { font-size: 16px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; display: block; text-align: right; } .sale-page .status-badge-dot { font-size: 12px; display: flex; align-items: center; justify-content: flex-end; margin-top: 2px; } .sale-page .sale-subtext { font-size: 13px; } .sale-page .sale-microtext { font-size: 12px; } .sale-page .selection-toolbar { display: none; z-index: 1050; } .sale-page .empty-state-icon { font-size: 48px; color: var(--text-tertiary); } /* Sale Index Page */ .sale-index-page .sale-menu-icon { margin-right: 16px; text-align: center; } .sale-index-page .sale-spacer { margin-bottom: 90%; } /* Sale Fulfillment List Page */ .sale-fulf-page .data-table .col-customer { text-align: left; padding-left: 1rem; } @media (min-width: 576px) { .sale-fulf-page .data-table { table-layout: fixed; } .sale-fulf-page .data-table .col-customer { width: 40%; } .sale-fulf-page .data-table .col-qty { width: 30%; } .sale-fulf-page .data-table .col-amount { width: 30%; } } @media (max-width: 575.98px) { .sale-fulf-page .order-count { display: none; } } .sale-fulf-page .order-count { color: var(--text-secondary); } .sale-fulf-page .col-toggle { width: 15px; } .sale-fulf-page .clickable-row { cursor: pointer; } .sale-fulf-page .clickable-row:hover { background-color: var(--bg-body) !important; } .sale-fulf-page .btn-mika-qty { width: 40px; font-weight: 700; font-size: 20px; line-height: 1; } .sale-fulf-page .cut_mod_src { max-width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow-sm); display: block; } .sale-fulf-page .nav-tabs.lined .nav-link { border: none; font-weight: 500; font-size: 14px; color: var(--text-secondary); padding: 10px 20px; } .sale-fulf-page .nav-tabs.lined .nav-link.active { color: var(--brand); border-bottom: 2px solid var(--brand); } .sale-fulf-page .revoke-btn { padding: 4px 10px; font-size: 12px; } .sale-fulf-page .sale-table-sm { font-size: 13px; } .sale-fulf-page .sale-thumb-60 { max-width: 60px; } .sale-fulf-page .sale-thumb-50 { max-width: 50px; } .sale-fulf-page .sale-modal-thumb-col { width: 35%; } .sale-fulf-page .sale-w-40 { width: 40px; } .sale-fulf-page .sale-w-80 { width: 80px; } .sale-fulf-page .sale-w-130 { width: 130px; } .sale-fulf-page .sale-w-140 { width: 140px; } .sale-fulf-page .sale-w-180 { width: 180px; } /* Sale Add Page */ .sale-add-page .sale-header-icon { font-size: 24px; } .sale-add-page .appHeader .pageTitle { display: flex; align-items: center; justify-content: center; opacity: 1; } .sale-add-page .sale-add-title { font-size: 17px; font-weight: 600; color: var(--text-primary); } .sale-add-page .sale-back-text { font-size: 17px; font-weight: 400; color: var(--text-primary); } .sale-add-page .sale-header-btn { min-height: 44px; } .sale-add-page .sale-customer-btn { min-width: 150px; font-weight: 700; min-height: 44px; } .sale-add-page .sale-customer-row { padding: 12px 16px 4px 16px; } .sale-add-page .sale-add-section { margin: 0 var(--content-margin); } .sale-add-page .sale-add-card { background: var(--bg-card); border-radius: 12px; overflow: hidden; box-shadow: none; } .sale-add-page .sale-action-bar .btn { min-height: 44px; } .sale-add-page .sale-toolbar-btn { min-width: 44px; min-height: 44px; } .sale-add-page .sale-add-table { width: 100%; margin: 0; } .sale-add-page .sale-add-summary { padding: 12px 16px; border-top: 0.5px solid var(--separator); } .sale-add-page .order-nav { display: none; } .sale-add-page .sale-hidden { display: none; } .sale-add-page .modal-box-600 { max-width: 600px; } .sale-add-page .modal-box-600h { max-height: 600px; } .sale-add-page .recent-col-img { width: 20%; } .sale-add-page .recent-col-art { width: 30%; } .sale-add-page .recent-col-name { width: 50%; } .sale-add-page .btn-min-80 { min-width: 80px; } .sale-add-page .sale-qty-highlight { font-size: 28px; font-weight: 700; color: var(--success); } .sale-add-page .sale-input-compact { padding-right: 0 !important; display: block; } .sale-add-page .sale-input-no-pad { padding-right: 0 !important; } .sale-add-page .sale-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sale-add-page .sale-modal-header-fixed { position: fixed; right: 0; top: 0; z-index: 10; } .sale-add-page .sale-img-center-90 { width: 90%; margin: 0 auto; display: block; } .sale-add-page .sale-hint-text { font-size: 13px; color: var(--text-secondary); } .sale-add-page .sale-thumb-cover { object-fit: cover; } .sale-add-page .sale-qr-reader { width: 100%; } .sale-add-page .sale-qty-btn { width: 52px; height: 52px; font-weight: 700; font-size: 25px; touch-action: none; } .sale-add-page .sale-qty-input { height: 52px; border-top: 1px solid var(--border); } .sale-add-page .sale-add-bottom { color: var(--text-primary); } .sale-add-page .sale-bottom-text { color: var(--text-primary); } .sale-add-page .sale-bottom-btn { min-width: 44px; min-height: 44px; } /* Sale View Page */ .sale-view-page .sale-view-group-cell { border-right: 1px solid var(--border); vertical-align: top; } .sale-view-page .sale-view-art-title { font-weight: 600; } .sale-view-page .sale-view-art-subtitle { font-size: 12px; color: var(--text-secondary); } .sale-view-page .sale-view-empty { color: var(--text-secondary); padding-left: 10px; } /* ======================================== 11) iOS FORM STYLES (Inset Grouped) ======================================== */ .ios-inset-group { background-color: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } .ios-section-label { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; margin-left: 32px; margin-bottom: 6px; margin-top: 24px; } .ios-cell { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; min-height: 44px; border-bottom: 0.5px solid var(--border); background: #fff; position: relative; } .ios-cell:last-child { border-bottom: none; } .ios-cell-label { font-size: 17px; color: #000; flex-shrink: 0; margin-right: 12px; } .ios-cell-input { border: none; background: transparent; text-align: right; font-size: 17px; color: #007AFF; /* Standard iOS Input Blue, or use var(--text-primary) */ flex: 1; min-width: 0; /* Critical for preventing overflow */ outline: none; padding: 0; width: 100%; font-family: var(--font-stack); } /* Specific override for select to avoid default arrow overlapping if needed, but usually appearance:none handles it with text-align: right */ select.ios-cell-input { direction: rtl; /* Trick to align option text right if needed, but text-align works on modern browsers */ } .ios-cell-input:focus { outline: none; } .ios-cell-input::placeholder { color: var(--text-tertiary); } .ios-cell-value { font-size: 17px; color: var(--text-secondary); } .ios-cell-prefix { margin-right: 4px; font-size: 17px; color: var(--text-primary); } .ios-cell-suffix { margin-left: 4px; font-size: 17px; color: var(--text-secondary); } /* ======================================== END OF PRATO DESIGN SYSTEM ======================================== */