/* Fabricore host-aware theme.
The root carries data-host, data-theme and data-role. Colours derive
from CSS custom properties so switching host = swapping one attribute, never
restyling components. Bootstrap runs in CSS-variable mode; we override its
accent tokens (--bs-primary etc.) per host so buttons read as native. */
:root {
/* Accent (shared across light + dark). Darkened from #2f80ff so WHITE button
text clears WCAG AA (4.5:1 — #1d6bf0 gives ~4.8); hover goes a shade deeper. */
--fc-accent: #1d6bf0;
--fc-accent-rgb: 29, 107, 240;
--fc-accent-hover: #1559d6;
--fc-accent-soft: rgba(29, 107, 240, .12);
/* Accent as TEXT on a light/dark surface (the flat accent is too light for
AA text on white). Overridden per-theme below. */
--fc-accent-text: #1a63d8;
/* Light palette (default). Dark overrides below. */
--fc-bg: #eef1f6; /* app backdrop / canvas surround */
--fc-surface: #ffffff; /* bars, panels, cards */
--fc-surface-2: #f4f6f9; /* inputs, insets */
--fc-surface-3: #e9edf3; /* hover / raised */
--fc-border: #dde3ec;
--fc-border-strong: #c8d2e0;
--fc-text: #1a2333;
--fc-muted: #566073; /* AA on white AND on the light inset surfaces */
--fc-header: #ffffff; /* title bar bg */
--fc-header-text: #1a2333; /* FABRICORE wordmark + title-bar text */
--fc-canvas: #0e1a2b; /* 3D canvas backdrop stays dark in both themes */
/* Status: fills/accents. Text-on-surface variants (--fc-*-text) are what
labels/chips use, tuned for AA on the current theme's surfaces. */
--fc-ok: #16a34a; --fc-warn: #d97706; --fc-err: #dc2626;
--fc-ok-text: #15803d; --fc-warn-text: #b45309; --fc-err-text: #c81e1e;
--fc-slideout-w: 380px;
--fc-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fc-density: 1;
--fc-shadow: 0 8px 28px rgba(15, 23, 42, .12);
}
/* ── Per-host accent + chrome ─────────────────────────────────────────────── */
:root[data-host="sketchup"] { --fc-accent:#005f9e; --fc-accent-rgb:0,95,158; --fc-accent-hover:#004a7c; }
:root[data-host="revit"] { --fc-accent:#0696d7; --fc-accent-rgb:6,150,215; --fc-accent-hover:#057cb3; }
:root[data-host="solidworks"]{--fc-accent:#e2231a; --fc-accent-rgb:226,35,26; --fc-accent-hover:#b71c15; }
:root[data-host="excel"] { --fc-accent:#217346; --fc-accent-rgb:33,115,70; --fc-accent-hover:#1a5c38; }
:root[data-host="tauri"] { --fc-accent:#3b5bdb; --fc-accent-rgb:59,91,219; --fc-accent-hover:#2f49af; }
/* Denser chrome on desktop CAD hosts; roomier on tablet. */
:root[data-host="capacitor"]{ --fc-density:1.15; --fc-slideout-w:100%; }
/* ── Dark theme (mockup-matched deep navy) ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--fc-bg:#081221; --fc-surface:#0f1d31; --fc-surface-2:#0a1626; --fc-surface-3:#16283f;
--fc-border:#1e3350; --fc-border-strong:#284368;
--fc-text:#e6edf6; --fc-muted:#93a4bd;
--fc-header:#0a1424; --fc-header-text:#eef3fa; --fc-canvas:#0b1524;
--fc-accent-text:#7fb0ff;
--fc-ok-text:#4ade80; --fc-warn-text:#fbbf24; --fc-err-text:#f87171;
--fc-shadow:0 10px 34px rgba(0,0,0,.5);
}
}
:root[data-theme="dark"] {
--fc-bg:#081221; --fc-surface:#0f1d31; --fc-surface-2:#0a1626; --fc-surface-3:#16283f;
--fc-border:#1e3350; --fc-border-strong:#284368;
--fc-text:#e6edf6; --fc-muted:#93a4bd;
--fc-header:#0a1424; --fc-header-text:#eef3fa; --fc-canvas:#0b1524;
--fc-accent-text:#7fb0ff;
--fc-ok-text:#4ade80; --fc-warn-text:#fbbf24; --fc-err-text:#f87171;
--fc-shadow:0 10px 34px rgba(0,0,0,.5);
}
/* Explicit light re-asserts the base palette (overrides OS dark). */
:root[data-theme="light"] {
--fc-bg:#eef1f6; --fc-surface:#ffffff; --fc-surface-2:#f4f6f9; --fc-surface-3:#e9edf3;
--fc-border:#dde3ec; --fc-border-strong:#c8d2e0;
--fc-text:#1a2333; --fc-muted:#566073;
--fc-header:#ffffff; --fc-header-text:#1a2333; --fc-canvas:#0e1a2b;
--fc-accent-text:#1a63d8;
--fc-ok-text:#15803d; --fc-warn-text:#b45309; --fc-err-text:#c81e1e;
--fc-shadow:0 8px 28px rgba(15,23,42,.12);
}
/* ── Map our accent onto Bootstrap's tokens (buttons/links/focus) ─────────── */
:root {
--bs-primary: var(--fc-accent);
--bs-primary-rgb: var(--fc-accent-rgb);
--bs-link-color: var(--fc-accent);
--bs-link-color-rgb: var(--fc-accent-rgb);
--bs-link-hover-color: var(--fc-accent-hover);
--bs-body-color: var(--fc-text);
--bs-body-bg: var(--fc-surface-2);
--bs-border-color: var(--fc-border);
--bs-font-sans-serif: var(--fc-font);
}
.btn-primary {
--bs-btn-bg: var(--fc-accent);
--bs-btn-border-color: var(--fc-accent);
--bs-btn-hover-bg: var(--fc-accent-hover);
--bs-btn-hover-border-color: var(--fc-accent-hover);
--bs-btn-active-bg: var(--fc-accent-hover);
--bs-btn-active-border-color: var(--fc-accent-hover);
--bs-btn-disabled-bg: var(--fc-accent);
--bs-btn-disabled-border-color: var(--fc-accent);
}
.btn-outline-primary {
--bs-btn-color: var(--fc-accent);
--bs-btn-border-color: var(--fc-accent);
--bs-btn-hover-bg: var(--fc-accent);
--bs-btn-hover-border-color: var(--fc-accent);
--bs-btn-active-bg: var(--fc-accent);
}
.text-primary { color: var(--fc-accent-text) !important; }
.bg-primary { background-color: var(--fc-accent) !important; }
/* Bootstrap's built-in muted/secondary greys are fixed and go low-contrast on
the dark theme — route them through our theme-aware muted token. */
.text-muted, .text-secondary, .text-body-secondary { color: var(--fc-muted) !important; }
.focus-ring, :focus-visible { --bs-focus-ring-color: rgba(var(--fc-accent-rgb), .35); }
body { background: var(--fc-bg); color: var(--fc-text); }
.card, .offcanvas, .modal-content { background: var(--fc-surface); color: var(--fc-text); border-color: var(--fc-border); }
/* ── Slide-out (right offcanvas) ──────────────────────────────────────────── */
.fc-slideout { width: var(--fc-slideout-w) !important; max-width: 100%; }
.fc-slideout .offcanvas-header { border-bottom: 1px solid var(--fc-border); }
.fc-brandmark {
width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
background: var(--fc-accent); color: #fff; font-weight: 700; letter-spacing: .5px;
}
.fc-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.fc-quick-grid .btn { text-align: left; font-size: .86rem; padding: .5rem .6rem; }
.fc-section-label {
font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--fc-muted); font-weight: 700; margin: 1rem 0 .4rem;
}
.fc-recent-item { cursor: pointer; border:1px solid var(--fc-border); border-radius:10px; }
.fc-recent-item:hover { border-color: var(--fc-accent); }
.fc-thumb { width:40px; height:40px; border-radius:8px; background:var(--fc-surface-2);
display:grid; place-items:center; color:var(--fc-muted); flex:0 0 auto; }
.fc-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.fc-status-dot.ok { background:#16a34a; } .fc-status-dot.warn { background:#d97706; }
.fc-status-dot.off { background:#9ca3af; }
/* Role badge */
.fc-role-badge { font-size:.7rem; border:1px solid var(--fc-border); border-radius:999px; padding:.05rem .5rem; color:var(--fc-muted); }
/* Launcher button on the host canvas */
.fc-launcher { position: fixed; top: 14px; right: 14px; z-index: 1045; }
/* Window modal sizing */
.modal.fc-window .modal-dialog.app-workspace { max-width: 96vw; }
.modal.fc-window .modal-dialog.app-workspace .modal-content { height: 92vh; }
.modal.fc-window .modal-body { max-height: 80vh; overflow: auto; }
.fc-loading { display:grid; place-items:center; padding:3rem; color:var(--fc-muted); }
/* ══ Mockup-matched slide-out ═══════════════════════════════════════════════ */
:root { --fc-panel-radius:10px; }
/* Floating panel, top-right, rounded on all corners (not edge-flush). */
.fc-panel {
position: fixed; top: 16px; right: 16px; z-index: 1046;
width: var(--fc-slideout-w); max-width: calc(100vw - 32px);
max-height: calc(100vh - 32px);
background: var(--fc-surface); color: var(--fc-text);
border: 1px solid var(--fc-border); border-radius: var(--fc-panel-radius);
box-shadow: 0 18px 48px rgba(15,23,42,.28);
display: flex; flex-direction: column; overflow: hidden;
}
.fc-panel.d-none { display: none !important; }
.fc-panel__header {
background: var(--fc-header); color: #fff;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px; flex: 0 0 auto;
}
.fc-panel__header .fc-logo {
width: 26px; height: 26px; border-radius: 7px; background: #fff2;
display: grid; place-items: center;
}
.fc-panel__header .title { font-weight: 600; font-size: .98rem; }
.fc-panel__winbtns { display: flex; gap: 4px; }
.fc-panel__winbtns button {
background: transparent; border: 0; color: #cbd5e1; width: 26px; height: 26px;
border-radius: 6px; display: grid; place-items: center; cursor: pointer;
}
.fc-panel__winbtns button:hover { background: #ffffff22; color: #fff; }
.fc-panel__body { overflow-y: auto; padding: 14px 16px 16px; }
.fc-hello { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-hello .name { font-weight: 700; font-size: 1rem; line-height: 1.15; }
.fc-hello .company { color: var(--fc-muted); font-size: .82rem; }
.fc-avatar {
width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
background: var(--fc-accent); color:#fff; display: grid; place-items: center;
font-weight: 700; font-size: .9rem;
}
.fc-rowlabel {
display:flex; align-items:center; justify-content:space-between;
font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
color: var(--fc-muted); font-weight: 700; margin: 16px 0 8px;
}
.fc-rowlabel a { font-size: .72rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.fc-divider { height:1px; background: var(--fc-border); margin: 14px -16px; }
/* Recent project rows */
.fc-proj { display:flex; align-items:center; gap:11px; padding:8px 6px; border-radius:10px; cursor:pointer; }
.fc-proj:hover { background: var(--fc-surface-2); }
.fc-proj .thumb {
width:42px; height:42px; border-radius:9px; background: var(--fc-surface-2);
border:1px solid var(--fc-border); display:grid; place-items:center;
color: var(--fc-muted); flex:0 0 auto;
}
.fc-proj .mid { flex:1 1 auto; min-width:0; }
.fc-proj .mid .pname { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-proj .mid .psub { color: var(--fc-muted); font-size:.76rem; }
.fc-proj .pstatus { font-size:.78rem; font-weight:600; white-space:nowrap; flex:0 0 auto; }
.pstatus.progress { color:#2563eb; } .pstatus.production { color:#16a34a; }
.pstatus.quoted { color:#d97706; } .pstatus.done { color:#8a94a3; }
/* Quick-action icon grid (4 columns) */
.fc-actions { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.fc-action {
border:1px solid var(--fc-border); border-radius:11px; background:var(--fc-surface);
padding:11px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:6px;
cursor:pointer; text-align:center; color:var(--fc-text);
}
.fc-action:hover { border-color: var(--fc-accent); background: var(--fc-surface-2); }
.fc-action .ico { color: var(--fc-accent); }
.fc-action .lbl { font-size:.68rem; line-height:1.1; color:var(--fc-text); }
/* Footer */
.fc-panel__footer {
border-top:1px solid var(--fc-border); padding:10px 16px; flex:0 0 auto;
display:flex; align-items:center; justify-content:space-between; font-size:.85rem;
}
.fc-panel__footer a, .fc-foot-item { color:var(--fc-text); text-decoration:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.fc-panel__footer .beta { font-size:.6rem; font-weight:700; color:#fff; background:var(--fc-accent); border-radius:5px; padding:1px 5px; }
.fc-launcher-fab {
position: fixed; top: 16px; right: 16px; z-index: 1045; width:44px; height:44px;
border-radius:12px; display:grid; place-items:center;
}
/* ══ Project Details window (mockup #1) ═════════════════════════════════════ */
.fc-detail { display:flex; min-height:420px; margin:-1rem; }
.fc-detail-nav {
flex:0 0 158px; background:var(--fc-surface-2); border-right:1px solid var(--fc-border);
padding:14px 10px; border-bottom-left-radius:.5rem;
}
.fc-detail-nav .nav-link {
color:var(--fc-text); font-size:.86rem; padding:.4rem .7rem; border-radius:8px; text-align:left;
}
.fc-detail-nav .nav-link.active { background:var(--fc-accent); color:#fff; }
.fc-detail-nav .nav-link:not(.active):hover { background:var(--fc-surface); }
.fc-detail-main { flex:1 1 auto; padding:18px 20px; min-width:0; }
.fc-detail-thumb {
width:132px; height:98px; border-radius:10px; background:var(--fc-surface-2);
border:1px solid var(--fc-border); display:grid; place-items:center; color:var(--fc-muted); flex:0 0 auto;
}
.fc-keydates li { display:flex; align-items:center; gap:8px; padding:2px 0; font-size:.84rem; }
.fc-keydates .tick { color:#16a34a; }
.fc-value-card { background:var(--fc-surface-2); border:1px solid var(--fc-border); border-radius:10px; padding:12px 14px; }
.fc-badge-soft { font-size:.7rem; border-radius:6px; padding:.12rem .5rem; background:rgba(var(--fc-accent-rgb),.12); color:var(--fc-accent); font-weight:600; }
/* ══ Production planner board (mockup #4) ═══════════════════════════════════ */
.fc-board { border:1px solid var(--fc-border); border-radius:10px; overflow:hidden; }
.fc-board-row { display:grid; grid-template-columns:150px repeat(5, 1fr); border-top:1px solid var(--fc-border); }
.fc-board-row:first-child { border-top:0; }
.fc-board-head { background:var(--fc-surface-2); font-weight:600; font-size:.8rem; }
.fc-board-res { padding:8px 10px; border-right:1px solid var(--fc-border); font-size:.84rem; display:flex; align-items:center; background:var(--fc-surface-2); }
.fc-board-cell { padding:5px; border-right:1px solid var(--fc-border); min-height:44px; }
.fc-board-cell:last-child { border-right:0; }
.fc-board-head .fc-board-cell { padding:8px; text-align:center; }
.fc-task { border-radius:6px; padding:4px 7px; font-size:.72rem; margin-bottom:4px; color:#1f2937; line-height:1.15; }
.fc-task .t-sub { opacity:.7; font-size:.66rem; }
/* ══ Reports donut (mockup #5) ══════════════════════════════════════════════ */
.fc-donut { width:150px; height:150px; border-radius:50%; flex:0 0 auto; }
.fc-legend li { display:flex; align-items:center; gap:8px; font-size:.85rem; padding:3px 0; }
.fc-legend .dot { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
/* ══ Configurator (mockup #2) ══════════════════════════════════════════════ */
.fc-stepper .step { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:.86rem; cursor:pointer; }
.fc-stepper .step.active { background:rgba(var(--fc-accent-rgb),.12); color:var(--fc-accent); font-weight:600; }
.fc-stepper .step .num { width:22px; height:22px; border-radius:50%; background:var(--fc-surface-2); border:1px solid var(--fc-border); display:grid; place-items:center; font-size:.72rem; }
.fc-stepper .step.active .num { background:var(--fc-accent); color:#fff; border-color:var(--fc-accent); }
.fc-preview { background:var(--fc-surface-2); border:1px solid var(--fc-border); border-radius:10px; min-height:280px; display:grid; place-items:center; }
/* ════════════════════════════════════════════════════════════════════════════
STANDALONE APP SHELL (title bar · main nav · toolbar · content · status bar)
Matches the Fabricore Studio desktop mockup. Light/dark via the tokens above.
════════════════════════════════════════════════════════════════════════════ */
.fc-app { height: 100vh; display: flex; flex-direction: column; overflow: hidden;
background: var(--fc-bg); color: var(--fc-text); }
.fc-app * { box-sizing: border-box; }
/* Row 1: title bar */
.fc-titlebar {
flex: 0 0 auto; height: 52px; display: flex; align-items: center; gap: 14px;
padding: 0 12px 0 16px; background: var(--fc-header); color: var(--fc-header-text);
border-bottom: 1px solid var(--fc-border);
}
.fc-titlebar .fc-brand { display: inline-flex; align-items: center; text-decoration: none;
color: var(--fc-header-text); }
.fc-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--fc-text); }
.fc-crumb .sep, .fc-crumb .muted, .fc-crumb .caret { color: var(--fc-muted); }
.fc-crumb .caret { font-size: .7rem; }
.fc-crumb .cur { font-weight: 600; }
.fc-search {
flex: 0 1 340px; margin: 0 auto; display: flex; align-items: center; gap: 8px;
height: var(--control-height-primary, 36px);
background: var(--fc-surface-2); border: 1px solid var(--fc-border); border-radius: var(--search-radius, 7px);
padding: 0 12px; color: var(--fc-muted); font-size: 13px; cursor: text; min-width: 160px;
}
.fc-search kbd { margin-left: auto; font-size: .68rem; background: var(--fc-surface-3);
border: 1px solid var(--fc-border); border-radius: 5px; padding: 1px 6px; color: var(--fc-muted); }
.fc-tb-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fc-iconbtn {
background: transparent; border: 1px solid transparent; color: var(--fc-text);
height: 32px; min-width: 32px; padding: 0 9px; border-radius: 6px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1;
}
.fc-iconbtn:hover { background: var(--fc-surface-2); }
.fc-iconbtn.solid { background: var(--fc-accent); border-color: var(--fc-accent); color: #fff; }
.fc-iconbtn.solid:hover { background: var(--fc-accent-hover); }
.fc-user { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px;
border-radius: 20px; cursor: pointer; }
.fc-user:hover { background: var(--fc-surface-2); }
.fc-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
background: var(--fc-accent); color: #fff; display: grid; place-items: center;
font-weight: 700; font-size: .78rem; overflow: hidden; }
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fc-user .nm { font-size: .84rem; font-weight: 600; }
.fc-winctl { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.fc-winctl button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--fc-muted);
border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.fc-winctl button:hover { background: var(--fc-surface-2); color: var(--fc-text); }
.fc-winctl button.close:hover { background: #e5484d; color: #fff; }
/* Row 2: main nav */
.fc-nav { flex: 0 0 auto; height: 46px; display: flex; align-items: stretch; gap: 2px;
padding: 0 8px; background: var(--fc-surface); border-bottom: 1px solid var(--fc-border); }
.fc-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 0 13px;
text-decoration: none; color: var(--fc-muted); font-size: .86rem; font-weight: 500;
border-bottom: 2px solid transparent; white-space: nowrap; }
.fc-nav a svg { width: 17px; height: 17px; }
.fc-nav a:hover { color: var(--fc-text); }
.fc-nav a.active { color: var(--fc-accent-text); border-bottom-color: var(--fc-accent); font-weight: 600; }
.fc-nav .spacer { flex: 1 1 auto; }
.fc-nav .fc-nav-right { display: inline-flex; align-items: center; gap: 4px; }
.fc-badge-count { background: #e5484d; color: #fff; font-size: .62rem; font-weight: 700;
border-radius: 9px; padding: 1px 5px; }
/* Theme toggle */
.fc-theme-toggle { background: transparent; border: 1px solid var(--fc-border); color: var(--fc-text);
width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.fc-theme-toggle:hover { background: var(--fc-surface-2); }
/* Row 3: section toolbar */
.fc-toolbar { flex: 0 0 auto; min-height: 52px; display: flex; align-items: center; gap: 8px;
padding: 6px 12px; background: var(--fc-surface); border-bottom: 1px solid var(--fc-border);
overflow-x: auto; }
.fc-tool { background: transparent; border: 1px solid transparent; color: var(--fc-text);
border-radius: 6px; padding: 6px 8px; min-width: 52px; cursor: pointer; font-size: .68rem;
display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; }
.fc-tool svg { width: 20px; height: 20px; }
.fc-tool:hover { background: var(--fc-surface-2); }
.fc-tool.active { background: var(--fc-accent-soft); color: var(--fc-accent); }
.fc-tool-sep { width: 1px; align-self: stretch; margin: 8px 6px; background: var(--fc-border); flex: 0 0 auto; }
/* Content */
.fc-content { flex: 1 1 auto; min-height: 0; overflow: auto; }
.fc-content.pad { padding: 22px 26px; }
/* Status bar */
.fc-statusbar { flex: 0 0 auto; height: 34px; display: flex; align-items: center; gap: 18px;
padding: 0 14px; background: var(--fc-header); border-top: 1px solid var(--fc-border);
font-size: .76rem; color: var(--fc-muted); }
.fc-statusbar b { color: var(--fc-text); font-weight: 600; }
.fc-statusbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.fc-statusbar .saved { color: var(--fc-ok-text); display: inline-flex; align-items: center; gap: 5px; }
/* Generic section furniture */
.fc-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
margin-bottom: 18px; flex-wrap: wrap; }
.fc-page-head h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.fc-page-head .sub { color: var(--fc-muted); font-size: .88rem; margin-top: 3px; }
.fc-panel-card { background: var(--fc-surface); border: 1px solid var(--fc-border);
border-radius: var(--panel-radius, 8px); box-shadow: var(--fc-shadow); }
.fc-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.fc-stat { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--panel-radius, 8px); padding: 14px 16px; }
.fc-stat .k { color: var(--fc-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fc-stat .v { font-size: 1.7rem; font-weight: 700; margin-top: 4px; }
.fc-stat .d { font-size: .78rem; margin-top: 2px; }
.fc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600;
border-radius: 20px; padding: 3px 10px; background: var(--fc-accent-soft); color: var(--fc-accent-text); }
.fc-chip.ok { background: rgba(22,163,74,.14); color: var(--fc-ok-text); }
.fc-chip.warn { background: rgba(217,119,6,.14); color: var(--fc-warn-text); }
.fc-chip.muted { background: var(--fc-surface-3); color: var(--fc-muted); }
/* Flat data table */
.fc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.fc-table thead th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--fc-muted); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--fc-border); }
.fc-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--fc-border); }
.fc-table tbody tr { cursor: pointer; }
.fc-table tbody tr:hover { background: var(--fc-surface-2); }
/* Inputs adopt the theme inside the shell */
.fc-app .form-control, .fc-app .form-select {
background: var(--fc-surface-2); border-color: var(--fc-border); color: var(--fc-text); }
.fc-app .form-control:focus, .fc-app .form-select:focus {
background: var(--fc-surface-2); color: var(--fc-text);
border-color: var(--fc-accent); box-shadow: 0 0 0 .2rem rgba(var(--fc-accent-rgb), .2); }
.fc-app .card, .fc-app .modal-content, .fc-app .offcanvas { background: var(--fc-surface); color: var(--fc-text); }
/* ══ Brand lockup (mark + FABRICORE STUDIO) — theme-swapping variants ═════════
`_wordmark.html variant='auto'` emits both images; CSS shows the one that
suits the active theme (dark-text on light, white-text on dark). Fixed
variants ('light'/'dark') emit a single image and are unaffected. */
.fc-lockup { display: block; }
.fc-lockup--dark { display: none; }
:root[data-theme="dark"] .fc-lockup--light { display: none; }
:root[data-theme="dark"] .fc-lockup--dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .fc-lockup--light { display: none; }
:root:not([data-theme="light"]) .fc-lockup--dark { display: block; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Product shell (.fcs-*) + Projects index (.fcp-*)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Typography ──────────────────────────────────────────────────────────
Inter Variable is THE interface face; Geist Mono is for technical values
and code-like information (project codes, quantities, ids). Vendored
locally — no CDN, so offline add-on shells keep working. */
@font-face {
font-family: 'Inter Variable';
src: url('fonts/InterVariable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Variable';
src: url('fonts/InterVariable-Italic.woff2') format('woff2');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url('fonts/GeistMono-Variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--fc-font: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--fc-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
/* Type scale (design spec) — use these, never ad-hoc sizes:
page titles 22 · modal/window titles 18 · section headings 16
normal UI/inputs/primary buttons 14 · tables + compact nav 13
labels/metadata/secondary 12 */
--fs-page: 22px;
--fs-window: 18px;
--fs-section: 16px;
--fs-ui: 14px;
--fs-table: 13px;
--fs-label: 12px;
/* Compact desktop control system (Microsoft 365 / Linear / CAD density).
Buttons, inputs and dropdowns use THESE — never 42-48px website sizing.
Larger controls are reserved for auth/onboarding and touch layouts. */
--control-height-compact: 32px;
--control-height-default: 34px;
--control-height-primary: 36px;
--control-radius: 6px;
--search-radius: 7px;
--panel-radius: 8px;
--modal-radius: 10px;
--control-font-size: 13px;
--control-icon-size: 14px;
--control-gap: 7px;
}
.fc-page-title { font-size:var(--fs-page); font-weight:700; }
body { font-family: var(--fc-font); }
/* Utility for any code-like value. */
.fc-mono { font-family: var(--fc-mono); }
/* Extra hue tokens for icon tiles / pills (theme-aware TEXT colours — the
flat rgba() fills below read fine on both themes). */
:root { --fc-purple-text:#7c3aed; --fc-indigo-text:#4c51bf; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --fc-purple-text:#c4b5fd; --fc-indigo-text:#a5b4fc; }
}
:root[data-theme="dark"] { --fc-purple-text:#c4b5fd; --fc-indigo-text:#a5b4fc; }
/* ── Top bar ─────────────────────────────────────────────────────────────── */
.fcs-app { min-height:100vh; display:flex; flex-direction:column; background:var(--fc-surface); color:var(--fc-text); font-family:var(--fc-font); }
/* The top bar is FIXED navy chrome (mockup) in both themes, so every colour
inside it is fixed-light — never the theme-adaptive text tokens. */
.fcs-topbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:10px; height:56px; padding:0 20px; background:#0b1a30; border-bottom:1px solid rgba(255,255,255,.08); }
.fcs-brand { display:inline-flex; margin-right:6px; }
.fcs-brand img { display:block; border-radius:8px; }
.fcs-nav { display:flex; align-self:stretch; gap:2px; }
.fcs-nav-item { position:relative; display:inline-flex; align-items:center; gap:8px; padding:0 16px; color:#93a4bd; font-size:var(--fs-ui); font-weight:600; text-decoration:none; }
.fcs-nav-item:hover { color:#fff; }
.fcs-nav-item.is-active { color:#fff; }
/* Underline hugs the label (mockup) — not the bottom edge of the bar. */
.fcs-nav-item.is-active::after { content:''; position:absolute; left:16px; right:16px; bottom:8px; height:2.5px; border-radius:2px; background:var(--fc-accent); }
.fcs-globalsearch { position:relative; margin-left:auto; width:min(400px,30vw); }
.fcs-globalsearch-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#566073; display:inline-flex; z-index:1; pointer-events:none; }
/* White pill on the navy chrome (mockup) — fixed colours, both themes. A
BUTTON that opens the global-search modal, styled like an input. */
.fcs-globalsearch-btn { display:flex; align-items:center; gap:8px; width:100%; height:var(--control-height-primary); border-radius:var(--search-radius); border:none; background:#fff; color:#566073; padding:0 8px 0 34px; font-size:var(--control-font-size); cursor:text; text-align:left; }
.fcs-globalsearch-btn .ph { flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fcs-globalsearch-btn kbd { flex:0 0 auto; font-family:var(--fc-mono); font-size:10px; color:#566073; background:#f4f6f9; border:1px solid #dde3ec; border-radius:4px; padding:2px 5px; }
.fcs-globalsearch-btn:hover { box-shadow:0 0 0 3px rgba(255,255,255,.15); }
.fcs-globalsearch-btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--fc-accent-soft); }
/* ── Global search modal (command palette) ───────────────────────────────── */
.fcg-dialog { max-width:560px; margin-top:8vh; }
.fcg-modal { overflow:hidden; }
.fcg-inputwrap { display:flex; align-items:center; gap:10px; padding:4px 14px; border-bottom:1px solid var(--fc-border); color:var(--fc-muted); }
.fcg-inputwrap input { flex:1 1 auto; height:44px; border:none; background:transparent; color:var(--fc-text); font-size:var(--fs-ui); }
.fcg-inputwrap input:focus { outline:none; }
.fcg-inputwrap input::placeholder { color:var(--fc-muted); }
.fcg-inputwrap kbd { font-family:var(--fc-mono); font-size:10px; color:var(--fc-muted); background:var(--fc-surface-2); border:1px solid var(--fc-border); border-radius:4px; padding:2px 5px; }
.fcg-results { max-height:min(420px, 55vh); overflow-y:auto; padding:8px; }
.fcg-hint { color:var(--fc-muted); font-size:var(--fs-table); padding:14px 10px; text-align:center; }
.fcg-group { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fc-muted); padding:10px 10px 4px; }
.fcg-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--control-radius); text-decoration:none; color:var(--fc-text); }
.fcg-row:hover, .fcg-row:focus-visible { background:var(--fc-surface-2); color:var(--fc-text); outline:none; }
.fcg-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fcg-name { font-size:var(--fs-table); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcg-sub { font-size:var(--fs-label); color:var(--fc-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcs-bell { position:relative; width:32px; height:32px; border:none; border-radius:var(--control-radius); background:transparent; color:#dbe4f0; display:grid; place-items:center; }
.fcs-bell:hover { background:rgba(255,255,255,.1); }
.fcs-bell-badge { position:absolute; top:-3px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--fc-accent); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; }
.fcs-avatar { border:none; background:transparent; display:flex; align-items:center; gap:4px; color:#8ba0bc; }
.fcs-avatar-circle { width:32px; height:32px; border-radius:50%; background:var(--fc-accent); color:#fff; font-weight:700; font-size:13px; display:grid; place-items:center; }
.fcs-menu-email { font-size:var(--fs-label); color:var(--fc-muted); }
.fcs-menu .dropdown-item { font-size:var(--fs-ui); }
.fcs-main { flex:1; display:flex; flex-direction:column; }
/* ── Projects layout ─────────────────────────────────────────────────────── */
.fcp-layout { display:flex; flex:1; align-items:stretch; }
.fcp-main { flex:1 1 auto; min-width:0; padding:26px 32px; }
.fcp-rail { width:360px; flex-shrink:0; border-left:1px solid var(--fc-border); padding:26px 24px; }
@media (max-width:1100px) { .fcp-rail { display:none; } }
/* Toolbar */
.fcp-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.fcp-search { position:relative; flex:1 1 240px; min-width:220px; }
.fcp-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--fc-muted); display:inline-flex; }
.fcp-search input { width:100%; height:var(--control-height-primary); border-radius:var(--search-radius); border:1px solid var(--fc-border); background:var(--fc-surface); color:var(--fc-text); padding:0 12px 0 36px; font-size:var(--control-font-size); }
.fcp-search input::placeholder { color:var(--fc-muted); }
.fcp-search input:focus { outline:none; border-color:var(--fc-accent); box-shadow:0 0 0 3px var(--fc-accent-soft); }
.fcp-select { display:inline-flex; align-items:center; gap:6px; height:var(--control-height-default); padding:0 4px 0 12px; border:1px solid var(--fc-border); border-radius:var(--control-radius); background:var(--fc-surface); color:var(--fc-muted); margin-bottom:0; }
.fcp-select select { border:none; background:transparent; color:var(--fc-text); font-weight:600; font-size:var(--control-font-size); padding-right:2px; }
.fcp-select select:focus { outline:none; }
.fcp-newbtn { display:inline-flex; align-items:center; gap:var(--control-gap); height:var(--control-height-primary); padding:0 14px; border:none; border-radius:var(--control-radius); background:var(--fc-accent); color:#fff; font-weight:600; font-size:var(--control-font-size); }
.fcp-newbtn:hover { background:var(--fc-accent-hover); }
/* Table — flat, full-bleed (never carded) */
.fcp-tablewrap { overflow-x:auto; }
.fcp-table { width:100%; min-width:820px; border-collapse:collapse; }
.fcp-table thead th { text-align:left; font-size:var(--fs-label); font-weight:600; color:var(--fc-muted); padding:10px 14px; border-bottom:1px solid var(--fc-border); white-space:nowrap; }
.fcp-table tbody td { padding:14px; border-bottom:1px solid var(--fc-border); vertical-align:middle; font-size:var(--fs-table); color:var(--fc-text); }
.fcp-table tbody tr:last-child td { border-bottom:none; }
.fcp-empty { text-align:center; color:var(--fc-muted); padding:44px 14px !important; }
.fcp-project { display:flex; align-items:center; gap:14px; }
.fcp-project-names { display:flex; flex-direction:column; gap:3px; min-width:0; }
.fcp-project-name { font-weight:600; font-size:var(--fs-ui); color:var(--fc-accent-text); text-decoration:none; }
.fcp-project-name:hover { text-decoration:underline; color:var(--fc-accent-text); }
.fcp-project-code { font-size:var(--fs-label); color:var(--fc-muted); font-family:var(--fc-mono); }
/* Icon tiles — soft fill + hue-matched glyph, same recipe both themes */
.fcp-tile { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; background:var(--fc-accent-soft); color:var(--fc-accent-text); }
.fcp-tile--sm { width:32px; height:32px; border-radius:8px; }
.fcp-tile[data-icon="stairs"], .fcp-tile[data-icon="quote"], .fcp-tile[data-icon="system"] { background:rgba(22,163,74,.12); color:var(--fc-ok-text); }
.fcp-tile[data-icon="door"], .fcp-tile[data-icon="production"] { background:rgba(217,119,6,.14); color:var(--fc-warn-text); }
.fcp-tile[data-icon="villa"] { background:rgba(124,58,237,.12); color:var(--fc-purple-text); }
.fcp-tile[data-icon="building"], .fcp-tile[data-icon="material"] { background:rgba(76,81,191,.12); color:var(--fc-indigo-text); }
.fcp-tile[data-icon="grid"] { background:var(--fc-surface-3); color:var(--fc-muted); }
/* Status pills */
/* Status pills are the ONE control that stays fully rounded. */
.fcp-pill { display:inline-block; min-height:22px; padding:3px 10px; border-radius:999px; font-size:var(--fs-label); font-weight:600; white-space:nowrap; }
.fcp-pill[data-status="in_production"] { background:rgba(217,119,6,.13); color:var(--fc-warn-text); }
.fcp-pill[data-status="planning"] { background:var(--fc-accent-soft); color:var(--fc-accent-text); }
.fcp-pill[data-status="design"] { background:rgba(124,58,237,.12); color:var(--fc-purple-text); }
.fcp-pill[data-status="completed"] { background:rgba(22,163,74,.13); color:var(--fc-ok-text); }
.fcp-pill[data-status="all"] { background:var(--fc-surface-3); color:var(--fc-muted); }
/* Progress */
.fcp-progress { display:flex; align-items:center; gap:10px; }
.fcp-progress-track { width:110px; height:8px; border-radius:4px; background:var(--fc-surface-3); overflow:hidden; }
.fcp-progress-fill { display:block; height:100%; border-radius:4px; background:var(--fc-accent); }
.fcp-progress-track.is-done .fcp-progress-fill { background:var(--fc-ok); }
.fcp-progress-track.is-behind .fcp-progress-fill { background:var(--fc-warn); }
.fcp-progress-num { font-size:var(--fs-table); font-family:var(--fc-mono); }
/* Dates / updated / actions */
.fcp-datecell { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.fcp-datecell svg, .fcp-datecell i, .fcp-datecell .svg-inline--fa { color:var(--fc-muted); }
.fcp-empty-icon { display:inline-block; margin-bottom:10px; color:var(--fc-accent-text); }
.fcp-cell-updated .fcp-datecell { color:var(--fc-muted); }
.fcp-done { display:inline-flex; align-items:center; gap:6px; color:var(--fc-ok-text); font-weight:600; white-space:nowrap; }
.fcp-kebab { width:30px; height:30px; border:none; border-radius:var(--control-radius); background:transparent; color:var(--fc-muted); display:grid; place-items:center; }
.fcp-kebab:hover { background:var(--fc-surface-2); color:var(--fc-text); }
/* Activity rail */
.fcp-rail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.fcp-rail-head h2 { font-size:var(--fs-section); font-weight:700; margin:0; }
.fcp-rail-link { font-size:var(--fs-table); font-weight:600; color:var(--fc-accent-text); text-decoration:none; }
.fcp-rail-link:hover { text-decoration:underline; color:var(--fc-accent-text); }
.fcp-activity { list-style:none; margin:0; padding:0; }
.fcp-activity-item { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--fc-border); }
.fcp-activity-item:last-child { border-bottom:none; }
.fcp-activity-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.fcp-activity-title { font-weight:600; font-size:var(--fs-table); }
.fcp-activity-sub { font-size:var(--fs-label); color:var(--fc-muted); }
.fcp-activity-time { color:var(--fc-muted); font-size:var(--fs-label); white-space:nowrap; padding-top:3px; }
.fcp-activity-empty { color:var(--fc-muted); font-size:var(--fs-table); padding:14px 0; }
/* Empty placeholder pages (sections not built yet) */
.fcx-empty-page { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:60px 24px; text-align:center; }
.fcx-empty-page .fcx-empty-icon { color:var(--fc-accent-text); margin-bottom:6px; }
.fcx-empty-page h1 { font-size:var(--fs-page); font-weight:700; margin:0; }
.fcx-empty-page p { color:var(--fc-muted); font-size:var(--fs-ui); max-width:420px; margin:0; }
/* Modal polish + type scale (18px title, 13px controls, 12px labels) */
.fcp-modal { border:1px solid var(--fc-border); border-radius:var(--modal-radius); }
.fcp-modal .modal-title { font-size:var(--fs-window); font-weight:700; }
.fcp-modal .form-label { font-size:var(--fs-label); font-weight:600; color:var(--fc-muted); }
/* ══ Compact desktop controls (Bootstrap buttons/inputs inside app pages) ════
Scoped to product shells + app pages (.fc-page = slim _page.html frame).
Auth, onboarding and marketing keep their own larger touch-friendly styles. */
.fcs-app .btn, .fc-app .btn, .fc-page .btn, .fcp-modal .btn {
display:inline-flex; align-items:center; justify-content:center;
min-height:var(--control-height-default);
padding:3px 12px; border-radius:var(--control-radius);
font-size:var(--control-font-size); font-weight:600;
gap:var(--control-gap); line-height:1.2;
}
.fcs-app .btn-primary, .fc-app .btn-primary, .fc-page .btn-primary, .fcp-modal .btn-primary {
min-height:var(--control-height-primary); padding:3px 14px;
}
.fcs-app .btn svg, .fc-app .btn svg, .fc-page .btn svg, .fcp-modal .btn svg {
width:var(--control-icon-size); height:var(--control-icon-size);
}
.fcs-app .form-control, .fc-app .form-control, .fc-page .form-control,
.fcs-app .form-select, .fc-app .form-select, .fc-page .form-select {
min-height:var(--control-height-primary);
padding:5px 10px; border-radius:var(--control-radius);
font-size:var(--control-font-size);
}
.fcs-app .form-select, .fc-app .form-select, .fc-page .form-select {
padding-right:32px; /* keep room for the caret glyph */
}
.fcs-app .modal-content, .fc-app .modal-content, .fc-page .modal-content {
border-radius:var(--modal-radius);
}
/* Bootstrap badges inside app pages follow the pill spec. */
.fcs-app .badge, .fc-app .badge, .fc-page .badge {
border-radius:999px; font-size:11px; font-weight:600; padding:4px 9px;
}