/* Palette copied 1:1 from the WPF app's Styles/Theme.Light.xaml, so CAQ.Web reads as the same product as the desktop app rather than a generic admin-panel template. Keep these in sync if Theme.Light.xaml changes. 2026-08-21: premium/responsive pass — same brand palette, but the shell moved from a single-row top nav (12 links, would wrap badly on tablet/ mobile) to a collapsible sidebar app-shell, and every card/table/button/ form control got more spacing, softer shadows and hover/focus states. Every existing class name kept its contract — pages were not touched. */ :root { --bg: #F3F5F7; /* SurfaceBaseColor / ColorBackground */ --card: #FFFFFF; /* SurfaceRaisedColor / ColorCard */ --text: #1F2933; /* TextPrimaryColor */ --text-secondary: #5B6673; /* TextSecondaryColor */ --text-muted: #7A8491; /* TextMutedColor */ --border: #B8C2CF; /* BorderStrongColor / ColorBorder */ --border-subtle: #D5DCE5; /* BorderSubtleColor */ --primary: #1E88E5; /* ColorPrimary */ --primary-hover: #1565C0; /* ColorPrimaryHover */ --primary-light: #DCEEFF; /* ColorPrimaryLight */ --header-bg: #24303D; /* ColorHeaderBackground */ --header-border: #344252; /* ColorHeaderBorder */ --hover-bg: #E9EDF2; /* ColorHoverBackground */ --row-alt: #F8FAFC; /* ColorRowAlt */ --status-success: #4CAF50; --status-success-bg: #DCFCE7; --status-success-text: #065F46; --status-warning: #FF9800; --status-warning-bg: #FEF9C3; --status-warning-text: #92400E; --status-error: #E53935; --status-error-bg: #FEE2E2; --status-error-text: #DC2626; --status-info-bg: #DBEAFE; --status-info-text: #1D4ED8; /* ── New design tokens (web-only, no WPF equivalent) ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 2px 8px rgba(16,24,40,.08); --shadow-lg: 0 8px 24px rgba(16,24,40,.12); --transition: 140ms ease; --sidebar-w: 248px; } /* Dark palette — copiată 1:1 din Styles/Theme.Dark.xaml (aceleași chei ColorBackground/ColorCard/... din WPF), activată prin data-theme="dark" pe . Vezi CAQ.Web/wwwroot/js/theme.js pentru comutare + persistare (cookie "caq-theme"), citit server-side în Pages/_Host.cshtml ca să nu existe flash la reîncărcare. */ :root[data-theme="dark"] { --bg: #0F141A; /* ColorBackground */ --card: #1E2630; /* ColorCard */ --text: #E8EAED; /* TextPrimaryColor */ --text-secondary: #C6CBD3; /* TextSecondaryColor */ --text-muted: #C6CBD3; /* TextMutedColor */ --border: #3A4655; /* BorderStrongColor */ --border-subtle: #2B3542; /* BorderSubtleColor */ --primary: #4AA8FF; /* ColorPrimary */ --primary-hover: #2B8EEA; /* ColorPrimaryHover */ --primary-light: #1C2C3F; /* ColorPrimaryLight */ --header-bg: #11151B; /* ColorHeaderBackground */ --header-border: #252B34; /* ColorHeaderBorder */ --hover-bg: #252B34; /* ColorHoverBackground */ --row-alt: #1D2433; /* ColorRowAlt */ --status-success: #62C46C; --status-success-bg: #0D2B1A; --status-success-text: #62C46C; --status-warning: #FFB14A; --status-warning-bg: #2A2200; --status-warning-text: #FFB14A; --status-error: #FF6B6B; --status-error-bg: #3D1717; --status-error-text: #FF6B6B; --status-info-bg: #1C2C3F; --status-info-text: #4AA8FF; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 2px 10px rgba(0,0,0,.4); --shadow-lg: 0 10px 28px rgba(0,0,0,.5); } * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-family: "Segoe UI Variable", "Segoe UI", -apple-system, system-ui, Arial, sans-serif; background: var(--bg); color: var(--text); transition: background var(--transition), color var(--transition); } a { color: var(--primary); } /* ═══════════════════════════════════════════════════════════════ APP SHELL — sidebar + header + content, responsive ═══════════════════════════════════════════════════════════════ */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--header-bg); border-right: 1px solid var(--header-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; } .sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--header-border); } .sidebar-toggle-btn { margin-left: auto; flex: 0 0 auto; background: none; border: 1px solid var(--header-border); color: #DDE3EA; border-radius: var(--radius-sm); width: 26px; height: 26px; font-size: .8rem; line-height: 1; cursor: pointer; transition: background var(--transition), color var(--transition); } .sidebar-toggle-btn:hover { background: rgba(255,255,255,.1); color: #fff; } /* Collapsed = icon-only rail (desktop only, toggled via the « / » button). Mobile off-canvas (.sidebar-open, driven by the hamburger) is a separate concern and always shows full width when open. */ .sidebar.collapsed { width: 72px; flex-basis: 72px; } .sidebar.collapsed .brand-name, .sidebar.collapsed .side-nav-section, .sidebar.collapsed .side-nav-link span { display: none; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 1.25rem .5rem 1rem; flex-wrap: wrap; } .sidebar.collapsed .sidebar-toggle-btn { margin-left: 0; } .sidebar.collapsed .side-nav-link { justify-content: center; padding: .6rem; } .sidebar.collapsed .side-nav { padding: .75rem .5rem 1.5rem; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em; } .brand-name { font-weight: 600; font-size: 1.05rem; color: #fff; } .brand { font-weight: 600; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: .5rem; } .side-nav { display: flex; flex-direction: column; padding: .75rem .75rem 1.5rem; gap: .1rem; } .side-nav-section { margin: 1rem .5rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8792A2; } .side-nav-link { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--radius-sm); color: #DDE3EA; text-decoration: none; font-size: .92rem; transition: background var(--transition), color var(--transition); } .side-nav-link:hover { background: rgba(255,255,255,.08); color: #fff; } .side-nav-link.active, .side-nav-link[aria-current="page"] { background: var(--primary); color: #fff; font-weight: 600; } .nav-backdrop { display: none; } .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .top-row { background: var(--card); border-bottom: 1px solid var(--border-subtle); color: var(--text); padding: .65rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-sm); } .top-row-auth { background: var(--header-bg); color: #fff; justify-content: space-between; box-shadow: none; } .top-row-spacer { flex: 1 1 auto; } .top-row-left { display: flex; align-items: center; gap: 1.5rem; } .top-nav { display: flex; gap: 1rem; flex-wrap: wrap; } .top-nav a { color: #DDE3EA; text-decoration: none; font-size: .9rem; } .top-nav a:hover { color: #fff; } .hamburger-btn { display: none; background: none; border: 1px solid var(--border-subtle); color: var(--text); border-radius: var(--radius-sm); width: 34px; height: 34px; font-size: 1rem; cursor: pointer; } .session-info { font-size: .85rem; color: var(--text-secondary); display: flex; align-items: center; gap: .75rem; } .top-row-auth .session-info, .top-row-auth .link-btn { color: #DDE3EA; border-color: var(--header-border); } .user-chip { color: var(--text); font-weight: 600; } .user-chip em { color: var(--text-secondary); font-weight: 400; font-style: normal; } .link-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); padding: .3rem .7rem; font-size: .8rem; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .link-btn:hover { background: var(--hover-bg); border-color: var(--primary); color: var(--text); } .top-row-auth .link-btn:hover { background: #344252; color: #fff; } main { padding: var(--space-5) var(--space-6); } .auth-main { padding: 0; display: flex; align-items: center; min-height: calc(100vh - 58px); } .auth-main .content { width: 100%; } h1 { font-size: 1.55rem; font-weight: 600; margin: 0 0 .35rem; color: var(--text); letter-spacing: -.01em; } h2 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 .75rem; color: var(--text); } .subtitle { color: var(--text-secondary); margin-top: -.15rem; margin-bottom: 1.5rem; font-size: .92rem; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — collapse sidebar to an off-canvas drawer under 960px ═══════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg); transition: transform var(--transition); z-index: 60; } .sidebar.sidebar-open { transform: translateX(0); } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity var(--transition); z-index: 50; } .nav-backdrop.show { opacity: 1; pointer-events: auto; } main { padding: var(--space-4); } .top-row { padding: .6rem 1rem; } .session-info { gap: .5rem; } .user-chip { display: none; } .sidebar-toggle-btn { display: none; } .sidebar.collapsed { width: var(--sidebar-w); flex-basis: var(--sidebar-w); } .sidebar.collapsed .brand-name, .sidebar.collapsed .side-nav-section, .sidebar.collapsed .side-nav-link span { display: inline; } .sidebar.collapsed .side-nav-link { justify-content: flex-start; } } @media (max-width: 560px) { .kpi-row { flex-direction: column; } .kpi-card { min-width: 0; } .detail-grid { grid-template-columns: 1fr 1fr; } .filter-grid { grid-template-columns: 1fr; } table.grid { display: block; overflow-x: auto; white-space: nowrap; } } /* ═══════════════════════════════════════════════════════════════ AUTH / LOGIN ═══════════════════════════════════════════════════════════════ */ .login-box { max-width: 380px; margin: 0 auto; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2.25rem 2rem; box-shadow: var(--shadow-lg); } .login-box h1 { font-size: 1.3rem; margin-bottom: 1.5rem; color: var(--text); } .field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .35rem; } .field label { font-size: .85rem; color: var(--text-secondary); font-weight: 500; } .field input, .field select, .field textarea { padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-size: .95rem; color: var(--text); font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); } .field input:focus, .field select:focus, .field textarea:focus, .filter-grid input:focus, .filter-grid select:focus, .status-form select:focus, .closed-note:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .primary-btn { width: 100%; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: .65rem; font-size: .95rem; font-weight: 600; cursor: pointer; margin-top: .5rem; box-shadow: var(--shadow-sm); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); } .primary-btn:disabled { opacity: .55; cursor: default; box-shadow: none; } .primary-btn:not(:disabled):hover { background: var(--primary-hover); box-shadow: var(--shadow-md); } .primary-btn:not(:disabled):active { transform: translateY(1px); } .hint { font-size: .8rem; color: var(--text-muted); margin-top: 1.25rem; text-align: center; } /* P2 polish (2026-08-30) — small caption under a table-cell value (e.g. "Creat de X pe DATA" on the 4 Claims action tables). Distinct from .hint (which centers + adds a large top margin, meant for standalone placeholder text under a panel, not an inline table caption). */ .row-subtext { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; } /* ═══════════════════════════════════════════════════════════════ KPI CARDS ═══════════════════════════════════════════════════════════════ */ .kpi-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .kpi-card { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.1rem 1.5rem; min-width: 150px; text-align: center; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .kpi-card h3 { margin: 0; font-size: 2.1rem; font-weight: 700; color: var(--primary); } .kpi-card span { color: var(--text-secondary); font-size: .85rem; } /* ═══════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════ */ table.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } table.grid th, table.grid td { padding: .65rem .85rem; border-bottom: 1px solid var(--border-subtle); text-align: left; font-size: .9rem; color: var(--text); } table.grid th { background: var(--row-alt); font-weight: 600; color: var(--text-secondary); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; } table.grid tbody tr:nth-child(even) { background: var(--row-alt); } table.grid tbody tr:last-child td { border-bottom: none; } /* ═══════════════════════════════════════════════════════════════ ALERTS / STATUS ═══════════════════════════════════════════════════════════════ */ .alert-error { background: var(--status-error-bg); color: var(--status-error-text); border: 1px solid var(--status-error); border-radius: var(--radius-sm); padding: .75rem 1rem; } .alert-ok { background: var(--status-success-bg); color: var(--status-success-text); border: 1px solid var(--status-success); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-top: .75rem; } /* P3 polish (2026-08-22): promoted from 2 files that hardcoded #FFF3E0/#8A5300/#FFD9A0 for a warning-tinted banner — same shape as .alert-error/.alert-ok above, but using the --status-warning* tokens that already existed in :root/[data-theme="dark"] and were unused by any class until now. */ .alert-warning { background: var(--status-warning-bg); color: var(--status-warning-text); border: 1px solid var(--status-warning); border-radius: var(--radius-sm); padding: .75rem 1rem; } /* P3 polish (2026-08-22): promoted from 16 identical inline style="color:#E53935;..." occurrences across 13 files (every module's "Delete X" button). #E53935 was hardcoded to the light-theme value of --status-error and did not follow dark theme; the border-color:var(--border) half of the old inline style was a no-op (.link-btn's default border is already var(--border)), so it is dropped rather than reproduced here. */ .danger-btn { color: var(--status-error); } /* P3 polish (2026-08-22): promoted from 13 identical style="margin-top:1rem;" occurrences on .filter-actions used as a form's Save/Delete footer row (not a filter bar) — same flex/gap layout as .filter-actions, just spaced below the form above it. */ .filter-actions.form-footer { margin-top: 1rem; } /* P3 polish (2026-08-22): promoted from 9 identical style="width:100%; font-family:monospace;" occurrences on JSON/paste textareas (import dialogs, bulk-paste boxes) across 5 files. */ .textarea-mono { width: 100%; font-family: monospace; } .tab-row { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .tab-btn { background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .5rem 1.1rem; font-size: .9rem; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .tab-btn:hover { border-color: var(--primary); } .tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-sm); } .clickable-row { cursor: pointer; transition: background var(--transition); } .clickable-row:hover { background: var(--hover-bg) !important; } .row-arrow { color: var(--text-muted); } .status-pill { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .01em; background: var(--hover-bg); color: var(--text-secondary); } .status-Open { background: var(--status-warning-bg); color: var(--status-warning-text); } .status-Containment, .status-RootCause, .status-CorrectiveAction, .status-PreventiveAction { background: var(--status-info-bg); color: var(--status-info-text); } .status-Closed { background: var(--status-success-bg); color: var(--status-success-text); } /* ═══════════════════════════════════════════════════════════════ DETAIL / TEXT / FORM CARDS ═══════════════════════════════════════════════════════════════ */ .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.1rem; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.4rem 1.6rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-sm); } .detail-grid label { display: block; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: .25rem; } .detail-grid .full-row { grid-column: 1 / -1; } .detail-grid > div { color: var(--text); font-size: .95rem; } .text-block { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; white-space: pre-wrap; color: var(--text); box-shadow: var(--shadow-sm); } .status-form { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .85rem; max-width: 440px; box-shadow: var(--shadow-sm); } .status-form select { padding: .55rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; color: var(--text); background: var(--card); } .closed-note { padding: .55rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; min-height: 70px; font-family: inherit; color: var(--text); background: var(--card); } .filter-panel { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.3rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .filter-grid .field { margin-bottom: 0; } .filter-grid input, .filter-grid select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .88rem; color: var(--text); background: var(--card); transition: border-color var(--transition), box-shadow var(--transition); } .filter-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .filter-actions .primary-btn { width: auto; margin-top: 0; padding: .55rem 1.4rem; } .filter-actions .link-btn { background: var(--card); padding: .55rem 1rem; } .results-count { color: var(--text-secondary); font-size: .85rem; margin-bottom: .75rem; } /* ═══════════════════════════════════════════════════════════════ ACTIVE SESSION EDITOR — horizontal summary bar, sticky action toolbar, cycle tab row, value table with status column + a card-based fallback for narrow screens. ═══════════════════════════════════════════════════════════════ */ .session-summary-bar { display: flex; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; overflow: hidden; } .session-summary-bar > div { padding: .9rem 1.4rem; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: .2rem; min-width: 120px; flex: 1 1 auto; } .session-summary-bar > div:last-child { border-right: none; } .session-summary-bar label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .session-summary-bar span { color: var(--text); font-size: .92rem; font-weight: 500; } .action-toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .75rem 1rem; margin-bottom: 1rem; } .action-toolbar-buttons { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .primary-btn.btn-inline { width: auto; margin-top: 0; padding: .5rem 1.1rem; } .incomplete-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--status-warning-text); background: var(--status-warning-bg); padding: .3rem .75rem; border-radius: 999px; white-space: nowrap; } .incomplete-badge-ok { color: var(--status-success-text); background: var(--status-success-bg); } .cycle-tab-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; } .cycle-tab-row .tab-row { margin-bottom: 0; } .value-table-wrap { overflow-x: auto; border-radius: var(--radius-md); } .value-table .value-cell input, .value-table .value-cell select { width: 92px; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .88rem; color: var(--text); background: var(--card); transition: border-color var(--transition), box-shadow var(--transition); } .value-table .value-cell input:focus, .value-table .value-cell select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .value-table .value-cell input:disabled, .value-table .value-cell select:disabled { opacity: .6; } .computed-cell { color: var(--text-secondary); font-style: italic; font-size: .88rem; } .status-cell { text-align: center; } .status-pill.status-ok { background: var(--status-success-bg); color: var(--status-success-text); } .status-pill.status-nok { background: var(--status-error-bg); color: var(--status-error-text); } .status-pill.status-warn { background: var(--status-warning-bg); color: var(--status-warning-text); } .status-pill.status-none { background: var(--hover-bg); color: var(--text-muted); } /* Coloreaza textul valorii direct in celula (nu doar coloana Status) — rosu pentru NOK, dar discret: doar text + un accent subtire pe marginea stanga a input-ului, nu un chenar rosu complet (evita supraincarcarea vizuala pe randuri NOK). */ .value-table .value-cell input.val-nok, .characteristic-card-value input.val-nok { color: var(--status-error-text); font-weight: 600; border-left: 2px solid var(--status-error); } /* Randul urmatoarei valori needitate (vezi "Urmatoarea actiune" din sidebar) — chenar accent, fara sa schimbe fundalul intregului rand. */ .value-table tbody tr.next-row td { border-top: 2px solid var(--status-warning); border-bottom: 2px solid var(--status-warning); } .value-table tbody tr.next-row td:first-child { border-left: 2px solid var(--status-warning); border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .value-table tbody tr.next-row td:last-child { border-right: 2px solid var(--status-warning); border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } .characteristic-card.next-row { border-color: var(--status-warning); box-shadow: 0 0 0 2px var(--status-warning); } /* Highlight discret al randului unde se afla focus-ul curent (orice celula editabila din acel rand) — pur CSS (:focus-within), independent de "next-row" (care marcheaza urmatoarea celula needitata, nu neaparat unde e focusul chiar acum). */ .value-table tbody tr:focus-within td { background: var(--hover-bg); } .characteristic-card:focus-within { border-color: var(--primary); } /* Layout principal (tabel) + sidebar dreapta (Urmatoarea actiune / Scurtaturi / Ultima salvare) — vezi ActiveSessionEditor.razor. */ .session-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; } .session-sidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 4.5rem; } .side-panel { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; } .side-panel h3 { margin: 0 0 .7rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } /* Sub 960px sidebar-ul devine sectiune sub tabel (vezi .session-layout mai jos) — fiecare panou e un
nativ (fara JS), ca sa poata fi restrans daca utilizatorul vrea sa vada mai mult din tabel pe ecran mic; ramane deschis implicit (atributul "open" din markup) si nu se comporta diferit pe desktop. */ .side-panel summary { cursor: pointer; list-style: none; } .side-panel summary::-webkit-details-marker { display: none; } .side-panel summary h3 { display: inline-flex; align-items: center; gap: .35rem; } .side-panel summary h3::after { content: "▾"; font-size: .7rem; color: var(--text-muted); transition: transform var(--transition); } .side-panel[open] summary h3::after { transform: rotate(180deg); } .next-action-box { display: flex; flex-direction: column; gap: .3rem; } .next-action-box .next-action-name { font-size: 1.05rem; font-weight: 600; color: var(--text); } .next-action-box .next-action-idx { font-size: .82rem; color: var(--text-secondary); } .next-action-box .link-btn { margin-top: .5rem; width: auto; } .side-panel-empty { color: var(--text-secondary); font-size: .85rem; } .shortcut-list { display: flex; flex-direction: column; gap: .5rem; margin: 0; } .shortcut-list .shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .82rem; } .shortcut-list kbd { background: var(--hover-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: .15rem .45rem; font-size: .78rem; font-family: monospace; color: var(--text); white-space: nowrap; } .shortcut-list .shortcut-desc { color: var(--text-secondary); text-align: right; } .last-save-box { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text); } .last-save-box .dot-ok { color: var(--status-success-text); } /* KPI "Rezultat ciclu" — rezultatul calitativ (OK/NOK), separat vizual de completitudine (cardurile "Caracteristici complete"/"Valori introduse", care raman neschimbate). kpi-secondary e procentul, afisat mai mic/mai discret sub numarul principal, ca sa nu se citeasca drept acelasi lucru cu completitudinea. */ .kpi-card-result h3 { font-size: 1.5rem; } .kpi-card-result .kpi-ok { color: var(--status-success-text); } .kpi-card-result .kpi-nok { color: var(--status-error-text); } .kpi-card-result .kpi-secondary { display: block; margin-top: .2rem; font-size: .78rem; color: var(--text-muted); } /* Panou "Urmatoarea actiune" — variante de fundal usor tintat dupa tipul mesajului, fara sa foloseasca alte culori decat cele deja definite pentru status. */ .next-action-nok { padding: .5rem .6rem; border-radius: var(--radius-sm); background: var(--status-error-bg); } .next-action-complete { padding: .5rem .6rem; border-radius: var(--radius-sm); background: var(--status-success-bg); } .next-action-complete .next-action-name { color: var(--status-success-text); } .next-action-nok .next-action-name { color: var(--status-error-text); } /* Feedback de salvare compact (nu pe toata latimea, dispare automat — vezi SetSaveMessage in @code) — reutilizeaza .alert-ok/.alert-error existente, doar cu padding redus si afisat inline in loc de bloc plin. */ .alert-compact { display: inline-flex; align-items: center; padding: .5rem .9rem; font-size: .85rem; margin: 0 0 1rem; } @media (max-width: 960px) { .session-layout { grid-template-columns: 1fr; } .session-sidebar { position: static; } } /* Mobile card fallback for the value table — hidden by default, swapped in under 768px (see media query below); reuses the exact same input/select markup and event handlers as the table cells, just stacked vertically. */ .characteristic-cards { display: none; } .characteristic-card { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; margin-bottom: .85rem; } .characteristic-card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; } .characteristic-card-header strong { font-size: .98rem; color: var(--text); } .characteristic-card-meta { color: var(--text-secondary); font-size: .82rem; margin-bottom: .75rem; } .characteristic-card-values { display: flex; flex-wrap: wrap; gap: .6rem; } .characteristic-card-value { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--text-muted); font-weight: 600; } .characteristic-card-value input, .characteristic-card-value select { width: 84px; padding: .45rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; color: var(--text); background: var(--card); } .characteristic-card-value input:focus, .characteristic-card-value select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } @media (max-width: 768px) { .value-table-wrap { display: none; } .characteristic-cards { display: block; } .action-toolbar { position: static; } .session-summary-bar { flex-direction: column; } .session-summary-bar > div { border-right: none; border-bottom: 1px solid var(--border-subtle); } .session-summary-bar > div:last-child { border-bottom: none; } } /* ═══════════════════════════════════════════════════════════════ CLAIMS / 8D EDITOR (Faza C) — D8 progress dots, inline table-row editing (containment/root-cause/corrective/preventive), per-row document upload/download. Reuses .filter-panel/.filter-grid for every "add row" form and table.grid for every list — these three classes are the only genuinely new vocabulary this page needed. ═══════════════════════════════════════════════════════════════ */ .d8-progress { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; margin: .5rem 0 1.5rem; } .d8-step { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .68rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .d8-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--border); transition: background var(--transition), border-color var(--transition); } .d8-dot.d8-done { background: var(--status-success); border-color: var(--status-success); } .d8-dot.d8-active { background: var(--primary); border-color: var(--primary); } .d8-dot.d8-overdue { background: var(--status-error); border-color: var(--status-error); } .d8-dot.d8-pending { background: var(--card); border-color: var(--border); } /* Inline table-row editing — replaces a row's plain-text cells with compact inputs/selects while a row is being edited (containment/root-cause/ corrective/preventive action lists). */ .cell-input, table.grid td select.cell-input, table.grid td textarea.cell-input { width: 100%; min-width: 90px; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .85rem; color: var(--text); background: var(--card); transition: border-color var(--transition), box-shadow var(--transition); } .cell-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .row-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; white-space: nowrap; } .row-actions .link-btn { padding: .3rem .55rem; } .doc-cell { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; } .doc-cell input[type="file"] { font-size: .78rem; max-width: 160px; } @media (max-width: 960px) { .d8-progress { gap: .4rem; } .d8-step { font-size: .62rem; } } /* ═══════════════════════════════════════════════════════════════ DEVICES — master-detail merge with Device Groups (2026-08-21): a left rail of groups ("Toate dispozitivele" / "Fără grup" / real groups with counts) next to the existing devices list/filter/table, so the two flows (browse devices, manage groups) live on one page. ═══════════════════════════════════════════════════════════════ */ .devices-shell { display: flex; align-items: flex-start; gap: 1.5rem; } .group-rail { flex: 0 0 240px; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .6rem; position: sticky; top: calc(58px + var(--space-5)); } .group-rail-header { display: flex; align-items: center; justify-content: space-between; padding: .4rem .6rem .6rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .group-rail-header .link-btn { padding: .15rem .5rem; font-size: .74rem; } .group-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text); font-size: .88rem; cursor: pointer; transition: background var(--transition), color var(--transition); } .group-item:hover { background: var(--hover-bg); } .group-item.active { background: var(--primary); color: #fff; font-weight: 600; } .group-item.active .group-count { background: rgba(255,255,255,.25); color: #fff; } .group-count { background: var(--hover-bg); color: var(--text-secondary); font-size: .74rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; min-width: 1.6rem; text-align: center; } .devices-main { flex: 1 1 auto; min-width: 0; } @media (max-width: 768px) { .devices-shell { flex-direction: column; } .group-rail { flex: 0 0 auto; width: 100%; position: static; display: flex; overflow-x: auto; gap: .3rem; padding: .5rem; } .group-rail-header { display: none; } .group-item { flex: 0 0 auto; white-space: nowrap; } } /* ═══════════════════════════════════════════════════════════════ MEASUREMENTS — data-analysis chart panel (2026-08-21): selected/ filtered rows plotted as trend, histogram, or an I-MR control chart (Chart.js via wwwroot/js/charts.js), mirroring the desktop Analysis module's simple/SPC chart split for a single characteristic. ═══════════════════════════════════════════════════════════════ */ .chart-panel { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.3rem 1.5rem; margin-top: 1.5rem; } .chart-panel-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; } .chart-source-note { color: var(--text-secondary); font-size: .85rem; } .chart-canvas-wrap { position: relative; height: 320px; margin-top: .5rem; } .chart-canvas-wrap-sm { height: 200px; } @media (max-width: 768px) { .chart-canvas-wrap { height: 260px; } .chart-canvas-wrap-sm { height: 170px; } } /* Grafice „separat pe operator" (MSA) — mai multe mini-grafice unul lângă altul. */ .msa-op-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .msa-op-chart-grid .chart-canvas-wrap { height: 220px; } /* Dashboard — Top NOK + Alerte SPC unul lângă altul (Faza 4 remediere audit). */ .dashboard-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } @media (max-width: 768px) { .dashboard-two-col { grid-template-columns: 1fr; } } /* Report-builder checkbox rows (Măsurători, and reusable by future Capability/MSA report builders) — sits inside .filter-grid alongside regular .field inputs. */ .field-checkbox { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--text); } .field-checkbox input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; } textarea { width: 100%; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit; color: var(--text); background: var(--card); resize: vertical; } textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* ── Drawing viewer (2026-09-02) — see CLAUDE.md "PLAN — Vizualizare desene tehnice pe web" ── */ .drawing-viewer { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; } .drawing-viewer-toolbar { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border-bottom: 1px solid var(--border-subtle); background: var(--row-alt); font-size: .85rem; flex-wrap: wrap; } .drawing-viewer-title { font-weight: 600; color: var(--text); margin-right: .5rem; } .drawing-viewer-spacer { flex: 1 1 auto; } .drawing-viewer-canvas { position: relative; height: 420px; overflow: hidden; background: #2b2f36; cursor: grab; display: flex; align-items: center; justify-content: center; } .drawing-viewer-canvas:active { cursor: grabbing; } .drawing-viewer-stage { position: relative; max-width: 100%; max-height: 100%; transform-origin: center center; transition: transform .05s linear; } .drawing-viewer-stage img { display: block; max-width: 100%; max-height: 420px; user-select: none; pointer-events: none; } .drawing-viewer-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .drawing-viewer-overlay text { font-family: inherit; user-select: none; } .link-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary-hover); } .table-scroll { overflow-x: auto; border-radius: var(--radius-md); } /* Rând evidențiat în tabelul "Caracteristici setate pe acest desen" (ProductDetail.razor) — tabelul folosește .grid, nu .value-table, așa că regula .value-table tbody tr.next-row de mai sus nu se aplică aici; adăugăm același stil vizual, scopat la .table-scroll. */ .table-scroll tbody tr.next-row td { border-top: 2px solid var(--status-warning); border-bottom: 2px solid var(--status-warning); } .table-scroll tbody tr.next-row td:first-child { border-left: 2px solid var(--status-warning); border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } .table-scroll tbody tr.next-row td:last-child { border-right: 2px solid var(--status-warning); border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } /* ═══════════════════════════════════════════════════════════════ CLAIMS / 8D — WORKSPACE REDESIGN (2026-09-04) Design-system aliases only — no new palette. --ca-* names below map 1:1 onto the existing tokens defined at the top of this file, so this redesign speaks the vocabulary requested for Claims without forking a second color system: change --primary/--bg/... once, both names move together. New component classes here are intentionally generic (.page-header, .section-card, .stepper, .empty-state, .action-menu, .pill-row, .attachment-list, .action-card...) so any future module redesign can reuse them instead of inventing page-specific CSS again. ═══════════════════════════════════════════════════════════════ */ :root { --ca-primary: var(--primary); --ca-primary-hover: var(--primary-hover); --ca-bg: var(--bg); --ca-surface: var(--card); --ca-border: var(--border-subtle); --ca-text: var(--text); --ca-text-muted: var(--text-secondary); --ca-success: var(--status-success); --ca-warning: var(--status-warning); --ca-danger: var(--status-error); } /* ── Page header (list pages) ───────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .page-header h1 { margin-bottom: .2rem; } .page-header-titles .subtitle { margin: 0; } .page-header-actions { display: flex; gap: .6rem; flex-wrap: wrap; } /* ── Summary badges (counts row under filters) ──────────────────── */ .summary-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; } .summary-badge { display: inline-flex; align-items: baseline; gap: .35rem; background: var(--ca-surface); border: 1px solid var(--ca-border); border-radius: 999px; padding: .3rem .85rem; font-size: .82rem; color: var(--ca-text-muted); box-shadow: var(--shadow-sm); } .summary-badge strong { color: var(--ca-text); font-size: .95rem; } .summary-badge.badge-open strong { color: var(--status-warning-text); } .summary-badge.badge-containment strong { color: var(--status-info-text); } .summary-badge.badge-closed strong { color: var(--status-success-text); } .summary-badge.badge-overdue strong { color: var(--ca-danger); } /* ── Overdue emphasis (list + header) ────────────────────────────── */ .due-overdue { color: var(--ca-danger); font-weight: 600; } /* ── Stacked cards — mobile replacement for table.grid ──────────── */ .stacked-list { display: none; flex-direction: column; gap: .75rem; } .stacked-card { background: var(--ca-surface); border: 1px solid var(--ca-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem; cursor: pointer; } .stacked-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .stacked-card-case { font-weight: 700; color: var(--ca-text); font-size: .92rem; } .stacked-card-title { color: var(--ca-text-muted); font-size: .85rem; } .stacked-card-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .78rem; color: var(--ca-text-muted); } .stacked-card-meta b { color: var(--ca-text); font-weight: 600; } @media (max-width: 720px) { .claims-table-wrap, .list-table-wrap { display: none; } .stacked-list { display: flex; } } /* Generic status-kind modifiers for .summary-badge (defined above for Claims' badge-open/containment/closed/overdue, which are Claims-specific names) — any future list-page summary row can use these instead of inventing new ones. */ .summary-badge.badge-ok strong { color: var(--status-success-text); } .summary-badge.badge-warn strong { color: var(--status-warning-text); } .summary-badge.badge-info strong { color: var(--status-info-text); } .summary-badge.badge-none strong { color: var(--ca-text-muted); } /* Generic "hide on tablet" column utility — for wide tables that need to shed a column or two between the mobile stacked-card breakpoint (720px) and desktop. */ @media (max-width: 1100px) { .col-hide-tablet { display: none; } } /* ── Entity header (detail page) ─────────────────────────────────── */ .breadcrumb { font-size: .85rem; color: var(--ca-text-muted); margin-bottom: .6rem; } .breadcrumb a { color: var(--ca-text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--ca-primary); } .entity-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; } .entity-header-titles h1 { margin-bottom: .15rem; } .entity-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .pill-row { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-bottom: 1.5rem; } .pill-item { display: flex; flex-direction: column; gap: .15rem; min-width: 90px; } .pill-item label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ca-text-muted); } .pill-item .pill-value { font-size: .92rem; font-weight: 600; color: var(--ca-text); } @media (max-width: 560px) { .pill-row { gap: .6rem 1rem; } .pill-item { min-width: 44%; } } /* ── Overflow action menu (⋯) ────────────────────────────────────── */ .action-menu { position: relative; display: inline-block; } .action-menu-toggle { background: none; border: 1px solid var(--border); color: var(--ca-text-muted); border-radius: var(--radius-sm); width: 34px; height: 34px; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background var(--transition), border-color var(--transition); } .action-menu-toggle:hover { background: var(--hover-bg); border-color: var(--ca-primary); } .action-menu-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; border: none; padding: 0; cursor: default; } .action-menu-list { position: absolute; right: 0; top: calc(100% + .3rem); min-width: 180px; background: var(--ca-surface); border: 1px solid var(--ca-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .35rem; z-index: 95; display: flex; flex-direction: column; gap: .1rem; } .action-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: .5rem .65rem; border-radius: var(--radius-sm); font-size: .87rem; color: var(--ca-text); cursor: pointer; } .action-menu-item:hover { background: var(--hover-bg); } .action-menu-item.danger { color: var(--ca-danger); } /* ── 8D workflow stepper ──────────────────────────────────────────── */ .workflow-stepper { display: flex; align-items: center; gap: 0; background: var(--ca-surface); border: 1px solid var(--ca-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .85rem .5rem; margin-bottom: 1.25rem; overflow-x: auto; } .workflow-step { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: fit-content; background: none; border: none; padding: .4rem .75rem; cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition); } .workflow-step:hover { background: var(--hover-bg); } .workflow-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; font-size: .7rem; font-weight: 700; border: 2px solid var(--border); color: var(--ca-text-muted); background: var(--ca-surface); } .workflow-step-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; } .workflow-step-label .step-code { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ca-text-muted); } .workflow-step-label .step-name { font-size: .82rem; color: var(--ca-text-muted); } .workflow-step-connector { flex: 0 0 20px; height: 2px; background: var(--border-subtle); margin: 0 -2px; } .workflow-step.done .workflow-step-dot { background: var(--ca-success); border-color: var(--ca-success); color: #fff; } .workflow-step.done .workflow-step-connector { background: var(--ca-success); } .workflow-step.current .workflow-step-dot { background: var(--ca-primary); border-color: var(--ca-primary); color: #fff; } .workflow-step.current .workflow-step-label .step-name { color: var(--ca-text); font-weight: 700; } .workflow-step.selected { background: var(--primary-light); } .workflow-step.overdue .workflow-step-dot { background: var(--ca-danger); border-color: var(--ca-danger); color: #fff; } .workflow-stepper-select { display: none; } @media (max-width: 860px) { .workflow-step-connector { flex-basis: 10px; } .workflow-step-label .step-name { display: none; } } /* ── Section card (generic content card with header/subtitle/action) ─ */ .section-card { background: var(--ca-surface); border: 1px solid var(--ca-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.3rem 1.5rem; margin-bottom: 1.25rem; } .section-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .section-card-header h2 { margin: 0 0 .15rem; font-size: 1.05rem; } .section-card-subtitle { color: var(--ca-text-muted); font-size: .85rem; } .section-card.compact { padding: 1rem 1.1rem; } /* ── Claim workspace layout: main + right context sidebar ─────────── */ .claim-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; } .claim-context-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 4.5rem; } @media (max-width: 1100px) { .claim-workspace-grid { grid-template-columns: 1fr; } .claim-context-sidebar { position: static; } } /* ── Read-only info display (Claim info card default mode) ─────────── */ .info-display-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 1.4rem; } .info-display-item label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ca-text-muted); margin-bottom: .2rem; } .info-display-item .value { color: var(--ca-text); font-size: .92rem; } .info-display-item .value.empty { color: var(--ca-text-muted); } .info-display-item.full-row { grid-column: 1 / -1; } /* ── Empty state ─────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 2rem 1rem; color: var(--ca-text-muted); } .empty-state-icon { font-size: 1.8rem; margin-bottom: .5rem; opacity: .7; } .empty-state p { margin: 0 0 .85rem; font-size: .9rem; } /* ── Action cards (D3/D5/D6/D7 replacing wide tables) ───────────────── */ .action-card-list { display: flex; flex-direction: column; gap: .75rem; } .action-card { background: var(--card); border: 1px solid var(--ca-border); border-radius: var(--radius-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); } .action-card.editing { border-color: var(--ca-primary); box-shadow: 0 0 0 3px var(--primary-light); } .action-card-title { font-weight: 600; color: var(--ca-text); font-size: .95rem; margin-bottom: .2rem; } .action-card-desc { color: var(--ca-text-muted); font-size: .85rem; margin-bottom: .1rem; } .action-card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem 1.2rem; margin: .75rem 0; } .action-card-fields .field-item label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ca-text-muted); margin-bottom: .15rem; } .action-card-fields .field-item .value { font-size: .87rem; color: var(--ca-text); } .action-card-doc { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin-top: .4rem; flex-wrap: wrap; } .action-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; } .action-card-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: .75rem; } /* ── Ishikawa / Root cause workspace (D4) ───────────────────────────── */ .ishikawa-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .ishikawa-col { background: var(--row-alt); border: 1px solid var(--ca-border); border-radius: var(--radius-sm); padding: .75rem .85rem; } .ishikawa-col h4 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ca-text-muted); } .ishikawa-col ul { margin: 0; padding-left: 1.1rem; font-size: .85rem; color: var(--ca-text); } .ishikawa-col li { margin-bottom: .3rem; } .ishikawa-col-empty { font-size: .8rem; color: var(--ca-text-muted); font-style: italic; } /* ── Attachments list (sidebar card) ────────────────────────────────── */ .attachment-list { display: flex; flex-direction: column; gap: .5rem; } .attachment-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .1rem; border-bottom: 1px solid var(--ca-border); } .attachment-row:last-child { border-bottom: none; } .attachment-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--hover-bg); color: var(--ca-text-muted); display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; } .attachment-info { flex: 1 1 auto; min-width: 0; } .attachment-name { font-size: .85rem; color: var(--ca-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment-meta { font-size: .74rem; color: var(--ca-text-muted); } .attachment-actions { display: flex; gap: .25rem; flex: 0 0 auto; } .attachment-actions .link-btn { padding: .2rem .45rem; font-size: .75rem; } .upload-drawer { margin-top: .75rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .85rem; background: var(--row-alt); } /* ── Activity timeline (sidebar card) ───────────────────────────────── */ .activity-timeline { display: flex; flex-direction: column; gap: .85rem; } .activity-entry { display: flex; flex-direction: column; gap: .1rem; padding-left: .8rem; border-left: 2px solid var(--ca-border); } .activity-entry-text { font-size: .85rem; color: var(--ca-text); } .activity-entry-time { font-size: .74rem; color: var(--ca-text-muted); } /* ── Case summary card (sidebar) ────────────────────────────────────── */ .case-summary-item { margin-bottom: .9rem; } .case-summary-item:last-child { margin-bottom: 0; } .case-summary-item label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ca-text-muted); margin-bottom: .2rem; } .case-summary-item .value { font-size: .87rem; color: var(--ca-text); white-space: pre-wrap; } .case-summary-item .value.empty { color: var(--ca-text-muted); font-style: italic; } /* ═══════════════════════════════════════════════════════════════ MASTER DATA — WORKSPACE REDESIGN (2026-09-04) Same approach as the Claims/8D section above: no new palette, no forked component vocabulary. --caq-* below are pure aliases onto the --ca-* tokens already defined above (which are themselves aliases onto --primary/--bg/--card/...) — the naming the task asked for now exists, without a second alias hop or a third parallel color system. New classes here (.entity-header, .info-field, .metric-card, .entity-tabs, .related-item-row, .form-section...) are generic on purpose: Product, Customer, Device and Equipment detail pages all share them instead of four page-specific stylesheets. Reused as-is from the Claims section above (not redefined here): .status-pill, .empty-state, .action-menu*, .section-card*, .breadcrumb, .clickable-row, .table-scroll, .next-row. */ :root { --caq-primary: var(--ca-primary); --caq-primary-soft: var(--primary-light); --caq-bg: var(--ca-bg); --caq-surface: var(--ca-surface); --caq-border: var(--ca-border); --caq-text: var(--ca-text); --caq-text-muted: var(--ca-text-muted); --caq-success: var(--ca-success); --caq-warning: var(--ca-warning); --caq-danger: var(--ca-danger); } /* One more discreet status-pill "kind" (neutral blue) alongside the existing .status-ok/.status-nok/.status-warn/.status-none (defined above for measurement-value tables) — Master Data's own statuses (Free/Blocked/Out of Use, Valid/Expiring/Expired, Passed/Failed/ Pending/N/A) reuse those four kinds; .status-info covers the rare purely-informational case. */ .status-pill.status-info { background: var(--status-info-bg); color: var(--status-info-text); } /* ── Page width fix ─────────────────────────────────────────────── Several Master Data pages rendered inside a ~300-480px column on a wide monitor because nothing wider than the old narrow .status-form ever set a max-width. This wraps a redesigned detail page's content at a sane reading width without stretching individual inputs. */ .master-data-page { width: 100%; max-width: 1600px; margin: 0 auto; } /* ── Entity header (detail page) — reuses .entity-header/.entity-header-titles h1/.entity-header-actions already defined above (Claims' ClaimHeader); only the two rules below are genuinely new (a muted metadata line + a status-badge row, which ClaimHeader doesn't need since it has its own .pill-row for that). */ .entity-header-subtitle { color: var(--caq-text-muted); font-size: .88rem; } .entity-header-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } /* Some pages must always render the fragment (Razor requires named child-content tags to be unconditional top-level children of the component — the "show badges" condition has to live INSIDE the fragment, not around the tag itself), so an empty result (e.g. a brand-new record with no status yet) can leave the wrapper with no children. Collapse it in that case instead of showing a blank gap. */ .entity-header-badges:empty { display: none; margin-top: 0; } /* ── Entity tabs (Overview/Drawings/Characteristics/.../History) ──── */ .entity-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--caq-border); margin-bottom: 1.25rem; overflow-x: auto; } .entity-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .6rem .9rem; font-size: .88rem; font-weight: 600; color: var(--caq-text-muted); white-space: nowrap; cursor: pointer; transition: color var(--transition), border-color var(--transition); } .entity-tab:hover { color: var(--caq-text); } .entity-tab.active { color: var(--caq-primary); border-bottom-color: var(--caq-primary); } /* ── Master Data content grid (2-col desktop, 1-col below 1100px) ─── */ .master-data-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .master-data-grid .span-2 { grid-column: 1 / -1; } @media (max-width: 1100px) { .master-data-grid { grid-template-columns: 1fr; } } /* ── Info field (read-only label/value, or an edit-mode field slot) ─ */ .info-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 1.4rem; } .info-field.full-row, .info-field-grid .field.full-row { grid-column: 1 / -1; } .info-field label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--caq-text-muted); margin-bottom: .25rem; } .info-field .value { color: var(--caq-text); font-size: .92rem; } .info-field .value.empty { color: var(--caq-text-muted); } /* ── Metric cards (counts row: Drawings / Characteristics / Plans / ...) ── */ .metric-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .85rem; margin-bottom: 1.25rem; } .metric-card { background: var(--caq-surface); border: 1px solid var(--caq-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; text-decoration: none; } .metric-card.clickable { cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); } .metric-card.clickable:hover { border-color: var(--caq-primary); box-shadow: var(--shadow-md); } .metric-card-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--caq-text-muted); } .metric-card-value { font-size: 1.5rem; font-weight: 700; color: var(--caq-text); line-height: 1.15; } .metric-card-sub { font-size: .78rem; color: var(--caq-text-muted); } /* ── Related items list (Recent Products/Recent Claims/Products of a Customer) ── */ .related-items-list { display: flex; flex-direction: column; gap: .1rem; } .related-item-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .75rem; padding: .6rem .1rem; border-bottom: 1px solid var(--caq-border); text-decoration: none; color: inherit; } .related-item-row:last-child { border-bottom: none; } a.related-item-row:hover { background: var(--hover-bg); } .related-item-title { font-size: .88rem; color: var(--caq-text); font-weight: 600; } .related-item-meta { font-size: .78rem; color: var(--caq-text-muted); } /* ── Sectioned edit form (Device/Equipment "Editează detalii") ────── Explicit alternative to a 30-input single column: each logical group gets its own header + a 2-column grid on desktop, collapsing to one column under 720px. */ .form-section { margin-bottom: 1.5rem; } .form-section:last-of-type { margin-bottom: 0; } .form-section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--caq-text-muted); margin: 0 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--caq-border); } .form-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.25rem; } .form-section-grid .field.full-row { grid-column: 1 / -1; } @media (max-width: 720px) { .form-section-grid { grid-template-columns: 1fr; } } /* ── Drawings page (2026-09-04 refinement) — compact chip-style selectors ── */ .drawing-picker-toolbar { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; } .drawing-picker-row { display: flex; flex-wrap: wrap; gap: .4rem; } .drawing-picker-chip { background: var(--caq-surface); border: 1px solid var(--caq-border); border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; color: var(--caq-text); cursor: pointer; transition: border-color var(--transition), background var(--transition); } .drawing-picker-chip:hover { border-color: var(--caq-primary); } .drawing-picker-chip.active { background: var(--primary-light); border-color: var(--caq-primary); color: var(--caq-primary); font-weight: 600; } /* ── Optional sticky table header (opt-in via .table-scroll.sticky-head) ── */ .table-scroll.sticky-head { max-height: 480px; overflow-y: auto; } .table-scroll.sticky-head table thead th { position: sticky; top: 0; background: var(--row-alt); z-index: 1; } /* ═══════════════════════════════════════════════════════════════ MEASUREMENT PLANS — WORKSPACE REDESIGN (2026-09-04) Same design system as Claims/Master Data above — no new tokens, no forked component vocabulary. Reuses .page-header/.summary-badge/.stacked-*/ .entity-header/.entity-tabs/.section-card/.info-field*/.metric-card*/ .action-menu*/.form-section*/.master-data-page/.master-data-grid/.span-2 as-is. The only genuinely new things a Measurement Plan workspace needed: a generic modal (for "Duplicate characteristic → target plan"), a two-column "content + sticky sidebar" workspace grid (generalizing .claim-workspace-grid for reuse outside Claims), a small tolerance visual strip, and a checkbox list layout for the Western Electric / AIAG rule groups. */ /* ── Generic modal (Shared/Modal.razor) ─────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 26, .45); z-index: 200; } .modal-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--caq-surface); border: 1px solid var(--caq-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 201; display: flex; flex-direction: column; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--caq-border); } .modal-header h3 { margin: 0; font-size: 1rem; } .modal-close-btn { background: none; border: none; font-size: 1rem; line-height: 1; color: var(--caq-text-muted); cursor: pointer; padding: .25rem; } .modal-close-btn:hover { color: var(--caq-text); } .modal-body { padding: 1.1rem 1.25rem; } .modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--caq-border); } /* ── Workspace grid: content + sticky context sidebar (generalizes .claim-workspace-grid/.claim-context-sidebar for reuse beyond Claims) ── */ .workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; } .workspace-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 4.5rem; } @media (max-width: 1100px) { .workspace-grid { grid-template-columns: 1fr; } .workspace-sidebar { position: static; } } /* ── Tolerance visual strip (Characteristic Detail → Tolerance card) ─────── Presentation only — purely derived from Nominal/TolMin/TolMax, no new logic. */ .tolerance-strip { display: flex; align-items: stretch; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--caq-border); margin-top: .5rem; } .tolerance-strip-segment { flex: 1 1 0; padding: .5rem .6rem; text-align: center; font-size: .78rem; } .tolerance-strip-segment + .tolerance-strip-segment { border-left: 1px solid var(--caq-border); } .tolerance-strip-segment .strip-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--caq-text-muted); margin-bottom: .15rem; } .tolerance-strip-segment .strip-value { font-weight: 700; color: var(--caq-text); } .tolerance-strip-segment.lower { background: var(--row-alt); } .tolerance-strip-segment.nominal { background: var(--primary-light); } .tolerance-strip-segment.upper { background: var(--row-alt); } /* ── Rule groups (Western Electric / AIAG — grouped checkboxes) ────────── */ .rule-group { margin-bottom: 1rem; } .rule-group:last-child { margin-bottom: 0; } .rule-group-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--caq-text-muted); margin-bottom: .45rem; } .rule-checkbox-list { display: flex; flex-direction: column; gap: .4rem; } .rule-checkbox-list label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--caq-text); }