/* ============================================================ iMplement ERP — Core Stylesheet (style.css) ------------------------------------------------------------ Design system: CSS variables, reset, app shell, sidebar, top bar, buttons, alerts, badges, tables, panels, toolbar, pagination, dropdowns, avatars and utilities. Branding preserved from the original app.css palette (dark theme · cyan primary · gold / violet / green accents). Self-contained: system font stack, no external CDN fonts. ============================================================ */ /* ─── Design tokens ─────────────────────────────────────── */ :root { /* Brand palette (unchanged from original branding) */ --bg: #0a0b10; --panel: #111218; --panel2: #16181f; --panel3: #1c1e27; --border: #252830; --border-lt: #1e2028; --ink: #eceef5; --ink-soft: #7a7f94; --ink-muted: #3d4155; --primary: #29c5f0; --primary-dim: rgba(41, 197, 240, 0.12); --primary-glow: rgba(41, 197, 240, 0.25); --gold: #f0b429; --gold-dim: rgba(240, 180, 41, 0.10); --violet: #7c3aed; --violet-dim: rgba(124, 58, 237, 0.12); --green: #10b981; --green-dim: rgba(16, 185, 129, 0.12); --red: #ef4444; --red-dim: rgba(239, 68, 68, 0.12); --radius: 8px; --radius-lg: 14px; --radius-sm: 6px; --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --ring: 0 0 0 3px var(--primary-glow); --sidebar-w: 260px; --topbar-h: 64px; --topbar-bg: rgba(10, 11, 16, 0.85); --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --transition: 0.16s ease; } /* ─── Light theme (toggled via data-theme on ) ─────── */ html[data-theme="light"] { --bg: #f3f4f9; --panel: #ffffff; --panel2: #f4f5fa; --panel3: #eaecf4; --border: #dcdfe9; --border-lt: #e7e9f1; --ink: #191c28; --ink-soft: #5a5f76; --ink-muted: #aeb3c6; --primary-dim: rgba(41, 197, 240, 0.14); --gold-dim: rgba(200, 140, 10, 0.12); --violet-dim: rgba(124, 58, 237, 0.10); --green-dim: rgba(16, 185, 129, 0.12); --red-dim: rgba(239, 68, 68, 0.10); --shadow: 0 8px 30px rgba(30, 34, 60, 0.12); --shadow-sm: 0 2px 8px rgba(30, 34, 60, 0.08); --topbar-bg: rgba(255, 255, 255, 0.85); } html[data-theme="light"] .alert--success { color: #067a54; } html[data-theme="light"] .alert--error { color: #b91c1c; } html[data-theme="light"] .alert--info { color: #0369a1; } html[data-theme="light"] .alert--warning { color: #92600a; } html[data-theme="light"] .badge--active, html[data-theme="light"] .badge--accepted, html[data-theme="light"] .badge--completed, html[data-theme="light"] .badge--confirmed, html[data-theme="light"] .badge--received { color: #067a54; } html[data-theme="light"] .badge--inactive, html[data-theme="light"] .badge--cancelled, html[data-theme="light"] .badge--rejected, html[data-theme="light"] .badge--expired { color: #b91c1c; } html[data-theme="light"] .badge--draft, html[data-theme="light"] .badge--pending, html[data-theme="light"] .badge--processing { color: #92600a; } html[data-theme="light"] .badge--sent, html[data-theme="light"] .badge--converted, html[data-theme="light"] .badge--shipped, html[data-theme="light"] .badge--delivered { color: #0369a1; } html[data-theme="light"] .badge--warn { color: #92600a; } html[data-theme="light"] .badge--info { color: #0369a1; } html[data-theme="light"] .role-pill { color: #6d28d9; } /* ─── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* The browser's own rule for [hidden] is display:none, but it comes from the user-agent stylesheet, which any author rule beats — so `.form-group { display: flex }` was quietly keeping hidden fields on screen. Conditional fields all over the app rely on the attribute, so it is restated here where it wins. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--ink); min-height: 100vh; line-height: 1.5; font-size: 14px; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } svg { width: 18px; height: 18px; flex-shrink: 0; } /* ─── App shell ─────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w); } .app-content { flex: 1; padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; } .app-foot { padding: 16px 32px; border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 12px; display: flex; gap: 8px; align-items: center; } .app-foot-sep { color: var(--ink-muted); } /* ─── Brand mark ────────────────────────────────────────── */ .brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--violet)); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -0.03em; } .brand-mark--lg { width: 48px; height: 48px; font-size: 18px; border-radius: 12px; } .brand-accent { color: var(--primary); } /* ─── Sidebar ───────────────────────────────────────────── */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 40; transition: transform var(--transition); } .sidebar-brand { padding: 18px 20px; border-bottom: 1px solid var(--border); } .brand-link { display: flex; align-items: center; gap: 12px; } .brand-text { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; } .nav-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: none; background: transparent; color: var(--ink-soft); border-radius: var(--radius); font-size: 13.5px; font-weight: 500; text-align: left; transition: background var(--transition), color var(--transition); } .nav-link:hover { background: var(--panel2); color: var(--ink); } .nav-link.is-active { background: var(--primary-dim); color: var(--primary); } .nav-ic { width: 18px; height: 18px; } .nav-link--muted { color: var(--ink-muted); } .nav-group { display: flex; flex-direction: column; } .nav-toggle .nav-caret { margin-left: auto; width: 15px; height: 15px; transition: transform var(--transition); } .nav-group.is-open .nav-caret { transform: rotate(90deg); } .nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; } .nav-group.is-open .nav-sub { grid-template-rows: 1fr; } .nav-sub-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 1px; } .nav-sub-link { /* Was a block with a 41px left pad faking the indent. Now the icon occupies that space, so the label still starts where it always did and the column of text stays aligned. */ display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 21px; color: var(--ink-soft); font-size: 13px; border-radius: var(--radius); } .nav-sub-ic { width: 15px; height: 15px; flex: 0 0 15px; /* never squeezed by a long label */ opacity: .75; } .nav-sub-link:hover { color: var(--ink); background: var(--panel2); } .nav-sub-link:hover .nav-sub-ic { opacity: 1; } .nav-sub-link.is-active { color: var(--primary); } .nav-sub-link.is-active .nav-sub-ic { opacity: 1; } .sidebar-foot { padding: 12px; border-top: 1px solid var(--border); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 39; } /* ─── Top bar ───────────────────────────────────────────── */ .topbar { position: sticky; top: 0; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); z-index: 30; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .topbar-sub { font-size: 12.5px; color: var(--ink-soft); font-weight: 400; } .sidebar-open { display: none; } .icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); background: var(--panel2); color: var(--ink-soft); border-radius: var(--radius); transition: var(--transition); } .icon-btn:hover { color: var(--ink); border-color: var(--primary); } .icon-btn--danger:hover { color: var(--red); border-color: var(--red); } /* ─── Theme toggle ──────────────────────────────────────── */ .topbar-right { display: flex; align-items: center; gap: 12px; } .theme-ic-light { display: none; } .theme-ic-dark { display: inline-flex; } html[data-theme="light"] .theme-ic-light { display: inline-flex; } html[data-theme="light"] .theme-ic-dark { display: none; } /* ─── User chip / dropdown ──────────────────────────────── */ .user-chip { position: relative; } .user-chip-btn { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; background: var(--panel2); border: 1px solid var(--border); border-radius: 40px; color: var(--ink); } .user-chip-btn:hover { border-color: var(--primary); } .user-chip-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .user-chip-name { font-size: 13px; font-weight: 600; } .user-chip-role { font-size: 11px; color: var(--ink-soft); } .avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--violet)); color: #fff; font-size: 12px; font-weight: 700; } .avatar--sm { width: 30px; height: 30px; font-size: 11px; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: var(--transition); z-index: 50; } /* The JS puts .is-open on whatever carries [data-dropdown], so the reveal is keyed to that rather than to .user-chip. It was scoped to the user chip, which meant the second dropdown anybody added — the notification bell — toggled its class correctly and stayed invisible, with nothing in the markup or the console to say why. */ [data-dropdown].is-open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-head { padding: 8px 10px; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--border); margin-bottom: 4px; word-break: break-all; } .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-soft); } .dropdown-item:hover { background: var(--panel3); color: var(--ink); } .dropdown-item--danger:hover { color: var(--red); } .dropdown-item svg { width: 15px; height: 15px; } /* ─── Breadcrumbs ───────────────────────────────────────── */ .breadcrumbs { display: flex; align-items: center; gap: 8px; padding: 14px 32px 0; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; } .breadcrumbs a:hover { color: var(--primary); } .crumb-sep { color: var(--ink-muted); } .crumb-current { color: var(--ink); } /* ─── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; transition: var(--transition); white-space: nowrap; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--primary); color: #04222c; } .btn-primary:hover { box-shadow: var(--ring); filter: brightness(1.05); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--ink-soft); } .btn-ghost:hover { color: var(--ink); border-color: var(--ink-soft); } .btn-danger { background: var(--red); color: #fff; } .btn-danger:hover { filter: brightness(1.08); } .btn-block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ─── Alerts / flash ────────────────────────────────────── */ .flash-stack { display: flex; flex-direction: column; gap: 10px; } .alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel2); font-size: 13.5px; } .alert--success { border-color: rgba(16,185,129,0.4); background: var(--green-dim); color: #6ee7b7; } .alert--error { border-color: rgba(239,68,68,0.4); background: var(--red-dim); color: #fca5a5; } .alert--info { border-color: rgba(41,197,240,0.4); background: var(--primary-dim); color: #7dd3fc; } .alert--warning { border-color: rgba(240,180,41,0.4); background: var(--gold-dim); color: #fcd34d; } .alert-close { background: none; border: none; color: inherit; font-size: 20px; line-height: 1; opacity: 0.7; } .alert-close:hover { opacity: 1; } /* ─── Panels ────────────────────────────────────────────── */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .panel-title { font-size: 14.5px; font-weight: 700; } .panel-sub { font-size: 12px; color: var(--ink-soft); } .panel-link { font-size: 12.5px; color: var(--primary); } .panel-link:hover { text-decoration: underline; } /* Two forms side by side in a panel head. Without this each
is a block and the buttons stack under the title. */ .panel-actions { display: flex; align-items: center; gap: 8px; flex: none; } .panel-actions form { margin: 0; } /* ─── Toolbar ───────────────────────────────────────────── */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .toolbar-search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; position: relative; /* Wraps at every width, not only on a phone. A filter row grows as filters are added — goods received now has a status picker and two dates — and without this the row simply overflowed into the Excel and Clear buttons and printed them on top of each other. Wrapping only happens when it has to. */ flex-wrap: wrap; } /* The magnifier sits inside the search box, and it used to be absolutely positioned — which frames it against the whole toolbar, not the input. Any change to the row moved it: a taller button beside it, a wrap onto a second line, or simply an input that renders 37px rather than the 38 the rule guessed at. Every fix was another guess about a height. It is a flex item now, sitting in the same flex line as the box and pulled over it by a negative margin — icon width plus the row gap. align-self centres it against the input itself, so there is no height to know and nothing to keep in step. */ .toolbar-search-ic { position: static; /* Icon 18 + row gap 10 + the 12px inset it should sit at = 40. The input's padding-left is 38, so the text starts clear of it. */ margin-right: -40px; z-index: 1; align-self: center; flex: 0 0 18px; color: var(--ink-soft); pointer-events: none; } .toolbar-search input[type="search"] { padding-left: 38px; } .toolbar-select { max-width: 180px; } /* A flex item's default min-width is auto, so every filter added to a toolbar squeezes the search box a little further — the goods received row has a status picker and two dates, and the box had been narrowed to "Search GRN, s". The box is the widest thing anybody types into, so it keeps a floor and grows into the space the fixed-width pickers leave. */ .toolbar-search input[type="search"] { flex: 1 1 200px; min-width: 170px; } .toolbar-search .form-control { min-width: 0; } .toolbar-select { flex: 0 0 auto; } /* Applying a filter. The selects and dates submit the moment they change, but a search box cannot — so without this there was no visible way to run a search at all, and the only thing that worked was pressing Enter and hoping. */ .toolbar-apply { flex: none; } .toolbar-clear { flex: none; } /* ─── Filter bar ────────────────────────────────────────── */ .filter-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .filter-row--fields { gap: 12px; } .filter-grow { flex: 1; } .filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; } .filter-field .form-control { min-width: 150px; } .filter-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } /* Apply, three date presets, Excel, Print, All reports — seven buttons on a report page. As a single non-wrapping flex item they were one unbreakable block that pushed the page wider than the window on any screen under about 1100px, taking the panels below along with it. They wrap now, and the row is allowed to shrink: a flex item's default minimum size is its content, so min-width has to say otherwise for wrapping to help. */ .filter-actions { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; min-width: 0; } /* The filter row shrinks and wraps on a narrow screen rather than pushing the page sideways. At desktop widths it stays on one line, which is where it was designed to be. */ @media (max-width: 900px) { /* Wrapping and the icon anchoring are unconditional now; only the search box's floor has to go, so a narrow screen can shrink it rather than push the page sideways. */ .toolbar-search input[type="search"] { flex: 1 1 100%; min-width: 0; } } .filter-row--presets { gap: 8px; } .chip { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-soft); background: var(--surface); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .chip:hover { color: var(--ink); border-color: var(--primary); } .chip--on { background: var(--primary); border-color: var(--primary); color: #fff; } /* ─── Document trail (related documents) ────────────────── */ .doc-trail { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px; } .trail-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line, var(--border)); border-radius: 10px; background: var(--surface); text-decoration: none; transition: border-color .15s, transform .15s; } .trail-item:hover { border-color: var(--primary); transform: translateY(-1px); } .trail-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } .trail-number { font-weight: 600; color: var(--ink); } /* Explains an action that is deliberately unavailable. */ .lock-note { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--green-dim); color: #6ee7b7; font-size: 13px; font-weight: 500; } html[data-theme="light"] .lock-note { color: #067a54; } .filter-summary { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); } .filter-summary strong { color: var(--ink); } .filter-summary-note { font-size: 12px; opacity: .75; } /* ─── Tables ────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .data-table thead th { text-align: left; padding: 12px 16px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-lt); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } /* A totals row is part of the same columns as the rows above it. * The padding rule above is scoped to tbody, so foot cells had none * and every total sat 16px off the figures it was adding up; and a * foot falls back to the browser's centred default, which put * the row's label adrift of the column it labels. */ .data-table tfoot td, .data-table tfoot th { padding: 13px 16px; vertical-align: middle; } .data-table tfoot th { text-align: left; } .data-table tbody tr:hover { background: var(--panel2); } /* Alignment utilities. * * These carry !important on purpose. `.data-table thead th` sets a * left alignment and scores (0,1,2); a bare `.ta-right` scores * (0,1,0) and loses, so every numeric column in the system had a * left-aligned heading sitting above right-aligned figures — a * column of money that does not line up with its own label. * * Raising the specificity instead would mean writing the rule once * per table class (.data-table, .position-table, .cashbook-table…) * and again for the next one anybody adds. A single-declaration * utility whose whole job is to override is the case !important * exists for. */ .ta-left { text-align: left !important; } .ta-center { text-align: center !important; } .ta-right { text-align: right !important; } .table-empty { text-align: center; color: var(--ink-soft); padding: 32px 16px !important; } .cell-user { display: flex; align-items: center; gap: 11px; } .cell-title { display: block; font-weight: 600; } .cell-sub { display: block; font-size: 12px; color: var(--ink-soft); } .cell-muted { color: var(--ink-soft); font-size: 12.5px; } .tag-inline { font-size: 10px; font-weight: 700; color: var(--primary); background: var(--primary-dim); padding: 1px 6px; border-radius: 4px; margin-left: 6px; text-transform: uppercase; } .row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; } .inline-form { display: inline; } .status-select { width: auto; min-width: 104px; padding: 6px 30px 6px 10px; font-size: 12.5px; background-color: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a7f94' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer; transition: border-color var(--transition); } .status-select:hover, .status-select:focus { border-color: var(--primary); outline: none; } /* ─── Badges / pills ────────────────────────────────────── */ .badge { display: inline-block; padding: 3px 10px; border-radius: 40px; font-size: 11.5px; font-weight: 600; text-transform: capitalize; background: var(--panel3); color: var(--ink-soft); } .badge--active, .badge--accepted, .badge--completed, .badge--confirmed, .badge--received { background: var(--green-dim); color: #6ee7b7; } .badge--inactive, .badge--cancelled, .badge--rejected, .badge--expired { background: var(--red-dim); color: #fca5a5; } .badge--draft, .badge--pending, .badge--processing { background: var(--gold-dim); color: #fcd34d; } .badge--sent, .badge--converted, .badge--shipped, .badge--delivered { background: var(--primary-dim); color: #7dd3fc; } /* Workflow tones from status_tone() — see includes/workflow.php. */ .badge--warn { background: var(--gold-dim); color: #fcd34d; } .badge--info { background: var(--primary-dim); color: #7dd3fc; } .role-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 12px; background: var(--violet-dim); color: #c4b5fd; font-weight: 500; } /* ─── Pagination ────────────────────────────────────────── */ /* Caption on the left, page controls on the right. The caption is shown even on a single page: it is how someone checks a filter did what they expected. */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; flex-wrap: wrap; border-top: 1px solid var(--border-lt); } .pagination-count { font-size: 12.5px; color: var(--ink-soft); } .pagination-pages { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .page-gap { color: var(--ink-muted); padding: 0 2px; align-self: center; } .page-link.is-disabled { opacity: 0.35; pointer-events: none; } .page-link { min-width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--ink-soft); } .page-link:hover { border-color: var(--primary); color: var(--ink); } .page-link.is-active { background: var(--primary); color: #04222c; border-color: var(--primary); font-weight: 600; } /* ─── Empty / state blocks ──────────────────────────────── */ .state-block { text-align: center; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .state-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--panel2); border: 1px solid var(--border); } .state-icon svg { width: 30px; height: 30px; color: var(--ink-soft); } .state-icon--danger { background: var(--red-dim); border-color: rgba(239,68,68,0.3); } .state-icon--danger svg { color: var(--red); } .state-title { font-size: 20px; font-weight: 700; } .state-text { color: var(--ink-soft); max-width: 420px; } /* ─── Toasts ────────────────────────────────────────────── */ .toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100; max-width: 360px; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--panel2); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13.5px; animation: toast-in 0.2s ease; } .toast--success { border-left-color: var(--green); } .toast--error { border-left-color: var(--red); } .toast--info { border-left-color: var(--primary); } .toast--warning { border-left-color: var(--gold); } @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ─── Modal (used by confirm dialogs) ───────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(4, 5, 9, 0.7); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 90; opacity: 0; visibility: hidden; transition: var(--transition); } .modal-overlay.is-open { opacity: 1; visibility: visible; } .modal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 420px; width: 100%; box-shadow: var(--shadow); transform: scale(0.96); transition: var(--transition); } .modal-overlay.is-open .modal { transform: scale(1); } /* 640px could not hold a three-column row without the labels wrapping. The product form is the widest thing that uses this. */ .modal--wide { max-width: 760px; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); } .modal-x { background: none; border: none; color: var(--ink-soft); font-size: 22px; line-height: 1; padding: 0 4px; } .modal-x:hover { color: var(--ink); } .modal-body { padding: 24px; max-height: 72vh; overflow-y: auto; } .modal-title { font-size: 16px; font-weight: 700; margin-bottom: 0; } .modal-body .modal-title { margin-bottom: 8px; } .modal-text { color: var(--ink-soft); font-size: 13.5px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 0; border-top: 1px solid var(--border); margin: 16px -24px 0; padding-bottom: 0; } .modal-body .form-actions { border-top: 1px solid var(--border); padding-top: 14px; } /* ─── Document builder (quote / order modals) ───────────── */ .modal--xl { max-width: 940px; } .db-rows { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; } .db-row { display: grid; grid-template-columns: minmax(200px, 2.2fr) 90px 120px 110px 90px 34px; gap: 8px; align-items: start; } .db-pick { display: flex; flex-direction: column; gap: 4px; } .db-filter { font-size: 12px; padding: 6px 10px; } /* Type-to-search over a long it has always been. */ @media (max-width: 640px) { /* Clipped, not hidden. A required