/* ====================================================================== Verif Elec — feuille de style Direction graphique : "instrument de mesure / atelier d'ingénierie". Deux thèmes complets (light + dark) pilotés par [data-theme] sur . ====================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap"); /* ----------------------------- Tokens ------------------------------- */ :root { color-scheme: light; /* Surfaces */ --surface-0: #ecebe5; --surface-1: #f7f5ef; --surface-2: #ffffff; --surface-3: #fbfaf6; --surface-inverse: #0e1620; /* Encres */ --ink-1: #11161c; --ink-2: #4a5663; --ink-3: #7a8693; --ink-on-inverse: #f4f7fa; --ink-on-accent: #ffffff; /* Lignes */ --line-1: #d8d2c2; --line-2: #b9b09a; --line-strong: #6f7785; /* Accent (bleu acier) */ --accent-1: #1d4f7c; --accent-2: #25649b; --accent-strong: #0f3a5e; --accent-bg: #e6eef6; /* Statuts */ --status-ok: #1f6a3e; --status-ok-bg: #e0eedc; --status-warn: #8c5400; --status-warn-bg: #fff0c8; --status-bad: #b22834; --status-bad-bg: #fbdcdc; /* Schéma technique (encre, papier, grille) */ --schematic-ink: #14181c; --schematic-paper: #fbf8ee; --schematic-grid: rgba(20, 24, 28, 0.07); --schematic-accent: #1d4f7c; /* Effets */ --ring: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent-1); --shadow-1: 0 1px 0 rgba(15, 23, 32, 0.04), 0 1px 2px rgba(15, 23, 32, 0.06); --shadow-2: 0 6px 16px -4px rgba(15, 23, 32, 0.1), 0 2px 4px rgba(15, 23, 32, 0.06); --shadow-3: 0 24px 48px -12px rgba(15, 23, 32, 0.16); /* Géométrie */ --radius-1: 4px; --radius-2: 6px; --radius-3: 8px; --radius-4: 12px; --radius-pill: 999px; /* Typographie */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fz-11: 0.6875rem; --fz-12: 0.75rem; --fz-13: 0.8125rem; --fz-14: 0.875rem; --fz-16: 1rem; --fz-18: 1.125rem; --fz-20: 1.25rem; --fz-24: 1.5rem; --fz-32: 2rem; --fz-40: 2.5rem; /* Espace */ --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px; font-family: var(--font-sans); font-size: 16px; font-feature-settings: "ss01", "cv11"; } [data-theme="dark"] { color-scheme: dark; --surface-0: #0a1018; --surface-1: #121a23; --surface-2: #1a2530; --surface-3: #243140; --surface-inverse: #f4f7fa; --ink-1: #eaf1f7; --ink-2: #a9b6c4; --ink-3: #768796; --ink-on-inverse: #11161c; --ink-on-accent: #0a1018; --line-1: #2a3744; --line-2: #3b4a5a; --line-strong: #647585; --accent-1: #4ea3e0; --accent-2: #6db9ee; --accent-strong: #95ccf2; --accent-bg: rgba(78, 163, 224, 0.15); --status-ok: #5fcc8a; --status-ok-bg: rgba(95, 204, 138, 0.18); --status-warn: #ffb547; --status-warn-bg: rgba(255, 181, 71, 0.18); --status-bad: #ff7479; --status-bad-bg: rgba(255, 116, 121, 0.18); --schematic-ink: #d2dbe4; --schematic-paper: #16202b; --schematic-grid: rgba(210, 219, 228, 0.08); --schematic-accent: #4ea3e0; --ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent-1); --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3); --shadow-2: 0 6px 16px -4px rgba(0, 0, 0, 0.5); --shadow-3: 0 24px 48px -12px rgba(0, 0, 0, 0.65); } /* ----------------------------- Reset -------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--surface-0); color: var(--ink-1); font-family: var(--font-sans); font-size: var(--fz-14); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--accent-1); text-decoration-thickness: 1px; text-underline-offset: 2px; } ::selection { background: var(--accent-1); color: var(--ink-on-accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ----------------------------- Typo --------------------------------- */ h1, h2, h3 { margin: 0; letter-spacing: -0.01em; color: var(--ink-1); font-weight: 700; } h1 { font-size: clamp(1.5rem, 1.6vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; } h2 { font-size: var(--fz-18); line-height: 1.2; } h3 { font-size: var(--fz-16); line-height: 1.25; } p { margin: 0; } .eyebrow { margin: 0 0 var(--gap-1); color: var(--ink-3); font-size: var(--fz-11); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hint, .body-copy { margin: 0 0 var(--gap-4); color: var(--ink-2); font-size: var(--fz-14); line-height: 1.6; } .body-copy + .body-copy, .body-copy + ul { margin-top: var(--gap-3); } /* Numérique calculé : police mono + lining figures */ .metric strong, .result-hero strong, .selected-strip strong, .schema-kpis strong, .matrix-row span:not(:first-child), .calc-matrix .matrix-head span, .check-row strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; } /* ----------------------------- App shell ---------------------------- */ .app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; } .nav-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--gap-3); padding: 16px 12px; background: var(--surface-inverse); color: var(--ink-on-inverse); border-right: 1px solid color-mix(in srgb, var(--surface-inverse) 80%, transparent); z-index: 4; } [data-theme="dark"] .nav-rail { background: #06090d; border-right-color: #000; } .brand-mark { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); text-decoration: none; color: inherit; } .brand-mark::before { content: ""; display: block; width: 36px; height: 36px; background: radial-gradient(circle at 30% 30%, var(--accent-1), transparent 60%), linear-gradient(135deg, #1d4f7c, #0f3a5e); border-radius: var(--radius-2); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .brand-mark strong { font-size: var(--fz-16); line-height: 1; letter-spacing: -0.01em; color: #f4f7fa; } .brand-mark span { font-family: var(--font-mono); font-size: var(--fz-11); font-weight: 600; letter-spacing: 0.18em; color: #6db9ee; text-transform: uppercase; } .nav-rail nav { display: grid; gap: 2px; } .nav-rail button { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: var(--gap-3); min-height: 42px; padding: 8px 10px; border: 0; border-radius: var(--radius-2); background: transparent; color: rgba(244, 247, 250, 0.7); font-size: var(--fz-13); font-weight: 600; text-align: left; transition: background 140ms ease, color 140ms ease; } .nav-rail button span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-2); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgba(244, 247, 250, 0.85); font-family: var(--font-mono); font-size: var(--fz-12); font-weight: 700; } .nav-rail button em { font-style: normal; font-size: var(--fz-13); line-height: 1.2; } .nav-rail button:hover { background: rgba(255, 255, 255, 0.06); color: #f4f7fa; } .nav-rail button.active { background: var(--accent-1); color: #ffffff; } .nav-rail button.active span { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.28); color: #ffffff; } .nav-rail button:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--surface-inverse), 0 0 0 4px var(--accent-strong); } .nav-footer { margin-top: auto; display: grid; gap: 6px; padding-top: var(--gap-3); border-top: 1px solid rgba(255, 255, 255, 0.08); } .theme-toggle { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--gap-3); min-height: 38px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-2); background: rgba(255, 255, 255, 0.04); color: rgba(244, 247, 250, 0.85); font-size: var(--fz-12); font-weight: 600; text-align: left; } .theme-toggle::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fdf6c4, #f6c462 60%, #b87a16); box-shadow: 0 0 12px rgba(246, 196, 98, 0.5); } [data-theme="dark"] .theme-toggle::before { background: radial-gradient(circle at 70% 30%, #cfdcea, #4a637e 70%, #1a2735); box-shadow: 0 0 12px rgba(78, 163, 224, 0.5); } .theme-toggle small { font-family: var(--font-mono); font-size: var(--fz-11); color: rgba(244, 247, 250, 0.55); letter-spacing: 0.04em; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); } main { min-width: 0; padding: var(--gap-4); } /* ----------------------------- Topbar ------------------------------- */ .topbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap-4); margin: calc(-1 * var(--gap-4)) calc(-1 * var(--gap-4)) var(--gap-4); padding: 14px 18px; background: color-mix(in srgb, var(--surface-1) 85%, transparent); border-bottom: 1px solid var(--line-1); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } .topbar-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-2); font-size: var(--fz-13); color: var(--ink-2); } .topbar-status span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-1); border-radius: var(--radius-pill); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fz-12); font-weight: 600; color: var(--ink-2); } .topbar-status span.text-bad, .topbar-status span.text-warn, .topbar-status span.text-ok { border-color: currentColor; background: transparent; } /* ----------------------------- Panels ------------------------------- */ .panel { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--radius-3); box-shadow: var(--shadow-1); } .calc-form, .result-panel, .site-form, .report-table, .reference-layout .panel { padding: 22px; } .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-4); margin-bottom: var(--gap-4); } .workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr); gap: var(--gap-4); align-items: start; } /* ----------------------------- Forms -------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: var(--gap-3); } .field { display: grid; gap: 6px; } .field > span { font-size: var(--fz-12); font-weight: 700; letter-spacing: 0.02em; color: var(--ink-2); } .field-wide { grid-column: 1 / -1; } input, select, textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); color: var(--ink-1); font-family: var(--font-mono); font-size: var(--fz-13); font-variant-numeric: tabular-nums; outline: 0; transition: border-color 120ms ease, box-shadow 120ms ease; } input[type="text"], input[type="date"], textarea, select { font-family: var(--font-sans); } textarea { min-height: 64px; resize: vertical; line-height: 1.5; } input:hover, select:hover, textarea:hover { border-color: var(--line-2); } input:focus, select:focus, textarea:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-bg); } select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; } button:focus-visible, summary:focus-visible, [data-circuit-id]:focus-visible { outline: 0; box-shadow: var(--ring); } /* ----------------------------- Buttons ------------------------------ */ .actions { display: flex; flex-wrap: wrap; gap: var(--gap-2); } .actions button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 14px; border: 1px solid var(--accent-1); border-radius: var(--radius-2); background: var(--accent-1); color: var(--ink-on-accent); font-size: var(--fz-13); font-weight: 600; letter-spacing: 0.01em; transition: background 120ms ease, border-color 120ms ease, transform 80ms ease; } .actions button:hover, .btn:hover { background: var(--accent-2); border-color: var(--accent-2); } .actions button:active, .btn:active { transform: translateY(1px); } .actions button + button, .btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink-1); } .actions button + button:hover, .btn-ghost:hover { background: var(--accent-bg); border-color: var(--accent-1); color: var(--accent-strong); } [data-theme="dark"] .actions button + button:hover, [data-theme="dark"] .btn-ghost:hover { color: var(--accent-2); } /* ----------------------------- Status ------------------------------- */ .status-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fz-12); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-badge.ok, .status-dot.ok { background: var(--status-ok-bg); color: var(--status-ok); } .status-badge.warn, .status-dot.warn { background: var(--status-warn-bg); color: var(--status-warn); } .status-badge.bad, .status-dot.bad { background: var(--status-bad-bg); color: var(--status-bad); } .status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: middle; } .text-ok { color: var(--status-ok) !important; } .text-warn { color: var(--status-warn) !important; } .text-bad { color: var(--status-bad) !important; } /* ----------------------------- Result panel ------------------------- */ .result-panel { display: grid; gap: var(--gap-4); } .result-hero { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line-1); border-left: 3px solid var(--accent-1); border-radius: var(--radius-3); background: linear-gradient(180deg, var(--accent-bg), transparent); } .result-hero span, .metric span, .trace span { color: var(--ink-3); font-size: var(--fz-11); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .result-hero strong { font-size: var(--fz-32); line-height: 1.05; color: var(--ink-1); letter-spacing: -0.02em; } .result-hero em { margin-top: 4px; color: var(--ink-2); font-size: var(--fz-13); font-style: normal; line-height: 1.5; } .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .metric { display: grid; align-content: space-between; gap: 6px; min-height: 78px; padding: 12px 14px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); } .metric strong { font-size: var(--fz-18); font-weight: 600; color: var(--ink-1); } .trace { padding: 12px 14px; border-radius: var(--radius-2); border-left: 3px solid var(--accent-strong); background: var(--accent-bg); color: var(--ink-1); } .trace p { margin: 4px 0 0; font-family: var(--font-mono); font-size: var(--fz-12); line-height: 1.55; color: var(--ink-2); } /* ----------------------------- Schema mode -------------------------- */ .schema-mode { grid-template-columns: 260px minmax(0, 1fr); } .schema-mode main { padding: 0; background: var(--surface-0); } .schema-pro { min-height: 100vh; display: grid; grid-template-rows: 56px auto auto minmax(0, 1fr); background: var(--surface-1); color: var(--ink-1); } .pro-titlebar { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; min-height: 56px; padding: 0 var(--gap-4); background: linear-gradient(90deg, var(--surface-inverse), color-mix(in srgb, var(--surface-inverse) 75%, var(--accent-1) 25%)); color: var(--ink-on-inverse); border-bottom: 1px solid color-mix(in srgb, var(--surface-inverse) 70%, #000); } .pro-brand { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: var(--gap-2); } .pro-brand strong { font-size: var(--fz-18); font-weight: 700; letter-spacing: -0.01em; } .pro-brand strong span { color: var(--accent-2); margin-left: 4px; } .pro-brand em { font-style: normal; font-size: var(--fz-12); font-weight: 600; color: rgba(244, 247, 250, 0.7); } .pro-project { display: flex; align-items: center; gap: var(--gap-3); min-width: 0; font-size: var(--fz-13); } .pro-project span { color: rgba(244, 247, 250, 0.55); font-family: var(--font-mono); font-size: var(--fz-11); letter-spacing: 0.1em; text-transform: uppercase; } .pro-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .pro-user { justify-self: end; padding-left: var(--gap-3); border-left: 1px solid rgba(255, 255, 255, 0.14); color: rgba(244, 247, 250, 0.75); font-size: var(--fz-12); font-weight: 600; } .pro-commandbar { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--surface-2); border-bottom: 1px solid var(--line-1); } .pro-commandbar button { display: grid; grid-template-rows: auto auto; align-items: center; gap: 2px; min-width: 76px; min-height: 56px; padding: 8px 12px; border: 0; border-right: 1px solid var(--line-1); background: transparent; color: var(--ink-2); font-size: var(--fz-11); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .pro-commandbar button span { font-family: var(--font-mono); font-size: var(--fz-18); font-weight: 700; color: var(--ink-1); line-height: 1; } .pro-commandbar button:hover { background: var(--accent-bg); color: var(--accent-strong); } [data-theme="dark"] .pro-commandbar button:hover { color: var(--accent-2); } .pro-commandbar i { flex: 1 1 auto; } .pro-tabs { display: flex; align-items: center; gap: 2px; padding: 0 var(--gap-3); background: var(--surface-1); border-bottom: 1px solid var(--line-1); } .pro-tabs button { align-self: stretch; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font-size: var(--fz-13); font-weight: 600; } .pro-tabs button:hover { color: var(--ink-1); } .pro-tabs button.active { color: var(--accent-strong); border-bottom-color: var(--accent-1); background: var(--surface-2); } [data-theme="dark"] .pro-tabs button.active { color: var(--accent-2); } .pro-tabs span { margin-left: auto; align-self: center; color: var(--ink-3); font-size: var(--fz-11); font-weight: 600; letter-spacing: 0.06em; } .pro-workspace { min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr) 360px; grid-template-rows: minmax(420px, 1fr) 240px; grid-template-areas: "tree canvas properties" "tree results properties"; background: var(--surface-1); } .pro-tree { grid-area: tree; overflow: auto; padding: 12px 10px; background: var(--surface-1); border-right: 1px solid var(--line-1); } .tree-group { margin-top: var(--gap-4); padding-top: var(--gap-3); border-top: 1px solid var(--line-1); display: grid; gap: 4px; } .tree-group strong { color: var(--ink-1); font-size: var(--fz-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tree-group span { padding-left: 18px; color: var(--ink-3); font-size: var(--fz-12); } .pro-canvas { grid-area: canvas; min-width: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr); background: var(--surface-2); border-right: 1px solid var(--line-1); } .pro-canvas .diagram-toolbar { margin: 0; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line-1); background: var(--surface-1); min-width: 0; } .pro-canvas .schematic-paper { min-height: 0; height: 100%; padding: 0; overflow: hidden; background: var(--schematic-paper); } .pro-properties { grid-area: properties; overflow: auto; padding: 12px; background: var(--surface-1); border-left: 1px solid var(--line-1); max-height: none; position: static; border-radius: 0; box-shadow: none; } .pro-properties .panel-head { margin-bottom: var(--gap-3); } .pro-results { grid-area: results; overflow: auto; padding: 10px 12px; background: var(--surface-2); border: 0; border-top: 1px solid var(--line-1); border-radius: 0; box-shadow: none; } .pro-results .panel-head { margin-bottom: 6px; } .pro-results .panel-head h2 { font-size: var(--fz-14); } .pro-results .calc-matrix { max-height: 180px; } .property-symbol { display: grid; grid-template-columns: 64px 1fr; gap: var(--gap-3); align-items: center; margin-bottom: var(--gap-3); padding: 12px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); } .property-symbol .breaker-symbol { width: 56px; height: 48px; } .property-symbol div { display: grid; gap: 2px; min-width: 0; } .property-symbol strong { font-size: var(--fz-14); } .property-symbol span { color: var(--ink-3); font-size: var(--fz-12); } .property-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: var(--gap-3); border: 1px solid var(--line-1); border-radius: var(--radius-2); overflow: hidden; background: var(--surface-2); } .property-tabs button { min-height: 32px; border: 0; border-right: 1px solid var(--line-1); background: transparent; color: var(--ink-2); font-size: var(--fz-12); font-weight: 700; } .property-tabs button:last-child { border-right: 0; } .property-tabs button:hover { background: var(--accent-bg); } .property-tabs button.active { background: var(--accent-bg); color: var(--accent-strong); } [data-theme="dark"] .property-tabs button.active { color: var(--accent-2); } /* ----------------------------- Calculation ribbon ------------------- */ .calculation-ribbon { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: var(--gap-3); padding: 14px 18px; background: var(--surface-inverse); color: var(--ink-on-inverse); border-bottom: 1px solid var(--line-1); } .calculation-ribbon h2 { color: #f4f7fa; font-size: var(--fz-16); } .calculation-ribbon .eyebrow { color: rgba(244, 247, 250, 0.55); } .calculation-ribbon .status-badge { justify-self: end; background: rgba(255, 255, 255, 0.08); color: rgba(244, 247, 250, 0.92); } .ribbon-actions { display: flex; flex-wrap: wrap; gap: var(--gap-2); } .ribbon-actions button { min-height: 34px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-2); background: rgba(255, 255, 255, 0.06); color: rgba(244, 247, 250, 0.92); font-size: var(--fz-12); font-weight: 700; letter-spacing: 0.02em; } .ribbon-actions button:hover { background: rgba(255, 255, 255, 0.14); } .ribbon-actions button:first-child { background: var(--accent-1); border-color: var(--accent-1); color: #ffffff; } .ribbon-actions button:first-child:hover { background: var(--accent-2); border-color: var(--accent-2); } .norm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 18px; background: var(--surface-3); border-bottom: 1px solid var(--line-1); } .norm-strip span, .norm-strip strong { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fz-11); font-weight: 600; letter-spacing: 0.04em; border: 1px solid var(--line-1); background: var(--surface-2); color: var(--ink-2); } .norm-strip strong { background: var(--status-warn-bg); border-color: color-mix(in srgb, var(--status-warn) 35%, transparent); color: var(--status-warn); } .schema-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-2); padding: 12px 18px; background: var(--surface-1); border-bottom: 1px solid var(--line-1); } .schema-kpis div { display: grid; align-content: center; gap: 2px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); } .schema-kpis span { color: var(--ink-3); font-size: var(--fz-11); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .schema-kpis strong { font-size: var(--fz-18); font-weight: 600; letter-spacing: -0.01em; } /* ----------------------------- Workbench ---------------------------- */ .bt-workbench { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 540px; } .study-tree { overflow: auto; padding: 14px 10px; background: var(--surface-1); border-right: 1px solid var(--line-1); } .tree-title { margin: 0 0 10px; color: var(--ink-3); font-size: var(--fz-11); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .tree-branch { display: grid; gap: 4px; margin-left: 14px; padding-left: 10px; border-left: 2px solid var(--line-1); } .tree-node { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--radius-2); background: transparent; color: var(--ink-1); text-align: left; transition: background 120ms ease, border-color 120ms ease; } .tree-node.root { grid-template-columns: 1fr; margin-bottom: var(--gap-2); border-color: var(--line-1); background: var(--surface-2); } .tree-node:hover { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent-1) 35%, transparent); } .tree-node.selected { background: var(--accent-bg); border-color: var(--accent-1); } .tree-node span { font-size: var(--fz-13); font-weight: 600; } .tree-node em { grid-column: 2; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fz-11); font-style: normal; } .tree-node.root em { grid-column: 1; } /* ----------------------------- Schematic paper ---------------------- */ .schematic-paper { --schematic-stroke: 2.4; position: relative; min-height: 540px; padding: 0; background: linear-gradient(var(--schematic-grid) 1px, transparent 1px), linear-gradient(90deg, var(--schematic-grid) 1px, transparent 1px), var(--schematic-paper); background-size: 24px 24px; overflow: hidden; isolation: isolate; } .schematic-paper.is-grabbing { cursor: grabbing; } .schematic-paper.is-grab { cursor: grab; } .schematic-stage { position: absolute; inset: 0; padding: 20px 24px 24px; transform-origin: 0 0; will-change: transform; } .schema-zoom-controls { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: color-mix(in srgb, var(--surface-2) 92%, transparent); box-shadow: var(--shadow-1); backdrop-filter: blur(6px); } .schema-zoom-controls button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-1); background: transparent; color: var(--ink-1); font-family: var(--font-mono); font-size: var(--fz-14); font-weight: 700; } .schema-zoom-controls button:hover { background: var(--accent-bg); color: var(--accent-strong); } .schema-zoom-level { padding: 0 4px; font-family: var(--font-mono); font-size: var(--fz-11); font-weight: 600; text-align: center; color: var(--ink-2); letter-spacing: 0.04em; } .schema-tooltip { position: fixed; z-index: 12; display: grid; gap: 4px; min-width: 180px; max-width: 260px; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); box-shadow: var(--shadow-3); pointer-events: none; font-size: var(--fz-12); color: var(--ink-1); opacity: 0; transform: translateY(2px); transition: opacity 100ms ease, transform 100ms ease; } .schema-tooltip.visible { opacity: 1; transform: translateY(0); } .schema-tooltip strong { font-size: var(--fz-13); color: var(--ink-1); letter-spacing: -0.01em; } .schema-tooltip span { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: var(--fz-11); color: var(--ink-2); } .schema-tooltip span b { font-weight: 600; color: var(--ink-1); } .study-context { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr 0.8fr; background: var(--surface-2); border-bottom: 1px solid var(--line-1); } .study-context div { display: grid; align-content: center; gap: 2px; min-height: 50px; padding: 8px 14px; border-right: 1px solid var(--line-1); } .study-context div:last-child { border-right: 0; } .study-context span, .selected-strip span, .diagram-toolbar span { color: var(--ink-3); font-size: var(--fz-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .study-context strong { font-size: var(--fz-13); line-height: 1.2; } .diagram-toolbar { display: flex; align-items: center; gap: var(--gap-2); margin-bottom: var(--gap-3); padding: 8px 12px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: color-mix(in srgb, var(--surface-2) 92%, transparent); flex-wrap: wrap; } .diagram-toolbar span { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-1); background: transparent; color: var(--ink-2); font-size: var(--fz-11); font-weight: 600; } .diagram-toolbar span:first-child { margin-right: auto; color: var(--ink-1); background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent-1) 25%, transparent); } /* ----------------------------- Schematic symbols -------------------- */ .incoming-feeder { display: grid; grid-template-columns: minmax(220px, 280px) minmax(280px, 1fr) minmax(160px, 220px); gap: var(--gap-5); align-items: center; margin-bottom: 12px; min-width: min-content; } .source-node { display: grid; grid-template-columns: 96px 1fr; gap: var(--gap-3); align-items: center; color: var(--schematic-ink); } .source-node strong, .source-node span { grid-column: 2; } .source-node strong { font-size: var(--fz-14); font-weight: 700; color: var(--ink-1); } .source-node span, .circuit-node em, .circuit-node small, .earth-reference span { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fz-12); font-style: normal; } .source-symbol { grid-row: 1 / span 2; width: 96px; height: 72px; } .protection-symbol { width: 96px; height: 62px; } .schematic-symbol { display: block; overflow: visible; } .schematic-symbol path, .schematic-symbol line, .schematic-symbol polyline, .schematic-symbol polygon, .schematic-symbol circle, .schematic-symbol rect { fill: none; stroke: var(--schematic-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .schematic-symbol text { fill: var(--schematic-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; } .main-protection { display: grid; grid-template-columns: 1fr 96px 104px 1fr; gap: var(--gap-2); align-items: center; } .wire.horizontal { height: 2.4px; background: var(--schematic-ink); border-radius: 2px; } .earth-reference { display: grid; grid-template-columns: 42px 1fr; gap: var(--gap-2); align-items: center; } .earth-symbol { width: 42px; height: 42px; } .busbar { height: 8px; margin: 8px 0 18px; border-radius: 1px; background: var(--schematic-ink); box-shadow: 0 1px 0 color-mix(in srgb, var(--schematic-ink) 30%, transparent); min-width: min-content; } .diagram.schematic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gap-3); align-items: stretch; min-width: min-content; } /* ----------------------------- Circuit cards ------------------------ */ .circuit-node { position: relative; display: grid; grid-template-rows: 28px 178px auto 28px; gap: var(--gap-2); min-height: 308px; padding: 16px 12px 12px; border: 1px solid var(--line-1); border-radius: var(--radius-3); background: color-mix(in srgb, var(--surface-2) 92%, transparent); color: var(--ink-1); text-align: center; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 100ms ease; cursor: pointer; } .circuit-node:hover { border-color: var(--accent-1); background: var(--surface-2); box-shadow: var(--shadow-2); } .circuit-node.active { border-color: var(--accent-1); background: var(--surface-2); box-shadow: 0 0 0 2px var(--accent-1), var(--shadow-2); } .circuit-node:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent-strong), var(--shadow-2); } .circuit-node[data-tone="bad"] { border-color: color-mix(in srgb, var(--status-bad) 35%, var(--line-1)); } .circuit-node[data-tone="warn"] { border-color: color-mix(in srgb, var(--status-warn) 35%, var(--line-1)); } .schematic-drop { justify-self: center; width: 2.4px; height: 30px; margin-top: -16px; background: var(--schematic-ink); border-radius: 2px; } .symbol-stack { justify-self: center; display: grid; justify-items: center; align-content: start; } .symbol-stack::before, .symbol-stack::after { content: ""; width: 2.4px; height: 16px; background: var(--schematic-ink); } .breaker-symbol, .load-symbol { width: 88px; height: 78px; } /* ----------------------------- Protection chip --------------------- */ .protection-chip { display: grid; gap: 2px; align-items: center; justify-items: center; min-width: 88px; min-height: 50px; padding: 7px 12px; border: 2px solid var(--schematic-ink); border-radius: var(--radius-2); background: var(--surface-2); text-align: center; white-space: nowrap; } .protection-chip strong { font-family: var(--font-mono); font-size: var(--fz-14); font-weight: 700; color: var(--ink-1); line-height: 1; letter-spacing: 0; } .protection-chip em { font-family: var(--font-mono); font-size: var(--fz-11); font-style: normal; font-weight: 600; color: var(--ink-2); line-height: 1.2; } .protection-chip-empty { border-style: dashed; border-color: var(--line-2); background: transparent; } .protection-chip-empty strong, .protection-chip-empty em { color: var(--ink-3); } .circuit-node[data-tone="bad"] .protection-chip { border-color: var(--status-bad); background: color-mix(in srgb, var(--status-bad-bg) 50%, var(--surface-2)); } .circuit-node[data-tone="warn"] .protection-chip { border-color: var(--status-warn); background: color-mix(in srgb, var(--status-warn-bg) 50%, var(--surface-2)); } /* ----------------------------- Catalogue dispositifs --------------- */ .protections-layout { gap: var(--gap-3); } .protection-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-4); padding: 22px; } .protection-toolbar-meta { display: grid; gap: var(--gap-2); justify-items: end; align-content: start; } .protection-toolbar h2 { margin-bottom: 6px; } .protection-card { display: grid; gap: var(--gap-3); padding: 18px; } .protection-summary { display: flex; align-items: center; gap: var(--gap-3); flex-wrap: wrap; } .protection-meta { font-family: var(--font-mono); font-size: var(--fz-12); color: var(--ink-3); font-weight: 600; } .protection-card .actions { border-top: 1px solid var(--line-1); padding-top: var(--gap-3); } .protection-card .actions button[disabled] { opacity: 0.45; cursor: not-allowed; } .pe-symbol { margin-top: 2px; } .pe-symbol .earth-symbol { width: 30px; height: 30px; } .circuit-label { display: grid; gap: 2px; align-content: start; text-align: left; min-width: 0; } .circuit-node strong { font-size: var(--fz-13); font-weight: 700; line-height: 1.2; color: var(--ink-1); } .circuit-node em { font-family: var(--font-mono); font-size: var(--fz-11); } .circuit-node small { font-family: var(--font-mono); font-size: var(--fz-11); color: var(--ink-3); } .circuit-node b { align-self: end; justify-self: center; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fz-11); font-weight: 700; letter-spacing: 0.02em; } .circuit-node.ok b { background: var(--status-ok-bg); color: var(--status-ok); } .circuit-node.warn b { background: var(--status-warn-bg); color: var(--status-warn); } .circuit-node.bad b { background: var(--status-bad-bg); color: var(--status-bad); } /* ----------------------------- Calc matrix -------------------------- */ .calc-matrix { display: grid; border: 1px solid var(--line-1); border-radius: var(--radius-2); overflow-x: auto; background: var(--surface-2); } .matrix-row { display: grid; grid-template-columns: 1.4fr 84px 84px 130px 86px 92px 86px 88px; gap: var(--gap-3); align-items: center; min-width: 920px; padding: 8px 12px; border: 0; border-top: 1px solid var(--line-1); background: var(--surface-2); color: var(--ink-1); font-family: var(--font-mono); font-size: var(--fz-12); text-align: left; transition: background 100ms ease; } .matrix-row > span:first-child { font-family: var(--font-sans); font-weight: 600; } .matrix-row:first-child { border-top: 0; } .matrix-row:not(.matrix-head):hover, .matrix-row.selected { background: var(--accent-bg); } .matrix-row.selected { box-shadow: inset 3px 0 0 0 var(--accent-1); } .matrix-head { background: var(--surface-inverse); color: var(--ink-on-inverse); cursor: default; font-family: var(--font-sans); font-weight: 700; } .matrix-head span { font-family: var(--font-sans) !important; font-size: var(--fz-11); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 247, 250, 0.85); } /* ----------------------------- Schema layout (legacy) --------------- */ .schema-layout { display: grid; grid-template-columns: minmax(0, 1fr) 376px; grid-template-areas: "board editor" "results editor"; gap: var(--gap-3); align-items: start; } .schema-board { grid-area: board; padding: 0; overflow: hidden; } .schema-editor { grid-area: editor; position: sticky; top: 78px; display: grid; gap: var(--gap-3); max-height: calc(100vh - 90px); padding: var(--gap-3); overflow: auto; } .schema-results { grid-area: results; display: grid; gap: var(--gap-3); padding: var(--gap-3); } .schema-tabs { position: sticky; top: 78px; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: 4px; background: var(--surface-1); } .schema-tabs button { min-height: 36px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); color: var(--ink-1); font-size: var(--fz-12); font-weight: 600; } .schema-tabs button:hover { border-color: var(--accent-1); background: var(--accent-bg); color: var(--accent-strong); } [data-theme="dark"] .schema-tabs button:hover { color: var(--accent-2); } .selected-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line-1); border-radius: var(--radius-2); overflow: hidden; background: var(--surface-2); } .selected-strip div { display: grid; align-content: center; gap: 4px; min-height: 58px; padding: 9px 12px; border-right: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); } .selected-strip div:nth-child(2n) { border-right: 0; } .selected-strip div:nth-last-child(-n + 2) { border-bottom: 0; } .selected-strip strong { font-size: var(--fz-14); line-height: 1.2; } .schema-details { border: 1px solid var(--line-1); border-radius: var(--radius-2); overflow: hidden; background: var(--surface-2); } .schema-details summary { display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer; color: var(--ink-1); font-size: var(--fz-13); font-weight: 700; background: var(--surface-3); } .schema-details summary::marker { color: var(--ink-3); } .schema-details[open] summary { border-bottom: 1px solid var(--line-1); } .schema-details .form-grid { padding: var(--gap-3); } .form-grid.compact { grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: var(--gap-2); } .form-grid.compact .field > span { font-size: var(--fz-11); } .form-grid.compact input, .form-grid.compact select { min-height: 34px; font-size: var(--fz-12); } .schema-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ----------------------------- Check rows --------------------------- */ .check-grid { display: grid; gap: var(--gap-2); } .check-row { display: grid; grid-template-columns: minmax(140px, 0.7fr) 110px minmax(0, 1fr); gap: var(--gap-3); align-items: center; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); } .check-row span { color: var(--ink-2); font-size: var(--fz-13); font-weight: 600; } .check-row em { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fz-12); font-style: normal; } .check-row strong { font-size: var(--fz-13); } .check-row.ok { border-left: 3px solid var(--status-ok); } .check-row.bad { border-left: 3px solid var(--status-bad); } .check-row.ok strong { color: var(--status-ok); } .check-row.bad strong { color: var(--status-bad); } /* ----------------------------- Tables ------------------------------- */ .table { display: grid; border: 1px solid var(--line-1); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-2); } .table-row { display: grid; grid-template-columns: 1fr 150px 130px 2fr; gap: var(--gap-3); align-items: start; padding: 12px 14px; border-top: 1px solid var(--line-1); font-size: var(--fz-13); line-height: 1.5; } .table-row:first-child { border-top: 0; } .table-head { background: var(--surface-inverse); color: var(--ink-on-inverse); font-weight: 700; font-size: var(--fz-12); letter-spacing: 0.04em; text-transform: uppercase; } .schema-report-table .table-row { grid-template-columns: 1fr 145px 145px 150px 150px; } /* ----------------------------- Reference layout --------------------- */ .report-layout { display: grid; gap: var(--gap-4); } .reference-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-4); } .check-list { margin: 0; padding-left: 20px; color: var(--ink-1); line-height: 1.6; } .check-list li + li { margin-top: 4px; } /* ----------------------------- Toast -------------------------------- */ .toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; padding: 12px 16px; border-radius: var(--radius-2); background: var(--surface-inverse); color: var(--ink-on-inverse); font-size: var(--fz-13); font-weight: 600; box-shadow: var(--shadow-3); animation: toast-in 200ms ease; } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------- Mobile schema fallback --------------- */ .schema-mobile { display: none; padding: 16px; background: var(--surface-1); border-bottom: 1px solid var(--line-1); } .schema-mobile-cards { display: grid; gap: var(--gap-2); } .schema-mobile-card { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--gap-3); align-items: center; padding: 12px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); text-align: left; width: 100%; } .schema-mobile-card.active { border-color: var(--accent-1); box-shadow: 0 0 0 2px var(--accent-1); } .schema-mobile-card strong { font-size: var(--fz-14); display: block; } .schema-mobile-card em { font-family: var(--font-mono); font-style: normal; font-size: var(--fz-11); color: var(--ink-3); } .schema-mobile-card .breaker-symbol { width: 48px; height: 42px; } .schema-mobile-button { width: 100%; margin-bottom: var(--gap-3); } .schema-modal { position: fixed; inset: 0; z-index: 30; display: none; background: var(--surface-0); } .schema-modal.open { display: grid; grid-template-rows: 56px 1fr; } .schema-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--surface-inverse); color: var(--ink-on-inverse); } .schema-modal-head strong { font-size: var(--fz-14); font-weight: 700; } .schema-modal-head button { height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-2); background: rgba(255, 255, 255, 0.06); color: rgba(244, 247, 250, 0.95); font-weight: 700; } /* ----------------------------- Responsive --------------------------- */ @media (max-width: 1199px) { .app-shell { grid-template-columns: 72px minmax(0, 1fr); } .schema-mode { grid-template-columns: 72px minmax(0, 1fr); } .nav-rail { padding: 14px 8px; } .brand-mark { grid-template-columns: 1fr; justify-items: center; padding: 10px 6px; } .brand-mark::before { width: 32px; height: 32px; } .brand-mark strong, .brand-mark span { display: none; } .nav-rail button { grid-template-columns: 1fr; justify-items: center; padding: 6px 4px; } .nav-rail button em { display: none; } .theme-toggle { grid-template-columns: 1fr; justify-items: center; padding: 6px 4px; border: 0; background: transparent; } .theme-toggle span, .theme-toggle small { display: none; } .pro-workspace { grid-template-columns: 220px minmax(0, 1fr) 320px; } } @media (max-width: 1024px) { .pro-workspace { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "tree" "canvas" "properties" "results"; } .pro-tree, .pro-properties { border-right: 0; border-left: 0; border-bottom: 1px solid var(--line-1); } .pro-canvas { border-right: 0; border-bottom: 1px solid var(--line-1); } .schema-layout { grid-template-columns: 1fr; grid-template-areas: "board" "editor" "results"; } .schema-editor { position: static; max-height: none; } .schema-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .study-context { grid-template-columns: repeat(2, minmax(0, 1fr)); } .study-context div:nth-child(2n) { border-right: 0; } .study-context div:nth-child(-n + 2) { border-bottom: 1px solid var(--line-1); } } @media (max-width: 767px) { .app-shell, .schema-mode { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } main { padding: 12px; padding-bottom: 84px; } .topbar { margin: -12px -12px var(--gap-3); padding: 12px; flex-direction: column; align-items: flex-start; } .topbar-status { width: 100%; } .nav-rail { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; align-items: center; gap: 0; padding: 6px 8px; border-right: 0; border-top: 1px solid color-mix(in srgb, var(--surface-inverse) 70%, #000); overflow-x: auto; z-index: 10; } .schema-mode .nav-rail { bottom: 0; } .brand-mark { display: none; } .nav-rail nav { grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); width: 100%; gap: 4px; } .nav-rail button { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; min-height: 56px; gap: 2px; padding: 4px; } .nav-rail button em { display: block; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; } .nav-footer { margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); } .theme-toggle { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 56px; padding: 4px; gap: 2px; text-align: center; } .theme-toggle span { display: block; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; } .theme-toggle small { display: none; } .pro-titlebar { grid-template-columns: 1fr; min-height: auto; padding: 10px 12px; gap: 4px; } .pro-user { justify-self: start; padding-left: 0; border-left: 0; } .pro-commandbar { overflow-x: auto; flex-wrap: nowrap; } .pro-commandbar button { min-width: 64px; min-height: 52px; padding: 6px 8px; } .pro-tabs { overflow-x: auto; } .pro-tabs span { display: none; } .pro-canvas { grid-template-rows: auto auto auto; } .pro-canvas .schematic-paper { display: none; } .schema-mobile { display: block; } .schema-modal.open .schematic-paper { display: block; } .schema-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; } .calculation-ribbon { grid-template-columns: 1fr; padding: 12px; } .calculation-ribbon .status-badge { justify-self: start; } .ribbon-actions { justify-content: flex-start; } .study-context { grid-template-columns: 1fr; } .study-context div { border-right: 0; border-bottom: 1px solid var(--line-1); } .study-context div:last-child { border-bottom: 0; } .workspace-grid { grid-template-columns: 1fr; } .form-grid, .form-grid.compact, .reference-layout { grid-template-columns: 1fr; } .table-row { grid-template-columns: 1fr; gap: 4px; } .table-head { display: none; } .schema-zoom-controls { top: 8px; right: 8px; } .toast { left: 12px; right: 12px; bottom: 80px; } } /* ----------------------------- Print -------------------------------- */ @media print { :root { color-scheme: light; } .nav-rail, .nav-footer, .topbar, .actions, .ribbon-actions, .pro-commandbar, .pro-tabs, .schema-zoom-controls, .schema-mobile, .schema-modal { display: none !important; } body { background: #ffffff; } .app-shell, .workspace-grid, .report-layout, .schema-mode, .pro-workspace { display: block; } main { padding: 0; } .panel, .schematic-paper { box-shadow: none; page-break-inside: avoid; margin-bottom: var(--gap-3); } .schematic-paper { overflow: visible; height: auto; } }