/* ── assets/css/main.css ── Unex design system ────────────────────────── * * Unex visual identity applied to TrunklyPlan. The application is a light, * technical UI: white and straight lines dominate, brand red is a precise * accent. Layout is a fixed left sidebar + topbar shell. The old dark/light * theme is replaced by a SIDEBAR-STYLE switch (red ⇆ light) driven by the * [data-sidebar] attribute on ; the content area is always light. * * Brand red #de271f hover #c41f18 tint #fdecea tint-border #f6d6d3 * Ink #1c1d1f · Strong #4a4c4e · Muted #8a8d91 · Faint #9a9da1 * App bg #f4f5f6 · Card #ffffff · Border #e6e7e9 · Status green #5a8a3e * * The legacy --app-* token names are preserved so styles.css and existing * page markup keep resolving against the new Unex palette. * * UI-text font sizes use rem (relative to the root) so they respect the * user's browser font-size preference. Drawing/measurement text (canvas, * parameter diagram, cut-plan bars, exports) is intentionally NOT styled * here and stays in fixed units elsewhere. * ───────────────────────────────────────────────────────────────────── */ /* ═══ 0. SELF-HOSTED FONTS ════════════════════════════════════════════ * Helvetica Neue LT Std — three real weights: Roman (400), Medium (500), * Bold (700). woff2 first (smaller/faster), otf fallback. The CSS family * name stays "Helvetica Neue LT Std" so nothing else needs to change. * font-synthesis: none (on body) stops the browser faking absent weights. */ @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/HelveticaNeueLTStd-Roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/HelveticaNeueLTStd-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/HelveticaNeueLTStd-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ═══ 1. TOKENS ═══════════════════════════════════════════════════════ */ :root { /* Brand */ --app-primary: #de271f; --app-primary-hover: #c41f18; --app-primary-rgb: 222, 39, 31; --app-tint: #fdecea; /* red tint surface */ --app-tint-border: #f6d6d3; /* red tint outline */ /* Surfaces & lines (always light) */ --app-bg-1: #f6f7f8; /* canvas top / subtle fills */ --app-bg-2: #eef0f1; /* canvas bottom */ --app-app-bg: #f4f5f6; /* work area behind cards */ --app-panel-1: #ffffff; /* cards / topbar / surfaces */ --app-panel-2: #f4f5f6; /* elevated / hover / inset */ --app-raised: #f6f7f8; /* metric tiles */ --app-border: #e6e7e9; /* 1px hairlines */ --app-border-input: #e1e3e6; /* input outline */ --app-border-strong: #d9dbde; /* select / secondary button outline */ /* Text */ --app-text: #1c1d1f; /* ink */ --app-text-strong: #4a4c4e; /* strong */ --app-text-muted: #5B5E62; /* muted */ --app-text-faint: #7C8084; /* faint */ /* Status */ --app-ok: #5a8a3e; --app-ok-surface: #eef4e9; /* Geometry */ --app-radius-sm: 8px; --app-radius-md: 14px; --app-radius-pill: 32px; --side-width: 248px; --topbar-height: 64px; --font-sans: 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, Arial, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Helvetica Neue LT Std', 'Helvetica Neue', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── Sidebar style: RED (default) ───────────────────────────────── */ --side-bg: #de271f; --side-fg: #ffffff; --side-muted: rgba(255, 255, 255, .72); --side-border: rgba(255, 255, 255, .16); --side-app: rgba(255, 255, 255, .12); --side-hover: rgba(255, 255, 255, .12); --side-active-bg: #ffffff; --side-active-fg: #de271f; --side-edge: none; --logo-show-white: block; --logo-show-red: none; --avatar-bg: #ffffff; --avatar-border: transparent; --badge-bg: rgba(255, 255, 255, .2); --badge-fg: #ffffff; --toggle-track: rgba(0, 0, 0, .14); } /* ── Sidebar style: LIGHT ───────────────────────────────────────────── */ html[data-sidebar="light"] { --side-bg: #ffffff; --side-fg: #2a2c2e; --side-muted: #8a8d91; --side-border: #e8e9eb; --side-app: #f6f7f8; --side-hover: #f4f5f6; --side-active-bg: #fdecea; --side-active-fg: #de271f; --side-edge: 1px solid #e8e9eb; --logo-show-white: none; --logo-show-red: block; --avatar-bg: #fdecea; --avatar-border: #ecdcda; --badge-bg: #fdecea; --badge-fg: #c41f18; --toggle-track: #eceef0; } /* ═══ 2. BOOTSTRAP MAPPING (light, always) ════════════════════════════ */ :root, [data-bs-theme="light"] { --bs-body-bg: var(--app-app-bg); --bs-body-color: var(--app-text); --bs-body-font-family: var(--font-sans); --bs-border-color: var(--app-border); --bs-border-color-translucent: var(--app-border); --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-secondary-color: var(--app-text-muted); --bs-tertiary-color: var(--app-text-faint); --bs-emphasis-color: #000000; --bs-link-color: var(--app-primary); --bs-link-hover-color: var(--app-primary-hover); --bs-link-color-rgb: var(--app-primary-rgb); --bs-secondary-bg: var(--app-panel-2); --bs-tertiary-bg: var(--app-panel-1); } /* ═══ 3. BASE + TYPOGRAPHY ════════════════════════════════════════════ */ html, body { height: 100%; } body { font-family: var(--font-sans); color: var(--app-text); background: var(--app-app-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; letter-spacing: 0; font-synthesis: none; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; color: var(--app-text); } .font-mono, .tl-mono { font-family: var(--font-mono); } .text-faint { color: var(--app-text-faint) !important; } .text-muted { color: var(--app-text-muted) !important; } a { color: var(--app-primary); } a:hover { color: var(--app-primary-hover); } ::placeholder { color: var(--app-text-faint); } kbd, .kbd { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.1rem 0.4rem; color: var(--app-text-strong); background: var(--app-panel-2); border: 1px solid var(--app-border); border-bottom-width: 2px; border-radius: 4px; } /* ═══ 4. APP SHELL — SIDEBAR + TOPBAR ═════════════════════════════════ */ .app-shell { display: flex; width: 100%; min-height: 100vh; } /* Signed-out (login) shell — no sidebar, vertically centred. */ body.app-auth { display: flex; flex-direction: column; } /* ── Sidebar ───────────────────────────────────────────────────────── */ .app-sidebar { width: var(--side-width); flex: none; display: flex; flex-direction: column; background: var(--side-bg); color: var(--side-fg); border-right: var(--side-edge); height: 100vh; position: sticky; top: 0; z-index: 1040; } .app-sidebar .side-brand { padding: 20px 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .app-sidebar .side-logo { height: 40px; width: auto; display: block; } .app-sidebar .side-logo--white { display: var(--logo-show-white); } .app-sidebar .side-logo--red { display: var(--logo-show-red); } .app-sidebar .side-product { padding-top: 10px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; } .app-sidebar .side-product i { font-size: 1.2rem; } .app-sidebar .side-product a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; } .app-sidebar .side-product a:hover { color: inherit; } .app-sidebar .side-overline { padding: 0 20px; margin: 4px 0 5px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); } .app-sidebar .side-nav { padding: 0 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .app-sidebar .side-link { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; color: var(--side-fg); text-decoration: none; font-size: 0.9375rem; font-weight: 700; border: none; background: transparent; cursor: pointer; width: 100%; text-align: left; transition: background .12s, color .12s; } .app-sidebar .side-link i { width: 18px; text-align: center; font-size: 0.9375rem; opacity: .92; } .app-sidebar .side-link:hover { background: var(--side-hover); color: var(--side-fg); } .app-sidebar .side-link.active { background: var(--side-active-bg); color: var(--side-active-fg); } .app-sidebar .side-link.active i { opacity: 1; } .app-sidebar .side-link .side-badge { margin-left: auto; font-size: 0.6875rem; font-weight: 700; background: var(--badge-bg); color: var(--badge-fg); padding: 1px 8px; border-radius: 20px; } .app-sidebar .side-spacer { flex: 1 1 auto; min-height: 8px; } .app-sidebar .side-panel { margin: 0 14px 12px; padding: 11px 12px; background: var(--side-app); border: 1px solid var(--side-border); border-radius: 12px; } .app-sidebar .side-panel-label { font-size: 0.65625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--side-muted); margin-bottom: 8px; } /* Sidebar-style switch (red ⇆ light) — bare toggle (no panel), kept inset */ .side-switch { display: flex; gap: 4px; margin: 0 14px 12px; background: var(--toggle-track); border-radius: 9px; padding: 3px; } .side-switch button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border: none; border-radius: 7px; background: transparent; color: var(--side-muted); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; } .side-switch button i { font-size: 0.8125rem; } .side-switch button.is-active { background: var(--side-active-bg); color: var(--side-active-fg); box-shadow: 0 1px 2px rgba(0,0,0,.12); } /* Language dropdown inside sidebar (scales to many languages) */ .side-lang { position: relative; } .side-lang-select { width: 100%; padding: 6px 28px 6px 10px; border-radius: 8px; border: 1px solid var(--side-border); background: transparent; color: var(--side-fg); font-size: 0.75rem; font-weight: 600; line-height: 1.4; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: background .12s, border-color .12s; } .side-lang-select:hover { background: var(--side-hover); } .side-lang-select:focus-visible { outline: none; border-color: var(--side-active-bg); } /* Keep the expanded option list readable regardless of sidebar theme */ .side-lang-select option { color: #1a1a1a; background: #fff; } .side-lang-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--side-muted); pointer-events: none; } /* Account block */ .app-sidebar .side-account { padding: 13px 16px 16px; border-top: 1px solid var(--side-border); display: flex; align-items: center; gap: 11px; } .app-sidebar .side-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--avatar-bg); border: 1px solid var(--avatar-border); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; color: #de271f; text-transform: uppercase; } .app-sidebar .side-userinfo { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .app-sidebar .side-username { font-size: 0.8125rem; font-weight: 600; color: var(--side-fg); } .app-sidebar .side-role { font-size: 0.6875rem; color: var(--side-muted); } .app-sidebar .side-logout { margin-left: auto; flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--side-muted); background: transparent; border: 1px solid transparent; text-decoration: none; transition: background .12s, color .12s; } .app-sidebar .side-logout:hover { background: var(--side-hover); color: var(--side-fg); } /* Legal / footer links */ .app-sidebar .side-legal { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px 4px; } .app-sidebar .side-legal a { font-size: 0.72rem; color: var(--side-muted); text-decoration: none; padding: 2px 0; transition: color .12s; } .app-sidebar .side-legal a:hover { color: var(--side-fg); text-decoration: underline; } /* ── Main column ───────────────────────────────────────────────────── */ .app-main { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .app-topbar { position: sticky; top: 0; z-index: 1030; flex: none; min-height: var(--topbar-height); background: var(--app-panel-1); border-bottom: 1px solid var(--app-border); display: flex; align-items: center; gap: 14px; padding: 12px 28px; } .app-topbar .topbar-toggle { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--app-border-strong); background: #fff; border-radius: 10px; color: var(--app-text-strong); font-size: 1.125rem; cursor: pointer; } .app-topbar .topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .app-topbar .topbar-tick { width: 18px; height: 2px; background: var(--app-primary); flex: none; } .app-topbar .topbar-title h1 { margin: 0; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-content { flex: 1 1 auto; overflow-y: auto; } .app-content > .app-container { padding: 24px 28px 40px; max-width: 1280px; margin: 0 auto; } .page-footer { border-top: 1px solid var(--app-border); background: var(--app-panel-1); } .page-footer .text-faint { color: var(--app-text-faint) !important; } /* ── Mobile sidebar (offcanvas) ────────────────────────────────────── */ .app-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; opacity: 0; visibility: hidden; transition: opacity .2s; } @media (max-width: 991.98px) { .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px -8px rgba(0,0,0,.4); } .app-shell.nav-open .app-sidebar { transform: translateX(0); } .app-shell.nav-open .app-backdrop { opacity: 1; visibility: visible; } .app-topbar .topbar-toggle { display: flex; } .app-content > .app-container { padding: 18px 16px 32px; } .app-topbar { padding: 10px 16px; } } /* ═══ 5. COMPONENTS ═══════════════════════════════════════════════════ */ .card { --bs-card-bg: var(--app-panel-1); --bs-card-border-color: var(--app-border); --bs-card-cap-bg: transparent; border-radius: var(--app-radius-md); box-shadow: none; } .card-header { font-weight: 700; font-size: 0.95rem; background: transparent; border-bottom: 1px solid #f1f2f3; padding-top: 0.85rem; padding-bottom: 0.85rem; } .card-footer { background: transparent; border-top: 1px solid var(--app-border); } .form-label { font-weight: 400; font-size: 0.78rem; color: var(--app-text-muted); margin-bottom: 0.35rem; } .form-text { color: var(--app-text-faint); font-size: 0.72rem; } .form-control, .form-select { background-color: #ffffff; border-color: var(--app-border-input); color: var(--app-text); border-radius: var(--app-radius-sm); font-size: 0.85rem; } .form-select { border-color: var(--app-border-strong); } .form-control::placeholder { color: var(--app-text-faint); } .form-control:focus, .form-select:focus { background-color: #ffffff; border-color: var(--app-primary); color: var(--app-text); box-shadow: 0 0 0 0.2rem rgba(var(--app-primary-rgb), 0.16); } .form-control-color { min-height: calc(1.5em + 0.75rem + 2px); } .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .form-check-input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 0.2rem rgba(var(--app-primary-rgb), 0.16); } .form-range { accent-color: var(--app-primary); } .btn { padding: 10px 20px; font-weight: 700; border-radius: var(--app-radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; line-height: 1; } .btn i { line-height: 1; } .btn-group > .btn { border-radius: var(--app-radius-sm); } .btn-group > .btn:first-child { border-top-left-radius: var(--app-radius-pill); border-bottom-left-radius: var(--app-radius-pill); } .btn-group > .btn:last-child { border-top-right-radius: var(--app-radius-pill); border-bottom-right-radius: var(--app-radius-pill); } .btn-group > .btn:only-child { border-radius: var(--app-radius-pill); } .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-disabled-color: #fff; } .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-tint-border); --bs-btn-bg: var(--app-tint); --bs-btn-hover-bg: var(--app-tint); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: var(--app-primary); --bs-btn-active-bg: var(--app-tint); --bs-btn-active-color: var(--app-primary); } .btn-secondary, .btn-outline-secondary { --bs-btn-color: var(--app-text-strong); --bs-btn-bg: #ffffff; --bs-btn-border-color: var(--app-border-strong); --bs-btn-hover-bg: var(--app-panel-2); --bs-btn-hover-border-color: var(--app-text-faint); --bs-btn-hover-color: var(--app-text); --bs-btn-active-bg: var(--app-panel-2); --bs-btn-active-border-color: var(--app-text-faint); --bs-btn-active-color: var(--app-text); } .btn-outline-secondary.active, .btn-outline-secondary:active { --bs-btn-active-bg: var(--app-tint); --bs-btn-active-border-color: var(--app-primary); --bs-btn-active-color: var(--app-primary); } .btn-danger { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-hover); } .btn-success { --bs-btn-bg: var(--app-ok); --bs-btn-border-color: var(--app-ok); --bs-btn-hover-bg: #4e7836; --bs-btn-hover-border-color: #4e7836; } .nav-tabs { --bs-nav-tabs-border-color: var(--app-border); --bs-nav-tabs-link-hover-border-color: var(--app-border); --bs-nav-tabs-link-active-color: var(--app-primary); --bs-nav-tabs-link-active-bg: var(--app-panel-1); --bs-nav-tabs-link-active-border-color: var(--app-border) var(--app-border) var(--app-panel-1); } .nav-tabs .nav-link { color: var(--app-text-muted); font-weight: 600; } .nav-tabs .nav-link:hover { color: var(--app-text); } /* Changelog editor — per-language tab strip (Unex-branded toggle). Inactive pills are neutral/muted so the active language reads clearly; the active pill uses the Unex red fill, matching the sidebar toggle. */ .cl-lang-tabs { gap: 4px; border-bottom: 1px solid var(--app-border); padding-bottom: 8px; } .cl-lang-tabs .nav-link { color: var(--app-text-muted); font-weight: 700; font-size: 0.8125rem; letter-spacing: .02em; padding: 5px 12px; border-radius: 8px; border: 1px solid transparent; transition: background .12s, color .12s, box-shadow .12s; } .cl-lang-tabs .nav-link:hover { color: var(--app-text); background: var(--app-panel-2); } .cl-lang-tabs .nav-link.active { color: var(--bs-white); background: var(--app-primary); box-shadow: 0 1px 2px rgba(var(--app-primary-rgb), .35); } .cl-lang-tabs .cl-tab-dot { color: var(--app-primary); } .cl-lang-tabs .nav-link.active .cl-tab-dot { color: var(--bs-white); } .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: #f1f2f3; --bs-table-hover-bg: #fafbfb; --bs-table-hover-color: var(--app-text); } .table > thead { color: var(--app-text-faint); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; font-weight: 700; } .modal-content { background: var(--app-panel-1); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: 0 24px 60px -20px rgba(0,0,0,.3); } .modal-header, .modal-footer { border-color: var(--app-border); } .dropdown-menu { --bs-dropdown-bg: var(--app-panel-1); --bs-dropdown-border-color: var(--app-border); --bs-dropdown-color: var(--app-text); --bs-dropdown-link-color: var(--app-text); --bs-dropdown-link-hover-bg: var(--app-panel-2); --bs-dropdown-link-hover-color: var(--app-text); --bs-dropdown-link-active-bg: var(--app-tint); --bs-dropdown-link-active-color: var(--app-primary); --bs-dropdown-header-color: var(--app-text-faint); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.35); border-radius: var(--app-radius-md); padding: 0.35rem; } .dropdown-item { border-radius: var(--app-radius-sm); padding: 0.45rem 0.7rem; } .alert-secondary { --bs-alert-bg: var(--app-panel-2); --bs-alert-border-color: var(--app-border); --bs-alert-color: var(--app-text-strong); } .alert-info { --bs-alert-bg: var(--app-tint); --bs-alert-border-color: var(--app-tint-border); --bs-alert-color: var(--app-primary-hover); } .alert-success { --bs-alert-bg: var(--app-ok-surface); --bs-alert-border-color: #d6e5c9; --bs-alert-color: #3f6b27; } .alert-danger { --bs-alert-bg: var(--app-tint); --bs-alert-border-color: var(--app-tint-border); --bs-alert-color: var(--app-primary-hover); } .badge.text-bg-primary { background-color: var(--app-primary) !important; color: #fff !important; } .badge.text-bg-secondary { background-color: var(--app-panel-2) !important; color: var(--app-text-strong) !important; } .badge.text-bg-info { background-color: var(--app-tint) !important; color: var(--app-primary-hover) !important; } .badge.text-bg-success { background-color: var(--app-ok) !important; color: #fff !important; } .text-primary { color: var(--app-primary) !important; } .text-danger { color: var(--app-primary-hover) !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #d4d6d9; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #b8bbbf; background-clip: content-box; border: 3px solid transparent; } ::-webkit-scrollbar-track { background: transparent; } /* ═══ 6. SHARED CLASSES ═══════════════════════════════════════════════ */ .plugin-navbar { padding-bottom: 1rem; margin-bottom: 1.25rem !important; border-bottom: 1px solid var(--app-border); } .plugin-title { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.5px; color: var(--app-text); } .plugin-description { font-size: 0.9rem; color: var(--app-text-muted); } .plugin-toolbar { gap: 0.5rem; } .btn-ghost { color: var(--app-text-strong); background: #ffffff; border: 1px solid var(--app-border-strong); border-radius: var(--app-radius-pill); font-weight: 600; } .btn-ghost:hover { color: var(--app-text); background: var(--app-panel-2); border-color: var(--app-text-faint); } .btn-ghost.text-danger { color: var(--app-primary) !important; background: #ffffff; border-color: var(--app-tint-border); } .btn-ghost.text-danger:hover { background: var(--app-tint); border-color: var(--app-tint-border); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; line-height: 1; } .btn-ghost i { margin: 0; /* let `gap` own the icon-to-text spacing */ line-height: 1; /* drop the icon font's own line box */ } /* The Align and Distribute toolbar buttons sit disabled until a run is selected. Bootstrap disables pointer events on a disabled .btn, which also suppresses their hover tooltip — so restore pointer events on just these two (the `disabled` attribute still blocks the click) and show a help cursor, so hovering explains what the greyed-out control does. */ #btn-align:disabled, #btn-distribute:disabled { pointer-events: auto; cursor: help; } .surface, .panel { background: var(--app-panel-1); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); } .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--app-text-muted); } .empty-state h3 { font-size: 1rem; color: var(--app-text); margin-bottom: 0.35rem; } .empty-state p { font-size: 0.85rem; color: var(--app-text-muted); margin-bottom: 0; } .stat { background: var(--app-panel-1); /* white KPI tiles */ border: 1px solid var(--app-border); border-radius: var(--app-radius-md); padding: 0.95rem 1.05rem; height: 100%; } .stat .label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--app-text-faint); margin-bottom: 0.35rem; } .stat .value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--app-text); line-height: 1.1; } .stat .meta { font-size: 0.7rem; color: var(--app-text-faint); margin-top: 0.25rem; } /* ═══ 7. WIZARD STEPPER ═══════════════════════════════════════════════ */ .wizard-stepper { list-style: none; display: flex; gap: 0.875rem; padding: 0; margin: 0; flex-wrap: wrap; } .wizard-step-pill { flex: 1 1 0; min-width: 190px; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--app-panel-1); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.05s; } .wizard-step-pill:hover { border-color: var(--app-primary); } .wizard-step-pill:active { transform: translateY(1px); } .wizard-step-pill.is-current { border-color: var(--app-primary); background: var(--app-tint); } .wizard-step-pill.is-done { opacity: 1; } .wizard-step-num { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; background: var(--app-panel-2); color: var(--app-text-muted); transition: background 0.15s, color 0.15s; } .wizard-step-pill.is-current .wizard-step-num { background: var(--app-primary); color: #fff; } .wizard-step-pill.is-done .wizard-step-num { background: var(--app-ok); color: #fff; } .wizard-step-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .wizard-step-title { font-weight: 700; font-size: 0.95rem; color: var(--app-text); } .wizard-step-sub { font-size: 0.72rem; color: var(--app-text-muted); } .wizard-nav { border-top: 1px solid var(--app-border); padding-top: 1rem; } .wizard-nav .invisible { visibility: hidden; } @media (max-width: 575.98px) { .wizard-step-sub { display: none; } .wizard-step-pill { min-width: 0; flex-basis: auto; } .plugin-title { font-size: 1.4rem; } }