/* DAS Inventory — styles */ @font-face { font-family: 'Fraunces'; font-weight: 400; font-display: swap; src: url(../fonts/fraunces-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url(../fonts/fraunces-latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); } :root { --ground: #F6F3EE; --surface: #FFFFFF; --surface-2: #F8F5F1; --tint: #F2EEE8; --line: #E3DCD2; --line-soft: #F0EBE4; --field: #D6CDC1; --ink: #1F1C1A; --ink-2: #3A332E; --text-2: #5A534C; --text-3: #6E665E; --plum: #6B2E4E; --plum-dark: #4E1F38; --plum-tint: #F3E9EE; --plum-soft: #FBF6F9; --night: #221E1B; --night-2: #3A332E; --good-bg: #E4F1EA; --good: #245A40; --info-bg: #E6EEF8; --info: #2B5790; --warn-bg: #FBEFD9; --warn: #7A420C; --bad-bg: #F7E3E3; --bad: #8A2E2E; --radius: 14px; --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'Fraunces', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.45 var(--sans); } a { color: var(--plum); } a:hover { color: var(--plum-dark); } img { max-width: 100%; } h1, h2, h3 { margin: 0; } h1 { font: 400 32px/1.15 var(--serif); letter-spacing: -0.01em; } h2 { font-size: 16px; font-weight: 600; } h3 { font-size: 14px; font-weight: 600; } p { margin: 0 0 10px; } code, .mono { font-family: var(--mono); } .sku { font-family: var(--mono); font-weight: 500; letter-spacing: 0.03em; white-space: nowrap; } .muted { color: var(--text-3); } .small { font-size: 13px; } .tiny { font-size: 12px; } .nowrap { white-space: nowrap; } .right { text-align: right; } .center { text-align: center; } .hidden, [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ic { flex-shrink: 0; } /* Shell */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: var(--night); color: #D9D2C8; display: flex; flex-direction: column; padding: 24px 14px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; flex-direction: column; padding: 0 10px 18px; } .brand-name { font: 400 28px/1 var(--serif); color: #fff; letter-spacing: 0.06em; } .brand-sub { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-text3, #A89F94); margin-top: 4px; } .nav-section { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-text3, #8F867B); padding: 16px 10px 6px; } .nav-group { margin: 0; } .nav-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 8px; padding: 12px 10px 8px; user-select: none; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary:hover { color: #D9D2C8; } .nav-group > summary .ic { transition: transform 0.15s ease; transform: rotate(-90deg); } .nav-group[open] > summary .ic { transform: none; } .nav-group > summary:focus-visible { outline: 2px solid var(--chart-4, #C98BAA); outline-offset: -2px; } .app-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 40px; padding: 16px 0 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); } .bare .app-foot { justify-content: center; margin-top: 28px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #D9D2C8; text-decoration: none; font-size: 14px; min-height: 38px; } .nav-link:hover { background: #2E2925; color: #fff; } .nav-link.is-active { background: var(--night-2); color: #fff; } .nav-link.is-active .ic { color: var(--nav-active-ic, #F3D9E6); } .nav-link .ic { color: var(--d-text3, #A89F94); } .nav-link.is-soon { color: var(--d-text3, #7E766C); cursor: default; } .nav-link.is-soon:hover { background: transparent; } .nav-link.is-soon .ic { color: var(--d-text2, #5E574F); } .nav-link em { margin-left: auto; font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px; border: 1px solid #4A433C; color: var(--d-text3, #8F867B); } .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-top: 1px solid var(--night-2); text-decoration: none; color: #fff; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--plum); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .me-text { display: flex; flex-direction: column; min-width: 0; } .me-text strong { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-text small { font-size: 12px; color: var(--d-text3, #A89F94); } .main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } .main { padding: 28px 36px 60px; max-width: 1400px; width: 100%; } .topbar { display: none; } .scrim { display: none; } /* Page head */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-head .eyebrow { display: block; font-size: 13px; color: var(--text-3); margin-bottom: 4px; } .page-head p { color: var(--text-2); margin: 6px 0 0; max-width: 760px; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .main > .card + .card, .main > form + .card, .main > .card + form { margin-top: 16px; } .card.flush { padding: 0; overflow: hidden; } .card.narrow { max-width: 560px; } .card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .card-head.pad { padding: 16px 20px 0; } .grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; } .split-r { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .stack { display: flex; flex-direction: column; gap: 16px; } .row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .kpi { display: flex; flex-direction: column; gap: 6px; } .kpi .v { font: 400 36px/1 var(--serif); } .kpi .l { font-size: 13px; color: var(--text-2); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); font: 500 14px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--surface-2); color: var(--ink); } .btn-primary { background: var(--plum); border-color: var(--plum); color: #fff; } .btn-primary:hover { background: var(--plum-dark); border-color: var(--plum-dark); color: #fff; } .btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; } .btn-ghost { border-color: transparent; background: transparent; } .btn-danger { color: var(--bad); } .btn-sm { height: 32px; padding: 0 10px; font-size: 13px; } .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; } .btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; } .icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; } .link-btn { background: none; border: 0; padding: 0; color: var(--plum); font: inherit; cursor: pointer; text-decoration: underline; } /* Forms */ .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .form-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .span2 { grid-column: span 2; } .span-all { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field > label, .field > .label { font-size: 12.5px; color: var(--text-2); } .field .hint { font-size: 12px; color: var(--text-3); } .req::after { content: ' *'; color: var(--plum); } input:not([type]), input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=search], select, textarea { width: 100%; height: 42px; border: 1px solid var(--field); border-radius: 8px; padding: 0 12px; font: 15px var(--sans); color: var(--ink); background: var(--surface); } textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; } input:focus, select:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; } input.code-input { font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } input[readonly] { background: var(--surface-2); } .check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--plum); } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } .error-text { color: var(--bad); font-size: 13px; } /* Segmented control / tabs */ .seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--d-bgsoft, #EDE7DF); border-radius: 10px; flex-wrap: wrap; } .seg button, .seg a, .seg label { height: 34px; padding: 0 14px; border-radius: 7px; border: 0; background: transparent; color: var(--ink-2); font: 500 13.5px var(--sans); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; } .seg .is-on, .seg input:checked + span { background: var(--surface, #fff); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(31, 28, 26, 0.12); } .seg label { padding: 0; } .seg label span { height: 34px; padding: 0 14px; border-radius: 7px; display: inline-flex; align-items: center; } .seg input { position: absolute; opacity: 0; pointer-events: none; } /* Chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--field); background: var(--surface, #fff); color: var(--ink); font: 500 13.5px var(--sans); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .chip .code { font: 500 11px var(--mono); opacity: 0.7; } .chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; } .chip.add { border-style: dashed; color: var(--plum); } .swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #CFC6BA; display: inline-block; flex-shrink: 0; } .swatch.lg { width: 24px; height: 24px; } /* Badges */ .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; background: var(--tint); color: var(--ink-2); white-space: nowrap; } .badge.good { background: var(--good-bg); color: var(--good); } .badge.info { background: var(--info-bg); color: var(--info); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.plum { background: var(--plum-tint); color: var(--plum); } .codetag { font: 500 12px var(--mono); padding: 2px 6px; border-radius: 5px; background: var(--tint); color: var(--ink-2); letter-spacing: 0.06em; } /* Tables */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--d-ink, #4A433C); background: var(--tint); padding: 10px 14px; white-space: nowrap; } .tbl td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: middle; } .tbl tr.is-off td { color: var(--text-3); } .tbl tr:hover td { background: var(--d-bgsoft, #FCFAF8); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; } .thumb { width: 44px; height: 52px; border-radius: 8px; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: #B0A597; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb.lg { width: 100%; height: auto; aspect-ratio: 4/5; border-radius: 12px; } .thumb.lg:not(:has(img)) { aspect-ratio: auto; height: 180px; } .cell-title { display: flex; align-items: center; gap: 12px; } .cell-title .t { display: flex; flex-direction: column; min-width: 0; } .cell-title .t small { color: var(--text-3); font-size: 12.5px; } /* Filters */ .filters { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 14px; } .pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--line-soft); } /* Flash */ .flash { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; background: var(--info-bg); color: var(--info); } .flash-success { background: var(--good-bg); color: var(--good); } .flash-error { background: var(--bad-bg); color: var(--bad); } .flash-warn { background: var(--warn-bg); color: var(--warn); } .flash-x { background: none; border: 0; font-size: 20px; color: inherit; cursor: pointer; line-height: 1; } .note { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--text-2); line-height: 1.5; } .note.warn { background: var(--warn-bg); color: var(--warn); } /* Side list (attributes, roles) */ .side-list { display: flex; flex-direction: column; gap: 3px; } .side-list a { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; color: var(--ink); text-decoration: none; font-size: 14px; } .side-list a:hover { background: var(--surface, #fff); } .side-list a.is-on { background: var(--surface, #fff); border-color: var(--field); font-weight: 600; } .side-list a small { color: var(--text-3); font-weight: 400; font-size: 12px; } .side-label { font-size: 12px; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 12px 6px; } /* SKU preview */ .sku-panel { background: var(--night); color: #fff; border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .sku-panel .lbl { font-size: 12px; color: var(--d-text3, #A89F94); letter-spacing: 0.06em; text-transform: uppercase; } .sku-slots { display: flex; gap: 4px; flex-wrap: wrap; font: 500 15px var(--mono); } .sku-slots span { padding: 3px 5px; border-radius: 5px; background: var(--night-2); } .sku-slots span.empty { color: var(--d-text3, #8F867B); } .sku-big { font: 500 24px var(--mono); letter-spacing: 0.08em; color: var(--cx-soft, #F3D9E6); word-break: break-all; } .slot-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 36px; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); } .slot-row.off { background: var(--surface-2); color: var(--text-3); } .slot-n { width: 24px; height: 24px; border-radius: 50%; background: var(--tint); font-size: 11px; font-weight: 600; color: var(--d-ink, #4A433C); display: inline-flex; align-items: center; justify-content: center; } /* Combo (type to search / add to master) */ .combo { position: relative; } .combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface, #fff); border: 1px solid var(--field); border-radius: 10px; box-shadow: 0 10px 28px rgba(31, 28, 26, 0.16); padding: 6px; z-index: 30; max-height: 280px; overflow-y: auto; min-width: 240px; } .combo-list button { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font: 14px var(--sans); color: var(--ink); text-align: left; cursor: pointer; } .combo-list button:hover, .combo-list button.is-hi { background: var(--tint); } .combo-list button.add { color: var(--plum); font-weight: 500; background: var(--plum-tint); margin-top: 4px; } .combo-list .code { margin-left: auto; font: 500 12px var(--mono); color: var(--text-3); } .combo-empty { padding: 8px 10px; font-size: 13px; color: var(--text-3); } /* Modal */ .modal { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; } .modal-box { background: var(--surface, #fff); border-radius: 16px; width: 100%; max-width: 460px; padding: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); max-height: 90vh; overflow-y: auto; } .modal-box h2 { margin-bottom: 12px; font-size: 18px; } /* Colour tool */ .pick-img { position: relative; border-radius: 10px; overflow: hidden; background: var(--tint); cursor: crosshair; } .pick-img canvas { display: block; width: 100%; height: auto; } .pick-dot { position: absolute; width: 22px; height: 22px; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); pointer-events: none; } .colour-preview { width: 100%; height: 60px; border-radius: 10px; border: 1px solid var(--line); } /* Tree */ .tree-cat { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; } .tree-cat.is-on, .tree-sub.is-on { background: var(--plum-tint); } .tree-sub { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px 0 34px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; } .tree-cat:hover, .tree-sub:hover { background: var(--surface-2); } /* Permission grid */ .perm { width: 100%; border-collapse: collapse; font-size: 14px; } .perm th { font-size: 12px; font-weight: 600; color: var(--d-ink, #4A433C); background: var(--tint); padding: 10px 8px; text-align: center; } .perm th:first-child { text-align: left; padding-left: 16px; } .perm td { border-top: 1px solid var(--line-soft); padding: 8px; text-align: center; } .perm td:first-child { text-align: left; padding-left: 16px; } .perm input { width: 18px; height: 18px; accent-color: var(--plum); } .perm .na { color: #C4BBAF; } /* Product card (QR page) */ .pcard { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; } .kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; font-size: 14px; } .kv dt { color: var(--text-3); } .kv dd { margin: 0; } .codes-box { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .codes-box svg, .codes-box canvas { max-width: 100%; } /* Scanner */ .scanner { max-width: 520px; } #reader { width: 100%; border-radius: 14px; overflow: hidden; background: #111; min-height: 280px; } #reader video { object-fit: cover; } /* Bare pages (login) */ body.bare { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--night); padding: 20px; } .bare-main { width: 100%; max-width: 400px; } .bare-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; color: #fff; } .bare-brand .brand-name { font-size: 40px; } .bare-main .card { padding: 26px; } /* Empty state */ .empty { text-align: center; padding: 40px 20px; color: var(--text-2); } .empty .ic { color: #BDB2A4; margin-bottom: 8px; } /* Layout helpers */ .split-narrow { grid-template-columns: 220px minmax(0, 1fr); } .with-photo { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; } .with-side-left { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } .chip-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; } .chip-label { padding-top: 9px; color: var(--text-2); } .ref-grid { display: flex; flex-wrap: wrap; gap: 8px; } .ref-item { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 5px 4px 10px; background: var(--surface, #fff); font-size: 14px; } .ref-item .ref-code { display: inline-flex; align-items: center; gap: 3px; } .ref-item .code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text-2); } .ref-grid input.ref-in, .ref-table input.ref-in { width: 64px; min-width: 0; flex: 0 0 64px; height: 32px; text-align: center; padding: 0 4px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.08em; } .ref-in[readonly] { background: var(--line-soft); color: var(--text-2); } .ref-table td { vertical-align: middle; } .filters-3 { grid-template-columns: 2fr 1fr auto; } .filters-events { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr auto; } /* Print */ @media print { .sidebar, .topbar, .no-print, .flash { display: none !important; } body { background: #fff; } .main { padding: 0; max-width: none; } .card { border: 0; padding: 0; } .tbl th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .tbl td, .tbl th { padding: 6px 8px; font-size: 11px; } .thumb { width: 36px; height: 44px; } a { color: inherit; text-decoration: none; } } /* Responsive */ @media (max-width: 1100px) { .filters { grid-template-columns: 1fr 1fr 1fr; } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split-r { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform 0.2s ease; width: 270px; } body.nav-open .sidebar { transform: none; } body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 50; } .topbar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 40; background: var(--night); color: #fff; padding: 6px 8px; padding-top: calc(6px + env(safe-area-inset-top)); } .topbar-brand { font: 400 22px var(--serif); letter-spacing: 0.06em; } .main { padding: 18px 16px 60px; } h1 { font-size: 26px; } .split, .pcard, .g2, .g3 { grid-template-columns: minmax(0, 1fr); } .filters { grid-template-columns: 1fr 1fr; } .filters .f-search { grid-column: 1 / -1; } .form-grid, .form-grid.c3 { grid-template-columns: minmax(0, 1fr); } .form-grid.c2 { grid-template-columns: minmax(0, 1fr); } .span2 { grid-column: auto; } .kv { grid-template-columns: 110px minmax(0, 1fr); } .page-head { align-items: flex-start; } .hide-sm { display: none !important; } .split-narrow, .with-photo, .with-side-left, .chip-row, .filters-3 { grid-template-columns: minmax(0, 1fr); } .filters-events { grid-template-columns: 1fr 1fr; } .split-r > .card:last-child:not(:first-child) { order: -1; } /* edit form above the list on phones */ .with-photo > .stack { order: -1; } .with-photo .thumb.lg { max-height: 220px; } .chip-label { padding-top: 0; font-weight: 600; } .chip { height: 40px; } .card { padding: 16px; } } /* Photo tiles (v1.1) */ .photo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .photo-tile { display: flex; flex-direction: column; gap: 6px; border-radius: 12px; } .photo-tile.is-over .photo-box, .photo-drop.is-over { outline: 3px dashed var(--plum); outline-offset: 2px; } .photo-box { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--tint); border: 1.5px dashed #CFC6BA; overflow: hidden; cursor: pointer; color: var(--text-3); } .photo-tile.has .photo-box { border-style: solid; border-color: var(--line); } .photo-box img { width: 100%; height: 100%; object-fit: cover; } .photo-box:hover { border-color: var(--plum); } .photo-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; } .photo-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; } .photo-meta strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .photo-progress { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.7); overflow: hidden; } .photo-progress span { display: block; height: 100%; width: 0; background: var(--plum); transition: width 0.2s; } .is-busy img { opacity: 0.6; } .photo-drop { position: relative; } .dropzone { border: 2px dashed #CFC6BA; border-radius: 14px; background: var(--surface); padding: 34px 20px; text-align: center; color: var(--text-2); cursor: pointer; } .dropzone.is-over { border-color: var(--plum); background: var(--plum-soft); } .dropzone strong { color: var(--ink); font-size: 16px; } .bar-mini { height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; min-width: 80px; } .bar-mini span { display: block; height: 100%; width: 0; background: var(--plum); transition: width 0.2s; } @media (max-width: 860px) { .photo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #bulkLayout { grid-template-columns: minmax(0, 1fr) !important; } } /* ---------- Stock documents (v2.0) ---------- */ .inline { display: inline; margin: 0; } .neg { color: var(--bad); font-weight: 600; } .pos { color: var(--info); font-weight: 600; } .doc-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .doc-title .mono { font: 500 0.82em var(--mono); letter-spacing: 0.02em; } .filters-docs { grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr auto; } .doc-head summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; } .doc-head summary::-webkit-details-marker { display: none; } .doc-head[open] summary .link-btn { visibility: hidden; } .scan-card { position: relative; border: 1.5px solid var(--plum); box-shadow: 0 0 0 4px var(--plum-soft); } .scan-row { display: flex; gap: 8px; align-items: center; } .scan-row input { flex: 1; min-width: 0; height: 52px; font-size: 17px; font-family: var(--mono); padding-left: 44px; } .scan-row input::placeholder { font-family: var(--sans); letter-spacing: 0; } .scan-ic { position: absolute; margin-left: 13px; color: var(--plum); display: flex; pointer-events: none; } .scan-row .btn { height: 52px; } .btn.is-on { background: var(--plum); border-color: var(--plum); color: #fff; } .doc-reader { margin-top: 12px; border-radius: 12px; overflow: hidden; max-width: 460px; } .doc-reader video { border-radius: 12px; } .scan-msg { margin-top: 10px; font-size: 14px; line-height: 1.45; min-height: 1px; } .scan-msg:empty { margin: 0; } .scan-msg.ok { padding: 10px 12px; border-radius: 10px; background: var(--good-bg); color: var(--good); } .scan-msg.warn { padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); } .scan-msg.bad { padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); } .scan-results { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-height: 380px; overflow-y: auto; background: var(--surface, #fff); } .scan-results .res { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; background: var(--surface, #fff); border: 0; border-top: 1px solid var(--line-soft); text-align: left; font: inherit; color: inherit; cursor: pointer; } .scan-results .res:first-child { border-top: 0; } .scan-results .res:hover, .scan-results .res.is-hi { background: var(--plum-soft); } .scan-results .res .t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .scan-results .res strong { font-weight: 500; } .scan-results .res small { color: var(--text-2); } .scan-results .av { display: flex; flex-direction: column; align-items: flex-end; font: 600 16px var(--sans); } .scan-results .av small { font: 400 11px var(--sans); color: var(--text-3); } .lines-tbl .cell-title .t { display: flex; flex-direction: column; min-width: 0; } .lines-tbl .cell-title .t small { color: var(--text-2); } .lines-tbl tr.is-diff td { background: var(--cx-soft-2, #FDF6F3); } .lines-tbl tr.is-ok td:last-child { color: var(--good); font-weight: 600; } .lines-tbl tr.is-todo td { color: var(--text-2); } .lines-tbl tr.flash-row td { background: var(--plum-tint) !important; transition: background 0.2s; } .lines-tbl .date-in { height: 36px; width: 150px; font-size: 13px; } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--field); border-radius: 10px; overflow: hidden; background: var(--surface, #fff); } .stepper .st-btn { width: 38px; height: 40px; border: 0; background: var(--surface-2); font: 500 20px/1 var(--sans); color: var(--ink); cursor: pointer; } .stepper .st-btn:active { background: var(--plum-tint); } .stepper .qty-in { width: 62px; height: 40px; border: 0; border-radius: 0; text-align: center; font: 600 16px var(--sans); padding: 0 4px; -moz-appearance: textfield; } .stepper .qty-in::-webkit-outer-spin-button, .stepper .qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .action-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 5; padding: 12px 14px; background: rgba(246, 243, 238, 0.94); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 14px; } .count-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px; background: var(--night); color: #fff; } .count-banner strong { display: block; font: 400 20px var(--serif); } .count-banner span { font-size: 13px; opacity: 0.85; } .count-banner .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); } .handover { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .steps { display: flex; gap: 6px; flex-wrap: wrap; } .step { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--tint); color: var(--text-2); font-size: 13.5px; font-weight: 500; } .step small { font-weight: 400; margin-left: 4px; opacity: 0.85; } .step.done { background: var(--good-bg); color: var(--good); } .step.now { background: var(--plum); color: #fff; } .tl-item { padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; } .tl-item:first-of-type { border-top: 0; } .kv-tight { grid-template-columns: 110px minmax(0, 1fr); font-size: 13.5px; gap: 6px 12px; } .res-select { margin-top: 6px; height: 36px; font-size: 13px; max-width: 100%; border-color: var(--bad); } @media (max-width: 1100px) { .filters-docs { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 860px) { .filters-docs { grid-template-columns: 1fr 1fr; } .scan-row input { height: 56px; font-size: 16px; } .scan-row .btn { height: 56px; padding: 0 14px; } .lines-tbl td, .lines-tbl th { padding: 8px 8px; } .lines-tbl .thumb { display: none; } .lines-tbl td, .lines-tbl th { padding: 8px 6px; } .lines-tbl td:first-child { padding-left: 12px; } .lines-tbl .cell-title .t strong { font-size: 13.5px; } .stepper .st-btn { width: 34px; height: 44px; } .stepper .qty-in { width: 44px; height: 44px; font-size: 15px; } .lines-tbl .icon-btn.rm { width: 32px; } .handover { flex-direction: column; align-items: stretch; } .handover .btn-lg { width: 100%; justify-content: center; } .action-bar { position: static; } .action-bar > div { width: 100%; } .action-bar #postForm, .action-bar #postBtn { width: 100%; justify-content: center; } .count-banner { flex-direction: column; align-items: flex-start; } } .filters-stock { grid-template-columns: 2fr repeat(7, minmax(0, 1fr)); } .stock-tbl .col-total { font-weight: 600; background: var(--surface-2); } .stock-tbl tr.is-low td:first-child { box-shadow: inset 3px 0 0 var(--bad); } .stock-tbl .cell-title .t { display: flex; flex-direction: column; min-width: 0; } .stock-tbl .cell-title .t small { color: var(--text-2); } a.kpi:hover { border-color: var(--plum); } @media (max-width: 1100px) { .filters-stock { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 860px) { .filters-stock { grid-template-columns: 1fr 1fr; } .kpis .kpi .v { font-size: 28px; } } .kpis a.kpi { text-decoration: none; color: inherit; } .todo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; font-weight: 500; } .todo-row:first-of-type { border-top: 0; } .todo-row:hover { color: var(--plum); } .bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 12px; align-items: center; padding: 6px 0; color: inherit; text-decoration: none; } .bar-row .bar { height: 14px; background: var(--tint); border-radius: 4px; overflow: hidden; } .bar-row .bar span { display: block; height: 14px; border-radius: 4px; background: var(--cx-accent, #8A4A6B); } @media (max-width: 860px) { .bar-row { grid-template-columns: 110px minmax(0, 1fr) 56px; } } .stock-tbl th.num { white-space: normal; min-width: 64px; max-width: 110px; line-height: 1.25; vertical-align: bottom; } .stock-tbl td.num, .stock-tbl th.num { padding-left: 8px; padding-right: 10px; } .stock-tbl td:first-child { min-width: 230px; } .check-row { display: flex; gap: 10px 22px; flex-wrap: wrap; } a.chip { text-decoration: none; } .show-sm { display: none; } @media (max-width: 860px) { .show-sm { display: block; } } /* v2.1 — pick from stock, comments */ .picker { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); overflow: hidden; } .picker-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 0; } .picker-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; padding: 10px 14px; } .picker-filters input, .picker-filters select { height: 40px; } .picker-list { max-height: 460px; overflow-y: auto; border-top: 1px solid var(--line-soft); } .pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line-soft); } .pick-row:first-child { border-top: 0; } .pick-row.is-on { background: var(--plum-soft); } .pick-row .t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pick-row .t strong { font-weight: 500; } .pick-row .t small { color: var(--text-2); } .pick-row .av { display: flex; flex-direction: column; align-items: flex-end; font: 600 16px var(--sans); min-width: 56px; } .pick-row .av small { font: 400 11px var(--sans); color: var(--text-3); } .picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); } .res-note { margin-top: 6px; height: 36px; font-size: 13px; width: 100%; max-width: 360px; display: block; } .dispute { white-space: normal; color: var(--bad); } .summary-row { cursor: pointer; } @media (max-width: 860px) { .picker-filters { grid-template-columns: 1fr 1fr; } .picker-filters input { grid-column: 1 / -1; } .pick-row { gap: 8px; padding: 8px 10px; flex-wrap: wrap; } .pick-row .thumb { display: none; } .pick-row .t { flex-basis: calc(100% - 70px); } .pick-row .stepper { margin-left: auto; } .picker-list { max-height: 60vh; } } .filters-stock { grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); } .ms { position: relative; } .ms-sum { list-style: none; height: 42px; display: flex; align-items: center; padding: 0 30px 0 12px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; font-size: 15px; } .ms-sum::-webkit-details-marker { display: none; } .ms-sum::after { content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); } .ms-sum.is-set { border-color: var(--plum); background: var(--plum-soft); color: var(--plum); font-weight: 600; } .ms-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 200px; max-height: 320px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); padding: 8px 12px 0; display: flex; flex-direction: column; gap: 4px; } .ms-list .check { padding: 5px 0; gap: 8px; } .ms-foot { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; background: var(--surface, #fff); border-top: 1px solid var(--line-soft); margin-top: 4px; } .stock-tbl tfoot td { background: var(--tint); border-top: 2px solid var(--line); } @media (max-width: 1100px) { .filters-stock { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 860px) { .filters-stock { grid-template-columns: 1fr 1fr; } .ms-list { min-width: 170px; } } .g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .period-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .period-row .seg a { text-decoration: none; } @media (max-width: 1100px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .g5 { grid-template-columns: 1fr 1fr; } .period-row { justify-content: flex-start; } .period-row .seg a { padding: 0 10px; } } body.picking .action-bar { position: static; } .cam-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 10px; } .cam-state { font-size: 14px; font-weight: 500; } .cam-state.ready { color: var(--good); } .cam-state.done { color: var(--plum); } .cam-wait { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); } .cam-wait select { height: 38px; width: auto; } #nextScan { height: 48px; padding: 0 24px; font-size: 16px; } @media (max-width: 860px) { #nextScan { width: 100%; justify-content: center; height: 56px; } } .danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-color: #EBC9C9; } .drag { cursor: grab; touch-action: none; color: var(--text-3); width: 34px; padding-right: 0 !important; user-select: none; } .drag span { display: inline-flex; width: 28px; height: 32px; align-items: center; justify-content: center; border-radius: 6px; font-size: 18px; letter-spacing: -2px; } .drag:hover span { background: var(--tint); color: var(--ink); } tr.is-dragging { background: var(--surface, #fff); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); display: table; table-layout: fixed; } tr.is-dragging td { background: var(--surface, #fff) !important; } tr.drag-ph td { background: var(--plum-soft) !important; border: 2px dashed var(--plum); } body.is-sorting { user-select: none; cursor: grabbing; } .sku-name-form { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; } .period-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; } .period-bar .seg a { text-decoration: none; } .period-custom { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px; border-radius: 10px; } .period-custom input[type=date] { height: 36px; width: 150px; font-size: 14px; } .period-custom.is-on { background: var(--plum-tint); } @media (max-width: 860px) { .period-bar .seg a { padding: 0 10px; } .period-custom input[type=date] { width: 138px; } } .period-row .period-bar { margin: 0; } .stock-tbl .col-sub { background: var(--surface-2); color: var(--ink-2); font-weight: 500; } /* Labels (v3.0) */ .label-sources { display: flex; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; } .label-sources select { height: 38px; width: auto; max-width: 280px; font-size: 14px; } .label-preview { position: relative; width: 100%; aspect-ratio: calc(var(--w) / var(--h)); background: var(--tint); border-radius: 10px; overflow: hidden; border: 1px solid var(--line); } .label-preview iframe { position: absolute; top: 0; left: 0; border: 0; width: calc(var(--w) * 96px); height: calc(var(--h) * 96px); transform-origin: 0 0; pointer-events: none; background: var(--surface, #fff); } .logo-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .logo-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface, #fff); } .logo-opt input { position: absolute; opacity: 0; pointer-events: none; } .logo-opt.is-on { border-color: var(--plum); box-shadow: 0 0 0 3px var(--plum-soft); } .logo-opt:focus-within { outline: 2px solid var(--plum); outline-offset: 2px; } .logo-box { height: 46px; display: flex; align-items: center; justify-content: center; background: var(--surface, #fff); border-radius: 8px; } .logo-box img { max-height: 42px; max-width: 100%; object-fit: contain; } .logo-box.none { font: 600 13px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); background: var(--surface-2); } .logo-meta { display: flex; flex-direction: column; min-width: 0; } .logo-meta strong { font-weight: 600; font-size: 13.5px; } .logo-meta small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .logo-card { display: flex; flex-direction: column; gap: 10px; } .logo-card.is-off { opacity: 0.6; } .logo-card .btn { align-self: flex-start; } .logo-frame { height: 110px; display: flex; align-items: center; justify-content: center; background: var(--surface, #fff); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; } .logo-frame img { max-height: 100%; max-width: 100%; object-fit: contain; } .logo-info { display: flex; flex-direction: column; gap: 2px; } .brand-logo { display: inline-flex; align-items: center; background: var(--surface, #fff); border-radius: 10px; padding: 6px 10px; max-width: 100%; } .brand-logo img { max-height: 44px; max-width: 190px; object-fit: contain; display: block; } .topbar-logo { display: inline-flex; background: var(--surface, #fff); border-radius: 8px; padding: 3px 8px; } .topbar-logo img { max-height: 28px; max-width: 150px; object-fit: contain; display: block; } .print-logo { max-height: 42px; max-width: 200px; object-fit: contain; display: block; margin-bottom: 6px; } /* ---------- Phase 4: events & counts ---------- */ .section-title { font: 400 20px var(--serif); margin: 6px 0 10px; } .note.good { background: var(--good-bg); color: var(--good); } .ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 22px; } .ev-card { display: flex; flex-direction: column; gap: 10px; } .ev-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .ev-name { font: 400 19px/1.2 var(--serif); color: var(--ink); text-decoration: none; } .ev-name:hover { color: var(--plum); } .ev-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .ev-nums .v { display: block; font: 400 24px/1.1 var(--serif); } .ev-nums .l { font-size: 11.5px; color: var(--text-3); } .ev-actions { display: flex; flex-wrap: wrap; gap: 8px; } .ev-actions .btn-primary { flex: 1 1 auto; justify-content: center; } .count-filter { padding: 0 20px 12px; gap: 6px; } .count-filter .chip { height: 34px; padding: 0 12px; } .ev-kpis { margin-bottom: 14px; } .ev-kpis .kpi .v { font-size: 30px; } .ev-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .ev-opt { display: inline-flex; } .ev-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ev-opt span { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--field); background: var(--surface, #fff); font-size: 13px; cursor: pointer; } .ev-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; } .ev-opt.ev-missing input:checked + span { background: var(--bad); border-color: var(--bad); } .ev-opt.ev-sold input:checked + span { background: var(--good); border-color: var(--good); } .ev-opt input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 1px; } .ev-choice .res-note { height: 34px; font-size: 13px; flex: 1 1 160px; min-width: 0; max-width: 280px; } .ev-tbl tr.is-short td { background: var(--cx-soft-2, #FDF6F3); } .ev-tbl tr.is-extra td { background: var(--plum-soft); } .ev-all { flex-wrap: wrap; } .ev-all-lines summary { cursor: pointer; list-style: none; padding: 14px 20px; } .ev-days tr.is-today td { background: var(--plum-soft); } .ev-days .bar { display: block; height: 10px; border-radius: 5px; background: var(--tint); overflow: hidden; } .ev-days .bar span { display: block; height: 10px; background: var(--plum); border-radius: 5px; } .input-sm { height: 34px; font-size: 13px; max-width: 180px; } @media (max-width: 720px) { .ev-cards { grid-template-columns: minmax(0, 1fr); } .ev-nums .v { font-size: 21px; } .ev-choice .res-note { max-width: none; flex-basis: 100%; } .count-filter { padding: 0 14px 10px; } .ev-kpis .kpi .v { font-size: 26px; } } /* ---------- Phase 5: CEO overview (design A · Ivory & Plum) ---------- */ .ov { display: flex; flex-direction: column; gap: 20px; } .ov-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .ov-head h1 { margin: 2px 0 0; } .ov-h1-sub { font: 400 17px var(--sans); color: var(--text-2); } .ov-period .period-bar { margin: 0; } .ov-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .ov-tile { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; min-width: 0; } a.ov-tile:hover { color: var(--ink); border-color: var(--d-line, #CDBFB0); box-shadow: 0 6px 22px rgba(34, 30, 27, 0.07); } .ov-tile.static { gap: 8px; } .ov-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); } .ov-more { font-size: 13px; color: var(--plum); white-space: nowrap; } .ov-big { font: 400 46px/1 var(--serif); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ov-big small { font: 400 15px var(--sans); color: var(--text-2); } .ov-sub { font-size: 13px; color: var(--text-2); } .good-text { color: var(--good) !important; } .bad-text { color: var(--bad) !important; } .warn-text { color: var(--warn) !important; } .ov-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; flex: none; } .ov-key.round { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .ov-stack { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface); } .ov-stack > span { min-width: 3px; } .ov-stack.tall { height: 22px; border-radius: 8px; } .ov-stack.thin { height: 10px; border-radius: 4px; } .ov-stack > span.is-hover, .ov-col.is-hover .ov-col-bar { filter: brightness(1.12); } .ov-legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .ov-legend > div { display: flex; justify-content: space-between; gap: 10px; } .ov-legend strong { font-weight: 600; } .ov-indent { padding-left: 18px; } .ov-legend-inline { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); } .ov-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-2); } .ov-evrow { display: flex; flex-direction: column; gap: 5px; font-size: 13px; } .ov-evrow > div { display: flex; justify-content: space-between; gap: 10px; } .ov-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ov-meter { display: block; height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; flex: 1 1 auto; } .ov-meter > span { display: block; height: 100%; background: var(--cx-accent, #8B3D66); border-radius: 3px; } .ov-meter.dark { background: #3A332E; } .ov-meter.dark > span { background: #C9A87A; } .ov-spark { width: 100%; height: 56px; display: block; overflow: visible; } .ov-row2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; } .ov-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .ov-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ov-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); min-width: 0; color: var(--ink); } a.ov-card { text-decoration: none; } a.ov-card:hover { color: var(--ink); border-color: var(--d-line, #CDBFB0); } .ov-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .ov-card-head h2 { margin: 0; font: 400 21px var(--serif); } .ov-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; } .ov-card-head .muted { font: 400 13px var(--sans); } .ov-dark { background: var(--night); border-color: var(--night); color: #F6F3EE; } .ov-dark .ov-card-head a { color: #D9C19E; font-size: 13px; } .ov-dim { color: #C9BFB4; } .ov-ev { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid #3A332E; color: #F6F3EE; text-decoration: none; } .ov-ev:hover { color: #FFFFFF; } .ov-ev-top { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; } .ov-ev-top .ov-dim { font-size: 12px; white-space: nowrap; } .ov-ev-bar { display: flex; align-items: center; gap: 10px; } .ov-ev-bar .small { min-width: 36px; text-align: right; } /* column chart */ .ov-cols-wrap, .ov-line-wrap { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; height: 230px; } .ov-yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 11px; color: var(--text-3); padding: 14px 0 0; transform: translateY(6px); } .ov-cols { position: relative; display: flex; align-items: flex-end; gap: 8px; padding-top: 20px; border-bottom: 1px solid var(--field); } .ov-cols.dense { gap: 3px; } .ov-grid { position: absolute; inset: 20px 0 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .ov-grid span { border-top: 1px solid var(--line-soft); } .ov-grid span:last-child { border-top: 0; } .ov-col { position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; outline-offset: 2px; min-width: 0; } .ov-col-val { font-size: 11px; color: var(--text-2); margin-bottom: 4px; white-space: nowrap; } .ov-cols.dense .ov-col-val { display: none; } .ov-col-bar { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; overflow: hidden; } .ov-col-bar > span { min-height: 2px; } .ov-xlabels { display: flex; gap: 8px; padding-left: 52px; font-size: 11px; color: var(--text-3); } .ov-xlabels > span { flex: 1 1 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-xlabels.spread { justify-content: space-between; } .ov-xlabels.spread > span { flex: 0 0 auto; } .ov-line { position: relative; border-bottom: 1px solid var(--field); padding-top: 20px; } .ov-line svg { position: absolute; left: 0; right: 0; bottom: 0; top: 20px; width: 100%; height: calc(100% - 20px); overflow: visible; } .ov-table-toggle summary { cursor: pointer; font-size: 12px; color: var(--text-2); } .ov-table-toggle .tbl { margin-top: 8px; } /* horizontal bars and rows */ .ov-hbar { display: grid; grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; } .ov-hbar.wide { grid-template-columns: minmax(120px, 42%) minmax(0, 1fr) 64px; } .ov-hbar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-hbar strong { text-align: right; font-weight: 600; } .ov-hbar-track { height: 10px; border-radius: 5px; background: var(--tint); overflow: hidden; } .ov-hbar-track > span { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; } .ov-best { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--ink); text-decoration: none; } .ov-best .t { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .ov-best small { color: var(--text-3); } .ov-best strong { font-weight: 600; } .ov-att { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--ink); text-decoration: none; } .ov-att:last-child { border-bottom: 0; } a.ov-att:hover span:first-child { color: var(--plum); } .ov-att strong { font-weight: 600; white-space: nowrap; } .ov-age-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; font-size: 13px; } .ov-age-keys > div { display: flex; flex-direction: column; gap: 2px; } .ov-age-keys strong { font: 400 22px var(--serif); padding-left: 18px; } .ov-age-tbl .ov-stack { background: var(--tint); } .ov-tip { position: fixed; z-index: 90; max-width: 280px; padding: 8px 11px; border-radius: 8px; background: var(--night); color: #F6F3EE; font-size: 12.5px; line-height: 1.4; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); } [data-tip] { cursor: default; } a [data-tip], a[data-tip] { cursor: pointer; } /* v5.14.0: channels, event ranking, calendar */ .ov-cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; } .ov-big small.cur { font-size: 18px; color: var(--ink); align-self: flex-start; margin-top: 6px; } .ov-rank td:nth-child(2) a { font-weight: 500; } .ov-ch { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; } .ov-ch-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .ov-ch-top strong { font-weight: 600; } .ov-ch-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; } .ov-rank td { vertical-align: top; } .ov-rank-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); font-size: 12px; font-weight: 600; } .ov-rank-no.first { background: var(--cx-accent, #8B3D66); color: #fff; } .ov-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .ov-cal-dn { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; } .ov-cal-day { min-height: 74px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; background: var(--surface); } .ov-cal-day.is-past { opacity: .55; } .ov-cal-day.is-today { border-color: var(--cx-accent, #8B3D66); box-shadow: inset 0 0 0 1px var(--cx-accent, #8B3D66); } .ov-cal-day .n { font-size: 11px; color: var(--text-2); } .ov-cal-ev { display: block; font-size: 11px; line-height: 1.25; padding: 2px 5px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-cal-ev.run { background: var(--cx-accent, #8B3D66); color: #fff; } .ov-cal-ev.plan { background: var(--cal-plan, #EADBC4); color: var(--cal-plan-ink, #4A3A22); } @media (max-width: 640px) { .ov-cal { gap: 2px; } .ov-cal-day { min-height: 46px; padding: 3px; } .ov-cal-ev { font-size: 0; height: 5px; padding: 0; } } @media (max-width: 1180px) { .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .ov-row2, .ov-grid2, .ov-row3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .ov { gap: 14px; } .ov-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ov-tile, .ov-card { padding: 18px; border-radius: 16px; } .ov-big { font-size: 40px; } .ov-cols-wrap, .ov-line-wrap { grid-template-columns: 34px minmax(0, 1fr); height: 190px; } .ov-cols { gap: 4px; } .ov-col-val { display: none; } .ov-xlabels { padding-left: 42px; gap: 4px; font-size: 10px; overflow: hidden; } .ov-xlabels:not(.spread) > span { overflow: visible; text-overflow: clip; } .ov-xlabels:not(.spread) > span:not(:nth-child(3n+1)) { visibility: hidden; } .ov-age-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-age-keys strong { font-size: 18px; } } @media print { .ov-tile, .ov-card { break-inside: avoid; box-shadow: none; } .ov-dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ov-stack, .ov-col-bar, .ov-hbar-track, .ov-key, .ov-meter { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .deliver-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .deliver-form input[type=date] { height: 44px; flex: 1 1 140px; } .bulk-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; } .bulk-bar input[type=date] { height: 40px; } /* ---------- v5.2.0 website items → DAS SKU ---------- */ .wm-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .wm-summary .kpi .v { font-size: 30px; } .wm-search { margin-left: auto; } .wm-search input { height: 38px; width: 280px; max-width: 100%; } .wm-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .wm-head { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.15fr); gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); } .wm-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.15fr); gap: 12px; align-items: start; padding: 14px 18px; border-top: 1px solid var(--line-soft); } .wm-list > .wm-row:first-child, .wm-head + .wm-row { border-top: 0; } .wm-row.is-done { background: var(--surface-2); } .wm-row.just-done { background: var(--good-bg); transition: background 1.2s; } .wm-web { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .wm-web strong { font-weight: 600; } .wm-det { font-size: 13.5px; color: var(--ink-2); } .wm-tag { align-self: flex-start; font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); background: var(--warn-bg); padding: 2px 7px; border-radius: 6px; } .wm-row.is-done .wm-tag { color: var(--text-3); background: var(--tint); } .wm-qty { color: var(--ink); font-size: 13px; } .wm-wait { color: var(--warn); font-weight: 500; } .wm-row.is-done .wm-wait { color: var(--good); } .wm-arrow { color: var(--text-3); font-size: 20px; padding-top: 16px; text-align: center; } .wm-right { min-width: 0; } .wm-das { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; } .wm-das[hidden] { display: none; } .wm-das .t strong { font-weight: 500; } .wm-das .t small { overflow-wrap: anywhere; } .wm-box { display: flex; gap: 8px; } .wm-box input { flex: 1; min-width: 0; height: 44px; font-size: 15px; } .wm-cam { height: 44px; width: 48px; padding: 0; justify-content: center; } .wm-cam.is-on { background: var(--ink); color: #fff; border-color: var(--ink); } .wm-reader { margin-top: 8px; border-radius: 12px; overflow: hidden; max-width: 420px; } .wm-res { position: relative; z-index: 5; box-shadow: 0 10px 24px rgba(31, 28, 26, .10); max-height: 330px; } .wm-hint { padding: 8px 12px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--line-soft); } .wm-order.needs { border: 1px solid #E9C98F; box-shadow: 0 0 0 3px var(--warn-bg); } .wm-list-order .wm-row { padding: 12px 0; } .wm-list-order .wm-row.is-done { background: none; } @media (max-width: 860px) { .wm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-head { display: none; } .wm-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; } .wm-arrow { display: none; } .wm-search { margin-left: 0; width: 100%; } .wm-search input { width: 100%; } } @media (max-width: 860px) { .wm-das { grid-template-columns: auto minmax(0, 1fr); } .wm-das > .link-btn, .wm-das > form { grid-column: 2; justify-self: start; } } .wm-skipf { margin-top: 6px; } .wm-skipf .link-btn { color: var(--text-3); font-size: 12.5px; text-decoration-color: var(--field); } .wm-skipped { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; } /* Loan-out */ .chip.chip-bad { border-color: #E3B7B7; color: var(--bad); } .chip.chip-bad.is-on { background: var(--bad); color: #fff; border-color: var(--bad); } /* Samples */ .sample-box { border: 1px dashed #D9C7A6; background: var(--warn-bg, #FFFBF2); border-radius: 10px; padding: 10px 12px; } .sample-panel { border-color: #E9D9B8; } .seg.seg-wrap { flex-wrap: wrap; height: auto; } .seg.seg-wrap label span { white-space: nowrap; } .sample-photos { display: flex; flex-wrap: wrap; gap: 10px; } .sample-photos figure { margin: 0; width: 96px; text-align: center; } .sample-photos img { width: 96px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; } .sample-photos .sample-add .photo-empty { width: 96px; height: 120px; border: 1px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 12px; color: var(--text-2); background: var(--surface); } /* v5.6.0 — multi-location transfers, In transit, finance confirmation */ .btn-block { width: 100%; justify-content: center; } .note.bad { background: var(--bad-bg); color: var(--bad); } .multi-legs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; } .multi-leg h2 { font-size: 20px; } .multi-pcs { font: 400 34px/1 var(--serif); } .multi-kpis { margin-bottom: 14px; } .multi-dests .chip { height: auto; min-height: 42px; padding: 8px 14px; } .transit-tbl tr.is-short td { background: var(--cx-soft-2, #FDF6F3); } @media (max-width: 860px) { .multi-grid { grid-template-columns: minmax(0, 1fr) !important; } .multi-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; } .multi-kpis .kpi .v { font-size: 26px; } .multi-kpis .kpi { padding: 12px; } .multi-legs { grid-template-columns: minmax(0, 1fr); } .multi-dispatch { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 6px 24px rgba(0,0,0,.12); } } /* v5.7.0 — spot counts */ .spot-list .spot-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); } .spot-list .spot-row:last-child { border-bottom: 0; } .spot-row.is-extra { background: var(--warn-bg, #FFF8EC); } .spot-row .thumb { width: 44px; height: 44px; } .spot-t { display: flex; flex-direction: column; min-width: 0; } .spot-t strong { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spot-t small { color: var(--text-2); font-size: 12px; } .spot-q { display: flex; gap: 6px; align-items: center; } .spot-q .qty-in { width: 58px; height: 36px; text-align: center; font-size: 16px; } .spot-q .btn-sm { min-width: 36px; height: 36px; justify-content: center; } #spotCam.is-on { background: var(--plum); color: #fff; border-color: var(--plum); } @media (max-width: 860px) { .spot-grid { grid-template-columns: minmax(0, 1fr) !important; } .spot-list .spot-row { grid-template-columns: 40px minmax(0, 1fr); } .spot-q { grid-column: 1 / -1; justify-content: flex-end; } } #hoursTbl input[type=time], .tbl td input[type=time] { height: 36px; max-width: 130px; } .tbl td input[type=date] { height: 36px; } /* v5.14.0: reports */ .rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; } .rep-sec h2 { margin: 0 0 6px; } .rep-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; } .rep-link:hover strong { color: var(--plum); } /* v5.15.0: POS (till) and Sales */ .modal[hidden] { display: none; } .note.info { background: var(--cx-soft-2, #F3EAF0); color: var(--cx-accent, #6E2A50); } .plum-text { color: var(--plum); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0 14px; } .stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; } .stat strong { font: 400 24px var(--serif); } .staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; align-items: start; } .pos-open-form { max-width: 620px; } .pos-places { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .pos-place { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .pos-place:has(input:checked) { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); background: var(--cx-soft-2, #FBF7F9); } .pos-place span { display: flex; flex-direction: column; } .pos-place small { color: var(--text-2); } .pos-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .pos-head h1 { margin: 2px 0; } .pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .pos-scan { display: flex; gap: 8px; } .pos-scan input { flex: 1; height: 52px; font-size: 18px; border-radius: 12px; } .pos-reader { margin-top: 10px; max-width: 420px; border-radius: 12px; overflow: hidden; } .pos-results { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); max-height: 320px; overflow-y: auto; } .pos-res, .pos-line { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft); font: inherit; color: var(--ink); } .pos-res { cursor: pointer; } .pos-res:hover { background: var(--surface-2); } .pos-res .t, .pos-line .t { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .pos-res small, .pos-line small { color: var(--text-2); font-size: 12.5px; } .pos-res .p { font-weight: 600; white-space: nowrap; } .pos-res .thumb, .pos-line .thumb { width: 44px; height: 54px; border-radius: 8px; background: var(--tint); flex: none; overflow: hidden; } .pos-res .thumb img, .pos-line .thumb img { width: 100%; height: 100%; object-fit: cover; } .pos-cart { margin-top: 12px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .pos-cart:empty { display: none; } .pos-line:last-child { border-bottom: 0; } .pos-line .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 0; } .pos-qty { display: flex; align-items: center; gap: 6px; } .pos-qty .q { min-width: 22px; text-align: center; font-weight: 600; } .pos-lt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 86px; } .pos-lt .btn { height: 26px; padding: 0 8px; font-size: 12px; } .pos-empty { padding: 30px 0; text-align: center; } .pos-right { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; } .pos-tot { display: flex; flex-direction: column; gap: 6px; } .pos-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); } .pos-total strong { font: 400 32px var(--serif); } .pos-cust summary { cursor: pointer; font-weight: 600; font-size: 14px; } .pos-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pos-pay .btn { height: 56px; font-size: 16px; justify-content: center; } .pos-paybox { max-width: 480px; } .pos-due { font-size: 15px; margin-bottom: 12px; } .pos-due strong { font: 400 26px var(--serif); margin-left: 6px; } .pos-payrow { padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; } .pos-amt { width: 120px; text-align: right; font-size: 17px; } .pos-cash { display: flex; flex-direction: column; gap: 6px; } .pos-cash label { display: flex; align-items: center; gap: 8px; font-size: 13px; } .pos-cash input { width: 120px; font-size: 17px; text-align: right; } .pos-quick { display: flex; gap: 6px; flex-wrap: wrap; } .pos-quick .chip { height: 32px; padding: 0 12px; } .pos-change { font-size: 15px; } .pos-left-to-pay { margin: 12px 0 6px; font-size: 15px; } .pos-done { display: flex; justify-content: center; } .pos-done-card { max-width: 520px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 22px; } .pos-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--good-bg); color: var(--good); display: grid; place-items: center; font-size: 34px; } .pos-inv { font: 600 15px var(--mono); margin: 0; } .pos-done-total { font: 400 40px var(--serif); } .pos-change-big { font-size: 20px; padding: 8px 16px; background: var(--warn-bg); border-radius: 10px; } .pos-send { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; margin: 8px 0; } .pos-send form { justify-content: center; } .pos-seller { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; } @media (max-width: 900px) { .pos-grid { grid-template-columns: minmax(0, 1fr); } .pos-right { position: static; } } @media (max-width: 520px) { .pos-line { flex-wrap: wrap; } .pos-line .t { flex-basis: calc(100% - 60px); } .pos-qty { margin-left: 56px; } .pos-lt { margin-left: auto; flex-direction: row; align-items: center; } .pos-pay .btn { height: 52px; } } .pos-payrow .pos-amt, .pos-cash input { width: 130px; flex: none; text-align: right; font-size: 17px; } .pos-payrow > .row-gap { flex-wrap: nowrap; } /* v5.16.0 */ .split-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } @media (max-width: 860px) { .split-wide { grid-template-columns: minmax(0, 1fr); } } tr.row-late td:first-child { box-shadow: inset 3px 0 0 var(--bad); } .pack-op strong { font-size: 13px; } .card.flush > .pad, .card.flush > details.pad { padding: 14px 20px; } /* v5.17.0 events planning: tasks, designs, shifts, My work, year planner */ .strike { text-decoration: line-through; } .task-tick { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--surface, #fff); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding: 0; color: var(--good); } button.task-tick:hover { border-color: var(--plum); background: var(--plum-soft); } .task-tick.is-done { background: var(--good-bg); border-color: var(--good-bg); cursor: default; } .task-tick.is-skip { cursor: default; color: var(--text-3); } .task-edit > summary { list-style: none; display: inline-flex; } .task-edit > summary::-webkit-details-marker { display: none; } .task-edit[open] { text-align: left; } .task-tbl td { vertical-align: top; } .design-thumb { display: block; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; background: var(--plum-soft); text-align: center; } .design-thumb img { display: block; width: 100%; max-height: 320px; object-fit: contain; } .design-thumb span { display: block; padding: 28px 10px; font-weight: 600; } .design-comment { background: var(--plum-soft); border-radius: 6px; padding: 6px 8px; } .shift-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .shift-day { padding: 12px; display: flex; flex-direction: column; gap: 6px; } .shift-day.is-edge { background: var(--plum-soft); } .shift-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; } .mywork-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line-soft); } .yp { padding: 8px 14px 14px; } .yp-head, .yp-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px; align-items: center; } .yp-head { height: 26px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .yp-row { height: 26px; } .yp-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yp-track { position: relative; height: 100%; } .yp-head .yp-track span { position: absolute; top: 5px; font-size: 11.5px; color: var(--text-3); padding-left: 3px; border-left: 1px solid var(--line); height: 20px; } .yp-bar { position: absolute; top: 6px; height: 14px; border-radius: 4px; } .yp-bar:hover { filter: brightness(1.2); } .yp-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); opacity: .45; } .inv-logo-prev { max-height: 56px; max-width: 200px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px; background: var(--surface, #fff); } /* v5.18.0 — search everything, favourites, "+ New" */ .side-tools { display: flex; gap: 6px; padding: 0 4px 6px; position: relative; } .side-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #3F3832; background: #2A2521; color: #BDB4A9; font: 13.5px var(--sans); cursor: pointer; min-width: 0; } .side-search:hover { border-color: #5A5048; color: #fff; } .side-search span { flex: 1; text-align: left; } .side-search kbd, .cmdk kbd { font: 10.5px var(--sans); padding: 1px 5px; border-radius: 4px; border: 1px solid #4A433C; color: var(--d-text3, #8F867B); white-space: nowrap; } .new-menu { position: static; } .new-btn { height: 36px; display: inline-flex; gap: 4px; align-items: center; } .new-list { position: absolute; left: 4px; right: 4px; top: 42px; z-index: 60; background: var(--surface, #fff); color: var(--ink); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.28); padding: 6px; display: flex; flex-direction: column; } .new-list[hidden] { display: none; } .new-list a, .new-pop a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 14px; } .new-list a:hover, .new-list a:focus, .new-pop a:hover { background: var(--plum-soft); color: var(--plum); outline: none; } .new-list .ic, .new-pop .ic { color: var(--plum); } .new-pop { position: fixed; right: 8px; top: calc(58px + env(safe-area-inset-top)); z-index: 70; width: min(300px, calc(100vw - 16px)); max-height: 75vh; overflow-y: auto; background: var(--surface, #fff); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.3); padding: 6px; } .new-pop .nav-section { padding: 8px 10px 4px; color: var(--text-3); } .topbar-actions { display: inline-flex; align-items: center; } .nav-favs .nav-section { padding-top: 8px; } .nav-favs .ic { color: #E9B949 !important; } .fav-star { border: 0; background: transparent; color: #B9AFA4; cursor: pointer; margin-left: 8px; padding: 2px; vertical-align: middle; border-radius: 6px; line-height: 0; } .fav-star:hover { color: #C89A2E; background: var(--plum-soft); } .fav-star.is-on { color: #D9A520; } .fav-star.is-on svg { fill: currentColor; } .cmdk { position: fixed; inset: 0; z-index: 300; background: rgba(20, 16, 14, .45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 12px 12px; } .cmdk[hidden] { display: none; } .cmdk-box { width: min(640px, 100%); background: var(--surface, #fff); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; } .cmdk-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text-3); } .cmdk-in input { flex: 1; border: 0; outline: none; font: 16px var(--sans); color: var(--ink); background: transparent; min-width: 0; height: 32px; padding: 0; box-shadow: none; } .cmdk-in kbd { border-color: var(--line); color: var(--text-3); } .cmdk-list { overflow-y: auto; padding: 6px; } .cmdk-group { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 10px 10px 4px; } .cmdk-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); } .cmdk-item strong { font-weight: 600; font-size: 14px; } .cmdk-item span { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk-item.is-on, .cmdk-item:hover { background: var(--plum-soft); } .cmdk-item.is-on strong { color: var(--plum); } .cmdk-empty { padding: 18px 12px; color: var(--text-3); font-size: 14px; margin: 0; } .cmdk-foot { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--line-soft); } body.cmdk-open { overflow: hidden; } .search-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); } .search-row:first-child { border-top: 0; } .search-row:hover { background: var(--plum-soft); } @media (max-width: 860px) { .side-tools { display: none; } .cmdk { padding-top: 8px; } .cmdk-box { max-height: 88vh; } .cmdk-foot span { display: none; } } .cmdk-in input::-webkit-search-cancel-button { display: none; } /* ================= v5.19.0 — CEO dashboard "Soft Rose & Beige" (the CEO's concept) ================= */ @font-face { font-family: 'Playfair Display'; font-weight: 400; font-display: swap; src: url(../fonts/playfair-display-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Playfair Display'; font-weight: 500; font-display: swap; src: url(../fonts/playfair-display-latin-500-normal.woff2) format('woff2'); } body.skin-rose { --ground: var(--cx-soft-2, #FAF4F0); --surface: var(--d-surface, #FFFFFF); --surface-2: var(--cx-soft-2, #FBF6F3); --tint: var(--cx-soft, #F4E5E1); --line: var(--cx-soft, #EFE4DE); --line-soft: var(--cx-soft-2, #F4EBE6); --field: var(--d-field, #E3D3CB); --plum: var(--cx-accent, #812F4C); --plum-dark: var(--cx-accent, #5E1F37); --plum-tint: var(--cx-soft, #F4E5E1); --plum-soft: var(--cx-soft-2, #FBF4F1); --text-2: var(--d-text2, #6F625D); --text-3: var(--d-text3, #81736E); --serif: 'Playfair Display', Georgia, serif; background: var(--ground); } /* light, rose sidebar on the CEO pages */ .skin-rose .sidebar { background: var(--ov-side, #EEDFD6); color: var(--d-ink, #3E3532); border-right: 1px solid var(--cx-soft, #F1E7E1); } .skin-rose .brand-name { color: var(--cx-accent, #6E3348); font-family: 'Playfair Display', Georgia, serif; font-size: 34px; letter-spacing: .04em; } .skin-rose .brand-sub { color: var(--d-text3, #9A8C86); letter-spacing: .32em; font-size: 9px; } .skin-rose .nav-section, .skin-rose .nav-group > summary { color: var(--d-text3, #9A8C86); } .skin-rose .nav-group > summary:hover { color: var(--d-ink, #3E3532); } .skin-rose .nav-link { color: var(--d-ink, #3E3532); } .skin-rose .nav-link .ic { color: var(--d-text3, #9A8C86); } .skin-rose .nav-link:hover { background: var(--ov-side-hover, rgba(255,255,255,.45)); color: var(--d-ink, #292321); } .skin-rose .nav-link.is-active { background: var(--ov-side-active, rgba(255,255,255,.75)); color: var(--cx-accent, #812F4C); font-weight: 600; } .skin-rose .nav-link.is-active .ic { color: var(--cx-accent, #812F4C); } .skin-rose .me { color: var(--d-ink, #292321); border-top-color: var(--cx-soft, #F1E7E1); } .skin-rose .me-text small { color: var(--d-text3, #81736E); } .skin-rose .avatar { background: var(--ov-avatar, #DBC1AE); color: var(--ov-avatar-ink, #5C3A2E); } .skin-rose .side-search { background: var(--surface, #FFFFFF); border-color: var(--cx-soft, #EDE2DC); color: var(--d-text3, #81736E); } .skin-rose .side-search:hover { color: var(--d-ink, #292321); border-color: var(--d-line, #DCC9C0); } .skin-rose .side-search kbd { border-color: var(--d-line, #E8DDD7); } .skin-rose .new-btn { background: var(--chart-1, #A65872); border-color: var(--chart-1, #A65872); } .skin-rose .topbar { background: var(--ov-side, #EEDFD6); color: var(--d-ink, #292321); border-bottom: 1px solid var(--cx-soft, #F1E7E1); } .skin-rose .topbar-brand { color: var(--cx-accent, #812F4C); font-family: 'Playfair Display', Georgia, serif; } .skin-rose .ov-tip { background: var(--surface, #FFFFFF); color: var(--d-ink, #292321); border: 1px solid var(--cx-soft, #EDE2DC); box-shadow: 0 10px 28px rgba(129,47,76,.14); } /* cards and type */ .skin-rose .ov-card, .skin-rose .ov-tile { border-radius: 16px; border: 1px solid var(--cx-soft, #F1E7E1); box-shadow: 0 1px 2px rgba(41,35,33,.03), 0 8px 24px rgba(129,47,76,.05); } .skin-rose a.ov-card:hover, .skin-rose a.ov-tile:hover { border-color: var(--cx-soft, #E6CFD3); box-shadow: 0 10px 28px rgba(129,47,76,.09); } .skin-rose .ov-card-head h2 { font: 400 19px 'Playfair Display', Georgia, serif; } .skin-rose .ov-card-head h3 { font: 400 17px 'Playfair Display', Georgia, serif; } .skin-rose .ov-big { font-family: 'Playfair Display', Georgia, serif; } .skin-rose .ov-meter > span, .skin-rose .ov-meter.dark > span { background: var(--chart-4, #C98FA0); } .skin-rose .ov-meter, .skin-rose .ov-meter.dark { background: var(--cx-soft, #F4E5E1); } .skin-rose .ov-rank-no { background: var(--cx-soft, #F4E5E1); color: var(--cx-accent, #812F4C); } .skin-rose .ov-rank-no.first { background: var(--chart-1, #A8506B); color: #fff; } .skin-rose .ov-cal-day { background: var(--d-bgsoft, #FDFAF8); border-color: var(--cx-soft, #F1E7E1); } .skin-rose .ov-cal-day.is-today { border-color: var(--chart-1, #A8506B); box-shadow: inset 0 0 0 1px var(--chart-1, #A8506B); background: var(--surface, #fff); } .skin-rose .ov-cal-ev.run { background: var(--chart-1, #A8506B); } .skin-rose .ov-cal-ev.plan { background: var(--cal-plan, #F1DFD0); color: var(--cal-plan-ink, #6E4A33); } .skin-rose .ov-col-bar { max-width: 20px; border-radius: 3px 3px 0 0; gap: 1px; } .skin-rose .ov-best .thumb { border-radius: 8px; background: var(--cx-soft, #F4E5E1); } .skin-rose .tbl th { color: var(--d-text3, #81736E); } .skin-rose .ov-period .seg, .skin-rose .cx-period .seg { background: var(--surface, #FFFFFF); border: 1px solid var(--cx-soft, #EDE2DC); border-radius: 10px; padding: 3px; gap: 0; } .skin-rose .seg a, .skin-rose .seg button { color: var(--d-text2, #5C524D); border-radius: 8px; padding: 0 16px; height: 34px; } .skin-rose .seg .is-on { background: var(--chart-1, #B5677F); color: #FFFFFF; box-shadow: none; } .skin-rose .period-custom { display: inline-flex; align-items: center; gap: 6px; background: var(--surface, #fff); border: 1px solid var(--cx-soft, #EDE2DC); border-radius: 10px; padding: 3px 3px 3px 10px; } .skin-rose .period-custom input[type=date] { border: 0; background: transparent; height: 34px; padding: 0 2px; width: 130px; } .skin-rose .period-custom .btn { background: var(--chart-1, #A65872); border-color: var(--chart-1, #A65872); color: #fff; height: 34px; border-radius: 8px; padding: 0 16px; } /* layout of the CEO page */ .cx { gap: 18px; } .cx-muted { color: var(--d-text3, #81736E); } .cx-small { font-size: 12.5px; } .cx-welcome { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .cx-hello { font-size: 15px; } .cx-hello span { color: var(--chart-4, #BD8292); } .cx-welcome .cx-muted { font-size: 13px; margin-top: 2px; } .cx-date { font-size: 13.5px; color: var(--d-text2, #5C524D); } .cx-titlebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 20px; flex-wrap: wrap; } .cx-titlebar h1 { margin: 0; font: 400 40px/1.1 'Playfair Display', Georgia, serif; letter-spacing: -.005em; } .cx-titlebar p { margin: 6px 0 0; font-size: 14px; } .cx-period .period-bar { margin: 0; gap: 10px; } .cx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .cx-kpi { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; background: var(--surface, #FFFFFF); border: 1px solid var(--cx-soft, #F1E7E1); border-radius: 16px; box-shadow: 0 6px 18px rgba(129,47,76,.05); text-decoration: none; color: var(--d-ink, #292321); min-width: 0; transition: box-shadow .15s, border-color .15s; } .cx-kpi:hover { color: var(--d-ink, #292321); border-color: var(--cx-soft, #E6CFD3); box-shadow: 0 10px 26px rgba(129,47,76,.1); } .cx-kpi-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; } .cx-kpi-top > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--cx-soft, #F7E9EC); color: var(--chart-1, #A8506B); display: inline-flex; align-items: center; justify-content: center; flex: none; } .cx-chev { color: var(--d-text3, #9A8C86); font-weight: 400; } .cx-num { font: 400 34px/1.05 'Playfair Display', Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: lining-nums; margin-top: 6px; } .cx-num small { font: 400 13px var(--sans); color: var(--d-text3, #81736E); } .cx-kpi .cx-num small:first-child { font: 400 26px 'Playfair Display', Georgia, serif; color: var(--d-ink, #292321); } .cx-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: auto; } .cx-delta { font-weight: 600; font-size: 13px; } .cx-delta.up { color: #2F6B53; } .cx-delta.down { color: #9A3E47; } .cx-minibars { display: inline-flex; align-items: flex-end; gap: 3px; height: 30px; flex: none; } .cx-minibars i { width: 4px; background: var(--chart-4, #D7A1B1); border-radius: 1px; display: block; } .cx-meter { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--cx-soft, #F4E5E1); margin-top: auto; } .cx-meter i { display: block; min-width: 2px; } .cx-row { display: grid; gap: 16px; } .cx-row-charts { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); } .cx-row-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cx-pill { font-size: 12px; padding: 5px 10px; border: 1px solid var(--cx-soft, #EDE2DC); border-radius: 8px; color: var(--d-text2, #5C524D); } .cx-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; flex: 1; } .cx-donut { position: relative; width: 150px; height: 150px; flex: none; } .cx-donut svg { width: 100%; height: 100%; display: block; } .cx-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .cx-donut-mid strong { font: 400 20px 'Playfair Display', Georgia, serif; } .cx-donut-mid strong small { font-size: 13px; } .cx-donut-mid span { font-size: 11.5px; color: var(--d-text3, #81736E); } .cx-donut-legend { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; min-width: 130px; } .cx-donut-legend > div { display: flex; gap: 6px; align-items: flex-start; } .cx-donut-legend .ov-key { margin-top: 4px; } .cx-trend { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; height: 170px; margin-top: 4px; } .cx-trend-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 10.5px; color: var(--d-text3, #81736E); padding: 8px 0 0; } .cx-trend-plot { position: relative; border-bottom: 1px solid var(--cx-soft, #EFE4DE); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--cx-soft-2, #F4EBE6) calc(50% - 1px), var(--cx-soft-2, #F4EBE6) 50%); } .cx-trend-plot svg { position: absolute; inset: 14px 0 0 0; width: 100%; height: calc(100% - 14px); } .cx-trend-hits { position: absolute; inset: 0; display: flex; } .cx-trend-hits span { flex: 1; } .cx-trend-last { position: absolute; right: 0; top: -6px; background: var(--surface, #fff); border: 1px solid var(--cx-soft, #EDE2DC); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 600; } .cx-trend-x { display: flex; justify-content: space-between; padding-left: 40px; font-size: 10.5px; color: var(--d-text3, #81736E); } .cx-trend-note { margin-top: auto; padding: 10px 12px; background: var(--cx-soft-2, #FBF4F1); border-radius: 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cx-link { text-decoration: none; } .cx-viewall { font-size: 12.5px; color: var(--cx-accent, #812F4C); text-decoration: underline; text-underline-offset: 3px; } .cx-split { display: flex; gap: 14px; align-items: stretch; } .cx-split-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .cx-photo { width: 92px; min-height: 112px; flex: none; border-radius: 10px; background: var(--cx-soft-2, #F4E9E4); color: #C9A99A; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cx-photo.sm { width: 74px; min-height: 74px; } .cx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .cx-status { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; margin-top: 4px; } .cx-status > div { display: flex; align-items: center; gap: 10px; } .cx-status > div > span:nth-child(2) { flex: 1; } .cx-status strong { font-weight: 600; } .cx-sq { width: 22px; height: 22px; border-radius: 6px; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; } .cx-running { gap: 10px; } .cx-banner { height: 76px; border-radius: 10px; overflow: hidden; display: flex; align-items: stretch; background: #4A3436; } .cx-banner-rack { flex: 1; background: repeating-linear-gradient(90deg, #5E4446 0 10px, #6E5254 10px 13px, #4A3436 13px 18px); } .cx-banner-mark { flex: none; width: 46%; background: var(--d-bgsoft, #F3E7DE); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cx-accent, #6E3348); padding: 6px; } .cx-banner-mark b { font: 400 22px/1 'Playfair Display', Georgia, serif; } .cx-banner-mark small { font-size: 7px; letter-spacing: .3em; text-transform: uppercase; } .cx-banner-mark img { max-width: 100%; max-height: 54px; object-fit: contain; } .cx-ev { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--cx-soft-2, #F4EBE6); color: var(--d-ink, #292321); text-decoration: none; } .cx-ev:hover { color: var(--cx-accent, #812F4C); } .cx-ev-top { display: flex; align-items: center; gap: 8px; font-size: 14px; } .cx-ev-top strong { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-ongoing { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--good-bg, #E4F0EA); color: #2F6B53; white-space: nowrap; } .cx-insights { flex-direction: row; align-items: center; gap: 0; padding: 14px 18px; flex-wrap: wrap; } .cx-ins-head { display: flex; align-items: center; gap: 12px; padding-right: 22px; } .cx-ins-head h2 { margin: 0; font: 400 22px 'Playfair Display', Georgia, serif; } .cx-ins-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--cx-soft, #F4E5E1); color: var(--chart-1, #A8506B); display: inline-flex; align-items: center; justify-content: center; } .cx-ins { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; } .cx-ins > * { display: flex; gap: 12px; align-items: flex-start; padding: 6px 16px; border-left: 1px solid var(--cx-soft, #F1E7E1); color: var(--d-ink, #292321); text-decoration: none; min-width: 0; } .cx-ins > a:hover strong { color: var(--cx-accent, #812F4C); } .cx-ins > * > span:last-child { display: flex; flex-direction: column; gap: 1px; font-size: 12px; min-width: 0; } .cx-ins strong { font-weight: 600; font-size: 13px; } .cx-ins-i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cx-soft, #EDE2DC); color: var(--chart-1, #A8506B); display: inline-flex; align-items: center; justify-content: center; flex: none; } @media (max-width: 1280px) { .cx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-row-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cx-row-charts > .ov-chart { grid-column: 1 / -1; } .cx-row-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-ins { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .cx-titlebar h1 { font-size: 30px; } .cx-date { display: none; } .cx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cx-kpis > .cx-kpi:first-child { grid-column: 1 / -1; } .cx-num { font-size: 28px; } .cx-kpi .cx-num small:first-child { font-size: 22px; } .cx-row-charts, .cx-row-cards { grid-template-columns: minmax(0, 1fr); } .cx-insights { flex-direction: column; align-items: stretch; } .cx-ins { grid-template-columns: minmax(0, 1fr); } .cx-ins > * { border-left: 0; border-top: 1px solid var(--cx-soft, #F1E7E1); padding: 10px 0; } .skin-rose .seg a, .skin-rose .seg button { padding: 0 10px; } .skin-rose .period-custom { width: 100%; } } /* v5.19.0 sizing: keep figures whole on laptop widths */ .cx-num { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .cx-kpi-top > span:nth-child(2) { white-space: normal; line-height: 1.25; } @media (max-width: 1560px) { .cx-kpis { gap: 10px; } .cx-kpi { padding: 14px 12px 12px; } .cx-kpi .cx-num { font-size: 25px; } .cx-kpi .cx-num small:first-child { font-size: 19px; } .cx-kpi-top { font-size: 12.5px; gap: 6px; } .cx-ic { width: 28px; height: 28px; } .cx-minibars { height: 24px; gap: 2px; } .cx-minibars i { width: 3px; } .cx-row-cards .cx-num { font-size: 28px; } .cx-photo { width: 64px; min-height: 84px; } .cx-photo.sm { width: 56px; min-height: 56px; } .cx-row-cards .ov-card { padding: 18px; } .cx-row-cards .ov-card-head h2 { font-size: 17px; } } .cx .ov-cols-wrap { grid-template-columns: 62px minmax(0, 1fr); } .cx .ov-xlabels { padding-left: 70px; font-size: 10.5px; } @media (max-width: 1560px) { .cx .ov-xlabels span:nth-child(even) { visibility: hidden; } .cx .ov-xlabels > span { overflow: visible; text-overflow: clip; } } /* v5.20.0: made-to-order, gift vouchers at the till */ .mto-line { background: var(--surface-2); border: 1px solid var(--line-soft); box-shadow: none; } .inline-details { display: inline-block; } .inline-details > summary { list-style: none; cursor: pointer; } .inline-details > summary::-webkit-details-marker { display: none; } .inline-details[open] { display: block; width: 100%; } .pos-voucher { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--plum-soft); border: 1px dashed var(--plum-tint); } .pos-voucher[hidden] { display: none; } .pos-voucher strong { white-space: nowrap; } #posVoucher { width: 100%; justify-content: center; } /* v5.21.0: bell, notifications list */ .bell { position: relative; display: inline-flex; align-items: center; justify-content: center; } .side-tools .bell { flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid #3F3832; background: #2A2521; color: #BDB4A9; } .side-tools .bell:hover { color: #fff; } .skin-rose .side-tools .bell { background: var(--surface, #FFFFFF); border-color: var(--cx-soft, #EDE2DC); color: var(--d-text3, #81736E); } .bell-n { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #C2410C; color: #fff; font: 600 11px/18px var(--sans); text-align: center; } .ntf-list { display: flex; flex-direction: column; } .ntf { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; } .ntf:hover { background: var(--surface-2); } .ntf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; } .ntf.is-new .ntf-dot { background: var(--plum); } .ntf.is-new strong { color: var(--plum-dark); } .ntf-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ntf-b { font-size: 13.5px; color: var(--text-2); white-space: normal; overflow-wrap: anywhere; } .side-tools .side-search kbd { display: none; } /* v5.21.0: room for the bell — Ctrl K still works */ /* v5.22.0: attendance */ .att-card { max-width: 560px; } .att-state { display: flex; gap: 12px; align-items: center; } .att-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); flex: none; box-shadow: 0 0 0 4px var(--surface-2); } .att-card.is-in .att-dot { background: #2E8B57; box-shadow: 0 0 0 4px #DDF0E4; } .att-btn { width: 100%; justify-content: center; font-size: 17px; min-height: 52px; } .att-pos input { min-width: 0; } /* v5.22.0: live pop-ups */ .ntf-pops { position: fixed; top: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; } .ntf-pop { pointer-events: auto; position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 34px 12px 14px; background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--plum); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); text-decoration: none; animation: ntfIn .25s ease-out; transition: opacity .35s, transform .35s; } .ntf-pop:hover { background: var(--plum-soft); } .ntf-pop.is-going { opacity: 0; transform: translateX(20px); } .ntf-pop-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); } .ntf-pop strong { font-size: 14.5px; } .ntf-pop-b { font-size: 13px; color: var(--text-2); white-space: pre-line; max-height: 4.2em; overflow: hidden; } .ntf-pop-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-3); font-size: 18px; cursor: pointer; border-radius: 6px; } .ntf-pop-x:hover { background: var(--tint); } @keyframes ntfIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (max-width: 860px) { .ntf-pops { top: 64px; right: 12px; left: 12px; width: auto; } } @media (prefers-reduced-motion: reduce) { .ntf-pop { animation: none; transition: none; } } /* v5.22.0: WhatsApp card on the CEO overview */ .cx-wa { margin-top: 18px; } .cx-wa-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; } .cx-wa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; } .cx-wa-stats > div { display: flex; flex-direction: column; gap: 2px; } .cx-wa-stats strong { font: 600 24px var(--serif); } @media (max-width: 760px) { .cx-wa-grid { grid-template-columns: 1fr; } } .att-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--plum-soft); border: 1px solid var(--plum-tint); color: var(--plum-dark); text-decoration: none; } .att-bar.is-late { background: var(--bad-bg); border-color: #E9C3C3; color: var(--bad); } .att-bar span:first-of-type { flex: 1; min-width: 0; } .att-bar-go { font-weight: 600; white-space: nowrap; } /* v5.23.0 — customers, DAS Club member badge, WhatsApp thread */ .badge.member { background: var(--plum); color: #fff; display: inline-flex; align-items: center; gap: 4px; } .badge.member svg { width: 12px; height: 12px; } .wa-thread { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding: 4px 2px; } .wa-msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); } .wa-msg.in { align-self: flex-start; border-bottom-left-radius: 4px; } .wa-msg.out { align-self: flex-end; background: var(--plum-tint); border-color: transparent; border-bottom-right-radius: 4px; } .wa-body { font-size: 14px; white-space: normal; word-wrap: break-word; } /* v5.24.0 — loyalty card (customer page, till), insights, margins, alerts */ .loy-card { --tier: var(--plum); display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--tier), color-mix(in srgb, var(--tier) 55%, #000)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .loy-card > div { display: flex; flex-direction: column; gap: 2px; } .loy-card strong { font: 400 24px/1.1 var(--serif); } .loy-card .tiny { color: rgba(255,255,255,.82); } .pos-vip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; padding: 6px 10px; border-radius: 10px; color: #fff; background: var(--plum); font-size: 13px; } .pos-vip strong { font-weight: 600; } .pos-vip .perks { flex-basis: 100%; font-size: 12px; opacity: .9; } .bar-in { height: 6px; border-radius: 3px; background: var(--plum-tint); overflow: hidden; min-width: 60px; } .bar-in > span { display: block; height: 100%; background: var(--plum); } .cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 16px; } .cs-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; border: 1px solid var(--line-soft); } .cs-card.on { outline: 2px solid var(--plum); } .cs-card strong { font: 400 28px/1 var(--serif); } /* v5.25.0 — HUB + version under the logo (sidebar and phone top bar) */ .brand-sub { display: flex; align-items: baseline; gap: 8px; } .brand-hub { font-weight: 700; letter-spacing: 0.22em; color: #E9C9A0; } .brand-ver { font-size: 10px; letter-spacing: 0.04em; text-transform: none; color: var(--d-text3, #A89F94); } .topbar-brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .topbar-brand .brand-sub { font: 10px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; } .skin-rose .brand-hub { color: var(--cx-accent, #812F4C); } .skin-rose .brand-ver { color: var(--d-text3, #9A8C86); } /* v5.25.0 — POS customer: short chip, pick list, tier badge */ .cust-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--ink); } .cust-chip.is-member { background: var(--plum); color: #fff; } .cust-chip.is-new { background: transparent; color: var(--text-2, #6b625c); font-weight: 500; padding-left: 0; } .badge.tier { --tier: #8B6A2E; background: color-mix(in srgb, var(--tier) 16%, #fff); color: color-mix(in srgb, var(--tier) 75%, #000); border: 1px solid color-mix(in srgb, var(--tier) 40%, #fff); } .cust-pick { border: 1px solid var(--field); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(31, 28, 26, .12); overflow: hidden; margin-top: -4px; } .cust-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-top: 1px solid var(--line-soft); background: none; cursor: pointer; font: inherit; color: var(--ink); } .cust-opt:first-child { border-top: 0; } .cust-opt:hover, .cust-opt:focus { background: var(--plum-tint); } .cust-opt .tiny { flex-basis: 100%; } .ov-cal-ev.shift { background: #2F7DB5; color: #fff; } .ov-cal-ev.task { background: var(--warn-bg, #F3E3C4); color: #6B4A12; } .cal5 { margin-bottom: 16px; } /* v5.26.0 — My menu on top, the rest under "All pages" */ .nav-mine { margin-bottom: 6px; } .nav-all > summary { margin-top: 4px; } .nav-all[open] > summary { color: #fff; } .nav-all > .nav-group { margin-left: 4px; } /* v5.27.0 — made-to-order measurement form, customer measurements */ .meas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px 10px; } .meas-grid .field { margin: 0; } .meas-grid label { font-size: 12px; } .meas-grid input { height: 36px; } .mto-meas { border-top: 1px dashed var(--line, #e5ddd5); margin-top: 12px; } .mto-meas select[data-meas-pick] { height: 32px; max-width: 220px; } .meas-prof { border: 1px solid var(--line, #e5ddd5); border-radius: 10px; padding: 10px 12px; margin-top: 8px; } .meas-prof > summary { cursor: pointer; list-style: none; } .meas-prof > summary::-webkit-details-marker { display: none; } .mto-mark .hint { display: block; } /* v5.28.0 — themes, message board */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .theme-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; background: var(--surface); } .theme-opt:has(input:checked) { border-color: var(--plum); box-shadow: 0 0 0 2px var(--plum-tint); } .theme-sw { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; } .theme-sw i { width: 12px; height: 22px; display: block; } .board-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); } .board-row:first-child { border-top: 0; } .ov-card .board-row { padding: 9px 0; } .board-row:hover { background: var(--plum-soft); } .board-row.is-pinned { background: var(--plum-soft); } .board-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .board-main strong { display: flex; align-items: center; gap: 4px; } .board-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: transparent; } .board-row.is-unread .board-dot { background: var(--plum); } .board-post { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; } .board-post.is-top { border-left-color: var(--plum); } .board-body { white-space: normal; overflow-wrap: anywhere; margin-top: 4px; } .board-edit > summary { list-style: none; cursor: pointer; } /* v5.28.0 — help panel and tours */ .help-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--plum); box-shadow: 0 6px 18px rgba(31, 28, 26, 0.16); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .help-fab:hover { background: var(--plum-soft); } .help-panel { position: fixed; right: 18px; bottom: 72px; z-index: 61; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 18px 44px rgba(31, 28, 26, 0.22); } .help-tips { margin: 6px 0 12px; padding-left: 18px; } .help-tips li { margin-bottom: 4px; } .tour-ring { position: absolute; z-index: 70; border: 3px solid var(--plum); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(20, 16, 14, 0.35); pointer-events: none; transition: all .2s; } .tour-box { position: absolute; z-index: 71; background: var(--surface); border-radius: 12px; padding: 12px 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); } .tour-box p { margin: 0 0 10px; font-size: 14px; } .help-fab.is-top { bottom: auto; top: 14px; right: 14px; } .help-fab.is-top + .help-panel { bottom: auto; top: 66px; } @media (max-width: 760px) { .help-fab { bottom: 76px; right: 12px; width: 40px; height: 40px; } .help-panel { bottom: 124px; right: 12px; } .help-fab.is-top { top: 58px; } .help-fab.is-top + .help-panel { top: 106px; } } @media print { .help-fab, .help-panel, .tour-box, .tour-ring { display: none !important; } } a.card.stat { text-decoration: none; color: inherit; } /* v5.30.0 — dark theme: form controls, shadows and a few light-only surfaces */ html[data-dark] { color-scheme: dark; } html[data-dark] input, html[data-dark] select, html[data-dark] textarea { background: var(--surface); color: var(--ink); border-color: var(--field); } html[data-dark] input::placeholder, html[data-dark] textarea::placeholder { color: var(--text-3); } html[data-dark] .tbl th { color: var(--text-3); } html[data-dark] .card, html[data-dark] .ov-card, html[data-dark] .ov-tile { box-shadow: none; } html[data-dark] img.thumb, html[data-dark] .thumb img { filter: brightness(.92); } html[data-dark] .flash { color: var(--ink); } html[data-dark] .skin-rose .avatar, html[data-dark] .avatar { background: var(--plum); color: #fff; } html[data-dark] .logo-frame { background: #fff; } .sentry-how { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); } .sentry-how > summary { cursor: pointer; } .sentry-how li { margin-bottom: 5px; } /* v5.30.0 — Help centre, help pages, animated screenshots */ .help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; } .help-sec h2 { margin-bottom: 8px; } .help-link { display: flex; gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: var(--ink); } .help-link:hover { background: var(--plum-soft); } .help-link img, .help-noimg { width: 96px; height: 60px; object-fit: cover; object-position: top left; border-radius: 6px; border: 1px solid var(--line); flex-shrink: 0; background: var(--surface-2); } .help-noimg { display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); } .help-link > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .help-page { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; } @media (max-width: 980px) { .help-page { grid-template-columns: 1fr; } } .help-shot { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; margin: 6px 0 10px; } .help-shot img { display: block; width: 100%; height: auto; } .help-box { position: absolute; border: 2px solid transparent; border-radius: 8px; transition: border-color .3s, box-shadow .3s; pointer-events: none; } .help-box.is-on { border-color: var(--plum); box-shadow: 0 0 0 9999px rgba(20, 16, 14, .28); } .help-pin { position: absolute; transform: translate(-40%, -40%); width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--plum); border: 2px solid var(--plum); font: 700 11px/18px var(--sans); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; transition: transform .3s, background .3s; } .help-pin.is-on { background: var(--plum); color: #fff; transform: translate(-40%, -40%) scale(1.25); animation: helpPulse 1.3s ease-out infinite; } .help-shot.is-big .help-pin { width: 28px; height: 28px; font-size: 13px; line-height: 24px; } @keyframes helpPulse { 0% { box-shadow: 0 0 0 0 rgba(143, 115, 242, .55); } 100% { box-shadow: 0 0 0 14px rgba(143, 115, 242, 0); } } .help-play { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; } .help-shot.is-paused .help-play { opacity: 1; } .help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .help-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; transition: background .3s, border-color .3s; } .help-steps li.is-on, .help-tips li.is-on { background: var(--plum-soft); border-color: var(--plum-tint); } .help-tips li { border-radius: 6px; padding: 2px 4px; transition: background .3s; } .help-n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--plum); color: #fff; font: 700 12px/24px var(--sans); text-align: center; } .help-more { margin: 0 0 10px; padding-left: 16px; } .help-panel { width: min(420px, calc(100vw - 32px)); max-height: 78vh; } @media (prefers-reduced-motion: reduce) { .help-pin.is-on { animation: none; } } .man-shot { margin: 10px 0 16px; } .man-shot figcaption { margin-top: 4px; } .man .help-shot { max-width: 760px; } /* v5.31.0: Settings › Update checks */ .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; } .checklist li.ok { color: var(--good); } .checklist li.bad { color: var(--bad); }