/* Gould Hall web shell — modern dark dashboard. App shell (sidebar + topbar + content) with a clean, professional ERP feel. */ :root { --bg: #10171e; --sidebar: #0b1118; --panel: #161f29; --panel-2: #1c2731; --row-alt: #131c25; --border: #243039; --border-bright: #31414e; --ink: #e6edf3; --ink-dim: #8b98a5; --ink-faint: #5f6e7b; --accent: #3fb950; /* green */ --accent-2: #58a6ff; /* blue links / active */ --amber: #d29922; --danger: #f85149; --link: #58a6ff; --field-bg: #0c141b; --topbar-bg: rgba(16,23,30,0.85); --scrollbar-thumb: rgba(255,255,255,0.12); --scrollbar-thumb-hover: rgba(255,255,255,0.24); --ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Liberation Mono", monospace; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.4); } /* Light theme — applied when */ :root[data-theme="light"] { --bg: #f4f6f9; --sidebar: #ffffff; --panel: #ffffff; --panel-2: #eef2f6; --row-alt: #f7f9fb; --border: #e1e6ec; --border-bright: #c7cfd9; --ink: #1a2330; --ink-dim: #5a6675; --ink-faint: #8a96a5; --accent: #2da44e; --accent-2: #0969da; --amber: #9a6700; --danger: #cf222e; --link: #0969da; --field-bg: #ffffff; --topbar-bg: rgba(255,255,255,0.9); --shadow: 0 1px 3px rgba(140,149,159,0.18); --scrollbar-thumb: rgba(0,0,0,0.18); --scrollbar-thumb-hover: rgba(0,0,0,0.32); } * { box-sizing: border-box; } /* Subtle, theme-aware scrollbars — slim translucent thumb that blends into any background and only firms up on hover. Firefox uses scrollbar-width/color; Chromium/WebKit use the ::-webkit rules. */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Always reserve the scrollbar gutter so the layout doesn't shift sideways when a page is short (no scrollbar) vs tall (scrollbar present) — keeps content in a fixed position across navigations. */ html { font-size: 15px; scrollbar-gutter: stable; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); line-height: 1.5; } a { color: var(--link); } /* ---------- App shell ---------- */ .app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } .sidebar { background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border); } .brand-logo { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #2ea043); color: #04210b; font-weight: 800; display: grid; place-items: center; font-size: 1.05rem; } .brand-text { display: flex; flex-direction: column; font-weight: 700; line-height: 1.15; } .brand-text small { font-weight: 500; color: var(--ink-dim); font-size: 0.7rem; } .side-nav { padding: 10px 8px; overflow-y: auto; flex: 1; } .side-head { color: var(--ink-faint); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.8px; padding: 14px 10px 6px; } .side-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: var(--ink-dim); text-decoration: none; font-size: 0.9rem; } .side-link:hover { background: var(--panel); color: var(--ink); } .side-link.active { background: var(--panel-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); } .side-code { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 5px; background: #0f1c14; color: var(--accent); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; } .side-foot { padding: 12px 16px; border-top: 1px solid var(--border); color: var(--ink-faint); font-size: 0.72rem; font-family: var(--mono); } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 5; } .crumb { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .crumb-mod { color: var(--accent); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.4px; } .crumb-sep { color: var(--ink-faint); } .crumb-title { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumb-prog { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-dim); border: 1px solid var(--border-bright); border-radius: 5px; padding: 1px 6px; } .topsearch { margin-left: auto; position: relative; } .suggest-box { position: absolute; top: calc(100% + 4px); right: 0; width: 340px; max-width: 70vw; background: var(--panel); border: 1px solid var(--border-bright); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); overflow: hidden; z-index: 20; } .lookup-box { left: 0; right: auto; width: 100%; min-width: 280px; } .rec-chips { margin-top: 6px; font-size: 0.82rem; color: var(--ink-dim); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .rec-chips .rec-lbl { color: var(--ink-dim); } .rec-chips a { background: var(--field-bg); border: 1px solid var(--border); border-radius: 12px; padding: 2px 10px; color: var(--ink); text-decoration: none; } .rec-chips a:hover { border-color: var(--accent); } .rec-chips .rec-sep { color: var(--border); } .suggest-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; text-decoration: none; border-bottom: 1px solid var(--border); } .suggest-item:last-child { border-bottom: none; } .suggest-item:hover, .suggest-item.active { background: var(--panel-2); } .suggest-item .s-label { color: var(--ink); font-size: 0.88rem; } .suggest-item .s-sub { color: var(--ink-dim); font-size: 0.74rem; font-family: var(--mono); } .topsearch input { width: 230px; background: var(--panel); border: 1px solid var(--border-bright); border-radius: 18px; padding: 7px 14px; color: var(--ink); font-family: var(--ui); font-size: 0.85rem; } .topsearch input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(88,166,255,0.25); } .userbox { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; } .company-chip { background: rgba(63,185,80,0.12); color: var(--accent); border: 1px solid var(--border-bright); border-radius: 12px; padding: 2px 10px; font-size: 0.74rem; font-weight: 600; } .data-fresh { color: var(--ink-dim); border: 1px solid var(--border-bright); border-radius: 12px; padding: 2px 10px; font-size: 0.72rem; font-family: var(--mono); white-space: nowrap; cursor: default; } .data-fresh.stale { color: var(--amber); border-color: var(--amber); } .theme-toggle { background: transparent; border: 1px solid var(--border-bright); color: var(--ink-dim); border-radius: 6px; padding: 2px 9px; cursor: pointer; font-size: 0.9rem; line-height: 1.2; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-dim); background: transparent; } .user-name { font-weight: 600; } .user-role { color: var(--amber); font-size: 0.72rem; border: 1px solid var(--border-bright); border-radius: 10px; padding: 1px 8px; } .user-out { color: var(--ink-dim); text-decoration: none; } .user-out:hover { color: var(--danger); } /* Account menu — collapses the per-user links into one dropdown to de-clutter the topbar. */ .usermenu { position: relative; } .usermenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 3px 9px 3px 3px; border: 1px solid var(--border-bright); border-radius: 20px; background: var(--panel); } .usermenu > summary::-webkit-details-marker { display: none; } .usermenu > summary::marker { content: ""; } .usermenu > summary:hover { border-color: var(--ink-dim); } .usermenu > summary:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(88,166,255,0.25); } .user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #07210f; font-weight: 700; font-size: 0.72rem; flex: none; } .user-id { display: flex; flex-direction: column; line-height: 1.08; } .user-id .user-name { font-weight: 600; font-size: 0.8rem; } .user-id .user-sub { color: var(--ink-dim); font-size: 0.66rem; } .user-caret { color: var(--ink-dim); font-size: 0.7rem; transition: transform .15s; } .usermenu[open] .user-caret { transform: rotate(180deg); } .usermenu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 224px; background: var(--panel); border: 1px solid var(--border-bright); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); padding: 6px; z-index: 30; } .usermenu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; } .usermenu-head .mh-name { font-weight: 700; color: var(--ink); } .usermenu-head .mh-sub { color: var(--ink-dim); font-size: 0.72rem; } .usermenu-item { display: block; padding: 8px 10px; border-radius: 7px; color: var(--ink-dim); text-decoration: none; font-size: 0.82rem; white-space: nowrap; } .usermenu-item:hover { background: var(--field-bg); color: var(--ink); } .usermenu-item.danger:hover { color: var(--danger); } .usermenu-sep { height: 1px; background: var(--border); margin: 4px 2px; } .usermenu-tools { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; } .usermenu-tools .ut-label { font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-right: auto; } @media (max-width: 820px) { .user-id { display: none; } } /* Settings cog — Administration & Aptean Support, grouped out of the sidebar to de-clutter it. */ .cogmenu { position: relative; } .cogmenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; border: 1px solid var(--border-bright); color: var(--ink); border-radius: 6px; font-size: 1.15rem; line-height: 1; background: var(--panel-2); } .cogmenu > summary::-webkit-details-marker, .cogmenu > summary::marker { display: none; content: ""; } .cogmenu > summary:hover { color: var(--accent-2); border-color: var(--accent-2); } .cogmenu[open] > summary { color: var(--ink); border-color: var(--accent); } .cogmenu > summary:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(88,166,255,0.25); } .cogmenu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 420px; max-width: 92vw; max-height: min(72vh, 600px); overflow: auto; background: var(--panel); border: 1px solid var(--border-bright); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); padding: 8px; z-index: 30; } .cog-sec-head { font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); padding: 8px 6px 6px; } .cog-sub-head { font-size: 0.66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); padding: 6px 6px 4px; } .cog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .cog-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; color: var(--ink-dim); text-decoration: none; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cog-item:hover { background: var(--field-bg); color: var(--ink); } .cog-item .cog-ic { flex: none; width: 1.1em; text-align: center; } @media (max-width: 560px) { .cog-grid { grid-template-columns: 1fr; } } .crumb-help { color: var(--accent-2); text-decoration: none; font-size: 0.78rem; border: 1px solid var(--border-bright); border-radius: 5px; padding: 1px 8px; } .crumb-help:hover { border-color: var(--accent-2); background: rgba(88,166,255,0.12); } .bm-form { display: inline; margin: 0; } .bm-btn { background: transparent; border: 1px solid var(--border-bright); color: var(--ink-dim); border-radius: 5px; padding: 1px 8px; font-size: 0.9rem; cursor: pointer; line-height: 1.3; } .bm-btn:hover { color: var(--amber); border-color: var(--amber); background: transparent; } .bm-btn.on { color: var(--amber); border-color: var(--amber); } .content { padding: 22px 26px; flex: 1; max-width: 1280px; width: 100%; } .appfoot { display: flex; justify-content: space-between; align-items: center; padding: 8px 22px; border-top: 1px solid var(--border); color: var(--ink-faint); font-size: 0.74rem; } .foot-left { display: flex; align-items: center; gap: 12px; } .foot-muted { color: var(--ink-faint); } .statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .stat .n { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1.1; } .stat .l { font-size: 0.72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } .stat.alert .n { color: var(--amber); } /* Ask Gould Hall — chat assistant */ .chat { max-width: 820px; } .chat-log { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; min-height: 320px; max-height: 56vh; overflow-y: auto; } .chat-msg { display: flex; margin-bottom: 10px; } .chat-msg.user { justify-content: flex-end; } .chat-bubble { max-width: 80%; padding: 9px 13px; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; white-space: normal; } .chat-msg.bot .chat-bubble { background: var(--panel-2); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 3px; } .chat-msg.user .chat-bubble { background: var(--accent); color: #04210b; font-weight: 600; border-bottom-right-radius: 3px; } .chat-tools { margin-top: 7px; font-size: 0.72rem; color: var(--ink-dim); font-family: var(--mono); } .chat-link { margin-top: 6px; font-size: 0.82rem; } .chat-dots { letter-spacing: 2px; opacity: 0.6; } .chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .chat-chips .chip { background: var(--field-bg); border: 1px solid var(--border-bright); color: var(--ink-dim); border-radius: 14px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; } .chat-chips .chip:hover { color: var(--ink); border-color: var(--accent); } .chat-input-row { display: flex; gap: 8px; } .chat-input-row input { flex: 1; background: var(--field-bg); color: var(--ink); border: 1px solid var(--border-bright); border-radius: 8px; padding: 10px 14px; font-size: 0.92rem; } /* Ask Aptean — topbar button, floating button + slide-over panel */ .ask-btn { background: linear-gradient(135deg, var(--accent), #2ea043); color: #04210b; border: none; border-radius: 18px; padding: 7px 14px; font-weight: 700; font-size: 0.82rem; cursor: pointer; white-space: nowrap; } .ask-btn:hover { filter: brightness(1.06); } .ai-fab { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #2ea043); color: #04210b; font-size: 1.5rem; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 900; } .ai-fab:hover { transform: translateY(-2px); } /* Off-canvas panel: hidden (not just translated) when closed so its left box-shadow doesn't bleed a strip over the right edge of the screen on narrow/mobile viewports. */ .ai-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 96vw); background: var(--panel); border-left: 1px solid var(--border-bright); box-shadow: -14px 0 44px rgba(0,0,0,0.45); transform: translateX(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; z-index: 1100; display: flex; flex-direction: column; } .ai-panel.open { transform: translateX(0); visibility: visible; transition: transform 0.2s ease; } .ai-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--ink); } .ai-close { background: transparent; border: 1px solid var(--border-bright); color: var(--ink-dim); border-radius: 6px; padding: 2px 9px; cursor: pointer; line-height: 1.2; } .ai-panel .chat-log { flex: 1; border: 0; border-radius: 0; max-height: none; } .ai-panel .chat-chips { padding: 0 14px; } .ai-panel .chat-input-row { padding: 12px 14px; border-top: 1px solid var(--border); } /* "New in this release" feature grid on the dashboard */ .whatsnew { border-left: 3px solid var(--accent); } .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .feat { display: block; text-decoration: none; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: inherit; } a.feat:hover { border-color: var(--accent); transform: translateY(-1px); } .feat-ico { font-size: 1.3rem; } .feat-t { display: block; font-weight: 700; color: var(--ink); margin-top: 4px; } .feat-d { display: block; font-size: 0.82rem; color: var(--ink-dim); margin-top: 4px; line-height: 1.45; } .feat.info { background: var(--panel); } .feat kbd { background: var(--panel); border: 1px solid var(--border-bright); border-radius: 4px; padding: 0 5px; font-family: var(--mono); font-size: 0.72rem; } .edi-pre { background: var(--field-bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 0.78rem; color: var(--ink); white-space: pre; overflow-x: auto; max-height: 320px; overflow-y: auto; } .foot-link { background: transparent; border: 0; color: var(--ink-dim); cursor: pointer; font: inherit; padding: 0; display: inline-flex; align-items: center; gap: 5px; } .foot-link:hover { color: var(--ink); } .foot-link kbd { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-family: var(--mono); font-size: 0.72rem; } /* ---------- Headings ---------- */ h1.screen-title { font-size: 1.25rem; margin: 0 0 4px; font-weight: 700; } .screen-lead { color: var(--ink-dim); margin: 0 0 20px; font-size: 0.9rem; } /* ---------- Main menu cards ---------- */ .menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .menu-item { display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; transition: border-color .12s, transform .12s; } .menu-item:hover { border-color: var(--accent); transform: translateY(-1px); } .menu-item.disabled { opacity: 0.5; } .mi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mi-code { color: var(--accent); font-weight: 700; font-family: var(--mono); } .mi-name { color: var(--ink); font-weight: 700; } .mi-desc { color: var(--ink-dim); font-size: 0.85rem; margin-top: 6px; } .badge { font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border-bright); color: var(--ink-dim); font-family: var(--mono); } .badge.needs { color: var(--amber); border-color: var(--amber); } /* ---------- Forms ---------- */ form.inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 0.74rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.5px; } input[type=text], input[type=number], input[type=password], input[type=search], input:not([type]), input[type=date], input[type=email], input[type=tel], select { background: var(--field-bg); color: var(--ink); border: 1px solid var(--border-bright); border-radius: 6px; padding: 8px 11px; font-family: var(--ui); font-size: 0.9rem; min-width: 160px; /* Uniform control height: with box-sizing:border-box the declared padding(8+8)+border(1+1) is identical for every control, yet line-height:normal resolves to an 18px content box for text/ number/search inputs but 20px for — so text inputs rendered 36px while selects/dates rendered 38px estate-wide. Pin a floor of 38px so every field lands on ONE baseline. min-height (not height) is deliberate: it lifts the short controls without capping the few bespoke-taller controls (e.g. the command palette's 54px search). */ min-height: 38px; } /* Deliberately-compact controls opt out of the 38px floor and keep their own smaller size: the grid toolbar (filter/sort/page/group bar) and inline editable-grid cells. Selectors are specific enough to beat the base rule's input[type=search] (0,1,1). */ .grid-bar .grid-search, .grid-group, .grid-size, .grid-views, .topsearch input, .gh-grid td input, .gh-grid td select { min-height: 0; } input:focus, select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(88,166,255,0.22); } label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); text-transform: none; font-size: 0.85rem; } button, .btn { background: var(--accent); color: #04210b; border: none; border-radius: 6px; padding: 8px 16px; font-family: var(--ui); font-weight: 700; cursor: pointer; font-size: 0.88rem; text-decoration: none; display: inline-block; } button:hover, .btn:hover { background: #46c95a; } .btn.ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--border-bright); } .btn.ghost:hover { color: var(--ink); border-color: var(--ink-dim); } /* Laptop-width topbar tidy: when a routine is open the crumb gains a code chip, bookmark star and Help link, which crowds the bar alongside the search + Jump + account. Shed the least-important bits as width drops (before the ≤820 wrap). Order: module label → Jump button text (Ctrl+K still works) → narrower search → drop the search box (routine search stays on ⌖ Jump / Ctrl+K + the sidebar "Search data"). */ @media (max-width: 1300px) { .crumb-mod { display: none; } .jump-btn .jump-label, .jump-btn kbd { display: none; } .topsearch input { width: 180px; } .crumb-help .help-label { display: none; } } @media (max-width: 1120px) { .topsearch { display: none; } } /* ---------- Panels & key/value ---------- */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow); } .panel h2 { font-size: 0.78rem; color: var(--accent); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 1px; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } /* Tidy multi-field entry form: stacked label/input cells in a responsive grid + a full-width actions row. */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; align-items: end; margin-top: 8px; } .form-grid input:not([type=checkbox]), .form-grid select { width: 100%; } .form-grid .fg-check { align-self: center; } .form-grid .fg-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 2px; } /* Password show/hide toggle (password-toggle.js wraps each password input in .pw-wrap). */ /* Button sits BESIDE the input (flex row), never overlapping it — so a click always lands on the button. */ .pw-wrap { display: flex; align-items: center; gap: 6px; } .pw-wrap input { flex: 1 1 auto; min-width: 0; width: auto; } .pw-toggle { flex: none; background: var(--panel-2); border: 1px solid var(--border-bright); border-radius: 6px; cursor: pointer; font-size: 0.72rem; font-weight: 700; line-height: 1; padding: 7px 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.4px; } .pw-toggle:hover { color: var(--ink); border-color: var(--ink-dim); } .kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; } .kv dt { color: var(--ink-dim); } .kv dd { margin: 0; color: var(--ink); } .addr-line { color: var(--ink); } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 0.87rem; } th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } th { color: var(--ink-dim); border-bottom: 1px solid var(--border-bright); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; } /* Compact row density — denser tables for power users (toggled in the topbar, persisted). */ :root[data-density="compact"] table { font-size: 0.8rem; } :root[data-density="compact"] th, :root[data-density="compact"] td { padding: 2px 8px; } tbody tr:nth-child(even) { background: var(--row-alt); } tbody tr:hover { background: var(--panel-2); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); } tfoot td { border-top: 1px solid var(--border-bright); color: var(--amber); font-weight: 700; } .neg { color: var(--danger); } a.acct { color: var(--link); text-decoration: none; } a.acct:hover { text-decoration: underline; } .mi-code, td .mi-code { font-family: var(--mono); } .status-OK { color: var(--accent); } .status-Referred { color: var(--amber); } .status-Stopped { color: var(--danger); } .notice { border: 1px solid var(--amber); color: var(--amber); background: rgba(210,153,34,0.08); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; } .error { border: 1px solid var(--danger); color: var(--danger); background: rgba(248,81,73,0.08); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; } .license-banner { padding: 10px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.9rem; border: 1px solid; } .license-banner a { font-weight: 700; margin-left: 6px; } .license-banner.grace { border-color: var(--amber); color: var(--amber); background: rgba(210,153,34,0.10); } .license-banner.expired { border-color: var(--danger); color: var(--danger); background: rgba(248,81,73,0.10); } /* Quick routine launcher (command palette) */ .jump-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--field-bg); color: var(--ink-dim); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .jump-btn:hover { border-color: var(--accent); color: var(--ink); } .jump-btn kbd { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 0.72rem; } .palette-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding-top: 12vh; } .palette-overlay[hidden] { display: none; } .palette-box { width: min(640px, 92vw); background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; } .palette-box input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: var(--field-bg); color: var(--ink); padding: 16px 18px; font-size: 1.05rem; outline: none; } .palette-list { list-style: none; margin: 0; padding: 6px; max-height: 56vh; overflow-y: auto; } .palette-item { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; } .palette-item.sel, .palette-item:hover { background: var(--panel-2); } .palette-code { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); min-width: 72px; } .palette-title { flex: 1; color: var(--ink); } .palette-sys { color: var(--ink-dim); font-size: 0.78rem; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; } .palette-empty { padding: 16px; color: var(--ink-dim); text-align: center; } /* Keyboard-shortcut cheat sheet (?) + the "g …" prefix hint */ .sc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding-top: 12vh; } .sc-overlay[hidden] { display: none; } .sc-box { width: min(680px, 92vw); background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; } .sc-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--ink); } .sc-close { background: transparent; border: 1px solid var(--border-bright); color: var(--ink-dim); border-radius: 6px; padding: 2px 9px; cursor: pointer; line-height: 1.2; } .sc-close:hover { color: var(--ink); border-color: var(--ink-dim); } .sc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; padding: 16px 18px; } .sc-group h4 { margin: 0 0 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); } .sc-group dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; align-items: center; } .sc-group dt { white-space: nowrap; } .sc-group dd { margin: 0; color: var(--ink-dim); font-size: 0.85rem; } .sc-box kbd { background: var(--panel-2); border: 1px solid var(--border-bright); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; font-family: var(--mono); font-size: 0.78rem; color: var(--ink); } .sc-hint { position: fixed; left: 16px; bottom: 16px; background: var(--panel-2); border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 6px 12px; font-family: var(--mono); font-size: 0.85rem; z-index: 1001; box-shadow: var(--shadow); } .sc-hint[hidden] { display: none; } @media (max-width: 640px) { .sc-cols { grid-template-columns: 1fr; } } /* Customisable dashboard */ .dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .dash-customise { position: relative; } .dash-customise > summary { list-style: none; cursor: pointer; background: var(--field-bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 0.85rem; color: var(--ink-dim); white-space: nowrap; } .dash-customise > summary:hover { border-color: var(--accent); color: var(--ink); } .dash-customise[open] > summary { border-color: var(--accent); color: var(--ink); } .dash-customise > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; width: 240px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); } .dash-customise > form .check { display: block; margin: 6px 0; } .dash-h { margin: 22px 0 10px; font-size: 1rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; } /* Charts (dependency-free) */ .ghchart { margin: 0 0 16px; } .chart-toggle { background: var(--field-bg); border: 1px solid var(--border); color: var(--ink-dim); border-radius: 8px; padding: 7px 14px; font-size: 0.85rem; cursor: pointer; } .chart-toggle:hover, .chart-toggle.open { border-color: var(--accent); color: var(--ink); } .chart-wrap { margin-top: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } .gbars { display: flex; flex-direction: column; gap: 7px; } .gbar-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr minmax(90px, auto); align-items: center; gap: 10px; } .gbar-label { color: var(--ink-dim); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gbar-track { background: var(--field-bg); border-radius: 5px; height: 16px; overflow: hidden; } .gbar-fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; } .gbar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 0.85rem; } .gdonut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .gleg { display: flex; flex-direction: column; gap: 5px; } .gleg-row { display: grid; grid-template-columns: 14px minmax(120px, 220px) auto; align-items: center; gap: 8px; font-size: 0.85rem; } .gleg-dot { width: 12px; height: 12px; border-radius: 3px; } .gleg-label { color: var(--ink-dim); } .gleg-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); } /* Whole-row clickable result lists */ table.linkrows tbody tr { cursor: pointer; } table.linkrows tbody tr:hover { background: var(--panel-2); } table.linkrows tbody tr:hover .acct { text-decoration: underline; } .muted { color: var(--ink-dim); } .totorow td { font-weight: 700; } .exportbar { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; } .exportbar a { font-size: 0.8rem; padding: 6px 13px; } /* ---------- Dashboard KPI tiles ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 22px; } .kpi-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; } .kpi-tile:hover { border-color: var(--accent); } .kpi-num { font-size: 1.7rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; } .kpi-label { color: var(--ink-dim); font-size: 0.82rem; } /* Intelligence panel rows (shared component _IntelligencePanel; moved here from SOBU01 inline so the Core partial is self-contained). */ .so2-ins{display:grid;grid-template-columns:18px 1fr;gap:9px;padding:8px 14px;border-bottom:1px dashed var(--border);font-size:.82rem;align-items:start;color:var(--ink)} .so2-ins:last-child{border-bottom:0} .so2-ins .ic{line-height:1.25} .so2-ins.risk .ic{color:var(--danger)} .so2-ins.warn .ic{color:var(--amber)} .so2-ins.info .ic{color:var(--accent-2)} /* rail/drawer muted helper text (shared by _IntelligencePanel empty-state + _Inspector) */ .so2-railmut{color:var(--ink-faint);font-size:.8rem} /* ---------- _Inspector slide-out drawer (shared shell; behaviour in inspector.js) ---------- */ .gh-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;opacity:0;visibility:hidden;transition:opacity .2s} .gh-drawer-bg.open{opacity:1;visibility:visible} .gh-drawer{position:fixed;top:0;right:0;height:100vh;width:min(420px,92vw);background:var(--panel);border-left:1px solid var(--border);box-shadow:-14px 0 40px rgba(0,0,0,.45);z-index:1101;transform:translateX(100%);visibility:hidden;transition:transform .22s ease, visibility 0s linear .22s;display:flex;flex-direction:column} .gh-drawer.open{transform:translateX(0);visibility:visible;transition:transform .22s ease} .gh-drawer-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)} .gh-drawer-h h3{margin:0;font-size:1rem;font-family:var(--mono)} .gh-drawer-b{padding:14px 16px;overflow:auto;flex:1;font-size:.86rem} .gh-drawer .sec{margin:0 0 16px} .gh-drawer .sec h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin:0 0 6px} .gh-drawer .wh{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:5px 0;border-bottom:1px dashed var(--border);font-size:.82rem} .gh-drawer .wh:last-child{border-bottom:0} .gh-drawer .pending{color:var(--ink-faint);font-size:.78rem;line-height:1.6} [data-inspect]{cursor:pointer} /* hover-intelligence card — peek a [data-inspect] item's price/stock without opening the drawer (behaviour in hovercard.js) */ .gh-hovercard{position:fixed;z-index:1200;max-width:300px;background:var(--panel);border:1px solid var(--border-bright);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);padding:10px 12px;font-size:.8rem;pointer-events:none;opacity:0;transition:opacity .12s} .gh-hovercard.show{opacity:1} .gh-hovercard .t{font-weight:700;margin-bottom:2px} .gh-hovercard .r{color:var(--ink-dim)} /* ---------- Simple bar chart ---------- */ .bar-chart { display: flex; align-items: flex-end; gap: 6px; padding-top: 6px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .bar-val { font-size: 0.72rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; } .bar-wrap { height: 120px; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .bar { width: 62%; min-height: 2px; background: linear-gradient(180deg, var(--accent), #2ea043); border-radius: 4px 4px 0 0; transition: height .2s; } .bar-col:hover .bar { background: linear-gradient(180deg, var(--accent-2), #2b7de0); } .bar-lbl { font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; } /* ---------- Data overview tiles + view-all ---------- */ .area-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .area-tile { display: flex; flex-direction: column; gap: 2px; text-decoration: none; background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 14px; } .area-tile:hover { border-left-color: var(--accent-2); background: #1f2a35; } .area-count { font-size: 1.5rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .area-label { color: var(--ink-dim); font-size: 0.82rem; } .panel h2 a.view-all { float: right; font-size: 0.78rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--accent-2); text-decoration: none; } .panel h2 a.view-all:hover { text-decoration: underline; } /* ---------- Reusable grid (filter/sort/page/group) ---------- */ .grid-bar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; } .grid-search { min-width: 200px; } .grid-search, .grid-group, .grid-size, .grid-views { font-size: 0.82rem; padding: 6px 9px; } .grid-group, .grid-size, .grid-views { background: var(--field-bg); color: var(--ink); border: 1px solid var(--border-bright); border-radius: 6px; } .grid-views-wrap { display: flex; gap: 6px; align-items: center; margin-left: auto; } .grid-views-wrap .btn { padding: 5px 10px; font-size: 0.78rem; } .grid-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.82rem; } .grid-pager .btn { padding: 4px 12px; font-size: 0.8rem; } .grid-info { color: var(--ink-dim); } th.grid-th { cursor: pointer; user-select: none; } th.grid-th:hover { color: var(--ink); } th.grid-th[data-sort]::after { content: " " attr(data-sort); color: var(--accent); font-size: 0.7rem; } tr.grid-group-row td { background: var(--panel-2); color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.5px; } /* ---------- Login (split hero + form) ---------- */ .login-body { margin: 0; min-height: 100vh; background: var(--bg); } .login-split { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; } .login-hero { position: relative; color: #eafff0; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(900px 500px at 15% 0%, #1f6f3f 0%, transparent 60%), linear-gradient(160deg, #0d3b22 0%, #0b1118 55%, #0b1118 100%); overflow: hidden; } .login-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(63,185,80,0.05) 1px, transparent 1px); background-size: 100% 28px; pointer-events: none; } .login-hero-top { display: flex; align-items: center; gap: 14px; z-index: 1; } .brand-logo.lg { width: 54px; height: 54px; border-radius: 13px; font-size: 1.4rem; } .login-hero-name { font-weight: 800; font-size: 1.15rem; } .login-hero-tag { color: #9ed8b2; font-size: 0.8rem; } .login-hero-mid { z-index: 1; max-width: 460px; } .login-hero-mid h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 14px; font-weight: 800; letter-spacing: -0.5px; } .login-hero-mid p { color: #b8e6c8; font-size: 1rem; margin: 0 0 20px; } .login-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .login-points li { position: relative; padding-left: 26px; color: #d6f5e0; font-size: 0.92rem; } .login-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #04210b; background: var(--accent); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; } .login-hero-foot { z-index: 1; color: #7fb893; font-size: 0.76rem; } .login-form-pane { display: grid; place-items: center; padding: 32px; background: var(--bg); } .login-card { width: 380px; max-width: 100%; } .login-card-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 4px; } .login-card-sub { color: var(--ink-dim); font-size: 0.9rem; margin: 0 0 22px; } .seg-label { display: block; font-size: 0.74rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .company-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .company-opt { cursor: pointer; } .company-opt input { position: absolute; opacity: 0; pointer-events: none; } .company-pill { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border-bright); border-radius: 10px; padding: 12px 14px; transition: border-color .12s, background .12s; } .company-pill .company-code { font-family: var(--mono); font-weight: 800; color: var(--ink-dim); font-size: 0.78rem; } .company-pill .company-name { font-weight: 600; } .company-opt:hover .company-pill { border-color: var(--ink-dim); } .company-opt input:checked + .company-pill { border-color: var(--accent); background: rgba(63,185,80,0.10); box-shadow: 0 0 0 1px var(--accent) inset; } .company-opt input:checked + .company-pill .company-code { color: var(--accent); } .login-card .field { margin-bottom: 16px; } .login-card .field input { width: 100%; } .login-btn { width: 100%; margin-top: 8px; padding: 11px; font-size: 0.95rem; } @media (max-width: 800px) { .login-split { grid-template-columns: 1fr; } .login-hero { display: none; } .login-form-pane { align-items: start; padding-top: 8vh; } } /* ---------- Mobile launcher (/Mobile) + mobile-ready badge ---------- */ .mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .mtile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 14px; padding: 18px; min-height: 96px; } .mtile:active, .mtile:hover { border-color: var(--accent); transform: translateY(-1px); } .mtile .mt-ico { font-size: 1.6rem; } .mtile .mt-title { font-weight: 700; line-height: 1.2; } .mtile .mt-code { color: var(--ink-faint); font-family: var(--mono); font-size: 0.72rem; } .mobile-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(63,185,80,0.12); color: var(--accent); border: 1px solid var(--border-bright); border-radius: 12px; padding: 2px 10px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .nav-toggle { display: none; background: transparent; border: 1px solid var(--border-bright); color: var(--ink-dim); border-radius: 7px; padding: 4px 10px; cursor: pointer; font-size: 1.1rem; line-height: 1; } .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; } body.nav-open .nav-scrim { display: block; } /* ---------- Responsive: tablet (iPad) + phone ---------- */ @media (max-width: 820px) { .app { grid-template-columns: 1fr; } /* Sidebar becomes an off-canvas drawer toggled by the hamburger */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 264px; z-index: 999; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow); } body.nav-open .sidebar { transform: translateX(0); } .nav-toggle { display: inline-block; } .topbar { flex-wrap: wrap; gap: 8px; } .topsearch input { width: 100%; } .content { padding: 16px 14px; } /* Wide tables: let the panel scroll horizontally instead of overflowing the screen */ .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; } .panel table { min-width: 520px; } .cols, .kv, .sc-cols { grid-template-columns: 1fr; } /* Footer must wrap instead of forcing a fixed ~374px min-width (which pushed a horizontal scrollbar / collided the "shell" note with the clock on phones < ~375px). */ .appfoot { flex-wrap: wrap; gap: 6px 12px; row-gap: 6px; } .foot-left { flex-wrap: wrap; row-gap: 6px; } .appfoot .foot-muted { display: none; } .clock { white-space: nowrap; } /* Respect device safe areas (notch / rounded corners / home indicator) so the app chrome isn't clipped when installed to the home screen with viewport-fit=cover. env() is 0 on ordinary displays, so desktop / non-notch devices are unaffected. */ .topbar { padding-left: calc(22px + env(safe-area-inset-left)); padding-right: calc(22px + env(safe-area-inset-right)); padding-top: calc(12px + env(safe-area-inset-top)); } .content { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); } .appfoot { padding-bottom: calc(8px + env(safe-area-inset-bottom)); padding-left: calc(22px + env(safe-area-inset-left)); padding-right: calc(22px + env(safe-area-inset-right)); } .sidebar { padding-top: env(safe-area-inset-top); } } /* Installed PWA (added to home screen, no browser chrome): give it a tighter, app-like shell. Only applies in standalone display mode, so the desktop browser experience is unchanged. */ @media (display-mode: standalone), (display-mode: fullscreen) { .foot-link, .appfoot .foot-muted { display: none; } .ai-fab { bottom: calc(22px + env(safe-area-inset-bottom)); } } /* Horizontal-scroll wrapper for wide data grids — keeps every column reachable instead of clipping off the right edge of the panel. Applied to all .panel tables by grid.js. */ .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Forced mobile view (session toggle / mobile-mode user) — apply the drawer layout at ANY width */ body.force-mobile .app { grid-template-columns: 1fr; } body.force-mobile .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 264px; z-index: 999; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow); } body.force-mobile.nav-open .sidebar { transform: translateX(0); } body.force-mobile .nav-toggle { display: inline-block; } body.force-mobile .topbar { flex-wrap: wrap; gap: 8px; } body.force-mobile .content { padding: 16px 14px; } body.force-mobile .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; } body.force-mobile .cols, body.force-mobile .kv, body.force-mobile .sc-cols { grid-template-columns: 1fr; } body.force-mobile .side-link { min-height: 44px; padding-top: 11px; padding-bottom: 11px; } body.force-mobile .acct, body.force-mobile .btn, body.force-mobile .kpi-tile, body.force-mobile .mtile { min-height: 44px; } body.force-mobile input, body.force-mobile select, body.force-mobile textarea { font-size: 16px; } /* Touch devices: larger tap targets (Apple HIG ~44px) regardless of width */ @media (pointer: coarse) { .side-link, .acct, .btn, .kpi-tile, .menu-item, .mtile, .area-tile, .nav-toggle, .theme-toggle, .bm-btn, .user-out { min-height: 44px; } .side-link { padding-top: 11px; padding-bottom: 11px; } input, select, textarea, .btn { font-size: 16px; } /* 16px stops iOS auto-zoom on focus */ .btn { padding: 10px 16px; } } /* ---------- Print / Save-as-PDF: light, chrome stripped ---------- */ @media print { .sidebar, .topbar, .appfoot, .exportbar, form.inline, .no-print { display: none !important; } .app { display: block; } body { background: #fff; color: #111; } .content { max-width: none; padding: 0; } .panel { background: #fff; border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } a, h1.screen-title, .panel h2, .mi-code { color: #111 !important; } th { color: #111; border-bottom: 1px solid #333; } th, td { border-bottom: 1px solid #ddd; } tbody tr:nth-child(even) { background: #f6f6f6; } .neg { color: #b00; } } body.print .sidebar, body.print .topbar, body.print .appfoot, body.print .exportbar, body.print form.inline { display: none !important; } body.print { background: #fff; color: #111; } body.print .app { display: block; } body.print .content { max-width: none; } body.print .panel { background: #fff; border: 1px solid #ccc; box-shadow: none; } body.print a, body.print h1.screen-title, body.print .panel h2, body.print .mi-code { color: #111 !important; } body.print th { color: #111; } body.print tbody tr:nth-child(even) { background: #f6f6f6; } /* ---- Navigation loading bar ---- */ .nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 400; opacity: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px var(--accent-2); pointer-events: none; } /* ---- Accessibility: skip link + visible focus ---- */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 500; background: var(--panel); color: var(--text, inherit); border: 1px solid var(--border-bright); border-radius: 8px; padding: 8px 14px; transition: top .15s; } .skip-link:focus { top: 8px; outline: 2px solid var(--accent-2); } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; } @media print { .nav-progress, .skip-link { display: none !important; } } /* ---- Voice mic (#19) ---- */ .voice-mic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-bright); background: var(--panel-2); color: var(--text, inherit); cursor: pointer; font-size: 1rem; line-height: 1; } .voice-mic:hover:not(:disabled) { border-color: var(--accent-2); } .voice-mic:disabled { opacity: .4; cursor: default; } .voice-mic.listening { background: rgba(214,73,42,.18); border-color: #d6492a; animation: voicePulse 1.1s ease-in-out infinite; } @keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,73,42,.5); } 50% { box-shadow: 0 0 0 6px rgba(214,73,42,0); } } /* "Try saying…" example command chips beside the mic. */ .voice-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 8px; } .voice-hints-label { color: var(--ink-dim); font-size: 0.72rem; font-weight: 600; } .voice-hints .vchip { background: transparent; border: 1px dashed var(--border-bright); color: var(--ink-dim); border-radius: 12px; padding: 3px 9px; font-size: 0.74rem; cursor: pointer; } .voice-hints .vchip:hover { color: var(--ink); border-style: solid; border-color: var(--accent-2); } /* ---- Auto-logout warning ---- */ .idle-overlay { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); } .idle-overlay.show { display: flex; } .idle-box { background: var(--panel); color: var(--text, inherit); border: 1px solid var(--border-bright); border-radius: 12px; padding: 22px 26px; max-width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.45); text-align: center; } .idle-box h3 { margin: 0 0 8px; } .idle-box p { margin: 0 0 16px; color: var(--ink-dim, inherit); } .idle-actions { display: flex; gap: 10px; justify-content: center; } /* ---- Mode badge (LIVE / UAT / Demo) #20 ---- */ .mode-badge { font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; text-transform: uppercase; white-space: nowrap; } .mode-badge.live { color: #1a7f37; background: rgba(63,185,80,.14); border-color: rgba(63,185,80,.5); } .mode-badge.uat { color: #9a6700; background: rgba(214,160,42,.16); border-color: rgba(214,160,42,.55); } .mode-badge.demo { color: #0a5bd6; background: rgba(88,166,255,.16); border-color: rgba(88,166,255,.55); } /* ---- UX polish bundle (toasts, copy affordance, sticky headers, back-to-top) ---- */ /* Toast notifications (window.ghToast) */ .gh-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .gh-toast { pointer-events: auto; min-width: 180px; max-width: 360px; padding: 10px 14px; border-radius: 8px; background: var(--panel-2); color: var(--text, inherit); border: 1px solid var(--border-bright); box-shadow: 0 8px 28px rgba(0,0,0,.35); font-size: .88rem; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; } .gh-toast.show { opacity: 1; transform: translateY(0); } .gh-toast.ok { border-left: 3px solid var(--accent); } .gh-toast.warn { border-left: 3px solid #d6a02a; } .gh-toast.error { border-left: 3px solid #d6492a; } /* Copy affordance: codes are clickable to copy */ .mi-code { cursor: copy; } /* Sticky table headers: long tables scroll inside their wrapper, header stays put. Short/paged tables (<=75vh) are unaffected since max-height only caps. */ .grid-scroll { max-height: 75vh; } .panel table thead th, table.grid thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); } /* Back-to-top button */ .back-to-top { position: fixed; right: 18px; bottom: 70px; z-index: 60; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-bright); background: var(--panel-2); color: var(--text, inherit); font-size: 1.1rem; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; box-shadow: 0 4px 16px rgba(0,0,0,.3); } .back-to-top.show { opacity: .9; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { opacity: 1; border-color: var(--accent-2); } /* Print: tables print in full (no internal scroll/sticky), hide the FAB */ @media print { .grid-scroll { max-height: none !important; overflow: visible !important; } .panel table thead th { position: static !important; } .back-to-top, .gh-toasts { display: none !important; } } /* ---- UX polish bundle 2 (2026-07-16): cell-copy, toast close/action, pinned records, skeleton/spinner, richer empty-state, print hardening. All token-driven → light/dark aware. ---- */ /* Hover copy button that floats over the currently-hovered grid cell (see copy.js). */ .gh-cell-copy { position: fixed; z-index: 65; width: 20px; height: 20px; padding: 0; line-height: 18px; text-align: center; font-size: .8rem; border: 1px solid var(--border-bright); border-radius: 5px; background: var(--panel-2); color: var(--ink-dim); cursor: copy; opacity: 0; pointer-events: none; transition: opacity .12s ease; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .gh-cell-copy.show { opacity: .9; pointer-events: auto; } .gh-cell-copy:hover { opacity: 1; color: var(--text, inherit); border-color: var(--accent-2); } /* Toast internals — message + optional action + manual close (×). */ .gh-toast { display: flex; align-items: center; gap: 10px; } .gh-toast-msg { flex: 1 1 auto; } .gh-toast-close { flex: 0 0 auto; background: transparent; border: none; color: var(--ink-dim); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 2px; } .gh-toast-close:hover { color: var(--text, inherit); } .gh-toast-action { flex: 0 0 auto; background: transparent; border: 1px solid var(--border-bright); color: var(--accent-2); border-radius: 6px; font-size: .8rem; padding: 2px 9px; cursor: pointer; } .gh-toast-action:hover { border-color: var(--accent-2); } /* Pinned records — sidebar list, unpin control, recent-chip star, breadcrumb pin toggle. */ .side-pins { margin-top: 4px; } .side-pins .side-link { position: relative; padding-right: 26px; } .pin-remove { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--ink-faint); cursor: pointer; font-size: .78rem; opacity: 0; transition: opacity .12s; padding: 2px 4px; } .side-pins .side-link:hover .pin-remove, .pin-remove:focus-visible { opacity: .85; } .pin-remove:hover { color: var(--danger, #d6492a); opacity: 1; } .pin-star { background: transparent; border: none; cursor: pointer; color: var(--ink-faint); font-size: .9rem; line-height: 1; padding: 0 3px; vertical-align: middle; } .pin-star.on, .pin-star:hover { color: #d6a02a; } .crumb-pin { background: transparent; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; opacity: .75; } .crumb-pin:hover, .crumb-pin.on { opacity: 1; } /* Loading skeletons + spinner for slow SQL-backed content (see progress.js helpers). */ .gh-skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ink-faint) 16%, transparent); border-radius: 6px; } .gh-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink-faint) 22%, transparent), transparent); animation: ghShimmer 1.3s infinite; } .gh-skeleton-text { height: .8em; margin: .4em 0; } @keyframes ghShimmer { 100% { transform: translateX(100%); } } .gh-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--ink-faint) 35%, transparent); border-top-color: var(--accent-2); border-radius: 50%; animation: ghSpin .7s linear infinite; vertical-align: middle; } @keyframes ghSpin { to { transform: rotate(360deg); } } .gh-loading-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; background: color-mix(in srgb, var(--panel) 68%, transparent); color: var(--ink-dim); font-size: .85rem; } @media (prefers-reduced-motion: reduce) { .gh-skeleton::after { animation: none; } .gh-spinner { animation-duration: 1.6s; } } /* Richer empty-state block (opt-in): icon + title + guidance + optional actions. */ .gh-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 20px; color: var(--ink-dim); } .gh-empty-state .ges-icon { font-size: 2rem; opacity: .55; line-height: 1; } .gh-empty-state .ges-title { font-weight: 700; color: var(--text, inherit); } .gh-empty-state .ges-hint { font-size: .85rem; color: var(--ink-faint); max-width: 48ch; } .gh-empty-state .ges-actions { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } /* Print hardening: strip transient overlays/FABs and set sensible page margins. */ @page { margin: 14mm; } @media print { .ai-fab, .ai-panel, .idle-overlay, .gh-cell-copy, .crumb-pin, .voice-mic, .nav-scrim, .gh-spinner, .gh-loading-overlay { display: none !important; } } /* ============================================================ Cosmetic polish batch (2026-06-21) — quick wins, no new markup needed. ============================================================ */ /* Status pills/badges (e.g. invoice Posted/Unposted, account status). */ .pill { display: inline-flex; align-items: center; gap: .3em; padding: .12em .6em; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--panel-2); color: var(--ink-dim); border: 1px solid var(--border); vertical-align: middle; line-height: 1.5; white-space: nowrap; } .pill.ok { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); } .pill.warn { background: color-mix(in srgb, #d29922 18%, transparent); color: #d29922; border-color: color-mix(in srgb, #d29922 40%, transparent); } .pill.bad { background: color-mix(in srgb, #f85149 18%, transparent); color: #f85149; border-color: color-mix(in srgb, #f85149 40%, transparent); } .pill.info { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); } /* Branded text selection + caret/native-control accent (date pickers, checkboxes, range). */ ::selection { background: color-mix(in srgb, var(--accent-2) 35%, transparent); } input, select, textarea { accent-color: var(--accent); caret-color: var(--accent); } /* Smooth in-page anchor scrolling (respecting reduced-motion). */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Subtle press feedback on buttons/links-as-buttons. */ .btn:active, button:active { transform: translateY(1px); } /* Friendlier empty-state for "no rows" cells (the muted colspan placeholder). */ .panel table td.muted[colspan] { text-align: center; font-style: italic; padding: 1.15rem; color: var(--ink-faint); } /* Keep the export bar tidy + breathing room above tables. */ .exportbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* Anchored sections clear the sticky topbar when smooth-scrolled to. */ :target { scroll-margin-top: 84px; } /* Success / info notice variants (sibling to the amber .notice + red .error). */ .notice.ok { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .notice.info { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 9%, transparent); } /* Smooth row hover (pairs with the existing tbody hover rule). */ tbody tr { transition: background-color .12s ease; } /* Consistent disabled affordance for buttons. */ button:disabled, .btn:disabled, .btn[disabled], button[disabled] { opacity: .55; cursor: not-allowed; } /* ============================================================================ GOULD HALL SHARED UI KIT (gh-*) — the premium card/field/grid standard distilled from SOBU01 (so2-*) + the /SalesOrderEntryMock design, built on the site.css design TOKENS so it follows light/dark/density automatically. Use these on any routine to bring it up to the standard. Scoped class names (gh-*) + a .gh-form input wrapper, so adopting a page never restyles others. ============================================================================ */ .gh-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; } .gh-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* fieldsets default to min-inline-size:min-content, so a wide table inside grows the card past the viewport and its overflow-x:auto wrapper never scrolls; neutralise that so the wrapper scrolls instead */ fieldset.gh-card { min-width: 0; max-width: 100%; } .gh-card-pad { padding: 16px; } .gh-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .gh-card-h h2, .gh-card-h h3 { margin: 0; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); } .gh-card-b { padding: 16px; } .gh-section-title { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); margin: 0 0 12px; } .gh-label { display: block; color: var(--ink-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .gh-muted { color: var(--ink-dim); } .gh-empty { color: var(--ink-faint); font-size: .85rem; padding: 8px 0; } .gh-req::after { content: " *"; color: var(--danger); } /* fields: a .gh-field block (label above control); inputs themed via the .gh-form wrapper OR the explicit classes */ .gh-field { margin-bottom: 12px; } .gh-field > label { display: block; color: var(--ink-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .gh-form input, .gh-form select, .gh-form textarea, .gh-input, .gh-select, .gh-textarea { width: 100%; background: var(--field-bg); color: var(--ink); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: .88rem; box-sizing: border-box; } .gh-form textarea, .gh-textarea { min-height: 64px; resize: vertical; line-height: 1.4; } /* uniform control geometry: selects/date inputs have larger intrinsic minimums and heights, which overflow grid columns and wobble baselines - pin both (checkbox/radio excluded) */ .gh-form input:not([type=checkbox]):not([type=radio]), .gh-form select, .gh-input, .gh-select { min-width: 0; height: 38px; } .gh-form input:focus, .gh-form select:focus, .gh-form textarea:focus, .gh-input:focus, .gh-select:focus, .gh-textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent); } /* buttons */ .gh-btn { border: 1px solid var(--border-bright); background: var(--panel-2); color: var(--ink); border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: .82rem; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; font-family: inherit; text-decoration: none; } .gh-btn:hover { border-color: var(--accent-2); } .gh-btn.primary { background: linear-gradient(135deg, var(--accent), #2ea043); border-color: var(--accent); color: #04210b; } .gh-btn.ghost { background: transparent; } .gh-btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; } /* a clean, token-themed table */ .gh-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .gh-table th { text-align: left; padding: 8px 10px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); background: var(--panel-2); border-bottom: 1px solid var(--border); } .gh-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .gh-table tbody tr:hover { background: var(--row-alt); } .gh-table td.num, .gh-table th.num { text-align: right; } /* info / status banner (e.g. "write routine - drafts only") */ .gh-banner { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; font-size: .86rem; background: var(--panel); color: var(--ink); } .gh-banner.info { border-left-color: var(--accent-2); } .gh-banner.ok { border-left-color: var(--accent); } .gh-banner.warn { border-left-color: var(--amber); } .gh-banner.err { border-left-color: var(--danger); } .gh-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 9px; font-size: .7rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .gh-badge.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); } /* status / value utilities */ .gh-green { color: var(--accent); } .gh-amber { color: var(--amber); } .gh-red { color: var(--danger); } .gh-val { font-weight: 700; } .gh-link { color: var(--accent-2); font-weight: 600; font-size: .74rem; text-decoration: none; cursor: pointer; } .gh-link:hover { text-decoration: underline; } .gh-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .gh-okrow { display: flex; gap: 8px; align-items: center; color: var(--accent); font-weight: 700; font-size: .8rem; } .gh-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* editable data grid (transaction entry: order/journal/PO lines) - inline inputs, right-aligned numerics */ .gh-grid { width: 100%; border-collapse: collapse; font-size: .86rem; } .gh-grid th, .gh-grid td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; } .gh-grid th { color: var(--ink-faint); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--panel-2); } .gh-grid td.num, .gh-grid th.num { text-align: right; } .gh-grid td input { padding: 6px 8px; text-align: inherit; } .gh-grid td.num input { text-align: right; } .gh-grid tbody tr:hover { background: var(--row-alt); } .gh-grid tr.is-hidden { display: none; } /* sticky always-visible totals + actions bar (transaction screens) */ .gh-stickybar { position: sticky; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 16px; padding: 12px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(9px); box-shadow: 0 -6px 22px rgba(0,0,0,.20); } .gh-sticktotals { display: flex; gap: 26px; flex-wrap: wrap; } .gh-sticktotals .lab { display: block; color: var(--ink-faint); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; } .gh-sticktotals .val { font-size: 1.08rem; font-weight: 800; }