html {
scroll-behavior: smooth;
transition: background 0.3s ease;
}
:root {
--app-shell-rail-collapsed: 5.75rem;
--app-shell-rail-expanded: 16rem;
/* Brand */
--color-accent: #ef6f2a;
--color-accent-hover: #d95f1e;
--color-accent-muted: rgba(239, 111, 42, 0.12);
/* Light mode surfaces */
--color-bg-page: #f8f7f5;
--color-bg-surface: #ffffff;
--color-bg-surface-raised: #ffffff;
--color-bg-subtle: #f2f0ed;
--color-border: #e5e2dd;
--color-border-strong: #ccc9c3;
--color-text-primary: #1a1917;
--color-text-secondary: #6b6862;
--color-text-muted: #a09c97;
--color-success: #1a7f45;
--color-success-muted: #e8f5ee;
--color-warning: #92580a;
--color-warning-muted: #fef3e2;
--color-danger: #a33030;
--color-danger-muted: #fdeaea;
--color-info: #2b5fbd;
--color-info-muted: #e8f0fe;
--app-page-bg: var(--color-bg-page);
--app-page-text: var(--color-text-primary);
--app-page-muted: var(--color-text-secondary);
--app-shell-bg: var(--color-bg-page);
--app-shell-overlay: none;
--app-panel-bg: var(--color-bg-surface);
--app-panel-border: var(--color-border);
--app-rail-bg: var(--color-bg-surface);
--app-rail-border: var(--color-border);
--app-shell-header-bg: var(--color-bg-surface);
--app-shell-header-border: var(--color-border);
--app-shell-header-shadow: none;
--app-card-bg: var(--color-bg-surface);
--app-card-border: var(--color-border);
--app-strong-bg: var(--color-bg-surface-raised);
--app-strong-border: var(--color-border);
--app-strong-text: var(--color-text-primary);
--app-toggle-bg: var(--color-bg-surface);
--app-toggle-border: var(--color-border);
--app-toggle-text: var(--color-text-secondary);
--app-deal-soft-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
--app-deal-soft-panel-border: rgba(226, 232, 240, 0.94);
--app-deal-soft-panel-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
--app-deal-soft-panel-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98));
--app-deal-stat-bg: rgba(255, 255, 255, 0.82);
--app-deal-stat-border: rgba(226, 232, 240, 0.78);
--app-deal-pill-bg: rgba(15, 23, 42, 0.08);
--app-deal-pill-border: rgba(148, 163, 184, 0.24);
--app-deal-pill-text: #475569;
--app-deal-empty-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.84));
--app-deal-empty-border: rgba(203, 213, 225, 0.94);
--app-deal-summary-bg: linear-gradient(180deg, rgba(255, 250, 247, 0.98), rgba(255, 255, 255, 0.96));
--app-deal-summary-border: rgba(226, 232, 240, 0.92);
--app-deal-summary-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
--app-deal-summary-item-bg: rgba(255, 255, 255, 0.3);
--app-deal-summary-separator: rgba(226, 232, 240, 0.9);
--app-deal-summary-icon-bg: linear-gradient(180deg, rgba(255, 243, 236, 1), rgba(255, 233, 217, 0.98));
--app-deal-summary-icon-ring: #ffe2d2;
--app-deal-summary-icon-text: #de5b15;
--app-deal-board-workspace-bg: transparent;
--app-deal-board-workspace-border: transparent;
--app-deal-board-workspace-shadow: none;
--app-deal-board-shell-bg: transparent;
--app-deal-board-shell-border: transparent;
--app-deal-board-shell-shadow: none;
--app-deal-board-column-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97));
--app-deal-board-column-border: rgba(203, 213, 225, 0.94);
--app-deal-board-column-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
--app-user-badge-bg: #0f172a;
--app-user-badge-text: #ffffff;
--app-shell-brand-badge-text: #000000;
--app-shell-logout-text: #000000;
--app-shell-logout-border: #000000;
--app-input-bg: rgba(255, 255, 255, 0.92);
--app-input-border: rgba(203, 213, 225, 0.95);
--app-input-text: #0f172a;
--app-input-placeholder: #94a3b8;
--app-checkbox-bg: rgba(255, 255, 255, 0.96);
--app-checkbox-border: rgba(148, 163, 184, 0.95);
--app-checkbox-checked-bg: #ef6f2a;
--app-checkbox-checked-border: #ef6f2a;
--app-checkbox-focus-ring: rgba(239, 111, 42, 0.22);
--app-message-bg: #ecfdf5;
--app-message-border: #a7f3d0;
--app-message-text: #047857;
--app-error-bg: #fff1f2;
--app-error-border: #fecdd3;
--app-error-text: #be185d;
--app-brand-button-text: #0f172a;
--app-settings-tab-text: #0f172a;
--app-feature-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
--app-feature-card-border: rgba(226, 232, 240, 0.95);
--app-feature-card-shadow: 0 24px 56px rgba(15, 23, 42, 0.08);
--app-feature-card-text: #0f172a;
--app-feature-card-muted: #475569;
--app-feature-card-chip-bg: rgba(248, 250, 252, 0.92);
--app-feature-card-chip-border: rgba(203, 213, 225, 0.9);
--app-feature-card-chip-text: #334155;
--app-feature-card-button-secondary-bg: rgba(255, 255, 255, 0.92);
--app-feature-card-button-secondary-border: rgba(203, 213, 225, 0.95);
--app-feature-card-button-secondary-text: #0f172a;
--app-project-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
--app-project-card-border: rgba(226, 232, 240, 0.95);
--app-project-card-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
--app-project-card-hover-shadow: 0 28px 58px rgba(15, 23, 42, 0.12);
--app-project-card-text: #0f172a;
--app-project-card-muted: #475569;
--app-project-card-subtle-text: #64748b;
--app-project-card-section-bg: rgba(255, 255, 255, 0.82);
--app-project-card-section-border: rgba(226, 232, 240, 0.88);
--app-project-card-action-bg: rgba(239, 111, 42, 0.08);
--app-project-card-action-border: rgba(239, 111, 42, 0.24);
--app-project-card-action-text: #c2410c;
}
html.dark,
html[data-theme="dark"] {
--color-bg-page: #0f0f0e;
--color-bg-surface: #1a1917;
--color-bg-surface-raised: #232220;
--color-bg-subtle: #252422;
--color-border: #2e2c2a;
--color-border-strong: #3d3b38;
--color-text-primary: #f5f3f0;
--color-text-secondary: #a09c97;
--color-text-muted: #6b6862;
--color-success: #88d1a8;
--color-success-muted: rgba(26, 127, 69, 0.18);
--color-warning: #f2c678;
--color-warning-muted: rgba(146, 88, 10, 0.22);
--color-danger: #ef9a9a;
--color-danger-muted: rgba(163, 48, 48, 0.22);
--color-info: #9fbdf5;
--color-info-muted: rgba(43, 95, 189, 0.22);
--app-page-bg: var(--color-bg-page);
--app-page-text: var(--color-text-primary);
--app-page-muted: var(--color-text-secondary);
--app-shell-bg: var(--color-bg-page);
--app-shell-overlay: none;
--app-panel-bg: var(--color-bg-surface);
--app-panel-border: var(--color-border);
--app-rail-bg: var(--color-bg-surface);
--app-rail-border: var(--color-border);
--app-shell-header-bg: var(--color-bg-surface);
--app-shell-header-border: var(--color-border);
--app-shell-header-shadow: none;
--app-card-bg: var(--color-bg-surface);
--app-card-border: var(--color-border);
--app-strong-bg: var(--color-bg-surface-raised);
--app-strong-border: var(--color-border);
--app-strong-text: var(--color-text-primary);
--app-toggle-bg: var(--color-bg-surface-raised);
--app-toggle-border: var(--color-border-strong);
--app-toggle-text: var(--color-text-secondary);
--app-deal-soft-panel-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
--app-deal-soft-panel-border: rgba(51, 65, 85, 0.9);
--app-deal-soft-panel-shadow: 0 22px 42px rgba(2, 6, 23, 0.28);
--app-deal-soft-panel-hover-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.92));
--app-deal-stat-bg: rgba(15, 23, 42, 0.82);
--app-deal-stat-border: rgba(51, 65, 85, 0.84);
--app-deal-pill-bg: rgba(255, 255, 255, 0.08);
--app-deal-pill-border: rgba(148, 163, 184, 0.16);
--app-deal-pill-text: #e2e8f0;
--app-deal-empty-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.78));
--app-deal-empty-border: rgba(51, 65, 85, 0.84);
--app-deal-summary-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.82));
--app-deal-summary-border: rgba(51, 65, 85, 0.88);
--app-deal-summary-shadow: 0 18px 36px rgba(2, 6, 23, 0.24);
--app-deal-summary-item-bg: rgba(15, 23, 42, 0.22);
--app-deal-summary-separator: rgba(51, 65, 85, 0.82);
--app-deal-summary-icon-bg: linear-gradient(180deg, rgba(95, 45, 22, 0.95), rgba(60, 31, 16, 0.9));
--app-deal-summary-icon-ring: rgba(239, 111, 42, 0.2);
--app-deal-summary-icon-text: #ffedd5;
--app-deal-board-workspace-bg: rgba(2, 6, 23, 0.78);
--app-deal-board-workspace-border: rgba(15, 23, 42, 0.95);
--app-deal-board-workspace-shadow: 0 24px 48px rgba(2, 6, 23, 0.24);
--app-deal-board-shell-bg: rgba(2, 6, 23, 0.34);
--app-deal-board-shell-border: rgba(51, 65, 85, 0.42);
--app-deal-board-shell-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
--app-deal-board-column-bg: rgba(15, 23, 42, 0.9);
--app-deal-board-column-border: #1e293b;
--app-deal-board-column-shadow: 0 20px 36px rgba(2, 6, 23, 0.26);
--app-user-badge-bg: #ffffff;
--app-user-badge-text: #020617;
--app-shell-brand-badge-text: #ffffff;
--app-shell-logout-text: #ffffff;
--app-shell-logout-border: #ffffff;
--app-input-bg: rgba(2, 6, 23, 0.82);
--app-input-border: rgba(30, 41, 59, 0.95);
--app-input-text: #f8fafc;
--app-input-placeholder: #64748b;
--app-checkbox-bg: rgba(2, 6, 23, 0.92);
--app-checkbox-border: rgba(71, 85, 105, 0.96);
--app-checkbox-checked-bg: #ef6f2a;
--app-checkbox-checked-border: #ef6f2a;
--app-checkbox-focus-ring: rgba(251, 146, 60, 0.28);
--app-message-bg: rgba(16, 185, 129, 0.10);
--app-message-border: rgba(16, 185, 129, 0.28);
--app-message-text: #bbf7d0;
--app-error-bg: rgba(244, 63, 94, 0.10);
--app-error-border: rgba(244, 63, 94, 0.28);
--app-error-text: #fecdd3;
--app-brand-button-text: #0f172a;
--app-settings-tab-text: #ffffff;
--app-feature-card-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94));
--app-feature-card-border: rgba(51, 65, 85, 0.92);
--app-feature-card-shadow: 0 28px 64px rgba(2, 6, 23, 0.34);
--app-feature-card-text: #f8fafc;
--app-feature-card-muted: #cbd5e1;
--app-feature-card-chip-bg: rgba(15, 23, 42, 0.82);
--app-feature-card-chip-border: rgba(71, 85, 105, 0.82);
--app-feature-card-chip-text: #e2e8f0;
--app-feature-card-button-secondary-bg: rgba(15, 23, 42, 0.9);
--app-feature-card-button-secondary-border: rgba(71, 85, 105, 0.9);
--app-feature-card-button-secondary-text: #f8fafc;
--app-project-card-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.96));
--app-project-card-border: rgba(51, 65, 85, 0.9);
--app-project-card-shadow: 0 24px 50px rgba(2, 6, 23, 0.42);
--app-project-card-hover-shadow: 0 34px 66px rgba(2, 6, 23, 0.52);
--app-project-card-text: #f8fafc;
--app-project-card-muted: #e2e8f0;
--app-project-card-subtle-text: #94a3b8;
--app-project-card-section-bg: rgba(15, 23, 42, 0.86);
--app-project-card-section-border: rgba(51, 65, 85, 0.82);
--app-project-card-action-bg: rgba(239, 111, 42, 0.14);
--app-project-card-action-border: rgba(251, 146, 60, 0.34);
--app-project-card-action-text: #fdba74;
}
body {
font-family: "Segoe UI", sans-serif;
background: var(--app-page-bg);
color: var(--app-page-text);
transition: background 0.3s ease, color 0.3s ease;
}
.app-page {
background: var(--app-page-bg) !important;
color: var(--app-page-text) !important;
}
.app-theme-root {
background: var(--app-shell-bg) !important;
color: var(--app-page-text) !important;
}
.app-shell-main,
.app-shell-stack {
min-width: 0;
}
.app-shell-main {
padding-top: 0 !important;
transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), max-width 320ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.app-shell-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--app-shell-header-bg) !important;
border-color: var(--app-shell-header-border) !important;
box-shadow: var(--app-shell-header-shadow) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--color-border) !important;
margin: -1rem -1rem 0;
margin-top: 0 !important;
min-height: 56px;
padding: 0 1rem;
backdrop-filter: blur(12px);
transition: border-radius 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.app-shell-pageblock {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
}
.app-shell-pageblock__eyebrow {
line-height: 1;
}
.app-shell-pageblock__title {
line-height: 1.15;
overflow-wrap: anywhere;
}
.app-theme-overlay {
background-image: var(--app-shell-overlay) !important;
}
.app-theme-panel {
background: var(--app-panel-bg) !important;
border-color: var(--app-panel-border) !important;
color: var(--app-page-text) !important;
}
.app-theme-rail {
background: var(--app-rail-bg) !important;
border-color: var(--app-rail-border) !important;
}
.app-theme-card {
background: var(--app-card-bg) !important;
border-color: var(--app-card-border) !important;
color: var(--app-page-text) !important;
}
.app-theme-strong-panel {
background: var(--app-strong-bg) !important;
border-color: var(--app-strong-border) !important;
color: var(--app-strong-text) !important;
}
.app-theme-toggle {
background: var(--app-toggle-bg) !important;
border-color: var(--app-toggle-border) !important;
color: var(--app-toggle-text) !important;
}
.shell-rail-theme-toggle,
.shell-mobile-theme-toggle {
position: relative;
height: 40px;
width: 40px;
flex: 0 0 auto;
border-color: var(--app-toggle-border) !important;
background: var(--app-toggle-bg) !important;
color: var(--app-toggle-text) !important;
border-radius: 10px !important;
box-shadow: none;
}
.shell-rail-theme-toggle:hover,
.shell-mobile-theme-toggle:hover {
border-color: var(--color-border-strong) !important;
color: var(--color-accent) !important;
}
.shell-rail-brand-toggle:hover {
transform: translateY(calc(-50% - 1px));
}
.shell-mobile-theme-toggle:hover {
transform: translateY(-1px);
}
html[data-theme="dark"] .shell-rail-theme-toggle:hover,
html[data-theme="dark"] .shell-mobile-theme-toggle:hover {
color: var(--color-accent) !important;
}
.shell-theme-icon-wrap {
position: relative;
display: inline-flex;
height: 1.2rem;
width: 1.2rem;
align-items: center;
justify-content: center;
}
.shell-theme-icon {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.8) rotate(-12deg);
transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}
.shell-theme-icon--moon {
opacity: 1;
transform: scale(1) rotate(0deg);
color: var(--color-text-secondary);
}
.shell-theme-icon--sun {
color: var(--color-accent);
}
html[data-theme="dark"] .shell-theme-icon--moon {
opacity: 0;
transform: scale(0.8) rotate(12deg);
}
html[data-theme="dark"] .shell-theme-icon--sun {
opacity: 1;
transform: scale(1) rotate(0deg);
color: var(--color-accent);
}
.app-theme-user-badge {
background: var(--app-user-badge-bg) !important;
color: var(--app-user-badge-text) !important;
}
.app-shell-brand-badge {
color: var(--app-shell-brand-badge-text) !important;
}
.app-shell-logout-button {
background: var(--color-accent) !important;
border-color: var(--app-shell-logout-border) !important;
color: var(--app-shell-logout-text) !important;
}
.app-shell-logout-button:hover {
background: var(--color-accent-hover) !important;
border-color: var(--app-shell-logout-border) !important;
color: var(--app-shell-logout-text) !important;
}
.app-theme-muted {
color: var(--app-page-muted) !important;
}
.app-theme-message {
background: var(--app-message-bg) !important;
border-color: var(--app-message-border) !important;
color: var(--app-message-text) !important;
}
.app-theme-error {
background: var(--app-error-bg) !important;
border-color: var(--app-error-border) !important;
color: var(--app-error-text) !important;
}
.app-brand-button {
background: var(--color-accent) !important;
color: var(--app-brand-button-text) !important;
}
.app-brand-button:hover {
background: var(--color-accent-hover) !important;
color: var(--app-brand-button-text) !important;
}
.app-brand-button:focus-visible {
outline: 2px solid rgba(239, 111, 42, 0.35);
outline-offset: 2px;
}
.app-settings-tab-active {
background: var(--color-accent) !important;
border-color: var(--color-accent) !important;
color: var(--app-settings-tab-text) !important;
}
.app-settings-tab-active:hover {
background: var(--color-accent-hover) !important;
border-color: var(--color-accent-hover) !important;
color: var(--app-settings-tab-text) !important;
}
.app-settings-tab-idle {
background: #ffffff !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.app-settings-tab-idle:hover {
background: rgba(255, 243, 236, 0.88) !important;
border-color: #fdba74 !important;
color: #b84810 !important;
}
html.dark .app-settings-tab-idle,
html[data-theme="dark"] .app-settings-tab-idle {
background: rgba(15, 23, 42, 0.9) !important;
border-color: #1e293b !important;
color: #cbd5e1 !important;
box-shadow: none;
}
html.dark .app-settings-tab-idle:hover,
html[data-theme="dark"] .app-settings-tab-idle:hover {
background: rgba(30, 41, 59, 0.96) !important;
border-color: rgba(239, 111, 42, 0.35) !important;
color: #ffffff !important;
}
.app-form-control {
background: var(--app-input-bg) !important;
border-color: var(--app-input-border) !important;
color: var(--app-input-text) !important;
}
.app-form-control::placeholder {
color: var(--app-input-placeholder) !important;
}
.app-form-check {
appearance: none;
-webkit-appearance: none;
display: inline-block;
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
border-radius: 0.375rem;
cursor: pointer;
vertical-align: middle;
background-color: var(--app-checkbox-bg) !important;
border: 1px solid var(--app-checkbox-border) !important;
background-position: center;
background-repeat: no-repeat;
background-size: 0.78rem 0.78rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(15, 23, 42, 0.12);
}
.app-form-check:hover {
border-color: rgba(239, 111, 42, 0.42) !important;
}
.app-form-check:checked,
.app-form-check:indeterminate {
background-color: var(--app-checkbox-checked-bg) !important;
border-color: var(--app-checkbox-checked-border) !important;
}
.app-form-check:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.25 8.5 6.5 11.75 12.75 4.75' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3C/svg%3E");
}
.app-form-check:indeterminate {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-width='2.2'/%3E%3C/svg%3E");
}
.app-form-check:focus,
.app-form-check:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--app-checkbox-focus-ring);
}
.app-form-check:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* === Components === */
@keyframes bos-fade-up {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bos-animate {
animation: bos-fade-up 0.3s ease backwards;
}
.bos-animate-d1 {
animation-delay: 0.05s;
}
.bos-animate-d2 {
animation-delay: 0.10s;
}
.bos-animate-d3 {
animation-delay: 0.15s;
}
.bos-animate-d4 {
animation-delay: 0.20s;
}
.bos-card {
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 20px 24px;
color: var(--color-text-primary);
transition: box-shadow 0.2s, transform 0.2s;
}
.bos-card-hover:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.bos-stat-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.bos-btn-primary,
.bos-btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
text-decoration: none;
}
.bos-btn-primary {
background: var(--color-accent);
color: #fff;
border: none;
border-radius: 10px;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.bos-btn-primary:hover {
background: var(--color-accent-hover);
}
.bos-btn-primary:active {
transform: scale(0.97);
}
.bos-btn-ghost {
background: transparent;
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bos-btn-ghost:hover {
background: var(--color-bg-subtle);
border-color: var(--color-border-strong);
}
.bos-btn-ghost:active {
transform: scale(0.97);
}
.bos-btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
border: 1px solid rgba(163, 48, 48, 0.2);
border-radius: 10px;
background: #fdeaea;
color: #a33030;
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bos-btn-danger:hover {
background: rgba(163, 48, 48, 0.12);
border-color: rgba(163, 48, 48, 0.32);
}
.bos-btn-danger:active {
transform: scale(0.97);
}
.bos-btn-danger:disabled {
cursor: not-allowed;
opacity: 0.45;
}
html[data-theme="dark"] .bos-btn-danger {
border-color: rgba(163, 48, 48, 0.34);
background: rgba(163, 48, 48, 0.16);
color: #fdeaea;
}
html[data-theme="dark"] .bos-btn-danger:hover {
background: rgba(163, 48, 48, 0.24);
border-color: rgba(239, 154, 154, 0.42);
}
.bos-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.bos-icon-button:hover {
background: var(--color-bg-subtle);
border-color: var(--color-border-strong);
color: var(--color-text-primary);
}
.bos-icon-button:active {
transform: scale(0.97);
}
.bos-badge {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
padding: 2px 10px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
.bos-badge-green {
background: var(--color-success-muted);
color: var(--color-success);
}
.bos-badge-amber {
background: var(--color-warning-muted);
color: var(--color-warning);
}
.bos-badge-red {
background: var(--color-danger-muted);
color: var(--color-danger);
}
.bos-badge-orange {
background: rgba(239, 111, 42, 0.12);
color: #ef6f2a;
}
.bos-badge-blue {
background: var(--color-info-muted);
color: var(--color-info);
}
html[data-theme="dark"] .bos-badge-green {
background: rgba(26, 127, 69, 0.18);
color: #88d1a8;
}
html[data-theme="dark"] .bos-badge-amber {
background: rgba(146, 88, 10, 0.22);
color: #f2c678;
}
html[data-theme="dark"] .bos-badge-red {
background: rgba(163, 48, 48, 0.22);
color: #ef9a9a;
}
html[data-theme="dark"] .bos-badge-orange {
background: rgba(239, 111, 42, 0.18);
color: #ffb58f;
}
html[data-theme="dark"] .bos-badge-blue {
background: rgba(43, 95, 189, 0.22);
color: #9fbdf5;
}
.bos-section-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin-bottom: 12px;
}
.bos-divider {
border: none;
border-top: 1px solid var(--color-border);
margin: 0;
}
.bos-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.bos-nav-item:hover {
background: var(--color-bg-subtle);
color: var(--color-text-primary);
}
.bos-nav-item.active {
background: var(--color-accent-muted);
color: var(--color-accent);
}
.bos-page-title {
color: var(--color-text-primary);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.bos-section-heading {
color: var(--color-text-primary);
font-size: 1rem;
font-weight: 600;
}
.bos-card-title {
color: var(--color-text-primary);
font-size: 0.9375rem;
font-weight: 600;
}
.bos-meta,
.bos-body {
color: var(--color-text-secondary);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.6;
}
.bos-meta {
font-size: 0.8125rem;
}
.bos-dashboard {
display: grid;
gap: 24px;
}
.bos-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.bos-stat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.bos-stat-icon,
.bos-mini-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: var(--color-accent-muted);
color: var(--color-accent);
}
.bos-stat-icon {
width: 40px;
height: 40px;
border-radius: 50%;
}
.bos-mini-icon {
width: 32px;
height: 32px;
border-radius: 10px;
}
.bos-stat-label {
color: var(--color-text-secondary);
font-size: 0.8125rem;
}
.bos-stat-number {
display: flex;
align-items: baseline;
gap: 4px;
color: var(--color-text-primary);
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.bos-dashboard-main {
display: grid;
grid-template-columns: minmax(0, 65fr) minmax(280px, 35fr);
gap: 24px;
align-items: start;
}
.bos-progress-list,
.bos-quick-list,
.bos-table-list {
display: grid;
gap: 12px;
}
.bos-progress-row,
.bos-quick-link,
.bos-table-row {
border-radius: 10px;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bos-progress-row {
display: grid;
gap: 12px;
padding: 12px;
border: 1px solid var(--color-border);
}
.bos-progress-row:hover,
.bos-quick-link:hover {
background: var(--color-bg-subtle);
border-color: var(--color-border-strong);
}
.bos-progress-track {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: var(--color-bg-subtle);
}
.bos-progress-fill {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--color-accent);
transition: width 0.7s ease;
}
.bos-quick-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid transparent;
color: var(--color-text-primary);
text-decoration: none;
}
.bos-quick-link[aria-disabled="true"] {
color: var(--color-text-muted);
pointer-events: none;
}
.bos-table-row {
display: grid;
grid-template-columns: minmax(180px, 1.5fr) minmax(120px, 1fr) minmax(96px, auto) minmax(92px, auto) minmax(96px, auto);
gap: 16px;
align-items: center;
padding: 12px;
}
.bos-table-row:nth-child(even),
.bos-table-row.is-even {
background: var(--color-bg-subtle);
}
.bos-table-row + .bos-divider {
margin: 0 12px;
}
.bos-deal-identity {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
}
.bos-avatar {
display: inline-flex;
width: 32px;
height: 32px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-accent-muted);
color: var(--color-accent);
font-size: 0.75rem;
font-weight: 700;
}
.bos-empty-state {
display: grid;
justify-items: center;
gap: 12px;
padding: 32px 24px;
text-align: center;
}
.bos-empty-icon {
display: inline-flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-accent-muted);
color: var(--color-accent);
}
.bos-command-bar {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(220px, 520px) minmax(180px, 1fr);
align-items: center;
gap: 16px;
min-height: 56px;
}
.bos-command-left,
.bos-shell-actions,
.bos-user-chip {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.bos-shell-actions {
justify-content: flex-end;
}
.bos-command-kicker {
display: block;
color: var(--color-text-muted);
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
.bos-command-title {
display: block;
overflow: hidden;
color: var(--color-text-primary);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.bos-search {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
height: 40px;
border-radius: 999px;
background: var(--color-bg-subtle);
color: var(--color-text-muted);
padding: 0 16px;
}
.bos-search input {
min-width: 0;
width: 100%;
border: 0;
background: transparent;
color: var(--color-text-primary);
font-size: 0.875rem;
outline: none;
}
.bos-search input::placeholder {
color: var(--color-text-muted);
}
.bos-notification {
position: relative;
}
.bos-notification::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
}
.bos-rail-footer {
display: grid;
gap: 12px;
margin-top: auto;
padding-top: 16px;
}
.bos-nav-divider {
margin: 12px 12px;
}
.bos-rail-user {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 40px;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: 16px;
}
.bos-rail-tooltip {
position: absolute;
left: calc(100% + 8px);
top: 50%;
z-index: 60;
transform: translate(-4px, -50%);
opacity: 0;
pointer-events: none;
border-radius: 10px;
background: var(--color-bg-surface-raised);
border: 1px solid var(--color-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
color: var(--color-text-primary);
padding: 8px 12px;
font-size: 0.8125rem;
white-space: nowrap;
transition: opacity 0.15s, transform 0.15s;
}
.shell-rail:not(:hover) .shell-rail-item:hover .bos-rail-tooltip {
opacity: 1;
transform: translate(4px, -50%);
}
.shell-rail:hover .bos-rail-tooltip {
display: none;
}
.bos-mobile-strip {
scrollbar-width: none;
}
.bos-mobile-strip::-webkit-scrollbar {
display: none;
}
.bos-settings-shell {
display: grid;
gap: 24px;
grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1.66fr);
align-items: start;
}
.bos-settings-nav {
position: sticky;
top: 80px;
display: grid;
gap: 8px;
}
.bos-settings-nav .bos-nav-item {
justify-content: space-between;
}
.bos-settings-nav-count {
color: var(--color-text-muted);
font-size: 0.75rem;
font-weight: 500;
}
.bos-settings-summary {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bos-settings-stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.bos-settings-main {
display: grid;
gap: 24px;
}
.bos-settings-section {
display: grid;
gap: 16px;
}
.bos-settings-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.bos-form-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bos-form-grid > p,
.bos-form-stack > p {
margin: 0;
}
.bos-form-grid > p:has(textarea),
.bos-form-grid > p:has(input[type="color"]),
.bos-form-grid > p:has(.helptext),
.bos-form-grid > p:has(input[type="checkbox"]) {
grid-column: 1 / -1;
}
.bos-form-grid label,
.bos-form-stack label {
color: var(--color-text-primary);
font-size: 0.8125rem;
font-weight: 500;
}
.bos-form-grid .helptext,
.bos-form-stack .helptext {
color: var(--color-text-muted);
}
.bos-form-grid p:has(input[type="checkbox"]),
.bos-form-stack p:has(input[type="checkbox"]) {
border-color: var(--color-border);
background: var(--color-bg-subtle);
border-radius: 10px;
}
.bos-record-list {
display: grid;
gap: 12px;
}
.bos-record-card {
display: grid;
gap: 12px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: 16px;
transition: box-shadow 0.2s, transform 0.2s, border-color 0.15s;
}
.bos-record-card:hover {
border-color: var(--color-border-strong);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.bos-record-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.bos-record-title {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
}
.bos-record-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.bos-metadata-grid {
display: grid;
gap: 8px;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bos-metadata-item {
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg-subtle);
padding: 12px;
}
.bos-metadata-label {
color: var(--color-text-muted);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.bos-metadata-value {
overflow-wrap: anywhere;
color: var(--color-text-primary);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.45;
}
.bos-settings-empty {
display: grid;
justify-items: center;
gap: 12px;
border: 1px dashed var(--color-border-strong);
border-radius: 16px;
background: var(--color-bg-subtle);
padding: 32px 24px;
text-align: center;
}
.bos-progress-form-row {
display: grid;
gap: 16px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-subtle);
padding: 16px;
}
.bos-progress-form-row label {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
}
.bos-progress-form-row p:has(input[type="checkbox"]) {
padding: 0;
border: 0;
background: transparent;
}
@media (max-width: 1279px) {
.bos-settings-shell,
.bos-settings-grid {
grid-template-columns: 1fr;
}
.bos-settings-nav {
position: static;
}
.bos-settings-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bos-metadata-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.bos-dashboard-main,
.bos-command-bar {
grid-template-columns: 1fr;
}
.bos-search {
order: 3;
}
.bos-shell-actions {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
.bos-page-header {
flex-direction: column;
}
.bos-page-header .bos-btn-primary {
width: 100%;
}
.bos-card {
padding: 20px;
}
.bos-table-row {
grid-template-columns: 1fr;
gap: 8px;
}
.bos-form-grid,
.bos-settings-summary,
.bos-metadata-grid {
grid-template-columns: 1fr;
}
.bos-record-head {
flex-direction: column;
}
.bos-record-actions {
justify-content: flex-start;
width: 100%;
}
.bos-record-actions .bos-btn-ghost,
.bos-record-actions .bos-btn-danger,
.bos-progress-form-row .bos-btn-primary {
width: 100%;
}
}
/* Customer directory and deal workspace refinements */
.deal-panel-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
padding: 7px 10px;
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.deal-panel-toggle:hover {
border-color: var(--deal-accent-color, var(--color-border-strong));
color: var(--color-text-primary);
}
.deal-detail-panel-body {
display: grid;
gap: 20px;
}
.deal-detail-panel.is-collapsed {
min-height: 180px;
padding: 12px;
}
.deal-detail-panel.is-collapsed .deal-detail-panel-head {
justify-content: center;
border-bottom: 0;
padding-bottom: 0;
}
.deal-detail-panel.is-collapsed .deal-detail-panel-head > div,
.deal-detail-panel.is-collapsed .deal-detail-panel-body,
.deal-detail-panel.is-collapsed .deal-panel-toggle [data-panel-toggle-label] {
display: none;
}
.deal-detail-panel.is-collapsed .deal-panel-toggle {
width: 36px;
padding: 7px;
font-size: 1.2rem;
}
.deal-crm-blocks {
display: grid;
gap: 10px;
}
.deal-crm-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-bg-subtle);
padding: 12px;
}
.deal-crm-card__label {
display: block;
color: var(--color-text-tertiary);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.deal-crm-card__title {
display: block;
overflow: hidden;
color: var(--color-text-primary);
font-size: 0.875rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
a.deal-crm-card__title:hover {
color: var(--deal-accent-color, #ef6f2a);
}
.deal-inline-contact {
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-bg-subtle);
padding: 14px;
}
.deal-inline-contact__toggle {
display: flex !important;
align-items: flex-start;
gap: 12px;
margin: 0 !important;
cursor: pointer;
}
.deal-inline-contact__toggle small {
display: block;
margin-top: 3px;
color: var(--color-text-tertiary);
font-size: 0.75rem;
font-weight: 400;
}
.deal-inline-contact__fields {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--color-border);
margin-top: 14px;
padding-top: 14px;
}
.crm-directory-page {
gap: 24px;
}
.crm-directory-shell,
.crm-profile-shell {
display: grid;
align-items: start;
gap: 24px;
grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
}
.crm-directory-list,
.crm-directory-form,
.crm-profile-content {
display: grid;
gap: 20px;
}
.crm-directory-form {
position: sticky;
top: 80px;
}
.crm-directory-search {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.crm-record-list,
.crm-related-list {
display: grid;
gap: 10px;
}
.crm-record-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-bg-surface);
padding: 14px;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.crm-record-card:hover {
border-color: #ef6f2a;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.crm-record-arrow {
color: var(--color-text-tertiary);
font-size: 1.15rem;
}
.crm-directory-empty {
display: grid;
justify-items: center;
gap: 8px;
border: 1px dashed var(--color-border-strong);
border-radius: 16px;
background: var(--color-bg-subtle);
padding: 42px 20px;
text-align: center;
}
.crm-form-grid {
display: grid;
gap: 16px;
}
.crm-form-grid label {
display: block;
margin-bottom: 8px;
color: var(--color-text-primary);
font-size: 0.8125rem;
font-weight: 600;
}
.crm-profile-heading,
.crm-section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.crm-profile-heading {
justify-content: flex-start;
}
.crm-related-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-bg-subtle);
color: var(--color-text-primary);
padding: 12px 14px;
}
.crm-related-card span:first-child {
display: grid;
gap: 2px;
}
.crm-related-card small {
color: var(--color-text-tertiary);
}
@media (min-width: 1280px) {
.deal-detail-shell {
transition: grid-template-columns 220ms ease;
}
.deal-detail-shell.properties-collapsed {
grid-template-columns: 60px minmax(0, 1fr) minmax(240px, 0.8fr);
}
.deal-detail-shell.integrations-collapsed {
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr) 60px;
}
.deal-detail-shell.properties-collapsed.integrations-collapsed {
grid-template-columns: 60px minmax(0, 1fr) 60px;
}
}
@media (max-width: 1023px) {
.crm-directory-shell,
.crm-profile-shell {
grid-template-columns: 1fr;
}
.crm-directory-form {
position: static;
}
}
@media (max-width: 639px) {
.crm-directory-search {
grid-template-columns: auto minmax(0, 1fr);
}
.crm-directory-search .bos-btn-ghost {
grid-column: 1 / -1;
}
.deal-inline-contact__fields {
grid-template-columns: 1fr;
}
}
.engineering-page-action {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
white-space: nowrap;
}
.engineering-hub {
--engineering-blue: #2b5fbd;
--engineering-success: #1a7f45;
display: grid;
gap: 20px;
padding-bottom: 24px;
}
.engineering-hub__command,
.engineering-hub__section-card,
.engineering-workspace-card {
border: 1px solid var(--color-border);
background: var(--color-bg-surface);
color: var(--color-text-primary);
}
.engineering-hub__command {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
min-height: 84px;
padding: 20px 24px;
border-radius: 16px;
}
.engineering-workspace-card__badge,
.engineering-hub__section-chip {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.engineering-hub__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
margin: 0;
color: var(--color-accent);
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.15;
text-transform: uppercase;
}
.engineering-hub__eyebrow-icon,
.engineering-workspace-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.engineering-hub__eyebrow-icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--color-accent-muted);
}
.engineering-hub__section-head h3 {
margin: 0;
color: var(--color-text-primary);
}
.engineering-hub__status {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--engineering-success) 24%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--engineering-success) 10%, var(--color-bg-surface));
color: var(--engineering-success);
font-size: 0.8125rem;
font-weight: 650;
white-space: nowrap;
}
.engineering-hub__status-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}
.engineering-hub__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.engineering-hub__primary {
min-width: 0;
}
.engineering-hub__section-card {
border-radius: 16px;
padding: 20px;
}
.engineering-hub__section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.engineering-hub__section-head h3 {
font-size: 1rem;
font-weight: 650;
}
.engineering-hub__section-chip {
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: var(--color-accent-muted);
color: var(--color-accent);
white-space: nowrap;
}
.engineering-hub__workspace-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.engineering-workspace-card {
--workspace-accent: var(--engineering-blue);
position: relative;
display: flex;
min-height: 232px;
flex-direction: column;
gap: 16px;
overflow: hidden;
padding: 20px;
border-left: 4px solid var(--workspace-accent);
border-radius: 16px;
text-decoration: none;
transition: box-shadow 0.2s, transform 0.2s, border-color 0.15s;
}
.engineering-workspace-card--primary {
--workspace-accent: var(--color-accent);
}
.engineering-workspace-card--installation {
--workspace-accent: var(--engineering-blue);
}
.engineering-workspace-card:hover,
.engineering-workspace-card:focus-visible {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--workspace-accent) 44%, var(--color-border));
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
outline: none;
}
.engineering-workspace-card:focus-visible {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--workspace-accent) 18%, transparent), 0 4px 16px rgba(0, 0, 0, 0.08);
}
.engineering-workspace-card__topline,
.engineering-workspace-card__meta,
.engineering-workspace-card__cta {
display: flex;
align-items: center;
}
.engineering-workspace-card__topline {
justify-content: space-between;
gap: 12px;
}
.engineering-workspace-card__icon {
width: 48px;
height: 48px;
border: 1px solid color-mix(in srgb, var(--workspace-accent) 22%, var(--color-border));
border-radius: 14px;
background: color-mix(in srgb, var(--workspace-accent) 12%, var(--color-bg-surface));
color: var(--workspace-accent);
}
.engineering-workspace-card__badge {
min-height: 28px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--workspace-accent) 20%, var(--color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--workspace-accent) 9%, var(--color-bg-surface));
color: var(--workspace-accent);
}
.engineering-workspace-card__body {
display: grid;
gap: 8px;
}
.engineering-workspace-card__title {
color: var(--color-text-primary);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.15;
}
.engineering-workspace-card__copy {
color: var(--color-text-secondary);
font-size: 0.875rem;
line-height: 1.55;
}
.engineering-workspace-card__meta {
flex-wrap: wrap;
gap: 8px;
}
.engineering-workspace-card__meta span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
font-size: 0.75rem;
font-weight: 600;
}
.engineering-workspace-card__cta {
justify-content: space-between;
gap: 12px;
min-height: 40px;
margin-top: auto;
padding: 0 12px;
border-radius: 10px;
background: color-mix(in srgb, var(--workspace-accent) 12%, var(--color-bg-surface));
color: var(--workspace-accent);
font-size: 0.875rem;
font-weight: 650;
transition: background 0.15s, color 0.15s;
}
.engineering-workspace-card:hover .engineering-workspace-card__cta,
.engineering-workspace-card:focus-visible .engineering-workspace-card__cta {
background: var(--workspace-accent);
color: #fff;
}
.engineering-workspace-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.engineering-workspace-card__arrow svg {
width: 18px;
height: 18px;
transition: transform 0.15s;
}
.engineering-workspace-card:hover .engineering-workspace-card__arrow svg,
.engineering-workspace-card:focus-visible .engineering-workspace-card__arrow svg {
transform: translateX(2px);
}
.engineering-hub__empty {
display: grid;
grid-column: 1 / -1;
justify-items: center;
gap: 12px;
padding: 32px 24px;
color: var(--color-text-secondary);
text-align: center;
}
.engineering-hub__empty strong {
color: var(--color-text-primary);
}
html.dark .engineering-hub,
html[data-theme="dark"] .engineering-hub {
--engineering-blue: #93c5fd;
--engineering-success: #86efac;
}
html.dark .engineering-hub__command,
html[data-theme="dark"] .engineering-hub__command,
html.dark .engineering-hub__section-card,
html[data-theme="dark"] .engineering-hub__section-card,
html.dark .engineering-workspace-card,
html[data-theme="dark"] .engineering-workspace-card {
box-shadow: none;
}
@media (max-width: 1180px) {
.engineering-hub__layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 860px) {
.engineering-hub__command {
grid-template-columns: 1fr;
}
.engineering-hub__status {
width: fit-content;
}
.engineering-hub__workspace-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.engineering-page-action {
display: none;
}
.engineering-hub__command,
.engineering-hub__section-card {
padding: 16px;
}
.engineering-hub__section-head {
align-items: flex-start;
flex-direction: column;
}
.engineering-workspace-card {
min-height: 0;
padding: 16px;
}
}
.installation-project-library-toolbar {
display: grid;
gap: 16px;
}
.installation-project-toolbar-inline-form {
display: inline-flex;
min-width: 0;
align-items: stretch;
}
.installation-project-search-form {
display: grid;
min-width: min(100%, 30rem);
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
border-radius: 14px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-bg-surface) 92%, white 8%), var(--color-bg-surface));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 54%, transparent),
0 10px 24px rgba(15, 23, 42, 0.06);
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.installation-project-search-form:focus-within {
border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 58%, transparent),
0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent),
0 16px 34px rgba(15, 23, 42, 0.10);
}
.installation-project-search-field {
display: block;
min-width: 0;
}
.installation-project-search {
min-height: 46px;
width: 100%;
min-width: 0;
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
padding: 10px 14px 10px 16px;
color: var(--color-text-primary) !important;
font-size: 0.9rem;
font-weight: 600;
outline: none;
}
.installation-project-search::placeholder {
color: color-mix(in srgb, var(--color-text-secondary) 72%, transparent) !important;
font-size: 0.82rem;
font-weight: 650;
text-overflow: ellipsis;
}
.installation-project-search-button {
min-height: 46px;
border-radius: 0;
border-left: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
padding-inline: 14px;
box-shadow: none;
white-space: nowrap;
}
.installation-project-create-button {
position: relative;
isolation: isolate;
min-height: 46px;
border: 2px solid transparent;
border-radius: 14px;
color: #fff;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg-surface) 24%, #251813 76%),
color-mix(in srgb, var(--color-bg-surface) 14%, #130d0a 86%)
) padding-box,
linear-gradient(
120deg,
#ff7a2f 0%,
#ffd166 22%,
#fff3bf 36%,
#ff8a3d 54%,
#f04f1f 74%,
#ff7a2f 100%
) border-box;
background-size: 100% 100%, 240% 100%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 1px 2px rgba(0, 0, 0, 0.18);
padding-inline: 18px;
font-weight: 760;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
animation: installation-create-edge-drift 12s linear infinite;
}
.installation-project-create-button::before {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
border-radius: 11px;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.10), transparent 40%);
pointer-events: none;
}
.installation-project-create-button:hover {
transform: translateY(-1px);
color: #fff;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg-surface) 18%, #2d1a12 82%),
color-mix(in srgb, var(--color-bg-surface) 10%, #15100d 90%)
) padding-box,
linear-gradient(
120deg,
#ff7a2f 0%,
#ffd166 22%,
#fff3bf 36%,
#ff8a3d 54%,
#f04f1f 74%,
#ff7a2f 100%
) border-box;
background-size: 100% 100%, 200% 100%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 1px 2px rgba(0, 0, 0, 0.18);
}
@keyframes installation-create-edge-drift {
from {
background-position: 0 0, 0 0;
}
to {
background-position: 0 0, 240% 0;
}
}
html[data-theme="dark"] .installation-project-search-form,
html.dark .installation-project-search-form {
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-bg-surface) 86%, white 6%), var(--color-bg-surface));
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
0 12px 28px rgba(0, 0, 0, 0.22);
}
html[data-theme="dark"] .installation-project-search-form:focus-within,
html.dark .installation-project-search-form:focus-within {
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent),
0 18px 38px rgba(0, 0, 0, 0.26);
}
.installation-project-card-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
align-items: stretch;
transition: opacity 0.15s ease;
}
.installation-project-library.is-search-loading .installation-project-card-grid,
.installation-project-library.is-search-loading .installation-project-pagination {
opacity: 0.55;
pointer-events: none;
}
.installation-project-card {
position: relative;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
box-shadow: none;
transition: box-shadow 0.2s, transform 0.2s, border-color 0.15s;
}
.installation-project-card:hover,
.installation-project-card:focus-visible {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
outline: none;
}
.installation-project-card-wrap {
position: relative;
display: grid;
min-width: 0;
gap: 8px;
}
.installation-project-card--layout {
display: block;
height: 24rem;
padding: 16px;
text-decoration: none;
}
.installation-project-card-select {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
display: inline-flex;
align-items: center;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent);
color: var(--color-text-secondary);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
opacity: 0;
padding: 5px 8px;
font-size: 0.75rem;
font-weight: 750;
line-height: 1;
transform: translateY(-4px);
pointer-events: none;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s, color 0.15s, background-color 0.15s;
backdrop-filter: blur(10px);
}
.installation-project-library.is-select-mode .installation-project-card-select,
.installation-project-card-select:has(input:checked) {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.installation-project-card-select span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.installation-project-card-select span::before {
content: "";
width: 0.85rem;
height: 0.85rem;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
background: var(--color-bg-surface);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 65%, transparent);
}
.installation-project-card-wrap:has(.installation-project-card-select input:checked) .installation-project-card {
border-color: color-mix(in srgb, var(--color-accent) 54%, var(--color-border));
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.installation-project-card-select:hover,
.installation-project-card-select:has(input:checked) {
border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
background: var(--color-accent-muted);
color: var(--color-accent);
}
.installation-project-card-select:has(input:focus-visible) {
outline: 2px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
outline-offset: 3px;
}
.installation-project-card-select:has(input:checked) span::before {
border-color: color-mix(in srgb, var(--color-accent) 68%, var(--color-border));
background: var(--color-accent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 42%, transparent),
inset 0 0 0 3px var(--color-accent-muted);
}
.installation-project-card-select input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.installation-project-bulk-actions {
display: none;
grid-template-columns: minmax(11rem, 1fr) minmax(7rem, 8rem) max-content;
align-items: center;
gap: 8px;
width: min(100%, 34rem);
border-radius: 16px;
border: 1px solid var(--color-border);
background: var(--color-bg-subtle);
padding: 8px;
}
.installation-project-library.is-select-mode .installation-project-bulk-actions {
display: grid;
}
.installation-project-bulk-actions__summary {
display: grid;
gap: 2px;
padding-inline: 4px;
}
.installation-project-bulk-actions__summary strong {
color: var(--color-text-primary);
font-size: 0.8rem;
line-height: 1.1;
}
.installation-project-bulk-actions__summary span {
color: var(--color-text-secondary);
font-size: 0.7rem;
font-weight: 650;
line-height: 1.25;
}
.installation-project-bulk-actions__confirm .app-form-control {
min-height: 40px;
width: 100%;
border-radius: 10px;
padding-inline: 10px;
text-align: center;
}
.installation-project-bulk-actions__delete {
display: inline-flex;
min-height: 40px;
min-width: 8.8rem;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--color-danger) 24%, var(--color-border));
border-radius: 10px;
background: var(--color-danger-muted);
color: var(--color-danger);
padding: 8px 14px;
font-size: 0.8rem;
font-weight: 700;
white-space: nowrap;
transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}
.installation-project-bulk-actions__delete:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--color-danger) 42%, var(--color-border));
background: color-mix(in srgb, var(--color-danger) 18%, var(--color-bg-surface));
}
.installation-project-bulk-actions__delete:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.installation-project-card__layout {
display: grid;
grid-template-columns: repeat(var(--project-card-columns, 6), minmax(0, 1fr));
grid-template-rows: repeat(var(--project-card-rows, 8), minmax(0, 1fr));
gap: 8px;
height: 100%;
min-height: 0;
align-content: stretch;
}
.installation-project-card-block {
--project-card-block-accent: var(--color-accent);
--project-card-block-accent-muted: var(--color-accent-muted);
--project-card-block-fill: color-mix(in srgb, var(--project-card-block-accent) 8%, var(--color-bg-surface));
--project-card-block-edge: color-mix(in srgb, var(--project-card-block-accent) 18%, var(--color-border));
--project-card-block-strong-edge: color-mix(in srgb, var(--project-card-block-accent) 26%, var(--color-border));
--project-card-block-edge-highlight: color-mix(in srgb, var(--project-card-block-fill) 72%, white 28%);
--project-card-block-edge-shade: color-mix(in srgb, var(--project-card-block-fill) 78%, black 22%);
min-width: 0;
min-height: 0;
overflow: hidden;
}
.installation-project-card-block-accent--neutral {
--project-card-block-accent: var(--color-text-secondary);
--project-card-block-accent-muted: var(--color-bg-subtle);
}
.installation-project-card-block-accent--info {
--project-card-block-accent: var(--color-info);
--project-card-block-accent-muted: var(--color-info-muted);
}
.installation-project-card-block-accent--success {
--project-card-block-accent: var(--color-success);
--project-card-block-accent-muted: var(--color-success-muted);
}
.installation-project-card-block-accent--warning {
--project-card-block-accent: var(--color-warning);
--project-card-block-accent-muted: var(--color-warning-muted);
}
.installation-project-card-block--badge,
.installation-project-card-block--title,
.installation-project-card-block--timestamp {
display: flex;
align-items: center;
}
.installation-project-card-block--title {
align-items: stretch;
}
.installation-project-card-block--icon {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.installation-project-card-block--client,
.installation-project-card-block--phone,
.installation-project-card-block--email,
.installation-project-card-block--engineering_input,
.installation-project-card-block--engineering_result {
display: flex;
}
.installation-project-card-block--client .installation-project-card__section,
.installation-project-card-block--phone .installation-project-card__section,
.installation-project-card-block--email .installation-project-card__section,
.installation-project-card-block--engineering_input .installation-project-card__section,
.installation-project-card-block--engineering_result .installation-project-card__section {
width: 100%;
height: 100%;
display: grid;
align-content: stretch;
overflow: hidden;
box-sizing: border-box;
}
.installation-project-card__eyebrow {
max-width: 100%;
overflow: hidden;
border: 1px solid var(--project-card-block-edge);
background: var(--project-card-block-fill);
color: var(--project-card-block-accent);
box-shadow:
inset 0 1px 0 var(--project-card-block-edge-highlight),
inset 0 -1px 0 var(--project-card-block-edge-shade);
text-overflow: ellipsis;
text-transform: uppercase;
}
.installation-project-card__title,
.installation-project-card__value {
color: var(--color-text-primary);
}
.installation-project-card__title {
--project-card-title-font-size: 24px;
display: -webkit-box;
max-width: 100%;
max-height: 100%;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
color: var(--color-text-primary);
font-size: var(--project-card-title-font-size);
line-height: 1.08;
overflow-wrap: anywhere;
}
.installation-project-card__title-wrap {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
}
.installation-project-card__title-wrap--x-left {
justify-content: flex-start;
}
.installation-project-card__title-wrap--x-center {
justify-content: center;
}
.installation-project-card__title-wrap--x-right {
justify-content: flex-end;
}
.installation-project-card__title-wrap--y-top {
align-items: flex-start;
}
.installation-project-card__title-wrap--y-middle {
align-items: center;
}
.installation-project-card__title-wrap--y-bottom {
align-items: flex-end;
}
.installation-project-card__title-wrap--x-left .installation-project-card__title {
text-align: left;
}
.installation-project-card__title-wrap--x-center .installation-project-card__title {
text-align: center;
}
.installation-project-card__title-wrap--x-right .installation-project-card__title {
text-align: right;
}
.installation-project-card__timestamp {
display: block;
max-width: 100%;
overflow: hidden;
color: var(--color-text-secondary);
line-height: 1.25;
overflow-wrap: anywhere;
white-space: normal;
}
.installation-project-card__section {
--project-card-label-font-size: 11px;
--project-card-value-font-size: 14px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 1px;
overflow: hidden;
border: 1px solid var(--project-card-block-edge);
border-radius: 10px;
background: var(--project-card-block-fill);
box-shadow:
inset 0 1px 0 var(--project-card-block-edge-highlight),
inset 0 -1px 0 var(--project-card-block-edge-shade);
padding: 5px 8px;
}
.installation-project-card__section--label-hidden {
grid-template-rows: minmax(0, 1fr);
padding-block: 0;
}
.installation-project-card__section-label {
max-width: 100%;
overflow: hidden;
color: var(--project-card-block-accent);
font-size: var(--project-card-label-font-size);
letter-spacing: 0.08em;
line-height: 1;
overflow-wrap: anywhere;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.installation-project-card__section-label-wrap,
.installation-project-card__section-value-wrap {
min-width: 0;
min-height: 0;
display: flex;
}
.installation-project-card__section-label-wrap,
.installation-project-card__section-value-wrap {
align-items: flex-start;
justify-content: flex-start;
}
.installation-project-card__section--label-hidden .installation-project-card__section-value-wrap {
min-height: 100%;
}
.installation-project-card__value {
max-width: 100%;
max-height: 100%;
overflow: hidden;
font-size: var(--project-card-value-font-size);
line-height: 1.05;
overflow-wrap: anywhere;
text-align: left;
white-space: normal;
}
.installation-project-card__section--label-x-left .installation-project-card__section-label-wrap {
justify-content: flex-start;
}
.installation-project-card__section--label-x-center .installation-project-card__section-label-wrap {
justify-content: center;
}
.installation-project-card__section--label-x-right .installation-project-card__section-label-wrap {
justify-content: flex-end;
}
.installation-project-card__section--label-x-left .installation-project-card__section-label {
text-align: left;
}
.installation-project-card__section--label-x-center .installation-project-card__section-label {
text-align: center;
}
.installation-project-card__section--label-x-right .installation-project-card__section-label {
text-align: right;
}
.installation-project-card__section--label-y-top .installation-project-card__section-label-wrap {
align-items: flex-start;
}
.installation-project-card__section--label-y-middle .installation-project-card__section-label-wrap {
align-items: center;
}
.installation-project-card__section--label-y-bottom .installation-project-card__section-label-wrap {
align-items: flex-end;
}
.installation-project-card__section--value-x-left .installation-project-card__section-value-wrap {
justify-content: flex-start;
}
.installation-project-card__section--value-x-center .installation-project-card__section-value-wrap {
justify-content: center;
}
.installation-project-card__section--value-x-right .installation-project-card__section-value-wrap {
justify-content: flex-end;
}
.installation-project-card__section--value-x-left .installation-project-card__value {
text-align: left;
}
.installation-project-card__section--value-x-center .installation-project-card__value {
text-align: center;
}
.installation-project-card__section--value-x-right .installation-project-card__value {
text-align: right;
}
.installation-project-card__section--value-y-top .installation-project-card__section-value-wrap {
align-items: flex-start;
}
.installation-project-card__section--value-y-middle .installation-project-card__section-value-wrap {
align-items: center;
}
.installation-project-card__section--value-y-bottom .installation-project-card__section-value-wrap {
align-items: flex-end;
}
.installation-project-card__icon {
border-color: var(--project-card-block-edge);
border-radius: 12px;
background: var(--project-card-block-fill);
color: var(--project-card-block-accent);
box-shadow:
inset 0 1px 0 var(--project-card-block-edge-highlight),
inset 0 -1px 0 var(--project-card-block-edge-shade);
}
.installation-project-card__icon svg {
width: 1.35rem;
height: 1.35rem;
}
.installation-project-card__action {
min-width: 0;
overflow: hidden;
box-sizing: border-box;
border-color: var(--project-card-block-strong-edge);
border-radius: 10px;
background: var(--project-card-block-fill);
color: var(--project-card-block-accent);
box-shadow:
inset 0 1px 0 var(--project-card-block-edge-highlight),
inset 0 -1px 0 var(--project-card-block-edge-shade);
line-height: 1.15;
overflow-wrap: anywhere;
text-align: center;
white-space: normal;
}
.installation-project-card-block--timestamp {
align-items: flex-end;
}
.installation-project-card-block--action {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.installation-project-card-block--action .installation-project-card__action {
width: 100%;
}
.installation-project-empty-state {
min-height: 24rem;
align-content: center;
}
.installation-project-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-surface);
padding: 12px;
}
.installation-project-pagination__summary {
color: var(--color-text-secondary);
font-size: 0.82rem;
font-weight: 650;
}
.installation-project-pagination__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.installation-project-pagination__link {
display: inline-flex;
min-width: 2.4rem;
min-height: 2.4rem;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
padding: 0 10px;
font-size: 0.82rem;
font-weight: 750;
text-decoration: none;
transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.installation-project-pagination__link:hover {
border-color: color-mix(in srgb, var(--color-accent) 36%, var(--color-border));
background: var(--color-accent-muted);
color: var(--color-accent);
}
.installation-project-pagination__link.is-active {
border-color: color-mix(in srgb, var(--color-accent) 46%, var(--color-border));
background: var(--color-accent);
color: white;
}
.installation-project-pagination__link.is-disabled {
cursor: not-allowed;
opacity: 0.48;
}
.installation-project-pagination__link.is-disabled:hover {
border-color: var(--color-border);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}
@media (max-width: 700px) {
.installation-project-search-form {
min-width: 100%;
}
.installation-project-search {
padding-left: 12px;
padding-right: 10px;
}
.installation-project-search::placeholder {
font-size: 0.76rem;
}
.installation-project-search-button {
min-width: 46px;
padding-inline: 12px;
}
.installation-project-search-button span {
display: none;
}
.installation-project-create-button {
width: 100%;
}
.installation-project-bulk-actions {
grid-template-columns: 1fr;
width: 100%;
}
.installation-project-card--layout,
.installation-project-empty-state {
min-height: 21rem;
}
}
.installation-project-card-editor {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.installation-project-card-editor.hidden {
display: none;
}
.installation-project-card-editor__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.68);
backdrop-filter: blur(10px);
}
.installation-project-card-editor__dialog {
position: relative;
z-index: 1;
width: min(100%, 100rem);
max-height: min(92vh, 64rem);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
.installation-project-card-editor__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.5rem;
padding: 1.75rem 1.75rem 1.25rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.installation-project-card-editor__body {
display: grid;
grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
min-height: 0;
overflow: hidden;
}
.installation-project-card-editor__sidebar {
display: grid;
gap: 1rem;
padding: 1.25rem;
border-right: 1px solid rgba(148, 163, 184, 0.18);
overflow: auto;
}
.installation-project-card-editor__panel {
border-radius: 16px;
border: 1px solid var(--color-border);
background: var(--color-bg-surface);
padding: 1rem;
}
html.dark .installation-project-card-editor__panel,
html[data-theme="dark"] .installation-project-card-editor__panel {
background: var(--color-bg-surface);
}
.installation-project-card-editor__preview-wrap {
padding: 1rem;
overflow: auto;
}
.installation-project-card-editor__preview-shell {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.installation-project-card--editor-preview {
width: min(100%, 23rem);
padding: 1rem;
height: 24rem;
flex: 0 0 auto;
}
.installation-project-card-editor__preview-grid {
display: grid;
grid-template-columns: repeat(var(--project-card-columns, 6), minmax(0, 1fr));
grid-template-rows: repeat(var(--project-card-rows, 8), minmax(0, 1fr));
gap: 8px;
height: 100%;
min-height: 0;
align-content: stretch;
}
.installation-project-card-editor__preview-block {
position: relative;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
display: block;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.installation-project-card-editor__preview-block.is-selected {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: 12px;
}
.installation-project-card-editor__preview-block.is-dragging {
cursor: grabbing;
opacity: 0.92;
}
.installation-project-card-editor__preview-block-content {
height: 100%;
width: 100%;
min-width: 0;
min-height: 0;
display: block;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.installation-project-card-editor__resize-handle {
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
width: 0.85rem;
height: 0.85rem;
border-radius: 999px;
background: var(--color-accent);
box-shadow: 0 10px 20px color-mix(in srgb, var(--color-accent) 22%, transparent);
cursor: nwse-resize;
opacity: 0;
transform: translate(35%, 35%);
transition: opacity 0.15s ease, transform 0.15s ease;
user-select: none;
-webkit-user-select: none;
}
.installation-project-card-editor__preview-block:hover .installation-project-card-editor__resize-handle,
.installation-project-card-editor__preview-block.is-selected .installation-project-card-editor__resize-handle {
opacity: 1;
}
.installation-project-card-editor__library-button,
.installation-project-card-editor__delete-button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-bg-surface);
color: var(--color-text-secondary);
padding: 0.8rem 1rem;
font-size: 0.875rem;
font-weight: 600;
transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.installation-project-card-editor__template-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: 0.9rem 1rem;
text-align: left;
transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.installation-project-card-editor__template-button.is-selected {
border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
background: var(--color-accent-muted);
}
.installation-project-card-editor__template-button.is-active {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.installation-project-card-editor__template-badges {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.installation-project-card-editor__template-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 0.2rem 0.55rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.installation-project-card-editor__template-badge--active {
background: var(--color-accent-muted);
color: var(--color-accent);
}
.installation-project-card-editor__template-badge--draft {
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}
.installation-project-card-editor__library-button:hover,
.installation-project-card-editor__delete-button:hover,
.installation-project-card-editor__template-button:hover {
border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
color: var(--color-accent);
}
.installation-project-card-editor__library-button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
html.dark .installation-project-card-editor__library-button,
html[data-theme="dark"] .installation-project-card-editor__library-button,
html.dark .installation-project-card-editor__delete-button,
html[data-theme="dark"] .installation-project-card-editor__delete-button,
html.dark .installation-project-card-editor__template-button,
html[data-theme="dark"] .installation-project-card-editor__template-button {
background: var(--color-bg-surface);
}
html.dark .installation-project-card-editor__template-button.is-selected,
html[data-theme="dark"] .installation-project-card-editor__template-button.is-selected {
background: var(--color-accent-muted);
}
html.dark .installation-project-card-editor__template-badge--active,
html[data-theme="dark"] .installation-project-card-editor__template-badge--active {
color: #fdba74;
}
html.dark .installation-project-card-editor__template-badge--draft,
html[data-theme="dark"] .installation-project-card-editor__template-badge--draft {
color: #cbd5e1;
}
.installation-project-card-editor__field {
display: grid;
gap: 0.45rem;
}
.installation-project-card-editor__toggle {
display: flex;
align-items: center;
gap: 0.7rem;
border-radius: 1rem;
border: 1px solid rgba(148, 163, 184, 0.3);
background: rgba(255, 255, 255, 0.58);
padding: 0.8rem 0.9rem;
font-size: 0.875rem;
font-weight: 700;
}
.installation-project-card-editor__toggle input {
width: 1rem;
height: 1rem;
accent-color: #ef6f2a;
}
html.dark .installation-project-card-editor__toggle,
html[data-theme="dark"] .installation-project-card-editor__toggle {
background: rgba(15, 23, 42, 0.72);
}
.installation-project-card-editor__field label {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.installation-project-card-editor__field-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.installation-project-card-editor__empty {
border-radius: 1rem;
border: 1px dashed rgba(148, 163, 184, 0.32);
padding: 1rem;
color: var(--app-page-muted);
text-align: center;
}
@media (max-width: 1100px) {
.installation-project-card-editor__body {
grid-template-columns: 1fr;
}
.installation-project-card-editor__sidebar {
border-right: 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
}
@media (max-width: 640px) {
.installation-project-card__layout,
.installation-project-card-editor__preview-grid {
min-height: 0;
}
.installation-project-card-editor {
padding: 0.75rem;
}
.installation-project-card--layout,
.installation-project-card--editor-preview {
width: min(100%, 100%);
height: 29rem;
}
.installation-project-card-editor__header,
.installation-project-card-editor__sidebar,
.installation-project-card-editor__preview-wrap {
padding: 1rem;
}
}
.shell-rail {
width: var(--app-shell-rail-collapsed);
transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
align-self: flex-start;
max-height: 100vh;
overflow-x: hidden;
overflow-y: hidden !important;
overscroll-behavior: contain;
scrollbar-gutter: stable;
background: var(--color-bg-surface) !important;
border-color: var(--color-border) !important;
}
.shell-rail:hover {
width: var(--app-shell-rail-expanded);
overflow-y: auto !important;
}
.shell-rail:not(:hover)::-webkit-scrollbar {
width: 0;
height: 0;
}
.shell-rail-inner {
display: flex;
min-height: calc(100vh - 48px);
flex-direction: column;
width: calc(var(--app-shell-rail-expanded) - 2rem);
}
.shell-rail-brand {
position: relative;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 56px;
padding-right: 0;
}
.shell-rail:not(:hover) .shell-rail-brand {
width: calc(var(--app-shell-rail-collapsed) - 2rem);
grid-template-columns: 1fr;
justify-items: center;
}
.shell-rail:not(:hover) .shell-rail-brand .app-shell-brand-badge {
margin-inline: auto;
}
.shell-rail:not(:hover) .shell-rail-brand .shell-rail-copy {
display: none;
}
.shell-rail:not(:hover) .shell-rail-item {
width: calc(var(--app-shell-rail-collapsed) - 2rem);
grid-template-columns: 1fr;
justify-items: center;
gap: 0;
padding-inline: 0;
}
.shell-rail:not(:hover) .shell-rail-item .shell-rail-copy {
display: none;
}
.shell-rail-brand-toggle {
position: relative;
right: auto;
top: auto;
transform: none;
}
.shell-rail-item {
position: relative;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 10px;
border-radius: 10px;
min-height: 48px;
padding: 4px 8px;
white-space: nowrap;
color: var(--color-text-secondary);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shell-rail-icon {
display: inline-flex;
height: 40px;
width: 40px;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 10px;
color: currentColor;
}
.shell-rail-copy {
opacity: 0;
transform: translateX(-8px);
transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.shell-rail:hover .shell-rail-copy {
opacity: 1;
transform: translateX(0);
}
.shell-rail-item-active {
background: var(--color-accent-muted);
color: var(--color-accent);
box-shadow: none;
}
.shell-rail-item-active .shell-rail-copy {
color: var(--color-accent);
}
.shell-rail-item-active .shell-rail-icon {
background: var(--color-accent-muted);
}
.shell-rail:not(:hover) .shell-rail-item-active {
background: var(--color-accent-muted);
box-shadow: none;
justify-items: center;
}
.shell-rail:not(:hover) .shell-rail-item-active .shell-rail-icon {
background: var(--color-accent);
color: #fff;
box-shadow: none;
}
.shell-rail:not(:hover) .shell-rail-item-active .shell-rail-copy {
color: inherit;
}
.shell-rail-item-idle {
color: var(--color-text-secondary);
}
.shell-rail-item-idle .shell-rail-icon {
background: transparent;
color: currentColor;
border: 1px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shell-rail-item-idle:hover {
background: var(--color-bg-subtle);
border-color: var(--color-border);
color: var(--color-text-primary);
box-shadow: none;
transform: none;
}
.shell-rail-item-idle:hover .shell-rail-icon {
background: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-accent);
box-shadow: none;
}
.shell-rail-item-disabled {
cursor: default;
color: var(--color-text-muted);
}
.shell-rail-item-disabled .shell-rail-icon {
background: transparent;
color: var(--color-text-muted);
border: 1px solid transparent;
}
.app-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid transparent;
padding: 0.45rem 0.85rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
white-space: nowrap;
}
.app-status-pill-complete {
background: #dcfce7;
border-color: #86efac;
color: #14532d;
}
.app-status-pill-progress {
background: #fef3c7;
border-color: #fbbf24;
color: #92400e;
}
.app-status-pill-upcoming,
.app-status-pill-neutral {
background: #e2e8f0;
border-color: #cbd5e1;
color: #334155;
}
.app-status-pill-brand {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(147, 197, 253, 0.55);
color: #2563eb;
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
}
html.dark .app-status-pill-complete,
html[data-theme="dark"] .app-status-pill-complete {
background: rgba(16, 185, 129, 0.18);
border-color: rgba(52, 211, 153, 0.34);
color: #d1fae5;
}
html.dark .app-status-pill-progress,
html[data-theme="dark"] .app-status-pill-progress {
background: rgba(245, 158, 11, 0.18);
border-color: rgba(251, 191, 36, 0.34);
color: #fef3c7;
}
html.dark .app-status-pill-upcoming,
html[data-theme="dark"] .app-status-pill-upcoming,
html.dark .app-status-pill-neutral,
html[data-theme="dark"] .app-status-pill-neutral {
background: rgba(148, 163, 184, 0.16);
border-color: rgba(148, 163, 184, 0.24);
color: #e2e8f0;
}
html.dark .app-status-pill-brand,
html[data-theme="dark"] .app-status-pill-brand {
background: rgba(37, 99, 235, 0.16);
border-color: rgba(96, 165, 250, 0.35);
color: #bfdbfe;
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.16);
}
.project-progress-hero {
position: relative;
overflow: hidden;
}
.project-progress-hero::before,
.project-progress-hero::after {
content: "";
position: absolute;
border-radius: 999px;
pointer-events: none;
}
.project-progress-hero::before {
top: -5rem;
right: 12%;
width: 18rem;
height: 18rem;
background: radial-gradient(circle, rgba(147, 197, 253, 0.26), transparent 68%);
}
.project-progress-hero::after {
inset: auto -10% -35% auto;
width: 18rem;
height: 18rem;
background: radial-gradient(circle, rgba(239, 111, 42, 0.22), transparent 68%);
}
.project-carousel-controls {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.project-carousel-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.9rem;
height: 2.9rem;
border-radius: 1rem;
border: 1px solid rgba(191, 219, 254, 0.9);
background: rgba(255, 255, 255, 0.72);
color: #2563eb;
font-size: 1rem;
box-shadow: 0 12px 24px rgba(59, 130, 246, 0.12);
transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.project-carousel-button:hover {
transform: translateY(-1px);
background: rgba(239, 246, 255, 0.96);
box-shadow: 0 16px 30px rgba(59, 130, 246, 0.16);
}
.project-progress-meter {
position: relative;
height: 0.95rem;
overflow: hidden;
border-radius: 999px;
background: rgba(148, 163, 184, 0.18);
border: 1px solid rgba(148, 163, 184, 0.18);
}
.project-progress-meter__fill {
display: block;
position: relative;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ef6f2a 0%, #f59e0b 62%, #fde68a 100%);
box-shadow: 0 0 22px rgba(239, 111, 42, 0.35);
animation: progress-fill-reveal 900ms ease;
}
.project-progress-meter__fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
animation: progress-sheen 2.8s linear infinite;
}
.project-progress-stat,
.project-stage-metric {
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.65);
background: rgba(255, 255, 255, 0.66);
padding: 1rem 1.05rem;
backdrop-filter: blur(14px);
}
.project-progress-stat__label,
.project-stage-metric__label {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #64748b;
}
.project-progress-stat__value,
.project-stage-metric__value {
display: block;
margin-top: 0.7rem;
font-size: 1.5rem;
line-height: 1.1;
}
.project-progress-stat__copy {
margin-top: 0.55rem;
color: var(--app-page-muted);
font-size: 0.9rem;
line-height: 1.6;
}
.project-journey-shell {
position: relative;
overflow: hidden;
}
.project-journey-scroll,
.project-stage-carousel {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-behavior: smooth;
}
.project-journey-scroll {
padding: 0.85rem 0.9rem 0.7rem 1.15rem;
}
.project-journey-scroll::-webkit-scrollbar,
.project-stage-carousel::-webkit-scrollbar {
display: none;
}
.project-journey-track {
display: flex;
align-items: flex-start;
gap: 0;
min-width: max-content;
padding: 0.2rem 1.5rem 0.2rem 0;
}
.project-journey-item {
position: relative;
flex: 0 0 17rem;
width: 17rem;
overflow: visible;
}
.project-journey-item:first-child {
margin-left: 0.35rem;
}
.project-journey-item__top {
position: relative;
display: flex;
align-items: center;
min-height: 4.4rem;
}
.project-journey-node {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.35rem;
height: 3.35rem;
flex-shrink: 0;
border-radius: 999px;
border: 1px solid rgba(191, 219, 254, 0.9);
background: linear-gradient(180deg, #ffffff, #eef4fb);
color: #64748b;
font-weight: 800;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}
.project-journey-node.is-unlocked {
border-color: rgba(251, 146, 60, 0.45);
}
.project-journey-node.is-active {
background: linear-gradient(135deg, #ef6f2a, #f59e0b);
border-color: rgba(239, 111, 42, 0.42);
color: #ffffff;
box-shadow: 0 0 0 12px rgba(239, 111, 42, 0.12), 0 18px 36px rgba(239, 111, 42, 0.2);
animation: journey-node-pulse 2.3s ease-in-out infinite;
}
.project-journey-node.is-complete {
background: linear-gradient(135deg, #fff7ed, #fed7aa);
border-color: rgba(239, 111, 42, 0.4);
color: #ea580c;
box-shadow: 0 0 0 10px rgba(251, 146, 60, 0.12), 0 14px 32px rgba(251, 146, 60, 0.16);
}
.project-journey-line {
position: absolute;
top: 50%;
left: 1.675rem;
width: 100%;
height: 1rem;
transform: translateY(-50%);
pointer-events: none;
}
.project-journey-line__track,
.project-journey-line__fill {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0.48rem;
transform: translateY(-50%);
border-radius: 999px;
}
.project-journey-line__track {
background: linear-gradient(90deg, rgba(191, 219, 254, 0.75), rgba(203, 213, 225, 0.95));
}
.project-journey-line__fill {
width: var(--line-fill, 0%);
overflow: hidden;
background: linear-gradient(90deg, #ef6f2a 0%, #f59e0b 55%, #fcd34d 100%);
box-shadow: 0 0 18px rgba(239, 111, 42, 0.24);
}
.project-journey-line__fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
animation: progress-sheen 2.6s linear infinite;
}
.project-journey-line__dots {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-evenly;
height: 100%;
width: 100%;
padding: 0 0.25rem;
}
.project-journey-line__dot {
width: 0.95rem;
height: 0.95rem;
flex: 0 0 auto;
border-radius: 999px;
border: 2px solid rgba(191, 219, 254, 0.9);
background: #ffffff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55);
}
.project-journey-line__dot.is-complete {
background: #ef6f2a;
border-color: #fed7aa;
box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.16);
}
.project-journey-line__dot.is-empty {
width: calc(100% - 0.5rem);
border-radius: 999px;
}
.project-journey-item__body {
padding-top: 1.15rem;
max-width: 12rem;
}
.project-journey-item__title {
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
}
.project-journey-item__meta {
margin-top: 0.45rem;
color: #94a3b8;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.project-stage-carousel-shell {
position: relative;
overflow: hidden;
padding-inline: 4.75rem !important;
}
.project-stage-carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 0;
align-items: start;
justify-items: stretch;
width: 100%;
padding-bottom: 0.4rem;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
}
.project-stage-card {
position: relative;
border-radius: 2rem;
border: 1px solid rgba(214, 223, 236, 0.96);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 252, 0.98));
padding: 1.5rem;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
scroll-snap-align: start;
width: 100%;
max-width: 100%;
min-width: 0;
margin-inline: 0;
animation: stage-card-rise 560ms ease both;
}
.project-stage-carousel-nav {
position: absolute;
top: 50%;
z-index: 3;
transform: translateY(-50%);
}
.project-stage-carousel-nav--left {
left: 1.15rem;
}
.project-stage-carousel-nav--right {
right: 1.15rem;
}
.project-stage-card.is-complete {
border-color: rgba(110, 231, 183, 0.55);
}
.project-stage-card.is-active {
border-color: rgba(251, 146, 60, 0.55);
box-shadow: 0 26px 66px rgba(239, 111, 42, 0.14);
}
.project-stage-metric {
background: rgba(255, 255, 255, 0.74);
border-color: rgba(226, 232, 240, 0.92);
}
.project-module-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
border-radius: 1.4rem;
border: 1px solid rgba(226, 232, 240, 0.9);
background: rgba(248, 250, 252, 0.92);
padding: 1rem 1.05rem;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.project-module-row:hover {
transform: translateY(-2px);
border-color: rgba(239, 111, 42, 0.24);
box-shadow: 0 12px 28px rgba(239, 111, 42, 0.08);
}
.project-module-row.is-complete {
border-color: rgba(110, 231, 183, 0.48);
background: rgba(236, 253, 245, 0.95);
}
.project-module-row__dot {
width: 0.72rem;
height: 0.72rem;
flex-shrink: 0;
border-radius: 999px;
background: #f59e0b;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}
.project-module-row.is-complete .project-module-row__dot {
background: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
html.dark .project-carousel-button,
html[data-theme="dark"] .project-carousel-button {
border-color: rgba(96, 165, 250, 0.3);
background: rgba(15, 23, 42, 0.86);
color: #bfdbfe;
box-shadow: 0 12px 24px rgba(2, 6, 23, 0.34);
}
html.dark .project-carousel-button:hover,
html[data-theme="dark"] .project-carousel-button:hover {
background: rgba(30, 41, 59, 0.96);
}
html.dark .project-progress-stat,
html[data-theme="dark"] .project-progress-stat,
html.dark .project-stage-metric,
html[data-theme="dark"] .project-stage-metric {
border-color: rgba(71, 85, 105, 0.55);
background: rgba(15, 23, 42, 0.62);
}
html.dark .project-journey-shell,
html[data-theme="dark"] .project-journey-shell,
html.dark .project-stage-carousel-shell,
html[data-theme="dark"] .project-stage-carousel-shell {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.78)) !important;
border-color: rgba(51, 65, 85, 0.88) !important;
}
html.dark .project-journey-line__track,
html[data-theme="dark"] .project-journey-line__track {
background: linear-gradient(90deg, rgba(148, 163, 184, 0.32), rgba(100, 116, 139, 0.56));
}
html.dark .project-journey-line__fill,
html[data-theme="dark"] .project-journey-line__fill {
box-shadow: 0 0 24px rgba(251, 146, 60, 0.32);
}
html.dark .project-journey-node,
html[data-theme="dark"] .project-journey-node {
background: linear-gradient(180deg, rgba(241, 245, 249, 0.94), rgba(203, 213, 225, 0.9));
border-color: rgba(191, 219, 254, 0.4);
color: #475569;
}
html.dark .project-journey-node.is-active,
html[data-theme="dark"] .project-journey-node.is-active {
color: #ffffff;
box-shadow: 0 0 0 12px rgba(251, 146, 60, 0.18), 0 18px 40px rgba(251, 146, 60, 0.24);
}
html.dark .project-stage-card,
html[data-theme="dark"] .project-stage-card {
background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
border-color: rgba(71, 85, 105, 0.58);
box-shadow: 0 24px 62px rgba(2, 6, 23, 0.38);
}
html.dark .project-module-row,
html[data-theme="dark"] .project-module-row {
background: rgba(15, 23, 42, 0.78);
border-color: rgba(71, 85, 105, 0.5);
}
html.dark .project-module-row.is-complete,
html[data-theme="dark"] .project-module-row.is-complete {
background: rgba(16, 185, 129, 0.12);
}
@keyframes progress-fill-reveal {
from {
width: 0;
}
}
@keyframes progress-sheen {
from {
transform: translateX(-120%);
}
to {
transform: translateX(140%);
}
}
@keyframes stage-card-rise {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes journey-node-pulse {
0%,
100% {
box-shadow: 0 0 0 12px rgba(239, 111, 42, 0.12), 0 18px 36px rgba(239, 111, 42, 0.2);
}
50% {
box-shadow: 0 0 0 16px rgba(239, 111, 42, 0.08), 0 20px 40px rgba(239, 111, 42, 0.24);
}
}
.shell-mobile-nav {
scrollbar-width: none;
}
.shell-mobile-nav::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.6);
border-radius: 999px;
}
::-webkit-scrollbar-track {
background: transparent;
}
p label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
}
p:has(input[type="checkbox"]) {
display: flex;
align-items: center;
gap: 0.75rem;
border: 1px solid rgb(253 186 116 / 0.6);
background: rgb(255 247 237);
border-radius: 1rem;
padding: 0.875rem 1rem;
}
p:has(input[type="checkbox"]) label {
margin-bottom: 0;
}
html.dark p:has(input[type="checkbox"]),
html[data-theme="dark"] p:has(input[type="checkbox"]) {
border-color: rgb(251 146 60 / 0.28);
background: rgb(15 23 42 / 0.62);
}
p.helptext {
margin-top: 0.5rem;
display: block;
color: rgb(100 116 139);
font-size: 0.75rem;
line-height: 1.4;
}
ul.errorlist {
margin-bottom: 0.75rem;
list-style: none;
border-radius: 1rem;
border: 1px solid rgb(254 205 211);
background: rgb(255 241 242);
padding: 0.75rem 1rem;
color: rgb(190 24 93);
font-size: 0.875rem;
}
.dark p.helptext {
color: rgb(148 163 184);
}
.dark ul.errorlist {
border-color: rgb(251 113 133 / 0.32);
background: rgb(136 19 55 / 0.18);
color: rgb(254 205 211);
}
@media (max-width: 640px) {
.project-module-row {
flex-direction: column;
align-items: flex-start;
}
.project-journey-track {
padding-right: 1rem;
}
.project-journey-item {
flex-basis: 14rem;
width: 14rem;
}
.project-journey-scroll {
padding: 0.8rem 0.6rem 0.55rem 0.85rem;
}
.project-stage-carousel {
grid-auto-columns: 100%;
}
.project-stage-card {
width: 100%;
max-width: 100%;
}
.project-stage-carousel-shell {
padding-inline: 1rem !important;
padding-top: 4.4rem !important;
}
.project-stage-carousel-nav {
top: 1.2rem;
transform: none;
}
.project-stage-carousel-nav--left {
left: 1rem;
}
.project-stage-carousel-nav--right {
right: 1rem;
}
.shell-rail {
width: 100%;
}
.shell-rail:hover {
width: 100%;
}
.shell-rail-inner {
width: 100%;
}
}
@media (min-width: 1280px) {
.app-shell-rail {
position: fixed !important;
top: 0;
left: 0;
z-index: 40;
width: var(--app-shell-rail-collapsed);
border-right: none !important;
border-top-right-radius: 0;
overflow-x: hidden;
box-shadow: inset -1px 0 0 var(--app-rail-border);
}
.app-shell-main {
flex: 0 0 calc(100vw - var(--app-shell-rail-collapsed));
width: calc(100vw - var(--app-shell-rail-collapsed));
max-width: calc(100vw - var(--app-shell-rail-collapsed));
margin-left: var(--app-shell-rail-collapsed);
overflow-x: hidden;
}
.app-shell-header {
border-bottom-left-radius: 0 !important;
overflow: clip;
}
.app-shell-rail:hover ~ .app-shell-main {
flex: 0 0 calc(100vw - var(--app-shell-rail-expanded));
width: calc(100vw - var(--app-shell-rail-expanded));
max-width: calc(100vw - var(--app-shell-rail-expanded));
margin-left: var(--app-shell-rail-expanded);
}
}
.deal-accent-panel {
background: linear-gradient(180deg, color-mix(in srgb, var(--deal-accent-surface-light) 52%, white 48%), rgba(255, 255, 255, 0.94));
border-color: var(--deal-accent-border-light);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.deal-board-workspace {
background: var(--app-deal-board-workspace-bg) !important;
border-color: var(--app-deal-board-workspace-border) !important;
box-shadow: var(--app-deal-board-workspace-shadow) !important;
backdrop-filter: none !important;
}
.deal-stage-header {
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 32%),
linear-gradient(180deg, color-mix(in srgb, var(--deal-accent-surface-light) 34%, white 66%), rgba(248, 250, 252, 0.98));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 10px 22px rgba(15, 23, 42, 0.05);
}
.deal-stage-dot {
background: var(--deal-accent-color);
box-shadow: 0 0 0 5px var(--deal-accent-surface-light);
}
.deal-board-scroll {
scrollbar-width: none;
}
.deal-board-scroll::-webkit-scrollbar {
display: none;
}
.deal-board-shell {
position: relative;
border: 1px solid var(--app-deal-board-shell-border);
border-radius: 2rem;
background: var(--app-deal-board-shell-bg);
box-shadow: var(--app-deal-board-shell-shadow);
padding: 0;
}
.deal-board-arrow,
.deal-board-fade {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
transition: opacity 0.18s ease;
}
.deal-board-arrow {
top: 50%;
bottom: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid rgba(203, 213, 225, 0.92);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
color: rgb(51 65 85);
font-size: 1.1rem;
transform: translateY(-50%);
opacity: 0.52;
}
.deal-board-arrow:hover {
opacity: 0.96;
border-color: rgba(239, 111, 42, 0.32);
color: #b45309;
}
.deal-board-arrow.is-hidden,
.deal-board-fade.is-hidden {
opacity: 0;
pointer-events: none;
}
.deal-board-arrow--left,
.deal-board-fade--left {
left: 0;
}
.deal-board-arrow--right,
.deal-board-fade--right {
right: 0;
}
.deal-board-arrow--left {
left: 0.9rem;
}
.deal-board-arrow--right {
right: 0.9rem;
}
.deal-board-fade {
width: 4.5rem;
pointer-events: none;
}
.deal-board-fade--left {
background: linear-gradient(90deg, var(--app-page-bg), rgba(241, 245, 249, 0));
}
.deal-board-fade--right {
background: linear-gradient(270deg, var(--app-page-bg), rgba(241, 245, 249, 0));
}
.deal-stage-column {
width: clamp(18rem, 24vw, 20rem);
min-width: clamp(18rem, 24vw, 20rem);
max-width: clamp(18rem, 24vw, 20rem);
background: var(--app-deal-board-column-bg) !important;
border-color: var(--app-deal-board-column-border) !important;
box-shadow: var(--app-deal-board-column-shadow) !important;
}
.deal-board-summary {
background: var(--app-deal-summary-bg);
border: 1px solid var(--app-deal-summary-border);
box-shadow: var(--app-deal-summary-shadow);
}
.deal-board-summary-item {
background: var(--app-deal-summary-item-bg);
}
.deal-board-summary-separator {
background: var(--app-deal-summary-separator);
}
.deal-board-summary-icon {
background: var(--app-deal-summary-icon-bg);
color: var(--app-deal-summary-icon-text);
ring-color: var(--app-deal-summary-icon-ring);
}
.deal-stage-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--app-deal-pill-bg);
border: 1px solid var(--app-deal-pill-border);
color: var(--app-deal-pill-text);
min-width: 2.1rem;
}
.deal-stage-status-dot {
display: inline-flex;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
flex: 0 0 auto;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}
.deal-stage-status-dot--active {
background: #22c55e;
}
.deal-stage-status-dot--closed {
background: #ef4444;
}
.deal-stage-description-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 999px;
border: 1px solid rgba(191, 148, 118, 0.26);
background: rgba(255, 255, 255, 0.84);
color: rgba(120, 53, 15, 0.84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
cursor: help;
flex: 0 0 auto;
}
.deal-stage-stat {
display: flex;
align-items: center;
justify-content: center;
background: var(--app-deal-stat-bg);
border: 1px solid var(--app-deal-stat-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
min-height: 2.8rem;
}
.deal-stage-column__list {
max-height: 42rem;
overflow-y: auto;
padding-right: 0.2rem;
}
.deal-card {
min-height: 8.5rem;
height: auto;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98)) !important;
border-color: rgba(203, 213, 225, 0.92) !important;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}
.deal-card:hover {
background: rgba(255, 255, 255, 1) !important;
border-color: var(--deal-accent-border-light) !important;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}
.deal-empty-state {
background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94)) !important;
border-color: rgba(203, 213, 225, 0.94) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}
.deal-stage-empty-illustration {
display: flex;
justify-content: center;
margin-bottom: 0.35rem;
color: rgba(210, 125, 68, 0.48);
}
.deal-stage-empty-cloud {
fill: rgba(241, 245, 249, 0.82);
stroke: rgba(191, 148, 118, 0.34);
stroke-width: 1.6;
}
.deal-stage-empty-screen {
fill: rgba(255, 239, 229, 0.9);
stroke: rgba(186, 112, 63, 0.52);
stroke-width: 1.7;
}
.deal-stage-empty-stand,
.deal-stage-empty-spark,
.deal-stage-empty-plus {
stroke: rgba(175, 118, 78, 0.66);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.1;
}
.deal-stage-empty-plus-ring {
fill: rgba(255, 255, 255, 0.88);
stroke: rgba(186, 112, 63, 0.34);
stroke-width: 1.6;
}
.deal-card__meta-row {
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.deal-card__meta-label {
flex: 0 0 auto;
white-space: nowrap;
}
.deal-card__meta-value {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.deal-card__value-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 9999px;
padding: 0.5rem 0.8rem;
border: 1px solid rgba(249, 115, 22, 0.24);
background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(251, 191, 36, 0.24));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
color: #9a3412;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
white-space: nowrap;
}
.deal-detail-heading-card {
background: linear-gradient(180deg, rgba(255, 252, 235, 0.96), rgba(255, 255, 255, 0.94));
border-color: rgba(251, 191, 36, 0.35);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}
.deal-detail-property-card,
.deal-detail-activity-card,
.deal-detail-meta-card,
.deal-detail-activity-body,
.deal-detail-equation-card,
.deal-detail-empty-rail {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94));
border-color: rgba(226, 232, 240, 0.95);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}
.deal-detail-property-card,
.deal-detail-equation-card {
backdrop-filter: blur(14px);
}
.deal-detail-activity-body,
.deal-detail-empty-rail {
background: linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.92));
border-style: dashed;
}
.stage-editor-row[open] {
border-color: rgba(239, 111, 42, 0.3);
box-shadow: 0 18px 38px rgba(239, 111, 42, 0.12);
}
.stage-editor-row__summary::-webkit-details-marker {
display: none;
}
.stage-editor-row__summary {
user-select: none;
}
.stage-editor-row__drag {
cursor: grab;
letter-spacing: 0.08em;
}
.stage-editor-row__move {
flex: 0 0 auto;
}
.stage-editor-row--dragging {
opacity: 0.82;
transform: scale(0.995);
}
.stage-editor-row--drop-target {
border-color: rgba(239, 111, 42, 0.42);
box-shadow: 0 0 0 3px rgba(239, 111, 42, 0.12);
}
.deal-layout-tool {
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}
.deal-layout-preview {
display: grid;
gap: 1rem;
grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.7fr) minmax(180px, 0.9fr);
align-items: start;
}
.deal-layout-preview__panel,
.deal-detail-placeholder,
.deal-layout-preview-block {
border-radius: 1.5rem;
}
.deal-layout-preview__panel {
min-width: 0;
border: 1px solid rgba(226, 232, 240, 0.88);
background: rgba(248, 250, 252, 0.88);
padding: 1rem;
}
.deal-layout-preview__panel--properties {
min-height: 100%;
}
.deal-layout-quickdock {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.deal-layout-quickdock__button {
display: flex;
align-items: center;
gap: 0.9rem;
border: 1px solid rgba(226, 232, 240, 0.88);
background: rgba(255, 255, 255, 0.88);
border-radius: 1.5rem;
padding: 1rem 1.05rem;
text-align: left;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}
.deal-layout-quickdock__button:hover {
border-color: rgba(239, 111, 42, 0.34);
box-shadow: 0 18px 32px rgba(239, 111, 42, 0.12);
transform: translateY(-1px);
}
.deal-layout-quickdock__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.9rem;
height: 2.9rem;
border-radius: 1rem;
background: rgba(239, 111, 42, 0.12);
color: #c2410c;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
flex-shrink: 0;
}
.deal-layout-quickdock__copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.deal-layout-quickdock__copy strong {
font-size: 0.97rem;
}
.deal-layout-quickdock__copy small {
margin-top: 0.18rem;
color: rgb(100 116 139);
font-size: 0.78rem;
line-height: 1.35;
}
.deal-layout-preview-stack {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deal-detail-property-layout,
.deal-detail-property-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
.deal-detail-property-section__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.85rem;
margin-bottom: 0.95rem;
border-bottom: 1px solid rgba(226, 232, 240, 0.88);
}
.deal-layout-preview-block {
border: 1px solid rgba(226, 232, 240, 0.88);
background: rgba(255, 255, 255, 0.86);
padding: 0.95rem 1rem;
}
.deal-layout-preview-block--heading {
border-style: dashed;
}
.deal-layout-preview-block--equation {
box-shadow: inset 0 0 0 1px rgba(239, 111, 42, 0.08);
}
.deal-layout-header-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
row-gap: 0.5rem;
column-gap: 0.55rem;
flex-shrink: 0;
}
.deal-layout-section-header,
.deal-layout-block-header {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.deal-layout-builder-identity {
display: flex;
align-items: flex-start;
gap: 0.85rem;
min-width: 0;
}
.deal-layout-builder-badge {
flex: 0 0 auto;
}
.deal-layout-builder-copy {
display: flex;
flex-direction: column;
gap: 0.22rem;
min-width: 0;
}
.deal-layout-builder-eyebrow {
color: #ef6f2a;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.deal-layout-builder-title {
color: #0f172a;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.25;
overflow-wrap: anywhere;
}
.deal-layout-builder-meta {
color: rgb(100 116 139);
font-size: 0.84rem;
line-height: 1.45;
letter-spacing: 0.01em;
text-transform: none;
overflow-wrap: anywhere;
}
.deal-layout-header-actions [data-layout-toggle],
.deal-layout-header-actions [data-layout-section-toggle],
.deal-layout-header-actions [data-layout-move],
.deal-layout-header-actions [data-layout-section-move],
.deal-layout-header-actions [data-layout-remove],
.deal-layout-header-actions [data-layout-section-remove] {
width: 2.75rem;
height: 2.75rem;
border-radius: 1rem;
}
.deal-layout-header-actions [data-layout-remove],
.deal-layout-header-actions [data-layout-section-remove] {
font-size: 0.95rem;
line-height: 1;
}
.deal-layout-header-actions [data-layout-move-out] {
min-height: 2.75rem;
border-radius: 1rem;
padding-inline: 0.9rem;
}
.deal-layout-section,
.deal-layout-child-row {
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.deal-layout-section--open,
.deal-layout-child-row--open {
border-color: rgba(239, 111, 42, 0.3);
box-shadow: 0 20px 36px rgba(239, 111, 42, 0.12);
}
.deal-layout-section [data-layout-section-panel],
.deal-layout-child-row [data-layout-panel] {
background: rgba(248, 250, 252, 0.78);
border-radius: 0 0 1.5rem 1.5rem;
}
.deal-layout-builder-dropzone {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
min-height: 5rem;
border-radius: 1.5rem;
transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.deal-layout-summary-list {
display: grid;
gap: 1rem;
min-height: 5rem;
border-radius: 1.5rem;
transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.deal-layout-builder-dropzone > [data-layout-list-empty] {
grid-column: 1 / -1;
}
.deal-layout-summary-list > [data-layout-list-empty] {
grid-column: 1 / -1;
}
.deal-layout-builder-dropzone--active {
background: rgba(239, 111, 42, 0.06);
box-shadow: inset 0 0 0 1px rgba(239, 111, 42, 0.18);
}
.deal-layout-summary-row {
min-width: 0;
}
.deal-layout-builder-card--span-1 {
grid-column: span 1;
}
.deal-layout-builder-card--span-2 {
grid-column: span 2;
}
.deal-layout-section-preview,
.deal-layout-preview-card,
.deal-detail-property-section,
.deal-detail-property-block {
min-width: 0;
}
.deal-layout-section-preview--span-1,
.deal-layout-preview-card--span-1,
.deal-detail-property-section--span-1,
.deal-detail-property-block--span-1 {
grid-column: span 1;
}
.deal-layout-section-preview--span-2,
.deal-layout-preview-card--span-2,
.deal-detail-property-section--span-2,
.deal-detail-property-block--span-2 {
grid-column: span 2;
}
.deal-detail-property-section--span-1,
.deal-detail-property-block--span-1,
.deal-detail-property-section--span-2,
.deal-detail-property-block--span-2 {
grid-column: span 1;
}
.deal-layout-section-preview__grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deal-layout-preview-card,
.deal-detail-property-block {
border: 1px solid rgba(226, 232, 240, 0.88);
background: rgba(255, 255, 255, 0.86);
border-radius: 1.5rem;
padding: 1rem;
}
.deal-detail-property-section {
border: 1px dashed rgba(148, 163, 184, 0.52);
background: rgba(255, 255, 255, 0.72);
border-radius: 1.5rem;
padding: 1rem;
}
.deal-detail-property-block--empty {
border-style: dashed;
text-align: center;
}
.deal-layout-preview-placeholder {
border: 1px dashed rgba(148, 163, 184, 0.52);
background: rgba(255, 255, 255, 0.72);
padding: 1.15rem;
}
.deal-layout-row__type {
background: rgba(239, 111, 42, 0.1);
color: #c2410c;
}
.deal-detail-shell {
display: grid;
gap: 1.5rem;
align-items: start;
grid-template-columns: minmax(280px, 25fr) minmax(0, 55fr) minmax(220px, 20fr);
}
.deal-detail-panel {
min-width: 0;
}
.deal-detail-panel--properties,
.deal-detail-panel--integrations {
position: sticky;
top: 1rem;
}
html.dark .deal-accent-panel,
html[data-theme="dark"] .deal-accent-panel {
background: linear-gradient(180deg, color-mix(in srgb, var(--deal-accent-surface-dark) 82%, rgba(15, 23, 42, 0.96) 18%), rgba(15, 23, 42, 0.9));
border-color: var(--deal-accent-border-dark);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark .deal-stage-header,
html[data-theme="dark"] .deal-stage-header {
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 34%),
linear-gradient(180deg, rgba(73, 39, 18, 0.94), rgba(46, 26, 17, 0.88));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 26px rgba(2, 6, 23, 0.22);
}
html.dark .deal-board-arrow,
html[data-theme="dark"] .deal-board-arrow {
border-color: rgba(51, 65, 85, 0.82);
background: rgba(15, 23, 42, 0.72);
color: rgb(226 232 240);
}
html.dark .deal-board-fade--left,
html[data-theme="dark"] .deal-board-fade--left {
background: linear-gradient(90deg, rgba(2, 6, 23, 0.94), rgba(2, 6, 23, 0));
}
html.dark .deal-board-fade--right,
html[data-theme="dark"] .deal-board-fade--right {
background: linear-gradient(270deg, rgba(2, 6, 23, 0.94), rgba(2, 6, 23, 0));
}
html.dark .deal-stage-dot,
html[data-theme="dark"] .deal-stage-dot {
box-shadow: 0 0 0 5px var(--deal-accent-surface-dark);
}
html.dark .deal-card__value-badge,
html[data-theme="dark"] .deal-card__value-badge {
border-color: rgba(251, 146, 60, 0.28);
background: linear-gradient(135deg, rgba(249, 115, 22, 0.22), rgba(234, 179, 8, 0.18));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
color: #fdba74;
}
html.dark .deal-card:hover,
html[data-theme="dark"] .deal-card:hover {
border-color: var(--deal-accent-border-dark);
}
html.dark .deal-stage-status-dot,
html[data-theme="dark"] .deal-stage-status-dot {
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.5);
}
html.dark .deal-stage-description-trigger,
html[data-theme="dark"] .deal-stage-description-trigger {
border-color: rgba(251, 146, 60, 0.24);
background: rgba(15, 23, 42, 0.68);
color: rgba(253, 186, 116, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark .deal-stage-empty-illustration,
html[data-theme="dark"] .deal-stage-empty-illustration {
color: rgba(251, 146, 60, 0.4);
}
html.dark .deal-stage-empty-cloud,
html[data-theme="dark"] .deal-stage-empty-cloud {
fill: rgba(30, 41, 59, 0.82);
stroke: rgba(148, 163, 184, 0.24);
}
html.dark .deal-stage-empty-screen,
html[data-theme="dark"] .deal-stage-empty-screen {
fill: rgba(69, 39, 28, 0.84);
stroke: rgba(251, 146, 60, 0.36);
}
html.dark .deal-stage-empty-stand,
html.dark .deal-stage-empty-spark,
html.dark .deal-stage-empty-plus,
html[data-theme="dark"] .deal-stage-empty-stand,
html[data-theme="dark"] .deal-stage-empty-spark,
html[data-theme="dark"] .deal-stage-empty-plus {
stroke: rgba(251, 146, 60, 0.58);
}
html.dark .deal-stage-empty-plus-ring,
html[data-theme="dark"] .deal-stage-empty-plus-ring {
fill: rgba(15, 23, 42, 0.9);
stroke: rgba(148, 163, 184, 0.24);
}
html.dark .deal-detail-heading-card,
html[data-theme="dark"] .deal-detail-heading-card {
background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
border-color: rgba(245, 158, 11, 0.28);
box-shadow: 0 18px 38px rgba(2, 6, 23, 0.34);
}
html.dark .deal-detail-property-card,
html.dark .deal-detail-activity-card,
html.dark .deal-detail-meta-card,
html.dark .deal-detail-activity-body,
html.dark .deal-detail-equation-card,
html.dark .deal-detail-empty-rail,
html[data-theme="dark"] .deal-detail-property-card,
html[data-theme="dark"] .deal-detail-activity-card,
html[data-theme="dark"] .deal-detail-meta-card,
html[data-theme="dark"] .deal-detail-activity-body,
html[data-theme="dark"] .deal-detail-equation-card,
html[data-theme="dark"] .deal-detail-empty-rail {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
border-color: rgba(51, 65, 85, 0.92);
box-shadow: 0 22px 44px rgba(2, 6, 23, 0.4);
}
html.dark .deal-detail-activity-body,
html.dark .deal-detail-empty-rail,
html[data-theme="dark"] .deal-detail-activity-body,
html[data-theme="dark"] .deal-detail-empty-rail {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.84));
}
html.dark .stage-editor-row[open],
html[data-theme="dark"] .stage-editor-row[open] {
border-color: rgba(251, 146, 60, 0.28);
box-shadow: 0 18px 38px rgba(251, 146, 60, 0.16);
}
html.dark .stage-editor-row--drop-target,
html[data-theme="dark"] .stage-editor-row--drop-target {
border-color: rgba(251, 146, 60, 0.42);
box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.14);
}
html.dark .deal-layout-preview__panel,
html[data-theme="dark"] .deal-layout-preview__panel {
border-color: rgba(51, 65, 85, 0.82);
background: rgba(15, 23, 42, 0.72);
}
html.dark .deal-layout-builder-title,
html[data-theme="dark"] .deal-layout-builder-title {
color: #f8fafc;
}
html.dark .deal-layout-builder-meta,
html[data-theme="dark"] .deal-layout-builder-meta {
color: rgb(148 163 184);
}
html.dark .deal-layout-quickdock__button,
html[data-theme="dark"] .deal-layout-quickdock__button {
border-color: rgba(51, 65, 85, 0.82);
background: rgba(15, 23, 42, 0.82);
box-shadow: 0 18px 30px rgba(2, 6, 23, 0.22);
}
html.dark .deal-layout-quickdock__copy small,
html[data-theme="dark"] .deal-layout-quickdock__copy small {
color: rgb(148 163 184);
}
html.dark .deal-layout-quickdock__icon,
html[data-theme="dark"] .deal-layout-quickdock__icon {
background: rgba(239, 111, 42, 0.18);
color: #fdba74;
}
html.dark .deal-layout-preview-card,
html.dark .deal-detail-property-block,
html[data-theme="dark"] .deal-layout-preview-card,
html[data-theme="dark"] .deal-detail-property-block {
border-color: rgba(51, 65, 85, 0.82);
background: rgba(15, 23, 42, 0.82);
}
html.dark .deal-layout-preview-block,
html[data-theme="dark"] .deal-layout-preview-block {
border-color: rgba(51, 65, 85, 0.82);
background: rgba(15, 23, 42, 0.82);
}
html.dark .deal-detail-property-section,
html[data-theme="dark"] .deal-detail-property-section {
border-color: rgba(71, 85, 105, 0.62);
background: rgba(2, 6, 23, 0.68);
}
html.dark .deal-detail-property-section__header,
html[data-theme="dark"] .deal-detail-property-section__header {
border-bottom-color: rgba(51, 65, 85, 0.82);
}
html.dark .deal-layout-section [data-layout-section-panel],
html.dark .deal-layout-child-row [data-layout-panel],
html[data-theme="dark"] .deal-layout-section [data-layout-section-panel],
html[data-theme="dark"] .deal-layout-child-row [data-layout-panel] {
background: rgba(2, 6, 23, 0.46);
}
html.dark .deal-layout-builder-dropzone--active,
html[data-theme="dark"] .deal-layout-builder-dropzone--active {
background: rgba(239, 111, 42, 0.08);
box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.24);
}
html.dark .deal-layout-preview-placeholder,
html[data-theme="dark"] .deal-layout-preview-placeholder {
border-color: rgba(71, 85, 105, 0.62);
background: rgba(2, 6, 23, 0.68);
}
html.dark .deal-layout-row__type,
html[data-theme="dark"] .deal-layout-row__type {
background: rgba(239, 111, 42, 0.18);
color: #fdba74;
}
@media (max-width: 767px) {
.deal-stage-column {
width: 17.25rem;
min-width: 17.25rem;
max-width: 17.25rem;
}
.deal-board-arrow {
width: 2.65rem;
height: 2.65rem;
}
.deal-board-fade {
width: 3.5rem;
}
.deal-card {
min-height: 8rem;
}
}
@media (min-width: 640px) {
.app-shell-header {
margin-inline: -1.5rem;
margin-top: -1rem;
padding-inline: 1.5rem;
}
}
@media (max-width: 1023px) {
.deal-layout-preview,
.deal-detail-shell {
grid-template-columns: 1fr;
}
.deal-layout-section-header,
.deal-layout-block-header {
grid-template-columns: 1fr;
}
.deal-layout-header-actions {
justify-content: flex-start;
}
.deal-layout-quickdock {
grid-template-columns: 1fr;
}
.deal-layout-preview-stack,
.deal-layout-section-preview__grid,
.deal-layout-builder-dropzone,
.deal-detail-property-layout,
.deal-detail-property-grid {
grid-template-columns: 1fr;
}
.deal-layout-builder-card--span-1,
.deal-layout-builder-card--span-2,
.deal-layout-section-preview--span-1,
.deal-layout-preview-card--span-1,
.deal-detail-property-section--span-1,
.deal-detail-property-block--span-1,
.deal-layout-section-preview--span-2,
.deal-layout-preview-card--span-2,
.deal-detail-property-section--span-2,
.deal-detail-property-block--span-2 {
grid-column: span 1;
}
.deal-detail-panel--properties,
.deal-detail-panel--integrations {
position: static;
}
}
@media (min-width: 1024px) {
.app-shell-header {
margin-inline: -2rem;
padding-inline: 2rem;
}
}
@media (min-width: 1600px) {
.deal-detail-property-layout,
.deal-detail-property-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deal-detail-property-section--span-1,
.deal-detail-property-block--span-1 {
grid-column: span 1;
}
.deal-detail-property-section--span-2,
.deal-detail-property-block--span-2 {
grid-column: span 2;
}
}
/* === Deals CRM Redesign === */
.deal-board-page,
.deal-detail-page,
[data-deal-accent] {
--deal-accent-color: var(--color-accent);
--deal-accent-surface-light: var(--color-accent-muted);
--deal-accent-border-light: rgba(239, 111, 42, 0.28);
--deal-accent-surface-dark: rgba(239, 111, 42, 0.18);
--deal-accent-border-dark: rgba(239, 111, 42, 0.38);
--deal-accent-shadow-light: rgba(239, 111, 42, 0.14);
--deal-accent-shadow-dark: rgba(239, 111, 42, 0.22);
}
.deal-board-page,
.deal-detail-page {
width: 100%;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
.deal-board-page > *,
.deal-detail-page > * {
min-width: 0;
max-width: 100%;
}
.deal-board-summary,
.deal-detail-summary {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, minmax(0, 1fr));
background: transparent;
border: 0;
box-shadow: none;
}
.deal-board-workspace {
display: grid;
gap: 24px;
min-width: 0;
max-width: 100%;
overflow: hidden;
background: var(--color-bg-surface) !important;
border-color: var(--color-border) !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.deal-board-toolbar,
.deal-modal-head,
.deal-modal-footer,
.deal-detail-actions,
.deal-detail-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.deal-modal-footer {
align-items: center;
justify-content: flex-end;
border-top: 1px solid var(--color-border);
padding-top: 16px;
}
.deal-pipeline-switcher {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.deal-pipeline-chip {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 10px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
padding: 8px 12px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s;
}
.deal-pipeline-chip:hover,
.deal-pipeline-chip.is-active {
border-color: var(--deal-accent-border-light);
background: var(--deal-accent-surface-light);
color: var(--color-text-primary);
transform: translateY(-1px);
}
.deal-board-shell {
position: relative;
width: 100%;
min-width: 0;
max-width: 100%;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
}
.deal-board-scroll {
width: 100%;
min-width: 0;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.deal-board-scroll::-webkit-scrollbar {
display: none;
}
.deal-board-lanes {
display: flex;
width: max-content;
min-width: max-content;
gap: 16px;
align-items: stretch;
}
.deal-stage-column {
display: flex;
width: clamp(18rem, 24vw, 20rem);
min-width: clamp(18rem, 24vw, 20rem);
max-width: clamp(18rem, 24vw, 20rem);
flex-direction: column;
gap: 16px;
background: var(--color-bg-surface-raised) !important;
border-color: var(--color-border) !important;
box-shadow: none !important;
padding: 16px;
}
.deal-stage-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--deal-accent-border-light);
border-radius: 16px;
background: var(--deal-accent-surface-light);
padding: 12px;
box-shadow: none;
}
.deal-stage-header-main,
.deal-stage-header-actions,
.deal-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.deal-stage-header-main {
align-items: center;
}
.deal-stage-header-actions {
flex: 0 0 auto;
align-items: center;
}
.deal-stage-dot {
display: inline-flex;
width: 10px;
height: 10px;
flex: 0 0 auto;
border-radius: 999px;
background: var(--deal-accent-color);
box-shadow: 0 0 0 5px var(--deal-accent-surface-light);
}
.deal-stage-description-trigger,
.deal-stage-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
cursor: help;
}
.deal-stage-status-pill {
cursor: default;
}
.deal-stage-status-dot {
display: inline-flex;
width: 9px;
height: 9px;
border-radius: 999px;
box-shadow: 0 0 0 4px var(--color-bg-subtle);
}
.deal-stage-status-dot--active {
background: #1a7f45;
}
.deal-stage-status-dot--closed {
background: #a33030;
}
.deal-stage-stats {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deal-stage-stat {
display: flex;
min-height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg-subtle);
color: var(--color-text-primary);
font-size: 0.875rem;
font-weight: 700;
box-shadow: none;
text-align: center;
}
.deal-stage-column__list {
display: grid;
gap: 12px;
max-height: 48rem;
overflow-y: auto;
padding-right: 2px;
}
.deal-card {
position: relative;
display: grid;
min-height: 132px;
gap: 12px;
border: 1px solid var(--color-border) !important;
border-radius: 16px;
background: var(--color-bg-surface) !important;
color: var(--color-text-primary);
padding: 16px;
box-shadow: none;
transition: box-shadow 0.2s, transform 0.2s, border-color 0.15s;
}
.deal-card:hover {
border-color: var(--deal-accent-border-light) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.deal-card-link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 16px;
}
.deal-card-title {
color: var(--color-text-primary);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.35;
}
.deal-card-meta {
display: grid;
gap: 8px;
color: var(--color-text-secondary);
font-size: 0.8125rem;
}
.deal-card__meta-row {
display: flex;
min-width: 0;
align-items: center;
gap: 6px;
line-height: 1.45;
}
.deal-card__meta-label {
flex: 0 0 auto;
color: var(--color-text-primary);
font-weight: 700;
white-space: nowrap;
}
.deal-card__meta-value {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.deal-card__value-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-accent-muted);
color: var(--color-accent);
padding: 4px 10px;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0;
white-space: nowrap;
box-shadow: none;
}
.deal-empty-state {
display: grid;
justify-items: center;
gap: 12px;
border: 1px dashed var(--color-border-strong) !important;
border-radius: 16px;
background: var(--color-bg-subtle) !important;
color: var(--color-text-primary);
padding: 32px 20px;
text-align: center;
box-shadow: none;
}
.deal-stage-empty-illustration {
display: flex;
justify-content: center;
color: var(--color-accent);
opacity: 0.55;
}
.deal-stage-empty-cloud {
fill: var(--color-bg-surface);
stroke: currentColor;
stroke-width: 1.6;
}
.deal-stage-empty-screen,
.deal-stage-empty-plus-ring {
fill: var(--color-accent-muted);
stroke: currentColor;
stroke-width: 1.7;
}
.deal-stage-empty-stand,
.deal-stage-empty-spark,
.deal-stage-empty-plus {
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.1;
}
.deal-board-arrow,
.deal-board-fade {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
transition: opacity 0.18s ease;
}
.deal-board-arrow {
top: 50%;
bottom: auto;
display: inline-flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
transform: translateY(-50%);
}
.deal-board-arrow:hover {
border-color: var(--color-border-strong);
color: var(--color-accent);
opacity: 1;
}
.deal-board-arrow.is-hidden,
.deal-board-fade.is-hidden {
opacity: 0;
pointer-events: none;
}
.deal-board-arrow--left {
left: 12px;
}
.deal-board-arrow--right {
right: 12px;
}
.deal-board-fade {
width: 64px;
pointer-events: none;
}
.deal-board-fade--left {
left: 0;
background: linear-gradient(90deg, var(--color-bg-surface), transparent);
}
.deal-board-fade--right {
right: 0;
background: linear-gradient(270deg, var(--color-bg-surface), transparent);
}
.deal-modal-backdrop {
background: rgba(15, 15, 14, 0.62);
backdrop-filter: blur(8px);
}
.deal-create-modal {
gap: 20px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.deal-create-form {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
gap: 20px;
}
.deal-create-form label,
.deal-form-label {
display: block;
color: var(--color-text-primary);
font-size: 0.8125rem;
font-weight: 600;
margin-bottom: 8px;
}
.deal-create-form .app-form-control,
.deal-detail-control {
width: 100%;
border-radius: 10px !important;
}
.deal-detail-actions {
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.deal-detail-summary {
align-items: stretch;
}
.deal-detail-summary-value {
color: var(--color-text-primary);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
overflow-wrap: anywhere;
}
.deal-detail-shell {
display: grid;
gap: 24px;
align-items: start;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.75fr) minmax(240px, 0.8fr);
}
.deal-detail-panel {
min-width: 0;
display: grid;
gap: 20px;
}
.deal-detail-panel--properties,
.deal-detail-panel--integrations {
position: sticky;
top: 80px;
}
.deal-detail-panel-head {
border-bottom: 1px solid var(--color-border);
padding-bottom: 16px;
}
.deal-detail-form,
.deal-detail-rail-list {
display: grid;
gap: 16px;
}
.deal-detail-property-layout,
.deal-detail-property-grid {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
.deal-detail-property-section {
min-width: 0;
border: 1px dashed var(--color-border-strong);
border-radius: 16px;
background: var(--color-bg-subtle);
padding: 16px;
}
.deal-detail-property-section__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 16px;
padding-bottom: 12px;
}
.deal-detail-property-block {
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-surface);
padding: 16px;
}
.deal-detail-property-block--empty {
border-style: dashed;
text-align: center;
}
.deal-detail-equation-card {
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg-subtle);
color: var(--color-text-primary);
padding: 12px;
font-size: 0.875rem;
font-weight: 700;
}
.deal-detail-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.deal-detail-tab {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
padding: 8px 14px;
font-size: 0.875rem;
font-weight: 600;
}
.deal-detail-tab:hover,
.deal-detail-tab.is-active {
border-color: var(--deal-accent-border-light, rgba(239, 111, 42, 0.42));
background: var(--deal-accent-surface-light, rgba(239, 111, 42, 0.1));
color: var(--color-text-primary);
}
.deal-contact-management {
display: grid;
gap: 14px;
border-top: 1px solid var(--color-border);
padding-top: 16px;
}
.deal-contact-management select[multiple] {
min-height: 132px;
}
.deal-email-toolbar,
.deal-email-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.deal-email-list {
display: grid;
gap: 12px;
min-width: 0;
}
.deal-email-card {
display: grid;
gap: 14px;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-surface);
padding: 18px;
}
.deal-email-card__subject {
overflow: hidden;
color: var(--color-text-primary);
font-size: 0.95rem;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.deal-email-addresses {
display: grid;
gap: 7px;
margin: 0;
}
.deal-email-addresses > div {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 8px;
min-width: 0;
}
.deal-email-addresses dt {
color: var(--color-text-tertiary);
font-size: 0.7rem;
font-weight: 750;
text-transform: uppercase;
}
.deal-email-addresses dd,
.deal-email-preview,
.deal-email-body {
overflow-wrap: anywhere;
color: var(--color-text-secondary);
font-size: 0.82rem;
line-height: 1.65;
}
.deal-email-details {
border-top: 1px solid var(--color-border);
padding-top: 12px;
}
.deal-email-details summary {
color: var(--color-text-primary);
cursor: pointer;
font-size: 0.78rem;
font-weight: 700;
}
.deal-email-body {
max-height: 360px;
margin-top: 12px;
overflow: auto;
white-space: normal;
}
html[data-theme="dark"] .deal-detail-tab:hover,
html[data-theme="dark"] .deal-detail-tab.is-active {
border-color: var(--deal-accent-border-dark, rgba(239, 111, 42, 0.48));
background: var(--deal-accent-surface-dark, rgba(239, 111, 42, 0.14));
}
.deal-detail-activity-body {
display: grid;
justify-items: center;
gap: 12px;
border: 1px dashed var(--color-border-strong);
border-radius: 16px;
background: var(--color-bg-subtle);
color: var(--color-text-primary);
padding: 48px 24px;
text-align: center;
}
.deal-detail-rail-item {
display: flex;
gap: 12px;
align-items: flex-start;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-subtle);
padding: 16px;
}
html[data-theme="dark"] .deal-pipeline-chip:hover,
html[data-theme="dark"] .deal-pipeline-chip.is-active {
border-color: var(--deal-accent-border-dark);
background: var(--deal-accent-surface-dark);
}
html[data-theme="dark"] .deal-stage-header {
border-color: var(--deal-accent-border-dark);
background: var(--deal-accent-surface-dark);
}
html[data-theme="dark"] .deal-stage-dot {
box-shadow: 0 0 0 5px var(--deal-accent-surface-dark);
}
html[data-theme="dark"] .deal-card:hover {
border-color: var(--deal-accent-border-dark) !important;
}
html[data-theme="dark"] .deal-card__value-badge {
background: rgba(239, 111, 42, 0.18);
color: #ffb58f;
}
html[data-theme="dark"] .deal-modal-backdrop {
background: rgba(0, 0, 0, 0.72);
}
@media (max-width: 1279px) {
.deal-board-summary,
.deal-detail-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deal-detail-shell {
grid-template-columns: 1fr;
}
.deal-detail-panel--properties,
.deal-detail-panel--integrations {
position: static;
}
}
@media (max-width: 767px) {
.deal-board-toolbar,
.deal-modal-head,
.deal-modal-footer,
.deal-detail-actions,
.deal-detail-panel-head,
.deal-detail-property-section__header {
flex-direction: column;
align-items: stretch;
}
.deal-board-summary,
.deal-detail-summary {
grid-template-columns: 1fr;
}
.deal-stage-column {
width: 17.5rem;
min-width: 17.5rem;
max-width: 17.5rem;
padding: 12px;
}
.deal-board-lanes {
gap: 12px;
}
.deal-card-head {
flex-direction: column;
}
.deal-board-arrow {
width: 40px;
height: 40px;
}
.deal-board-fade {
width: 48px;
}
.deal-create-modal {
padding: 20px;
}
.deal-modal-footer .bos-btn-ghost,
.deal-modal-footer .bos-btn-primary,
.deal-detail-actions .bos-btn-ghost {
width: 100%;
}
}
/* Unified CRM directory, profile, and relationship components */
.crm-directory-page,
.crm-profile-page {
gap: 24px;
}
.crm-primary-action {
display: inline-flex;
align-items: center;
gap: 9px;
white-space: nowrap;
}
.crm-primary-action > span {
font-size: 1.1rem;
line-height: 1;
}
.crm-directory-surface {
display: grid;
gap: 20px;
overflow: hidden;
}
.crm-directory-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 20px;
}
.crm-directory-search {
display: flex;
flex: 1 1 640px;
align-items: center;
gap: 10px;
max-width: 820px;
}
.crm-directory-search .app-form-control {
min-width: 0;
flex: 1 1 auto;
}
.crm-directory-count {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
border-left: 1px solid var(--color-border);
padding-left: 18px;
}
.crm-directory-count > span:last-child {
display: grid;
line-height: 1.05;
}
.crm-directory-count strong {
color: var(--color-text-primary);
font-size: 1.125rem;
}
.crm-directory-count small {
color: var(--color-text-tertiary);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.crm-record-table__head,
.crm-record-row {
display: grid;
grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 1fr) minmax(230px, 1.2fr) 32px;
align-items: center;
gap: 18px;
}
.crm-record-table__head {
color: var(--color-text-tertiary);
padding: 0 16px 10px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.crm-record-list {
display: grid;
gap: 8px;
}
.crm-record-row {
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: 13px 16px;
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.crm-record-row:hover {
border-color: rgba(239, 111, 42, 0.48);
background: rgba(239, 111, 42, 0.035);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
transform: translateY(-1px);
}
.crm-record-identity {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
min-width: 0;
}
.crm-avatar {
width: 40px;
height: 40px;
font-size: 0.72rem;
}
.crm-record-cell {
display: grid;
gap: 2px;
min-width: 0;
}
.crm-record-cell strong {
overflow: hidden;
color: var(--color-text-secondary);
font-size: 0.8125rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-record-cell small {
overflow: hidden;
color: var(--color-text-tertiary);
font-size: 0.75rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-mobile-label {
display: none;
}
.crm-record-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--color-border);
border-radius: 999px;
color: var(--color-text-tertiary);
font-size: 0.95rem;
transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.crm-record-row:hover .crm-record-arrow,
.crm-company-card:hover .crm-record-arrow,
.crm-contact-card:hover .crm-record-arrow,
.crm-related-card:hover .crm-record-arrow,
.crm-profile-company-card:hover .crm-record-arrow {
border-color: rgba(239, 111, 42, 0.42);
background: rgba(239, 111, 42, 0.1);
color: #ef6f2a;
}
.crm-company-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crm-company-card {
display: grid;
gap: 18px;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: 18px;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.crm-company-card:hover {
border-color: rgba(239, 111, 42, 0.48);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}
.crm-company-card__head,
.crm-profile-company-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.crm-company-avatar {
width: 48px;
height: 48px;
font-size: 0.78rem;
}
.crm-company-card__title {
display: block;
overflow: hidden;
margin-bottom: 4px;
font-size: 1rem;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-company-card__details {
display: grid;
gap: 10px;
grid-template-columns: minmax(76px, 0.5fr) minmax(0, 1.5fr);
border-top: 1px solid var(--color-border);
padding-top: 14px;
}
.crm-company-card__details > span {
display: grid;
gap: 3px;
min-width: 0;
}
.crm-company-card__details small,
.crm-profile-company-card small,
.crm-company-detail-list small {
color: var(--color-text-tertiary);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.crm-company-card__details strong {
overflow: hidden;
color: var(--color-text-secondary);
font-size: 0.78rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-directory-empty {
min-height: 280px;
}
.crm-profile-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-top: 3px solid #ef6f2a;
}
.crm-profile-identity {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 18px;
min-width: 0;
}
.crm-profile-avatar {
width: 68px;
height: 68px;
box-shadow: 0 0 0 6px rgba(239, 111, 42, 0.08);
font-size: 1rem;
}
.crm-profile-subtitle {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
color: var(--color-text-secondary);
font-size: 0.875rem;
}
.crm-profile-subtitle a {
color: #d85d1f;
font-weight: 650;
}
.crm-profile-actions {
display: flex;
align-items: center;
gap: 10px;
}
.crm-profile-layout {
display: grid;
align-items: start;
gap: 24px;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.7fr);
}
.crm-profile-main,
.crm-profile-aside,
.crm-profile-section {
display: grid;
gap: 20px;
}
.crm-profile-aside {
position: sticky;
top: 80px;
}
.crm-section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.crm-detail-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.crm-detail-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 11px;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-bg-subtle);
padding: 14px;
}
.crm-detail-item > span:last-child {
display: grid;
gap: 3px;
min-width: 0;
}
.crm-detail-item small,
.crm-related-card small,
.crm-contact-card small,
.crm-inline-empty small {
overflow: hidden;
color: var(--color-text-tertiary);
font-size: 0.75rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-detail-item strong {
overflow: hidden;
color: var(--color-text-primary);
font-size: 0.84rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-related-list {
display: grid;
gap: 9px;
}
.crm-related-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: 13px 14px;
transition: border-color 160ms ease, background 160ms ease;
}
.crm-related-card:hover {
border-color: rgba(239, 111, 42, 0.42);
background: rgba(239, 111, 42, 0.035);
}
.crm-related-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: rgba(239, 111, 42, 0.1);
color: #ef6f2a;
}
.crm-related-card > span:nth-child(2) {
display: grid;
gap: 2px;
}
.crm-related-card__value {
color: var(--color-text-primary);
font-size: 0.82rem;
font-weight: 750;
white-space: nowrap;
}
.crm-inline-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 120px;
border: 1px dashed var(--color-border-strong);
border-radius: 14px;
background: var(--color-bg-subtle);
color: var(--color-text-primary);
padding: 20px;
text-align: left;
}
.crm-inline-empty > span:last-child {
display: grid;
gap: 3px;
}
.crm-contact-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.crm-contact-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: 13px;
transition: border-color 160ms ease, background 160ms ease;
}
.crm-contact-card:hover {
border-color: rgba(239, 111, 42, 0.42);
background: rgba(239, 111, 42, 0.035);
}
.crm-contact-card > span:nth-child(2) {
display: grid;
gap: 2px;
}
.crm-contact-grid__empty {
grid-column: 1 / -1;
}
.crm-profile-company-card {
display: grid;
gap: 15px;
border: 1px solid var(--color-border);
background: var(--color-bg-surface);
color: var(--color-text-primary);
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.crm-profile-company-card:hover {
border-color: rgba(239, 111, 42, 0.45);
box-shadow: 0 12px 25px rgba(15, 23, 42, 0.07);
transform: translateY(-1px);
}
.crm-profile-company-card > span:last-child {
display: grid;
gap: 4px;
}
.crm-profile-company-card strong {
font-size: 1rem;
}
.crm-profile-company-card > span:last-child > span {
color: var(--color-text-secondary);
font-size: 0.8rem;
}
.crm-notes-card,
.crm-company-details-card {
display: grid;
gap: 14px;
}
.crm-company-detail-list {
display: grid;
gap: 0;
}
.crm-company-detail-list > div {
display: grid;
gap: 4px;
border-top: 1px solid var(--color-border);
padding: 12px 0;
}
.crm-company-detail-list strong {
overflow-wrap: anywhere;
color: var(--color-text-primary);
font-size: 0.82rem;
font-weight: 650;
}
.crm-record-audit {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--color-text-tertiary);
padding: 0 4px;
font-size: 0.7rem;
}
.crm-modal-shell {
position: fixed;
z-index: 70;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
}
.crm-modal-shell.hidden {
display: none !important;
}
.crm-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.52);
backdrop-filter: blur(5px);
}
.crm-modal-dialog {
position: relative;
z-index: 1;
display: grid;
gap: 0;
width: min(760px, 100%);
max-height: min(88vh, 820px);
overflow: hidden;
padding: 0;
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
}
.crm-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
border-bottom: 1px solid var(--color-border);
padding: 22px 24px;
}
.crm-modal-title-group {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 14px;
}
.crm-modal-icon {
margin-top: 1px;
}
.crm-modal-form {
display: grid;
min-height: 0;
overflow: hidden;
}
.crm-modal-fields {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow-y: auto;
padding: 22px 24px;
}
.crm-form-field {
min-width: 0;
}
.crm-form-field--wide {
grid-column: 1 / -1;
}
.crm-form-field label {
display: block;
margin-bottom: 7px;
color: var(--color-text-primary);
font-size: 0.78rem;
font-weight: 650;
}
.crm-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
border-top: 1px solid var(--color-border);
background: var(--color-bg-subtle);
padding: 16px 24px;
}
.deal-crm-blocks {
display: grid;
gap: 9px;
}
.deal-crm-blocks__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--color-text-tertiary);
padding: 0 2px 2px;
font-size: 0.64rem;
font-weight: 750;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.deal-crm-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: 13px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: 11px;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
a.deal-crm-card:hover {
border-color: var(--deal-accent-border-light, rgba(239, 111, 42, 0.42));
background: var(--deal-accent-surface-light, rgba(239, 111, 42, 0.06));
transform: translateY(-1px);
}
.deal-crm-card--empty {
border-style: dashed;
}
.deal-crm-avatar {
width: 36px;
height: 36px;
font-size: 0.66rem;
}
.deal-crm-card__label {
display: block;
margin-bottom: 1px;
color: var(--color-text-tertiary);
font-size: 0.58rem;
font-weight: 750;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.deal-crm-card__title {
display: block;
overflow: hidden;
color: var(--color-text-primary);
font-size: 0.8rem;
font-weight: 720;
text-overflow: ellipsis;
white-space: nowrap;
}
.deal-crm-card .bos-meta {
display: block;
overflow: hidden;
margin-top: 1px;
font-size: 0.68rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.deal-crm-card__arrow {
color: var(--color-text-tertiary);
font-size: 0.9rem;
}
html[data-theme="dark"] .crm-record-row:hover,
html[data-theme="dark"] .crm-company-card:hover,
html[data-theme="dark"] .crm-related-card:hover,
html[data-theme="dark"] .crm-contact-card:hover {
background: rgba(239, 111, 42, 0.08);
}
html[data-theme="dark"] .crm-modal-backdrop {
background: rgba(0, 0, 0, 0.72);
}
html[data-theme="dark"] a.deal-crm-card:hover {
border-color: var(--deal-accent-border-dark, rgba(239, 111, 42, 0.48));
background: var(--deal-accent-surface-dark, rgba(239, 111, 42, 0.12));
}
@media (max-width: 1023px) {
.crm-company-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.crm-profile-layout {
grid-template-columns: 1fr;
}
.crm-profile-aside {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.crm-record-audit {
grid-column: 1 / -1;
}
}
@media (max-width: 799px) {
.crm-record-table__head {
display: none;
}
.crm-record-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.crm-record-cell {
grid-column: 1 / -1;
padding-left: 52px;
}
.crm-mobile-label {
display: block;
color: var(--color-text-tertiary);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.crm-record-row > .crm-record-arrow {
grid-column: 2;
grid-row: 1;
}
}
@media (max-width: 639px) {
.crm-primary-action,
.crm-profile-actions,
.crm-profile-actions .bos-btn-ghost,
.crm-profile-actions .bos-btn-primary {
width: 100%;
}
.crm-primary-action,
.crm-profile-actions .bos-btn-ghost,
.crm-profile-actions .bos-btn-primary {
justify-content: center;
}
.crm-directory-toolbar,
.crm-profile-hero {
flex-direction: column;
align-items: stretch;
}
.crm-directory-search {
display: grid;
flex: 0 0 auto;
grid-template-columns: auto minmax(0, 1fr);
max-width: none;
width: 100%;
}
.crm-directory-search .bos-btn-ghost {
grid-column: auto;
}
.crm-directory-count {
border-top: 1px solid var(--color-border);
border-left: 0;
padding-top: 14px;
padding-left: 0;
}
.crm-company-grid,
.crm-contact-grid,
.crm-detail-grid,
.crm-profile-aside,
.crm-modal-fields {
grid-template-columns: 1fr;
}
.crm-profile-identity {
align-items: start;
}
.crm-profile-avatar {
width: 56px;
height: 56px;
}
.crm-profile-actions {
display: grid;
}
.crm-related-card {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.crm-related-card__value {
grid-column: 2;
}
.crm-related-card > .crm-record-arrow {
grid-column: 3;
grid-row: 1;
}
.crm-form-field--wide {
grid-column: auto;
}
.crm-modal-shell {
align-items: end;
padding: 10px;
}
.crm-modal-dialog {
max-height: 92vh;
border-radius: 18px 18px 12px 12px;
}
.crm-modal-head,
.crm-modal-fields {
padding: 18px;
}
.crm-modal-footer {
padding: 14px 18px;
}
}
/* Deal workspace: fixed side rails with a fluid activity column */
.deal-detail-shell {
--deal-panel-motion: 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.deal-detail-panel {
overflow: clip;
transition:
gap var(--deal-panel-motion),
min-height var(--deal-panel-motion),
padding var(--deal-panel-motion),
box-shadow 220ms ease;
}
.deal-detail-panel-head {
min-width: 0;
transition:
border-color 220ms ease,
padding var(--deal-panel-motion);
}
.deal-detail-panel-copy {
display: block;
min-width: 0;
max-width: 100%;
opacity: 1;
overflow: hidden;
transform: translateX(0);
transition:
max-width var(--deal-panel-motion),
opacity 180ms ease,
transform var(--deal-panel-motion),
visibility 0s linear;
visibility: visible;
}
.deal-detail-panel-body {
display: grid;
grid-template-rows: minmax(0, 1fr);
gap: 0;
min-height: 0;
opacity: 1;
transform: translateX(0);
transition:
grid-template-rows var(--deal-panel-motion),
opacity 180ms ease,
transform var(--deal-panel-motion),
visibility 0s linear;
visibility: visible;
}
.deal-detail-panel-body-inner {
display: grid;
gap: 20px;
min-height: 0;
overflow: hidden;
}
.deal-panel-toggle {
position: relative;
transition:
width var(--deal-panel-motion),
min-height var(--deal-panel-motion),
padding var(--deal-panel-motion),
border-color 160ms ease,
color 160ms ease,
background 160ms ease;
}
.deal-panel-rail-name {
position: absolute;
width: 0;
max-height: 0;
color: var(--color-text-secondary);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
opacity: 0;
overflow: hidden;
text-transform: uppercase;
visibility: hidden;
writing-mode: vertical-rl;
transition:
max-height var(--deal-panel-motion),
opacity 180ms ease,
visibility 0s linear var(--deal-panel-motion);
}
.deal-detail-shell .deal-detail-panel.is-collapsed {
gap: 0;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-detail-panel-head {
align-items: stretch;
height: 100%;
border-bottom-color: transparent;
padding-bottom: 0;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-detail-panel-head > .deal-detail-panel-copy {
display: block;
max-width: 0;
opacity: 0;
transform: translateX(-12px);
visibility: hidden;
transition:
max-width var(--deal-panel-motion),
opacity 140ms ease,
transform var(--deal-panel-motion),
visibility 0s linear 180ms;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-detail-panel-body {
display: grid;
grid-template-rows: minmax(0, 0fr);
opacity: 0;
pointer-events: none;
transform: translateX(-12px);
visibility: hidden;
transition:
grid-template-rows var(--deal-panel-motion),
opacity 140ms ease,
transform var(--deal-panel-motion),
visibility 0s linear var(--deal-panel-motion);
}
.deal-detail-shell .deal-detail-panel--integrations.is-collapsed .deal-detail-panel-copy,
.deal-detail-shell .deal-detail-panel--integrations.is-collapsed .deal-detail-panel-body {
transform: translateX(12px);
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-panel-toggle {
display: inline-flex;
flex-direction: column;
gap: 14px;
width: 100%;
height: 100%;
min-height: 220px;
border-color: transparent;
background: transparent;
padding: 12px 8px;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-panel-toggle:hover {
border-color: var(--deal-accent-border-light);
background: var(--deal-accent-surface-light);
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-panel-toggle [data-panel-toggle-label] {
display: none;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-panel-rail-name {
position: static;
width: auto;
max-height: 150px;
opacity: 1;
transform: rotate(180deg);
visibility: visible;
transition:
max-height var(--deal-panel-motion),
opacity 180ms ease 120ms,
visibility 0s linear;
}
@media (min-width: 1280px) {
.deal-detail-shell {
--deal-properties-width: 25%;
--deal-integrations-width: 22%;
--deal-collapsed-width: 64px;
grid-template-columns:
var(--deal-properties-width)
minmax(0, 1fr)
var(--deal-integrations-width);
transition: grid-template-columns var(--deal-panel-motion);
will-change: grid-template-columns;
}
.deal-detail-shell.properties-collapsed {
grid-template-columns:
var(--deal-collapsed-width)
minmax(0, 1fr)
var(--deal-integrations-width);
}
.deal-detail-shell.integrations-collapsed {
grid-template-columns:
var(--deal-properties-width)
minmax(0, 1fr)
var(--deal-collapsed-width);
}
.deal-detail-shell.properties-collapsed.integrations-collapsed {
grid-template-columns:
var(--deal-collapsed-width)
minmax(0, 1fr)
var(--deal-collapsed-width);
}
.deal-detail-panel--properties,
.deal-detail-panel--integrations {
position: sticky;
top: 80px;
align-self: start;
max-height: calc(100vh - 96px);
overflow-x: clip;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.deal-detail-panel--properties.is-collapsed,
.deal-detail-panel--integrations.is-collapsed {
height: clamp(240px, 36vh, 320px);
min-height: 240px;
overflow: hidden;
padding: 12px;
}
.deal-detail-panel--center {
width: 100%;
transition: box-shadow 220ms ease;
}
.deal-detail-shell.is-resizing .deal-detail-panel--center {
box-shadow: var(--app-deal-soft-panel-shadow);
}
}
@media (max-width: 1279px) {
.deal-detail-shell,
.deal-detail-shell.properties-collapsed,
.deal-detail-shell.integrations-collapsed,
.deal-detail-shell.properties-collapsed.integrations-collapsed {
grid-template-columns: minmax(0, 1fr);
}
.deal-detail-panel--properties,
.deal-detail-panel--integrations {
position: static;
max-height: none;
overflow: clip;
}
.deal-detail-shell .deal-detail-panel.is-collapsed {
height: auto;
min-height: 64px;
padding: 12px;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-detail-panel-head {
height: auto;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-panel-toggle {
flex-direction: row;
width: 100%;
height: auto;
min-height: 42px;
padding: 8px 12px;
}
.deal-detail-shell .deal-detail-panel.is-collapsed .deal-panel-rail-name {
max-height: none;
transform: none;
writing-mode: horizontal-tb;
}
}
@media (prefers-reduced-motion: reduce) {
.deal-detail-shell,
.deal-detail-panel,
.deal-detail-panel-head,
.deal-detail-panel-copy,
.deal-detail-panel-body,
.deal-panel-toggle,
.deal-panel-rail-name {
transition-duration: 1ms !important;
}
}