/* AIM — inventory management UI. Light and dark are both defined here as tokens on :root. Which one is in effect is now an explicit per-browser choice (client/themes.ahl's dark/light toggle sets data-mode="dark"|"light" on , persisted to localStorage) rather than something every user could drift on their own — see the "Organization appearance" README section for why: the *colour theme* (which of these tokens' accent gets overridden — see .theme- further down and apply_brand_theme() in client/themes.ahl) is set once, for everyone, by the super admin, and dark/light is the one thing left for an individual to pick. Dark is the default: the bare :root below is the dark palette, so it is what paints before JS has run (no system-preference check involved — a first-time visitor gets dark regardless of their OS setting) and what applies to any browser that has never made an explicit choice. :root[data-mode="light"] is the one override, applied by init_mode_toggle()/apply_mode() (client/themes.ahl) once a stored — or just-picked — preference says "light"; data-mode="dark" is set the same way but needs no separate block since it only ever restates the default. */ :root { --bg: #14161a; --surface: #1c1f25; --surface-2: #21242b; --border: #2e333c; --text: #e8eaee; --text-muted: #98a1ae; --accent: #a894ff; --accent-soft: #2a2547; --ok: #6ddba4; --ok-soft: #16301f; --warn: #e8b661; --warn-soft: #33290f; --danger: #f2867d; --danger-soft: #3a1d1b; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3); --radius: 10px; } :root[data-mode="light"] { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #fafbfc; --border: #e2e5ea; --text: #16181d; --text-muted: #666e7a; --accent: #5b3fd6; --accent-soft: #efeafc; --ok: #17794a; --ok-soft: #e3f5ec; --warn: #9a6100; --warn-soft: #fdf1dc; --danger: #b3261e; --danger-soft: #fce9e7; --shadow: 0 1px 2px rgba(16, 18, 24, .06), 0 4px 12px rgba(16, 18, 24, .04); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); /* font-family split out from a `font:` shorthand so the font picker (client/themes.ahl) can override just the family, via --ayt-ui-font, on — the shorthand form would otherwise need every rule that sets it to also repeat size/line-height, or it would reset them to browser defaults. --ayt-ui-font is unset by default, so the fallback list here is what actually renders until a font is chosen. */ font-family: var(--ayt-ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-size: 15px; line-height: 1.5; } /* ── chrome ─────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 56px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; white-space: nowrap; } .brand-mark { font-weight: 700; letter-spacing: .06em; color: var(--accent); } .brand-word { color: var(--text-muted); font-size: 13px; } .nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; } .nav-link { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--text-muted); font-size: 14px; white-space: nowrap; } .nav-link:hover { background: var(--surface-2); color: var(--text); } .nav-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* Not signed in yet: the whole nav (its links do nothing — app.ahl has not started the router) and the appearance pickers' companions are hidden, leaving just the brand and the sign-in form itself. */ .is-pre-auth .nav, .is-pre-auth ayt-tag, .is-pre-auth .user-badge { display: none; } /* ── mobile nav toggle ───────────────────────────────────────────────────── #topbar-menu (org/nav/appearance/account) lays out exactly as it always did above the mobile breakpoint below — display:contents makes the wrapper itself invisible to layout, so its children flow straight into .topbar's flex row same as before this was introduced. .nav-toggle stays hidden up here too: there is nothing for it to open. */ .topbar-menu { display: contents; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; flex: 0 0 auto; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 16px; height: 2px; background: var(--text); border-radius: 1px; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; } .nav-toggle-bars::before { top: -5px; } .nav-toggle-bars::after { top: 5px; } .appearance-picker { padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12px; max-width: 120px; } .user-badge { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; } .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; opacity: 0; transition: opacity .15s; } .spinner.is-visible { opacity: 1; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner.is-visible { animation: none; } } .shell { max-width: 1180px; margin: 0 auto; padding: 24px; } .view-head { margin-bottom: 20px; } .view-head h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; } .subtitle { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; } .footer { display: flex; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 16px 24px 32px; color: var(--text-muted); font-size: 12px; } /* ── tiles ──────────────────────────────────────────────────────────────── */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .tile-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .tile-value { font-size: 24px; font-weight: 650; margin-top: 4px; letter-spacing: -.02em; } .tile-hint { color: var(--text-muted); font-size: 12px; margin-top: 2px; } .tile-warn { border-color: var(--warn); background: var(--warn-soft); } .tile-warn .tile-value { color: var(--warn); } .tile-calm .tile-value { color: var(--ok); } /* ── quick-link cards (dashboard "Manage" panels) ──────────────────────────── */ .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 16px; } .nav-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: var(--text); transition: border-color .15s ease, background .15s ease; } .nav-card:hover { border-color: var(--accent); background: var(--surface-2); } .nav-card-label { font-weight: 600; font-size: 14px; } .nav-card-hint { color: var(--text-muted); font-size: 12px; margin-top: 2px; } /* ── panels ─────────────────────────────────────────────────────────────── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .panel-head h2 { margin: 0; font-size: 15px; font-weight: 650; } .head-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ── tables ─────────────────────────────────────────────────────────────── */ /* Wide grids scroll inside their own container so the page body never does. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .grid { width: 100%; border-collapse: collapse; font-size: 14px; } .grid th, .grid td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); } .grid th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .grid tbody tr:last-child td { border-bottom: none; } .grid tbody tr:hover { background: var(--surface-2); } .align-right { text-align: right !important; font-variant-numeric: tabular-nums; } .muted { color: var(--text-muted); } .link { color: var(--accent); text-decoration: none; font-weight: 550; } .link:hover { text-decoration: underline; } /* ── badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-low { background: var(--warn-soft); color: var(--warn); } .badge-out { background: var(--danger-soft); color: var(--danger); } .badge-negative { background: var(--danger-soft); color: var(--danger); } /* ── activity feed ──────────────────────────────────────────────────────── */ .feed { list-style: none; margin: 0; padding: 0; } .feed-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 14px; } .feed-item:last-child { border-bottom: none; } .feed-body { flex: 1; min-width: 0; } .feed-time { color: var(--text-muted); font-size: 12px; white-space: nowrap; } .feed-kind { display: inline-block; min-width: 84px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; text-align: center; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .feed-receipt { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .feed-issue { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .feed-transfer { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .feed-adjust, .feed-count { background: var(--warn-soft); color: var(--warn); border-color: transparent; } /* ── forms ──────────────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; padding: 16px; } .field { display: flex; flex-direction: column; gap: 4px; } .field-label { font-size: 12px; font-weight: 600; color: var(--text-muted); } .field-hint { font-size: 11px; color: var(--text-muted); } .field-input, .search { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; width: 100%; } .field-input:focus, .search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .search { max-width: 280px; } .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); } .btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; text-decoration: none; display: inline-block; } .btn:hover { background: var(--surface-2); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { filter: brightness(1.08); background: var(--accent); } .btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; } .btn-danger:hover { background: var(--danger-soft); } .btn-quiet { padding: 4px 10px; font-size: 13px; color: var(--text-muted); } /* ── empty states ───────────────────────────────────────────────────────── */ .empty { padding: 40px 16px; text-align: center; } .empty-text { margin: 0; color: var(--text-muted); } .empty-hint { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; opacity: .8; } /* ── toasts ─────────────────────────────────────────────────────────────── */ .toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 14px; } .toast-text { flex: 1; } .toast-ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); } .toast-error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .toast-close { border: none; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .6; padding: 0 2px; } .toast-close:hover { opacity: 1; } @media (max-width: 640px) { .topbar { height: 52px; flex-wrap: nowrap; padding: 0 12px; gap: 10px; } .shell { padding: 16px; } .form-grid { grid-template-columns: 1fr; } /* The hamburger button appears, and #topbar-menu stops flowing inline (display:contents above) and instead becomes a dropdown panel anchored under the topbar — closed by default, opened by .is-open (toggled by init_nav_toggle() in client/ui.ahl, on a tap of #nav-toggle, a tap outside the open menu, or a tap on a link/button inside it). */ .nav-toggle { display: flex; } .topbar-menu { display: none; flex-direction: column; align-items: stretch; gap: 10px; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 52px); overflow-y: auto; padding: 12px 16px 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); z-index: 20; } .topbar-menu.is-open { display: flex; } .nav { flex-direction: column; overflow-x: visible; gap: 2px; flex: none; } .nav-link { padding: 12px 14px; } .appearance-picker, .appearance-picker.org-picker { max-width: none; width: 100%; } .user-badge { width: 100%; justify-content: space-between; } /* Comfortable tap targets, and >=16px input text so iOS Safari does not zoom the page in on focus (its own behaviour below that size, not something aim.css can turn off any other way). */ .field-input, .search, .appearance-picker { min-height: 40px; font-size: 16px; } .btn { min-height: 40px; } .btn-quiet { min-height: 32px; } .grid th, .grid td { padding: 8px 10px; } .footer { flex-direction: column; align-items: flex-start; gap: 4px; } } /* ── sign-in ────────────────────────────────────────────────────────────── */ .auth-shell { display: flex; justify-content: center; padding-top: 48px; } @media (max-width: 640px) { /* Less top padding than the desktop default above — worth less on a phone's shorter viewport, especially once the on-screen keyboard opens under the password field. */ .auth-shell { padding-top: 24px; } } .auth-panel { width: 100%; max-width: 360px; margin-bottom: 0; } .auth-panel .form-grid { grid-template-columns: 1fr; } /* ── account ────────────────────────────────────────────────────────────── */ .account-details { display: flex; flex-direction: column; gap: 8px; padding: 16px; font-size: 14px; } /* ── organization switcher ──────────────────────────────────────────────── */ .org-picker { max-width: 200px; font-weight: 600; } /* ── kanban board (client/views_projects.ahl) ───────────────────────────── */ .kanban-board { display: flex; align-items: flex-start; gap: 12px; padding: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .kanban-column { flex: 0 0 260px; scroll-snap-align: start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .kanban-column-head { display: flex; align-items: center; gap: 8px; } .kanban-column-head h3 { margin: 0; font-size: 13px; font-weight: 650; flex: 1; } .kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 8px; } .kanban-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 13px; } .kanban-card-title { font-weight: 600; } .kanban-card-desc { margin-top: 4px; color: var(--text-muted); font-size: 12px; } .kanban-card-assignee { margin-top: 4px; font-size: 12px; } .kanban-card-actions { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kanban-move { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; } .kanban-add-card { display: flex; gap: 6px; } .kanban-add-card .field-input { flex: 1; padding: 6px 8px; font-size: 13px; } .kanban-empty { padding: 4px 0; font-size: 12px; } .kanban-card-meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kanban-due { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .kanban-due-soon { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .kanban-due-overdue { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .kanban-comment-toggle { border: none; background: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 0; } .kanban-comment-toggle:hover { color: var(--text); } .kanban-comments-panel { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .kanban-comments { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; } .kanban-comment-head { display: flex; align-items: center; gap: 6px; font-size: 12px; } .kanban-comment-body { font-size: 12px; margin-top: 2px; white-space: pre-wrap; } .kanban-add-comment { display: flex; gap: 6px; } .kanban-add-comment .field-input { flex: 1; padding: 6px 8px; font-size: 12px; } .btn-icon { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; margin-left: auto; } .btn-icon:hover { color: var(--danger); } /* ── API tokens (client/views_auth.ahl) ────────────────────────────────── */ .token-created { margin: 0 16px 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-soft); border: 1px solid var(--ok); } .token-created p { margin: 0 0 8px; font-size: 13px; color: var(--text); } .token-value { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .token-value code { flex: 1; min-width: 0; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; overflow-x: auto; white-space: nowrap; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .kanban-add-column { flex: 0 0 220px; background: transparent; border: 1px dashed var(--border); align-items: stretch; } .kanban-add-column .field-input { margin-bottom: 8px; } .kanban-permission-form { grid-template-columns: 1fr; max-width: 360px; } .account-details .field-label { margin-right: 6px; } /* Below the mobile breakpoint (see the other @media (max-width: 640px) block further up for the topbar/nav/form changes) one column should nearly fill the screen — a fixed 260px reads fine at tablet widths but leaves an awkward sliver of the next column showing on a phone. Placed after the unconditional .kanban-column/.kanban-add-column rules above (both set the same flex-basis via the `flex` shorthand) so this actually wins the cascade instead of being overridden by them. */ @media (max-width: 640px) { .kanban-column { flex-basis: min(78vw, 320px); } .kanban-add-column { flex-basis: min(60vw, 240px); } } /* ── movement trend chart ────────────────────────────────────────────────── A plain inline SVG (client/views_dashboard.ahl's trend_chart_svg()), not an image — viewBox + preserveAspectRatio="none" is what lets it stretch to the panel's full width at any bar count without a resize observer. */ .trend-legend { display: flex; gap: 20px; padding: 12px 16px 0; font-size: 13px; color: var(--text-muted); } .trend-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .trend-legend-in { background: var(--ok); } .trend-legend-out { background: var(--danger); } .trend-chart { display: block; width: 100%; height: 200px; padding: 12px 16px 16px; box-sizing: border-box; } .trend-axis { stroke: var(--border); stroke-width: 1; } .trend-bar-in { fill: var(--ok); } .trend-bar-out { fill: var(--danger); }