/* ══════════════════════════════════════════════════════════════════════════ QuotePro UI — light/dark, RTL/LTR. Everything uses logical properties so flipping `dir` on mirrors the whole layout with no extra rules. ══════════════════════════════════════════════════════════════════════════ */ :root { --accent: #AE1B1F; --accent-2: #d13036; --radius: 12px; --radius-sm: 9px; --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --shadow-2: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05); --shadow-3: 0 24px 60px rgba(16,24,40,.22); --font: 'Cairo', 'Inter', 'Segoe UI', system-ui, sans-serif; --speed: .16s; } html[data-theme="light"] { --bg: #f4f5f7; --bg-2: #eaecef; --surface: #ffffff; --surface-2: #f8f9fa; --surface-3: #f1f3f5; --text: #16191d; --text-2: #565d66; --text-3: #868e98; --line: #e2e5e9; --line-2: #d3d8de; --field: #ffffff; --field-line: #d8dce1; } html[data-theme="dark"] { --bg: #0e1116; --bg-2: #070910; --surface: #161a21; --surface-2: #1b2029; --surface-3: #212832; --text: #e7eaee; --text-2: #a3acb8; --text-3: #79828f; --line: #262d38; --line-2: #313a47; --field: #11151b; --field-line: #2c3542; --shadow-3: 0 24px 60px rgba(0,0,0,.5); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; } h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .01em; } svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .app { display: flex; flex-direction: column; height: 100%; } .spacer { flex: 1; } /* ═══ top bar ═══ */ .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-1); z-index: 20; flex: none; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { height: 26px; width: auto; } .brand-text { display: flex; align-items: baseline; gap: 6px; } .brand-text b { font-size: 15px; letter-spacing: -.01em; } .ver { font-size: 10px; color: var(--text-3); } .doc-chip { display: flex; align-items: center; gap: 7px; margin-inline-start: 8px; padding: 5px 12px; background: var(--surface-3); border-radius: 20px; font-size: 12px; color: var(--text-2); max-width: 340px; } .doc-chip .dc-num { font-weight: 700; color: var(--text); direction: ltr; } .doc-chip .dc-sep { color: var(--text-3); } .doc-chip .dc-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seg { display: flex; background: var(--surface-3); border-radius: 8px; padding: 2px; } .seg button { border: 0; background: transparent; color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: var(--speed); } .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } /* ═══ buttons ═══ */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--speed); white-space: nowrap; } .btn:hover { background: var(--surface-2); border-color: var(--text-3); } .btn:active { transform: translateY(1px); } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn.ghost:hover { background: var(--surface-3); color: var(--text); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(174,27,31,.28); } .btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn.icon { padding: 8px; } .btn.sm { padding: 6px 10px; font-size: 12px; } .btn.file { cursor: pointer; } .btn.danger-ghost { border-color: transparent; background: transparent; color: var(--text-3); } .btn.danger-ghost:hover { background: rgba(220,38,38,.1); color: #dc2626; } .btn[disabled] { opacity: .5; pointer-events: none; } .mini { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; cursor: pointer; transition: var(--speed); white-space: nowrap; } .mini:hover { background: var(--surface-3); color: var(--text); } .mini.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .mini.accent:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ═══ workspace ═══ */ .workspace { flex: 1; display: flex; min-height: 0; } /* ── editor panel ── */ .panel { width: 460px; flex: none; display: flex; flex-direction: column; background: var(--surface); border-inline-end: 1px solid var(--line); min-height: 0; } .tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; } .tabs::-webkit-scrollbar { height: 0; } .tabs button { position: relative; border: 0; background: transparent; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 11px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; transition: var(--speed); display: inline-flex; align-items: center; gap: 5px; } .tabs button:hover { color: var(--text); background: var(--surface-2); } .tabs button.on { color: var(--accent); } .tabs button.on::after { content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } .tabs .count { font-style: normal; font-size: 10px; font-weight: 700; background: var(--surface-3); color: var(--text-2); padding: 1px 6px; border-radius: 10px; } .tabs button.on .count { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .panel-body { flex: 1; overflow-y: auto; padding: 14px; } .pane { display: none; } .pane.on { display: block; animation: fade .18s ease; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } } .group { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; margin-bottom: 12px; } .group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .group > h3 { margin-bottom: 10px; } .hint { margin: 8px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.5; } label { display: block; margin-bottom: 9px; } label > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; } label:last-child { margin-bottom: 0; } input, select, textarea { width: 100%; padding: 8px 10px; background: var(--field); color: var(--text); border: 1px solid var(--field-line); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; transition: var(--speed); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } input::placeholder, textarea::placeholder { color: var(--text-3); } textarea { resize: vertical; line-height: 1.6; } select { cursor: pointer; } .color-input { padding: 3px; height: 36px; cursor: pointer; } .row > .color-input { width: 72px; flex: none; } .row { display: flex; gap: 9px; align-items: flex-end; margin-bottom: 9px; } .row:last-child { margin-bottom: 0; } .row.tight { gap: 6px; margin-bottom: 0; align-items: center; } .row > label { margin-bottom: 0; } .grow { flex: 1; min-width: 0; } .check { display: flex; align-items: center; gap: 8px; margin: 0; } .check input { width: auto; margin: 0; accent-color: var(--accent); } .check span { margin: 0; font-size: 12.5px; color: var(--text); font-weight: 500; } /* ── items editor ── */ .items-editor { display: flex; flex-direction: column; gap: 8px; } .item-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px; transition: var(--speed); } .item-row.dragging { opacity: .45; } .item-row.drop-target { border-color: var(--accent); } .ir-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .ir-handle { cursor: grab; color: var(--text-3); display: flex; padding: 2px; } .ir-handle:active { cursor: grabbing; } .ir-index { font-size: 11px; font-weight: 700; color: var(--text-3); min-width: 17px; text-align: center; } .ir-desc { flex: 1; min-width: 0; } .ir-del { flex: none; } .ir-details { margin-bottom: 7px; } .ir-details input { font-size: 12px; padding: 6px 9px; } .ir-grid { display: grid; grid-template-columns: 1.1fr .8fr 1.2fr .75fr; gap: 6px; } .ir-grid label { margin: 0; } .ir-grid label > span { font-size: 10px; margin-bottom: 3px; } .ir-grid input, .ir-grid select { padding: 6px 8px; font-size: 12.5px; } .ir-total { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--text-2); } .ir-total b { font-size: 13.5px; color: var(--text); direction: ltr; } .empty { text-align: center; padding: 22px 14px; color: var(--text-3); font-size: 12.5px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); } /* ── extras & terms ── */ .extras, .terms { display: flex; flex-direction: column; gap: 7px; } .extra-row, .term-row { display: flex; gap: 7px; align-items: center; } .extra-row input, .term-row input { padding: 7px 9px; font-size: 12.5px; } .term-row .tr-no { font-size: 11px; font-weight: 700; color: var(--text-3); min-width: 16px; text-align: center; flex: none; } /* ── chips ── */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 18px; font-size: 12px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text-2); cursor: pointer; transition: var(--speed); } .chip:hover { border-color: var(--accent); color: var(--text); } .chip .x { color: var(--text-3); display: flex; } .chip .x:hover { color: #dc2626; } /* ── template grid ── */ .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .tpl-card { border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; background: var(--surface); transition: var(--speed); text-align: start; } .tpl-card:hover { border-color: var(--text-3); transform: translateY(-1px); } .tpl-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .tpl-thumb { height: 58px; border-radius: 6px; margin-bottom: 8px; background: var(--surface-3); overflow: hidden; position: relative; display: flex; flex-direction: column; padding: 6px; gap: 3px; } .tt-bar { height: 8px; border-radius: 2px; background: var(--accent); width: 45%; } .tt-bar.wide { width: 100%; } .tt-line { height: 3px; border-radius: 2px; background: var(--line-2); } .tt-line.short { width: 60%; } .tt-block { height: 14px; border-radius: 2px; background: var(--line-2); margin-top: auto; } .tpl-name { font-size: 12.5px; font-weight: 700; } .tpl-desc { font-size: 10.5px; color: var(--text-3); line-height: 1.45; margin-top: 2px; } .swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; } .swatch { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: var(--speed); } .swatch:hover { transform: scale(1.08); } .swatch.on { border-color: var(--text); } .toggles { display: flex; flex-direction: column; gap: 8px; } .toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .toggle span { font-size: 12.5px; color: var(--text); } .switch { position: relative; width: 38px; height: 21px; flex: none; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .switch .track { position: absolute; inset: 0; background: var(--line-2); border-radius: 12px; transition: var(--speed); } .switch .track::after { content: ""; position: absolute; inset-inline-start: 2px; top: 2px; width: 17px; height: 17px; background: #fff; border-radius: 50%; transition: var(--speed); box-shadow: var(--shadow-1); } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::after { inset-inline-start: 19px; } .logo-box { display: flex; align-items: center; gap: 12px; } .logo-box img { height: 44px; max-width: 170px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px; } /* ═══ preview ═══ */ .preview { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-2); } .preview-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; } .tpl-chips { display: flex; gap: 5px; overflow-x: auto; } .tpl-chips::-webkit-scrollbar { height: 0; } .tpl-chip { border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 16px; cursor: pointer; white-space: nowrap; transition: var(--speed); } .tpl-chip:hover { color: var(--text); border-color: var(--text-3); } .tpl-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .zoom { display: flex; align-items: center; gap: 5px; } .zoom span { font-size: 11.5px; color: var(--text-2); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; } .preview-scroll { flex: 1; overflow: auto; padding: 22px; position: relative; display: flex; justify-content: center; align-items: flex-start; } .paper-wrap { transform-origin: top center; transition: transform .18s ease; box-shadow: var(--shadow-3); border-radius: 3px; background: #fff; flex: none; } #paper { width: 210mm; height: 297mm; border: 0; display: block; border-radius: 3px; } .preview-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-2) 55%, transparent); backdrop-filter: blur(1px); } .preview-loading.on { display: flex; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .totals-bar { display: flex; gap: 4px; padding: 9px 14px; flex: none; background: var(--surface); border-top: 1px solid var(--line); } .tb-cell { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 4px 10px; border-radius: 8px; min-width: 0; } .tb-cell span { font-size: 10.5px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .tb-cell b { font-size: 14px; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; } .tb-cell.total { background: var(--accent); } .tb-cell.total span { color: rgba(255,255,255,.75); } .tb-cell.total b { color: #fff; font-size: 16px; } .tb-cell.hidden { display: none; } /* ═══ modals ═══ */ .modal { position: fixed; inset: 0; z-index: 60; background: rgba(9,12,17,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .15s ease; } .modal[hidden] { display: none; } .modal-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-3); width: min(640px, 100%); max-height: 82vh; display: flex; flex-direction: column; border: 1px solid var(--line); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none; } .modal-body { overflow-y: auto; padding: 14px 16px; } .hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: var(--speed); } .hist-row:hover { border-color: var(--accent); background: var(--surface-2); } .hist-main { flex: 1; min-width: 0; } .hist-num { font-size: 13px; font-weight: 700; direction: ltr; } .hist-sub { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist-total { font-size: 13.5px; font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; } .hist-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); text-transform: uppercase; } .cat-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 7px; cursor: pointer; transition: var(--speed); } .cat-row:hover { border-color: var(--accent); background: var(--surface-2); } .cat-main { flex: 1; min-width: 0; } .cat-desc { font-size: 13px; font-weight: 600; } .cat-sub { font-size: 11.5px; color: var(--text-3); } .cat-price { font-size: 13px; font-weight: 700; direction: ltr; } /* ═══ toasts ═══ */ #toasts { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .toast { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: 13px; font-weight: 500; max-width: 380px; animation: toastin .22s cubic-bezier(.2,.9,.3,1.2); } @keyframes toastin { from { opacity: 0; transform: translateY(10px) scale(.97); } } .toast.ok { border-inline-start: 3px solid #16a34a; } .toast.err { border-inline-start: 3px solid #dc2626; } .toast.info { border-inline-start: 3px solid var(--accent); } .toast .ti { flex: none; } .toast.ok .ti { color: #16a34a; } .toast.err .ti { color: #dc2626; } .toast.info .ti { color: var(--accent); } /* ═══ scrollbars ═══ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; } /* ═══ narrow screens ═══ */ @media (max-width: 1180px) { .panel { width: 400px; } .doc-chip { display: none; } } @media (max-width: 940px) { body { overflow: auto; } .workspace { flex-direction: column; } .panel { width: 100%; border-inline-end: 0; border-bottom: 1px solid var(--line); } .preview { min-height: 70vh; } .topbar { flex-wrap: wrap; } } /* ── client price list ── */ .pl-items-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .pl-item-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; transition: border-color var(--speed), box-shadow var(--speed); } .pl-item-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); } .pl-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .pl-item-info { flex: 1; min-width: 0; } .pl-item-desc { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .pl-item-details { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .pl-item-action { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .pl-item-price { font-size: 13.5px; font-weight: 700; color: var(--text); direction: ltr; display: inline-block; } .pl-item-price small { font-size: 10.5px; color: var(--text-3); font-weight: normal; } .pl-item-history-toggle { margin-top: 4px; } .pl-history-table { width: 100%; font-size: 11.5px; border-collapse: collapse; text-align: start; } .pl-history-table th { font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); } .pl-history-table td { padding: 6px 6px; } /* ── status badges ── */ .status-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; text-transform: uppercase; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; } .status-badge.draft { background: var(--surface-3); color: var(--text-2); } .status-badge.sent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .status-badge.approved { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .status-badge.declined { background: rgba(220, 38, 38, 0.15); color: #dc2626; } .status-badge.expired { background: rgba(217, 119, 6, 0.15); color: #d97706; } /* ── BOM Costing ── */ .costing-materials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: 380px; overflow-y: auto; padding-inline-end: 6px; margin-top: 10px; } .cost-mat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .cost-mat-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cost-mat-row { display: flex; gap: 6px; align-items: center; } .cost-mat-row label { margin-bottom: 0 !important; flex: 1; min-width: 0; } .cost-mat-row label > span { font-size: 9px; margin-bottom: 2px; color: var(--text-3); text-transform: uppercase; } .cost-mat-row input { padding: 4px 6px; font-size: 11.5px; border-radius: 6px; } .costing-products-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .cost-prod-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; transition: border-color var(--speed); } .cost-prod-card:hover { border-color: var(--accent); } .cost-prod-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .cost-prod-title { font-size: 13.5px; font-weight: 700; color: var(--text); } .cost-prod-totals { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .cost-prod-calc { text-align: end; } .cost-prod-val { font-size: 11.5px; color: var(--text-2); } .cost-prod-val b { font-size: 13px; color: var(--text); } .cost-prod-markup { width: 70px; margin-bottom: 0 !important; } .cost-prod-markup input { padding: 5px 6px; font-size: 12px; text-align: center; } .cost-prod-bom-toggle { margin-top: 8px; } .cost-prod-bom-table { width: 100%; font-size: 11px; border-collapse: collapse; margin-top: 8px; border-top: 1px dashed var(--line); } .cost-prod-bom-table th { padding: 4px; text-align: start; color: var(--text-3); border-bottom: 1px solid var(--line); } .cost-prod-bom-table td { padding: 5px 4px; border-bottom: 1px solid var(--surface-3); } /* ── Material Cost History dropdowns ── */ .cost-mat-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .btn-mat-hist { padding: 2px; background: transparent; border: 0; color: var(--text-3); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: color var(--speed), background-color var(--speed); } .btn-mat-hist:hover { color: var(--accent); background-color: var(--surface-3); } .btn-mat-hist svg { width: 14px; height: 14px; fill: currentColor; } .cost-mat-hist-div { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); overflow-x: auto; } .cost-mat-hist-table { width: 100%; font-size: 10px; border-collapse: collapse; } .cost-mat-hist-table th { padding: 2px 4px; text-align: start; color: var(--text-3); border-bottom: 1px solid var(--line); } .cost-mat-hist-table td { padding: 3px 4px; border-bottom: 1px solid var(--surface-3); } /* ── Orders & Invoices ── */ .orders-list, .invoices-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .order-card, .invoice-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: border-color var(--speed); } .order-card:hover, .invoice-card:hover { border-color: var(--accent); } .order-header, .invoice-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .order-num, .invoice-num { font-size: 13.5px; font-weight: 700; color: var(--text); } .order-sub, .invoice-sub { font-size: 11.5px; color: var(--text-2); } .invoices-summary { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .stat-chip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px; display: flex; flex-direction: column; gap: 2px; } .stat-chip span { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; } .stat-chip b { font-size: 15px; } .stat-chip b.danger { color: #dc2626; } .order-actions, .invoice-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .status-badge.pending { background: rgba(234, 179, 8, 0.15); color: #ca8a04; } .status-badge.in_production { background: rgba(37, 99, 235, 0.15); color: #2563eb; } .status-badge.completed { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .status-badge.invoiced { background: rgba(147, 51, 234, 0.15); color: #9333ea; } .status-badge.issued { background: rgba(37, 99, 235, 0.15); color: #2563eb; } .status-badge.paid { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .status-badge.partially_paid { background: rgba(234, 179, 8, 0.15); color: #ca8a04; } .status-badge.overdue { background: rgba(220, 38, 38, 0.15); color: #dc2626; } .status-badge.owner { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .status-badge.staff { background: var(--surface-3); color: var(--text-2); } /* ── BOM Requisition Table ── */ .bom-req-table { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 10px; } .bom-req-table th { padding: 8px 6px; text-align: start; background: var(--surface-2); color: var(--text-2); border-bottom: 2px solid var(--line); } .bom-req-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); } /* ── Dashboard ── */ .dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .dash-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-2); font-weight: 600; } .dash-icon { font-size: 14px; } .dash-val { font-size: 17px; font-weight: 800; color: var(--text); } .dash-sub { font-size: 10px; color: var(--text-3); } .dash-pipeline { display: flex; flex-direction: column; gap: 8px; } .pipe-row { display: flex; flex-direction: column; gap: 3px; } .pipe-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; } .pipe-bar-bg { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .pipe-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .dash-activity { display: flex; flex-direction: column; gap: 6px; } .act-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--surface-2); border-radius: 4px; font-size: 11.5px; } /* ── PO Stepper Line & Status Log ── */ .po-stepper { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); position: relative; } .po-step { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; position: relative; z-index: 1; } .po-step-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--text-3); } .po-step.done .po-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; } .po-step.active .po-step-dot { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } .po-step-label { font-size: 10px; font-weight: 600; color: var(--text-3); } .po-step.done .po-step-label, .po-step.active .po-step-label { color: var(--text); } /* ══════════════════════════════════════════════════════════════════════════ Module rail and layout modes The app outgrew a single tab strip: 11 tabs overflowed a 460px panel with the scrollbar hidden, so half the app was invisible. Navigation is now two levels — a module rail for "what am I working on", and sub-tabs only inside the quote editor for "which part of this document". ══════════════════════════════════════════════════════════════════════════ */ .rail { width: 82px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 10px 7px; background: var(--surface); border-inline-end: 1px solid var(--line); overflow-y: auto; } .rail::-webkit-scrollbar { width: 0; } .rail-btn { position: relative; border: 0; background: transparent; color: var(--text-3); font-family: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 3px; border-radius: 10px; cursor: pointer; transition: background var(--speed), color var(--speed); text-align: center; } .rail-btn svg { width: 19px; height: 19px; } .rail-btn:hover { background: var(--surface-3); color: var(--text); } .rail-btn.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .rail-btn.on::before { content: ""; position: absolute; inset-inline-start: -7px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: var(--accent); border-radius: 0 3px 3px 0; } html[dir="rtl"] .rail-btn.on::before { border-radius: 3px 0 0 3px; } .rail-badge { position: absolute; top: 4px; inset-inline-end: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700; display: none; align-items: center; justify-content: center; } .rail-badge.on { display: flex; } .rail-sep { height: 1px; background: var(--line); margin: 7px 6px; flex: none; } /* ── layout modes ── 'split' = document editor beside the live A4 preview. 'full' = business views get the entire window instead of a narrow column sitting next to an irrelevant blank quote. */ .workspace[data-layout="full"] .preview { display: none; } .workspace[data-layout="full"] .panel { width: 100%; border-inline-end: 0; } .workspace[data-layout="full"] .panel-body { padding: 18px 20px 26px; } .workspace[data-layout="full"] .panel-body > .pane { max-width: 1180px; margin-inline: auto; } .workspace[data-layout="full"] .dash-widgets-grid { grid-template-columns: 1fr 1fr 1fr; } .tabs.hidden { display: none; } .tabs button.hidden { display: none; } /* ── top-bar overflow menu ── */ .menu-wrap { position: relative; } .menu { position: absolute; inset-inline-end: 0; top: calc(100% + 7px); min-width: 216px; padding: 6px; z-index: 60; display: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); } .menu.on { display: block; animation: fade .13s ease; } .menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; border-radius: 8px; cursor: pointer; text-align: start; } .menu button:hover { background: var(--surface-3); } .menu button svg { flex: none; color: var(--text-3); } .menu button:hover svg { color: var(--accent); } .menu .sep { height: 1px; background: var(--line); margin: 5px 3px; } .menu .k { margin-inline-start: auto; font-size: 10.5px; color: var(--text-3); font-weight: 600; letter-spacing: .02em; } .topbar .group-actions { display: flex; align-items: center; gap: 8px; } .topbar .group-actions.hidden { display: none; } /* ── richer empty states ── */ .empty-rich { text-align: center; padding: 34px 20px; color: var(--text-3); border: 1px dashed var(--line-2); border-radius: var(--radius); } .empty-rich svg { width: 30px; height: 30px; margin-bottom: 10px; color: var(--line-2); } .empty-rich .et { font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; } .empty-rich .es { font-size: 12px; line-height: 1.6; max-width: 340px; margin: 0 auto; } .empty-rich .btn { margin-top: 14px; } /* ── module heading shown above full-width views ── */ .module-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .module-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .module-head .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; } @media (max-width: 1100px) { .rail { width: 62px; } .rail-btn { font-size: 0; gap: 0; padding: 11px 3px; } .rail-btn svg { width: 20px; height: 20px; } } .dash-icon { display: inline-flex; color: var(--text-3); } .dash-icon svg { width: 15px; height: 15px; } .dash-card:hover .dash-icon { color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════ PHONES (<= 720px) The app shell is desktop-first: a fixed 62px icon rail, a 460px editor panel and a live PDF preview side by side. None of that fits a 390px phone, and before this block the smallest breakpoint was 940px — so phones got the tablet layout squeezed into a third of the width. Three structural changes here: 1. the rail becomes a bottom tab bar (thumb reach, frees width), 2. the panel goes full-width and becomes the primary view, 3. the PDF preview is hidden behind a toggle rather than permanently eating 70vh — you edit on a phone, you only occasionally look. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* iOS Safari zooms the whole page whenever a focused input is under 16px, which made every tap jump the layout. This is the single biggest cause of the app feeling broken on a phone. */ input, select, textarea { font-size: 16px; padding: 10px 12px; } html, body { overflow: auto; -webkit-text-size-adjust: 100%; } /* Leave room for the fixed bottom tab bar, including the home indicator area on notched devices. */ .app { height: auto; min-height: 100dvh; padding-bottom: calc(62px + env(safe-area-inset-bottom)); } /* ── top bar: compact and sticky ── */ .topbar { position: sticky; top: 0; z-index: 40; flex-wrap: wrap; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); } .brand-text .ver { display: none; } .topbar .spacer { display: none; } .topbar .btn span { display: none; } /* icons only, keeps one row */ .topbar .btn.primary span { display: inline; } .topbar .btn { min-height: 40px; } /* ── rail → bottom tab bar ── */ .rail { position: fixed; inset-inline: 0; bottom: 0; top: auto; flex-direction: row; width: 100%; height: auto; padding: 0 0 env(safe-area-inset-bottom); overflow-x: auto; overflow-y: hidden; background: var(--surface); border-inline-end: 0; border-top: 1px solid var(--line); z-index: 50; scrollbar-width: none; } .rail-sep { display: none; } .rail-btn { flex: 1 0 auto; min-width: 68px; min-height: 54px; flex-direction: column; justify-content: center; gap: 3px; font-size: 10px; padding: 7px 4px; border-radius: 0; } .rail-btn svg { width: 21px; height: 21px; } .rail-btn.on::before { display: none; } /* side indicator makes no sense horizontally */ .rail-btn.on { box-shadow: inset 0 -2px 0 var(--accent); } .rail-badge { top: 4px; inset-inline-end: 14px; } /* ── workspace: panel is the page, preview is on demand ── */ .workspace { flex-direction: column; } .panel { width: 100%; flex: 1 1 auto; border-inline-end: 0; border-bottom: 0; } .panel-body { padding: 12px; overflow-y: visible; } .preview { display: none; } .workspace[data-mobile="preview"] .preview { display: flex; min-height: 70vh; border-top: 1px solid var(--line); } .workspace[data-mobile="preview"] .panel { display: none; } /* Floating toggle between editing and preview. Hidden on desktop entirely (see the rule outside this block). */ .mobile-preview-toggle { display: inline-flex; align-items: center; gap: 7px; position: fixed; z-index: 55; inset-inline-end: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 11px 18px; border-radius: 999px; background: var(--accent); color: #fff; border: 0; font-family: inherit; font-size: 13.5px; font-weight: 700; box-shadow: 0 6px 20px -6px rgba(0,0,0,.4); cursor: pointer; } .mobile-preview-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; } /* ── forms stack instead of squashing ── */ .row { flex-direction: column; align-items: stretch; gap: 10px; } .row.tight { flex-direction: row; flex-wrap: wrap; align-items: center; } .row > label, .row > .grow { width: 100%; } .row > .color-input { width: 100%; } label > span { font-size: 12.5px; } .group { padding: 14px 12px; } .module-head h2 { font-size: 17px; } /* ── touch targets ── */ .btn { min-height: 40px; padding: 9px 14px; } .btn.sm { min-height: 36px; font-size: 13px; } .btn.icon, .btn.icon.sm { min-width: 40px; min-height: 40px; padding: 9px; } .seg button { min-height: 36px; padding: 7px 14px; } /* ── anything wide scrolls inside itself, never the page ── */ .t-scroll, .table-scroll, .pl-item-history, .bom-req-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 100%; } .pl-history-table, .bom-req-table { min-width: 460px; } /* ── cards and lists ── */ .order-header, .invoice-header { flex-direction: column; align-items: stretch; gap: 10px; } .order-actions, .invoice-actions { justify-content: flex-start; } .invoices-summary { flex-direction: column; } .stat-chip { width: 100%; } /* line items are a grid on desktop; give them room to breathe */ .item-row { flex-wrap: wrap; gap: 8px; } .ir-desc { flex: 1 1 100%; } /* ── overlays ── */ .drop, .menu { min-width: 0; width: calc(100vw - 28px); inset-inline: 14px auto; } .toast { max-width: calc(100vw - 28px); inset-inline: 14px auto; } .modal-card, .sheet { width: calc(100vw - 24px); max-width: none; max-height: 88dvh; } } /* The mobile preview toggle only exists on phones. Scoped as min-width rather than a plain rule because this sits after the phone block — an unscoped `display:none` here would have equal specificity and win at every width, hiding the button on the phones it exists for. */ @media (min-width: 721px) { .mobile-preview-toggle { display: none; } } /* ── 2FA enrolment: the secret is shown once, so make it easy to copy ── */ .mfa-secret { display: block; margin-top: 6px; padding: 10px 12px; background: var(--surface-3); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; letter-spacing: .09em; word-break: break-all; user-select: all; /* one click selects the whole key */ direction: ltr; text-align: center; color: var(--text); } /* ═══════════════════════════════════════════════════════════════════ PHONES, PART 2 — density and type scale The block above fixed the *layout* (bottom tab bar, full-width panel, preview behind a toggle). This one fixes how it reads. The app's type scale is desktop-first — 14px body, 13px section headings, 12px hints, 10px rail labels — and simply narrowing that column keeps every one of those sizes, which is why it still felt cramped. The worst offender: section headings rendered SMALLER than body text (13px vs 14px), so nothing announced where one section ended and the next began — the screen read as one undifferentiated wall. Rule of thumb applied here: on a phone nothing structural goes below 13px, headings lead body by at least 4px, and vertical space between groups is roughly double the space inside them so the eye can find the seams. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { body { font-size: 16px; line-height: 1.6; } /* ── breathing room ── */ .panel-body { padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); } .group { padding: 18px 16px; margin-bottom: 18px; /* was 12 — the seam between sections */ border-radius: 14px; background: var(--surface); /* flatten: card-in-card reads as noise */ border-color: var(--line); } .group:last-child { margin-bottom: 0; } /* ── type scale: headings must lead ── */ .group > h3, .group-head h3 { font-size: 18px; line-height: 1.35; margin-bottom: 14px; letter-spacing: -.01em; } .module-head h2 { font-size: 21px; } .module-head .sub { font-size: 13px; margin-top: 4px; } label > span { font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text-2); } .hint { font-size: 13.5px; line-height: 1.6; margin-top: 10px; } .empty { font-size: 14.5px; padding: 18px 0; } /* ── controls sized for thumbs ── */ input, select, textarea { padding: 12px 14px; border-radius: 11px; } label { margin-bottom: 14px; } .row { gap: 14px; margin-bottom: 14px; } .btn { font-size: 15px; min-height: 46px; padding: 12px 18px; border-radius: 11px; } .btn.sm { font-size: 14px; min-height: 42px; padding: 10px 15px; } .btn.icon, .btn.icon.sm { min-width: 46px; min-height: 46px; padding: 12px; } .btn svg { width: 18px; height: 18px; } .mini { font-size: 13px; padding: 9px 14px; border-radius: 9px; min-height: 38px; } /* ── section tabs inside the panel ── */ .tabs { padding: 6px 10px 0; gap: 4px; } .tabs button { font-size: 14px; padding: 12px 14px; } /* ── bottom bar: readable labels, not 10px ── */ .rail { height: auto; } .rail-btn { font-size: 11.5px; min-height: 60px; min-width: 74px; gap: 4px; padding: 9px 6px; } .rail-btn svg { width: 22px; height: 22px; } .app { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } .mobile-preview-toggle { bottom: calc(80px + env(safe-area-inset-bottom)); font-size: 14.5px; padding: 13px 20px; } /* ── lists and cards ── */ .order-card, .invoice-card { padding: 16px; border-radius: 14px; gap: 12px; } .order-num, .invoice-num { font-size: 15.5px; } .order-sub, .invoice-sub { font-size: 13px; line-height: 1.6; } .status-badge { font-size: 11.5px; padding: 5px 11px; } .pill, .stat-chip span { font-size: 12.5px; } .stat-chip { padding: 14px 16px; } .stat-chip b { font-size: 19px; } /* Mini-list rows (users, activity, saved documents) were built as dense desktop table rows; give each one real height and let it wrap instead of squeezing four columns into 375px. */ .mini-list > .row { flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 0 !important; font-size: 14px !important; } .mini-list > .row > span { width: auto !important; } /* ── top bar ── */ .topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); } .brand img { height: 30px; } .brand-text b { font-size: 17px; } /* ── item rows in the quote editor ── */ .item-row { padding: 14px 0; gap: 10px; } .ir-desc { font-size: 15px; } .ir-no { font-size: 13px; } } /* ── phones: make the two navigation strips legible ───────────────── The section tabs are a horizontal scroller on desktop. At 375px the five Quote tabs need 411px, and the last one was genuinely UNREACHABLE: the container reports overflow-x:auto, but in this RTL flex context the browser clamps scrollLeft to 0 in both directions, so neither swiping nor scrollBy() moved it. A tab you cannot reach is worse than a tab that wraps. So on phones they simply wrap onto a second line. Every section is visible at once, nothing is hidden behind a swipe, and the whole class of RTL scroll bugs disappears. Fewer than ten short items is exactly the case where wrapping beats scrolling. */ @media (max-width: 720px) { .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; padding-bottom: 4px; } .tabs button { border-radius: 9px; } /* The underline marker assumes a single row sitting on the border. */ .tabs button.on::after { display: none; } .tabs button.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } /* Save and Export are the two things people actually press; leaving them as bare glyphs made the bar a guessing game. Everything else stays icon-only to keep this to one row. */ .topbar #btn-save span, .topbar #btn-export span { display: inline; } .topbar #btn-save, .topbar #btn-export { padding: 12px 16px; } /* Give the doc actions their own line rather than crushing them in beside the brand, logout and theme toggle. */ .topbar .group-actions { order: 10; width: 100%; display: flex; gap: 10px; padding-top: 4px; } .topbar .group-actions .btn { flex: 1; justify-content: center; } .topbar .group-actions .btn.icon { flex: 0 0 auto; } } /* ── 3D Printer Fleet Scheduling & Capacity Forecaster ─────────────── */ .fleet-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; } .metric-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: transform 0.15s ease, border-color 0.15s ease; } .metric-card:hover { transform: translateY(-2px); border-color: var(--accent); } .metric-card .m-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .metric-card .m-val { font-size: 26px; font-weight: 800; color: var(--ink); margin: 4px 0 2px 0; line-height: 1.1; } .metric-card.printing .m-val { color: #3b82f6; } .metric-card.idle .m-val { color: #10b981; } .metric-card.backlog .m-val { color: #f59e0b; } .metric-card .m-sub { font-size: 11.5px; color: var(--muted); } /* Capacity Forecaster Hero Card */ .forecaster-card { background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%); border: 1.5px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%); border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); } .forecaster-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .presets-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .preset-btn.on { background: var(--accent); color: #ffffff !important; border-color: var(--accent); } .forecaster-inputs { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); padding: 12px 14px; border-radius: 10px; } .forecaster-inputs .field-item { display: flex; flex-direction: column; gap: 4px; } .forecaster-inputs .field-item label { font-size: 11.5px; font-weight: 600; color: var(--ink); } .forecaster-inputs .field-item input, .forecaster-inputs .field-item select { height: 36px; border: 1px solid var(--border); border-radius: 7px; padding: 0 10px; background: var(--bg); color: var(--ink); font-size: 13.5px; } .forecast-result-box { margin-top: 16px; animation: fadeIn 0.2s ease-in-out; } .res-status-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); } .res-status-banner.feasible { background: color-mix(in srgb, #10b981 12%, var(--surface)); border-color: rgba(16, 185, 129, 0.4); } .res-status-banner.unfeasible { background: color-mix(in srgb, #ef4444 12%, var(--surface)); border-color: rgba(239, 68, 68, 0.4); } .res-status-banner .res-icon { font-size: 22px; line-height: 1; } .res-status-banner .res-title { font-size: 14.5px; font-weight: 700; color: var(--ink); } .res-status-banner .res-desc { font-size: 13px; color: var(--ink); margin-top: 3px; line-height: 1.4; } .res-metrics-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .res-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; } .res-pill .lbl { color: var(--muted); } .res-pill strong { color: var(--ink); font-weight: 700; } /* Swimlanes Grid */ .printer-swimlanes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .swimlane-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.03); } .swimlane-head { padding: 12px 16px; background: color-mix(in srgb, var(--surface) 94%, var(--ink) 6%); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .swimlane-head .pr-name { font-size: 14.5px; font-weight: 700; color: var(--ink); } .swimlane-head .pr-meta { font-size: 11.5px; color: var(--muted); } .status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.03em; } .status-badge.idle { background: rgba(16, 185, 129, 0.15); color: #059669; } .status-badge.printing { background: rgba(59, 130, 246, 0.15); color: #2563eb; } .status-badge.maintenance { background: rgba(245, 158, 11, 0.15); color: #d97706; } .swimlane-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .active-job-box { background: color-mix(in srgb, #3b82f6 8%, var(--surface)); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 9px; padding: 12px; } .active-job-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; } .active-job-title { font-size: 13.5px; font-weight: 700; color: var(--ink); } .progress-bar-container { height: 8px; background: rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; margin: 8px 0 6px 0; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 4px; transition: width 0.3s ease; } .active-job-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); } .queue-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); display: flex; justify-content: space-between; margin-top: 4px; } .queue-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; } .queue-item { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; transition: border-color 0.15s ease; } .queue-item:hover { border-color: var(--accent); } .queue-item-info { display: flex; flex-direction: column; gap: 2px; } .queue-item-title { font-weight: 600; color: var(--ink); } .queue-item-tags { display: flex; gap: 6px; font-size: 11px; color: var(--muted); } .priority-pill { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; } .priority-pill.rush { background: #fee2e2; color: #dc2626; } .priority-pill.high { background: #fef3c7; color: #d97706; } .priority-pill.normal { background: #f1f5f9; color: #64748b; } .swimlane-footer { padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .free-eta-lbl { color: var(--muted); } .free-eta-val { font-weight: 700; color: var(--ink); } /* Unassigned Backlog */ .unassigned-jobs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .unassigned-card { background: var(--surface); border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; } .unassigned-card:hover { border-color: var(--accent); border-style: solid; } /* ── storefront appearance & product editor (stl_storefront feature) ──────── */ /* The `hidden` attribute is a UA style with essentially no specificity, so any rule that sets `display` defeats it silently — .btn's inline-flex is what made a `hidden` "Remove photo" button render anyway. This is the normalize.css fix, applied once instead of per-class (.modal[hidden] below predates it and is now redundant but harmless). */ [hidden] { display: none !important; } .mini-label { display: block; font-size: 12px; font-weight: 650; color: var(--text-2); margin: 4px 0 7px; letter-spacing: .01em; } .theme-presets { display: flex; flex-wrap: wrap; gap: 10px; } .theme-swatch { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0; cursor: pointer; overflow: hidden; width: 108px; transition: var(--speed); font: inherit; text-align: start; } .theme-swatch:hover { border-color: var(--accent); } .theme-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* A miniature of the real page, not a row of dots — the point of the picker is seeing how ground, ink and accent sit together. */ .theme-swatch .tp-art { height: 58px; padding: 9px; display: flex; flex-direction: column; gap: 5px; } .theme-swatch .tp-bar { height: 5px; border-radius: 3px; } .theme-swatch .tp-card { flex: 1; border-radius: 5px; display: flex; align-items: flex-end; padding: 4px; } .theme-swatch .tp-dot { width: 15px; height: 5px; border-radius: 3px; } .theme-swatch .tp-name { display: block; padding: 6px 9px 7px; font-size: 11.5px; font-weight: 650; color: var(--text); border-top: 1px solid var(--line); text-transform: capitalize; } .theme-layouts { display: flex; gap: 8px; } .layout-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px 13px 8px 10px; color: var(--text); font-size: 12.5px; font-weight: 600; transition: var(--speed); } .layout-opt:hover { border-color: var(--accent); } .layout-opt[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); } .layout-opt svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } .sp-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); } .sp-row:last-child { border-bottom: 0; } .sp-thumb { width: 44px; height: 44px; flex: none; border-radius: 9px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); } .sp-thumb img { width: 100%; height: 100%; object-fit: cover; } .sp-thumb svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; } .sp-main { flex: 1; min-width: 0; } .sp-main b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-meta { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } .sp-drop { border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; color: var(--text-3); font-size: 12.5px; transition: var(--speed); background: var(--surface-2); } .sp-drop:hover { border-color: var(--accent); color: var(--accent); } .sp-preview { width: 100%; max-height: 190px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); } /* Marks a section that persists on change rather than on Save — without it the two behaviours are indistinguishable, which is what made a toggled switch look applied while nothing had been sent. */ .pill-note { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } /* ── machine-rate calculator output ──────────────────────────────────────── */ .calc-out { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 6px 14px; } .calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 13.5px; color: var(--text-2); border-bottom: 1px solid var(--line); } .calc-row:last-child { border-bottom: 0; } .calc-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; direction: ltr; } .calc-row.total { padding-top: 11px; padding-bottom: 11px; } .calc-row.total span { font-weight: 650; color: var(--text); } .calc-row.total b { font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }