@import url('./fonts.css'); /* =========================================================================== Sentra WMS — interactive demo ------------------------------------------------------------------------- Structurally faithful to the production app (shadcn/ui on Tailwind v4, CSS-first tokens, floating card shell, 10px / 16px radii, violet-tinted card shadow, .dark class on ). The BRAND RAMP is deliberately neutral indigo, not the real client's colour. Everything else — the neutral ramp, semantic roles, radii, shadow recipe — follows the real token structure. All data on screen is generated and fictional. See DATA-NOTICE.md. =========================================================================== */ @layer base { :root { /* brand ramp — neutral indigo (light only, never redefined in dark) */ --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe; --brand-300:#a5b4fc; --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3; --brand-900:#312e81; --brand-950:#1e1b4b; /* neutral ramp — cool slate tint */ --neutral-50:#f4f5f7; --neutral-100:#eaebee; --neutral-200:#d6d9de; --neutral-300:#bcc0c7; --neutral-400:#a1a6ae; --neutral-500:#888d95; --neutral-600:#71757d; --neutral-700:#5c6067; --neutral-800:#474a50; --neutral-900:#333538; --neutral-950:#1e2022; /* semantic — light */ --background:#f4f5f7; --foreground:#333538; --card:#ffffff; --card-foreground:#333538; --popover:#ffffff; --primary:#4338ca; /* action colour = brand-700 */ --primary-foreground:#ffffff; --primary-hover:#3730a3; --primary-active:#312e81; --feature:#6366f1; /* expression colour = brand-500 */ --feature-deep:#4338ca; --secondary:#eaebee; --secondary-foreground:#333538; --muted:#eaebee; --muted-foreground:#5c6067; --accent:#eaebee; --border:#d6d9de; --input:#d6d9de; --ring:#4338ca; --success:#00af77; --success-deep:#00875c; --success-foreground:#ffffff; --warning:#ffc72b; --warning-deep:#a97b00; --warning-foreground:#333538; --destructive:#ea5455; --destructive-deep:#c53537; --destructive-foreground:#ffffff; --info:#00a1e1; --info-deep:#0077a8; --info-foreground:#ffffff; /* charts — brand-mono, same values in both themes */ --chart-1:#3730a3; --chart-2:#4f46e5; --chart-3:#6366f1; --chart-4:#818cf8; --chart-5:#4338ca; --radius:10px; --radius-sm:6px; --radius-card:16px; --shadow-card:0 2px 8px -2px rgba(37,46,63,.12), 0 1px 2px rgba(37,46,63,.06); --shadow-pop:0 16px 40px -12px rgba(0,0,0,.28); --shadow-tip:0 10px 28px -10px rgba(0,0,0,.3); --rail-w:260px; --rail-w-collapsed:76px; --font-display:'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif; --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .dark { --background:#1e2022; --foreground:#f4f5f7; --card:#333538; --card-foreground:#f4f5f7; --popover:#333538; --primary:#818cf8; /* flips to the LIGHT brand step */ --primary-foreground:#1e2022; --primary-hover:#a5b4fc; --primary-active:#c7d2fe; --feature:#818cf8; --feature-deep:#4338ca; --secondary:#474a50; --secondary-foreground:#f4f5f7; --muted:#474a50; --muted-foreground:#bcc0c7; --accent:#474a50; --border:#474a50; --input:#474a50; --ring:#818cf8; --success-foreground:#1e2022; --warning-foreground:#1e2022; --info-foreground:#1e2022; --info-deep:#5ac8f0; --success-deep:#4ade80; --destructive-deep:#fca5a5; --warning-deep:#fcd34d; --shadow-card:0 2px 10px -2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); } } /* --------------------------------------------------------------- base ---- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1,h2,h3,h4,h5 { margin: 0; font-family: var(--font-display); line-height: 1.25; color: var(--foreground); font-weight: 600; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } img, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .tnum { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } .display { font-family: var(--font-display); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------------------------------------------------------- app shell ---- */ .app { display: flex; min-height: 100vh; } .rail { width: var(--rail-w); flex: 0 0 auto; background: var(--card); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; transition: width .2s cubic-bezier(.22,.8,.3,1); z-index: 40; } .app.is-collapsed .rail { width: var(--rail-w-collapsed); } .app.is-collapsed .rail:hover { width: var(--rail-w); box-shadow: var(--shadow-pop); } .rail__brand { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 16px; flex: 0 0 auto; } .rail__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--feature-deep); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; flex: 0 0 auto; } .rail__word { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--foreground); letter-spacing: -.01em; } .rail__pill { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--feature-deep); background: color-mix(in srgb, var(--feature) 14%, transparent); padding: 2px 7px; border-radius: 999px; } .dark .rail__pill { color: var(--primary); } .rail__nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px; } .rail__nav::-webkit-scrollbar { width: 6px; } .rail__nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .rail__group + .rail__group { margin-top: 24px; } .rail__label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); padding: 0 11px 6px; white-space: nowrap; } .rail__divider { height: 1px; background: var(--border); margin: 0 12px 8px; display: none; } .navlink { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 11px; border-radius: var(--radius); font-size: 14px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; transition: background .14s ease, color .14s ease; } .navlink:hover { background: color-mix(in srgb, var(--foreground) 5%, transparent); color: var(--foreground); } .navlink.is-active { background: var(--primary); color: var(--primary-foreground); font-weight: 600; } .navlink.is-active:hover { background: var(--primary-hover); } .navlink svg { width: 18px; height: 18px; flex: 0 0 auto; } .navlink .chev { margin-left: auto; transition: transform .18s ease; width: 15px; height: 15px; } .navlink.is-open .chev { transform: rotate(180deg); } .navlink .count { margin-left: auto; font-size: 11px; font-weight: 700; opacity: .85; } .navsub { margin: 4px 0 0 18px; padding-left: 12px; border-left: 1px solid var(--border); display: grid; gap: 2px; } .navsub .navlink { height: 36px; font-size: 13px; } .rail__foot { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 10px; } .rail__collapse { position: absolute; right: -12px; top: 76px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); display: grid; place-items: center; cursor: pointer; z-index: 41; box-shadow: var(--shadow-card); } .rail__collapse:hover { color: var(--foreground); } /* railed (icon-only) state */ .app.is-collapsed .rail:not(:hover) .rail__word, .app.is-collapsed .rail:not(:hover) .rail__pill, .app.is-collapsed .rail:not(:hover) .rail__label, .app.is-collapsed .rail:not(:hover) .navlink span, .app.is-collapsed .rail:not(:hover) .navlink .chev, .app.is-collapsed .rail:not(:hover) .navlink .count, .app.is-collapsed .rail:not(:hover) .navsub, .app.is-collapsed .rail:not(:hover) .rail__foot .who { display: none; } .app.is-collapsed .rail:not(:hover) .rail__divider { display: block; } .app.is-collapsed .rail:not(:hover) .navlink { justify-content: center; padding: 0; } .app.is-collapsed .rail:not(:hover) .rail__brand { justify-content: center; padding: 0; } /* --------------------------------------------------------------- main ---- */ .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .topwrap { position: sticky; top: 0; z-index: 30; padding: 16px 16px 0; background: var(--background); } @media (min-width: 1024px) { .topwrap { padding: 24px 24px 0; } } .topbar { height: 64px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 12px; padding: 0 16px; } @media (min-width: 1024px) { .topbar { padding: 0 20px; } } .topbar__search { display: flex; align-items: center; gap: 9px; height: 36px; max-width: 28rem; flex: 1 1 auto; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 11px; } .topbar__search input { border: 0; background: none; outline: none; width: 100%; font-size: 13px; } .topbar__search input::placeholder { color: var(--muted-foreground); } .topbar__search svg { color: var(--muted-foreground); flex: 0 0 auto; } .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .iconbtn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--muted-foreground); display: grid; place-items: center; cursor: pointer; position: relative; transition: background .14s ease, color .14s ease; } .iconbtn:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); color: var(--foreground); } .iconbtn svg { width: 18px; height: 18px; } .iconbtn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--destructive); border: 2px solid var(--card); } .avatarbtn { width: 36px; height: 36px; border-radius: 50%; background: var(--feature-deep); color: #fff; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; display: grid; place-items: center; position: relative; } .avatarbtn .presence { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--success); border: 2px solid var(--card); } .menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; z-index: 60; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; animation: pop .13s ease; } @keyframes pop { from { opacity: 0; transform: translateY(-4px) } } .menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius-sm); font-size: 13px; color: var(--foreground); cursor: pointer; text-align: left; } .menu__item:hover { background: var(--muted); } .menu__item.is-on { font-weight: 700; } .menu__head { padding: 10px 10px 6px; font-size: 12px; font-weight: 700; color: var(--foreground); } .menu__sub { padding: 0 10px 8px; font-size: 11.5px; color: var(--muted-foreground); } .menu__sep { height: 1px; background: var(--border); margin: 6px 0; } .menu--wide { min-width: 340px; } .menupos { position: relative; } main.page { flex: 1 1 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; } @media (min-width: 1024px) { main.page { padding: 24px; } } /* -------------------------------------------------------------- cards ---- */ .card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 20px; } .card--flat { box-shadow: none; border: 1px solid var(--border); } .card--pad0 { padding: 0; } .card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; } .card__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--foreground); } .card__sub { font-size: 12.5px; color: var(--muted-foreground); margin-top: 3px; } .card__link { margin-left: auto; font-size: 13px; color: var(--primary); font-weight: 500; cursor: pointer; white-space: nowrap; } .card__link:hover { text-decoration: underline; } .grid { display: grid; gap: 24px; } .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)); } .g5 { grid-template-columns: repeat(5, minmax(0,1fr)); } .g6 { grid-template-columns: repeat(6, minmax(0,1fr)); } .gap-16 { gap: 16px; } @media (max-width: 1400px) { .g6 { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 1200px) { .g5, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 900px) { .g3, .g2 { grid-template-columns: 1fr; } .g5, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 620px) { .g6, .g5, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* to-do grid */ .todo { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 4px; } @media (max-width: 1100px) { .todo { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 640px) { .todo { grid-template-columns: repeat(2, minmax(0,1fr)); } } .todo__cell { padding: 14px 12px; border-radius: var(--radius); cursor: pointer; display: block; } .todo__cell:hover { background: var(--muted); } .todo__n { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .todo__n.is-bad { color: var(--destructive); } .todo__l { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; } /* stat card */ .statcard { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 20px; } .statcard__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; } .statcard__ic svg { width: 19px; height: 19px; } .statcard__v { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .statcard__l { font-size: 13px; color: var(--muted-foreground); margin-top: 3px; } /* tinted alert boxes */ .tintbox { border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; font-size: 13px; } .tint-info { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info-deep); } .tint-success { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success-deep); } .tint-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-deep); } .tint-destructive { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive-deep); } .tint-primary { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); } .tintbox svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; } .tintbox__n { font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ controls --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease; } .btn:hover { background: var(--muted); } .btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 600; } .btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn--success { background: var(--success); border-color: var(--success); color: #fff; font-weight: 600; } .btn--destructive { background: var(--destructive); border-color: var(--destructive); color: #fff; font-weight: 600; } .btn--ghost { border-color: transparent; background: none; color: var(--muted-foreground); } .btn--ghost:hover { background: var(--muted); color: var(--foreground); } .btn--sm { height: 30px; padding: 0 10px; font-size: 12px; } .btn--lg { height: 44px; padding: 0 20px; font-size: 14px; } .btn--block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn svg { width: 15px; height: 15px; flex: 0 0 auto; } .input, select.input, textarea.input { width: 100%; height: 36px; padding: 0 11px; font-size: 13px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); color: var(--foreground); outline: none; } textarea.input { height: auto; padding: 9px 11px; resize: vertical; min-height: 76px; line-height: 1.6; } .input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); } .label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--foreground); } .field + .field { margin-top: 16px; } /* rounded-full pill group (dashboard ranges, order tabs) */ .pillgroup { display: inline-flex; gap: 2px; padding: 3px; background: var(--muted); border-radius: 999px; } .pillgroup button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; } .pillgroup button.is-on { background: var(--card); color: var(--foreground); font-weight: 600; box-shadow: var(--shadow-card); } /* filter chip with an embedded select */ .fchip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 12.5px; cursor: pointer; } .fchip:hover { border-color: var(--muted-foreground); } .fchip.is-on { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--primary); } .fchip .k { color: var(--muted-foreground); } .fchip .v { font-weight: 600; color: var(--foreground); } .fchip.is-on .v { color: var(--primary); } .fchip select { border: 0; background: none; outline: none; font-weight: 600; cursor: pointer; font-size: 12.5px; max-width: 170px; } .toggle { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--neutral-300); border: 0; cursor: pointer; flex: 0 0 auto; transition: background .16s ease; } .dark .toggle { background: var(--neutral-700); } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s ease; } .toggle.is-on { background: var(--primary); } .toggle.is-on::after { transform: translateX(16px); } .checkbox { width: 18px; height: 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--card); cursor: pointer; flex: 0 0 auto; display: grid; place-items: center; padding: 0; } .checkbox.is-on { background: var(--primary); border-color: var(--primary); } .checkbox svg { width: 12px; height: 12px; color: var(--primary-foreground); opacity: 0; } .checkbox.is-on svg { opacity: 1; } .checkbox:disabled { opacity: .4; cursor: not-allowed; } /* --------------------------------------------------------------- tabs ---- */ .tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0 11px; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; } .tab:hover { color: var(--foreground); } .tab.is-on { color: var(--foreground); font-weight: 600; border-bottom-color: var(--primary); } .tab .n { background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; } .tab.is-on .n { background: var(--primary); color: var(--primary-foreground); } /* -------------------------------------------------------------- table ---- */ .tablewrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-foreground); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; background: transparent; } .tbl th.num, .tbl td.num { text-align: right; } .tbl th.sortable { cursor: pointer; user-select: none; } .tbl th.sortable:hover { color: var(--foreground); } .tbl tbody td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr.clickable { cursor: pointer; } .tbl tbody tr.clickable:hover { background: color-mix(in srgb, var(--foreground) 3%, transparent); } .tbl tbody tr.is-sel { background: color-mix(in srgb, var(--primary) 7%, transparent); } .tbl .strong { font-weight: 600; color: var(--foreground); } .tbl .dim { color: var(--muted-foreground); font-size: 12px; } .linkish { color: var(--primary); font-weight: 500; cursor: pointer; } .linkish:hover { text-decoration: underline; } .empty { padding: 56px 20px; text-align: center; } .empty h4 { font-size: 15px; } .empty p { font-size: 13px; color: var(--muted-foreground); margin-top: 6px; } .pager { display: flex; align-items: center; gap: 14px; padding: 14px 4px 0; flex-wrap: wrap; } .pager__btns { margin-left: auto; display: flex; gap: 4px; } .pgbtn { min-width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 0 9px; color: var(--foreground); } .pgbtn:hover:not(:disabled) { background: var(--muted); } .pgbtn.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 600; } .pgbtn:disabled { opacity: .4; cursor: not-allowed; } /* ------------------------------------------------------------- badges ---- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.5; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .b-warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-deep); } .b-info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info-deep); } .b-primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .b-success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success-deep); } .b-destructive { background: color-mix(in srgb, var(--destructive) 15%, transparent); color: var(--destructive-deep); } .b-muted { background: var(--muted); color: var(--muted-foreground); } .b-chart2 { background: color-mix(in srgb, var(--chart-2) 15%, transparent); color: var(--chart-2); } .b-chart3 { background: color-mix(in srgb, var(--chart-3) 18%, transparent); color: var(--chart-1); } .dark .b-chart3 { color: var(--chart-4); } .dark .b-chart2 { color: var(--chart-4); } .dark .b-primary { color: var(--primary); } .chip2 { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 500; background: var(--muted); color: var(--muted-foreground); } .chip2--out { background: var(--card); border: 1px solid var(--border); } .thumb { width: 38px; height: 38px; border-radius: var(--radius-sm); flex: 0 0 auto; display: grid; place-items: center; font-size: 17px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--feature-deep); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: 0 0 auto; font-family: var(--font-display); } /* ------------------------------------------------------------ helpers ---- */ .row { display: flex; align-items: center; gap: 10px; } .row--wrap { flex-wrap: wrap; } .row--top { align-items: flex-start; } .col { display: flex; flex-direction: column; } .g4x { gap: 4px } .g6x { gap: 6px } .g8x { gap: 8px } .g10x { gap: 10px } .g12x { gap: 12px } .g16x { gap: 16px } .g20x { gap: 20px } .g24x { gap: 24px } .mt4 { margin-top: 4px } .mt6 { margin-top: 6px } .mt8 { margin-top: 8px } .mt12 { margin-top: 12px } .mt16 { margin-top: 16px } .mt20 { margin-top: 20px } .mt24 { margin-top: 24px } .push { margin-left: auto } .muted { color: var(--muted-foreground) } .f11 { font-size: 11px } .f12 { font-size: 12px } .f13 { font-size: 13px } .f15 { font-size: 15px } .f17 { font-size: 17px } .w500 { font-weight: 500 } .w600 { font-weight: 600 } .w700 { font-weight: 700 } .ok { color: var(--success-deep) } .bad { color: var(--destructive-deep) } .warn { color: var(--warning-deep) } .nowrap { white-space: nowrap } .sectitle { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); } .hr { height: 1px; background: var(--border); } .bar-track { height: 10px; border-radius: 999px; background: var(--muted); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; } .kv { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 9px 16px; font-size: 13px; align-items: baseline; } .kv dt { color: var(--muted-foreground); } .kv dd { margin: 0; color: var(--foreground); font-weight: 500; } /* -------------------------------------------------------------- modal ---- */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; display: grid; place-items: center; padding: 4vh 4vw; animation: fade .15s ease; } @keyframes fade { from { opacity: 0 } } .modal { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); width: min(880px,100%); max-height: 92vh; overflow: auto; } .modal--sm { width: min(520px,100%) } .modal--lg { width: min(1180px,100%) } .modal__head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; position: sticky; top: 0; background: var(--card); z-index: 2; } .modal__body { padding: 20px 22px; } .modal__foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--card); } /* ------------------------------------------------------------- toasts ---- */ .toasts { position: fixed; right: 20px; bottom: 74px; z-index: 130; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .toast { background: var(--neutral-950); color: #fff; padding: 12px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-pop); max-width: 400px; display: flex; gap: 10px; align-items: flex-start; animation: slidein .22s cubic-bezier(.22,.8,.3,1); } @keyframes slidein { from { opacity: 0; transform: translateY(10px) } } .toast--ok { background: var(--success-deep) } .toast--bad { background: var(--destructive-deep) } .toast--warn { background: var(--warning-deep) } .toast small { display: block; font-weight: 400; opacity: .85; margin-top: 2px; } .toast svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; } /* --------------------------------------------------------------- auth ---- */ .authwrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--background); position: relative; } .authcard { width: 100%; max-width: 384px; background: var(--card); border-radius: var(--radius-card); padding: 32px; box-shadow: var(--shadow-card); } .authbrand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; } .authbrand .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--feature-deep); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; } .authbrand h1 { font-size: 20px; font-weight: 600; } .authbrand p { font-size: 13px; color: var(--muted-foreground); margin-top: 4px; } .authdiv { display: flex; align-items: center; gap: 12px; margin: 16px 0; } .authdiv .ln { flex: 1 1 auto; height: 1px; background: var(--border); } .authdiv span { font-size: 12px; color: var(--muted-foreground); } .authfoot { margin-top: 16px; text-align: center; font-size: 12px; color: var(--muted-foreground); } .policy { display: grid; gap: 4px; font-size: 12px; margin-top: 4px; } .policy li { color: var(--muted-foreground); } .policy li.ok { color: var(--success-deep); } .policy li.no { color: var(--destructive-deep); } /* -------------------------------------------------------------- floor ---- */ .floorwrap { min-height: 100vh; background: var(--background); display: grid; place-items: start center; padding: 0; } .floor { width: 100%; max-width: 480px; min-height: 100vh; background: var(--background); display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--border); } .floorbar { background: var(--card); border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; } .floorbar h1 { font-size: 17px; font-weight: 600; } .floorbar .sub { font-size: 11.5px; color: var(--muted-foreground); margin-top: 1px; } .floorbody { padding: 16px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; } .floorfoot { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--border); padding: 12px 16px; } .scanfield { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 12px; padding: 13px 15px; display: flex; align-items: center; gap: 13px; } .scanfield svg { color: var(--primary); flex: 0 0 auto; } .scanfield input { border: 0; background: none; outline: none; width: 100%; font-size: 14px; font-weight: 600; color: var(--primary); font-family: var(--font-mono); } .scanfield input::placeholder { color: var(--primary); opacity: .6; font-family: var(--font-sans); font-weight: 500; } .scanfield .hint { font-size: 10.5px; color: var(--muted-foreground); font-weight: 400; margin-top: 2px; } .parcel { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; } .parcel.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); } .parcel__sn { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--foreground); } .qty { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; } .qty--ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success-deep); } .qty--wait { background: var(--muted); color: var(--muted-foreground); } .qty--bad { background: color-mix(in srgb, var(--destructive) 15%, transparent); color: var(--destructive-deep); } .locgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .locbtn { padding: 13px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); font-size: 13px; font-weight: 600; color: var(--foreground); cursor: pointer; font-family: var(--font-mono); } .locbtn.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .camera { position: relative; border-radius: 12px; overflow: hidden; background: #151E2E; aspect-ratio: 4/3; } .camera__desk { position: absolute; inset: auto 0 0 0; height: 44%; background: #1C2739; border-top: 1px solid #31405A; } .camera__obj { position: absolute; border-radius: 8px; } .camera__box { position: absolute; border: 2.5px solid #34D399; border-radius: 8px; transition: opacity .2s ease; } .camera__tag { position: absolute; transform: translateY(-100%); margin-top: -6px; background: #34D399; color: #0B1220; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 5px; white-space: nowrap; font-family: var(--font-mono); } .camera__live { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; background: rgba(11,18,32,.8); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; } .camera__live .d { width: 6px; height: 6px; border-radius: 50%; background: #F87171; animation: blink 1.1s infinite; } @keyframes blink { 50% { opacity: .25 } } .verdict { border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; } .verdict--ok { background: #064E3B; color: #ECFDF5 } .verdict--bad { background: #7F1D1D; color: #FEF2F2 } .verdict__m { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; } .verdict--ok .verdict__m { background: #10B981; color: #052e21 } .verdict--bad .verdict__m { background: #F87171; color: #450a0a } .verdict h4 { color: inherit; font-size: 16px } .verdict p { font-size: 12px; opacity: .85; margin-top: 3px } .stationcard { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); cursor: pointer; text-align: left; width: 100%; } .stationcard:hover { border-color: var(--primary); } .stationcard:disabled { opacity: .5; cursor: not-allowed; } .stationcard__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; } .stationcard h4 { font-size: 15px } .stationcard p { font-size: 12px; color: var(--muted-foreground); margin-top: 2px } /* ------------------------------------------------------------ demo bar --- */ .demobar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 120; background: rgba(30,32,34,.96); color: #fff; border-radius: 999px; padding: 6px 8px 6px 15px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-pop); font-size: 12px; backdrop-filter: blur(8px); max-width: calc(100vw - 24px); } .demobar__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: #A1A6AE; white-space: nowrap; } .demobar__sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); flex: 0 0 auto; } .demobar button { background: rgba(255,255,255,.1); border: 0; color: #fff; font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .demobar button:hover { background: rgba(255,255,255,.2); } .demobar button.is-on { background: var(--brand-600); } @media (max-width: 760px) { .demobar__tag { display: none } .demobar { padding-left: 10px; font-size: 11px } } .tourcard { position: fixed; right: 18px; bottom: 68px; z-index: 125; width: min(340px, calc(100vw - 36px)); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: 18px; border: 1px solid var(--border); } .tourcard h4 { font-size: 15px } .tourcard p { font-size: 13px; color: var(--muted-foreground); margin-top: 8px; line-height: 1.6 } .tourcard__n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--muted-foreground) } /* ---------------------------------------------------------- responsive --- */ .hamburger { display: none } @media (max-width: 1023px) { .rail { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; transform: translateX(-100%); transition: transform .22s cubic-bezier(.22,.8,.3,1); width: var(--rail-w) !important; } .app.is-drawer .rail { transform: none; } .app.is-drawer::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39; } .hamburger { display: grid } .rail__collapse { display: none } .topbar__search { display: none } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important } }