/* ─── Zenic design tokens (from the prototype, spec §2.3) ─── */ :root { /* Brand */ --zenic-green: #00c853; --zenic-green-dim: #00c85322; --zenic-green-bright: #1ae066; --zenic-green-deep: #0d1f14; --zenic-green-mid: #34d399; /* Surfaces */ --surface-0: #0d0d0f; --surface-1: #141416; --surface-2: #1c1c1f; --surface-3: #252528; /* Borders */ --border: #2a2a2d; --border-bright: #3a3a3e; --border-muted: #3a3a55; --muted-slate: #4a4a60; /* Text */ --text-primary: #f4f4f6; --text-secondary: #b4b4bc; --text-muted: #86868f; --text-inverse: #0d0d0f; --text-on-green: #04140c; /* Semantic status (text + dim background) */ --success: #4ade80; --success-dim: #4ade8022; --warning: #fbbf24; --warning-dim: #fbbf2422; --danger: #f87171; --danger-dim: #f8717122; --info: #60a5fa; --info-dim: #60a5fa22; --accent-purple: #a78bfa; --accent-purple-dim: #a78bfa22; --accent-teal: #5eead4; --accent-teal-dim: #5eead422; --accent-orange: #fb923c; --accent-orange-dim: #fb923c22; --accent-sky: #38bdf8; --accent-sky-dim: #38bdf822; /* Stronger variants */ --danger-strong: #ef4444; --warning-strong: #f59e0b; --info-strong: #3b82f6; --success-strong: #22c55e; /* Typography Inter, self-hosted (see wwwroot/css/inter.css). It replaces Syne, which is a display face drawn for posters and was carrying every word of a CRM that people read for eight hours a day. The mono is a system stack now rather than a webfont. It survives in four places where the content is genuinely an identifier — the QA panel, module tokens, the search keyboard chip and the .mono opt-in class — and four small spots do not justify a second download. Everything else that used to be monospace, 42 of the 46 rules in this file, is Inter: labels, column headers, badges and menus are read, not aligned, and a code face gives every word the same shape to skim past. Numbers keep their alignment through font-variant-numeric: tabular-nums, which is how amounts and ΑΦΜ columns still line up without a monospace face. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace; --tracking-label: 0.08em; /* Radii & shadows */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-color: 0, 0, 0; } /* ─── Light theme overrides (mirrors the prototype html[data-theme="light"]) ─── The profile toggle sets ; these re-point the same design tokens so every custom (non-Mud) element themes alongside MudBlazor's IsDarkMode. */ html[data-theme="light"] { /* Surfaces */ --surface-0: #f4f5f7; --surface-1: #ffffff; --surface-2: #eef0f3; --surface-3: #e3e6eb; /* Borders */ --border: #dcdfe4; --border-bright: #c3c8d0; --border-muted: #c7cdd6; --muted-slate: #aab0bd; /* Text */ --text-primary: #16181d; --text-secondary: #44474f; --text-muted: #6b6f78; --text-inverse: #ffffff; /* Brand (darker green reads on white) */ --zenic-green-mid: #059669; --zenic-green-dim: #00c8531a; --zenic-green-deep: #e6f7ee; /* Semantic status (darker text + light dim background) */ --success: #16a34a; --success-dim: #16a34a1a; --success-strong: #15803d; --warning: #b45309; --warning-dim: #b453091a; --warning-strong: #92400e; --danger: #dc2626; --danger-dim: #dc26261a; --danger-strong: #b91c1c; --info: #2563eb; --info-dim: #2563eb1a; --info-strong: #1d4ed8; --accent-purple: #7c3aed; --accent-purple-dim: #7c3aed1a; --accent-teal: #0d9488; --accent-teal-dim: #0d94881a; --accent-orange: #ea580c; --accent-orange-dim: #ea580c1a; --accent-sky: #0284c7; --accent-sky-dim: #0284c71a; /* Shadows are softer on a light canvas */ --shadow-color: 15, 23, 42; } html, body { font-family: var(--font-sans); background-color: var(--surface-0); } /* The system mono, for identifiers and codes (MudBlazor cells opt in with Class="mono") */ .mono, .mud-table-cell .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Uppercase mono micro-label (matches the prototype's section labels) */ .u-label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); font-size: 11px; } /* Dark scrollbar with a subtle brand thumb */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--surface-1); } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--radius-pill); border: 2px solid var(--surface-1); } ::-webkit-scrollbar-thumb:hover { background: #34343a; } h1:focus { outline: none; } .validation-message { color: var(--danger); } .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ════════════════════════════════════════════════════════════════ MudBlazor component polish — match the prototype's look & feel. Everything below leans on the design tokens in :root above. ════════════════════════════════════════════════════════════════ */ /* App bar & drawer: hairline separators like the prototype shell */ .mud-appbar { border-bottom: 1px solid var(--border); } .mud-drawer { border-right: 1px solid var(--border); } .mud-appbar .mud-typography { font-family: var(--font-sans); letter-spacing: 0.01em; } /* Nav: active item gets a brand left accent + tinted bg (prototype sidebar) */ .mud-nav-link.active { background: linear-gradient(90deg, var(--zenic-green-dim), transparent) !important; border-left: 3px solid var(--zenic-green); color: var(--text-primary) !important; } .mud-nav-group .mud-nav-link-text, .mud-nav-link .mud-nav-link-text { font-size: 13px; } /* Cards / panels: token border + radius */ .mud-paper { border: 1px solid var(--border); } /* Tables: mono uppercase header labels + hairline rows + hover */ .mud-table-root .mud-table-head .mud-table-cell { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: 10.5px; font-weight: 600; color: var(--text-muted); } .mud-table-root .mud-table-row:hover { background: var(--surface-2) !important; } /* Headings use the display font with a touch more weight */ .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; } /* Chips render as the prototype's dim status badges (tinted bg + colored ink) */ .mud-chip { border-radius: var(--radius-pill); font-weight: 600; } .mud-chip.mud-chip-color-success { background: var(--success-dim) !important; color: var(--success) !important; } .mud-chip.mud-chip-color-warning { background: var(--warning-dim) !important; color: var(--warning) !important; } .mud-chip.mud-chip-color-error { background: var(--danger-dim) !important; color: var(--danger) !important; } .mud-chip.mud-chip-color-info { background: var(--info-dim) !important; color: var(--info) !important; } .mud-chip.mud-chip-color-primary { background: var(--zenic-green-dim) !important; color: var(--zenic-green-mid) !important; } .mud-chip.mud-chip-color-secondary { background: var(--accent-purple-dim) !important; color: var(--accent-purple) !important; } .mud-chip.mud-chip-color-default { background: var(--surface-3) !important; color: var(--text-secondary) !important; } /* Filled (solid) buttons — the "next logical action" CTA must always be clearly COLOURED, in dialogs and on the page alike. We set the background from the theme palette explicitly so a colour is never lost. */ .mud-button-filled-primary { background-color: var(--mud-palette-primary) !important; color: var(--text-on-green) !important; font-weight: 600; } .mud-button-filled-secondary { background-color: var(--mud-palette-secondary) !important; color: #ffffff !important; font-weight: 600; } .mud-button-filled-success { background-color: var(--mud-palette-success) !important; color: #06210f !important; font-weight: 600; } .mud-button-filled-error { background-color: var(--mud-palette-error) !important; color: #2a0b0b !important; font-weight: 600; } .mud-button-filled-warning { background-color: var(--mud-palette-warning) !important; color: #2a1a00 !important; font-weight: 600; } .mud-button-filled-info { background-color: var(--mud-palette-info) !important; color: #ffffff !important; font-weight: 600; } /* Text/outlined buttons keep the semantic colour as their INK so secondary actions read as coloured too. */ .mud-button-text-primary, .mud-button-outlined-primary { color: var(--mud-palette-primary) !important; } .mud-button-text-success, .mud-button-outlined-success { color: var(--mud-palette-success) !important; } .mud-button-text-error, .mud-button-outlined-error { color: var(--mud-palette-error) !important; } .mud-button-text-warning, .mud-button-outlined-warning { color: var(--mud-palette-warning) !important; } .mud-button-text-secondary,.mud-button-outlined-secondary{ color: var(--mud-palette-secondary) !important; } .mud-button-text-info, .mud-button-outlined-info { color: var(--mud-palette-info) !important; } /* Dialog surface a touch raised */ .mud-dialog { border: 1px solid var(--border); } /* ── Popup ACTION buttons ALWAYS stack vertically, full-width — never a cramped row that overflows, clips or crowds; and the coloured "next logical action" reads clearly. MudStack Row renders `d-flex flex-row` in MudBlazor 9 (NOT .mud-stack-row). Only PURE button rows are stacked — rows that also hold a form input/select/textarea stay inline so field layouts are untouched. ── */ .mud-dialog-actions { flex-direction: column; align-items: stretch; gap: 8px; } .mud-dialog-actions > .mud-button-root { width: 100%; margin: 0 !important; } .mud-dialog .d-flex.flex-row:has(> .mud-button-root):not(:has(input)):not(:has(textarea)):not(:has(.mud-input-control)):not(:has(.mud-select)) { flex-direction: column !important; align-items: stretch !important; gap: 8px; } .mud-dialog .d-flex.flex-row:has(> .mud-button-root):not(:has(input)):not(:has(textarea)):not(:has(.mud-input-control)):not(:has(.mud-select)) > .mud-button-root { width: 100%; margin: 0; } /* A MudSpacer inside a now-vertical button row would grow into a huge gap — collapse it. */ .mud-dialog .d-flex.flex-row:has(> .mud-button-root) > .mud-spacer, .mud-dialog .d-flex.flex-row:has(> .mud-button-root) > .flex-grow-1 { display: none; } /* ───────────────────────── QA Test Engine floater (dev/test tool) ───────────────────────── */ #zenic-qa-btn { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #1a1a2e, #16213e); border: 1.5px solid #a78bfa; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 0 20px rgba(167,139,250,.27), 0 4px 16px rgba(0,0,0,.5); transition: transform .15s, box-shadow .15s; } #zenic-qa-btn:hover { transform: scale(1.1); box-shadow: 0 0 32px rgba(167,139,250,.5), 0 4px 20px rgba(0,0,0,.5); } .zenic-qa-pulse { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: #a78bfa; animation: zqa-pulse 2s infinite; } @keyframes zqa-pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .5; transform: scale(1.3);} } #zenic-qa-panel { position: fixed; bottom: 90px; right: 28px; width: 460px; max-height: 76vh; z-index: 9998; background: #0e0e14; border: 1.5px solid rgba(167,139,250,.4); border-radius: 16px; overflow: hidden; display: none; flex-direction: column; box-shadow: 0 0 40px rgba(167,139,250,.13), 0 20px 60px rgba(0,0,0,.6); font-family: var(--font-mono); } #zenic-qa-panel.open { display: flex; } .zenic-qa-header { padding: 14px 18px; background: linear-gradient(90deg, #1a1040, #120c2a); border-bottom: 1px solid rgba(167,139,250,.27); display: flex; align-items: center; justify-content: space-between; } .zenic-qa-title { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: #c4b5fd; text-transform: uppercase; } .zenic-qa-sub { font-size: 10.5px; color: #7a7a92; margin-top: 2px; } .zenic-qa-headactions { display: flex; gap: 8px; align-items: center; } .zenic-qa-tag { font-size: 10.5px; color: #9a9ab2; padding: 2px 8px; border: 1px solid #2a2a40; border-radius: 20px; } .zenic-qa-x { background: none; border: none; color: #9a9ab2; cursor: pointer; font-size: 17px; } .zenic-qa-controls { padding: 10px 14px; background: #0f0f18; border-bottom: 1px solid #1e1e30; display: flex; gap: 6px; flex-wrap: wrap; } .zenic-qa-run { background: #a78bfa; color: #12081f; border: none; border-radius: 7px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; } .zenic-qa-run.secondary { background: #1a1a2a; color: #c4b5fd; border: 1px solid #2a2a40; text-transform: capitalize; } .zenic-qa-run.danger { background: #2a1420; color: #ff9aa8; border-color: #4a2230; } .zenic-qa-run:disabled { opacity: .45; cursor: default; } .zenic-qa-summary { padding: 9px 14px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #1e1e30; font-size: 11px; } .zenic-qa-stat { cursor: pointer; opacity: .85; } .zenic-qa-stat.active { text-decoration: underline; opacity: 1; } .zenic-qa-stat.pass { color: #34d399; } .zenic-qa-stat.fail { color: #f87171; } .zenic-qa-stat.warn { color: #fbbf24; } .zenic-qa-stat.skip { color: #7a7a92; } .zenic-qa-progress { flex: 1; height: 5px; background: #1a1a28; border-radius: 4px; overflow: hidden; } .zenic-qa-progress-fill { height: 100%; background: linear-gradient(90deg, #a78bfa, #34d399); transition: width .2s; } .zenic-qa-log { overflow-y: auto; padding: 6px 0; flex: 1; } .zenic-qa-row { display: flex; gap: 9px; padding: 7px 16px; border-bottom: 1px solid #15151f; align-items: flex-start; } .zenic-qa-icon { width: 16px; text-align: center; font-weight: 700; } .zenic-qa-row.pass .zenic-qa-icon { color: #34d399; } .zenic-qa-row.fail .zenic-qa-icon { color: #f87171; } .zenic-qa-row.warn .zenic-qa-icon { color: #fbbf24; } .zenic-qa-row.skip .zenic-qa-icon { color: #7a7a92; } .zenic-qa-row.running .zenic-qa-icon { color: #a78bfa; } .zenic-qa-row.idle .zenic-qa-icon { color: #3a3a50; } .zenic-qa-rowname { font-size: 11.5px; color: #e2e2ee; } .zenic-qa-id { color: #6a6a82; margin-right: 5px; } .zenic-qa-rowdesc { font-size: 10.5px; color: #8a8aa0; margin-top: 1px; } .zenic-qa-footer { padding: 8px 16px; border-top: 1px solid #1e1e30; display: flex; justify-content: space-between; font-size: 10px; color: #6a6a82; } /* Label + ⓘ row (the prototype's .label-row): the field label followed by its info icons. */ .label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .label-row .form-label { margin-bottom: 0; } /* ── Prototype form controls (v2.174.0) — used by the catalog product dialog for 1:1 styling. ── */ .form-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); margin-bottom: 5px; font-family: var(--font-sans); } .form-input { width: 100%; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text-primary); font-size: 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .form-input:focus { border-color: var(--zenic-green); box-shadow: 0 0 0 3px rgba(0,200,83,0.15); } /* Native date inputs: render text + the calendar picker icon for the dark theme (visible + clickable). */ .form-input[type="date"] { color-scheme: dark; } .form-select { width: 100%; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text-primary); font-size: 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .form-select:focus { border-color: var(--zenic-green); box-shadow: 0 0 0 3px rgba(0,200,83,0.15); } .form-input:disabled, .form-select:disabled { opacity: 0.5; cursor: not-allowed; } .form-checkrow { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; } .form-checkrow input { width: 15px; height: 15px; accent-color: var(--zenic-green); } .img-upload { display: flex; align-items: center; gap: 12px; } .img-upload-preview { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; overflow: hidden; } .img-upload-preview img { width: 100%; height: 100%; object-fit: cover; } .img-upload-btn { background: var(--surface-2); border: 1px dashed var(--border-bright); color: var(--text-secondary); border-radius: 9px; padding: 9px 14px; font-size: 12px; cursor: pointer; transition: all 0.15s; } .img-upload-btn:hover { border-color: var(--zenic-green); color: var(--text-primary); } .field-error { color: var(--danger-strong); font-size: 11px; margin-top: 4px; min-height: 13px; } /* ── LOGIN screen — 1:1 with the prototype #login-screen / .login-card (v2.174.0). ── */ .login-screen { position: fixed; inset: 0; z-index: 8000; background: radial-gradient(circle at 50% 30%, #14201a 0%, var(--surface-0) 60%); display: flex; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .login-bg-glow { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--zenic-green) 13.3%, transparent), transparent 70%); filter: blur(40px); pointer-events: none; } .login-card { position: relative; z-index: 1; width: 100%; max-width: 380px; margin: auto; background: var(--surface-1); border: 1px solid var(--border-bright); border-radius: 18px; padding: 36px 32px; box-shadow: 0 24px 80px rgba(var(--shadow-color), 0.67); } .login-brand { font-size: 32px; font-weight: 800; letter-spacing: 0.08em; color: var(--zenic-green); text-align: center; } .login-sub { text-align: center; font-family: var(--font-sans); font-size: 11.5px; color: var(--text-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.1em; } .login-hint { margin-top: 22px; padding: 12px 14px; background: var(--surface-0); border: 1px dashed var(--border-bright); border-radius: 10px; font-family: var(--font-sans); font-size: 11.5px; color: var(--text-muted); line-height: 1.5; } .login-sub { text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.1em; } .login-hint { margin-top: 22px; padding: 12px 14px; background: var(--surface-0); border: 1px dashed var(--border-bright); border-radius: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); line-height: 1.5; } .login-version { text-align: center; margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.05em; } /* The demo-account picker inside .login-hint. Its rows are role="button" and one tap fills the form, but they carried no rules at all: no pointer, no hover, and eight accounts run together as one block of mono text, so the one thing on the screen that saves typing did not look like anything you could press. */ .login-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 5px 8px; margin: 0 -4px; border-radius: var(--radius-md, 8px); cursor: pointer; } .login-account-row:hover, .login-account-row:focus-visible { background: var(--surface-2); } .login-account-row .acct-name { grid-column: 1; color: var(--text-secondary); } /* The role sits at the end of the first line, where the eye stops. */ .login-account-row .acct-role { grid-column: 2; font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* And the address under it, because it is what gets typed in — the thing the row exists to save. */ .login-account-row .acct-email { grid-column: 1 / -1; color: var(--text-muted); } /* The one client account signs in to its own portal rather than the staff one, so it is set apart from the seven above it rather than being the eighth of a list of colleagues. */ .login-account-row--client { margin-top: 6px; padding-top: 9px; border-top: 1px dashed var(--border-bright); border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); } /* Staff activation wizard — self-contained full-screen modal with its own backdrop (prototype's #userActivationWizard). No separate MudOverlay, so the card is always above the dim and clickable. NOTE: #clientActivationGateway is deliberately NOT in this rule. The client-activation gateway is now a full-screen LOGIN-style screen (class="login-screen"), shown/hidden by Blazor (@if), not by an ".open" class. Including its id here made the ID selector's display:none beat .login-screen{display:flex} (ID > class specificity), so the gateway rendered into the DOM but stayed INVISIBLE — the black screen. */ .zenic-activation-wizard, #profileModal { position: fixed; inset: 0; background: #000000dd; z-index: 1300; display: none; align-items: center; justify-content: center; padding: 20px; } .zenic-activation-wizard.open, #profileModal.open { display: flex; } /* Prototype buttons (.btn / .btn-ghost) — used where we need the exact prototype look (e.g. Edit User: purple "Save changes" + outlined ghost Account-action buttons). */ .btn { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-sm { padding: 5px 10px; font-size: 11.5px; } .btn-ghost { background: transparent; border-color: var(--border, #2c2c36); color: var(--text-secondary, #b3b3be); } .btn-ghost:hover:not(:disabled) { border-color: var(--border-bright, #44444f); color: var(--text-primary, #fff); } /* Section signature colours (prototype navSections): each main area has its own colour, carried into that section's list/popup accents (titles + primary buttons) so the user always knows where they are. B2B Core = green, Agent Modules = purple, Accounting = sky, System Settings = amber. */ :root { --sec-b2b: var(--zenic-green); --sec-agent: var(--accent-purple); --sec-marketing: #e05c8a; --sec-bplan: #2fb3a4; --sec-accounting: var(--accent-sky); --sec-system: var(--warning); } .btn-sec-b2b { background: var(--sec-b2b); color: #06210f; } .btn-sec-agent { background: var(--sec-agent); color: #fff; } .btn-sec-marketing { background: var(--sec-marketing); color: #2a0713; } .btn-sec-bplan { background: var(--sec-bplan); color: #04211e; } .btn-sec-accounting { background: var(--sec-accounting); color: #04212e; } .btn-sec-system { background: var(--sec-system); color: #2a1a00; } .btn-sec-b2b:hover:not(:disabled), .btn-sec-agent:hover:not(:disabled), .btn-sec-accounting:hover:not(:disabled), .btn-sec-system:hover:not(:disabled) { filter: brightness(1.08); } /* Native time inputs for the Business hours editor — compact, no popup clipping/scroll. */ .biz-time { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12.5px; padding: 5px 8px; width: 110px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); color-scheme: dark light; } .biz-time:disabled { opacity: 0.4; } .biz-time-field { display: inline-flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-secondary); } /* Roles & Permission Engine — role cards + module access matrix (prototype view-permissions). */ .perm-role-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 24px; } .perm-role-card { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: border-color .15s, background .15s; } .perm-role-del { position: absolute; top: 5px; right: 7px; border: none; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .perm-role-del:hover { color: var(--danger); } .perm-role-card:hover { border-color: var(--zenic-green); } .perm-role-card.active { background: color-mix(in srgb, var(--zenic-green) 12%, var(--surface-1)); border-color: var(--zenic-green); } .perm-role-kicker { font-family: var(--font-sans); font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; } .perm-role-name { font-weight: 700; font-size: 13px; color: var(--text-primary); margin-bottom: 6px; } .perm-matrix-wrap { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .perm-matrix-bar { padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .perm-preset-bar { padding: 10px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .perm-section { border: 1px solid var(--border); border-radius: 10px; margin: 12px 16px; overflow: hidden; } .perm-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface-2); } .perm-section-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .perm-section-title { font-family: var(--font-sans); font-size: 12px; font-weight: 700; } .perm-section-count { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); } .perm-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--border); } .perm-row-name { font-family: var(--font-sans); font-size: 12px; color: var(--text-primary); font-weight: 600; } .perm-row-token { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .perm-row-child { padding-left: 36px; background: color-mix(in srgb, var(--surface-2) 40%, transparent); } .perm-row-child .perm-row-name { font-weight: 500; color: var(--text-secondary); } /* Platform settings — VAT display + platform constants + stage SLA (prototype view-platform-settings). */ .pset-section { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 14px; background: var(--surface-1); } .pset-section-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--sec-system); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .pset-section-note { color: var(--text-muted); font-size: 12px; margin: 0 0 12px; line-height: 1.5; } .pset-note-sm { color: var(--text-muted); font-size: 11px; margin: -2px 0 14px; line-height: 1.5; } .pset-subhead { font-size: 11.5px; font-weight: 600; color: var(--text-primary); margin: 6px 0; } .pset-fields { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; } .pset-field { display: flex; flex-direction: column; gap: 3px; } /* Label stays on one line (may be longer than the input) so it never pushes the field down. */ .pset-label { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11.5px; color: var(--text-secondary); } /* Inputs are a fixed prototype width and left-aligned. */ .pset-num { width: 90px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12.5px; text-align: left; } .pset-sla-num { width: 62px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12px; text-align: left; } .pset-vat-cat { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; min-width: 80px; text-align: center; background: var(--surface-2); } .pset-vat-cat.active { border-color: var(--zenic-green); background: color-mix(in srgb, var(--zenic-green) 12%, transparent); } .pset-vat-code { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 10px; color: var(--text-muted); } .pset-vat-pct { font-weight: 800; font-size: 15px; } .pset-sla-list { display: flex; flex-direction: column; gap: 6px; } .pset-sla-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: var(--surface-2); flex-wrap: wrap; } .pset-sla-input { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-secondary); } .pset-sector-row { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); flex-wrap: wrap; margin-bottom: 6px; } .pset-sector-input { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-secondary); flex: 1; min-width: 150px; } .pset-text { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); color: var(--text-primary); font-family: var(--font-sans); font-size: 12.5px; } .pwd-wrap { position: relative; } .pwd-wrap .form-input { padding-right: 42px; } /* Едно око, наше (CEO, 15.09.2026). Edge си црта СВОЕ „откриј лозинка" копче внатре во полето штом човекот почне да куца, точно врз нашето, па нашето исчезнува под него. Се гаси, за да има едно. Автопополнувањето во Chromium го боjадисува полето светло, врз кое светлото око не се гледа — позадината се задржува темна. Емоџито оди на фонт што сигурно го има на Windows, инаку е празно место. */ .pwd-wrap input::-ms-reveal, .pwd-wrap input::-ms-clear { display: none; } .pwd-wrap .form-input:-webkit-autofill, .pwd-wrap .form-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface-0) inset; -webkit-text-fill-color: var(--text-primary); } .pwd-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; opacity: 0.8; padding: 5px; line-height: 1; z-index: 2; color: var(--text-primary); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--font-sans), sans-serif; } .pwd-eye:hover, .pwd-eye:focus-visible { opacity: 1; } .prod-form { display: flex; flex-direction: column; gap: 12px; } .prod-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Lists styled 1:1 like the prototype's .data-table: flat (no card chrome), uppercase mono headers, muted secondary text, padded cells, row hover, and no border under the last row. */ .data-table-look, .data-table-look .mud-table-root { background: transparent; box-shadow: none; } .data-table-look .mud-table-head .mud-table-cell { text-transform: uppercase; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; background: transparent; padding: 10px 14px; border-bottom: 1px solid var(--border); } .data-table-look .mud-table-body .mud-table-cell { color: var(--text-secondary); vertical-align: middle; text-align: left; background: transparent; padding: 10px 14px; border-bottom: 1px solid var(--border); } /* Header + body both start hard-left so each column reads as a clean vertical line (value under its title). */ .data-table-look .mud-table-head .mud-table-cell { text-align: left; } /* Chips (score / section / stage) carry a default margin that pushed their content in from the cell's left edge, so the value no longer lined up under its uppercase header — flush them left. */ .data-table-look .mud-table-body .mud-table-cell > .mud-chip:only-child, .data-table-look .mud-table-body .mud-table-cell > .mud-chip:first-child { margin-left: 0; margin-inline-start: 0; } .data-table-look .mud-table-body tr:hover .mud-table-cell { background: var(--surface-2); } .data-table-look .mud-table-body tr:last-child .mud-table-cell { border-bottom: none; } /* ── Card-mode (MOBILE ONLY) cells — MudBlazor renders each cell as a `label | value` flex row below the breakpoint; long values (e.g. the Received-documents number + file name + "no hard copy") jam onto one line. STACK the label above the value so every field reads as its own clean row. MUST be gated by the SAME media query MudBlazor uses — max-width: 960px for a "sm" table: MudBlazor 9.x keeps the `.mud-sm-table` class on the table at ALL widths and only switches to card layout inside this media query. The class name tracks the Breakpoint on each MudTable, so moving those from Md to Sm moved this selector too — miss that and the cards keep stacking but lose their frame, which reads as records running into each other. Without the gate these card rules (row outline + block display) leaked onto the DESKTOP, breaking the column alignment and drawing an ugly per-row outline. On desktop the table stays flat with the gentle per-row `border-bottom` line defined above. ── */ @media (max-width: 959.98px) { .data-table-look.mud-sm-table .mud-table-cell { flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 14px; border-bottom: none !important; /* the card frame is the separator, not per-field lines */ } .data-table-look.mud-sm-table .mud-table-cell::before { padding-right: 0; padding-inline-end: 0; margin-right: 0; color: var(--text-muted); font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } /* Right-aligned columns (amount/actions) align left in the stacked card. */ .data-table-look.mud-sm-table .mud-table-cell[style*="right"] { text-align: start !important; } /* Each row is a self-contained CARD: a THIN frame in the section's signature colour (--card-accent, set per section on .zenic-main-inner) + a gap below, so it's obvious which fields belong to which record. */ .data-table-look.mud-sm-table .mud-table-row { display: block; background: var(--surface-1); /* !important: MudBlazor's own CSS loads AFTER app.css, so its row/cell borders would otherwise win. */ border: 1.5px solid var(--card-accent, var(--zenic-green)) !important; border-radius: 10px !important; margin: 0 0 12px !important; padding: 4px 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); overflow: hidden; } } /* ── Catalog badges / status toggle / thumbnails / price (ported from the prototype v2.174.0) ── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.03em; white-space: nowrap; } .badge-green { background: var(--zenic-green-dim); color: var(--zenic-green); border: 1px solid color-mix(in srgb, var(--zenic-green) 25%, transparent); } .badge-amber { background: var(--warning-dim); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning-strong) 25%, transparent); } .badge-purple { background: var(--accent-purple-dim); color: var(--accent-purple); border: 1px solid color-mix(in srgb, var(--accent-purple) 25%, transparent); } .badge-blue { background: var(--info-dim); color: var(--info); border: 1px solid color-mix(in srgb, var(--info-strong) 25%, transparent); } .badge-gray { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-bright); } .badge-red { background: var(--danger-dim, rgba(244,67,54,0.14)); color: var(--danger, #f44336); border: 1px solid color-mix(in srgb, var(--danger, #f44336) 25%, transparent); } /* Contract-expiry reminder day chips (Platform Settings). */ .pset-expiry-chip { padding-right: 4px; } .pset-expiry-x { background: none; border: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0.7; } .pset-expiry-x:hover { opacity: 1; } /* Received Documents preview sheet (prototype inc-sheet). */ .inc-sheet { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 18px; } .inc-cap { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; } .prod-thumb { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); } .prod-thumb-ph { width: 56px; height: 56px; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 22px; } .price-now { color: var(--text-primary); font-weight: 700; } .price-was { color: var(--text-muted); text-decoration: line-through; font-size: 11.5px; margin-left: 5px; } .row-inactive td, .row-inactive .mud-table-cell { opacity: 0.5; } /* A notification deep-link landed on this table row (?focus={id}) — highlight it so it stands out, then fade. */ .focus-row td, .focus-row .mud-table-cell { background: rgba(124, 196, 130, 0.18) !important; animation: focusRowFade 4s ease-out 1.5s forwards; } @keyframes focusRowFade { to { background: transparent !important; } } .status-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .status-switch { width: 32px; height: 18px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--border-bright); position: relative; transition: background 0.15s; flex-shrink: 0; } .status-switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); transition: all 0.15s; } .status-toggle.on .status-switch { background: var(--zenic-green-dim); border-color: var(--zenic-green); } .status-toggle.on .status-switch::after { left: 15px; background: var(--zenic-green); } .status-toggle .status-text { font-size: 11.5px; font-family: var(--font-sans); } .status-toggle.on .status-text { color: var(--zenic-green); } .status-toggle:not(.on) .status-text { color: var(--text-muted); } /* ── Info tooltips (ⓘ) — the prototype's .info-ic / .info-ic.guide badge (v2.174.0). ── Only the BADGE is styled here; the hover text itself is rendered by MudTooltip (a root-level popover) so it never extends a dialog's scroll area or gets clipped by an overflow container — this is what kills horizontal scroll in popups platform-wide. Used by the InfoTip component. */ .info-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-bright); color: var(--text-secondary); font-size: 10.5px; font-weight: 700; cursor: help; font-family: var(--font-sans); flex-shrink: 0; } .info-ic:hover { background: var(--zenic-green); color: #000; border-color: var(--zenic-green); } /* guide variant: a green ⓘ for the richer "what can I do here" field guides */ .info-ic.guide { background: rgba(0,200,83,0.14); color: var(--zenic-green); border-color: var(--zenic-green); } .info-ic.guide:hover { background: var(--zenic-green); color: #000; } /* The MudTooltip popover content — preserve the prototype's multi-line layout. */ .info-tip-pop { max-width: 320px; white-space: pre-line; text-align: left; font-size: 11.5px; line-height: 1.55; font-family: var(--font-sans); } /* Tooltips: BLACK background platform-wide (user rule) — every MudTooltip, incl. the ⓘ info tips and all tooltips inside popups. Light text + subtle border for legibility in both themes. */ .mud-tooltip { background-color: #111114 !important; color: #f1f1f3 !important; border: 1px solid var(--border-bright); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } .mud-tooltip-arrow::before { background-color: #111114 !important; border-color: #111114 !important; } /* ── City autocomplete (Our Company) — kill the double vertical scrollbar. ── MudAutocomplete gives BOTH the outer .mud-popover AND the inner list overflow-y:auto, so two vertical scrollbars stack side-by-side. Pin the height once and let ONLY the inner list scroll → a single, fixed-height dropdown with one scrollbar. */ .city-pop.mud-popover { overflow: hidden !important; max-height: 260px; } .city-pop .mud-list, .city-pop .mud-autocomplete-list { max-height: 260px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* ── Слот-дропдаун (pipeline закажување) — истиот образец: ЕДЕН вертикален скрол. MudSelect му дава overflow и на popover-от и на внатрешната листа → два скрола еден до друг. Надворешниот се гаси, скролa само листата. (CEO 04.09) */ .slot-pop.mud-popover { overflow: hidden !important; max-height: 300px; } .slot-pop .mud-list { max-height: 300px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* ── Issued Documents (view-accounting) — sky section colour + prototype filter card. ── */ .sec-accounting-title { color: var(--sec-accounting) !important; } .acc-filter-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .acc-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .acc-afm { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-sans); font-variant-numeric: tabular-nums; } .btn-clear-filters { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 11.5px; padding: 8px 12px; cursor: pointer; align-self: flex-end; } .btn-clear-filters:hover { background: var(--surface-2); color: var(--text-primary); } .u-fs-sm { font-size: 12px; } /* ── Inventory settings — read-only "system fallback defaults" info line (prototype mono/muted). ── */ .inv-fallback { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); line-height: 1.7; } .inv-fallback b { color: var(--text-secondary); } /* ── CRM Settings (view-crm-settings) — 1:1 with the prototype's green-headed cards. ── */ .btn-green { background: var(--zenic-green); color: #06210f; } .btn-green:hover:not(:disabled) { filter: brightness(1.08); } .cset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .cset-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 14px; } .cset-section.surface-1 { background: var(--surface-1); margin-top: 0; } /* System-section signature colour (amber) on section + popup titles — consistent with Platform settings. */ .cset-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--sec-system); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; } .cset-title.mid { color: var(--sec-system); } .cset-note { color: var(--text-muted); font-size: 12px; margin: 0 0 10px; line-height: 1.5; } .cset-fields { display: flex; flex-direction: column; gap: 10px; } .cset-label { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); font-family: var(--font-sans); } .cset-num { width: 100%; background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; color: var(--text-primary); font-size: 13px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; box-sizing: border-box; } .cset-num.sm { width: 80px; } .cset-num:focus { border-color: var(--zenic-green); outline: none; } .cset-alarm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px 28px; align-items: start; } .cset-alarm { display: flex; align-items: center; gap: 10px; } .cset-alarm-label { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12px; } .cset-alarm-label input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--zenic-green); } .cset-unit { color: var(--text-muted); font-size: 11px; white-space: nowrap; } .cset-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); flex-wrap: wrap; } .cset-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .cset-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cset-table th { text-align: left; padding: 8px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); font-family: var(--font-sans); } .cset-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); } .cset-table tr:last-child td { border-bottom: none; } .cset-table th.u-right, .cset-table td.u-right { text-align: right; } /* ════════ APP SHELL + HEADER — 1:1 port of the prototype #app-header / app-body (v2.174.0) ════════ */ .zenic-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .app-header { height: 56px; flex-shrink: 0; background: var(--surface-1); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .app-logo { font-size: 18px; font-weight: 800; letter-spacing: 0.05em; color: var(--zenic-green); } .app-logo-img { height: 26px; width: auto; object-fit: contain; display: block; } .header-brand-sub { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; padding-left: 11px; border-left: 1px solid var(--border-bright); } .zenic-app-body { flex: 1; display: flex; min-height: 0; } .zenic-sidebar-shell { width: 250px; flex-shrink: 0; background: var(--surface-1); border-right: 1px solid var(--border); overflow-y: auto; transition: width 0.18s ease; } .zenic-main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; background: var(--surface-0); } .zenic-main-inner { padding: 24px; max-width: 1400px; margin: 0 auto; } /* ── Folded sidebar (the icon rail) ──────────────────────────────────────────────────────────────── 250px of permanent sidebar is a fifth of a 14-inch laptop. Folded, it hands 186px back to the content, which on those machines is the difference between every table column fitting and the last one being clipped by the main area's overflow-x: hidden. The icons stay — this is a fold, not a removal — and the attention badges stay with them, because an agent must still see that three orders are waiting. Below the drawer breakpoint the rail is meaningless: the sidebar is off-canvas there and the hamburger owns it, so the toggle hides and the rail width stops applying. */ .nav-rail-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0; transition: color 0.15s, border-color 0.15s; } .nav-rail-toggle:hover { color: var(--text-primary); border-color: var(--border-bright); } /* min-width and overflow-x here are not decoration. A flex item defaults to min-width: auto, which resolves to its content's min-content width — roughly 250px of nav labels — and that quietly wins over any narrower width, an inline style included. Without these two the rail sets a width and nothing on screen moves. */ .zenic-sidebar-shell.rail { width: 64px; min-width: 0; overflow-x: hidden; } /* Everything textual folds away; the icon and its badge are what remain. The section label needs the extra .zenic-sidebar in its selector. NavMenu's own scoped rule is .sidebar-section-label.collapsible[b-…], which is three classes — exactly what a two-class selector plus the descendant would score — and on a tie the scoped bundle wins because it loads after this file. */ .zenic-sidebar-shell.rail .zenic-sidebar .sidebar-section-label, .zenic-sidebar-shell.rail .nav-caret, .zenic-sidebar-shell.rail .nav-submenu, .zenic-sidebar-shell.rail .nav-link > span:not(.nav-attention-badge) { display: none; } .zenic-sidebar-shell.rail .nav-link { justify-content: center; padding: 10px 0; gap: 0; position: relative; } .zenic-sidebar-shell.rail .zenic-sidebar { padding-left: 0; padding-right: 0; } /* No label for the badge to follow, so it rides the corner of the icon instead. */ .zenic-sidebar-shell.rail .nav-attention-badge { position: absolute; top: 3px; right: 11px; margin: 0; } /* ── Верзии на дното од менито (CEO, 15.09.2026): закуцани, видливи веднаш; ја следат ширината на менито ── */ .nav-version { position: sticky; bottom: 0; margin-top: 12px; padding: 8px 14px; background: var(--surface-1); border-top: 1px solid var(--border); } .version-badge--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 11px; line-height: 1.3; color: var(--text-muted); font-family: var(--font-mono); } .version-badge--compact strong { color: var(--text-primary); font-weight: 600; } .version-badge--compact .vb-mismatch { color: var(--warning); cursor: help; } .zenic-sidebar-shell.rail .nav-version { display: none; } .user-menu-head-env { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; } /* ── Mobile hamburger + drawer backdrop (shown only below the responsive breakpoint) ── */ .nav-hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-primary); font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0; } .nav-hamburger:hover { border-color: var(--border-bright); } .nav-backdrop { display: none; } /* ════════ RESPONSIVE / MOBILE — sales agents work this on a phone in the field ════════ */ @media (max-width: 860px) { .nav-rail-toggle { display: none; } .zenic-sidebar-shell.rail { width: 264px; } .nav-hamburger { display: inline-flex; } .app-header { padding: 0 12px; gap: 8px; } .header-brand-sub { display: none; } .app-logo-img { height: 22px; } /* The centred global search would crowd out the right-side controls on a phone — nav is via the drawer. */ .global-search { display: none; } .lang-dd-btn > span:nth-child(2) { display: none; } /* keep the 🌐, drop the language name */ .user-menu-btn > span:nth-child(2) { display: none; } /* keep the avatar, drop the name/role block */ /* The sidebar collapses into an off-canvas drawer toggled by the hamburger. */ .zenic-sidebar-shell { position: fixed; top: 56px; left: 0; bottom: 0; width: 264px; max-width: 84vw; transform: translateX(-100%); transition: transform 0.22s ease; z-index: 1200; box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45); } .zenic-sidebar-shell.open { transform: translateX(0); } .nav-backdrop { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0, 0, 0, 0.5); z-index: 1150; } .zenic-main-inner { padding: 14px 12px; } /* Header dropdowns (notifications / language / user) become full-width sheets so they are never clipped off the right edge of the phone — this is why the bell showed "nothing" on mobile. */ .notif-panel, .lang-dd-menu, .user-menu-dropdown { position: fixed !important; left: 8px !important; right: 8px !important; top: 62px !important; width: auto !important; max-width: none !important; max-height: 76vh; } /* Popups fill the phone screen (button stacking is a GLOBAL rule below — works on every width). */ .mud-dialog { width: 94vw !important; max-width: 94vw !important; } } /* ── GLOBAL SEARCH (header centre) ── */ .global-search { position: relative; width: 100%; max-width: 420px; } .global-search-box { display: flex; align-items: center; gap: 8px; background: var(--surface-0); border: 1px solid var(--border); border-radius: 22px; padding: 7px 14px; transition: border-color 0.15s; } .global-search-box:focus-within { border-color: var(--zenic-green); } .global-search-box input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; } .global-search-box input::placeholder { color: var(--text-muted); } .global-search-kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } /* ── GLOBAL SEARCH RESULTS (prototype gs-results dropdown) ── */ .gs-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface-1); border: 1px solid var(--border-bright); border-radius: 12px; overflow: hidden; z-index: 460; box-shadow: 0 16px 44px rgba(var(--shadow-color), 0.67); display: none; max-height: 380px; overflow-y: auto; } .gs-results.open { display: block; } .gs-group-label { font-family: var(--font-sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); padding: 8px 14px 4px; } .gs-item { display: flex; align-items: center; gap: 11px; padding: 9px 14px; cursor: pointer; transition: background 0.1s; } .gs-item:hover, .gs-item.active { background: var(--surface-3); } .gs-item-label { flex: 1; font-size: 12.5px; color: var(--text-primary); } .gs-item-type { font-family: var(--font-sans); font-size: 10.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; } .gs-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 12px; font-family: var(--font-sans); } /* ── LANGUAGE DROPDOWN ── */ .lang-dd { position: relative; } .lang-dd-btn { display: flex; align-items: center; gap: 7px; background: var(--surface-3); border: 1px solid var(--border); padding: 6px 12px; border-radius: 20px; font-family: var(--font-sans); font-size: 11.5px; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; } .lang-dd-btn:hover { border-color: var(--border-bright); color: var(--text-primary); } .lang-dd-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--surface-1); border: 1px solid var(--border-bright); border-radius: 10px; overflow: hidden; z-index: 400; box-shadow: 0 12px 32px rgba(var(--shadow-color), 0.53); display: none; } .lang-dd-menu.open { display: block; } .lang-dd-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; cursor: pointer; transition: background 0.1s; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border); } .lang-dd-item:last-child { border-bottom: none; } .lang-dd-item:hover { background: var(--surface-3); color: var(--text-primary); } .lang-dd-item.active { color: var(--zenic-green); background: var(--zenic-green-deep); } .lang-dd-check { color: var(--zenic-green); font-size: 11.5px; } /* ── NOTIFICATION BELL ── */ .notif-dd { position: relative; } .notif-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; } .notif-btn:hover { border-color: var(--border-bright); background: var(--surface-2); } .notif-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger-strong); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-variant-numeric: tabular-nums; border: 2px solid var(--surface-1); } .notif-badge.hidden { display: none; } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 440px; background: var(--surface-1); border: 1px solid var(--border-bright); border-radius: 12px; overflow: hidden; z-index: 450; box-shadow: 0 16px 44px rgba(var(--shadow-color), 0.67); display: none; flex-direction: column; } .notif-panel.open { display: flex; } .notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; } .notif-panel-title { font-size: 13px; font-weight: 800; color: var(--text-primary); } .notif-markall { background: none; border: none; color: var(--zenic-green); font-size: 11.5px; cursor: pointer; font-family: var(--font-sans); } .notif-markall:hover { text-decoration: underline; } .notif-list { flex: 1; overflow-y: auto; } .notif-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s, opacity 0.1s; border-left: 3px solid transparent; } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: color-mix(in srgb, var(--zenic-green) 8%, transparent); border-left-color: var(--zenic-green); } .notif-item.unread .notif-title { color: var(--text-primary); } .notif-item.read { opacity: 0.55; } .notif-item.read .notif-title { color: var(--text-secondary); font-weight: 600; } .notif-item.read:hover { opacity: 0.85; } .notif-ic { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: 12px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; } .notif-msg { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; } .notif-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-sans); } .notif-empty { padding: 36px 16px; text-align: center; color: var(--text-muted); font-size: 12px; font-family: var(--font-sans); } .notif-panel-footer { padding: 10px 16px; background: var(--surface-0); border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-muted); font-family: var(--font-sans); line-height: 1.5; flex-shrink: 0; } /* ── USER MENU ── */ .user-menu { position: relative; } .user-menu-btn { display: flex; align-items: center; gap: 9px; background: var(--surface-3); border: 1px solid var(--border); padding: 5px 12px 5px 6px; border-radius: 22px; cursor: pointer; transition: all 0.15s; } .user-menu-btn:hover { border-color: var(--border-bright); } .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--zenic-green), #00915c); color: #000; font-weight: 800; font-size: 11.5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); flex-shrink: 0; } .user-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; background: var(--surface-1); border: 1px solid var(--border-bright); border-radius: 10px; overflow: hidden; z-index: 400; box-shadow: 0 12px 32px rgba(var(--shadow-color), 0.53); display: none; } .user-menu-dropdown.open { display: block; } .user-menu-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .user-menu-head-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); } .user-menu-head-role { font-family: var(--font-sans); font-size: 10.5px; color: var(--text-muted); margin-top: 1px; } .user-menu-item { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 11px 14px; cursor: pointer; font-size: 12px; color: var(--text-secondary); transition: background 0.1s; border: none; border-bottom: 1px solid var(--border); background: none; width: 100%; text-align: right; font-family: inherit; text-decoration: none; } .user-menu-item:last-child { border-bottom: none; } .user-menu-item:hover { background: var(--surface-3); color: var(--text-primary); } .user-menu-item.logout:hover { background: color-mix(in srgb, var(--danger-strong) 9.4%, transparent); color: var(--danger); } /* click-catcher to close header dropdowns on outside click */ .header-dd-backdrop { position: fixed; inset: 0; z-index: 390; background: transparent; } /* ════════ SECRET SPEC. DISCOUNT & BONUS LEDGER — off-platform standalone page (prototype specDiscountLedgerPage) ════════ */ .ledger-shell { position: fixed; inset: 0; overflow: auto; background: #0a0f0d; z-index: 100000; } .ledger-page { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; } .ledger-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .ledger-title { font-size: 20px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } /* Date-picker calendar in ANY popup must open FULLY — no horizontal scroll, never half-open (RULE, CLAUDE.md), especially on mobile. ROOT CAUSE (MudBlazor 9.5, found by reading MudBlazor.min.css): a MudDialog keeps `transform: scale(1)` after its 0.1s open animation because the animation uses `animation-fill-mode: both` and its last keyframe is `transform: scale(1)`. A transform other than `none` makes that element the CONTAINING BLOCK for its `position: fixed` descendants. The PickerVariant.Dialog calendar panel is positioned `fixed` in VIEWPORT coordinates by MudBlazor's JS — but inside the dialog it's resolved relative to the DIALOG instead, so it's mispositioned and spills past a narrow dialog's edge → `.mud-dialog-content{overflow:auto}` then shows a sideways scroll and the calendar looks half-open. (Wide dialogs had enough slack to hide it, which is why the offer builder looked fine but the narrow deliver step didn't.) FIX: clear the residual transform on the open dialog → the picker is viewport-fixed again and MudBlazor's own centring positions it correctly, so it opens fully with no sideways scroll in EVERY popup, at any width. Only the tiny scale-in flourish is lost; the opacity fade + the flexbox centring of the dialog are unaffected. */ .mud-dialog { transform: none !important; } /* DESKTOP cause (confirmed by inspecting `#overlay… > .mud-overlay-content > div`): the Dialog picker panel lives inside a full-viewport CENTRING overlay (`.mud-overlay` = fixed + flex-centre), but MudBlazor also gives the panel a `.mud-picker-pos-*` FIXED offset computed from the input's on-screen position. On a wide desktop that offset places the 310px panel partly off a screen edge → the horizontal scroll. Cancel the offset so the overlay simply CENTRES the panel (a centred modal is the right look for a "Dialog" picker). Scoped via :has() to overlay content that actually holds a calendar → other overlays / inline pickers are untouched. */ .mud-overlay-content:has(.mud-picker-content) { max-width: 100vw; display: flex; justify-content: center; } .mud-overlay-content:has(.mud-picker-content) > * { position: static !important; inset: auto !important; transform: none !important; max-width: 96vw !important; } /* Belt-AND-braces so this can NEVER scroll sideways again regardless of how/where the panel is positioned: make MudBlazor's hard-coded 310px calendar RESPONSIVE. The calendar (`.mud-picker-content` / `-container` / `-calendar-container` / `-month-container`) is 310px fixed; on a viewport whose usable width is < 310px it overflows → the half-open calendar + sideways scroll. Drop the fixed widths so it shrinks to fit, and hard- stop any residual horizontal overflow at the picker + dialog level. */ .mud-picker-content, .mud-picker-container, .mud-picker-static, .mud-picker-calendar-container, .mud-picker-month-container { min-width: 0 !important; max-width: 100vw !important; } .mud-picker-calendar-container, .mud-picker-month-container { width: auto !important; } /* Календарот НИКОГАШ со скрол, ни вертикален ни хоризонтален (CEO 04.09). ВАЖНО: со overflow-x:hidden сам, CSS ја пресметува вертикалната оска како AUTO — па до самото ДАТУМ поле се појавуваше мини вертикален скролбар (.mud-picker-inline обвивката околу инпутот). Затоа ДВЕТЕ оски се експлицитно hidden, а панелот добива полна природна висина (max-height none) — нема што да се сече. Годишната листа внатре има свој скрол по дизајн. */ .mud-picker-content, .mud-picker-container, .mud-picker-inline { overflow: hidden !important; } .mud-picker-content, .mud-picker-container, .mud-picker-static { max-height: none !important; } /* On phones the 7-day grid is scaled to the viewport so all 7 columns always fit (header labels + day cells use the SAME width so the columns stay aligned). 7 × 13vw ≈ 91vw → always inside the screen, no sideways scroll. */ @media (max-width: 500px) { .mud-picker-calendar-container, .mud-picker-month-container, .mud-picker-content, .mud-picker-static { width: 100% !important; } .mud-picker-calendar .mud-day, .mud-picker-calendar .mud-day.mud-range, .mud-picker-calendar-header-day .mud-day-label { width: 13vw !important; margin: 0 !important; } .mud-picker-calendar .mud-day { height: 13vw !important; } .mud-picker-calendar-week { margin: 0 !important; } .mud-picker-month-container .mud-picker-month { flex-basis: 33.33% !important; } } /* Upload-bill dropzone: the InputFile is stretched invisibly over the whole frame, so a click opens the picker and a dropped file lands on the input natively (no JS). Kept inside .zenic-bill-upload so zenicCrop.arm's "input[type=file]" selector still finds it. */ .bill-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 210px; padding: 18px; margin-bottom: 8px; border: 2px dashed var(--border); border-radius: 12px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .bill-dropzone:hover { border-color: var(--sec-accounting); background: color-mix(in srgb, var(--sec-accounting) 6%, transparent); } .bill-dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ledger-sub { font-family: var(--font-sans); font-size: 11.5px; color: var(--text-muted); margin-top: 4px; max-width: 640px; line-height: 1.5; } .cset-table-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; } .cset-plan { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: var(--surface-2); } .cset-plan-r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cset-plan-r2 { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--text-secondary); flex-wrap: wrap; } .cset-plan-r2 label { display: flex; align-items: center; gap: 5px; cursor: pointer; } .cset-sum { font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; } .cset-sum.ok { color: var(--success); } .cset-sum.bad { color: var(--danger); } .cset-del { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .cset-del:hover:not(:disabled) { background: var(--danger); color: #fff; } .cset-seg-save { margin-top: 12px; display: flex; justify-content: flex-end; } .cset-biv-head { display: flex; align-items: flex-end; gap: 8px; padding: 2px 10px; flex-wrap: wrap; } .cset-biv-head .u-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } /* Recolour MudBlazor filled primary buttons to the System-section amber (Templates / Inventory). */ .mud-button-root.btn-amber { background-color: var(--sec-system) !important; color: #2a1a00 !important; border-color: var(--sec-system) !important; } .mud-button-root.btn-amber:hover { filter: brightness(1.08); } /* Accounting-section (sky) filled buttons — MudButton-level specificity so the section colour wins. */ .mud-button-root.btn-sec-accounting { background-color: var(--sec-accounting) !important; color: #04212e !important; border-color: var(--sec-accounting) !important; } .mud-button-root.btn-sec-accounting:hover { filter: brightness(1.08); } /* B2B-section (green) page/popup titles + filled buttons — Clients registry & related lists. */ .sec-b2b-title { color: var(--sec-b2b) !important; } .mud-button-root.btn-sec-b2b { background-color: var(--sec-b2b) !important; color: #06210f !important; border-color: var(--sec-b2b) !important; } .mud-button-root.btn-sec-b2b:hover { filter: brightness(1.08); } /* Agent-section (purple) page/popup titles + filled buttons — mirrors the accounting variants. */ .sec-agent-title { color: var(--sec-agent) !important; } .mud-button-root.btn-sec-agent { background-color: var(--sec-agent) !important; color: #fff !important; border-color: var(--sec-agent) !important; } .mud-button-root.btn-sec-agent:hover { filter: brightness(1.08); } /* Pipeline toolbar — ONE row on desktop (search · group · scope · sort, unchanged). On mobile (≤960px) it reflows to two rows via flex order: row 1 = search | sort, row 2 = group | scope. Wrapper divs are the flex items (reliable sizing); the MudBlazor control fills its wrapper. */ .pipe-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: nowrap; } .pipe-toolbar > div { display: flex; align-items: center; } .pipe-toolbar .mud-input-control, .pipe-toolbar .mud-select { width: 100%; } .pt-search { flex: 0 1 320px; } .pt-group { flex: 0 0 200px; } .pt-scope { flex: 0 0 160px; } .pt-sort { flex: 0 0 auto; } /* Лентата „контактиран" е СВОЈ ред, не преупотреба на .pt-* колоните горе: тие се фиксни (200px / 160px), па четирите копчиња се прекршуваа едно под друго внатре во кутијата. */ .pipe-contact-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: nowrap; } .pcb-label { color: var(--text-secondary); font-size: 12px; white-space: nowrap; } .pcb-ranges { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .pcb-ranges .mud-button-root { white-space: nowrap; padding: 4px 12px; min-width: 0; } .pcb-date { flex: 0 0 150px; } .pcb-date .mud-input-control { width: 100%; } /* Растојание пред датумите, за да се чита како „брзо" наспроти „сопствен опсег". */ .pcb-dates { display: flex; align-items: center; gap: 12px; margin-left: 8px; } @media (max-width: 960px) { /* Прекршување дури кога навистина нема место, и тогаш во ЦЕЛИ редови, не по половина копче. */ .pipe-contact-bar { flex-wrap: wrap; } .pcb-ranges { flex-wrap: wrap; } .pcb-dates { margin-left: 0; width: 100%; } .pcb-date { flex: 1 1 calc(50% - 6px); } } @media (max-width: 960px) { .pipe-toolbar { flex-wrap: wrap; } .pt-search { order: 1; flex: 1 1 calc(50% - 6px); } .pt-sort { order: 2; flex: 1 1 calc(50% - 6px); } .pt-group { order: 3; flex: 1 1 calc(50% - 6px); } .pt-scope { order: 4; flex: 1 1 calc(50% - 6px); } .pt-sort .mud-button-root { width: 100%; } } /* Clients table — fixed layout at 100% width so it NEVER exceeds the viewport (no horizontal scroll); long text columns truncate with an ellipsis, and the per-row actions wrap onto a second line. */ .clients-table .mud-table-root { table-layout: fixed; width: 100%; } .clients-table .cl-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-agent { display: flex; align-items: center; gap: 2px; min-width: 0; } .cl-truncate-inline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .clients-actions-cell { text-align: right; } .clients-actions { display: flex; flex-wrap: wrap; gap: 1px 2px; justify-content: flex-end; align-items: center; } .clients-actions .mud-button-root { min-width: 0; padding: 2px 6px; } .clients-actions .mud-button-label, .clients-actions .mud-button-root { white-space: nowrap; font-size: 11px; } .clients-actions .mud-icon-button { padding: 3px; } /* System-section page/popup titles in amber. */ .sec-system-title { color: var(--sec-system) !important; } /* Searchable + paginated agent picker inside the target popup. */ .agent-pick-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .agent-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 12.5px; } .agent-pick-row:last-child { border-bottom: none; } .agent-pick-row:hover { background: var(--surface-2); } .agent-pick-row.sel { background: color-mix(in srgb, var(--sec-system) 18%, transparent); color: var(--sec-system); font-weight: 700; } /* ── Leave Management (LV-05): balance stat chips + the deep-linked (focused) history row ── */ .pset-stat { border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; min-width: 110px; background: var(--surface-2); } .pset-stat-num { font-size: 20px; font-weight: 800; font-family: var(--font-sans); font-variant-numeric: tabular-nums; } .pset-stat-label { font-size: 11px; color: var(--text-muted); } .row-focus td { background: color-mix(in srgb, var(--sec-agent) 14%, transparent) !important; } /* ════════════════════════════════════════════════════════════════ MY WEB module panels — Online shop, Calendar, Domain. Twenty-odd editors were written for these three modules, each with a full vocabulary of class names and not one line of CSS behind them, so they rendered as unstyled prose with bare browser inputs loose in it while the CMS beside them looked like the rest of the portal. This is the shared answer, and it is kept in ONE place on purpose: the whole point is that the modules look like each other, and twenty private stylesheets is how that stops being true a month from now. The card drawn here is deliberately the card the CMS editors already draw — same border, radius, padding and rhythm — so a studio moving between My Web modules is never asked to relearn the screen. CONVENTION these rules lean on: an element INSIDE a panel carries exactly one class, named - (sg-input, do-hint, tr-item). The panel root itself is the exception — it carries site-panel plus its own name, and the suffix selectors only ever read the last token. That is what lets the suffix selectors below dress a new panel for free. An element needing two classes needs a rule of its own. ════════════════════════════════════════════════════════════════ */ .site-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; border: 1px solid var(--mud-palette-lines-default, var(--border-bright)); border-radius: var(--radius-lg, 12px); background: var(--surface-1); } /* ── What the panel is, and what it is for ──────────────────────── */ /* The module's name. h3 in some of these, h4 in others — a difference that was never a decision, so it is not drawn as one. */ .site-panel > h3, .site-panel > h4, .site-panel > section > h3, .site-panel > section > h4 { margin: 0; font-family: var(--font-sans); font-size: .95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); } /* A block inside it — Groups and Tags, the bank list, the week. */ .site-panel h5, .site-panel [class$="-subtitle"] { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* The sentence under a heading that says what the thing IS. These are load-bearing — several exist purely to stop a studio filing a bug about a delete that refuses — so they are readable rather than decorative: a measure that stops around 68 characters, and muted, because at full contrast they would fight the fields for attention. */ .site-panel p, .site-panel [class$="-hint"], .site-panel [class$="-note"], .site-panel [class$="-help"] { margin: 0; max-width: 68ch; font-size: .8rem; line-height: 1.5; color: var(--text-muted); } /* ── Fields ───────────────────────────────────────────────────────── Every one of these panels uses plain native controls rather than MudBlazor, on purpose: they have to keep working on a slow phone. That is exactly why they need dressing by hand — left bare they take the browser's white box and glow inside a dark panel. MudBlazor's own inputs are excluded throughout so the two never fight. */ .site-panel :is(input, select, textarea):not([class*="mud-"]):not([type="checkbox"]):not([type="radio"]) { padding: 7px 10px; border: 1px solid var(--mud-palette-lines-default, var(--border-bright)); border-radius: var(--radius-md, 8px); background: var(--surface-0); color: var(--text-primary); font: inherit; font-size: .85rem; line-height: 1.5; } .site-panel :is(input, select, textarea):not([class*="mud-"])::placeholder { color: var(--text-muted); } .site-panel :is(input, select, textarea):not([class*="mud-"]):focus-visible { outline: 2px solid var(--zenic-green); outline-offset: 1px; } .site-panel textarea:not([class*="mud-"]) { resize: vertical; min-height: 64px; } /* A quantity, a price, a sort order, a time. Sized to their content so a row of them does not read as a row of empty text boxes, and mono so the digits line up down a column. */ .site-panel input:is([type="number"], [type="time"], [type="date"]):not([class*="mud-"]) { font-family: var(--font-mono); font-size: .8rem; } .site-panel input[type="number"]:not([class*="mud-"]) { width: 5.5rem; } .site-panel input[type="time"]:not([class*="mud-"]) { width: 7.5rem; } .site-panel input[type="date"]:not([class*="mud-"]) { width: 9.5rem; } /* The text field is the one that should take whatever room is left. */ .site-panel [class$="-input"]:not([class*="mud-"]) { flex: 1 1 180px; min-width: 0; } .site-panel input[type="checkbox"] { accent-color: var(--zenic-green); } /* The word beside a field, and the word beside a tick — for most of these controls it is the only label they have. */ .site-panel [class$="-label"] { font-size: .82rem; color: var(--text-primary); } .site-panel label:has(> input[type="checkbox"]), .site-panel [class$="-check"] { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-primary); cursor: pointer; white-space: nowrap; } /* ── One entry of a list ──────────────────────────────────────────── A group, a product, a delivery zone, a treatment, a closure, a day of the week, a domain. Left unstyled these ran their controls together as inline text with no gap and no shared baseline, and the reason a studio could not scan them was that nothing said where one ended. */ .site-panel :is( [class$="-item"], [class$="-row"], [class$="-option"], [class$="-zone"], [class$="-line"], [class$="-day"], [class$="-domain"], [class$="-provider"], [class$="-carrier"], [class$="-order"], [class$="-return"], [class$="-package"], [class$="-branch"], [class$="-segment"], [class$="-variant"], [class$="-category"], [class$="-candidate"], [class$="-movement"], [class$="-new"], [class$="-head"], [class$="-actions"] ) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* The entries that ARE a record get a box, because a studio has to see where one stops. The single-line entries above do not: a border round every day of the week is noise. */ .site-panel :is( [class$="-order"], [class$="-return"], [class$="-package"], [class$="-domain"], [class$="-provider"], [class$="-item"], [class$="-option"], [class$="-candidate"] ) { padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default, var(--border-bright)); border-radius: var(--radius-md, 8px); background: var(--surface-0); } /* And the ones that hold several lines of their own — an order with its items and its total, a domain with the DNS records a registrar has to be given — stack them instead of running them along one line. A row is right for an entry that IS one line; it is wrong for a record. */ .site-panel :is( [class$="-order"], [class$="-return"], [class$="-package"], [class$="-domain"], [class$="-provider"], [class$="-candidate"] ) { flex-direction: column; align-items: stretch; } /* A block of entries, stacked. */ .site-panel :is( [class$="-section"], [class$="-zones"], [class$="-lines"], [class$="-fields"], [class$="-providers"], [class$="-carriers"], [class$="-records"], [class$="-segments"], [class$="-variants"], [class$="-branches"], [class$="-categories"], [class$="-skills"], [class$="-numbers"], [class$="-faqs"], [class$="-list"], [class$="-holds"], [class$="-history"], [class$="-log"] ) { display: flex; flex-direction: column; gap: 8px; } /* ── Figures ──────────────────────────────────────────────────────── A count, a total, a saving, a date. Mono, because these are read as data rather than as prose, and because a column of them only lines up if the digits are all the same width. */ .site-panel :is( [class$="-count"], [class$="-number"], [class$="-total"], [class$="-value"], [class$="-when"], [class$="-date"], [class$="-placed"], [class$="-expiry"], [class$="-qty"], [class$="-net"], [class$="-minutes"], [class$="-time"], [class$="-range"] ):not(input) { font-family: var(--font-mono); font-size: .78rem; color: var(--text-secondary); } /* The quiet half of a figure: "3 products", "saves 12 euro" — the word rather than the number. */ .site-panel :is( [class$="-count-label"], [class$="-total-label"], [class$="-net-label"], [class$="-reserved-label"], [class$="-counted-label"] ) { font-family: var(--font-sans); font-size: .72rem; color: var(--text-muted); } /* ── States ───────────────────────────────────────────────────────── Verified, waiting, unavailable, closed — said in the palette the rest of the portal already uses for those answers. */ .site-panel [class$="-verified"], .site-panel [class$="-set"] { padding: 2px 8px; border-radius: var(--radius-pill, 999px); background: var(--success-dim); color: var(--success); font-size: .68rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; } .site-panel [class$="-waiting"] { padding: 2px 8px; border-radius: var(--radius-pill, 999px); background: var(--warning-dim); color: var(--warning); font-size: .68rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; } .site-panel [class$="-unavailable"], .site-panel [class$="-empty"], .site-panel [class$="-closed"] { font-size: .78rem; font-style: italic; color: var(--text-muted); } /* The DNS records a registrar has to be given, and the address pasted into a courier's panel. Literal strings, shown as such, and allowed to break anywhere rather than pushing the card wide. */ .site-panel :is( [class$="-host"], [class$="-callback-url"], [class$="-feedurl"], [class$="-example"] ) { font-family: var(--font-mono); font-size: .75rem; color: var(--text-secondary); overflow-wrap: anywhere; } /* ── Narrow ───────────────────────────────────────────────────────── Measured on the split frame, never the window: the sidebar takes its own width, so a wide laptop still leaves these panels a narrow column. Below the fold the text field takes a line of its own rather than shrinking to a slot too small to read a product name in. */ @container cportal (max-width: 560px) { .site-panel [class$="-input"]:not([class*="mud-"]) { flex: 1 0 100%; } } /* A labelled field — the word above the box, not beside it. Beside it works until the label is a Greek sentence and the box is what is left of the line; above it survives both languages and every width. */ .site-panel [class$="-field"] { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } /* A labelled field stacks its own two parts, so the box below the word must not be asked to grow: in a column, flex-basis is HEIGHT, and a text field told to be 180px tall is the listbox this started as. */ .site-panel [class$="-field"] > :is(input, select, textarea, [class$="-input"], [class$="-number"], [class$="-time"]) { flex: 0 0 auto; } /* A figure and the word that says what it counts — "4 products", "2 reserved", "total 93.50". Two spans with nothing between them read as one word, which is how "0products" happened. */ .site-panel :is( [class$="-count"], [class$="-reserved"], [class$="-net"], [class$="-total"], [class$="-counted"], [class$="-saving"] ):not(input) { display: inline-flex; align-items: baseline; gap: 4px; } /* The button that adds one more of whatever the block lists. A column stretches its children by default, which turns "Add a group" into a full-width bar that reads as the most important thing on the panel — and it is the least. */ .site-panel > .mud-button-root, .site-panel > section > .mud-button-root, .site-panel [class$="-section"] > .mud-button-root, .site-panel [class$="-list"] > .mud-button-root, .site-panel [class$="-lines"] > .mud-button-root, .site-panel [class$="-zones"] > .mud-button-root { align-self: flex-start; } /* A native select is the one control that will not size itself sanely from the rules above: left alone in a stretched column it draws every option at once. */ .site-panel select:not([class*="mud-"]) { height: auto; min-height: 0; align-self: stretch; } /* What the entry IS — the product, the treatment, the resource, the day, the person. Left to inherit, these came out at body size while every control beside them was set smaller, so the name of a thing shouted over the row it belonged to. */ .site-panel :is( [class$="-name"], [class$="-who"], [class$="-what"], [class$="-title"] ):not(h3):not(h4):not(h5) { font-size: .85rem; font-weight: 600; color: var(--text-primary); } /* Its code, and the small print beside it — a SKU, a branch, a reason, the treatment a package line came from. Secondary by definition: the answer to "which one" is the name above, not this. */ .site-panel :is( [class$="-sku"], [class$="-meta"], [class$="-of"], [class$="-reason"], [class$="-where"], [class$="-unit"], [class$="-type"] ) { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); } /* Where a thing has got to — packed, sent, waiting on the money. A word the studio scans for, so it is set apart from the row rather than sitting in it as one more piece of text. Spans only. The publish panel's status is a paragraph of its own and reads as a sentence; drawn as a badge it would span the whole card. */ .site-panel [class$="-status"]:not(p) { padding: 2px 8px; border-radius: var(--radius-pill, 999px); background: var(--surface-2); border: 1px solid var(--mud-palette-lines-default, var(--border-bright)); font-size: .68rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } /* A record stacks its lines, and a stacked box stretches whatever is in it. That is right for the fields — a merchant id should take the width — and wrong for everything that is the size of its own words: a Connect button drawn the full width of a bank card reads as the most important thing on the panel, and CONNECTED drawn that wide stops reading as a badge at all. */ .site-panel :is( [class$="-order"], [class$="-return"], [class$="-package"], [class$="-domain"], [class$="-provider"], [class$="-candidate"] ) > :is( .mud-button-root, [class$="-set"], [class$="-verified"], [class$="-waiting"], [class$="-status"], [class$="-unavailable"], [class$="-name"] ) { align-self: flex-start; } /* A template drawn but not yet choosable: its home page exists, its inner pages are still a frame. Dimmed rather than hidden, so a studio sees what is coming and cannot pick it by accident. */ .wiz-template[data-template-soon], .tpl-card[data-template-soon] { opacity: .45; cursor: not-allowed; } .wiz-template-soon, .tpl-soon { display: inline-block; margin-top: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; } /* ── Бизнис план: избледената бројка додека серверот смета ─────────── Пресметката постои САМО на серверот (спец „Бизнис план" т.13), па меѓу потегот на лизгачот и одговорот минува време. Претходната бројка останува видлива, но избледена: празно поле изгледа како грешка, а нова бројка пред одговорот би била втора вистина за иста големина. Преодот е кус — да се забележи, не да се чека. */ .cportal-bplan-stale { opacity: .45; transition: opacity .15s ease-in; pointer-events: none; } /* Трите ограничувања до препораката и трите опции при преполн капацитет: обичен список, ставките се реченици а не етикети. */ .cportal-bplan-limits { margin: 4px 0 8px; padding-inline-start: 20px; } .cportal-bplan-limits li { margin-bottom: 4px; }