/* ═══════════════════════════════════════════════════════ CATER & CO — Professional Restaurant Management UI Reskinned: New design, 100% original logic preserved ═══════════════════════════════════════════════════════ */ :root { --bg: #f7f6f3; --bg-card: #ffffff; --bg-sidebar: #1b1b1f; --bg-sidebar-hover: #2a2a30; --bg-sidebar-active: #35353d; --bg-input: #f7f6f3; --bg-badge: #ef4444; --ink: #1a1a1e; --ink-secondary: #6b6b76; --ink-muted: #9d9da8; --ink-sidebar: #a1a1ad; --ink-sidebar-active: #ffffff; --border: #e5e5e8; --border-focus: #c8a84e; --accent: #c8a84e; --accent-light: #f5efd6; --accent-dark: #a08530; --success: #22c55e; --success-bg: #f0fdf4; --warning: #f59e0b; --warning-bg: #fffbeb; --danger: #ef4444; --danger-bg: #fef2f2; --info: #3b82f6; --info-bg: #eff6ff; --purple: #8b5cf6; --purple-bg: #f5f3ff; --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.07); --shadow-lg: 0 10px 30px rgba(0,0,0,0.1); --sidebar-w: 250px; --header-h: 56px; --transition: 0.2s cubic-bezier(0.4,0,0.2,1); /* Legacy compat aliases */ --paper: var(--bg); --cream: var(--bg); --gold: var(--accent); --rust: var(--danger); --sage: var(--success); --sage-light: var(--success-bg); --steel: var(--ink-secondary); --white: var(--bg-card); /* ── Accent opacity scale ───────────────────────────────────────────── Replaces hardcoded rgba(200,168,75,x) scattered across the codebase. All gold-tinted backgrounds, hover states, and focus rings should reference these tokens so a single accent-color change propagates everywhere automatically. ─────────────────────────────────────────────────────────────────── */ --accent-03: rgba(200,168,75,0.03); /* orders-table row hover (ultra-subtle) */ --accent-08: rgba(200,168,75,0.08); /* info-banner background */ --accent-14: rgba(200,168,75,0.14); /* active chip / active mobile tab */ --accent-15: rgba(200,168,75,0.15); /* detail-table focus-within row */ --accent-18: rgba(200,168,75,0.18); /* mobile search focus ring */ --accent-20: rgba(200,168,75,0.20); /* spinner unfilled track */ --accent-30: rgba(200,168,75,0.30); /* role-badge border */ } *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;background:var(--bg);} body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;font-size:14px;line-height:1.6;overflow-x:hidden;} ::selection{background:var(--accent-light);color:var(--ink);} input,select,textarea,button{font-family:inherit;font-size:inherit;} ::-webkit-scrollbar{width:6px;height:6px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:#a1a1aa;} /* LOGO */ .logo-img{object-fit:contain;display:block;} .logo-login{width:220px;height:220px;margin:0 auto 24px;border-radius:22px;} .logo-sidebar{width:40px;height:40px;border-radius:8px;} .logo-loading{width:120px;height:120px;border-radius:16px;margin-bottom:16px;} .logo-dn{width:50px;height:50px;border-radius:6px;} /* ═══════════════════════════════════════ LOADING OVERLAY ═══════════════════════════════════════ */ #loading-overlay{ position:fixed;inset:0;background:var(--bg-sidebar); display:flex;flex-direction:column;align-items:center;justify-content:center; z-index:10000;transition:opacity 0.5s,visibility 0.5s; } #loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;} .loading-logo{font-family:'Fraunces',serif;font-size:32px;color:#fff;letter-spacing:-0.5px;} .loading-logo span{color:var(--accent);} .loading-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);opacity:0.5;margin:6px 0 28px;} .loading-spinner{width:32px;height:32px;border:2px solid var(--accent-20);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* ═══════════════════════════════════════ LOGIN SCREEN ═══════════════════════════════════════ */ #login-screen{ min-height:100vh;display:flex;align-items:center;justify-content:center; background:var(--bg-sidebar);position:relative;overflow:hidden; } #login-screen::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,168,78,0.06) 0%, transparent 70%); } .login-card{ background:var(--bg-card);border-radius:var(--radius-lg); padding:44px 38px;width:400px;max-width:90vw;position:relative; box-shadow:var(--shadow-lg); } .login-brand{text-align:center;margin-bottom:28px;} .login-card label{display:block;font-size:12px;font-weight:600;color:var(--ink-secondary);margin-bottom:6px;letter-spacing:0.3px;} .login-card select,.login-card input{ width:100%;padding:11px 14px;border:1.5px solid var(--border); border-radius:var(--radius);background:var(--bg-input); font-size:14px;color:var(--ink);margin-bottom:18px; -webkit-appearance:none;appearance:none;outline:none; transition:border-color var(--transition),box-shadow var(--transition); } .login-card select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6b76' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer; } .login-card select:focus,.login-card input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-light);} .btn-primary{ width:100%;padding:12px;background:var(--accent);color:#fff;border:none; font-size:14px;font-weight:600;cursor:pointer;border-radius:var(--radius); transition:all var(--transition); } .btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-md);} .btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;} .lang-toggle-login{display:flex;gap:8px;margin-bottom:18px;} .lang-btn{ flex:1;padding:8px;border:1.5px solid var(--border);background:transparent; font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition); color:var(--ink-secondary);border-radius:var(--radius-sm); } .lang-btn.active{background:var(--bg-sidebar);color:var(--accent);border-color:var(--bg-sidebar);} /* ═══════════════════════════════════════ APP SHELL ═══════════════════════════════════════ */ #app{display:none;min-height:100vh;} /* TOPBAR / HEADER */ .topbar{ position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--header-h); background:rgba(255,255,255,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border);display:flex;align-items:center; padding:0 24px;z-index:90;gap:12px; } .topbar-brand{display:none;} /* Hidden in header, brand is in sidebar */ .topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;} .header-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-muted);} .header-breadcrumb span{color:var(--ink);font-weight:600;} .hamburger-btn{ display:none;background:none;border:none;cursor:pointer;padding:6px; border-radius:var(--radius-sm);color:var(--ink-secondary); } .hamburger-btn:hover{background:var(--bg);} .hamburger-btn svg{width:22px;height:22px;} .role-badge{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase; background:var(--accent-light);color:var(--accent-dark);padding:4px 10px; border:1px solid var(--accent-30);border-radius:var(--radius-sm);display:none; } .live-badge{ display:inline-flex;align-items:center;gap:6px; font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px; color:var(--success); } .live-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 6px rgba(34,197,94,0.4);animation:pulse 2s infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}} .lang-toggle{display:flex;border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;} .lang-toggle button{ background:none;border:none;color:var(--ink-muted);padding:5px 10px; font-family:'JetBrains Mono',monospace;font-size:10px;cursor:pointer;transition:all 0.15s; } .lang-toggle button.active{background:var(--accent-light);color:var(--accent-dark);} .btn-logout{ background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.15); color:#ef4444;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer; border-radius:var(--radius-sm);transition:all var(--transition); } .btn-logout:hover{background:rgba(239,68,68,0.12);} /* SIDEBAR */ .main-layout{display:flex;min-height:100vh;} .sidebar-wrap{ position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w); background:var(--bg-sidebar);display:flex;flex-direction:column; z-index:100;transition:transform 0.3s;overflow-y:auto;overflow-x:hidden; } .sidebar-brand{ padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,0.06); display:flex;align-items:center;gap:10px;flex-shrink:0; } .sidebar-brand-text h2{font-family:'Fraunces',serif;font-size:15px;color:#fff;letter-spacing:-0.3px;line-height:1.2;} .sidebar-brand-text p{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);opacity:0.5;margin-top:1px;} .sidebar-nav{flex:1;padding:8px 10px;overflow-y:auto;} .sidebar-section-label{ font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px; text-transform:uppercase;color:rgba(255,255,255,0.25);padding:12px 8px 8px; } .sidebar-link.nav-item{ display:flex;align-items:center;gap:11px;padding:9px 12px;margin:2px 0; border-radius:var(--radius);color:var(--ink-sidebar);cursor:pointer; transition:all var(--transition);position:relative;font-size:13px;font-weight:500; border-left:none; } .sidebar-link.nav-item:hover{background:var(--bg-sidebar-hover);color:#d4d4dd;} .sidebar-link.nav-item.active{background:var(--bg-sidebar-active);color:var(--ink-sidebar-active);} .sidebar-link.nav-item.active::before{ content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px; background:var(--accent);border-radius:0 2px 2px 0; } .sidebar-link.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:0.5;} .sidebar-link.nav-item.active svg{opacity:1;color:var(--accent);} .nav-badge{ margin-left:auto;min-width:18px;height:18px;padding:0 5px; background:var(--bg-badge);color:#fff;font-size:10px;font-weight:700; border-radius:9px;display:flex;align-items:center;justify-content:center; font-family:'JetBrains Mono',monospace;animation:badgePulse 2s ease-in-out infinite; } @keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}} /* ── Collapsible Nav Groups ── */ .sidebar-group{margin-bottom:4px;} .sidebar-group-header{ display:flex;align-items:center;justify-content:space-between; padding:10px 12px;margin:2px 0;cursor:pointer; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; letter-spacing:0.5px;color:var(--gold); border-radius:var(--radius);transition:all var(--transition); user-select:none; } .sidebar-group-header:hover{background:rgba(255,255,255,0.04);} .sidebar-chevron{transition:transform 0.25s ease;opacity:0.5;flex-shrink:0;} .sidebar-group-header.open .sidebar-chevron{transform:rotate(180deg);opacity:0.8;} .sidebar-group-items{ overflow:hidden;max-height:800px;transition:max-height 0.3s ease,opacity 0.25s ease;opacity:1; padding-left:6px; } .sidebar-group-items.collapsed{max-height:0;opacity:0;pointer-events:none;} .sidebar-group-items .sidebar-link.nav-item{font-size:12px;padding:7px 12px;} /* ── Form Labels & Inputs (Phase 5) ── */ .form-lbl{font-size:11px;color:var(--ink-secondary);display:block;margin-bottom:4px;font-weight:500;} /* Standard input/select outside detail-table — replaces scattered 1px inline styles */ .form-input{ padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm); font-size:13px;font-family:inherit;background:var(--bg-card);color:var(--ink); transition:border-color var(--transition);outline:none; } .form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);} .sidebar-footer{ margin-top:auto;padding:14px 12px;border-top:1px solid rgba(255,255,255,0.06);flex-shrink:0; } .sidebar-user{display:flex;align-items:center;gap:9px;padding:6px;margin-bottom:8px;} .sidebar-user-avatar{ width:30px;height:30px;border-radius:8px;background:var(--bg-sidebar-active); display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700; color:var(--accent);font-family:'JetBrains Mono',monospace; } .sidebar-user-info{flex:1;min-width:0;} .sidebar-user-info .name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-user-info .role{font-size:9px;color:var(--ink-sidebar);font-family:'JetBrains Mono',monospace;letter-spacing:0.5px;text-transform:uppercase;} .btn-signout{ width:100%;padding:8px 12px;border-radius:var(--radius); background:rgba(239,68,68,0.08);color:#f87171;border:none; font-size:11px;font-weight:600;cursor:pointer; display:flex;align-items:center;gap:7px;justify-content:center; transition:all var(--transition); } .btn-signout:hover{background:rgba(239,68,68,0.15);} .btn-signout svg{width:14px;height:14px;} /* CONTENT AREA */ .content{ flex:1;padding:28px;margin-left:var(--sidebar-w);margin-top:var(--header-h); min-height:calc(100vh - var(--header-h));overflow-y:auto; } /* PAGE TITLES */ .page-title{font-family:'Fraunces',serif;font-size:24px;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-0.5px;} .page-subtitle{color:var(--ink-secondary);font-size:13px;font-weight:400;line-height:1.5;margin-bottom:24px;} /* CARDS */ .card{ background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius);padding:24px;margin-bottom:20px; box-shadow:none;transition:box-shadow var(--transition); } .card:hover{box-shadow:var(--shadow-sm);} .card-header{ display:flex;align-items:center;justify-content:space-between; margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border); } .card-title{font-family:'Fraunces',serif;font-size:17px;} .section-tag{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px; text-transform:uppercase;padding:3px 10px;border:1px solid;border-radius:var(--radius-sm); } .tag-bakery{color:#8B6914;border-color:#8B6914;background:#fdf6e3;} .tag-sauces{color:#c44b2b;border-color:#c44b2b;background:#fdf0ed;} .tag-meat{color:#5a3e6b;border-color:#5a3e6b;background:#f5f0fa;} .tag-veggie{color:#4a6741;border-color:#4a6741;background:#e8f0e7;} /* ORDER FORM */ .items-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} @media(max-width:700px){.items-grid{grid-template-columns:1fr;}} .item-row{ display:flex;align-items:flex-start;padding:10px 14px;border:1.5px solid var(--border); background:var(--bg-card);gap:10px;transition:all var(--transition);border-radius:var(--radius-sm); } .item-row.selected{border-color:var(--accent);background:var(--accent-light);} .item-checkbox{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex-shrink:0;margin-top:3px;} .item-info{flex:1;min-width:0;} .item-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .item-unit-badge{display:inline-block;padding:1px 7px;border-radius:20px;background:#f0ece0;color:var(--ink-secondary);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;border:1px solid #e0d9c8;} .item-par-badge{display:inline-block;padding:1px 7px;border-radius:20px;background:#f5f0e8;color:#8a7a55;font-family:'JetBrains Mono',monospace;font-size:10px;border:1px solid #e8dfc8;} .item-low-badge{display:inline-block;padding:1px 7px;border-radius:20px;background:#fce8e8;color:#c0392b;font-family:'JetBrains Mono',monospace;font-size:10px;border:1px solid #f5c6c6;font-weight:700;} .item-meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-secondary);margin-top:2px;} .dual-qty{display:none;flex-direction:column;gap:4px;flex-shrink:0;} .dual-qty.visible{display:flex;} .qty-field{display:flex;align-items:center;gap:4px;} .qty-field label{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-secondary);white-space:nowrap;min-width:48px;} .item-qty{ width:62px;padding:6px 8px;border:1.5px solid var(--border);font-family:'JetBrains Mono',monospace; font-size:12px;text-align:center;background:var(--bg);color:var(--ink); border-radius:var(--radius-sm);outline:none;transition:border-color var(--transition); } .item-qty:disabled{opacity:0.3;cursor:not-allowed;} .item-qty:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);} .section-block-title{ font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:2px; text-transform:uppercase;color:var(--accent);padding:8px 0; border-bottom:1px solid var(--border);margin-bottom:14px; } .form-note{ width:100%;padding:10px 14px;border:1.5px solid var(--border);font-size:13px; resize:vertical;min-height:80px;background:var(--bg-card);color:var(--ink); border-radius:var(--radius);outline:none;transition:border-color var(--transition); } .form-note:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);} /* BUTTONS */ .btn{ padding:10px 20px;font-size:12px;font-weight:600;cursor:pointer;border:none; transition:all var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:6px; border-radius:var(--radius-sm);white-space:nowrap;line-height:1; } .btn:disabled{opacity:0.5;cursor:not-allowed;} .btn-submit{background:var(--accent);color:#fff;} .btn-submit:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-1px);} .btn-success{background:var(--success);color:#fff;} .btn-success:hover:not(:disabled){background:#16a34a;transform:translateY(-1px);} .btn-ghost{background:var(--bg);border:1.5px solid var(--border);color:var(--ink);} .btn-ghost:hover{border-color:var(--ink-muted);} .btn-print{background:var(--info);color:#fff;border-radius:var(--radius-sm);} .btn-print:hover{background:#2563eb;transform:translateY(-1px);} .btn-sm{padding:6px 14px;font-size:11px;} /* STATUS BADGES */ .status{ display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace; font-size:10px;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px; border-radius:20px;font-weight:600; } .status::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;} .status-pending{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;}.status-pending::before{background:#f97316;} .status-received{background:var(--info-bg);color:#1d4ed8;border:1px solid #bfdbfe;}.status-received::before{background:var(--info);} .status-sent{background:var(--purple-bg);color:#6d28d9;border:1px solid #ddd6fe;}.status-sent::before{background:var(--purple);} .status-delivered{background:var(--success-bg);color:#15803d;border:1px solid #bbf7d0;}.status-delivered::before{background:var(--success);} .status-cancelled{background:var(--danger-bg);color:#b91c1c;border:1px solid #fecaca;}.status-cancelled::before{background:var(--danger);} .status-dispatched{background:var(--success-bg);color:#15803d;border:1px solid #bbf7d0;}.status-dispatched::before{background:var(--success);} .status-completed{background:var(--purple-bg);color:#6d28d9;border:1px solid #ddd6fe;}.status-completed::before{background:var(--purple);} .status-partial-dispatched{background:var(--warning-bg);color:#92400e;border:1px solid #fde68a;}.status-partial-dispatched::before{background:var(--warning);} .status-branch-confirmed{background:var(--info-bg);color:#1d4ed8;border:1px solid #bfdbfe;}.status-branch-confirmed::before{background:var(--info);} .status-closed-no-stock{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;}.status-closed-no-stock::before{background:#64748b;} /* TABLES */ .orders-table{width:100%;border-collapse:collapse;font-size:13px;} .orders-table th{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px; text-transform:uppercase;color:var(--ink-muted);padding:10px 14px;text-align:left; background:var(--bg);border-bottom:1.5px solid var(--border);font-weight:600; } .orders-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px;} .orders-table tr:hover td{background:var(--accent-03);} .order-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);font-weight:600;} /* MODAL */ .modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px); z-index:500;display:none;align-items:center;justify-content:center;padding:20px; } .modal-overlay.open{display:flex;animation:fadeIn 0.2s;} /* H-3 — body scroll lock while a modal is open. Uses :has() (Chrome 105+/ Safari 15.4+/Firefox 121+), same selector family already used in this file for .card:has(.orders-table). */ body:has(.modal-overlay.open){overflow:hidden;} /* Stage 2 — mobile order shell defaults (desktop): hide the mobile-only UI elements unconditionally. The mobile @media block below re-shows them on phones. Without this, divs default to display:block and the sticky submit bar / chip bar / search input leak onto desktop. */ .mobile-order-search, .mobile-order-chip-bar, .mobile-order-sticky-submit{display:none;} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{ background:var(--bg-card);width:100%;max-width:820px;max-height:90vh; box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);animation:slideUp 0.3s; display:flex;flex-direction:column;overflow:hidden; } @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}} .modal-header{ padding:20px 24px;border-bottom:1px solid var(--border);display:flex; align-items:center;justify-content:space-between; background:var(--bg-card);z-index:10;border-radius:var(--radius-lg) var(--radius-lg) 0 0; flex-shrink:0; } .modal-title{font-family:'Fraunces',serif;font-size:18px;letter-spacing:-0.3px;} .modal-close{ width:32px;height:32px;border-radius:var(--radius-sm);background:var(--bg); border:none;cursor:pointer;display:flex;align-items:center;justify-content:center; color:var(--ink-secondary);font-size:18px;transition:all var(--transition); } .modal-close:hover{background:var(--danger-bg);color:var(--danger);} .modal-body{padding:24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;} .modal-footer{ padding:16px 24px;border-top:1px solid var(--border);display:flex; justify-content:flex-end;gap:10px;background:var(--bg);flex-wrap:wrap; border-radius:0 0 var(--radius-lg) var(--radius-lg); flex-shrink:0; } /* DETAIL SECTIONS */ .detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px;} .detail-item label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-secondary);display:block;margin-bottom:4px;} .detail-item span{font-size:14px;font-weight:500;} .detail-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:13px;} .detail-table th{ font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1px; text-transform:uppercase;color:var(--ink-muted);padding:9px 12px;text-align:left; background:var(--bg);border-bottom:1.5px solid var(--border); } .detail-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;} .detail-table tr:focus-within{background-color:var(--accent-15)!important;} .detail-table tr:hover td{background:var(--accent-03);} .qty-input{ width:72px;padding:6px 8px;border:1.5px solid var(--border);font-family:'JetBrains Mono',monospace; font-size:13px;text-align:center;background:var(--bg-card);color:var(--ink);border-radius:var(--radius-sm);outline:none; transition:border-color var(--transition); } .qty-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);} /* STATS */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;} @media(max-width:900px){.stats-row{grid-template-columns:1fr 1fr;}} .stat-card{ background:var(--bg-card);border:1px solid var(--border);padding:20px; border-radius:var(--radius);transition:all var(--transition); } .stat-card:hover{border-color:var(--accent);box-shadow:var(--shadow);} .stat-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px;} .stat-value{font-family:'Fraunces',serif;font-size:28px;} /* DELIVERY NOTE */ .dn-preview{background:#fff;border:1px solid var(--border);padding:48px;max-width:800px;margin:0 auto;border-radius:var(--radius);} .dn-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;padding-bottom:24px;border-bottom:3px solid var(--ink);} .dn-company{font-family:'Fraunces',serif;font-size:26px;margin-bottom:4px;} .dn-company-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);} .dn-num{font-family:'Fraunces',serif;font-size:20px;} .dn-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-secondary);margin-top:4px;} .dn-parties{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px;} .dn-party-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-secondary);margin-bottom:6px;} .dn-party-name{font-weight:600;font-size:15px;margin-bottom:2px;} .dn-table{width:100%;border-collapse:collapse;margin-bottom:24px;} .dn-table th{padding:10px 14px;text-align:left;background:var(--ink);color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;} .dn-table td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;} .dn-table tr:nth-child(even) td{background:var(--bg);} .dn-sigs{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;padding-top:24px;border-top:1px solid var(--border);} .dn-sig-box{border-bottom:1px solid var(--ink);min-height:48px;margin-bottom:8px;} .dn-sig-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-secondary);} .dn-stamp{margin-top:32px;padding:16px;border:2px dashed var(--border);text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-secondary);letter-spacing:2px;text-transform:uppercase;border-radius:var(--radius-sm);} .dn-footer{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-secondary);} /* EXTRA ITEMS */ .add-item-select{width:100%;padding:8px 10px;border:1.5px solid var(--border);font-size:13px;background:var(--bg);color:var(--ink);appearance:none;border-radius:var(--radius-sm);} .extra-item-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);} /* ALERTS */ .alert{padding:14px 18px;margin-bottom:16px;font-size:13px;border-radius:var(--radius);display:flex;align-items:flex-start;gap:10px;} .alert-success{background:var(--success-bg);border:1px solid rgba(34,197,94,0.2);color:#166534;} .alert-warning{background:var(--warning-bg);border:1px solid rgba(245,158,11,0.2);color:#92400e;} .alert-info{background:var(--info-bg);border:1px solid rgba(59,130,246,0.2);color:#1e40af;} .alert-error{background:var(--danger-bg);border:1px solid rgba(239,68,68,0.2);color:#991b1b;} .empty-state{text-align:center;padding:60px 20px;color:var(--ink-secondary);} .empty-state-icon{font-size:40px;margin-bottom:12px;opacity:0.3;} .empty-state-text{font-family:'Fraunces',serif;font-size:18px;color:var(--ink);margin-bottom:6px;} .divider{height:1px;background:var(--border);margin:16px 0;} /* ADMIN */ .admin-item-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);} .admin-item-name{flex:1;font-size:13px;font-weight:500;} .admin-item-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-secondary);width:100px;} /* TOAST NOTIFICATIONS */ #toast-container{ position:fixed;top:70px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px; pointer-events:none; } .toast{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius); padding:14px 18px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:10px; font-size:13px;font-weight:500;pointer-events:auto;min-width:280px;max-width:400px; animation:toastIn 0.3s; } .toast.removing{animation:toastOut 0.3s forwards;} @keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes toastOut{to{transform:translateX(100%);opacity:0}} .toast-icon{width:20px;height:20px;flex-shrink:0;} .toast-success .toast-icon{color:var(--success);} .toast-error .toast-icon{color:var(--danger);} .toast-warning .toast-icon{color:var(--warning);} .toast-info .toast-icon{color:var(--info);} .toast-close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--ink-muted);padding:2px;font-size:14px;} .toast-close:hover{color:var(--ink);} /* OFFLINE BANNER */ .offline-banner{ position:fixed;top:0;left:0;right:0;background:var(--danger);color:#fff; text-align:center;padding:8px;font-size:12px;font-weight:600;z-index:10001; display:none;font-family:'JetBrains Mono',monospace;letter-spacing:0.5px; } .offline-banner.show{display:block;} /* SYSTEM OFFLINE BANNER (Supabase unreachable) — sticks until refresh */ .system-offline-banner{ position:fixed;top:0;left:0;right:0;background:#b91c1c;color:#fff; text-align:center;padding:10px 14px;font-size:13px;font-weight:700;z-index:10002; display:none;font-family:'JetBrains Mono',monospace;letter-spacing:0.4px; box-shadow:0 2px 6px rgba(0,0,0,0.25); } .system-offline-banner.show{display:flex;align-items:center;justify-content:center;gap:14px;} .system-offline-text{flex:0 1 auto;} .system-offline-refresh{ background:#fff;color:#b91c1c;border:0;border-radius:4px;padding:4px 12px; font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:0.4px; } .system-offline-refresh:hover{background:#fef2f2;} /* ═══════════════════════════════════════ MOBILE & TABLET RESPONSIVE ═══════════════════════════════════════ */ @media(max-width:768px){ :root{--sidebar-w:0px;} .sidebar-wrap{transform:translateX(-280px);width:280px;} .sidebar-wrap.open{transform:translateX(0);box-shadow:var(--shadow-lg);} .topbar{left:0;} .hamburger-btn{display:block;} .content{margin-left:0;padding:20px 16px;} /* Codex UI review round 2, correction #2: on narrow phones the header's right-hand cluster (live badge, EN/PT toggle, Sign Out) no longer fits next to the hamburger + page title on one row, clipping Sign Out and the PT button (technician-mobile.png). Let the row wrap onto a second line instead of clipping/scrolling. flex-wrap only takes effect when content actually overflows, so wider phones/tablets that still fit on one row are unaffected; --header-h is bumped in lockstep because .content already derives its margin-top/min-height from that same variable (line ~283), so wrapped and single-row cases both stay correctly offset with no overlap. */ .topbar{flex-wrap:wrap;height:auto;min-height:var(--header-h);padding:10px 16px;row-gap:8px;} .header-breadcrumb{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .topbar-right{flex:1 1 100%;justify-content:flex-end;margin-left:0;flex-wrap:wrap;row-gap:6px;} :root{--header-h:96px;} .page-title{font-size:20px;} .page-subtitle{font-size:12px;margin-bottom:16px;} .card{padding:16px;border-radius:var(--radius-sm);} .stats-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;} .stat-value{font-size:22px;} .orders-table{font-size:12px;} .orders-table th,.orders-table td{padding:8px 10px;} .card:has(.orders-table){padding:0;overflow-x:auto;border-radius:var(--radius-sm);} /* Phase 6B — make .card elements that contain a detail-table horizontally scrollable on mobile so clipped columns (including action buttons) are reachable by swipe. Mirrors the existing .orders-table rule; card padding is intentionally kept (card-header stays padded, only the table overflows). Fixes: armazen-queue, stock-value (card-wrapped tables). */ .card:has(.detail-table){overflow-x:auto!important;} .modal-overlay{padding:0;align-items:flex-end;} .modal{max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-width:100%;display:flex;flex-direction:column;} .modal-body{padding:16px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;max-height:calc(92vh - 130px);} .modal-footer{padding:12px 16px;position:sticky;bottom:0;z-index:10;background:var(--bg-card);border-top:1px solid var(--border);flex-shrink:0;} .detail-grid{grid-template-columns:1fr 1fr;gap:10px;} .dn-preview{padding:20px 16px;} .btn{padding:9px 16px;font-size:11px;} .btn-sm{padding:6px 10px;font-size:10px;} .item-row{flex-wrap:wrap;} .dual-qty.visible{flex-direction:row;flex-wrap:wrap;} .item-qty{width:52px;} #rpt-item-picker{position:fixed;bottom:70px;left:8px;right:8px;top:auto;max-height:60vh;} .extra-item-row{flex-wrap:wrap;gap:6px;} /* H-1 — keep toast container BELOW the 60-px topbar so the success/info toasts (especially the post-login "Signed in as …" banner) do not cover the hamburger, language toggle, or notification bell on mobile. */ #toast-container{top:72px;right:12px;left:12px;} .toast{min-width:auto;} /* M-3 — drop backdrop-filter:blur(4px) on small viewports. The blur is a known compositor hot path on Android Chrome on long pages and was the likely cause of the user-reported "freeze" sensation. Flat semi-opaque dimmer instead. */ .modal-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,0.55);} /* Stage 1 — My CK Orders mobile cards. Any .detail-table that opts in via the .mobile-cards class flips from a 4-col cramped table into a stacked card list on phones. Desktop layout is untouched (this whole block lives inside @media max-width:768px). Each needs a data-label="…" attribute (added by the row emitters in pages-salt.js / pages-bbqhouse.js); the action uses class "actions" so its buttons render side-by-side with chunky 44px touch. */ .detail-table.mobile-cards thead{display:none;} .detail-table.mobile-cards tbody tr{ display:block; padding:14px; margin:0 0 10px 0; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); box-shadow:0 1px 2px rgba(0,0,0,0.04); } .detail-table.mobile-cards tbody td{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border:none; font-size:13px; } .detail-table.mobile-cards tbody td::before{ content:attr(data-label); font-size:10px; color:var(--ink-secondary); text-transform:uppercase; letter-spacing:0.6px; font-weight:600; flex-shrink:0; } .detail-table.mobile-cards tbody td.actions{ display:flex; flex-direction:row; gap:8px; padding-top:12px; margin-top:6px; border-top:1px solid var(--border); } .detail-table.mobile-cards tbody td.actions::before{display:none;} .detail-table.mobile-cards tbody td.actions button{ flex:1; min-height:44px; font-size:13px; padding:10px 14px; } /* "No orders in this category" placeholder — clean centred empty card */ .detail-table.mobile-cards tbody tr.empty-row{ background:var(--bg); border:1px dashed var(--border); box-shadow:none; text-align:center; padding:28px 16px; } .detail-table.mobile-cards tbody tr.empty-row td{ display:block; padding:0; font-size:14px; color:var(--ink-secondary); } .detail-table.mobile-cards tbody tr.empty-row td::before{display:none;} /* Stage 1+ — segmented mobile tabs for My CK Orders panel. Targets the existing tab buttons by id pattern so the JS that toggles their inline styles still works. flex:1 makes them equal-width pills with chunky 44px tap targets. The "active" tab is detected by its inline style containing color:var(--gold) (set by saltCKSwitchTab/ bbqCKSwitchTab) — no JS change needed. */ #salt-ck-tab-pending, #salt-ck-tab-dispatched, #salt-ck-tab-completed, #bbq-ck-tab-pending, #bbq-ck-tab-dispatched, #bbq-ck-tab-completed{ flex:1 1 0 !important; min-height:44px; padding:10px 6px !important; font-size:12px !important; border-radius:var(--radius-sm) var(--radius-sm) 0 0; margin-bottom:0 !important; white-space:normal !important; line-height:1.2; } #salt-ck-tab-pending[style*="color: var(--gold)"], #salt-ck-tab-dispatched[style*="color: var(--gold)"], #salt-ck-tab-completed[style*="color: var(--gold)"], #bbq-ck-tab-pending[style*="color: var(--gold)"], #bbq-ck-tab-dispatched[style*="color: var(--gold)"], #bbq-ck-tab-completed[style*="color: var(--gold)"]{ background:var(--accent-14) !important; } /* Container that holds the 3 tab buttons — drop overflow-x:auto on mobile since equal-width tabs no longer need to scroll horizontally. */ div:has(> #salt-ck-tab-pending), div:has(> #bbq-ck-tab-pending){ overflow-x:hidden !important; padding-left:8px !important; padding-right:8px !important; } /* Tab content panes — defensive overflow-x:hidden so any wide content (e.g. very long order ids) wraps instead of triggering a scroll bar. */ #salt-ck-orders-pending, #salt-ck-orders-dispatched, #salt-ck-orders-completed, #bbq-ck-orders-pending, #bbq-ck-orders-dispatched, #bbq-ck-orders-completed{ overflow-x:hidden; } /* ═══════════════════════════════════════════════════════════════════════ Stage 2 — Mobile order form shell Wraps the SALT / BBQ / CK / branch order pages' existing item lists in a professional mobile UI: search input, horizontal section chip bar, collapsible section accordion, sticky bottom submit bar. Desktop is unaffected — every rule below lives inside @media (max- width:768px). Item rows / checkboxes / qty inputs / submit functions are untouched. ═══════════════════════════════════════════════════════════════════════ */ /* Full-width search input above the order form */ .mobile-order-search{ display:block; width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; background:var(--bg-card); margin-bottom:12px; box-sizing:border-box; } .mobile-order-search:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px var(--accent-18); } /* Horizontal scrollable chip bar — one chip per section/category */ .mobile-order-chip-bar{ display:flex !important; gap:8px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 10px; margin-bottom:12px; -webkit-overflow-scrolling:touch; } .mobile-order-chip-bar::-webkit-scrollbar{display:none;} .mobile-order-chip-bar{scrollbar-width:none;} .mobile-order-chip{ flex-shrink:0; padding:8px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:999px; font-size:12px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap; min-height:36px; display:inline-flex; align-items:center; gap:6px; } .mobile-order-chip:active{ background:var(--accent-14); } .mobile-order-chip .count{ font-size:10px; color:var(--ink-secondary); font-family:'JetBrains Mono',monospace; font-weight:400; } /* Collapsible sections (.section-card with onclick on .card-header) */ .section-card .card-header{ cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; } .section-card .card-header::after{ content:'▾'; margin-left:auto; font-size:12px; color:var(--ink-secondary); transition:transform 0.2s ease; flex-shrink:0; } .section-card.collapsed .card-header::after{ transform:rotate(-90deg); } /* Hide the card body when collapsed — every direct child except header */ .section-card.collapsed > div:not(.card-header){ display:none !important; } /* Sticky bottom submit bar — fixed at viewport bottom on mobile when items are selected. Hidden by default; .visible class shows it. */ .mobile-order-sticky-submit{ position:fixed; left:0;right:0;bottom:0; background:var(--bg-card); border-top:1px solid var(--border); padding:10px 14px; display:none; align-items:center; gap:12px; z-index:200; box-shadow:0 -2px 12px rgba(0,0,0,0.10); } .mobile-order-sticky-submit.visible{display:flex;} .mobile-order-sticky-submit .count{ flex:1; font-size:13px; font-weight:600; color:var(--ink); } .mobile-order-sticky-submit button{ flex-shrink:0; min-height:46px; padding:0 22px; font-weight:700; font-size:14px; } /* Page-bottom padding so the sticky bar never overlaps the last items */ #salt-ck-form, #bbq-ck-form, #ck-wh-form-area{ padding-bottom:90px; } /* Stage 2 (3/4) — make the existing .section-block subcategories collapsible on mobile only. The title becomes a tappable header with a chevron; the body is hidden when .section-block.collapsed. Desktop layout unchanged (rules live inside this @media block). */ .section-block .section-block-title{ cursor:pointer; user-select:none; display:flex; align-items:center; -webkit-tap-highlight-color:transparent; } .section-block .section-block-title::after{ content:'▾'; margin-left:auto; font-size:11px; color:var(--ink-secondary); transition:transform 0.2s ease; flex-shrink:0; } .section-block.collapsed .section-block-title::after{ transform:rotate(-90deg); } .section-block.collapsed .section-block-body{ display:none !important; } } /* ── Phase 6B — Stock Movements mobile column tightening ────────────────── #mv-table-wrap already has overflow-x:auto (set inline in pages-stock-data.js). These rules reduce the fixed-column widths so the horizontal scroll range shrinks from ~346px to ~120px, making it practical to swipe to the Actor column without losing the Item or Note columns. !important is required to override inline style="width:Npx" on each . No columns hidden. No data removed. Note col (6) gets white-space:normal so long notes wrap in 90px instead of extending the table further right. */ @media(max-width:768px){ #mv-table-wrap .detail-table{font-size:10px;} #mv-table-wrap .detail-table th, #mv-table-wrap .detail-table td{padding:6px 7px;} #mv-table-wrap .detail-table th:nth-child(1), #mv-table-wrap .detail-table td:nth-child(1){width:88px!important;} #mv-table-wrap .detail-table th:nth-child(3), #mv-table-wrap .detail-table td:nth-child(3){width:68px!important;} #mv-table-wrap .detail-table th:nth-child(4), #mv-table-wrap .detail-table td:nth-child(4){width:52px!important;} #mv-table-wrap .detail-table th:nth-child(5), #mv-table-wrap .detail-table td:nth-child(5){width:52px!important;} #mv-table-wrap .detail-table th:nth-child(6), #mv-table-wrap .detail-table td:nth-child(6){width:90px!important;white-space:normal!important;} #mv-table-wrap .detail-table th:nth-child(7), #mv-table-wrap .detail-table td:nth-child(7){width:48px!important;} } .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:99;} .sidebar-overlay.show{display:block;} @media(max-width:400px){ .content{padding:12px 12px;} .stats-row{grid-template-columns:1fr 1fr;gap:8px;} .stat-card{padding:12px;border-radius:var(--radius-sm);} .stat-value{font-size:20px;} } @media(min-width:769px) and (max-width:1024px){ :root{--sidebar-w:220px;} .content{padding:24px 20px;} .stats-row{grid-template-columns:repeat(4,1fr);} .modal{max-width:90vw;} } /* ═══════════════════════════════════════ PHASE 1 — ORDER FORM IMPROVEMENTS ═══════════════════════════════════════ */ /* ITEM SEARCH BAR */ .order-item-search{ position:sticky;top:var(--header-h);z-index:50; background:var(--bg);padding:12px 0 8px;margin-bottom:4px; } .order-item-search input{ width:100%;padding:12px 16px 12px 42px;border:1.5px solid var(--border); border-radius:var(--radius);font-size:14px;font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg-card);transition:border-color var(--transition); } .order-item-search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-light);} .order-item-search .search-icon{ position:absolute;left:14px;top:50%;transform:translateY(-50%); color:var(--ink-muted);pointer-events:none;width:18px;height:18px; } .order-item-search .search-clear{ position:absolute;right:12px;top:50%;transform:translateY(-50%); background:none;border:none;cursor:pointer;color:var(--ink-muted); font-size:16px;padding:4px;display:none; } .order-item-search .search-clear.visible{display:block;} .order-item-search .search-count{ font-size:11px;color:var(--ink-muted);margin-top:4px;padding-left:4px; font-family:'JetBrains Mono',monospace; } /* COLLAPSIBLE SECTIONS (ACCORDION) */ .section-header-toggle{ display:flex;align-items:center;justify-content:space-between; cursor:pointer;user-select:none;padding:2px 0; } .section-header-toggle:hover{opacity:0.85;} .section-collapse-icon{ width:20px;height:20px;transition:transform 0.25s ease; color:var(--ink-secondary);flex-shrink:0; } .section-collapse-icon.collapsed{transform:rotate(-90deg);} .section-body{ max-height:2000px;overflow:hidden;transition:max-height 0.35s ease, opacity 0.25s ease; opacity:1; } .section-body.collapsed{max-height:0;opacity:0;padding:0;} .section-item-count{ font-family:'JetBrains Mono',monospace;font-size:11px; color:var(--ink-muted);margin-left:8px; } .section-header-toggle .card-title{display:flex;align-items:center;gap:6px;} /* FLOATING ORDER SUMMARY BAR */ .order-float-bar{ position:fixed;bottom:0;left:var(--sidebar-w);right:0;z-index:80; background:var(--bg-sidebar);color:#fff; padding:14px 24px;display:flex;align-items:center;justify-content:space-between; transform:translateY(100%);transition:transform 0.3s ease; box-shadow:0 -4px 20px rgba(0,0,0,0.15); } .order-float-bar.visible{transform:translateY(0);} .order-float-bar .float-info{font-size:13px;font-weight:500;} .order-float-bar .float-info strong{color:var(--accent);font-family:'JetBrains Mono',monospace;} .order-float-bar .btn-review{ background:var(--accent);color:#fff;border:none;padding:10px 24px; border-radius:var(--radius);font-weight:600;font-size:13px;cursor:pointer; transition:all var(--transition); } .order-float-bar .btn-review:hover{background:var(--accent-dark);transform:translateY(-1px);} @media(max-width:768px){ .order-float-bar{left:0;padding:12px 16px;} .order-float-bar .btn-review{padding:8px 16px;font-size:12px;} } /* CONFIRMATION MODAL STYLES */ .confirm-summary{max-height:50vh;overflow-y:auto;margin:8px 0;} .confirm-section{margin-bottom:16px;} .confirm-section-title{ font-family:'Fraunces',serif;font-size:14px;font-weight:600; color:var(--ink);margin-bottom:6px;padding-bottom:4px; border-bottom:1px solid var(--border); } .confirm-item{ display:flex;justify-content:space-between;align-items:center; padding:6px 0;font-size:13px;border-bottom:1px solid rgba(0,0,0,0.04); } .confirm-item:last-child{border-bottom:none;} .confirm-item .ci-name{color:var(--ink);} .confirm-item .ci-qty{ font-family:'JetBrains Mono',monospace;font-weight:600; color:var(--accent-dark);white-space:nowrap; } .confirm-note{ margin-top:12px;padding:10px 14px;background:var(--info-bg); border-radius:var(--radius-sm);font-size:12px;color:#1e40af; } .confirm-warning{ margin-top:12px;padding:12px 14px;background:var(--warning-bg); border:1px solid rgba(245,158,11,0.2);border-radius:var(--radius-sm); font-size:12px;color:#92400e;font-weight:500;text-align:center; } /* LOADING SKELETONS */ @keyframes shimmer{ 0%{background-position:-400px 0} 100%{background-position:400px 0} } .skeleton{ background:linear-gradient(90deg,var(--border) 25%,rgba(0,0,0,0.04) 50%,var(--border) 75%); background-size:800px 100%;animation:shimmer 1.5s infinite; border-radius:var(--radius-sm); } .skeleton-line{height:14px;margin-bottom:10px;border-radius:4px;} .skeleton-line.w60{width:60%;} .skeleton-line.w80{width:80%;} .skeleton-line.w40{width:40%;} .skeleton-card{ height:80px;border-radius:var(--radius);margin-bottom:12px; } .skeleton-stat{height:90px;border-radius:var(--radius);} .skeleton-table{height:200px;border-radius:var(--radius);} .skeleton-wrap{padding:8px 0;} .skeleton-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;} @media(max-width:768px){.skeleton-stats-row{grid-template-columns:1fr 1fr;}} /* ═══════════════════════════════════════ PHASE 2 — HIGH VALUE FEATURES ═══════════════════════════════════════ */ /* ═══════════════════════════════════════ PHASE 3 — STOCK & INVENTORY ═══════════════════════════════════════ */ /* STOCK DASHBOARD CARDS */ .stock-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;} .stock-dash-card{ padding:16px;background:var(--bg-card);border:1px solid var(--border); border-radius:var(--radius);text-align:center;transition:all var(--transition); } .stock-dash-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);} .stock-dash-card .dash-val{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;line-height:1.2;} .stock-dash-card .dash-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-secondary);margin-top:4px;} /* MOVEMENT TYPE BADGES */ .mv-badge{ display:inline-block;padding:2px 8px;border-radius:10px; font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600; letter-spacing:0.5px;text-transform:uppercase; } .mv-badge.receive{background:#e8f5e9;color:#2e7d32;} .mv-badge.dispatch{background:#fff3e0;color:#e65100;} .mv-badge.adjustment{background:#e3f2fd;color:#1565c0;} .mv-badge.invoice_confirm{background:#fce4ec;color:#b71c1c;} .mv-badge.transfer{background:#f3e5f5;color:#6a1b9a;} .mv-badge.stock_take{background:#f3e5f5;color:#7b1fa2;} .mv-badge.monthly_inventory{background:#e8eaf6;color:#283593;} /* STOCK TAKE */ .take-row{display:grid;grid-template-columns:1fr 80px 80px 80px 60px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);} /* UNIT MISMATCH BADGE */ .unit-warn{ display:inline-block;padding:1px 5px;margin-left:2px; background:#fff3e0;color:#e65100;border:1px solid #ffcc80;border-radius:3px; font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700; letter-spacing:0.5px;text-transform:uppercase;vertical-align:middle; cursor:help; } .take-row.variance-pos{background:rgba(34,197,94,0.05);} .take-row.variance-neg{background:rgba(239,68,68,0.05);} .take-var{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;} .take-var.pos{color:var(--success);} .take-var.neg{color:var(--danger);} .take-var.zero{color:var(--ink-secondary);} /* INVENTORY SEARCH */ .inv-search{ position:sticky;top:0;z-index:40;padding:10px 0;margin-bottom:12px; } .inv-search input{ width:100%;padding:10px 14px 10px 36px;border:1.5px solid var(--border); border-radius:var(--radius);font-size:13px;font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg-card);transition:border-color var(--transition); } .inv-search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-light);} /* QUICK REORDER */ .reorder-bar{ display:flex;gap:10px;align-items:center;flex-wrap:wrap; padding:14px 18px;background:var(--bg-card);border:1.5px dashed var(--accent); border-radius:var(--radius);margin-bottom:16px; } .reorder-bar .reorder-info{font-size:12px;color:var(--ink-secondary);flex:1;} .reorder-bar .reorder-info strong{color:var(--ink);font-family:'JetBrains Mono',monospace;} .btn-reorder{ background:var(--accent);color:#fff;border:none;padding:8px 18px; border-radius:var(--radius-sm);font-weight:600;font-size:12px;cursor:pointer; transition:all var(--transition);white-space:nowrap; } .btn-reorder:hover{background:var(--accent-dark);transform:translateY(-1px);} /* NOTIFICATION PULSE */ @keyframes notifPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.5);} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0);} } .notif-pulse{animation:notifPulse 1.5s infinite;} .new-order-flash{ animation:flashBg 0.5s ease 3; } @keyframes flashBg{ 0%,100%{background:transparent;} 50%{background:var(--accent-15);} } /* AUTO-REFRESH INDICATOR */ .auto-refresh-bar{ display:flex;align-items:center;gap:8px;padding:8px 14px; background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm); font-size:11px;color:var(--ink-muted);font-family:'JetBrains Mono',monospace; margin-bottom:12px; } .auto-refresh-bar .pulse-dot{ width:8px;height:8px;border-radius:50%;background:var(--success); animation:notifPulse 2s infinite;flex-shrink:0; } .auto-refresh-bar .ar-toggle{ margin-left:auto;background:none;border:1px solid var(--border); border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer; font-size:10px;color:var(--ink-secondary);transition:all var(--transition); } .auto-refresh-bar .ar-toggle:hover{border-color:var(--accent);color:var(--accent);} .sound-toggle{ background:none;border:1px solid var(--border);border-radius:var(--radius-sm); padding:4px 10px;cursor:pointer;font-size:10px;transition:all var(--transition); } .sound-toggle.active{border-color:var(--success);color:var(--success);background:rgba(34,197,94,0.05);} /* EXPORT BUTTON */ .btn-export{ background:var(--bg);border:1.5px solid var(--border);color:var(--ink-secondary); padding:8px 14px;border-radius:var(--radius-sm);font-size:11px;font-weight:600; cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;gap:6px; } .btn-export:hover{border-color:var(--accent);color:var(--accent);} .btn-export svg{width:14px;height:14px;} /* ORDER FORM: hidden items during search */ .item-row.search-hidden{display:none!important;} .card.section-card.search-hidden-section{display:none!important;} /* PRINT */ @media print{ body *{visibility:hidden;} #print-area,#print-area *{visibility:visible;} #print-area{position:absolute;inset:0;width:100%;height:auto;} @page{size:A4;margin:10mm;} html{-webkit-print-color-adjust:exact;print-color-adjust:exact;} #print-area{font-size:10px!important;} #print-area table{font-size:9px!important;} #print-area td,#print-area th{padding:5px 7px!important;} table{page-break-inside:auto;} tr{page-break-inside:avoid;page-break-after:auto;} thead{display:table-header-group;} .dn-preview{padding:0!important;border:none!important;box-shadow:none!important;} } /* CK ORDER PRINT — same-document A4, popup-free (Feature 1). Hides the whole app + any modal (body>*), reveals ONLY #cc-print-root. ROOT-CAUSE FIX (blank trailing page / URL-only page-2): - The app sets body{min-height:100vh}; in print that forced the body to a FULL page even for a short order, and the printable content area (smaller than 100vh once the device reserves header/footer margins) overflowed onto an empty 2nd page that showed only the browser URL/footer. - FIX: in print, html/body/#cc-print-root use height:auto + min-height:0 + overflow:visible (no forced 100vh / fixed height). @page margin:0 removes the browser-generated header/footer chrome entirely; the physical 10–12mm A4 margins live as padding INSIDE .cc-print-sheet. Font sizes unchanged. Result: a normal short order = exactly ONE A4 page; long orders use extra pages only for real rows (thead repeats, rows/signatures never split). */ #cc-print-root{display:none;} @media print{ @page{size:A4 portrait;margin:0;} html,body{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:0!important;background:#fff!important;} body > *{display:none!important;} body > #cc-print-root{display:block!important;} #cc-print-root,#cc-print-root *{visibility:visible!important;} #cc-print-root{position:static!important;height:auto!important;min-height:0!important;overflow:visible!important;box-sizing:border-box!important;width:100%;color:#000;} .cc-print-sheet{box-sizing:border-box;width:100%;margin:0;padding:12mm;} #cc-print-root table.cc-print-table{page-break-inside:auto;width:100%;border-collapse:collapse;} #cc-print-root thead{display:table-header-group;} #cc-print-root tr{page-break-inside:avoid;} #cc-print-root .cc-sign-row,#cc-print-root .cc-sign-cell{page-break-inside:avoid;} html{-webkit-print-color-adjust:exact;print-color-adjust:exact;} } /* ============================================================ UI SYSTEM — PHASE 0 FOUNDATION Classes defined here, not yet used by any HTML. No existing rules modified. No visual change on deploy. ============================================================ */ /* Page header shell */ .page-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:20px;} .page-header-left{display:flex;flex-direction:column;gap:2px;} .page-header-right{display:flex;gap:8px;align-items:center;flex-shrink:0;} /* Filter tabs row */ .filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;} /* Danger button (replaces inline style="background:var(--danger);color:#fff") */ .btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);} .btn-danger:hover{background:#c62828;border-color:#c62828;} /* Count badges */ .count-badge{background:var(--border);color:var(--ink-secondary);font-family:'JetBrains Mono',monospace;font-size:10px;padding:1px 7px;border-radius:999px;margin-left:6px;font-weight:600;} .count-badge--alert{background:var(--danger);color:#fff;} /* Alert modifiers */ .alert--info{background:var(--info-bg);border:1px solid var(--info);color:var(--ink);} .alert--warning{background:var(--warning-bg);border:1px solid var(--warning);color:var(--ink);} .alert--danger{background:var(--danger-bg);border:1px solid var(--danger);color:var(--danger);} /* Table empty-state cell */ .empty-state-cell{text-align:center;padding:32px;color:var(--ink-secondary);font-size:13px;} /* Info banner (gold item-count announcements) */ .info-banner{background:var(--accent-08);border:1px solid var(--accent-20);border-radius:var(--radius);padding:10px 16px;font-size:12px;color:var(--gold);margin-bottom:16px;} /* Section title inline variant (when inside a flex row with a button) */ .section-block-title--inline{margin-bottom:0;} /* Suppress subtitle bottom gap when inside page-header-left */ .page-header-left .page-subtitle{margin-bottom:0;} /* Ink-background button (Technical Sheet, Move) */ .btn-ink{background:var(--ink);color:var(--white);border-color:var(--ink);} /* Category tab buttons (warehouse-items, stock-order, acc-stock-invoices) */ .tab-btn{padding:6px 16px;font-size:11px;font-weight:600;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink-secondary);cursor:pointer;transition:all var(--transition);} .tab-btn:hover{border-color:var(--ink-muted);color:var(--ink);} .tab-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);} /* Section block — consistent gap between grouped sections */ .section-block{margin-bottom:24px;} .section-block:last-child{margin-bottom:0;} /* Section title inside a card — flush to card top */ .card .section-block-title{margin-top:0;} /* Cell box — visual wrapper for plain-text cells to match input appearance */ .cell-box{ background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; font-size:13px; display:inline-block; min-width:80px; } /* Normalize all inputs and selects inside data tables */ .detail-table input, .detail-table select{ background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; font-size:13px; font-family:inherit; transition:border-color var(--transition); } .detail-table input:focus, .detail-table select:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-light); } /* ───────────────────────────────────────────────────────────────── Step 6d g#2 — notifications settings (page shell) Layout-only styles for the disabled placeholder UI. The disabled "Enable" button and toggles are wired up in g#3 / g#4 — these styles cover both the disabled-now and active-later states. ───────────────────────────────────────────────────────────────── */ .ns-section{ background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:18px 20px; margin-bottom:16px; } .ns-section-title{ font-size:13px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:0.6px; margin:0 0 14px; } .ns-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .ns-row-main{ flex:1 1 auto; } .ns-row-label{ font-size:11px; color:var(--ink-secondary); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.4px; } .ns-row-value{ font-size:15px; font-weight:600; color:var(--ink); } .ns-status-off{ color:var(--ink-secondary); } .ns-btn-primary{ background:var(--accent); color:#fff; border:0; border-radius:var(--radius-sm); padding:9px 16px; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:background var(--transition); } .ns-btn-primary:hover:not(:disabled){ background:var(--accent-dark); } .ns-btn-primary:disabled{ background:var(--border); color:var(--ink-muted); cursor:not-allowed; } .ns-tip{ margin-top:14px; padding:11px 14px; background:var(--accent-light); border-left:3px solid var(--accent); border-radius:var(--radius-sm); font-size:13px; color:var(--ink); line-height:1.55; } .ns-empty{ padding:24px 0; } .ns-event-list{ display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:var(--radius-sm); overflow:hidden; } .ns-event-row{ background:var(--bg-card); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; } .ns-event-text{ flex:1 1 auto; } .ns-event-label{ font-size:14px; font-weight:600; color:var(--ink); } .ns-event-desc{ font-size:12px; color:var(--ink-secondary); margin-top:2px; } .ns-toggle{ position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; } .ns-toggle input{ display:none; } .ns-toggle-track{ position:absolute; inset:0; background:var(--accent); border-radius:11px; cursor:pointer; transition:background var(--transition); } .ns-toggle-track::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform var(--transition); } .ns-toggle input:checked + .ns-toggle-track::after{ transform:translateX(16px); } .ns-toggle-disabled .ns-toggle-track{ background:var(--border); cursor:not-allowed; } .ns-toggle-disabled .ns-toggle-track::after{ background:var(--ink-muted); } /* Disabled placeholder pins the knob to the OFF position regardless of the underlying checkbox state. Without this, the knob translates to the right while the track is grey/disabled — visually ambiguous, looks like a half-broken toggle. When g#4 wires real preferences, the .ns-toggle-disabled class is removed and the toggle behaves normally per .ns-toggle input:checked. */ .ns-toggle-disabled input:checked + .ns-toggle-track::after{ transform:none; } /* Sidebar-footer secondary button (e.g. Notifications). Reuses btn-signout for sizing/typography/icon layout but overrides the red destructive palette with neutral sidebar-themed colors so it doesn't read as a destructive action next to the actual Sign Out button. */ .btn-sidebar-secondary{ background:transparent; color:var(--ink-sidebar); margin-bottom:8px; } .btn-sidebar-secondary:hover{ background:var(--bg-sidebar-hover); color:#d4d4dd; } /* g#3 — state colors + Enable button row */ .ns-status-denied { color:var(--danger); } .ns-status-enabled { color:var(--accent-dark); } /* Danger variant of the .ns-tip block (browser-blocked, push unsupported). */ .ns-tip-danger{ background:var(--danger-bg); border-left-color:var(--danger); } /* Device-label input shown under the Enable button. Separator above it visually splits the status row from the editable field. */ .ns-device-label-row{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); } .ns-input{ width:100%; padding:8px 10px; font-size:13px; font-family:inherit; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--ink); margin-top:6px; transition:border-color var(--transition); box-sizing:border-box; } .ns-input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-light); } /* g#4 — device list rows + secondary (Remove) button + this-device badge */ .ns-device-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; } .ns-device-row:last-child{ margin-bottom:0; } .ns-device-text{ flex:1 1 auto; min-width:0; } .ns-device-label{ font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ns-device-current-badge{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; background:var(--accent); color:#fff; padding:2px 7px; border-radius:10px; white-space:nowrap; } .ns-device-meta{ font-size:12px; color:var(--ink-secondary); margin-top:3px; } /* Secondary (Remove) button — neutral resting, destructive on hover so the user gets a clear "this is going to delete" cue without screaming red at rest. */ .ns-btn-secondary{ background:transparent; color:var(--ink-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 12px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--transition); flex-shrink:0; } .ns-btn-secondary:hover{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); } /* ═══════════════════════════════════════ UTILITY CLASSES — Phase 0 ═══════════════════════════════════════ */ /* Monospace text — for quantities, codes, IDs, timestamps */ .mono{font-family:'JetBrains Mono',monospace;} /* Inline badges for status/type labels */ .badge-warn,.badge-danger,.badge-ck,.badge-group,.badge-src-group,.badge-ok{ display:inline-flex;align-items:center; font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase; padding:2px 8px;border-radius:20px; vertical-align:middle;margin-left:4px; } .badge-warn{background:var(--warning-bg);color:#92400e;border:1px solid #fde68a;} .badge-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #fecaca;} .badge-ck{background:var(--purple-bg);color:var(--purple);border:1px solid #ddd6fe;} .badge-group{background:var(--accent-08);color:var(--accent-dark);border:1px solid var(--accent-30);} .badge-src-group{background:var(--info-bg);color:#1d4ed8;border:1px solid #bfdbfe;} .badge-ok{background:var(--success-bg);color:#15803d;border:1px solid #bbf7d0;} /* Dirty-form "New updates available" banner (2026-07-11) — shown instead of silently discarding a background data change while a form is mid-entry. */ .cc-pending-refresh-banner{ position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:900; display:flex;align-items:center;gap:10px; background:var(--ink);color:var(--white); padding:10px 14px;border-radius:var(--radius);box-shadow:var(--shadow-lg); font-size:13px; } .cc-pending-refresh-banner button{ font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase; background:var(--gold);color:var(--ink);border:none;border-radius:4px;padding:5px 10px;cursor:pointer; } .cc-pending-refresh-banner .cc-pending-refresh-dismiss{ background:transparent;color:var(--white);opacity:0.7;padding:5px 6px; } @media(max-width:600px){ .cc-pending-refresh-banner{left:12px;right:12px;transform:none;top:8px;flex-wrap:wrap;} } /* ═══════════════════════════════════════════════════════════════════════════ Package A UI clarity correction (owner GO, 2026-08-04) — additive only. Work-order detail page: progress line, prominent "Next action", labeled fields, and grouped secondary sections. No new tokens invented — reuses .card/.form-lbl/--border/--ink-secondary/--radius-sm already in this file. ═══════════════════════════════════════════════════════════════════════════ */ .mnt-progress{display:flex;flex-wrap:wrap;gap:0;margin:14px 0;font-size:.8rem;} .mnt-progress .mnt-step{flex:1;min-width:88px;text-align:center;padding:8px 4px;border-bottom:3px solid var(--border);color:var(--ink-secondary);} .mnt-progress .mnt-step-done{border-bottom-color:#16794a;color:#16794a;font-weight:600;} .mnt-progress .mnt-step-active{border-bottom-color:#2563eb;color:#2563eb;font-weight:700;} .mnt-progress .mnt-step-qualifier{display:block;font-size:.68rem;font-weight:400;color:var(--ink-secondary);} .mnt-next-action{background:#eff6ff;border:1.5px solid #93c5fd;border-radius:var(--radius-sm);padding:12px 14px;margin:10px 0;} .mnt-next-action-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#1d4ed8;font-weight:700;margin-bottom:4px;} .mnt-next-action-text{font-size:.95rem;font-weight:600;color:#1e3a5f;} .mnt-section{margin:14px 0;} .mnt-section-title{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-secondary);font-weight:700;margin:0 0 8px;} .mnt-field{display:flex;flex-direction:column;gap:3px;min-width:150px;} .mnt-field .form-lbl{margin-bottom:0;} .mnt-field.mnt-required .form-lbl::after{content:" *";color:#b91c1c;} .mnt-field-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;align-items:flex-end;} .mnt-manage-details{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;margin:10px 0;} .mnt-manage-details summary{cursor:pointer;font-size:.82rem;color:var(--ink-secondary);font-weight:600;} .mnt-manage-details[open] summary{color:var(--ink);margin-bottom:8px;} .mnt-confirm-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .mnt-confirm-actions .btn-lg{padding:12px 22px;font-size:1rem;} .mnt-admin-secondary{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);opacity:.85;} @media(max-width:640px){ .mnt-progress{font-size:.68rem;} .mnt-progress .mnt-step{min-width:0;padding:6px 2px;} .mnt-field{min-width:0;width:100%;} .mnt-field-row{flex-direction:column;align-items:stretch;gap:8px;} .mnt-confirm-actions{flex-direction:column;align-items:stretch;} .mnt-confirm-actions .btn-lg{width:100%;} } /* ═══════════════════════════════════════════════════════════════════════ T08 WAVE 0A — shared shell / foundation corrections UI-001 keyboard navigation · UI-002 zoom · UI-003/UI-004 contrast UI-006 offline banner · mobile shell geometry Appended deliberately: same-specificity overrides that win by order, so the original rules stay visible and reviewable rather than being rewritten. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* UI-003: filled-button surfaces that reach >=4.5:1 against #fff text. Kept separate from --accent/--success/--danger/--info so decorative use (borders, icons, focus rings, tints) is NOT globally darkened. */ --btn-accent-bg:#8a6f1e; /* 4.80:1 on #fff */ --btn-accent-bg-hover:#6f5a16; --btn-success-bg:#15803d; /* 5.02:1 */ --btn-success-bg-hover:#166534; --btn-danger-bg:#b91c1c; /* 6.47:1 */ --btn-danger-bg-hover:#991b1b; --btn-info-bg:#1d4ed8; /* 6.70:1 */ --btn-info-bg-hover:#1e40af; /* UI-004: label ink for table headers / stat labels / breadcrumbs / counts. 5.49:1 on --bg, 5.93:1 on cards. --ink-muted itself is left alone. */ --ink-label:#63636e; /* Height of the system banner stack; JS sets it. Everything offsets from here. */ --banner-h:0px; --update-banner-h:0px; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); } /* ── UI-001: nav items are now real