/* ===================================================================== GOODFILM brand theme (18.10.26) — clean & modern, colours from the logo navy = brand, red = accents only. Loaded LAST on every page so it wins. Shared tokens first, then: main app (index.html), then the stand-alone pages (dealers / admin / register) under their own body classes. ===================================================================== */ :root { --gf-navy: #0b2a86; /* logo blue */ --gf-navy-700: #081f66; --gf-navy-900: #061646; --gf-blue: #2553c9; /* lighter interactive blue */ --gf-tint: #eef3fd; /* very light brand wash */ --gf-tint-2: #f6f8fd; --gf-red: #e31e26; /* logo red: accents only */ --gf-red-tint: #fdecec; --gf-ink: #101828; --gf-ink-soft: #475467; --gf-muted: #667085; --gf-line: #e4e9f2; --gf-line-strong: #cdd6e6; --gf-radius: 14px; --gf-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 4px 18px rgb(16 24 40 / 5%); --gf-shadow-lg: 0 12px 40px rgb(11 42 134 / 14%); --gf-font: "IBM Plex Sans Thai", Tahoma, "Leelawadee UI", system-ui, sans-serif; /* re-point the old tokens so every older rule picks up the brand */ --ink: var(--gf-ink); --ink-soft: var(--gf-ink-soft); --muted: var(--gf-muted); --line: var(--gf-line); --navy: var(--gf-navy); --red: var(--gf-navy); --red-dark: var(--gf-navy); --red-tint: var(--gf-tint); --radius: var(--gf-radius); --shadow: var(--gf-shadow); } html { --ch-a: var(--gf-navy); --ch-b: var(--gf-blue); --ch-tint: var(--gf-tint); --ch-line: #c7d4f0; } [data-ch="retail"] { --ca: var(--gf-navy); --cb: var(--gf-blue); --ct: var(--gf-tint); --cl: #c7d4f0; } body { font-family: var(--gf-font); color: var(--gf-ink); background: #fff; letter-spacing: 0; } button, input, select, textarea { font-family: inherit; } a { color: var(--gf-blue); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--gf-blue) !important; box-shadow: 0 0 0 3px rgb(37 83 201 / 16%); } button:focus-visible, a:focus-visible { outline: 2px solid var(--gf-blue); outline-offset: 2px; } ::selection { background: #d6e1fb; } /* ---------------------------------------------------------------- page heading */ .page-heading h1 { font-size: 24px; letter-spacing: -.01em; color: var(--gf-ink); } .page-heading h1 .aud, .page-heading h1 strong { color: var(--ch-a, var(--gf-navy)); } .conf-badge { background: var(--gf-red-tint); color: #b42318; border: 1px solid #f7c7c4; font-size: 12px; } .badge-warning { background: #fff7e6; color: #93600a; border: 1px solid #f6dfae; } .price-date, .heading-meta { color: var(--gf-muted); } /* ---------------------------------------------------------------- surfaces */ .panel, .summary-panel, .form-panel { border: 1px solid var(--gf-line); border-radius: var(--gf-radius); box-shadow: var(--gf-shadow); background: #fff; } .header-row, .panel-title { border-color: var(--gf-line) !important; } .panel-title { color: var(--gf-ink); font-size: 18px; } /* calculator cards keep their own (now brand-matched) tints */ #view-calculator .form-panel { background: var(--gf-tint-2); border-color: var(--gf-line); } #view-calculator .form-panel .panel-title, #view-calculator .form-panel .header-row { border-color: var(--gf-line); } #view-calculator .summary-panel { background: #f5fbf8; border-color: #dcefe5; } #view-calculator .summary-panel .header-row, #view-calculator .summary-panel .totals, #view-calculator .summary-panel .quote-notes { border-color: #dcefe5; } #view-calculator .summary-panel > .cust-grid { background: #fff; border-color: var(--gf-line); } #view-calculator .summary-panel .quote-ref { background: #fff; border-color: var(--gf-line); } #view-calculator .summary-panel .quote-ref.saved { background: #f0faf4; border-color: #b7e2c8; } /* ---------------------------------------------------------------- inputs */ input, select, textarea { border-color: var(--gf-line-strong); border-radius: 10px; } .cust-grid input, .cust-grid select, .form-panel .field input, .form-panel .field select { border-color: var(--gf-line-strong); } .cust-grid label, .field label { color: var(--gf-ink-soft); } /* ---------------------------------------------------------------- buttons: flat, solid brand */ .primary-button, html[data-channel] .primary-button { background: var(--gf-navy); border-color: var(--gf-navy); color: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 10%); border-radius: 10px; } .primary-button:hover:not(:disabled), html[data-channel] .primary-button:hover:not(:disabled) { background: var(--gf-navy-700); border-color: var(--gf-navy-700); } .primary-button:disabled { background: #b8c4e0; border-color: #b8c4e0; opacity: 1; color: #fff; } .secondary-button { background: #fff; color: var(--gf-navy); border-color: var(--gf-line-strong); border-radius: 10px; } .secondary-button:hover:not(:disabled) { background: var(--gf-tint); border-color: var(--gf-navy); } .ghost-button { color: var(--gf-muted); border-radius: 10px; } .ghost-button:hover:not(:disabled) { color: var(--gf-ink); background: #f2f4f7; } /* ---------------------------------------------------------------- tabs & choice buttons: flat segmented style */ .mode-tabs button, .choice-group button, .filter-group:has(#category) .choice-group button { background: #fff; border-color: var(--gf-line-strong); color: var(--gf-ink-soft); } .mode-tabs button:hover, .choice-group button:hover, .filter-group:has(#category) .choice-group button:hover { background: var(--gf-tint-2); color: var(--gf-navy); border-color: var(--gf-line-strong); } .choice-group button.active, .filter-group:has(#category) .choice-group button.active, html[data-channel] .choice-group button.active:not([data-ch]), html[data-channel] .filter-group:has(#category) .choice-group button.active { background: var(--ch-a, var(--gf-navy)); border-color: var(--ch-a, var(--gf-navy)); color: #fff; } .mode-tabs button[data-ch], #calc-customer + .choice-group button[data-ch] { background: #fff; border-color: var(--cl); color: var(--ca); } .mode-tabs button[data-ch]:hover, #calc-customer + .choice-group button[data-ch]:hover { background: var(--ct); } .mode-tabs button[data-ch].active, #calc-customer + .choice-group button[data-ch].active { background: var(--ca); border-color: var(--ca); color: #fff; box-shadow: 0 6px 16px -6px var(--ca); } .choice-group button:not(.active) .ico, .mode-tabs button:not(.active) .ico { color: var(--ch-b, var(--gf-blue)); } /* ---------------------------------------------------------------- price table */ .price-table thead th, html[data-channel] .price-table th { background: var(--gf-tint-2); color: var(--gf-ink-soft); border-bottom: 1px solid var(--gf-line); } .price-table tbody tr:hover { background: var(--gf-tint-2); } .price-table td { border-color: var(--gf-line); } .price-table .group-row td { background: #f9fafc; border-left-color: var(--ch-b, var(--gf-navy)); } .price-table td.number { color: var(--gf-ink); } .warranty-pill { background: var(--gf-tint); color: var(--gf-navy); } /* ---------------------------------------------------------------- summary / totals */ .grand-total .number, #view-calculator .grand-total .number { color: var(--gf-navy); } .grand-total { border-top-color: var(--gf-line-strong); } .quote-ref .qr-text { color: var(--gf-navy); } /* ---------------------------------------------------------------- saved quotations list */ .q-table th { background: var(--gf-tint-2) !important; color: var(--gf-ink-soft) !important; border-color: var(--gf-line) !important; } .q-table td { border-color: var(--gf-line) !important; } .q-table tbody tr:hover td { background: var(--gf-tint-2); } /* ---------------------------------------------------------------- misc */ .toast { background: var(--gf-ink); border-radius: 12px; box-shadow: var(--gf-shadow-lg); } .badge { background: var(--gf-tint); color: var(--gf-navy); } .cond-chip { background: var(--gf-tint); color: var(--gf-navy); border-color: #d3def5; } .notice.info { background: var(--gf-tint); border-color: #d3def5; color: var(--gf-navy-700); } .link-button { color: var(--gf-navy); } /* ===================================================================== Stand-alone pages: /dealers, /admin, /register (body.gf-page) ===================================================================== */ .gf-page .btn, .gf-page .ic { background: #fff; border-color: var(--gf-line-strong); color: var(--gf-navy); } .gf-page .btn:hover, .gf-page .ic:hover { background: var(--gf-tint); border-color: var(--gf-navy); } .gf-page .btn.primary, .gf-page button.primary { background: var(--gf-navy); border-color: var(--gf-navy); color: #fff; } .gf-page .btn.primary:hover, .gf-page button.primary:hover { background: var(--gf-navy-700); border-color: var(--gf-navy-700); } .gf-page .btn.danger, .gf-page .ic.danger { color: #b42318; border-color: #f7c7c4; background: #fff; } .gf-page .btn.danger:hover, .gf-page .ic.danger:hover { background: var(--gf-red-tint); } .gf-page .tab { background: #fff; border-color: var(--gf-line-strong); color: var(--gf-ink-soft); } .gf-page .tab:hover { border-color: var(--gf-navy); color: var(--gf-navy); } .gf-page .tab.on { background: var(--gf-navy); border-color: var(--gf-navy); color: #fff; } .gf-page .tab.on .cnt { background: rgb(255 255 255 / 18%); border-color: transparent; color: #fff; } .gf-page .wrap { border-color: var(--gf-line); border-radius: var(--gf-radius); box-shadow: var(--gf-shadow); background: #fff; } .gf-page table.t th { background: var(--gf-tint-2); color: var(--gf-ink-soft); border-bottom: 1px solid var(--gf-line); } .gf-page table.t td { border-bottom-color: #eef1f6; } .gf-page table.t tbody tr:nth-child(odd) td { background: #fff; } .gf-page table.t tbody tr:hover td { background: var(--gf-tint-2); } .gf-page table.t a { color: var(--gf-blue); } .gf-page input, .gf-page select, .gf-page textarea { border-color: var(--gf-line-strong); } .gf-page .adm-toast { background: var(--gf-ink); border-radius: 12px; } /* dealer drawer */ .gf-page .dr-head { background: #fff; color: var(--gf-ink); border-bottom: 1px solid var(--gf-line); } .gf-page .dr-head h2 { color: var(--gf-ink); } .gf-page .dr-head .ds { color: var(--gf-muted); } .gf-page .dr-head .ic { background: #fff; color: var(--gf-ink-soft); } .gf-page .tile { background: #fff; border-color: var(--gf-line); box-shadow: var(--gf-shadow); } .gf-page .tile .tv { color: var(--gf-navy); } .gf-page .dtab.on { color: var(--gf-navy); border-bottom-color: var(--gf-red); } /* ---------------------------------------------------------------- round-2 fixes */ /* group tabs: baseline follows the channel colour (brand navy for End User) */ html[data-channel] #calc-customer + .choice-group, html[data-channel] .mode-tabs { border-bottom-color: var(--ch-a) !important; } /* calculator items list: softer cream */ #view-calculator .summary-panel > .quote-list { background: #fffaf0; border-color: #f2e4c4; } #view-calculator .summary-panel > .quote-list .quote-item { border-color: #f2e4c4; } /* segmented controls (รูปแบบราคา, area method, list/trash) */ .segmented { background: #f2f4f7; border-color: var(--gf-line); } /* admin */ .gf-page table.adm th { background: var(--gf-tint-2); color: var(--gf-ink-soft); border-bottom: 1px solid var(--gf-line); } .gf-page table.adm td { border-bottom-color: #eef1f6; } /* dealer drawer backdrop: lighter, neutral */ .gf-page .ov { background: rgb(16 24 40 / 28%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .gf-page .dr { box-shadow: -12px 0 40px rgb(16 24 40 / 14%); } /* register (public form): brand navy hero, red accent line, solid buttons */ .gf-page .hero { background: radial-gradient(1200px 400px at 50% -120px, #1b3fa6 0%, transparent 60%), linear-gradient(180deg, var(--gf-navy) 0%, var(--gf-navy-900) 100%); } .gf-page .hero::after { height: 3px; background: linear-gradient(90deg, transparent, var(--gf-red), transparent); } .gf-page .hero p { color: #d5def5; } .gf-page .card { border-color: var(--gf-line); box-shadow: var(--gf-shadow); } .gf-page .card h2 { color: var(--gf-ink); } .gf-page .card h2 .no { background: var(--gf-navy); } .gf-page .opts input:checked + span.o { background: var(--gf-navy); box-shadow: 0 6px 16px -6px var(--gf-navy); } .gf-page button.send { background: var(--gf-navy); box-shadow: 0 10px 24px -10px var(--gf-navy); } .gf-page button.send:hover { background: var(--gf-navy-700); } /* ===================================================================== LAYOUT A (18.10.26, owner's pick): navy menu on the left, light canvas, white cards. Used by index.html, /dealers and /admin (same .app-shell markup). ===================================================================== */ html body { background: #f4f6fb; } html body .app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: #f4f6fb; } html body .app-shell > aside.sidebar { position: sticky; top: 0; inset: auto; height: 100vh; width: auto; z-index: 30; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 22px 16px 16px; overflow-y: auto; scrollbar-width: thin; background: linear-gradient(180deg, var(--gf-navy) 0%, var(--gf-navy-900) 100%); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; grid-template-columns: none; } html body .app-shell > aside.sidebar::after { content: none; } .app-shell > aside.sidebar .brand { display: block; padding: 0; margin: 0 8px 24px; } .app-shell > aside.sidebar .brand img { width: 152px; max-height: none; filter: none; } .app-shell > aside.sidebar .nav-label { display: block; margin: 0 12px 6px; font-size: 11px; letter-spacing: .12em; color: #8fa2d8; } .app-shell > aside.sidebar .side-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 0; border: 0; flex: none; justify-content: flex-start; } .app-shell > aside.sidebar .nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: #d7e0f8; font-size: 15px; text-align: left; text-decoration: none; justify-content: flex-start; flex: none; } .app-shell > aside.sidebar .nav-item svg { display: block; flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: rgb(255 255 255 / 8%); color: #c9d4f3; } .app-shell > aside.sidebar .nav-item:hover { background: rgb(255 255 255 / 8%); color: #fff; } .app-shell > aside.sidebar .nav-item.active { background: #fff; color: var(--gf-navy); box-shadow: 0 8px 20px rgb(0 0 0 / 20%); border-radius: 11px; } .app-shell > aside.sidebar .nav-item.active svg { background: var(--gf-red); color: #fff; } /* user card at the bottom of the menu */ .app-shell > aside.sidebar .topbar-meta { display: block; margin: auto 0 0; padding-top: 16px; order: 99; color: #c9d4f3; } .app-shell > aside.sidebar .topbar-meta::before { content: none; } .app-shell > aside.sidebar .auth-box { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 10px 10px 12px; border: 0; border-radius: 14px; background: rgb(255 255 255 / 7%); } .auth-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--gf-navy); font-size: 15px; } .auth-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .app-shell > aside.sidebar .auth-user { color: #fff; font-size: 14px; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-role { color: #8fa2d8; font-size: 12px; } .app-shell > aside.sidebar .auth-logout { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; background: transparent; color: #c9d4f3; border: 0; } .app-shell > aside.sidebar .auth-logout svg { width: 20px; height: 20px; } .app-shell > aside.sidebar .auth-logout:hover { background: rgb(227 30 38 / 85%); color: #fff; } /* content column */ html body .app-shell > .workspace { width: auto; margin: 0; min-width: 0; background: transparent; } html body .workspace > .view { padding: 26px 32px 44px; background: transparent; } .topbar { display: none !important; } .page-heading { margin-bottom: 18px; } .page-heading h1 { font-size: 27px; font-weight: 400; } #view-calculator .page-heading { display: none; } .panel, .summary-panel, .form-panel { border-radius: 18px; } /* KPI cards on the price page */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; } .kpi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--gf-line); border-radius: 16px; box-shadow: 0 1px 2px rgb(16 24 40 / 4%); min-width: 0; } .kpi-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; } .kpi-v { font-size: 22px; line-height: 1.25; color: var(--gf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-l { font-size: 12.5px; color: var(--gf-muted); } .kpi.k-blue .kpi-ic { background: var(--gf-tint); color: var(--gf-navy); } .kpi.k-green .kpi-ic { background: #ecfdf3; color: #067647; } .kpi.k-amber .kpi-ic { background: #fff4e5; color: #b54708; } .kpi.k-red .kpi-ic { background: var(--gf-red-tint); color: var(--gf-red); } /* dealers / admin pages inside the same shell */ .gf-main { display: flex; flex-direction: column; } .gf-head { padding: 26px 32px 4px; } .gf-head h1 { margin: 0; font-size: 27px; font-weight: 400; color: var(--gf-ink); } .gf-head p { margin: 2px 0 0; color: var(--gf-muted); font-size: 14px; } .gf-main > .adm-wrap { padding: 14px 32px 60px; } .gf-page .card, .gf-page section.card { background: #fff; } /* ---------------------------------------------------------------- tablet / phone: menu becomes a navy top bar */ @media (max-width: 960px) { html body .app-shell { display: block; } html body .app-shell > aside.sidebar { position: sticky; top: 0; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; overflow: visible; } .app-shell > aside.sidebar .brand { margin: 0; } .app-shell > aside.sidebar .brand img { width: 104px; } .app-shell > aside.sidebar .nav-label { display: none; } .app-shell > aside.sidebar .side-nav { order: 3; flex: 1 1 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 -14px; padding: 0 14px 2px; } .app-shell > aside.sidebar .side-nav::-webkit-scrollbar { display: none; } .app-shell > aside.sidebar .nav-item { width: auto; flex: none; min-height: 38px; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; gap: 6px; } .app-shell > aside.sidebar .nav-item svg { display: none; } .app-shell > aside.sidebar .nav-item.active { box-shadow: none; } .app-shell > aside.sidebar .topbar-meta { order: 2; flex: none; margin: 0 0 0 auto; padding: 0; display: block !important; text-align: right; } .app-shell > aside.sidebar .auth-box { padding: 4px 4px 4px 4px; background: transparent; gap: 6px; } .app-shell > aside.sidebar .auth-avatar { width: 30px; height: 30px; font-size: 13px; } .app-shell > aside.sidebar .auth-who { display: none; } html body .workspace > .view { padding: 16px 14px 32px; } .page-heading h1 { font-size: 21px; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kpi { padding: 12px; gap: 10px; } .kpi-ic { width: 36px; height: 36px; font-size: 16px; } .kpi-v { font-size: 17px; } .gf-head { padding: 16px 14px 0; } .gf-head h1 { font-size: 21px; } .gf-main > .adm-wrap { padding: 12px 10px 60px; } } @media print { html body .app-shell { display: block; background: #fff; } .kpis { display: none !important; } } /* saved-quotation bar: the status picker never overlaps the number / time text */ .quote-ref > div:first-child { flex: 1 1 auto; min-width: 0; } .quote-ref .qr-status { flex: none; } @media (max-width: 480px) { .quote-ref { flex-wrap: wrap; } .quote-ref .qr-status { margin-left: 0; } } /* ---------------------------------------------------------------- collapsible menu (desktop): icons only (auth-ui.js toggles html.nav-collapsed) */ .app-shell > aside.sidebar .brand .brand-mini { display: none; } .nav-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; margin: 0 0 10px; padding: 6px 10px; border: 0; border-radius: 11px; background: transparent; color: #8fa2d8; font: inherit; font-size: 14px; cursor: pointer; text-align: left; } .nav-toggle svg { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: rgb(255 255 255 / 6%); transition: transform .2s; } .nav-toggle:hover { background: rgb(255 255 255 / 8%); color: #fff; } @media (min-width: 961px) { html body .app-shell { transition: grid-template-columns .2s ease; } html.nav-collapsed body .app-shell { grid-template-columns: 80px minmax(0, 1fr); } html.nav-collapsed .app-shell > aside.sidebar { padding: 18px 12px 14px; overflow-x: hidden; } html.nav-collapsed .app-shell > aside.sidebar .brand { margin: 0 0 22px; } html.nav-collapsed .app-shell > aside.sidebar .brand img { display: none; } html.nav-collapsed .app-shell > aside.sidebar .brand .brand-mini { display: block; width: 44px; height: 44px; margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 12px rgb(0 0 0 / 25%); } html.nav-collapsed .app-shell > aside.sidebar .nav-label { visibility: hidden; height: 0; margin: 0; } html.nav-collapsed .app-shell > aside.sidebar .nav-item { font-size: 0; gap: 0; justify-content: center; padding: 6px; min-height: 48px; } html.nav-collapsed .app-shell > aside.sidebar .nav-item svg { width: 36px; height: 36px; padding: 8px; } html.nav-collapsed .app-shell > aside.sidebar .nav-item.active { box-shadow: 0 6px 16px rgb(0 0 0 / 22%); } html.nav-collapsed .nav-toggle { justify-content: center; padding: 6px; font-size: 0; gap: 0; } html.nav-collapsed .nav-toggle svg { transform: rotate(180deg); } html.nav-collapsed .app-shell > aside.sidebar .auth-box { flex-direction: column; gap: 6px; padding: 8px 4px; } html.nav-collapsed .app-shell > aside.sidebar .auth-who { display: none; } } @media (max-width: 960px) { .nav-toggle, .app-shell > aside.sidebar .brand .brand-mini { display: none !important; } } /* admin: edit history folded by default (
) */ .adm-audit > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; } .adm-audit > summary::-webkit-details-marker { display: none; } .adm-audit > summary h2 { margin: 0 !important; } .adm-audit .adm-count { padding: 1px 10px; border-radius: 999px; background: var(--gf-tint); color: var(--gf-navy); font-size: 12.5px; } .adm-audit .adm-chev { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #f2f4f7; color: var(--gf-ink-soft); transition: transform .2s; } .adm-audit[open] .adm-chev { transform: rotate(180deg); } .adm-audit[open] > summary { margin-bottom: 12px; } /* ---------------------------------------------------------------- price groups as a sub-menu of "ราคาฟิล์ม" (built by auth-ui.js) */ .app-shell > aside.sidebar .sub-nav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 25px; padding-left: 14px; border-left: 1px solid rgb(255 255 255 / 16%); } .sub-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: #c9d4f3; font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; } .sub-item:hover { background: rgb(255 255 255 / 8%); color: #fff; } .sub-item.active { background: rgb(255 255 255 / 14%); color: #fff; } .sub-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #7ea2ff); box-shadow: 0 0 0 3px rgb(255 255 255 / 8%); } .sub-item[data-sub="retail"] { --dot: #7ea2ff; } .sub-item[data-sub="dealer"] { --dot: #b79cff; } .sub-item[data-sub="newchannel"] { --dot: #4fd39a; } /* the big group tabs on the price page are replaced by the sub-menu on a desktop with the full menu */ @media (min-width: 961px) { html:not(.nav-collapsed) #view-prices .mode-tabs { display: none; } html.nav-collapsed .app-shell > aside.sidebar .sub-nav { display: none; } } @media (max-width: 960px) { .app-shell > aside.sidebar .sub-nav { display: none; } } /* menu toggle: icon only, on the logo row (overrides the earlier bottom placement) */ .app-shell > aside.sidebar .brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 24px; } .app-shell > aside.sidebar .brand-row .brand { margin: 0 0 0 8px; } .app-shell > aside.sidebar .brand-row .brand img { width: 140px; } .nav-toggle { flex: none; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; justify-content: center; border-radius: 9px; background: rgb(255 255 255 / 8%); color: #c9d4f3; } .nav-toggle svg { width: 20px; height: 20px; padding: 0; background: none; } .nav-toggle:hover { background: rgb(255 255 255 / 16%); } @media (min-width: 961px) { html.nav-collapsed .app-shell > aside.sidebar .brand-row { flex-direction: column; gap: 12px; margin-bottom: 18px; } html.nav-collapsed .app-shell > aside.sidebar .brand-row .brand { margin: 0; } html.nav-collapsed .nav-toggle { width: 40px; height: 34px; padding: 0; } } @media (max-width: 960px) { .app-shell > aside.sidebar .brand-row { margin: 0; } .app-shell > aside.sidebar .brand-row .brand { margin: 0; } .app-shell > aside.sidebar .brand-row .brand img { width: 104px; } } /* ---------------------------------------------------------------- /products (3M product list, administrators only) */ .pd-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .pd-summary span { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--gf-line); font-size: 13px; color: var(--gf-muted); } .pd-summary b { font-weight: 400; color: var(--gf-ink); font-size: 15px; margin-right: 2px; } .pd-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .pd-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pd-search { height: 40px; width: 320px; max-width: 100%; padding: 4px 14px; border: 1px solid var(--gf-line-strong); border-radius: 10px; font: inherit; font-size: 14px; } .pd-chips { gap: 6px; } .gf-page .tab.warn { border-color: #f6dfae; color: #93600a; background: #fffaf0; } .gf-page .tab.warn.on { background: #b54708; border-color: #b54708; color: #fff; } .pd-table td { height: 44px; } .pd-table tr.pd-group td { height: auto; padding: 14px 12px 6px; background: var(--gf-tint-2) !important; border-bottom: 1px solid var(--gf-line); } .pd-gname { color: var(--gf-navy); font-size: 14.5px; } .pd-gcount { margin-left: 10px; color: var(--gf-muted); font-size: 12px; } .pd-table .sku { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--gf-ink); } .pd-table .pd-model { color: var(--gf-ink); font-size: 14.5px; } .pd-table .pd-note { max-width: 260px; } .pd-table .flag { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; line-height: 20px; } .pd-table .flag.red { background: var(--gf-red-tint); color: #b42318; } .pd-table .flag.amber { background: #fff4e5; color: #b54708; } .pd-table .note-warn { color: #b54708; font-size: 12.5px; } .pd-empty { max-width: 520px; margin: 40px auto; padding: 34px 28px; text-align: center; background: #fff; border: 1px solid var(--gf-line); border-radius: 18px; box-shadow: var(--gf-shadow); } .pd-empty-ic { font-size: 40px; } .pd-empty h2 { margin: 8px 0 4px; font-size: 20px; font-weight: 400; } .pd-empty p { margin: 0 0 18px; color: var(--gf-muted); } .pd-empty-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .pd-ov { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgb(16 24 40 / 32%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .pd-card { width: min(560px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgb(16 24 40 / 22%); overflow: hidden; } .pd-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gf-line); } .pd-card-head h2 { margin: 0; font-size: 18px; font-weight: 400; } .pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px 20px; } .pf { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pf.wide { grid-column: 1 / -1; } .pf .pl { font-size: 13px; color: var(--gf-ink-soft); } .pf input { height: 42px; padding: 4px 12px; border: 1px solid var(--gf-line-strong); border-radius: 10px; font: inherit; font-size: 15px; } .pf .ph { font-size: 12px; color: var(--gf-muted); } .pd-card-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--gf-line); background: #fafbfd; } @media (max-width: 600px) { .pd-grid { grid-template-columns: 1fr; } .pd-search { width: 100%; } .pd-table .pd-note, .pd-table th:nth-child(5), .pd-table td:nth-child(5) { display: none; } } /* /products: compact toolbar — one row (search · count · add) + one row of small series chips */ .pd-bar { gap: 8px; } .pd-search { height: 38px; width: 280px; } .pd-meta { color: var(--gf-muted); font-size: 13px; white-space: nowrap; } .gf-page .pd-bar .btn.primary { height: 38px; } .pd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 6px; padding-bottom: 2px; } .gf-page .pd-chips .tab { height: 30px; padding: 0 10px; font-size: 12.5px; flex: none; } .gf-page .pd-chips .tab .cnt { min-width: 18px; line-height: 16px; font-size: 11px; } .gf-page .pd-row .tab.warn { height: 32px; font-size: 12.5px; } @media (max-width: 600px) { .pd-table th:nth-child(4) { display: none; } } /* /products table: no note column, fixed balanced columns, headers aligned with their content */ .pd-table { table-layout: fixed; } .pd-table .pd-w-sku { width: 30%; } .pd-table .pd-w-model { width: 30%; } .pd-table .pd-w-width { width: 14%; } .pd-table .pd-w-date { width: 14%; } .pd-table .pd-w-acts { width: 12%; } .gf-page .pd-table th.pd-c, .gf-page .pd-table td.pd-c { text-align: center; } .pd-table td, .pd-table th { padding-left: 16px; padding-right: 16px; } .pd-table .pd-note-mini { display: block; font-size: 12px; color: var(--gf-muted); overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .pd-table th:nth-child(4), .pd-table td:nth-child(4) { display: table-cell; } .pd-table .pd-w-sku { width: 38%; } .pd-table .pd-w-model { width: 26%; } .pd-table .pd-w-width { width: 14%; } .pd-table .pd-w-date { display: none; } .pd-table td:nth-child(4) { display: none; } .pd-table .pd-w-acts { width: 22%; } .pd-table td, .pd-table th { padding-left: 10px; padding-right: 8px; } } @media (max-width: 600px) { .pd-table th:nth-child(4), .pd-table td:nth-child(4) { display: none; } .pd-table th:nth-child(5), .pd-table td:nth-child(5) { display: table-cell; } } @media (max-width: 600px) { .pd-table .pd-w-sku { width: 34%; } .pd-table .pd-w-model { width: 26%; } .pd-table .pd-w-width { width: 19%; } .pd-table .pd-w-acts { width: 21%; } .gf-page .pd-table th { white-space: nowrap; overflow: visible; } } /* /products table with the note column back: balanced widths, headers aligned with content */ .pd-table .pd-w-sku { width: 21%; } .pd-table .pd-w-model { width: 19%; } .pd-table .pd-w-width { width: 11%; } .pd-table .pd-w-note { width: 27%; } .pd-table .pd-w-date { width: 11%; } .pd-table .pd-w-acts { width: 11%; } .pd-table td.pd-note { color: var(--gf-ink-soft); font-size: 13.5px; } @media (max-width: 600px) { .pd-table th:nth-child(4), .pd-table td:nth-child(4), .pd-table th:nth-child(5), .pd-table td:nth-child(5) { display: none; } .pd-table th:nth-child(6), .pd-table td:nth-child(6) { display: table-cell; } .pd-table .pd-w-sku { width: 34%; } .pd-table .pd-w-model { width: 26%; } .pd-table .pd-w-width { width: 19%; } .pd-table .pd-w-acts { width: 21%; } } @media (max-width: 600px) { .pd-table .pd-w-sku { width: 34%; } .pd-table .pd-w-model { width: 23%; } .pd-table .pd-w-width { width: 17%; } .pd-table .pd-w-acts { width: 26%; } .pd-table td.acts > * { margin-left: 4px; } } /* page headings on every page: title and its description on one line (wraps on narrow screens) */ .page-heading > div:first-child, .gf-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; } .page-heading > div:first-child > .eyebrow { display: none; } .page-heading h1, .gf-head h1 { margin: 0; line-height: 1.3; } .page-heading > div:first-child > p, .gf-head p, #prices-detail { margin: 0 !important; font-size: 14px; color: var(--gf-muted); } .page-heading .title-line { align-items: center; } .gf-head { padding-bottom: 6px; } /* price page: the announcement date is already in the KPI cards — hiding the copy in the heading frees room so the description fits beside the title */ #view-prices .page-heading { align-items: center; } #view-prices .page-heading > div:first-child { flex: 1 1 auto; min-width: 0; } .page-heading h1, .gf-head h1 { font-size: 25px; } @media (max-width: 960px) { .page-heading h1, .gf-head h1 { font-size: 21px; } } /* left menu is FIXED to the screen on desktop (never scrolls or slides with the page) — owner asked "เมนูให้ fix ไม่ต้องขยับ" */ @media (min-width: 961px) { html body .app-shell { display: block; padding-left: 252px; transition: none; } html body .app-shell > aside.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 252px; height: auto; transition: none; } html.nav-collapsed body .app-shell { padding-left: 80px; } html.nav-collapsed body .app-shell > aside.sidebar { width: 80px; } .nav-toggle svg { transition: none; } } /* ---------------------------------------------------------------- /stock (film stock, administrators only) */ .sub-item .sub-ic { display: none; } .sub-item[data-sub="stock"] { --dot: #ffb547; } @media (min-width: 961px) { html.nav-collapsed .app-shell > aside.sidebar .sub-nav.sub-stock { display: flex; margin: 0; padding: 0; border: 0; } html.nav-collapsed .sub-nav.sub-stock .sub-item { justify-content: center; font-size: 0; gap: 0; min-height: 44px; padding: 4px; } html.nav-collapsed .sub-nav.sub-stock .sub-dot { display: none; } html.nav-collapsed .sub-nav.sub-stock .sub-ic { display: block; width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: rgb(255 255 255 / 6%); color: #ffcf87; } html.nav-collapsed .sub-nav.sub-stock .sub-item.active .sub-ic { background: #fff; color: var(--gf-navy); } } .sk-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid var(--gf-line-strong); } .sk-seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--gf-ink-soft); font: inherit; font-size: 13px; cursor: pointer; } .sk-seg button .cnt { font-size: 11px; color: var(--gf-muted); } .sk-seg button.on { background: var(--gf-navy); color: #fff; } .sk-seg button.on .cnt { color: #c9d4f3; } .sk-table .sk-w-sku { width: 13%; } .sk-table .sk-w-model { width: 13%; } .sk-table .sk-w-width { width: 8%; } .sk-table .sk-w-qty { width: 9%; } .sk-table .sk-w-ord { width: 8%; } .sk-table .sk-w-note { width: 23%; } .sk-table .sk-w-date { width: 9%; } .sk-table .sk-w-acts { width: 17%; } .sk-qty { display: inline-block; min-width: 40px; padding: 2px 10px; border-radius: 999px; background: #ecfdf3; color: #067647; font-size: 15.5px; font-variant-numeric: tabular-nums; } .sk-qty.low { background: #fff4e5; color: #b54708; } .sk-qty.zero { background: var(--gf-red-tint); color: #b42318; } .sk-qty.none { background: #f2f4f7; color: var(--gf-muted); } .sk-ordered { display: inline-block; min-width: 32px; padding: 1px 8px; border-radius: 999px; background: var(--gf-tint); color: var(--gf-navy); font-variant-numeric: tabular-nums; } .gf-page .sk-table td.acts .btn.small { height: 30px; padding: 0 10px; font-size: 12.5px; } .sk-import { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding: 16px 20px; border-radius: 16px; background: linear-gradient(120deg, var(--gf-tint) 0%, #fff 70%); border: 1px solid #d3def5; } .sk-import h2 { margin: 0; font-size: 17px; font-weight: 400; color: var(--gf-navy); } .sk-import-status { margin: 2px 0 0; color: var(--gf-muted); font-size: 13.5px; } /* adjust dialog */ .sk-card .sk-title { color: var(--gf-navy); } .sk-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .sk-kinds button { height: 42px; border: 1px solid var(--gf-line-strong); border-radius: 10px; background: #fff; color: var(--gf-ink-soft); font: inherit; font-size: 14.5px; cursor: pointer; } .sk-kinds button.on { background: var(--gf-navy); border-color: var(--gf-navy); color: #fff; } .sk-preview { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #f6f8fd; color: var(--gf-ink-soft); font-size: 14px; } .sk-preview b { font-weight: 400; font-size: 20px; color: var(--gf-ink); margin-left: 4px; } .sk-preview b.neg { color: #b42318; } .sk-arrow { color: var(--gf-muted); } .sk-sep { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--gf-line-strong); color: var(--gf-muted); font-size: 12.5px; } /* history drawer */ .sk-dr-ov { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: flex-end; background: rgb(16 24 40 / 28%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .sk-dr { width: min(640px, 100%); height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 40px rgb(16 24 40 / 14%); } .sk-dr .pd-card-head h2 { margin: 0; } .sk-dr-body { flex: 1; overflow-y: auto; padding: 16px 20px 30px; } .sk-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; } .sk-sum > div { padding: 10px 12px; border-radius: 12px; background: #f6f8fd; display: flex; flex-direction: column; } .sk-sum span { font-size: 12px; color: var(--gf-muted); } .sk-sum b { font-weight: 400; font-size: 18px; color: var(--gf-ink); } .sk-sum b.pos, .sk-htable .pos { color: #067647; } .sk-sum b.neg, .sk-htable .neg { color: #b42318; } .sk-chart { display: block; width: 100%; height: 120px; margin-bottom: 12px; border-radius: 12px; background: linear-gradient(180deg, #f6f8fd, #fff); } .sk-area { fill: rgb(11 42 134 / 10%); stroke: none; } .sk-line { fill: none; stroke: var(--gf-navy); stroke-width: 1.6; } .sk-htable b { font-weight: 400; } .sk-kind { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; background: #f2f4f7; color: var(--gf-ink-soft); } .sk-kind.k-in { background: #ecfdf3; color: #067647; } .sk-kind.k-out { background: var(--gf-red-tint); color: #b42318; } .sk-kind.k-count { background: var(--gf-tint); color: var(--gf-navy); } .sk-hnote { margin-left: 8px; color: var(--gf-muted); font-size: 12.5px; } .sk-more { text-align: center; margin-top: 10px; } @media (max-width: 760px) { .sk-table th:nth-child(1), .sk-table td:nth-child(1), .sk-table th:nth-child(6), .sk-table td:nth-child(6), .sk-table th:nth-child(7), .sk-table td:nth-child(7) { display: none; } .sk-table .sk-w-model { width: 26%; } .sk-table .sk-w-width { width: 15%; } .sk-table .sk-w-qty { width: 17%; } .sk-table .sk-w-ord { width: 14%; } .sk-table .sk-w-acts { width: 28%; } .gf-page .sk-table td.acts { white-space: normal; } .gf-page .sk-table td.acts .btn.small { margin: 2px 0 2px 4px; } .sk-sum { grid-template-columns: repeat(2, 1fr); } .sk-seg { order: 3; } } @media (max-width: 760px) { .sk-table th:nth-child(4), .sk-table td:nth-child(4) { display: table-cell; } .sk-table th:nth-child(5), .sk-table td:nth-child(5) { display: none; } .sk-table .sk-w-model { width: 30%; } .sk-table .sk-w-width { width: 18%; } .sk-table .sk-w-qty { width: 20%; } .sk-table .sk-w-acts { width: 32%; } } /* /products with the 3M cost column (7 columns) */ .pd-table .pd-w-sku { width: 15%; } .pd-table .pd-w-model { width: 17%; } .pd-table .pd-w-width { width: 9%; } .pd-table .pd-w-cost { width: 12%; } .pd-table .pd-w-note { width: 25%; } .pd-table .pd-w-date { width: 10%; } .pd-table .pd-w-acts { width: 12%; } .gf-page .pd-table th.pd-r, .gf-page .pd-table td.pd-r { text-align: right; font-variant-numeric: tabular-nums; } .pd-3m { padding: 10px 12px; border-radius: 10px; background: #f6f8fd; font-size: 13.5px; color: var(--gf-ink); line-height: 1.5; } .pd-3m .sub { font-size: 12.5px; } @media (max-width: 600px) { .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) th, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) td { display: table-cell; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) th:nth-child(5), .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) td:nth-child(5), .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) th:nth-child(6), .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) td:nth-child(6) { display: none; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) tr.pd-group td { display: table-cell; } .pd-table .pd-w-sku { width: 30%; } .pd-table .pd-w-model { width: 22%; } .pd-table .pd-w-width { width: 12%; } .pd-table .pd-w-cost { width: 0; display: none; } .pd-table .pd-w-acts { width: 24%; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) th:nth-child(4), .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) td:nth-child(4) { display: none; } } .pd-table td.pd-name3m { color: var(--gf-ink-soft); font-size: 13px; } /* /products: 10 columns with roll length + area. Columns are picked by class (pc-*), not position. */ /* narrow data columns get a share, the buttons a fixed 100px, and the official 3M name takes what is left */ .pd-table .pd-w-sku { width: 11.5%; } .pd-table .pd-w-model { width: 8%; } .pd-table .pd-w-width { width: 6%; } .pd-table .pd-w-len { width: 7%; } .pd-table .pd-w-area { width: 9%; } .pd-table .pd-w-name3m { width: auto; } .pd-table .pd-w-cost { width: 9%; } .pd-table .pd-w-note { width: 10.5%; } .pd-table .pd-w-date { width: 7%; } .pd-table .pd-w-acts { width: 100px; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pc-width, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pc-len, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pc-area, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pc-cost, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pc-date { padding-left: 8px; padding-right: 8px; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) td.pc-sku { overflow: hidden; text-overflow: ellipsis; } .pd-len { display: flex; gap: 8px; } .pd-len input { flex: 1; min-width: 0; } .pd-len select { height: 42px; padding: 4px 10px; border: 1px solid var(--gf-line-strong); border-radius: 10px; font: inherit; font-size: 15px; background: #fff; } @media (max-width: 1280px) { /* narrower desktops: drop the note and date so the 3M name keeps its room */ .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pc-note, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pc-date { display: none; } .pd-table .pd-w-sku { width: 14%; } .pd-table .pd-w-model { width: 11%; } .pd-table .pd-w-width { width: 8%; } .pd-table .pd-w-len { width: 10%; } .pd-table .pd-w-area { width: 11%; } .pd-table .pd-w-cost { width: 12%; } .pd-table .pd-w-acts { width: 96px; } } @media (max-width: 600px) { /* phones: SKU · model · width · area · buttons */ .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) thead th, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) tbody tr:not(.pd-group) td { display: none !important; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) thead th.pc-sku, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) tbody tr:not(.pd-group) td.pc-sku, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) thead th.pc-model, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) tbody tr:not(.pd-group) td.pc-model, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) thead th.pc-width, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) tbody tr:not(.pd-group) td.pc-width, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) thead th.pc-area, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) tbody tr:not(.pd-group) td.pc-area, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) thead th.pc-acts, .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) tbody tr:not(.pd-group) td.pc-acts { display: table-cell !important; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pd-w-sku { width: 26% !important; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pd-w-model { width: 18% !important; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pd-w-width { width: 11% !important; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pd-w-area { width: 22% !important; } .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) .pd-w-acts { width: 23% !important; } .gf-page .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) thead th { white-space: normal; line-height: 1.3; vertical-align: bottom; } .gf-page .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) td.acts { padding-left: 4px; padding-right: 6px; } .gf-page .pd-table:not(.sk-table):not(.pu-table):not(.ct-table):not(.mg-table) td.acts > * { margin-left: 2px; } } /* /purchases — 3M purchase history (admin) */ .sub-item[data-sub="purchases"] { --dot: #5ec8f0; } .pu-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .pu-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--gf-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 4%); border-left: 4px solid var(--gf-navy); } .pu-card.plan { border-left-color: #2e90fa; } .pu-card.over { border-left-color: var(--gf-red); } .pu-card.ok { border-left-color: #12b76a; } .pu-card .pu-cl { font-size: 13px; color: var(--gf-muted); } .pu-card b { font-weight: 400; font-size: 22px; color: var(--gf-ink); font-variant-numeric: tabular-nums; } .pu-card.over b { color: #b42318; } .pu-card .pu-cs { font-size: 12.5px; color: var(--gf-muted); } .pu-chips .tab { padding: 4px 12px; } .pu-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; line-height: 20px; white-space: nowrap; } .pu-pill.paid { background: #ecfdf3; color: #067647; } .pu-pill.plan { background: #eff8ff; color: #175cd3; } .pu-pill.due { background: #f2f4f7; color: #475467; } .pu-pill.over { background: var(--gf-red-tint); color: #b42318; } .pu-table { table-layout: fixed; } .pu-table .pu-w-date { width: 7%; } .pu-table .pu-w-po { width: 10%; } .pu-table .pu-w-inv { width: 9%; } .pu-table .pu-w-sku { width: 9%; } .pu-table .pu-w-prod { width: auto; } .pu-table .pu-w-unit { width: 8%; } .pu-table .pu-w-psf { width: 6%; } .pu-table .pu-w-qty { width: 6%; } .pu-table .pu-w-amt { width: 9%; } .pu-table .pu-w-due { width: 7%; } .pu-table .pu-w-st { width: 12%; } .gf-page .pu-table th.pd-r, .gf-page .pu-table td.pd-r { text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 1280px) { .gf-page .pu-table th.qc-po, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-po, .gf-page .pu-table th.qc-inv, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-inv { display: none; } } .pu-table td.qc-sku .sku { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--gf-ink); } .pu-table td.qc-po, .pu-table td.qc-inv { color: var(--gf-ink-soft); font-size: 13.5px; font-variant-numeric: tabular-nums; } .pu-table td.pu-prod { min-width: 0; } .pu-table td.pu-prod .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gf-ink); } .pu-table td.pu-prod .sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pu-table td { height: auto; padding-top: 9px; padding-bottom: 9px; } /* overview */ .pu-ov { display: grid; grid-template-columns: 1.6fr 1.3fr 1fr; gap: 12px; margin-bottom: 14px; } .pu-panel { border: 1px solid var(--gf-line); border-radius: 14px; background: #fff; padding: 12px 16px; min-width: 0; } .pu-panel h3 { margin: 0 0 10px; font-size: 14px; font-weight: 400; color: var(--gf-ink-soft); } .pu-chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; } .pu-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; } .pu-barv { width: 70%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--gf-navy); } .pu-col.now .pu-barv { background: var(--gf-red); } /* this month */ .pu-val { font-size: 11px; color: var(--gf-muted); } .pu-mon { font-size: 11.5px; color: var(--gf-muted); white-space: nowrap; display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .pu-mon small { font-size: 10px; color: #98a2b3; } .pu-rounds, .pu-top { list-style: none; margin: 0; padding: 0; } .pu-rounds li { display: grid; white-space: nowrap; grid-template-columns: 76px 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--gf-line); font-size: 13.5px; } .pu-rounds b, .pu-top b { font-weight: 400; font-variant-numeric: tabular-nums; } .pu-top li { display: grid; grid-template-columns: 1fr 60px 28px; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; } .pu-top .cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pu-tbar { height: 8px; border-radius: 4px; background: #eef2fa; overflow: hidden; } .pu-tbar i { display: block; height: 100%; background: #2e90fa; } @media (max-width: 1100px) { .pu-ov { grid-template-columns: 1fr 1fr; } .pu-ov .wide { grid-column: 1 / -1; } } @media (max-width: 760px) { .pu-sum { grid-template-columns: repeat(2, 1fr); } .pu-card b { font-size: 18px; } .pu-ov { grid-template-columns: 1fr; } .pu-chart { gap: 3px; } .pu-val { display: none; } .pu-mon { font-size: 10px; } .gf-page .pu-table th.qc-po, .gf-page .pu-table th.qc-inv, .gf-page .pu-table th.qc-due, .gf-page .pu-table th.qc-unit, .gf-page .pu-table th.qc-psf, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-unit, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-psf, .gf-page .pu-table th.qc-date, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-date, .gf-page .pu-table th.qc-sku, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-sku, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-po, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-inv, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-due { display: none; } /* phones: date · product · rolls · amount */ .gf-page .pu-table th.qc-st, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-st, .gf-page .pu-table th.qc-prod, .gf-page .pu-table th.qc-qty, .gf-page .pu-table th.qc-amt, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-prod, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-qty, .gf-page .pu-table tbody tr:not(.pd-group) td.qc-amt { display: table-cell; } .pu-table .pu-w-prod { width: 34%; } .pu-table .pu-w-qty { width: 12%; } .pu-table .pu-w-amt { width: 24%; } .pu-table .pu-w-st { width: 30%; } .pu-pill { white-space: normal; } } /* conditions page: each price group card carries its own price image (moved from the old "แหล่งข้อมูล" section) */ .cond-group { display: flex; flex-direction: column; } .cond-group .cond-sources { display: block; margin-top: auto; padding-top: 12px; } .cond-group .cond-sources a { display: block; } .cond-group .cond-sources span { font-weight: 400; } .cond-section > #source-file { margin: -4px 0 12px; } .sk-missing { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff8eb; color: #93370d; font-size: 13px; } /* /purchases: quarters vs target (from "-สรุปยอดสั่งซื้อ-") */ .pu-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pu-qi { padding-bottom: 8px; border-bottom: 1px solid var(--gf-line); } .pu-qi:last-child { border-bottom: 0; padding-bottom: 0; } .pu-qh { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; } .pu-qh b { font-weight: 400; color: var(--gf-navy); font-size: 15px; } .pu-qa { font-variant-numeric: tabular-nums; color: var(--gf-ink); } .pu-qp { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gf-ink-soft); } .pu-qbar { height: 8px; margin: 6px 0 4px; border-radius: 4px; background: #eef2fa; overflow: hidden; } .pu-qbar i { display: block; height: 100%; background: var(--gf-navy); border-radius: 4px; } .pu-qi.hit .pu-qbar i { background: #12b76a; } .pu-qi.hit .pu-qp { color: #067647; } .pu-qi.miss .pu-qbar i { background: var(--gf-red); } .pu-qi.miss .pu-qp { color: #b42318; } .pu-qi.future { opacity: .55; } .pu-qm, .pu-qt { font-size: 12px; line-height: 1.5; } /* /purchases overview: three panels of equal height, nothing left empty */ .pu-ov { align-items: stretch; } .pu-panel { display: flex; flex-direction: column; } .pu-panel.wide .pu-chart { flex: 1; height: auto; min-height: 200px; padding-top: 8px; } .pu-barv { width: 62%; max-width: 46px; } .pu-top { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .pu-top li { grid-template-columns: minmax(0, 1fr) 72px 30px; padding: 4px 0; } .pu-top b { text-align: right; } .pu-q .pu-qs { flex: 1; justify-content: space-between; } /* /costs — cost prices (admin) */ .sub-item[data-sub="costs"] { --dot: #7ad7a0; } .ct-table { table-layout: fixed; } .ct-table .ct-w-sku { width: 10%; } .ct-table .ct-w-model { width: 11%; } .ct-table .ct-w-w { width: 7%; } .ct-table .ct-w-stock { width: 7%; } .ct-table .ct-w-cost { width: 10%; } .ct-table .ct-w-psf { width: 8%; } .ct-table .ct-w-last { width: 9%; } .ct-table .ct-w-lots { width: auto; } .ct-table .ct-w-acts { width: 110px; } .gf-page .ct-table th.pd-r, .gf-page .ct-table td.pd-r { text-align: right; font-variant-numeric: tabular-nums; } .ct-table td { height: auto; padding-top: 9px; padding-bottom: 9px; vertical-align: middle; } .ct-table .sku { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--gf-ink); } .ct-table td.ct-model { color: var(--gf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-psf { display: block; font-size: 11.5px; color: var(--gf-muted); } .gf-page .ct-table td.ct-lots { line-height: 1.9; white-space: normal; overflow: hidden; } .ct-lot { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 10px; border-radius: 999px; background: #eff8ff; color: #175cd3; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .ct-lot b { font-weight: 400; color: var(--gf-navy); } .ct-lot small { color: #528bff; font-size: 11.5px; } .ct-lot.unknown { background: #f2f4f7; color: #475467; } .ct-lot.unknown b { color: #344054; } .sk-sum > div > span + b + span { font-size: 11.5px; color: var(--gf-muted); } .ct-dot { fill: #fff; stroke: var(--gf-navy); stroke-width: 2; } .ct-dot.on { fill: var(--gf-red); stroke: var(--gf-red); } .sk-htable tr.ct-in td { background: #fff8f8; } .ct-note { margin-top: 10px; font-size: 12px; } @media (max-width: 1100px) { .ct-table .ct-w-last, .ct-table td.ct-last { display: none; } } @media (max-width: 760px) { .gf-page .ct-table th.ct-w-sku, .gf-page .ct-table td.ct-sku, .gf-page .ct-table th.ct-w-w, .gf-page .ct-table td.ct-w { display: none; } .gf-page .ct-table th.ct-w-lots, .gf-page .ct-table td.ct-lots { display: none; } .ct-table .ct-w-model { width: 30%; } .ct-table .ct-w-cost { width: 26%; } .ct-table .ct-w-psf { width: 24%; } .ct-table .ct-w-stock { width: 20%; } .ct-table .ct-w-acts { width: 0; } .gf-page .ct-table th.ct-w-acts, .gf-page .ct-table td.ct-acts { display: none; } .ct-table tbody tr:not(.pd-group) { cursor: pointer; } } @media (max-width: 760px) { /* phones: model · cost per roll · per sq ft · stock (tap a row for the history) */ .gf-page .ct-table th.ct-w-model, .gf-page .ct-table th.ct-w-cost, .gf-page .ct-table th.ct-w-psf, .gf-page .ct-table th.ct-w-stock, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-model, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-cost, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-psfc, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-stock { display: table-cell; } .gf-page .ct-table th.ct-w-last, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-last { display: none; } } /* /purchases cards: tinted backgrounds so the money still owed stands out (over due darker) */ .pu-card.over { background: #fde4e1; border-color: #f8b4ad; } .pu-card.over .pu-cl, .pu-card.over .pu-cs { color: #912018; } .pu-card.over b { color: #b42318; } .pu-card.plan { background: #eaf4ff; border-color: #b9dcff; } .pu-card.plan .pu-cl, .pu-card.plan .pu-cs { color: #1849a9; } .ct-lot.back { background: #fff6e5; color: #93370d; } .ct-lot.back b { color: #7a2e0e; } .ct-h3 { margin: 18px 0 8px; font-size: 14px; font-weight: 400; color: var(--gf-ink-soft); } @media (max-width: 1500px) and (min-width: 761px) { /* notebooks: 12 columns need tighter spacing */ .gf-page .pu-table th, .gf-page .pu-table td { padding-left: 7px; padding-right: 7px; font-size: 13px; } .pu-table .pu-w-st { width: 14%; } .pu-table .pu-w-po { width: 10.5%; } .pu-table .pu-pill { font-size: 11.5px; padding: 1px 8px; } } .ct-unlisted { margin: -4px 0 14px; line-height: 1.6; } .ct-unlisted a { color: var(--gf-navy); } /* /purchases (owner's choice): over due = dark red, still unpaid = light red */ .pu-card.over { background: #b42318; border-color: #b42318; border-left-color: #7a271a; } .pu-card.over .pu-cl, .pu-card.over .pu-cs { color: #fee4e2; } .pu-card.over b { color: #fff; } .pu-card.unpaid { background: #fde4e1; border-color: #f8b4ad; border-left-color: #f04438; } .pu-card.unpaid .pu-cl, .pu-card.unpaid .pu-cs { color: #912018; } .pu-card.unpaid b { color: #b42318; } /* /products: average cost per area after the cost column */ .pd-table .pd-w-psa { width: 7%; } .pd-table td.pc-psa { font-variant-numeric: tabular-nums; color: var(--gf-ink-soft); font-size: 13px; } @media (max-width: 1280px) { .pd-table .pd-w-psa { width: 9%; } } .pd-table .pd-w-psa { width: 9%; } .gf-page .pd-table td.pc-psa { overflow: hidden; text-overflow: ellipsis; padding-right: 14px; } .pd-table td.pc-psa small { font-size: 11px; } @media (max-width: 1500px) { .pd-table .pd-w-psa { width: 10%; } .pd-table .pd-w-note { width: 8%; } } /* /costs: structure price (per roll · per sq ft) then cost = latest purchase (per roll · per sq ft) */ .ct-table .ct-w-cost { width: 9%; } .ct-table .ct-w-psf { width: 7%; } .ct-table .ct-w-last { width: 9%; } .ct-table .ct-w-lpsf { width: 7%; } .ct-table .ct-w-stock { width: 6%; } .ct-table .ct-w-sku { width: 9%; } .ct-table .ct-w-model { width: 9%; } .ct-table .ct-w-w { width: 6%; } @media (max-width: 1100px) { .ct-table .ct-w-lpsf, .ct-table td.ct-lpsf { display: none; } .ct-table .ct-w-last, .ct-table td.ct-last { display: table-cell; } } @media (max-width: 760px) { .gf-page .ct-table th.ct-w-lpsf, .gf-page .ct-table td.ct-lpsf, .gf-page .ct-table th.ct-w-last, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-last { display: none; } } .gf-page .ct-table thead th { white-space: normal; line-height: 1.3; vertical-align: bottom; } /* /costs: structure price | cost (price paid) — divider lines and light group tints; blue when the cost is below the structure price */ .gf-page .ct-table th.ct-w-cost, .gf-page .ct-table td.ct-cost { border-left: 2px solid var(--gf-line-strong); } .gf-page .ct-table th.ct-w-last, .gf-page .ct-table td.ct-last { border-left: 2px solid var(--gf-line-strong); } .gf-page .ct-table th.ct-w-stock, .gf-page .ct-table td.ct-stock { border-left: 2px solid var(--gf-line-strong); } .gf-page .ct-table tbody tr:not(.pd-group) td.ct-cost, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-psfc { background: #f8f9fc; } .gf-page .ct-table thead th.ct-w-cost, .gf-page .ct-table thead th.ct-w-psf { background: #eef1f7; } .gf-page .ct-table thead th.ct-w-last, .gf-page .ct-table thead th.ct-w-lpsf { background: #eaf2ff; color: #1849a9; } .gf-page .ct-table td.ct-cheaper { color: #175cd3; background: #f2f7ff; } /* /costs price history: every lot that still has rolls in stock is tinted (stronger than the table's zebra rows) */ .gf-page table.t.sk-htable tbody tr.ct-in td { background: #fff1f0; } .gf-page table.t.sk-htable tbody tr.ct-in td:last-child b { color: #b42318; } .ct-legend { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; background: #fff1f0; border: 1px solid #fecdca; vertical-align: -1px; } /* /costs price-history panel: wider, summary boxes a little darker */ .sk-dr.ct-dr { width: min(820px, 100%); } .ct-dr .sk-sum { gap: 10px; } .ct-dr .sk-sum > div { background: #e6ecf7; border: 1px solid #d5deee; padding: 12px 14px; } .ct-dr .sk-sum > div > span:first-child { white-space: nowrap; color: #475467; } @media (max-width: 760px) { .ct-dr .sk-sum > div > span:first-child { white-space: normal; } } /* /costs: stock value = darker blue than the back-order card */ .pu-card.value { background: #175cd3; border-color: #175cd3; border-left-color: #0b2a86; } .pu-card.value .pu-cl, .pu-card.value .pu-cs { color: #d1e9ff; } .pu-card.value b { color: #fff; } .gf-page .ct-table td.ct-dearer { color: #b42318; background: #fff4f3; } /* owner: no tint on the structure-price columns (lines stay) */ .gf-page .ct-table tbody tr:not(.pd-group) td.ct-cost, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-psfc { background: transparent; } .gf-page .ct-table thead th.ct-w-cost, .gf-page .ct-table thead th.ct-w-psf { background: transparent; } /* owner: no background colours in the cost table — divider lines and blue / red numbers only */ .gf-page .ct-table thead th.ct-w-last, .gf-page .ct-table thead th.ct-w-lpsf { background: transparent; color: inherit; } .gf-page .ct-table td.ct-cheaper, .gf-page .ct-table td.ct-dearer { background: transparent; } /* /costs: % difference from the structure price, after the cost per sq ft */ .ct-table .ct-w-diff { width: 6%; } .ct-table .ct-w-lots { width: auto; } .gf-page .ct-table td.ct-diff { font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .gf-page .ct-table th.ct-w-diff, .gf-page .ct-table td.ct-diff { display: table-cell; } } @media (max-width: 760px) { .gf-page .ct-table th.ct-w-diff, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-diff { display: none; } } /* cost table header: one colour across the whole row (no group tints) */ .gf-page .ct-table thead th.ct-w-cost, .gf-page .ct-table thead th.ct-w-psf, .gf-page .ct-table thead th.ct-w-last, .gf-page .ct-table thead th.ct-w-lpsf { background: var(--gf-tint-2); color: var(--gf-ink-soft); } /* /costs: structure-price columns folded by default (button "แสดงราคาโครงสร้าง") */ .gf-page .ct-table.ct-folded th.ct-w-cost, .gf-page .ct-table.ct-folded th.ct-w-psf, .gf-page .ct-table.ct-folded tbody tr:not(.pd-group) td.ct-cost, .gf-page .ct-table.ct-folded tbody tr:not(.pd-group) td.ct-psfc { display: none; } .ct-fold-btn { padding: 4px 12px; font-size: 13px; } .ct-fold-btn.on { background: var(--gf-tint-2); } @media (max-width: 760px) { /* phones, folded: model · cost per roll · per sq ft · stock */ .gf-page .ct-table.ct-folded th.ct-w-last, .gf-page .ct-table.ct-folded tbody tr:not(.pd-group) td.ct-last, .gf-page .ct-table.ct-folded th.ct-w-lpsf, .gf-page .ct-table.ct-folded tbody tr:not(.pd-group) td.ct-lpsf { display: table-cell; } .ct-table.ct-folded .ct-w-last { width: 26%; } .ct-table.ct-folded .ct-w-lpsf { width: 24%; } } .gf-page .ct-table { width: 100%; } @media (min-width: 761px) { .ct-table.ct-folded .ct-w-last { width: 11%; } .ct-table.ct-folded .ct-w-lpsf { width: 9%; } .ct-table.ct-folded .ct-w-diff { width: 8%; } .ct-table.ct-folded .ct-w-model { width: 11%; } } /* ===== /costs table widths (final set, 19.10.26): balanced and compact; later than every earlier .ct-* width rule ===== */ .gf-page .ct-table { width: 100%; table-layout: fixed; } .gf-page .ct-table .ct-w-acts { width: 104px; } .gf-page .ct-table .ct-w-lots { width: auto; } /* structure price open (11 columns) */ .gf-page .ct-table .ct-w-sku { width: 10%; } .gf-page .ct-table .ct-w-model { width: 9%; } .gf-page .ct-table .ct-w-w { width: 5%; } .gf-page .ct-table .ct-w-cost { width: 8%; } .gf-page .ct-table .ct-w-psf { width: 6.5%; } .gf-page .ct-table .ct-w-last { width: 8%; } .gf-page .ct-table .ct-w-lpsf { width: 6.5%; } .gf-page .ct-table .ct-w-diff { width: 6.5%; } .gf-page .ct-table .ct-w-stock { width: 5.5%; } /* folded (9 columns) */ .gf-page .ct-table.ct-folded .ct-w-sku { width: 11%; } .gf-page .ct-table.ct-folded .ct-w-model { width: 11%; } .gf-page .ct-table.ct-folded .ct-w-w { width: 6%; } .gf-page .ct-table.ct-folded .ct-w-last { width: 9%; } .gf-page .ct-table.ct-folded .ct-w-lpsf { width: 7.5%; } .gf-page .ct-table.ct-folded .ct-w-diff { width: 7.5%; } .gf-page .ct-table.ct-folded .ct-w-stock { width: 6%; } .gf-page .ct-table th, .gf-page .ct-table td { padding-left: 10px; padding-right: 10px; } .gf-page .ct-table td.ct-w, .gf-page .ct-table th.ct-w-w, .gf-page .ct-table td.ct-stock, .gf-page .ct-table th.ct-w-stock { text-align: center; } @media (max-width: 1100px) { /* tablets: SKU and the cost per sq ft step back; auto layout so hidden columns take no room */ .gf-page .ct-table { table-layout: auto; } .gf-page .ct-table th.ct-w-sku, .gf-page .ct-table tbody tr:not(.pd-group) td.ct-sku { display: none; } .gf-page .ct-table th, .gf-page .ct-table td { padding-left: 7px; padding-right: 7px; } } @media (max-width: 760px) { /* phones */ .gf-page .ct-table.ct-folded .ct-w-model { width: 34%; } .gf-page .ct-table.ct-folded .ct-w-last { width: 24%; } .gf-page .ct-table.ct-folded .ct-w-lpsf { width: 22%; } .gf-page .ct-table.ct-folded .ct-w-stock { width: 20%; } .gf-page .ct-table:not(.ct-folded) .ct-w-model { width: 30%; } .gf-page .ct-table:not(.ct-folded) .ct-w-cost { width: 26%; } .gf-page .ct-table:not(.ct-folded) .ct-w-psf { width: 22%; } .gf-page .ct-table:not(.ct-folded) .ct-w-stock { width: 22%; } } /* ---- new Dealer registrations: red count on the menu item (auth-ui.js) ---- */ .app-shell > aside.sidebar .nav-item { position: relative; } .app-shell > aside.sidebar .nav-item .nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--gf-red); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px rgb(255 255 255 / 22%); animation: gfBadgeIn .3s ease-out; } .app-shell > aside.sidebar .nav-item.active .nav-badge { box-shadow: none; } @keyframes gfBadgeIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 960px) { .app-shell > aside.sidebar .nav-item .nav-badge { margin-left: 4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; } } @media (min-width: 961px) { html.nav-collapsed .app-shell > aside.sidebar .nav-item .nav-badge { position: absolute; top: 3px; right: 6px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; } } /* ---------------------------------------------------------------- phone / tablet menu (19.10.26): top bar with "☰ เมนู" + slide-in drawer auth-ui.js adds .m-menu to the logo row and toggles html.mnav-open. Closed: only the bar (menu button + logo). Open: the same