/* ─── 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 */ --font-sans: 'Syne', sans-serif; --font-mono: 'JetBrains Mono', 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); } /* JetBrains Mono for codes / data (MudBlazor cells use 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-mono); 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-mono); 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, 'JetBrains Mono', monospace); } #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-mono); } .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-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; } /* 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-purple / .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-purple { background: var(--accent-purple-strong, #6d4bd8); color: #fff; } .btn-purple:hover:not(:disabled) { background: var(--accent-purple, #8b6ff0); } .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-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-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-mono); 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-mono); 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-mono); font-size: 12px; font-weight: 700; } .perm-section-count { font-family: var(--font-mono); 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-mono); 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-mono); 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-mono); 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-mono); 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-mono); 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-mono); font-size: 12.5px; } .pwd-wrap { position: relative; } .pwd-wrap .form-input { padding-right: 42px; } .pwd-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; opacity: 0.55; padding: 5px; line-height: 1; } .pwd-eye:hover { 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-mono); 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: 1280px for a "md" table): MudBlazor 9.x keeps the `.mud-md-table` class on the table at ALL widths and only switches to card layout inside this media query. 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: 1280px) { .data-table-look.mud-md-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-md-table .mud-table-cell::before { padding-right: 0; padding-inline-end: 0; margin-right: 0; color: var(--text-muted); font-family: var(--font-mono); 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-md-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-md-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-mono); 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-mono); } .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-mono); 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-mono); } /* 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; } /* ── 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-mono); } .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-mono); 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-mono); 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-mono); } .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-mono); 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-mono); } .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-mono); 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; } .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; } /* ── 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-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-mono); 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-ic { font-size: 15px; flex-shrink: 0; } .gs-item-label { flex: 1; font-size: 12.5px; color: var(--text-primary); } .gs-item-type { font-family: var(--font-mono); 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-mono); } /* ── 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-mono); 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-mono); 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-mono); } .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-mono); } .notif-empty { padding: 36px 16px; text-align: center; color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); } .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-mono); 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-mono); 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-mono); 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; } .mud-picker-content, .mud-picker-container, .mud-picker-inline { overflow-x: hidden !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; } } .ledger-sub { font-family: var(--font-mono); 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-mono); } .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; } @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-mono); } .pset-stat-label { font-size: 11px; color: var(--text-muted); } .row-focus td { background: color-mix(in srgb, var(--sec-agent) 14%, transparent) !important; }