@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap'); /* ───────────────────────────────────────────────────────────────────────────── Printroom · Print-shop — brand design system (Mandarin Orange + Soft Cream) A modern frosted-glass UI for the counter/design/production workflow. One stylesheet shared by every /ps page: a fixed left sidebar, a scrolling main column, and a small kit of glass cards, KPI tiles, badges, lists and tables. Theming: dark is the primary look (a print floor screen is often on a wall); light is fully supported. Colours are tokens; both themes are declared, and the .light class on (set from localStorage) wins over the media query. ───────────────────────────────────────────────────────────────────────────── */ /* Dark — Printroom "after hours": warm near-black, Mandarin Orange hero, Electric Purple support. The brand uses black grounds for its premium/loud moments; this is that, for wall screens on the print floor. */ :root { --bg-0: #0d0b0a; /* warm near-black */ --bg-1: #17110d; --wash-a: rgba(255, 65, 0, .12); /* Mandarin Orange, faint */ --wash-b: rgba(122, 0, 234, .10); /* Electric Purple, faint */ --glass: rgba(40, 32, 26, .58); --glass-2: rgba(50, 40, 32, .72); --glass-hi: rgba(60, 48, 38, .88); --glass-line: rgba(255, 255, 255, .10); --glass-line-2: rgba(255, 255, 255, .17); --glass-inset: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.28); --modal-bg: #1c1712; /* popups are opaque, never see-through */ --blur: 16px; --ink: #f7f2eb; /* Soft Cream text on black */ --ink-2: #c9bdac; --ink-3: #8f8577; --accent: #ff4100; /* Mandarin Orange — the hero */ --accent-2: #ff6a33; --grad: linear-gradient(135deg, #ff4100, #ff6a33); --terra: #ff6a33; --purple: #9a3cff; /* Electric Purple, lifted for dark */ --yellow: #ffcc00; /* Golden Yellow — small punches only */ --slate: #a99f90; --indigo: #9a3cff; --amber: #ffcc00; --green: #34d399; --red: #ff6b6b; --violet: #9a3cff; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --sidebar: 258px; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03); --shadow-lg: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); --font-head: "Hanken Grotesk", "Inter", system-ui, sans-serif; color-scheme: dark; } /* Light — Printroom's daylight: a Soft Cream field, clean near-solid white panels with a hairline edge, Mandarin Orange as the single hero colour and Electric Purple for support. Bold, minimal, high-contrast. This is the default. */ :root.light { --bg-0: #f7f2eb; /* Soft Cream */ --bg-1: #efe7db; --wash-a: rgba(255, 65, 0, .06); /* Mandarin Orange, faint */ --wash-b: rgba(122, 0, 234, .05); /* Electric Purple, faint */ --glass: rgba(255, 255, 255, .74); --glass-2: rgba(255, 255, 255, .90); --glass-hi: #ffffff; --glass-line: rgba(30, 22, 14, .10); --glass-line-2: rgba(30, 22, 14, .15); --glass-inset: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.30); --modal-bg: #ffffff; /* popups are opaque, never see-through */ --ink: #171310; /* near-black, warm */ --ink-2: #5c5349; --ink-3: #948a7d; --accent: #ff4100; /* Mandarin Orange — the hero */ --accent-2: #ff5a1f; --grad: linear-gradient(135deg, #ff4100, #ff6a33); --terra: #ff5a1f; --purple: #7a00ea; /* Electric Purple */ --yellow: #ffcc00; /* Golden Yellow — small punches only */ --slate: #7a7266; --indigo: #7a00ea; --amber: #cf8a12; --green: #17936a; --red: #d64545; --violet: #7a00ea; --shadow: 0 1px 3px rgba(60,40,20,.07), 0 0 0 1px rgba(60,40,20,.05); --shadow-lg: 0 14px 34px rgba(60,40,20,.12), 0 0 0 1px rgba(60,40,20,.04); color-scheme: light; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; /* only the main column scrolls */ } /* A quiet atmospheric wash — two faint tints, brand and terracotta, over a soft neutral field. No coloured blobs; the calm is the point. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(70vw 60vw at 88% -10%, var(--wash-a), transparent 55%), radial-gradient(60vw 55vw at 5% 108%, var(--wash-b), transparent 55%), linear-gradient(165deg, var(--bg-0), var(--bg-1)); } body { letter-spacing: -.005em; } /* Headlines and big numbers wear the brand grotesk (a free stand-in for National 2); body copy stays Inter — the two families the guideline sets. */ h1, h2, h3, .ps-head h1, .ps-brand b, .kpi-num, .pf-name { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; } .tabnum, .kpi-num, .stat b, td.num { font-variant-numeric: tabular-nums; } /* ─── Layout ─────────────────────────────────────────────────────────────── */ .ps-app { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100vh; } /* Sidebar — frosted glass rail */ .ps-side { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); border-right: 1px solid var(--glass-line); } .ps-brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 14px; } .ps-logo { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--grad); color: #ffffff; font-weight: 800; box-shadow: 0 8px 22px rgba(255,65,0,.30); } .ps-logo svg { width: 26px; height: auto; } /* Lowercase, as the brand wordmark is set — override the uppercase that the sibling-span rule below would otherwise inherit onto it. */ .ps-brand b { font-size: 17px; letter-spacing: -.02em; display: block; text-transform: none; } .ps-brand span { font-size: 11.5px; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; } .ps-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 16px; } .ps-nav::-webkit-scrollbar { width: 7px; } .ps-nav::-webkit-scrollbar-thumb { background: var(--glass-line-2); border-radius: 4px; } .ps-group { margin: 14px 8px 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .ps-link { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0; padding: 9px 12px; border: 0; border-radius: 12px; cursor: pointer; background: none; color: var(--ink-2); font: inherit; font-size: 14px; text-align: left; text-decoration: none; transition: background .15s ease, color .15s ease; } .ps-link svg { width: 19px; height: 19px; flex: none; opacity: .8; } .ps-link:hover { background: var(--glass-2); color: var(--ink); } .ps-link.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line-2); } :root.light .ps-link.on { color: var(--ink); } .ps-link.on svg { opacity: 1; } .ps-me { margin: 8px 12px 14px; padding: 11px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; align-items: center; gap: 11px; } .ps-me .av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #ffffff; background: var(--grad); } .ps-me .who { flex: 1; min-width: 0; } .ps-me .who b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-me .who span { font-size: 11.5px; color: var(--ink-3); text-transform: capitalize; } .ps-icon-btn { width: 32px; height: 32px; flex: none; border: 0; border-radius: 9px; cursor: pointer; background: var(--glass-2); color: var(--ink-2); display: grid; place-items: center; } .ps-icon-btn:hover { background: var(--glass-hi); color: var(--ink); } .ps-icon-btn svg { width: 17px; height: 17px; } /* Main column */ .ps-main { min-width: 0; min-height: 0; overflow-y: auto; padding: 26px 30px 40px; } .ps-main::-webkit-scrollbar { width: 10px; } .ps-main::-webkit-scrollbar-thumb { background: var(--glass-line-2); border-radius: 6px; } .ps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; } .ps-head h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; font-weight: 750; } .ps-head .sub { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; } .ps-head .clock { text-align: right; } .ps-head .clock b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ps-head .clock span { display: block; font-size: 12px; color: var(--ink-3); } /* ─── Glass primitives ───────────────────────────────────────────────────── */ .glass { background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--shadow); } .card { padding: 18px 20px; } .card > h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; } /* KPI grid */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; } .kpi { position: relative; overflow: hidden; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); border: 1px solid var(--glass-line); box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease; } .kpi:hover { transform: translateY(-3px); border-color: var(--glass-line-2); } .kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone, var(--accent)); } .kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi .kpi-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone, var(--accent)) 22%, transparent); color: var(--tone, var(--accent)); } .kpi .kpi-ic svg { width: 19px; height: 19px; } .kpi .kpi-num { font-size: 38px; font-weight: 760; line-height: 1.05; margin: 12px 0 2px; letter-spacing: -.02em; } .kpi .kpi-label { font-size: 13px; color: var(--ink-2); } .kpi .kpi-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; } .kpi.tone-slate { --tone: var(--slate); } .kpi.tone-indigo { --tone: var(--indigo); } .kpi.tone-amber { --tone: var(--amber); } .kpi.tone-green { --tone: var(--green); } .kpi.tone-red { --tone: var(--red); } .kpi.tone-violet { --tone: var(--violet); } .kpi.tone-cyan { --tone: var(--accent-2); } /* Two-column content region */ .ps-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; } @media (max-width: 1100px) { .ps-cols { grid-template-columns: 1fr; } } /* Lists */ .rowlist { display: flex; flex-direction: column; } .rowlist .r { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--glass-line); } .rowlist .r:first-child { border-top: 0; } .rowlist .code { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; min-width: 62px; } .rowlist .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rowlist .who small { display: block; color: var(--ink-3); font-size: 12px; } .rowlist .when { font-size: 12px; color: var(--ink-3); white-space: nowrap; } .empty { color: var(--ink-3); font-size: 13.5px; padding: 8px 2px; } /* Badges */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; } .pill.rush { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); } .pill.normal { background: var(--glass-2); color: var(--ink-3); } .pill.q { background: color-mix(in srgb, var(--slate) 22%, transparent); color: var(--slate); } .pill.p { background: color-mix(in srgb, var(--indigo) 22%, transparent); color: var(--indigo); } .pill.f { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); } .pill.late { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--red); } /* Machine load bars */ .load { display: flex; flex-direction: column; gap: 11px; } .load .m { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; font-size: 13px; } .load .m .name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .load .m .track { display: block; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink-3) 22%, transparent); } .load .m .fill { display: block; height: 100%; min-width: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .load .m .n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12.5px; } /* Designer roster chips */ .roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 11px; } .dz { padding: 12px 13px; border-radius: var(--r-md); background: var(--glass-2); border: 1px solid var(--glass-line); } .dz .top { display: flex; align-items: center; gap: 8px; } .dz .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .dz.busy .dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .dz.free .dot { background: var(--green); box-shadow: 0 0 10px var(--green); } .dz .nm { font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz .ct { margin-left: auto; font-size: 11px; color: var(--ink-3); } .dz .st { margin-top: 6px; font-size: 12px; color: var(--ink-3); } .dz.busy .st { color: var(--ink-2); } .banner { padding: 12px 16px; border-radius: var(--r-md); font-size: 13.5px; margin-bottom: 18px; } .banner.warn { background: color-mix(in srgb, var(--amber) 16%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); color: var(--ink); } .banner.err { background: color-mix(in srgb, var(--red) 16%, transparent); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); } .banner.ok { background: color-mix(in srgb, var(--green) 15%, transparent); border: 1px solid color-mix(in srgb, var(--green) 38%, transparent); color: var(--ink); } .ps-loading { display: grid; place-items: center; height: 60vh; color: var(--ink-3); } .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--glass-line-2); border-top-color: var(--accent); animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } } @media (max-width: 720px) { .ps-app { grid-template-columns: 1fr; } .ps-side { position: fixed; z-index: 50; width: 82vw; max-width: 300px; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; } .ps-side.open { transform: none; } .ps-main { padding: 18px; } } /* ─── Shared form + table kit (used by all /ps pages) ────────────────────────── */ .fld { margin-bottom: 13px; } .fld > label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 5px; letter-spacing: .02em; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 620px) { .two, .three { grid-template-columns: 1fr; } } .in { width: 100%; padding: 11px 13px; border-radius: var(--r-md); font: inherit; font-size: 14.5px; color: var(--ink); background: var(--glass-2); border: 1px solid var(--glass-line); outline: none; } .in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } textarea.in { resize: vertical; min-height: 62px; } select.in { appearance: none; -webkit-appearance: none; cursor: pointer; } .btn { padding: 11px 17px; border-radius: var(--r-md); border: 0; cursor: pointer; font: inherit; font-weight: 650; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--grad); color: #ffffff; box-shadow: 0 10px 26px rgba(255,65,0,.28); } .btn.primary:hover { filter: brightness(1.05); } .btn.ghost { background: var(--glass-2); color: var(--ink); border: 1px solid var(--glass-line); } .btn.ghost:hover { background: var(--glass-hi); } .btn.sm { padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); } .btn.danger { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); } .seg { display: inline-flex; flex-wrap: wrap; gap: 6px; } .seg button { padding: 8px 13px; border-radius: var(--r-md); border: 1px solid var(--glass-line); background: var(--glass-2); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; } .seg button.on { background: color-mix(in srgb, var(--accent) 12%, var(--glass-hi)); color: #fff; border-color: var(--glass-line-2); } :root.light .seg button.on { color: var(--ink); } /* Tables */ .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl thead th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 0 12px 10px; } .tbl tbody td { padding: 11px 12px; border-top: 1px solid var(--glass-line); vertical-align: middle; } .tbl tbody tr:hover { background: var(--glass-2); } .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } .tbl .code { font-weight: 700; font-variant-numeric: tabular-nums; } .tbl-wrap { overflow-x: auto; } /* Status badges reused across boards */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; } .badge.green { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); } .badge.amber { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); } .badge.red { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); } .badge.blue { background: color-mix(in srgb, var(--indigo) 20%, transparent); color: var(--indigo); } .badge.slate { background: var(--glass-2); color: var(--ink-3); } /* Modal */ .modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(10,14,24,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; } /* A popup must read clearly over whatever is behind it: a solid surface, no translucency or backdrop blur of its own — even when it also carries .glass. */ .modal-back .modal { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; background: var(--modal-bg); border: 1px solid var(--glass-line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; } .modal-back .modal.wide { width: min(820px, 100%); } /* ─── Cockpit "Liquid Glass" polish ────────────────────────────────────────── Re-skins the shared primitives to the Tropical AI cockpit language: frosted white panels with a hairline ring + inset top-highlight, white "lift" nav and buttons, a green brand, generous radii. Placed last so it wins. */ .glass, .kpi { box-shadow: var(--glass-inset), var(--shadow); } .glass:hover { } .card { padding: 18px 20px; } .card > h2 { font-size: 11px; letter-spacing: .08em; color: var(--ink-3); } /* Sidebar — light frosted rail, brighter blur. */ .ps-side { background: var(--glass); box-shadow: var(--glass-inset); border-right: 1px solid var(--glass-line); } .ps-logo { box-shadow: 0 6px 16px rgba(255,65,0,.28); } /* Nav items — white pill on active with an inset highlight; a gentle nudge on hover. */ .ps-link { border-radius: 10px; } .ps-link:hover { background: color-mix(in srgb, var(--glass-hi) 55%, transparent); color: var(--ink); transform: translateX(1px); } .ps-link.on { background: var(--glass-hi); color: var(--ink); font-weight: 600; box-shadow: 0 4px 12px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9); } :root:not(.light) .ps-link.on { background: rgba(255,255,255,.10); box-shadow: none; } .ps-link.on svg { opacity: 1; color: var(--accent); } /* KPI tiles — drop the left bar; use the tinted icon chip + a big tight number. */ .kpi { border-radius: var(--r-lg); transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; } .kpi::after { display: none; } .kpi:hover { transform: translateY(-2px); box-shadow: var(--glass-inset), var(--shadow-lg); border-color: var(--glass-line-2); } .kpi .kpi-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 2px; } .kpi .kpi-label { font-weight: 600; } .kpi .kpi-ic { border-radius: 10px; } .card > h2, .kpi .kpi-label { text-transform: none; } .kpi .kpi-top .kpi-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } /* Buttons — soft rounded pills. Brand-green primary; a glass secondary that lifts on hover; small buttons are fully rounded (the cockpit pill). */ .btn { border-radius: 999px; transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, background .2s ease, border-color .2s ease; } .btn.sm { border-radius: 999px; padding: 6px 14px; font-size: 12.5px; } .btn.primary { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(255,65,0,.28); } .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255,65,0,.34); filter: none; } .btn.ghost { background: var(--glass-2); border: 1px solid var(--glass-line); box-shadow: var(--glass-inset), 0 1px 2px rgba(15,23,42,.05); } .btn.ghost:hover { background: var(--glass-hi); transform: translateY(-1px); box-shadow: var(--glass-inset), var(--shadow); border-color: var(--glass-line-2); } .btn.danger { background: color-mix(in srgb, var(--red) 12%, transparent); border: 1px solid color-mix(in srgb, var(--red) 24%, transparent); color: var(--red); box-shadow: none; } .btn.danger:hover { background: color-mix(in srgb, var(--red) 18%, transparent); transform: translateY(-1px); } /* Segmented — active is a white chip with an inset highlight and green label. */ .seg button { border-radius: 9px; } .seg button.on { background: color-mix(in srgb, var(--accent) 11%, var(--glass-hi)); color: var(--accent-2); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 32%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } :root:not(.light) .seg button.on { background: color-mix(in srgb, var(--accent) 24%, transparent); color: #ffe4d6; border-color: color-mix(in srgb, var(--accent) 42%, transparent); box-shadow: none; } /* Inputs — clean, hairline, brand focus ring. */ .in { border-radius: 10px; background: var(--glass-hi); border: 1px solid var(--glass-line); box-shadow: var(--glass-inset); } .in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } :root:not(.light) .in { background: rgba(255,255,255,.05); } /* Tables read cleaner with a touch more air. */ .tbl tbody td { border-top-color: var(--glass-line); } .tbl tbody tr:hover { background: color-mix(in srgb, var(--glass-hi) 45%, transparent); } /* Me-card + section headers. */ .ps-me { box-shadow: var(--glass-inset); } .ps-head h1 { letter-spacing: -.025em; } /* ─── Account menu (sidebar foot) — the cockpit pattern ──────────────────────── */ .ps-acct { position: relative; margin: 8px 12px 14px; } .ps-me { width: 100%; margin: 0; padding: 10px 11px; border-radius: 14px; cursor: pointer; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-inset); display: flex; align-items: center; gap: 11px; font: inherit; color: inherit; text-align: left; transition: background .15s ease; } .ps-me:hover { background: var(--glass-2); } .ps-caret { width: 15px; height: 15px; flex: none; color: var(--ink-3); transition: transform .2s ease; } .ps-me[aria-expanded="true"] .ps-caret { transform: rotate(180deg); } .ps-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 60; padding: 6px; background: var(--glass-hi); border: 1px solid var(--glass-line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .ps-menu[hidden] { display: none; } .ps-mi { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; } .ps-mi svg { width: 16px; height: 16px; flex: none; opacity: .85; } .ps-mi:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } .ps-mi.danger { color: var(--red); } .ps-mi.danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); } .ps-mi-head { color: var(--ink-3); font-weight: 600; } .ps-msep { height: 1px; background: var(--glass-line); margin: 5px 4px; } /* Profile modal */ .pf-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } .pf-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #fff; background: var(--grad); flex: none; } .pf-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .pf-role { font-size: 13px; color: var(--ink-3); text-transform: capitalize; } .pf-list { display: flex; flex-direction: column; } .pf-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--glass-line); font-size: 13.5px; } .pf-row span { color: var(--ink-3); } /* ─── User Management + Customers page styles (shared with the Admin tabs) ──── */ /* Page-specific tweaks — everything common comes from ps.css */ .usr-acts { display: flex; gap: 6px; flex-wrap: wrap; } td .sub-line { display: block; color: var(--ink-3); font-size: 12px; } .modal > h2 { font-size: 16px; text-transform: none; letter-spacing: -.01em; color: var(--ink); margin-bottom: 16px; } .hint { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; } .modal-note { font-size: 12.5px; margin-top: 10px; min-height: 16px; } .modal-note.err { color: var(--red); } .modal-note.ok { color: var(--green); } .modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } /* Toggle switch for the permissions modal */ .sw { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; } .sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .sw .track { position: absolute; inset: 0; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-line); transition: background .15s ease, border-color .15s ease; } .sw .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform .15s ease, background .15s ease; } .sw input:checked + .track { background: color-mix(in srgb, var(--green) 42%, transparent); border-color: color-mix(in srgb, var(--green) 55%, transparent); } .sw input:checked + .track + .knob { transform: translateX(18px); background: var(--green); } .sw input:disabled { cursor: not-allowed; } .sw input:disabled + .track { opacity: .5; } .perm-grp { margin-bottom: 6px; } .perm-grp h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin: 16px 0 4px; } .perm-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--glass-line); } .perm-row .pl { flex: 1; min-width: 0; } .perm-row .pl b { font-weight: 600; font-size: 14px; } .perm-row .pl small { display: block; color: var(--ink-3); font-size: 12px; } /* Page-specific tweaks — everything common comes from ps.css. */ .cx-search { position: relative; max-width: 380px; } .cx-search .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; } .cx-search .in { padding-left: 40px; } .cx-count { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } a.btn { text-decoration: none; } .cx-mob { font-variant-numeric: tabular-nums; } .cx-dim { color: var(--ink-3); } .pager { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; } .pager .pg-info { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .cx-loading { display: grid; place-items: center; padding: 40px 0; } /* ─── Tabbed pages (Admin) — the cockpit underline tabs ──────────────────────── */ .tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--glass-line); margin-bottom: 20px; flex-wrap: wrap; } .tabbar button { padding: 10px 16px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; } .tabbar button:hover { color: var(--ink); } .tabbar button.on { color: var(--accent); border-bottom-color: var(--accent); } .tab-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 14px; } .tab-actions .cx-count { margin-right: auto; } /* ─── Sidebar notification badge (WhatsApp unread + orders to assign) ───────── */ .ps-link .ps-navbadge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }