/* ============================================================ Kitchen Quotation System v2 - Mobile-First CSS ออกแบบเน้นมือถือเป็นหลัก | Sarabun Font ============================================================ */ /* ฟอนต์โหลดใน ของแต่ละหน้า (เร็วกว่า @import ที่เบราว์เซอร์เจอทีหลัง) */ /* ── CSS Variables ─────────────────────────────────────────── */ :root { --primary: #DB1F26; --primary-light: #ED4B51; --primary-dark: #B01820; --primary-bg: #FDECED; --accent: #F59E0B; --accent-light: #FCD34D; --success: #10B981; --success-bg: #ECFDF5; --danger: #EF4444; --danger-bg: #FEF2F2; --warning: #F59E0B; --warning-bg: #FFFBEB; --info: #0EA5E9; --info-bg: #F0F9FF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --bg: #F6F7F9; --surface: #FFFFFF; --surface-2: #FAFBFC; --border: #E8EAEF; --text-primary: #1E293B; --text-secondary: #5B6470; --text-muted: #949BA6; --shadow-xs: 0 1px 2px rgba(16,24,40,.04); --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05); --shadow-md: 0 2px 4px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.07); --shadow-lg: 0 4px 8px rgba(16,24,40,.05), 0 18px 40px rgba(16,24,40,.10); --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06); --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 26px; --radius-full: 9999px; --transition: all .18s cubic-bezier(.2,.8,.3,1); --ring: 0 0 0 3px rgba(219,31,38,.14); /* วงแหวนตอนโฟกัส (โมเดิร์น + เข้าถึงง่าย) */ --transition-slow: all 0.35s cubic-bezier(0.4,0,0.2,1); --header-h: 60px; --bottom-nav-h: 64px; --container-max: 680px; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Sarabun', sans-serif; background: radial-gradient(1100px 460px at 50% -140px, rgba(219,31,38,.07), transparent 68%), linear-gradient(180deg, #F7F9FC 0%, var(--bg) 42%); background-repeat: no-repeat; color: var(--text-primary); line-height: 1.6; min-height: 100vh; padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; touch-action: manipulation; /* กันดับเบิลแท็ปซูม (เลื่อนยังได้ปกติ) */ } /* ============================================================ HEADER ============================================================ */ .app-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(226,232,240,.75); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 12px rgba(16,24,40,.05); display: flex; align-items: center; padding: 0 16px; gap: 12px; } .app-header .logo { display:flex; align-items:center; gap:11px; text-decoration:none; } .app-header .logo-icon { width:38px; height:38px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 11px; display:grid; place-items:center; color:white; font-size:19px; flex-shrink:0; box-shadow: 0 4px 12px rgba(219,31,38,.30), inset 0 1px 0 rgba(255,255,255,.35); } .app-header .logo-text { display:flex; flex-direction:column; line-height:1.2; } .app-header .logo-title { font-size:15px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; } .app-header .logo-subtitle { font-size:11px; color:var(--text-muted); font-weight:400; } .app-header .header-actions { margin-left:auto; display:flex; align-items:center; gap:4px; } /* Header IE buttons */ .header-ie-btn { color: var(--text-secondary, #6b7280); } .header-ie-btn:hover { color: var(--primary, #DB1F26); } .header-ie-import { color: var(--primary, #DB1F26) !important; background: #FDECED !important; } .header-ie-import:hover { background: #dbeafe !important; } .header-divider { width: 1px; height: 28px; background: var(--border, #e5e7eb); margin: 0 4px; } /* Header action buttons — icon + label */ .header-actions .btn-icon { width: auto; height: auto; padding: 5px 9px; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: var(--radius-sm); } .header-actions .btn-label { font-size: 10px; font-weight: 600; line-height: 1; color: var(--text-secondary); letter-spacing: 0; transition: var(--transition); } .header-actions .btn-icon:hover .btn-label { color: var(--primary, #DB1F26); } .header-actions .header-ie-import .btn-label { color: var(--primary, #DB1F26); } .header-actions .btn-icon:hover svg, .header-actions .btn-icon:hover { color: var(--primary, #DB1F26); } .btn-icon { width:40px; height:40px; border:none; background:var(--gray-100); border-radius:var(--radius-sm); display:grid; place-items:center; cursor:pointer; font-size:18px; color:var(--text-secondary); transition:var(--transition); -webkit-tap-highlight-color:transparent; text-decoration:none; } .btn-icon:hover, .btn-icon:active { background:var(--gray-200); } /* ============================================================ BOTTOM NAV ============================================================ */ .bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:100; height:var(--bottom-nav-h); padding-bottom:env(safe-area-inset-bottom); background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(0,0,0,.06); display:grid; grid-template-columns:repeat(3,1fr); } .bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--text-muted); font-size:10px; font-weight:500; padding:8px 0; transition:var(--transition); -webkit-tap-highlight-color:transparent; } .bottom-nav a .nav-icon { font-size:22px; } .bottom-nav a.active { color:var(--primary); } .bottom-nav a.active .nav-icon { transform:scale(1.1); } /* ============================================================ CONTAINER ============================================================ */ .container { max-width:var(--container-max); margin:0 auto; padding:16px; } /* ============================================================ PAGE TITLE ============================================================ */ .page-title { margin-bottom:16px; } .page-title h1 { font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; } .page-title p { font-size:13px; color:var(--text-secondary); margin-top:2px; } /* ============================================================ CARDS ============================================================ */ .card { background:var(--surface); border-radius:var(--radius-lg); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); border:1px solid rgba(226,232,240,.7); overflow:hidden; } .card + .card { margin-top:12px; } .card-header { padding:14px 16px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; gap:11px; background: linear-gradient(180deg, #FCFDFE 0%, var(--surface-2) 100%); } .card-header-icon { width:34px; height:34px; background: linear-gradient(135deg, var(--primary-bg) 0%, #FCE1E2 100%); border-radius:10px; display:grid; place-items:center; font-size:16px; color:var(--primary); flex-shrink:0; box-shadow: inset 0 0 0 1px rgba(219,31,38,.10), 0 2px 6px rgba(219,31,38,.12); } .card-header-text h2 { font-size:15px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; } .card-header-text p { font-size:11.5px; color:var(--text-muted); margin-top:1px; } .card-body { padding:16px; } /* ============================================================ PRICE DISPLAY BANNER ============================================================ */ .price-display { background: linear-gradient(140deg, var(--primary-light) 0%, var(--primary) 44%, #A9141B 100%); border-radius:var(--radius-lg); padding:18px 16px 16px; color:white; text-align:center; position:relative; overflow:hidden; box-shadow: 0 12px 30px rgba(219,31,38,.30), inset 0 1px 0 rgba(255,255,255,.18); } .price-display::before { content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px; background:rgba(255,255,255,.08); border-radius:50%; } .price-display::after { content:''; position:absolute; bottom:-20px; left:-20px; width:80px; height:80px; background:rgba(255,255,255,.06); border-radius:50%; } .price-display .price-label { font-size:11px; opacity:.75; letter-spacing:.5px; text-transform:uppercase; position:relative; z-index:1; } .price-display .price-value { font-size:30px; font-weight:700; letter-spacing:-1px; margin:4px 0; position:relative; z-index:1; } .price-display .price-value .currency { font-size:16px; font-weight:500; opacity:.8; margin-right:2px; } .price-sub { display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.2); position:relative; z-index:1; } .price-sub-item { text-align:center; flex:1; } .price-sub-item .sub-label { font-size:10px; opacity:.7; } .price-sub-item .sub-value { font-size:13px; font-weight:600; margin-top:2px; } /* ─── Price Type Toggle ─────────────────────────────────────── */ .price-type-toggle { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; position:relative; z-index:1; } .price-type-btn { min-width:0; min-height:34px; padding:4px 7px; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:rgba(255,255,255,.75); border-radius:var(--radius-full); font-family:'Sarabun',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:var(--transition); -webkit-tap-highlight-color:transparent; } .price-type-btn.active { background:rgba(255,255,255,.95); color:var(--primary); border-color:white; box-shadow:0 2px 8px rgba(0,0,0,.2); } .price-type-label { font-size:11px; opacity:.7; margin-top:6px; position:relative; z-index:1; } /* ============================================================ WIZARD STEPS (inside Item Modal) ============================================================ */ .wizard-step { display:none; margin-top:16px; animation: fadeSlideIn .25s ease; } .wizard-step.show { display:block; } @keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } .step-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; } .step-badge { width:22px; height:22px; background:var(--primary); color:white; border-radius:var(--radius-full); display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0; } .step-label { font-size:13px; font-weight:700; color:var(--text-primary); } .step-sub { font-size:11px; color:var(--text-muted); margin-left:auto; } /* Step loading indicator */ .step-loading { display:none; align-items:center; gap:8px; color:var(--text-muted); font-size:13px; padding:8px 0; } .step-loading.show { display:flex; } .step-loading .spinner { width:16px; height:16px; border-width:2px; color:var(--primary); } /* ─── Chips ─────────────────────────────────────────────────── */ .chips-wrap { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; } .chip { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border:1.5px solid var(--border); background:var(--surface); border-radius:var(--radius-full); cursor:pointer; transition:var(--transition); -webkit-tap-highlight-color:transparent; user-select:none; text-align:left; } .chip:hover { border-color:var(--primary-light); background:var(--primary-bg); } .chip.active { border-color:var(--primary); background:var(--primary-bg); box-shadow:0 0 0 3px rgba(219,31,38,.12); } .chip-code { font-size:12px; font-weight:700; color:var(--primary); } .chip-label { font-size:12px; color:var(--text-secondary); } .chip-count { font-size:10px; color:var(--text-muted); background:var(--gray-100); padding:1px 6px; border-radius:var(--radius-full); } .chip.active .chip-count { background:rgba(219,31,38,.15); color:var(--primary); } /* ─── Color chips (Brand color editor) ─────────────────────── */ .chip-wrap { display:flex; flex-wrap:wrap; gap:5px; padding:8px 0; } .color-chip { display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--radius-full); font-size:12px; font-weight:600; font-family:monospace; cursor:pointer; user-select:none; border:1.5px solid var(--border); transition:var(--transition); } .color-chip.chip-on { background:var(--primary-bg); border-color:var(--primary); color:var(--primary); } .color-chip.chip-off { background:var(--surface); border-color:var(--border); color:var(--text-secondary); opacity:.55; } .color-chip:hover { opacity:1; border-color:var(--primary-light); } /* ─── SKU Preview Card ──────────────────────────────────────── */ .sku-preview-card { background: var(--primary-bg); border: 1.5px solid var(--primary); border-radius: var(--radius); padding: 14px; } .sku-code { font-size: 15px; font-weight: 700; color: var(--primary); letter-spacing: .5px; } .sku-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; } .sku-barcode { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .sku-prices { display: flex; gap: 8px; margin-top: 10px; } .price-pill { flex: 1; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 8px 10px; text-align: center; transition: var(--transition); } .price-pill.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(219,31,38,.12); } .pill-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } .pill-val { font-size: 15px; font-weight: 700; color: var(--text-primary); display: block; margin-top: 2px; } .sku-selected-price { font-size: 12px; color: var(--text-secondary); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .sku-selected-price strong { color: var(--primary); font-size: 16px; } /* Step 6 — Qty + Add */ .qty-add-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .qty-wrap { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .qty-btn { width: 40px; height: 48px; border: none; background: var(--gray-100); color: var(--text-primary); font-size: 20px; cursor: pointer; transition: var(--transition); -webkit-tap-highlight-color: transparent; display: grid; place-items: center; } .qty-btn:hover { background: var(--gray-200); } .qty-btn:active { background: var(--primary-bg); color: var(--primary); } #itemQty { width: 56px; height: 48px; border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); text-align: center; font-family: 'Sarabun', sans-serif; font-size: 16px; font-weight: 700; background: var(--surface); color: var(--text-primary); outline: none; } /* ============================================================ ITEMS LIST ============================================================ */ .items-list { display:flex; flex-direction:column; gap:10px; } .item-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:12px 12px 12px 44px; position:relative; transition:var(--transition); } .item-card:hover { border-color:var(--primary); box-shadow:var(--shadow-sm); } .item-num { position:absolute; top:12px; left:10px; width:26px; height:26px; background:var(--primary-bg); color:var(--primary); border-radius:var(--radius-full); display:grid; place-items:center; font-size:14px; } .item-card-body { } .item-model { font-size:14px; font-weight:700; color:var(--text-primary); } .item-variant { font-size:11px; color:var(--text-secondary); margin-top:2px; line-height:1.4; } .item-price-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top:8px; } .item-price { font-size:16px; font-weight:700; color:var(--primary); } .item-detail { font-size:11px; color:var(--text-muted); } .item-remove { width:30px; height:30px; background:var(--danger-bg); border:none; border-radius:var(--radius-full); display:grid; place-items:center; cursor:pointer; font-size:14px; color:var(--danger); transition:var(--transition); flex-shrink:0; } .item-remove:hover { background:var(--danger); color:white; } /* ─── Add Buttons Row ───────────────────────────────────────── */ .add-btns-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; } .btn-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 6px; border:1.5px dashed var(--border); background:var(--surface); border-radius:var(--radius); cursor:pointer; transition:var(--transition); -webkit-tap-highlight-color:transparent; font-family:'Sarabun',sans-serif; } .btn-add:hover { border-color:var(--primary); background:var(--primary-bg); transform:translateY(-2px); box-shadow:0 6px 16px rgba(219,31,38,.12); } .btn-add:active { transform:translateY(0); box-shadow:none; } .btn-add .add-icon { font-size:22px; } .btn-add .add-label { font-size:11px; font-weight:600; color:var(--text-secondary); } .btn-add:hover .add-label { color:var(--primary); } /* ============================================================ FORM ELEMENTS ============================================================ */ .form-group { margin-bottom:14px; } .form-group:last-child { margin-bottom:0; } .form-label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; } .form-label .required { color:var(--danger); margin-left:2px; } .form-control { width:100%; height:48px; padding:0 14px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:'Sarabun',sans-serif; font-size:15px; color:var(--text-primary); background:var(--surface); transition:var(--transition); outline:none; -webkit-appearance:none; appearance:none; } .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(219,31,38,.12); } .form-control::placeholder { color:var(--text-muted); } .form-control:disabled { background:var(--gray-100); color:var(--text-muted); cursor:not-allowed; } textarea.form-control { height:auto; min-height:72px; padding:12px 14px; resize:vertical; line-height:1.5; } select.form-control { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:40px; } .date-picker-wrap { position:relative; } .date-picker-wrap::after { content:'📅'; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; font-size:16px; } .date-picker-wrap .form-control { padding-right:42px; cursor:pointer; } .native-date-picker { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } /* Autocomplete */ .autocomplete-wrapper { position:relative; } .autocomplete-list { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1.5px solid var(--primary); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:200; max-height:200px; overflow-y:auto; display:none; } .autocomplete-list.show { display:block; } .autocomplete-item { padding:12px 14px; cursor:pointer; transition:var(--transition); border-bottom:1px solid var(--gray-100); } .autocomplete-item:last-child { border-bottom:none; } .autocomplete-item:hover { background:var(--primary-bg); } .autocomplete-item .item-name { font-size:14px; font-weight:600; color:var(--text-primary); } .autocomplete-item .item-sub { font-size:12px; color:var(--text-muted); margin-top:1px; } /* ============================================================ TOTALS ============================================================ */ /* ── Discount Info Button + Popup ───────────────────────── */ .discount-info-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--primary); background: none; border: none; cursor: pointer; padding: 2px 4px; margin-bottom: 8px; opacity: 0.75; transition: opacity 0.15s; } .discount-info-btn:hover { opacity: 1; } .discount-info-btn span { font-size: 14px; } .discount-popup { position: absolute; z-index: 200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12)); padding: 12px 14px; min-width: 260px; margin-top: 2px; } .discount-popup-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .discount-info-note { font-weight: 400; color: var(--text-secondary); font-size: 11px; } .discount-info-rows { display: flex; flex-direction: column; gap: 3px; } .discount-info-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); } .discount-info-row.di-led { color: var(--primary); font-weight: 600; } .di-rate { font-weight: 700; color: var(--success); } .discount-info-row.di-led .di-rate { color: var(--primary); } .discount-profile-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); } .discount-channel-switch, .sales-channel-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); padding: 3px; border: 1px solid var(--border); background: #f3f4f6; border-radius: 6px; } .discount-channel-btn, .sales-channel-btn { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; } .discount-channel-btn.active, .sales-channel-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); } .setting-switch { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; cursor: pointer; font-size: 12px; font-weight: 700; } .setting-switch input { position: absolute; opacity: 0; pointer-events: none; } .setting-switch-track { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #cbd5e1; transition: background .18s ease; } .setting-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; } .setting-switch input:checked + .setting-switch-track { background: var(--success); } .setting-switch input:checked + .setting-switch-track::after { transform: translateX(18px); } .discount-config-card.is-disabled .card-body { opacity: .42; pointer-events: none; } .discount-config-card.is-disabled .setting-switch-label { color: var(--text-secondary); } @media (max-width: 560px) { .discount-profile-bar { align-items: stretch; flex-direction: column; } .discount-channel-switch, .sales-channel-switch { width: 100%; } } .quote-totals { padding:0; } .quote-total-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:14px; color:var(--text-secondary); border-bottom:1px solid var(--gray-100); } .quote-total-row:last-child { border-bottom:none; } .quote-total-row.grand { font-size:17px; font-weight:700; color:var(--primary); padding-top:10px; margin-top:4px; border-top:2px solid var(--border); border-bottom:none; } .quote-total-row.text-discount { color: var(--success); } .badge-discount { display:inline-block; font-size:11px; font-weight:700; background:var(--success-bg); color:var(--success); border-radius:4px; padding:1px 6px; margin-left:4px; } .v2-section.lead-time-bar { display:inline-flex; align-items:center; gap:6px; background:var(--primary-bg); border-radius:999px; padding:5px 14px; margin:0 16px 10px; font-size:12px; } .lead-time-label { color:var(--text-secondary); } .lead-time-value { font-weight:700; color:var(--primary); } /* ============================================================ BUTTONS ============================================================ */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 20px; border:none; border-radius:var(--radius); font-family:'Sarabun',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; -webkit-tap-highlight-color:transparent; user-select:none; } .btn:active { transform:scale(0.97); } .btn-primary { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:white; box-shadow:0 4px 14px rgba(219,31,38,.35); } .btn-primary:hover { box-shadow:0 8px 22px rgba(219,31,38,.45); transform:translateY(-1px); } .btn-secondary { background:var(--gray-100); color:var(--text-secondary); border:1.5px solid var(--border); } .btn-secondary:hover { background:var(--gray-200); } .btn-success { background:linear-gradient(135deg, var(--success) 0%, #059669 100%); color:white; box-shadow:0 4px 14px rgba(16,185,129,.3); } .btn-danger { background:var(--danger-bg); color:var(--danger); border:1.5px solid #FECACA; } .btn-danger:hover { background:var(--danger); color:white; } .btn-block { width:100%; } .btn-sm { height:36px; padding:0 14px; font-size:13px; } .btn-lg { height:54px; font-size:16px; } .btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; } .btn-outline { background:transparent; color:var(--text-secondary); border:1.5px solid var(--border); } .btn-outline:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg,#FDECED); } /* COTTO modal toggle buttons */ .cotto-type-active, .cotto-color-active { background:var(--primary) !important; color:white !important; border-color:var(--primary) !important; box-shadow:0 2px 8px rgba(219,31,38,.3); } /* ============================================================ MODAL (Bottom Sheet) ============================================================ */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:300; display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity 0.25s ease; } .modal-overlay.show { opacity:1; pointer-events:all; } .modal-sheet { background:var(--surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0; width:100%; max-height:92vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom); transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1); } .modal-overlay.show .modal-sheet { transform:translateY(0); } .modal-handle { width:40px; height:4px; background:var(--gray-300); border-radius:var(--radius-full); margin:12px auto 8px; } .modal-header { padding:8px 16px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--gray-100); } .modal-title { font-size:17px; font-weight:700; color:var(--text-primary); } .modal-close { width:32px; height:32px; background:var(--gray-100); border:none; border-radius:var(--radius-full); display:grid; place-items:center; cursor:pointer; font-size:16px; color:var(--text-secondary); } .modal-body { padding:16px 16px 24px; } .modal-footer { padding: 12px 16px; border-top: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .modal-sm { max-width: 360px !important; margin: 0 auto; } .confirm-icon { font-size: 48px; line-height: 1; } /* ============================================================ TOAST ============================================================ */ .toast-container { position:fixed; top:calc(var(--header-h) + 12px); left:0; right:0; z-index:500; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; } .toast { background:var(--gray-900); color:white; padding:12px 16px; border-radius:var(--radius); box-shadow:var(--shadow-lg); display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; width:fit-content; max-width:calc(100% - 32px); transform:translateY(-20px); opacity:0; animation:toastIn 0.3s ease forwards; pointer-events:all; cursor:pointer; } .toast.success { background:var(--success); } .toast.error { background:var(--danger); } .toast.warning { background:var(--warning); color:var(--gray-900); } .toast.info { background:var(--info); } .toast-icon { font-size:18px; } .toast-exit { opacity:0; transform:translateY(-8px); transition:all .3s; } @keyframes toastIn { to { transform:translateY(0); opacity:1; } } /* ============================================================ SPINNER ============================================================ */ .spinner { width:20px; height:20px; border:2.5px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin 0.7s linear infinite; display:inline-block; } @keyframes spin { to { transform:rotate(360deg); } } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { text-align:center; padding:36px 20px; color:var(--text-muted); } .empty-state .empty-icon { font-size:36px; margin:0 auto 14px; width:80px; height:80px; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary-bg) 0%, #FCE1E2 100%); border-radius:var(--radius-full); box-shadow: inset 0 0 0 1px rgba(219,31,38,.08), 0 6px 16px rgba(219,31,38,.10); } .empty-state h3 { font-size:16px; font-weight:600; color:var(--text-secondary); } .empty-state p { font-size:13px; margin-top:4px; } /* ============================================================ BADGE ============================================================ */ .badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-full); font-size:11px; font-weight:600; letter-spacing:.3px; } .badge-primary { background:var(--primary-bg); color:var(--primary); } .badge-success { background:var(--success-bg); color:var(--success); } .badge-warning { background:var(--warning-bg); color:var(--warning); } .badge-danger { background:var(--danger-bg); color:var(--danger); } /* ============================================================ TABS ============================================================ */ .tabs { display:flex; gap:4px; background:var(--gray-100); border-radius:var(--radius); padding:4px; margin-bottom:16px; } .tab-btn { flex:1; height:38px; border:none; background:transparent; border-radius:var(--radius-sm); font-family:'Sarabun',sans-serif; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); -webkit-tap-highlight-color:transparent; } .tab-btn.active { background:var(--surface); color:var(--primary); box-shadow:var(--shadow-xs); } .tab-panel { display:none; } .tab-panel.active { display:block; } .sub-tabs { display:flex; gap:4px; background:var(--gray-100); border-radius:var(--radius); padding:4px; margin-bottom:16px; } .sub-tab-btn { flex:1; height:34px; border:none; background:transparent; border-radius:var(--radius-sm); font-family:'Sarabun',sans-serif; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); -webkit-tap-highlight-color:transparent; } .sub-tab-btn.active { background:var(--surface); color:var(--primary); box-shadow:var(--shadow-xs); } .sub-panel { display:none; } .sub-panel.active { display:block; } /* ============================================================ ADMIN — PRICE TABLE ============================================================ */ /* ปุ่มเลือกกลุ่มสินค้า Rocka / บานซิงค์ */ .sku-group-tabs { display:flex; gap:8px; flex-wrap:wrap; } .sku-group-btn { height:38px; padding:0 18px; border:2px solid var(--border); background:var(--surface); border-radius:var(--radius-sm,8px); font-family:'Sarabun',sans-serif; font-size:13.5px; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:var(--transition); } .sku-group-btn:hover { border-color:var(--primary); color:var(--primary); } .sku-group-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px rgba(219,31,38,.3); } .admin-filter-bar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .admin-filter-bar .form-control { height:40px; font-size:13px; } .admin-filter-bar select.form-control { min-width:120px; } .admin-filter-bar input.form-control { flex:1; min-width:140px; } .price-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .price-table { width:100%; border-collapse:collapse; font-size:13px; } .price-table th { background:var(--surface-2); color:var(--text-secondary); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:10px 10px; text-align:left; border-bottom:1.5px solid var(--border); white-space:nowrap; } .price-table td { padding:10px 10px; border-bottom:1px solid var(--gray-100); vertical-align:middle; } .price-table tr:hover td { background:var(--primary-bg); } .model-badge { font-weight:700; color:var(--primary); font-size:13px; } .sku-code-cell { font-size:11px; color:var(--text-muted); font-family:monospace; } /* Inline edit */ .inline-input { width:100px; height:34px; padding:0 8px; border:1.5px solid var(--primary); border-radius:var(--radius-sm); font-family:'Sarabun',sans-serif; font-size:13px; color:var(--text-primary); outline:none; background:var(--primary-bg); } .inline-input:focus { box-shadow:0 0 0 3px rgba(219,31,38,.15); } .save-price-btn { height:30px; padding:0 10px; background:var(--primary); color:white; border:none; border-radius:var(--radius-sm); font-size:12px; font-weight:600; cursor:pointer; transition:var(--transition); white-space:nowrap; } .save-price-btn:hover { background:var(--primary-dark); } /* Animation for new rows */ .new-row-highlight { animation: highlightRow 2s ease-out; } @keyframes highlightRow { 0% { background: #FEF9C3; } 100% { background: transparent; } } .w-100 { width: 100% !important; } .font-bold { font-weight: 700 !important; } /* Pagination */ .pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; flex-wrap:wrap; } .page-btn { min-width:36px; height:36px; padding:0 10px; border:1.5px solid var(--border); background:var(--surface); border-radius:var(--radius-sm); font-family:'Sarabun',sans-serif; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); -webkit-tap-highlight-color:transparent; } .page-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg); } .page-btn.active { background:var(--primary); color:white; border-color:var(--primary); } .page-btn:disabled { opacity:.4; cursor:not-allowed; } .page-info { font-size:13px; color:var(--text-muted); } /* Stats */ .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow-xs); } .stat-label { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; } .stat-value { font-size:22px; font-weight:700; color:var(--text-primary); margin-top:4px; letter-spacing:-.5px; } .stat-sub { font-size:11px; color:var(--text-muted); margin-top:2px; } /* ============================================================ QUOTATION HISTORY LIST ============================================================ */ .history-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; display:flex; justify-content:space-between; align-items:flex-start; transition:var(--transition); cursor:pointer; } .history-item:hover { border-color:var(--primary); background:var(--primary-bg); } .history-no { font-size:13px; font-weight:700; color:var(--primary); } .history-name { font-size:14px; font-weight:600; color:var(--text-primary); margin-top:2px; } .history-date { font-size:11px; color:var(--text-muted); margin-top:2px; } .history-total { font-size:16px; font-weight:700; color:var(--text-primary); text-align:right; } .history-type { font-size:10px; color:var(--text-muted); margin-top:2px; text-align:right; } /* ============================================================ UTILITY ============================================================ */ .text-right { text-align:right; } .text-center { text-align:center; } .text-muted { color:var(--text-muted); } .text-primary-color { color:var(--primary); } .fw-bold { font-weight:700; } .mt-8 { margin-top:8px; } .mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; } .mb-8 { margin-bottom:8px; } .mb-12 { margin-bottom:12px; } .pt-16 { padding-top:16px; } .p-0 { padding:0; } .p-12 { padding:12px; } .pxy-12 { padding:12px 12px; } .d-flex { display:flex; } .align-center { align-items:center; } .justify-between { justify-content:space-between; } .gap-8 { gap:8px; } .gap-12 { gap:12px; } .w-100 { width:100%; } .hidden { display:none !important; } .invisible { visibility:hidden; } body.login-page { padding-bottom:0; min-height:100vh; display:flex; flex-direction:column; } body.auth-gated { visibility:hidden; } .login-shell { width:100%; max-width:420px; margin:auto; padding:24px 16px; } .login-brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; } .login-brand .logo-icon { width:42px; height:42px; background:linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius:var(--radius-sm); display:grid; place-items:center; color:#fff; font-size:20px; } .login-title { font-size:20px; font-weight:700; color:var(--text-primary); line-height:1.2; } .login-subtitle { font-size:13px; color:var(--text-muted); margin-top:2px; } .login-error { display:none; margin-bottom:12px; padding:10px 12px; border-radius:var(--radius); background:var(--danger-bg); color:var(--danger); font-size:13px; font-weight:600; } .login-error.show { display:block; } .model-list { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; } .chip-full { width:100%; text-align:left; } .qty-wrap-narrow { width:160px; } .qty-input-compact { width:56px; height:48px; border:none; border-left:1.5px solid var(--border); border-right:1.5px solid var(--border); text-align:center; font-family:Sarabun,sans-serif; font-size:16px; font-weight:700; outline:none; } .inline-actions { display:flex; gap:6px; } .loading-cell, .empty-cell, .error-cell { text-align:center; padding:24px; } .loading-cell, .empty-cell { color:var(--text-muted); } .error-cell { color:var(--danger); } .loading-inline { text-align:center; padding:12px; color:var(--text-muted); } .empty-inline { text-align:center; padding:16px; color:var(--text-muted); } .small-muted-text { font-size:13px; color:var(--text-muted); } .table-desc { font-size:12px; color:var(--text-primary); line-height:1.4; } .table-meta { font-size:10px; color:var(--text-muted); margin-top:2px; } .table-title { font-size:13px; font-weight:600; color:var(--text-primary); } .table-sub { font-size:11px; color:var(--text-muted); } .store-code { font-weight:700; color:var(--primary); margin-right:4px; } .store-branch { color:var(--text-secondary); } .history-list { display:flex; flex-direction:column; gap:12px; } .history-item-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s; } .history-item-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(219,31,38, 0.08); } .history-item-main { flex: 1; } .history-item-no { font-size: 11px; font-weight: 700; color: var(--primary); margin-bottom: 2px; } .history-item-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .history-item-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; } .history-item-side { text-align: right; } .history-item-total { font-size: 16px; font-weight: 800; color: var(--primary); margin-bottom: 4px; } .history-item-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; } .history-item-badge.lp { background: #fee2e2; color: #b91c1c; } .history-item-badge.edlp { background: #dcfce7; color: #15803d; } /* Detail Modal Styles */ .detail-summary { background: #f8fafc; border-radius: var(--radius); padding: 8px 16px; margin-bottom: 16px; border: 1.5px solid var(--border); } .detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 15px; } .detail-row:last-child { border-bottom: none; } .detail-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; } .detail-val { font-size: 14px; color: var(--text-primary); text-align: right; } .detail-table-wrap { overflow-x: auto; margin-bottom: 16px; } .detail-table { width: 100%; border-collapse: collapse; font-size: 14px; } .detail-table th { background: #f1f5f9; padding: 10px; text-align: left; font-weight: 700; color: var(--text-secondary); border-bottom: 2px solid var(--border); } .detail-table td { padding: 10px; border-bottom: 1.5px solid var(--border); vertical-align: top; } .it-name { font-weight: 700; color: var(--text-primary); } .it-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .detail-table tfoot td { padding: 8px 10px; } .detail-notes { font-size: 13px; padding: 12px; background: #fffbe8; border-left: 4px solid #f59e0b; border-radius: 4px; color: #78350f; } .modal-lg { max-width: 640px !important; } .detail-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px; border-top: 1.5px solid var(--border); } .font-bold { font-weight: 700; } .text-warning-color { color: #d97706; } /* ============================================================ RESPONSIVE — Tablet / Desktop (≥ 640px) ============================================================ */ @media (min-width: 640px) { :root { --container-max:720px; } .container { padding:20px 24px; } .bottom-nav { display:none; } body { padding-bottom:0; } .app-header { padding:0 24px; } .app-header .logo-title { font-size:17px; } .stats-grid { grid-template-columns:repeat(4,1fr); } .price-table { font-size:14px; } .modal-overlay { align-items:center; } .modal-sheet { border-radius:var(--radius-xl); max-width:540px; margin:0 auto; transform:scale(0.9); opacity:0; transition:transform 0.25s ease, opacity 0.25s ease; } .modal-overlay.show .modal-sheet { transform:scale(1); opacity:1; } } @media (min-width: 1024px) { :root { --container-max:800px; } } /* ─── QUICK CONFIG BAR ──────────────────────────────────────────────────── */ .quick-config-bar { background: var(--surface-alt, #f8f9fa); border: 1.5px solid var(--border, #e5e7eb); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; } .quick-config-toggle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .quick-mode-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--text-primary); } .quick-mode-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary, #DB1F26); } /* สถานะ dot */ .config-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .config-dot.ready { background: #22c55e; } .config-dot.not-ready { background: #d1d5db; } .config-status-text { font-size: 12px; color: var(--text-secondary, #6b7280); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tabs ตู้ตั้ง / ตู้แขวน */ .cfg-type-tabs { display: flex; gap: 6px; margin: 10px 0 8px; } .cfg-type-btn { flex: 1; padding: 6px 10px; font-size: 13px; font-weight: 500; border: 1.5px solid var(--border, #e5e7eb); border-radius: 8px; background: #fff; color: var(--text-secondary, #6b7280); cursor: pointer; transition: all 0.15s; } .cfg-type-btn.active { background: var(--primary, #DB1F26); border-color: var(--primary, #DB1F26); color: #fff; } /* Grid dropdowns 2×2 */ .config-grid-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; } .form-control-sm { font-size: 13px !important; padding: 6px 8px !important; height: auto !important; } /* Matched key badge */ .matched-key-info { font-size: 12px; font-family: monospace; background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; border-radius: 6px; padding: 4px 8px; margin-top: 4px; } .ml-auto { margin-left: auto !important; } .text-danger { color: var(--danger) !important; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-row { flex-direction: row !important; } .flex-1 { flex: 1 !important; } .gap-8 { gap: 8px !important; } .p-16 { padding: 16px !important; } .p-24 { padding: 24px !important; } .mb-8 { margin-bottom: 8px !important; } .mb-16 { margin-bottom: 16px !important; } /* ─── IMPORT / EXPORT ───────────────────────────────────────────────────── */ /* ปุ่มแถว IE ใต้ filter bar */ .ie-btn-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .btn-xs { padding: 4px 10px; font-size: 12px; } /* IE Modal Tabs */ .ie-tabs { display: flex; border-bottom: 2px solid var(--border, #e5e7eb); padding: 0 16px; } .ie-tab { flex: 1; padding: 10px; background: none; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -2px; font-size: 14px; font-weight: 500; color: var(--text-secondary, #6b7280); cursor: pointer; transition: all 0.15s; } .ie-tab.active { color: var(--primary, #DB1F26); border-bottom-color: var(--primary, #DB1F26); font-weight: 600; } .imp-result-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; } .imp-result-error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; } /* Help text */ .ie-help-text { font-size: 13px; color: var(--text-secondary, #6b7280); background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; line-height: 1.5; } /* Category toolbar */ .ie-cat-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ie-sel-count { font-size: 12px; color: var(--text-secondary, #6b7280); margin-left: auto; } /* Category list */ .ie-cat-list { max-height: 300px; overflow-y: auto; border: 1.5px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px; margin-bottom: 12px; background: var(--surface, #fff); } .ie-cat-group { margin-bottom: 10px; } .ie-cat-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary, #9ca3af); padding: 2px 4px 4px; } .ie-cat-group-items { display: flex; flex-wrap: wrap; gap: 4px; } .ie-cat-item { display: flex; align-items: center; gap: 5px; background: var(--surface-alt, #f9fafb); border: 1.5px solid var(--border, #e5e7eb); border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; transition: all 0.12s; user-select: none; } .ie-cat-item:has(input:checked) { background: #FDECED; border-color: var(--primary, #DB1F26); color: var(--primary, #DB1F26); } .ie-cat-code { font-weight: 700; font-family: monospace; } .ie-cat-name { color: var(--text-secondary, #6b7280); } .ie-cat-count { font-size: 10px; background: var(--border, #e5e7eb); border-radius: 99px; padding: 1px 6px; color: var(--text-secondary, #6b7280); } /* Dropzone */ .ie-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--border, #d1d5db); border-radius: 12px; padding: 32px 20px; cursor: pointer; background: var(--surface-alt, #f9fafb); transition: all 0.15s; margin-bottom: 12px; } .ie-dropzone:hover, .ie-dropzone.drag-over { border-color: var(--primary, #DB1F26); background: #FDECED; } .ie-drop-icon { font-size: 32px; } .ie-drop-text { font-size: 14px; font-weight: 600; color: var(--text, #111827); } .ie-drop-sub { font-size: 12px; color: var(--text-secondary, #6b7280); } /* Import summary pills */ .ie-import-summary { margin-bottom: 10px; } .ie-summary-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .ie-pill { font-size: 12px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--border, #e5e7eb); background: var(--surface-alt, #f9fafb); } .ie-pill.total { background: #f3f4f6; } .ie-pill.info { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; } .ie-pill.success { background: #dcfce7; border-color: #86efac; color: #166534; } .ie-preview-note { font-size: 11px; color: var(--text-secondary, #9ca3af); } /* Preview table wrap */ .ie-preview-wrap { overflow-x: auto; max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; margin-bottom: 12px; } .ie-preview-wrap .price-table th { white-space: nowrap; font-size: 11px; padding: 6px 8px; } .ie-preview-wrap .price-table td { font-size: 11px; padding: 5px 8px; white-space: nowrap; } /* Footer action buttons */ .ie-footer-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border, #e5e7eb); margin-top: 4px; } /* ─── ADD ITEM MODAL v2 ──────────────────────────────────────────────────── */ /* Product-type tabs: ตู้ครัว | ท็อปหิน COTTO */ .product-type-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border, #e5e7eb); margin: 0 0 0; background: var(--surface-raised, #f9fafb); } .ptype-tab { flex: 1; padding: 11px 8px; font-size: 14px; font-weight: 500; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--text-secondary, #6b7280); cursor: pointer; transition: color 0.15s, border-color 0.15s; letter-spacing: 0.01em; } .ptype-tab.active { color: var(--primary, #DB1F26); border-bottom-color: var(--primary, #DB1F26); font-weight: 700; background: var(--surface, #fff); } .ptype-tab:hover:not(.active) { color: var(--text, #111827); } /* Tabs: ตู้ตั้ง / ตู้แขวน */ .add-tabs-wrap { position: relative; margin: 0 16px 0; display: flex; align-items: flex-end; gap: 0; } .add-tabs-arrow { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 28px; height: 38px; background: var(--surface, #fff); border: none; border-bottom: 2px solid var(--border, #e5e7eb); color: var(--text-secondary, #6b7280); cursor: pointer; font-size: 14px; padding: 0; transition: color 0.15s, background 0.15s; z-index: 1; } .add-tabs-arrow:hover { color: var(--primary, #DB1F26); background: var(--primary-bg, #FDECED); } .add-tabs-arrow.visible { display: flex; } .add-tabs-arrow-left { border-right: 1px solid var(--border, #e5e7eb); } .add-tabs-arrow-right { border-left: 1px solid var(--border, #e5e7eb); } .add-tabs { flex: 1 1 auto; display: flex; gap: 2px; border-bottom: 2px solid var(--border, #e5e7eb); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 1px; cursor: grab; user-select: none; } .add-tabs.is-dragging { cursor: grabbing; } .add-tabs::-webkit-scrollbar { height: 0; } .add-tabs-hint { position: absolute; bottom: -18px; right: 0; font-size: 11px; color: var(--text-secondary, #9ca3af); letter-spacing: 0.01em; pointer-events: none; } .add-tab { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; font-size: 14px; font-weight: 500; background: none; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -2px; color: var(--text-secondary, #6b7280); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .add-tab.active { color: var(--primary, #DB1F26); border-bottom-color: var(--primary, #DB1F26); font-weight: 600; } .add-tab:hover:not(.active) { color: var(--text, #111827); } .add-tab:disabled { color: #b8bec7; cursor: not-allowed; opacity: 0.55; } .cfg-loading-text { padding: 10px 16px; font-size: 13px; color: var(--text-secondary, #6b7280); } /* Section wrapper */ .v2-section { padding: 10px 16px 4px; } .v2-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #6b7280); margin-bottom: 6px; } /* Config stack: รุ่น → สี (ชิป) → ลาย */ .cfg-stack { display: flex; flex-direction: column; gap: 8px; } /* กรอบแต่ละขั้นตอน — เส้นเข้มให้เห็นชัดว่าต้องเลือกอะไรบ้าง */ .cfg-field { border: 3px solid #374151; border-radius: 10px; padding: 8px 10px 10px; background: var(--surface, #fff); } /* ช่องที่บังคับเลือก (สี) — กรอบสีน้ำเงินหนาให้สะดุดตา */ .cfg-field-required { border-color: var(--primary, #DB1F26); border-width: 3.5px; } .cfg-field-label { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--text, #111827); margin-bottom: 6px; } .cfg-req { color: var(--primary, #DB1F26); font-weight: 800; } /* รายการแบบ list (แทน native select ที่ชื่อยาวล้นจอมือถือ) — ข้อความ wrap ได้ */ .picker-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 320px; overflow-y: auto; border: 1.5px solid var(--border, #e5e7eb); border-radius: 10px; padding: 6px; background: var(--surface, #fff); } .picker-row { display: block; width: 100%; text-align: left; background: var(--surface, #fff); border: 1.5px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.45; cursor: pointer; transition: var(--transition); } .picker-row:hover { border-color: var(--primary, #DB1F26); } .picker-row.selected { border-color: var(--primary, #DB1F26); background: var(--primary-bg, #FDECED); } .picker-row .pr-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .picker-row .pr-code { font-weight: 700; color: var(--text, #111827); } .picker-row .pr-price { font-weight: 700; color: var(--primary, #DB1F26); white-space: nowrap; } .picker-row .pr-name { display: block; margin-top: 3px; color: var(--text-secondary, #6b7280); white-space: normal; /* ให้ตัดบรรทัดเอง ไม่ล้นจอ */ overflow-wrap: anywhere; } .picker-empty { padding: 10px; text-align: center; font-size: 13px; color: var(--text-secondary, #6b7280); } /* คำอธิบายสั้นใต้ปุ่ม */ .btn-hint { text-align: center; font-size: 12px; color: var(--text-secondary, #64748b); margin-top: 4px; line-height: 1.3; } /* ป้ายเตือนในรายการ: ตู้ที่มีเฉพาะอีกซีรีส์ (สลับไม่ได้ เช่น ตู้ Grand) */ .item-series-warn { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--warning, #b45309); background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 2px 8px; display: inline-block; } /* แถบสรุปท้าย modal เพิ่มสินค้า — ติดล่างเสมอ โชว์จำนวน+ยอดรวม+ปุ่มเสร็จสิ้น */ .item-modal-summary { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--surface, #fff); border-top: 2px solid var(--border, #e5e7eb); font-size: 13.5px; font-weight: 700; color: var(--text, #111827); z-index: 5; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); } /* หัวข้อ "เลือกรุ่นตู้" — เน้นหนา + หมายเหตุให้เลือก config ก่อน */ .cfg-model-label { font-size: 13.5px !important; font-weight: 800 !important; color: var(--text, #111827) !important; } .cfg-model-note { font-size: 12px; font-weight: 700; color: var(--primary, #DB1F26); letter-spacing: 0; } /* select รุ่น/ลาย ในกรอบ — ไม่ยืดเต็มแถบ (มือถือค่อยเต็มความกว้าง) */ .cfg-field .cfg-sel { width: auto; min-width: 220px; max-width: 300px; display: block; } @media (max-width: 480px) { .cfg-field .cfg-sel { width: 100%; max-width: none; } } .cfg-color-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* ชิปสี/ขนาด — ย่อจากปุ่ม .btn ปกติให้กะทัดรัด เท่ากันทุกแท็บ (Rocka config, สี+ขนาด COTTO, สี+ขนาด SOLID) */ .cfg-color-chips .cotto-type-btn, #itemCottoColorBtns .cotto-type-btn, #itemCottoSizeBtns .cotto-type-btn, #itemSolidColorBtns .cotto-type-btn, #itemSolidSizeBtns .cotto-type-btn { height: 32px; padding: 0 12px; font-size: 12.5px; } .cfg-sel { width: 100%; padding: 8px 10px; font-size: 13px; border: 1.5px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #111827); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .cfg-sel:focus { outline: none; border-color: var(--primary, #DB1F26); box-shadow: 0 0 0 3px var(--primary-bg, #FDECED); } /* ช่องที่บังคับเลือก (สี) — เน้นกรอบให้เห็นชัด */ .cfg-sel-required { border-color: var(--primary, #DB1F26); border-width: 2px; } /* Model list */ .model-list-v2 { max-height: 220px; overflow-y: auto; border: 1.5px solid var(--border, #e5e7eb); border-radius: 8px; margin-top: 6px; background: var(--surface, #fff); } .model-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border, #e5e7eb); transition: background 0.12s; } .model-row:last-child { border-bottom: none; } .model-row:hover { background: var(--surface-alt, #f3f4f6); } .model-row.active { background: var(--primary-bg, #FDECED); color: var(--primary, #DB1F26); box-shadow: inset 3px 0 0 var(--primary, #DB1F26); } .row-code { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--primary, #DB1F26); min-width: 40px; } .model-row.active .row-code { color: var(--primary, #DB1F26); } .row-name { flex: 1; font-size: 13px; color: var(--text, #111827); } .row-desc { flex: 1; min-width: 0; /* ให้ flex item shrink ได้ → ellipsis ทำงาน */ font-size: 12px; color: var(--text, #111827); line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .row-w { font-size: 11px; color: var(--text-secondary, #6b7280); white-space: nowrap; } /* Infinite scroll sentinel */ .list-sentinel { padding: 8px 12px; font-size: 11px; color: var(--text-secondary, #6b7280); text-align: center; border-top: 1px dashed var(--border, #e5e7eb); background: var(--surface-alt, #f9fafb); cursor: default; } .list-total { padding: 6px 12px; font-size: 11px; color: var(--text-secondary, #9ca3af); text-align: center; border-top: 1px solid var(--border, #e5e7eb); } /* SKU result box */ .sku-result-box { background: var(--surface-2, #f8f9fa); border: 1.5px solid var(--border, #e5e7eb); border-radius: 12px; padding: 14px 16px; min-height: 60px; } .sku-result-inner {} .sku-key-badge { display: inline-block; font-family: monospace; font-size: 13px; font-weight: 700; background: #FDECED; color: #B01820; border-radius: 5px; padding: 2px 8px; margin-bottom: 5px; } .sku-desc-line { font-size: 13px; color: var(--text, #111827); margin-bottom: 6px; } .sku-barcode-line { font-size: 11px; color: var(--text-secondary, #6b7280); margin-bottom: 4px; } .sku-price-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .price-badge-v2 { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1.5px solid var(--border, #e5e7eb); background: var(--surface, #fff); color: var(--text-secondary, #6b7280); transition: all 0.15s; } .price-badge-v2.active { background: var(--primary, #DB1F26); color: #fff; border-color: var(--primary, #DB1F26); } .price-badge-v2.edlp.active { background: #059669; border-color: #059669; } .sku-used-price { font-size: 13px; color: var(--text-secondary, #6b7280); margin-top: 4px; } .sku-used-price strong { color: var(--primary, #DB1F26); font-size: 20px; font-weight: 700; margin-left: 4px; } .sku-not-found { color: var(--danger, #dc2626); font-size: 13px; padding: 8px 0; } /* Footer */ .add-footer-v2 { display: flex; align-items: center; gap: 10px; padding: 10px 16px 16px; /* ลอยติดล่าง modal — เลือกรุ่นแล้วกดเพิ่มได้เลย ไม่ต้องเลื่อนสู้กับ list */ position: sticky; bottom: 0; z-index: 4; background: var(--surface, #fff); box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); } .add-footer-v2 .qty-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .add-footer-v2 .btn-block { flex: 1; } /* Loading inline */ .loading-inline { display: flex; align-items: center; gap: 8px; color: var(--text-secondary, #6b7280); font-size: 13px; padding: 8px 0; } .loading-inline .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border, #e5e7eb); border-top-color: var(--primary, #DB1F26); border-radius: 50%; animation: spin 0.6s linear infinite; } /* ============================================================ ระบบพนักงาน — แถบชื่อ / ยืนยันตัว / ประวัติของฉัน ============================================================ */ .staff-badge { margin-left: auto; display: flex; align-items: center; } .staff-chip { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; background: var(--primary-bg); border: 1px solid rgba(219,31,38,.18); border-radius: var(--radius-full); padding: 5px 14px; font-family: 'Sarabun', sans-serif; cursor: pointer; transition: var(--transition); -webkit-tap-highlight-color: transparent; max-width: 62vw; } .staff-chip:hover { background: #FCE1E2; } .staff-chip-name { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .staff-chip-sub { font-size: 10px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .staff-chip-warn { background: var(--warning-bg); border-color: #FCD34D; } .staff-chip-warn .staff-chip-name { color: #92400E; } .staff-bind-hint { font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 14px; } .staff-shared-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin-top: 4px; } .staff-bind-error { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font-size: 12.5px; border: 1px solid #FECACA; } .staff-menu-info { text-align: center; padding: 6px 0 10px; } .staff-menu-name { font-size: 17px; font-weight: 700; color: var(--text-primary); } .staff-menu-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* แถบโหมดแก้ไข */ .edit-mode-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--warning-bg); border: 1.5px solid #FCD34D; border-radius: var(--radius); padding: 10px 14px; margin-top: 12px; font-size: 13px; color: #92400E; } /* ประวัติของฉัน */ .mq-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .mq-filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mq-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .mq-sel { width: auto; min-width: 150px; } .mq-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; } .mq-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 11px 14px; background: var(--surface); transition: var(--transition); } .mq-row:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(219,31,38,.08); } .mq-main { min-width: 0; flex: 1 1 260px; } .mq-no { font-weight: 700; color: var(--primary); font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mq-ver, .mq-copy { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--text-secondary); } .mq-copy { background: var(--info-bg); color: var(--info); } .mq-cust { font-size: 13px; color: var(--text-primary); margin-top: 2px; overflow-wrap: anywhere; } .mq-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: var(--text-muted); } .mq-status { text-transform: uppercase; font-weight: 700; letter-spacing: .3px; } .mq-status-draft { color: var(--text-secondary); } .mq-status-sent { color: var(--info); } .mq-status-approved { color: var(--success); } .mq-status-cancelled { color: var(--danger); } .mq-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; } .mq-total { font-size: 16px; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .mq-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .mq-actions .btn { padding: 0 10px; height: 30px; font-size: 12px; } .mq-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray-100); } .mq-pager-info { font-size: 12px; color: var(--text-secondary); } .mq-pager-btns { display: flex; align-items: center; gap: 8px; } .mq-pager-cur { font-size: 12.5px; font-weight: 600; color: var(--text-primary); } @media (max-width: 640px) { .mq-filter-grid { grid-template-columns: repeat(2, 1fr); } .mq-sel { flex: 1 1 100%; min-width: 0; } .mq-side { align-items: flex-start; width: 100%; } .mq-actions { justify-content: flex-start; } .staff-chip { max-width: 50vw; } } /* ── หน้า Admin: ใบเสนอราคาทั้งหมด / จัดการพนักงาน / Audit Log ── */ .hq-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .hq-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .hq-sel { width: auto; min-width: 150px; } .hq-toolbar .form-control:not(.hq-sel) { flex: 1 1 220px; } .audit-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; } .audit-row { border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: 9px 12px; background: var(--surface); } .audit-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; } .audit-act { font-weight: 700; font-size: 12.5px; color: var(--primary-dark); font-family: monospace; } .audit-time { font-size: 11px; color: var(--text-muted); } .audit-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--text-secondary); } .audit-diff { margin-top: 6px; font-size: 11.5px; line-height: 1.6; background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px 9px; overflow-wrap: anywhere; } .audit-lbl { display: inline-block; min-width: 34px; font-weight: 700; color: var(--text-muted); } .audit-lbl-new { color: var(--success); } @media (max-width: 900px) { .hq-filter-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hq-filter-grid { grid-template-columns: 1fr; } .hq-sel, .hq-toolbar .form-control { flex: 1 1 100%; min-width: 0; } } /* ── ปุ่ม action ในตาราง: เรียงแนวนอน ไม่ให้แถวสูงเกินไป ── */ .row-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } .price-table .btn-icon.btn-sm { width: 30px; height: 30px; font-size: 14px; border-radius: 7px; flex: 0 0 auto; } .price-table .btn-icon.btn-sm:hover { background: var(--primary-bg); } /* ตารางพนักงาน: แถวกระชับ อ่านง่าย */ .staff-name { font-weight: 600; color: var(--text-primary); line-height: 1.35; } .staff-phone { font-size: 11px; color: var(--text-muted); font-family: monospace; margin-top: 1px; } .staff-code-badge { display: inline-block; font-weight: 700; font-size: 12px; color: var(--primary-dark); background: var(--primary-bg); padding: 2px 9px; border-radius: var(--radius-full); letter-spacing: .3px; } .staff-num { font-variant-numeric: tabular-nums; font-weight: 600; } .staff-date { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; } .pill-on, .pill-off { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap; } .pill-on { color: var(--success); background: var(--success-bg); } .pill-off { color: var(--text-muted); background: var(--gray-100); } /* ── ปุ่มข้อความขนาดเล็กในตาราง ──────────────────────────────────── ใช้ข้อความแทนไอคอน: สื่อความหมายชัดกว่าและไม่มีปัญหาไอคอนเบี้ยวในกรอบ (ปุ่มไอคอนเดิมใช้ .btn-sm ที่มี padding 0 14px ทำให้พื้นที่ข้างในเหลือ 2px ไอคอนเลยล้นออกนอกกรอบ) */ .btn-mini { height: 28px; padding: 0 11px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); font-family: 'Sarabun', sans-serif; font-size: 12px; font-weight: 600; line-height: 1; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer; transition: var(--transition); -webkit-tap-highlight-color: transparent; } .btn-mini:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); } .btn-mini:active { transform: translateY(1px); } .btn-mini.mini-danger { color: var(--danger); border-color: #FECACA; } .btn-mini.mini-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .btn-mini.mini-success { color: var(--success); border-color: #A7F3D0; } .btn-mini.mini-success:hover { background: var(--success-bg); color: var(--success); border-color: var(--success); } .form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.6; } /* ── กล่องยืนยันตามธีม (แทน confirm() ของเบราว์เซอร์) ── */ .confirm-body { text-align: center; padding: 6px 4px 4px; } .confirm-body .confirm-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; } .confirm-title { font-size: 17px; font-weight: 700; color: var(--text-primary); } .confirm-msg { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-top: 6px; overflow-wrap: anywhere; } .confirm-actions { display: flex; gap: 10px; margin-top: 18px; } .confirm-actions .btn { flex: 1 1 0; } /* ── สถานะถูกล็อก (ใส่ PIN ผิดหลายครั้ง) + ปุ่มปลดล็อก ── */ .pill-lock { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap; color: #92400E; background: var(--warning-bg); } .btn-mini.mini-warn { color: #92400E; border-color: #FCD34D; background: var(--warning-bg); } .btn-mini.mini-warn:hover { background: #FDE68A; color: #78350F; border-color: #F59E0B; } /* ============================================================ MODERN REFRESH — ปรับผิวสัมผัสให้ร่วมสมัยขึ้น (ทับค่าเดิมท้ายไฟล์ ไม่ต้องแก้ HTML/JS สักจุด) ============================================================ */ /* ── ตัวอักษร: หัวข้อกระชับ อ่านง่ายขึ้น ── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } h1, h2, h3, .modal-title, .card-header-text h2 { letter-spacing: -0.02em; } .card-header-text h2 { font-weight: 700; } /* ── โฟกัสชัดเจนทุกช่อง (โมเดิร์น + เข้าถึงง่าย) ── */ .form-control:focus, .inline-input:focus, select.form-control:focus, textarea.form-control:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; } .btn:focus-visible, .btn-mini:focus-visible, .btn-icon:focus-visible, .tab-btn:focus-visible, .sub-tab-btn:focus-visible, .add-tab:focus-visible { outline: none; box-shadow: var(--ring); } /* ── ช่องกรอก: เส้นบาง พื้นนวล เปลี่ยนเป็นขาวตอนโฟกัส ── */ .form-control { background: #FCFCFD; border: 1px solid var(--border); transition: var(--transition); } .form-control:hover:not(:focus) { border-color: #D8DBE2; } .form-control:focus { background: var(--surface); } .form-control::placeholder { color: #A8AEB8; } /* ── ปุ่ม: กดแล้วยุบเล็กน้อย เงานุ่ม ── */ .btn { transition: var(--transition); letter-spacing: -0.01em; } .btn:active { transform: translateY(1px); } .btn-primary { box-shadow: 0 1px 2px rgba(219,31,38,.20), 0 6px 16px rgba(219,31,38,.24); } .btn-primary:hover { box-shadow: 0 2px 4px rgba(219,31,38,.22), 0 10px 24px rgba(219,31,38,.30); } .btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); } .btn-secondary:hover { background: var(--surface-2); border-color: #D8DBE2; color: var(--text-primary); } /* ── การ์ด: ขอบบางลง เงาฟุ้ง ยกตัวตอน hover ── */ .card { border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: box-shadow .22s cubic-bezier(.2,.8,.3,1); } .card:hover { box-shadow: var(--shadow-md); } .card-header { background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-2) 100%); } /* ── แท็บ: เส้นใต้ลื่นขึ้น ── */ .tab-btn, .sub-tab-btn, .add-tab { transition: var(--transition); } /* ── ตาราง: เส้นเบาลง อ่านสบายตา ── */ .price-table th { background: var(--surface-2); border-bottom: 1px solid var(--border); letter-spacing: .04em; } .price-table td { border-bottom: 1px solid #F1F2F5; } .price-table tr:last-child td { border-bottom: none; } .price-table tr:hover td { background: #FCFCFD; } /* ── แถบยอดรวม: ไล่เฉดนุ่มขึ้น ── */ .price-display { box-shadow: 0 2px 6px rgba(219,31,38,.18), 0 16px 34px rgba(219,31,38,.24); } /* ── ชิป/ป้าย: ขอบมนเต็ม ดูสะอาด ── */ .pill-on, .pill-off, .pill-lock, .mq-ver, .mq-copy, .staff-code-badge { border-radius: var(--radius-full); } /* ── scrollbar บางลง (เดสก์ท็อป) ── */ @media (pointer: fine) { * { scrollbar-width: thin; scrollbar-color: #D3D7DE transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: #D3D7DE; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #B9BFC9; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } } /* ── เคารพผู้ใช้ที่ปิดแอนิเมชัน ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── ปุ่มลบ / ป้ายใบที่ถูกลบ ── */ .mq-del { color: var(--danger) !important; border-color: #FECACA !important; } .mq-del:hover { background: var(--danger-bg) !important; border-color: var(--danger) !important; } .mq-restore { color: var(--success) !important; border-color: #A7F3D0 !important; } .mq-restore:hover { background: var(--success-bg) !important; border-color: var(--success) !important; } .mq-deleted { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); color: var(--danger); background: var(--danger-bg); }