/* ===================================================================================== * Table Layout V2 — landing page styles. * * Self-contained: defines its own token root under .tlv2-home so the page can render * even when design.css isn't scoped to this tree. Tokens mirror the prototype * (/table-layout/index.html) so the look is consistent with the editor. * Prefix: .tlv2- (shared with editor). * ===================================================================================== */ /* Neutralize any padding/margin the posistApp shell puts on the ui-view host (#main1) while this state is active. Ensures our page sits flush under the browser viewport with no gray band above the topnav. */ body.tlv2-home-active { margin: 0 !important; padding: 0 !important; } body.tlv2-home-active #main1 { margin: 0 !important; padding: 0 !important; } .tlv2-home { /* Tokens lifted verbatim from the prototype (table-layout/index.html lines 12-20). ⚠ MIRRORED: these token VALUES are hand-copied onto .tlv2-modal-window in library/decorLibrary.css (loaded app-wide) because AngularUI $modal teleports dialogs to , outside this .tlv2-home scope. If you change a value here, update that mirror too or teleported modals render unstyled. (The editor's .tlv2-dlg in design.css mirrors the SEPARATE .tlv2-app palette — not this one.) */ --bg-body: #F1F2F5; --bg-surface: #FFFFFF; --bg-input: #F7F8FA; --border: #E7EAEE; --border-strong: #DEE2E7; --text-primary: #373C44; --text-secondary: #6A6F77; --text-muted: #6A737E; --text-faint: #BABFC8; --accent: #4185F4; --accent-dark: #2C6BD9; --accent-light: rgba(65, 133, 244, 0.08); --green: #10B48F; --green-bg: rgba(16, 180, 143, 0.10); --danger: #FF6F92; --danger-bg: rgba(255, 111, 146, 0.08); --shadow-sm: 0 1px 2px rgba(20, 28, 44, 0.04), 0 1px 3px rgba(20, 28, 44, 0.04); --shadow-md: 0 4px 12px rgba(20, 28, 44, 0.06), 0 2px 4px rgba(20, 28, 44, 0.04); display: flex; flex-direction: column; min-height: 100vh; background: var(--bg-body); font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ----- Topnav ----- */ .tlv2-topnav { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 60px; background: var(--bg-surface); border-bottom: 1px solid var(--border); flex-shrink: 0; } .tlv2-topnav-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 8px; flex-shrink: 0; transition: background 0.12s, color 0.12s; } .tlv2-topnav-back:hover { background: var(--bg-input); color: var(--text-primary); } .tlv2-topnav-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tlv2-topnav-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } /* Brand mark tile: holds the Corbi logo. Neutral background so the asset reads cleanly without competing with surrounding chrome. */ .tlv2-topnav-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: #FFFFFF; border: 1px solid #E2E5EA; border-radius: 8px; overflow: hidden; padding: 4px; box-sizing: border-box; } .tlv2-topnav-logo { display: block; width: 100%; height: 100%; object-fit: contain; } .tlv2-topnav-titleblock { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .tlv2-topnav-title { font-size: 15px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.3px; white-space: nowrap; } .tlv2-topnav-subtitle { font-size: 11.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; letter-spacing: 0; } .tlv2-title-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); flex-shrink: 0; } .tlv2-topnav-spacer { flex: 1; } /* ----- Button system ----- */ .tlv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-surface); font-size: 12px; font-weight: 700; font-family: inherit; color: var(--text-secondary); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; white-space: nowrap; } .tlv2-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-primary); } .tlv2-btn:active:not(:disabled) { transform: scale(0.98); } .tlv2-btn:disabled { opacity: 0.45; cursor: not-allowed; } .tlv2-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tlv2-btn.tlv2-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .tlv2-btn.tlv2-btn-primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } .tlv2-btn.tlv2-btn-subtle { background: transparent; border-color: transparent; color: var(--text-secondary); } .tlv2-btn.tlv2-btn-subtle:hover:not(:disabled) { background: var(--danger-bg); border-color: transparent; color: var(--danger); } /* ----- Page grid ----- */ .tlv2-home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; padding: 24px; flex: 1; } @media (max-width: 1100px) { .tlv2-home-grid { gap: 16px; padding: 20px; } } @media (max-width: 980px) { .tlv2-home-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .tlv2-home-grid { padding: 16px; gap: 14px; } .tlv2-home-card-head { padding: 16px 18px 10px; } .tlv2-home-card-body { padding: 12px 18px 18px; } .tlv2-topnav { padding: 0 16px; gap: 12px; height: 56px; } .tlv2-topnav-subtitle { display: none; } } /* ----- Card ----- */ .tlv2-home-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 320px; overflow: hidden; } .tlv2-home-card-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--border); } .tlv2-home-card-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .tlv2-home-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.2px; } .tlv2-count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--bg-input); color: var(--text-secondary); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .tlv2-home-card-sub { margin: 0; font-size: 12px; color: var(--text-muted); font-weight: 500; line-height: 1.5; } .tlv2-home-card-body { padding: 16px 24px 24px; overflow-y: auto; flex: 1; } /* ----- Empty state ----- */ .tlv2-home-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 20px; color: var(--text-muted); text-align: center; } .tlv2-home-empty-icon { color: var(--accent); opacity: 0.8; margin-bottom: 4px; } .tlv2-home-empty p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; } /* ----- Floor design list ----- */ .tlv2-design-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tlv2-design-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; } .tlv2-design-item:hover { border-color: var(--accent); background: var(--bg-surface); box-shadow: 0 0 0 3px var(--accent-light); } .tlv2-design-meta { min-width: 0; flex: 1; } .tlv2-design-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .tlv2-design-desc { font-size: 12px; color: var(--text-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tlv2-design-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 999px; background: var(--accent-light); color: var(--accent); text-transform: uppercase; } .tlv2-design-pill-ok { background: var(--green-bg); color: var(--green); } .tlv2-design-actions { display: flex; gap: 6px; flex-shrink: 0; } .tlv2-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--text-secondary); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; } .tlv2-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .tlv2-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tlv2-icon-btn-danger { padding: 0 9px; } .tlv2-icon-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); } /* ----- Tabs table ----- */ .tlv2-tabs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .tlv2-tabs-table thead th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: transparent; } .tlv2-tabs-table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tlv2-tabs-table tbody tr:last-child td { border-bottom: none; } .tlv2-tabs-table tbody tr:hover td { background: var(--bg-input); } .tlv2-tab-name { font-weight: 700; color: var(--text-primary); } .tlv2-tab-details { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .tlv2-tab-select { width: 100%; max-width: 280px; height: 36px; padding: 0 32px 0 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-surface); font-size: 12.5px; font-weight: 600; color: var(--text-primary); font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238891A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.12s, box-shadow 0.12s; } .tlv2-tab-select:hover { border-color: var(--border-strong); } .tlv2-tab-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .tlv2-tab-select:disabled { opacity: 0.5; cursor: not-allowed; } .tlv2-tab-saving { display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent); margin-left: 8px; } /* ===================================================================================== Modal — scoped via windowClass so we don't inherit posistApp/Bootstrap styles. Tokens are redeclared here because the modal DOM is portal'd to , outside .tlv2-home. ===================================================================================== */ .tlv2-modal-backdrop.modal-backdrop { background: rgba(15, 22, 36, 0.55); opacity: 1; } .tlv2-modal-window .modal-dialog { width: 460px; max-width: calc(100vw - 32px); margin: 8vh auto; animation: tlv2-modal-in 0.22s cubic-bezier(0.32, 0.72, 0, 1) both; } .tlv2-modal-window .modal-content { border: none; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 22, 36, 0.22), 0 2px 6px rgba(15, 22, 36, 0.08); background: transparent; overflow: visible; } .tlv2-modal-backdrop.modal-backdrop { animation: tlv2-backdrop-in 0.18s ease-out both; } @keyframes tlv2-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes tlv2-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tlv2-modal-window .modal-dialog, .tlv2-modal-backdrop.modal-backdrop { animation: none; } } /* ===================================================================================== Per-tab floor-design list (state: tableLayoutV2Home) — redesigned ----------------------------------------------------------------------------- Three regions: topnav (shared), context band (tab switcher), page body (hero + grid). Every card has one status chip, one visual thumb, and a clear action footer. Active floors get a green thumb wash — no competing double-encoding. Tokens reuse the .tlv2-home palette declared above. ===================================================================================== */ body.tlv2-home-active { background: #F4F6F9; } .tlv2-fl { /* Canonical TLV2 palette tokens — must match .tlv2-app + .tlv2-rt-shell. */ --bg-body: #F5F6F8; /* --rw-bg */ --bg-surface: #FFFFFF; /* --rw-white */ --bg-input: #F8FAFC; /* --rw-surface */ --border: #E2E5EA; /* --rw-border */ --border-strong: #CBD5E1; /* slate-300 */ --text-primary: #1F2937; /* --rw-text */ --text-secondary: #475569; /* slate-600 */ --text-muted: #6B7280; /* --rw-text-light */ --text-faint: #94A3B8; /* slate-400 */ --accent: #4185F4; /* canonical TLV2 accent */ --accent-dark: #2C6BD9; --accent-light: rgba(65, 133, 244, 0.10); --primary: #4185F4; /* alias of accent */ --primary-dark: #2C6BD9; --primary-light: #EEF3FF; --green: #16a34a; /* --rw-green */ --green-bg: rgba(22, 163, 74, 0.10); --green-border: rgba(22, 163, 74, 0.32); --danger: #dc2626; /* --rw-danger */ --danger-bg: #fee2e2; --danger-border: rgba(220, 38, 38, 0.32); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); min-height: 100vh; background: var(--bg-body); } /* ── Context band: tab switcher ─────────────────────────────── */ .tlv2-fl-context { position: sticky; top: 0; z-index: 2; background: var(--bg-surface); border-bottom: 1px solid var(--border); } .tlv2-fl-context-inner { max-width: 1500px; margin: 0 auto; padding: 8px 32px; display: flex; align-items: center; gap: 16px; min-height: 56px; } .tlv2-fl-context-label { flex: none; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } .tlv2-fl-tabs { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; /* Single non-wrapping row that scrolls horizontally; the rail's chevrons + edge fades (below) drive overflow. Native scrollbar hidden. */ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ padding: 0; } .tlv2-fl-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Underline-style tab: flat + grey at rest; active = accent text + accent underline. */ .tlv2-fl-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 14px; background: transparent; border: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 0 transparent; /* underline rail; coloured below */ transition: color 0.14s, box-shadow 0.14s; letter-spacing: -0.1px; } .tlv2-fl-tab-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; transition: color 0.14s; } .tlv2-fl-tab:hover { color: var(--text-primary); box-shadow: inset 0 -2px 0 0 var(--border); /* faint hover underline */ } .tlv2-fl-tab:hover .tlv2-fl-tab-icon { color: var(--text-muted); } .tlv2-fl-tab.is-active { color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 0 var(--accent); } .tlv2-fl-tab.is-active .tlv2-fl-tab-icon { color: var(--accent); } .tlv2-fl-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; } /* Status dot: this tab has an active V2 floor design mapped. */ .tlv2-fl-tab-status { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--bg-surface); flex-shrink: 0; } /* ── Tab rail: scroll viewport + chevron buttons + edge fades ──────────── */ .tlv2-fl-tabrail { position: relative; flex: 1; min-width: 0; display: flex; align-items: stretch; } /* Edge fades — shown only when scrollable that way (toggled by tlv2-tab-rail). */ .tlv2-fl-tabrail::before, .tlv2-fl-tabrail::after { content: ''; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.14s; } .tlv2-fl-tabrail::before { left: 0; background: linear-gradient(90deg, #FFFFFF 28%, rgba(255, 255, 255, 0)); } .tlv2-fl-tabrail::after { right: 0; background: linear-gradient(270deg, #FFFFFF 28%, rgba(255, 255, 255, 0)); } .tlv2-fl-tabrail.can-scroll-left::before { opacity: 1; } .tlv2-fl-tabrail.can-scroll-right::after { opacity: 1; } /* Chevron scroll buttons — float over each edge, fade in only when scrollable. */ .tlv2-fl-scrollbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); opacity: 0; pointer-events: none; transition: opacity 0.14s, background 0.12s, color 0.12s, box-shadow 0.12s; } .tlv2-fl-scrollbtn-left { left: -2px; } .tlv2-fl-scrollbtn-right { right: -2px; } .tlv2-fl-scrollbtn:hover { background: var(--bg-body); color: var(--text-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); } .tlv2-fl-scrollbtn:active { transform: translateY(-50%) scale(0.92); } .tlv2-fl-tabrail.can-scroll-left .tlv2-fl-scrollbtn-left { opacity: 1; pointer-events: auto; } .tlv2-fl-tabrail.can-scroll-right .tlv2-fl-scrollbtn-right { opacity: 1; pointer-events: auto; } /* ── Body ────────────────────────────────────────────────────── */ .tlv2-fl-body { max-width: none; margin: 0; /* Tighter top padding — the tab strip above already gives breathing room. The previous 32 px + the hero's 24 px top-padding together dropped the "Floor designs" title nearly 60 px below the tabs. */ padding: 12px 32px 80px; width: 100%; box-sizing: border-box; } /* Inner content column — capped at 1500 px so we never put more than 4 cards in a row (4 × 360 + 3 × 20-gap = 1500). Wider viewports center the column with intentional empty bands rather than tiling 5-6 cards across. Header / grid / list / help strip all share this anchor, so left-edge alignment is identical across regions. */ .tlv2-fl-container { max-width: 1500px; margin: 0 auto; width: 100%; } /* Outer empty — no tabs on the whole deployment */ .tlv2-fl-empty-center { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 32px; } .tlv2-fl-empty-card { max-width: 480px; padding: 40px 32px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; text-align: center; box-shadow: var(--shadow-sm); } .tlv2-fl-empty-card .tlv2-fl-empty-illus { margin-bottom: 12px; } /* ── Hero header ─────────────────────────────────────────────── */ .tlv2-fl-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; /* No top padding — the body wrapper above provides the breathing room. Bottom padding kept so the divider has air before the cards. */ padding: 4px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .tlv2-fl-hero-text { flex: 1; min-width: 0; } .tlv2-fl-hero-actions { flex: none; } .tlv2-fl-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .tlv2-fl-hero-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.2; } .tlv2-fl-hero-help { margin: 0 0 6px; max-width: 640px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); font-weight: 500; } .tlv2-fl-hero-help-accent { color: var(--green); font-weight: 700; } .tlv2-fl-hero-sub { margin: 0; max-width: 640px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); font-weight: 500; } .tlv2-fl-hero-sub-strong { color: var(--text-secondary); font-weight: 600; } .tlv2-fl-hero-sub-accent { color: var(--green); font-weight: 700; } .tlv2-fl-hero-sub-muted { color: var(--text-muted); font-style: italic; } .tlv2-fl-hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: 8px; background: var(--primary); border: 1px solid var(--primary); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.14s, box-shadow 0.14s, transform 0.12s; white-space: nowrap; } .tlv2-fl-hero-cta:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-md); } .tlv2-fl-hero-cta:active:not(:disabled) { transform: translateY(1px); } .tlv2-fl-hero-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tlv2-fl-hero-cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* View-mode toggle (Cards / List) — segmented control */ .tlv2-fl-viewtoggle { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); padding: 2px; height: 36px; margin-right: 8px; } .tlv2-fl-viewtoggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; background: transparent; border: none; color: var(--text-muted); border-radius: 6px; cursor: pointer; transition: background 0.12s, color 0.12s; } .tlv2-fl-viewtoggle-btn:hover { color: var(--text-primary); background: var(--bg-input); } .tlv2-fl-viewtoggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tlv2-fl-viewtoggle-btn.is-active { background: var(--primary); color: #fff; } .tlv2-fl-viewtoggle-btn.is-active:hover { background: var(--primary-dark); color: #fff; } .tlv2-fl-hero-actions { display: flex; align-items: center; gap: 0; } /* ── Error banner ────────────────────────────────────────────── */ .tlv2-fl-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; background: var(--danger-bg); border: 1px solid rgba(255, 111, 146, 0.28); color: var(--text-primary); } .tlv2-fl-banner-error > svg { color: var(--danger); flex-shrink: 0; } .tlv2-fl-banner-text { flex: 1; font-size: 13px; line-height: 1.45; } .tlv2-fl-banner-text strong { font-weight: 700; margin-right: 4px; } .tlv2-fl-banner-retry { flex: none; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--danger); background: #fff; color: var(--danger); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.12s; } .tlv2-fl-banner-retry:hover { background: var(--danger-bg); } .tlv2-fl-banner-retry:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; } /* ── Empty state (in-tab) ────────────────────────────────────── */ .tlv2-fl-empty { padding: 64px 24px 72px; text-align: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); } .tlv2-fl-empty-illus { color: var(--accent); margin-bottom: 20px; display: inline-flex; } .tlv2-fl-empty-title { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.015em; } .tlv2-fl-empty-sub { margin: 0 auto 24px; max-width: 460px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; } .tlv2-fl-empty-cta { min-width: 220px; } /* ── Grid ────────────────────────────────────────────────────── */ .tlv2-fl-grid { display: grid; /* Cells run 260–300 px so cards feel a touch roomier (was 220–260). min 260 px keeps content readable; auto-fill yields ~4-5 cards per row at a 1500 px container, scaling down naturally on narrower viewports. */ grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); gap: 16px; justify-content: start; } /* When only one design exists, restructure the lone card horizontally so the wide canvas doesn't feel half-empty. Preview anchors the left ~60 %; meta and actions stack vertically on the right ~40 %. Reverts to vertical card layout on narrow viewports via the media query at the file end. */ .tlv2-fl-grid--single { grid-template-columns: minmax(0, 1fr); } .tlv2-fl-grid--single > .tlv2-fl-card { max-width: none; } /* Side panel sits on the LEFT (capped at 320 px max), preview area fills the right side. Layout: [Main / stats / Edited / Open] | [dot-grid preview]. Active card's 2-px navy left rail (set on the card itself elsewhere) anchors to the side-panel edge, so the active signal sits next to the title. */ .tlv2-fl-grid--single .tlv2-fl-card { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 260px; } .tlv2-fl-grid--single .tlv2-fl-card-thumb { grid-row: 1 / span 2; grid-column: 2; height: auto; min-height: 260px; border-bottom: none; border-left: 1px solid var(--border); } .tlv2-fl-grid--single .tlv2-fl-card-body { grid-column: 1; grid-row: 1; padding: 20px 20px 16px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; } .tlv2-fl-grid--single .tlv2-fl-card-title { font-size: 17px; letter-spacing: -0.01em; white-space: normal; margin: 0 0 2px; } .tlv2-fl-grid--single .tlv2-fl-card-desc { font-size: 13px; margin: 2px 0 6px; -webkit-line-clamp: 4; min-height: 0; } .tlv2-fl-grid--single .tlv2-fl-card-meta { margin-top: 12px; padding-top: 0; border-top: none; /* stats strip already provides the visual separator */ } /* Hero stat + supporting metrics — visual hierarchy. The big number is the focal point of the card body; the smaller subtotals sit as context below. .tlv2-fl-card-statblock fills remaining vertical space (flex: 1) and centers the hero stat so the layout breathes around it. */ .tlv2-fl-card-statblock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; flex: 1; min-height: 0; margin: 14px 0 0; padding: 14px; background: var(--bg-input); border-radius: 12px; transition: background 0.14s; } .tlv2-fl-card:hover .tlv2-fl-card-statblock { background: var(--primary-light); } /* Hero — the focal "X tables" stat */ .tlv2-fl-card-hero { display: flex; flex-direction: column; align-items: center; line-height: 1; } .tlv2-fl-card-hero-num { font-size: 42px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .tlv2-fl-card-hero-label { margin-top: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; } /* Supporting stats row — compact "1 zone · 5 decor" context line */ .tlv2-fl-card-substats { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--text-muted); font-weight: 500; } .tlv2-fl-substat strong { color: var(--text-secondary); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 2px; } .tlv2-fl-substat-sep { color: var(--text-faint); font-weight: 700; } /* Footer: full-width primary + tight kebab. No more "Open" floating in 600 px of empty space across from a kebab on the far right. */ .tlv2-fl-grid--single .tlv2-fl-card-foot { grid-column: 1; grid-row: 2; border-top: 1px solid var(--border); padding: 12px 20px 14px; background: var(--bg-surface); display: flex; align-items: stretch; gap: 8px; } .tlv2-fl-grid--single .tlv2-fl-card-foot .tlv2-fl-foot-btn-primary { flex: 1; height: 40px; padding: 0 16px; font-size: 13px; justify-content: center; } .tlv2-fl-grid--single .tlv2-fl-card-foot .tlv2-fl-foot-btn-secondary, .tlv2-fl-grid--single .tlv2-fl-card-foot .tlv2-fl-foot-btn-danger { height: 40px; padding: 0 14px; font-size: 13px; } .tlv2-fl-grid--single .tlv2-fl-card-foot .tlv2-fl-menu-wrap { margin-left: 0; } .tlv2-fl-grid--single .tlv2-fl-card-foot .tlv2-fl-foot-btn-icon { width: 40px; height: 40px; margin-left: 0; } .tlv2-fl-grid--single .tlv2-fl-card-thumb-chip { top: 14px; right: 14px; } /* ── Card ────────────────────────────────────────────────────── */ .tlv2-fl-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; /* Square card. aspect-ratio sets intrinsic 1:1; if content ever overflows (long description, growing stats), the card grows beyond square instead of clipping. Common case: title + stats + meta + footer fits inside ~360 px × 360 px with comfortable whitespace. */ aspect-ratio: 1 / 1; /* overflow visible so the kebab menu can pop below the card without being clipped. The body/footer get explicit corner radii below to keep the rounded card silhouette intact. */ overflow: visible; cursor: pointer; display: flex; flex-direction: column; transition: border-color 0.14s, box-shadow 0.16s, transform 0.16s; box-shadow: var(--shadow-sm); outline: none; position: relative; } .tlv2-fl-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .tlv2-fl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Active card — 2 px green left rail (inset box-shadow). Matches the green active-radio dot in the card header so the active signal reads as one consistent colour across the row + the rail. */ .tlv2-fl-card.is-active { border-color: var(--border); box-shadow: inset 2px 0 0 0 var(--green), var(--shadow-sm); } .tlv2-fl-card.is-active:hover { box-shadow: inset 2px 0 0 0 var(--green), var(--shadow-md); } /* Thumb — neutral surface with a faint dot grid placeholder. Has explicit top border-radius so the card's rounded corners stay intact even though the card itself is overflow:visible (so the kebab menu can pop without being clipped). */ .tlv2-fl-card-thumb { position: relative; height: 80px; background-color: var(--bg-body); background-image: radial-gradient(circle, rgba(31, 41, 55, 0.08) 1px, transparent 1.4px); background-size: 14px 14px; background-position: 7px 7px; border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; overflow: hidden; } /* When the SVG canvas renders, kill the dot-grid so we don't show a pattern leaking through letterbox bands. SVG sits on a clean light surface. */ .tlv2-fl-card-thumb.has-canvas { background-image: none; background-color: var(--bg-input); } /* Real mini-canvas SVG — fills the thumb, preserving aspect ratio. */ .tlv2-fl-canvas-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .tlv2-fl-canvas-zone { fill: rgba(79, 106, 232, 0.10); /* primary-tinted room block */ stroke: rgba(79, 106, 232, 0.32); stroke-width: 3; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; } .tlv2-fl-canvas-table { fill: #FFFFFF; stroke: #475569; /* slate-600 — subtle, not harsh */ stroke-width: 2; vector-effect: non-scaling-stroke; } .tlv2-fl-canvas-deco { fill: rgba(107, 114, 128, 0.32); stroke: rgba(107, 114, 128, 0.48); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* "Empty canvas" hint when single-mode loaded zero tables — replaces the bare dot grid with explicit microcopy + glyph so the user knows what the area is. */ .tlv2-fl-canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-size: 13px; font-weight: 500; text-align: center; padding: 16px; } .tlv2-fl-canvas-empty svg { color: var(--text-faint); } .tlv2-fl-card-thumb-chip { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--bg-surface); color: var(--green); border: 1px solid var(--green-border); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* Body — top of the card now (no thumb above). Flex column. */ .tlv2-fl-card-body { padding: 14px 14px 12px; flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 14px 14px 0 0; } /* Edit-date row sits directly below the stats now (no auto-margin pin) — the stats grid is what fills the body height. */ .tlv2-fl-card-body .tlv2-fl-card-meta { margin-top: 12px; } /* Title row — name on the left, Active chip pinned to the right when present. Visually pairs the active state with the title it qualifies. */ .tlv2-fl-card-headrow { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; /* Whole header row is the activate trigger — radio + name share one hit area. stopPropagation in ng-click prevents the card-level openFloor handler from also firing. */ cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: -4px -6px 4px; transition: background-color 0.14s; } .tlv2-fl-card-headrow:hover { background: rgba(16, 180, 143, 0.08); } /* Active row: clicking is a no-op (setActive returns early) — drop the pointer cursor + hover so the row stops looking interactive. */ .tlv2-fl-card-headrow.is-active-row { cursor: default; } .tlv2-fl-card-headrow.is-active-row:hover { background: transparent; } .tlv2-fl-card-headrow .tlv2-fl-card-title { flex: 1; } .tlv2-fl-card-headrow .tlv2-fl-chip-active { margin-left: auto; } /* ── Active radio ────────────────────────────────────────────── */ .tlv2-fl-radio { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; } .tlv2-fl-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .tlv2-fl-radio input:disabled { cursor: default; } .tlv2-fl-radio-dot { display: block; width: 22px; height: 22px; border-radius: 999px; background: var(--bg-surface); border: 2px solid var(--border-strong); transition: border-color 0.14s, background 0.14s, box-shadow 0.14s; } .tlv2-fl-radio:hover .tlv2-fl-radio-dot { border-color: var(--green); } .tlv2-fl-radio input:focus-visible + .tlv2-fl-radio-dot { box-shadow: 0 0 0 3px rgba(16, 180, 143, 0.22); } .tlv2-fl-radio input:checked + .tlv2-fl-radio-dot { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 6px, transparent 6.5px), var(--bg-surface); } .tlv2-fl-radio-inline { margin-right: 8px; vertical-align: middle; } .tlv2-fl-card-title { margin: 0; flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Inline Active chip (replaces the old thumbnail chip). */ .tlv2-fl-chip-active { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; } .tlv2-fl-card-desc { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 18px; /* reserve a single line so cards w/ and w/o desc align */ min-height: 18px; } .tlv2-fl-card-meta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); font-weight: 500; text-align: center; } .tlv2-fl-card-meta-item { display: inline-flex; align-items: center; gap: 5px; } .tlv2-fl-card-meta-item svg { opacity: 0.7; } .tlv2-fl-card-meta-item-muted { font-style: italic; } /* Footer — Open button takes the row, kebab sits flush at the right. Single-surface card: footer bg matches body (no two-tone split). Bottom corners radiused explicitly since the parent card is overflow:visible. */ .tlv2-fl-card-foot { display: flex; align-items: stretch; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--border); background: var(--bg-surface); border-radius: 0 0 14px 14px; } .tlv2-fl-foot-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s; } .tlv2-fl-foot-btn:hover:not(:disabled) { color: var(--accent); border-color: rgba(65, 133, 244, 0.38); background: var(--accent-light); } .tlv2-fl-foot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .tlv2-fl-foot-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .tlv2-fl-foot-btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } .tlv2-fl-foot-btn-secondary { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border); } .tlv2-fl-foot-btn-secondary:hover:not(:disabled) { color: var(--accent); border-color: rgba(65, 133, 244, 0.38); background: var(--accent-light); } .tlv2-fl-foot-btn-danger { background: var(--bg-surface); color: #c0392b; border-color: var(--border); } .tlv2-fl-foot-btn-danger:hover:not(:disabled) { color: #b01a1a; border-color: rgba(192, 57, 43, 0.38); background: rgba(192, 57, 43, 0.08); } .tlv2-fl-foot-btn:disabled { opacity: 0.55; cursor: not-allowed; } .tlv2-fl-foot-btn-icon { width: 34px; padding: 0; justify-content: center; margin-left: 0; flex-shrink: 0; } /* Standard-grid card footer: Open fills, Edit + Delete sit compact to its right. */ .tlv2-fl-card-foot .tlv2-fl-foot-btn-primary { flex: 1; justify-content: center; height: 34px; } .tlv2-fl-card-foot .tlv2-fl-foot-btn-secondary, .tlv2-fl-card-foot .tlv2-fl-foot-btn-danger { height: 34px; flex-shrink: 0; } .tlv2-fl-card-foot .tlv2-fl-menu-wrap { margin-left: 0; flex-shrink: 0; } /* ── Card overflow menu (kebab) ─────────────────────────────── */ .tlv2-fl-menu-wrap { position: relative; margin-left: auto; display: inline-flex; } /* ── List view ──────────────────────────────────────────────── */ .tlv2-fl-listwrap { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; } .tlv2-fl-listtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .tlv2-fl-listtable thead th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-body); } .tlv2-fl-listtable tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-secondary); } .tlv2-fl-listtable tbody tr:last-child td { border-bottom: none; } .tlv2-fl-listrow:hover td { background: var(--bg-body); } .tlv2-fl-listrow.is-active td:first-child { box-shadow: inset 3px 0 0 0 var(--green); } .tlv2-fl-listcell-name { width: 36%; } .tlv2-fl-listcol-status { width: 14%; } .tlv2-fl-listcol-edited { width: 22%; } .tlv2-fl-listcol-actions { width: 28%; text-align: right; } .tlv2-fl-listcell-actions { text-align: right; white-space: nowrap; position: relative; } .tlv2-fl-listcell-actions > * { vertical-align: middle; } .tlv2-fl-listcell-actions .tlv2-fl-foot-btn { display: inline-flex; } .tlv2-fl-listcell-actions .tlv2-fl-menu-wrap { margin-left: 6px; } .tlv2-fl-listcell-namebtn { background: none; border: none; padding: 0; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer; text-align: left; letter-spacing: -0.01em; } .tlv2-fl-listcell-namebtn:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .tlv2-fl-listcell-namebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .tlv2-fl-listcell-edited { color: var(--text-secondary); } .tlv2-fl-listcell-muted { color: var(--text-muted); font-style: italic; } .tlv2-fl-list-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } .tlv2-fl-list-chip-muted { color: var(--text-faint); } /* ── "+ New" affordance tile — tertiary, small ───────────────── */ .tlv2-fl-card-add { display: flex; align-items: center; gap: 14px; padding: 20px; min-height: 148px; background: transparent; border: 1.5px dashed var(--border-strong); border-radius: 14px; color: var(--text-secondary); font-family: inherit; cursor: pointer; text-align: left; transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.14s; } .tlv2-fl-card-add:hover:not(:disabled) { background: var(--accent-light); border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .tlv2-fl-card-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tlv2-fl-card-add:disabled { opacity: 0.5; cursor: not-allowed; } .tlv2-fl-card-add-icon { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--bg-surface); border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; } .tlv2-fl-card-add-body { min-width: 0; } .tlv2-fl-card-add-title { font-size: 14px; font-weight: 700; color: inherit; margin-bottom: 2px; } .tlv2-fl-card-add-sub { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* ── Loading skeleton ────────────────────────────────────────── */ .tlv2-fl-card-skeleton { pointer-events: none; cursor: default; } .tlv2-fl-card-skeleton:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); } .tlv2-fl-skel { background: linear-gradient(90deg, #EDEFF2 0%, #F6F7F9 50%, #EDEFF2 100%); background-size: 200% 100%; animation: tlv2-fl-shimmer 1.4s linear infinite; border-radius: 6px; } .tlv2-fl-skel-line { height: 12px; width: 100%; } .tlv2-fl-card-thumb.tlv2-fl-skel { height: 80px; border-radius: 0; } @keyframes tlv2-fl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .tlv2-fl-skel { animation: none; } } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 900px) { .tlv2-fl-body { padding: 10px 20px 64px; } .tlv2-fl-context-inner { padding: 0 20px; } .tlv2-fl-hero { flex-direction: column; gap: 16px; padding-top: 4px; } .tlv2-fl-hero-actions { padding-top: 0; } .tlv2-fl-hero-title { font-size: 24px; } } @media (max-width: 900px) { /* Single-card horizontal split collapses to vertical at narrow widths */ .tlv2-fl-grid--single .tlv2-fl-card { display: flex; flex-direction: column; min-height: 0; } .tlv2-fl-grid--single .tlv2-fl-card-thumb { height: 180px; min-height: 0; border-right: none; border-bottom: 1px solid var(--border); } .tlv2-fl-grid--single .tlv2-fl-card-body { padding: 18px 18px 12px; } .tlv2-fl-grid--single .tlv2-fl-card-foot { padding: 10px 12px; } } @media (max-width: 640px) { .tlv2-fl-body { padding: 8px 16px 48px; } .tlv2-fl-context-inner { padding: 8px 16px; } .tlv2-fl-grid { grid-template-columns: 1fr; gap: 14px; } }