========================================================================== */
/* ==========================================================================
PAGE SHELL & GLOW EFFECTS
========================================================================== */
.ui-page--estimation {
position: relative;
min-height: calc(100vh - 60px);
padding: var(--ui-space-6) var(--ui-space-3) 80px;
font-family: var(--ui-font-primary);
}
.ui-page--estimation .services-glow {
position: fixed;
border-radius: 50%;
filter: blur(var(--ui-dash-glow-blur));
opacity: 0.4;
z-index: 0;
pointer-events: none;
animation: estimationGlowPulse 14s ease-in-out infinite;
}
.ui-page--estimation .services-glow.glow-1 {
width: 320px;
height: 320px;
top: -40px;
left: -60px;
background: var(--ui-brand);
}
.ui-page--estimation .services-glow.glow-2 {
width: 360px;
height: 360px;
top: 80px;
right: -80px;
background: #6c5bff;
animation-delay: 1s;
}
.ui-page--estimation .services-glow.glow-3 {
width: 280px;
height: 280px;
bottom: 40px;
left: 25%;
background: #19d2c4;
animation-delay: 2s;
}
@keyframes estimationGlowPulse {
0% {
opacity: 0.3;
transform: scale(0.9);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
100% {
opacity: 0.3;
transform: scale(0.9);
}
}
/* ==========================================================================
SERVICES SHELL & LAYOUT
========================================================================== */
.ui-page--estimation .services-shell {
position: relative;
z-index: var(--z-base);
/* Removed max-width and auto margin to match fluid loaded page width */
display: flex;
flex-direction: column;
gap: var(--ui-space-6);
}
.ui-page--estimation .services-form {
display: flex;
flex-direction: column;
gap: var(--ui-space-6);
}
.ui-page--estimation .glass-shell {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
box-shadow: var(--ui-shadow-xl);
border-radius: var(--ui-radius-3xl);
padding: var(--ui-space-6);
backdrop-filter: var(--ui-blur-md);
-webkit-backdrop-filter: var(--ui-blur-md);
}
/* Skeleton card sizing - match loaded heights */
.ui-page--estimation .glass-shell.customer-block {
min-height: 280px;
}
.ui-page--estimation .glass-shell.vehicle-block {
min-height: 340px;
}
.ui-page--estimation .glass-shell.job-details-block {
min-height: 320px;
}
/* ==========================================================================
ERP HEADER BLOCK (UI CONTRACT)
========================================================================== */
.ui-page--estimation .erp-header-block {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
margin-bottom: 0;
overflow: hidden;
}
.ui-page--estimation .erp-header-primary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: none;
}
.ui-page--estimation .erp-header-primary .header-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.ui-page--estimation .erp-header-primary .header-right {
display: flex;
align-items: center;
gap: 12px;
}
.ui-page--estimation .erp-header-primary .erp-category {
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
}
.ui-page--estimation .erp-header-primary .erp-title {
font-size: 28px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.2;
}
.ui-page--estimation .erp-header-primary .title-line {
display: flex;
align-items: center;
gap: var(--ui-space-3);
flex-wrap: wrap;
}
/* ==========================================================================
SERVICES TOP / HEADER
========================================================================== */
.ui-page--estimation .services-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--ui-space-5);
}
.ui-page--estimation .title-stack .eyebrow {
font-size: var(--ui-text-sm);
letter-spacing: 0.18em;
color: var(--ui-text-muted);
margin-bottom: var(--ui-space-1);
text-transform: uppercase;
}
.ui-page--estimation .title-line {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.ui-page--estimation .title-line h2 {
font-size: var(--ui-text-3xl);
margin: 0;
color: var(--ui-text-primary);
}
.ui-page--estimation .booking-chip {
font-size: 11px;
padding: 0 10px;
border-radius: var(--ui-radius-full);
border: 1px solid var(--ui-border-hover);
color: var(--ui-text-secondary);
height: 24px;
min-height: 24px;
line-height: 24px;
display: inline-flex;
align-items: center;
}
.ui-page--estimation .return-link {
margin-top: var(--ui-space-3);
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
font-size: 13px;
color: var(--ui-text-secondary);
cursor: pointer;
}
/* Align first filter-group to left */
.ui-page--estimation .filter-row .filter-group:first-child {
justify-content: flex-start;
margin-left: 0 !important; /* Override global margin-left: auto */
}
.ui-page--estimation .return-link i {
color: var(--ui-brand);
}
/* ==========================================================================
STATUS PILLS
========================================================================== */
.ui-page--estimation .status-pill {
padding: 0 10px;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
height: 24px;
min-height: 24px;
line-height: 24px;
display: inline-flex;
align-items: center;
font-weight: var(--ui-font-semibold);
}
.ui-page--estimation .status-primary {
background: var(--ui-success-bg);
color: var(--ui-success);
border: 1px solid var(--ui-success-border);
}
.ui-page--estimation .status-muted {
border: 1px solid var(--ui-border-hover);
color: var(--ui-text-muted);
}
.ui-page--estimation .status-claim {
background: var(--ui-danger-bg);
border: 1px solid var(--ui-danger-border);
color: var(--ui-danger);
}
.ui-page--estimation .status-outline {
border: 1px dashed rgba(255, 255, 255, 0.3);
color: var(--ui-text-muted);
}
/* ==========================================================================
TOOLBAR & HERO CONTROLS
========================================================================== */
.ui-page--estimation .toolbar-card {
position: relative;
}
.ui-page--estimation .toolbar-grid {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-4);
align-items: center;
justify-content: space-between;
}
.ui-page--estimation .filter-group {
min-width: 240px;
}
.ui-page--estimation .toolbar-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.ui-page--estimation .hero-controls {
margin-top: 0;
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
}
.ui-page--estimation .hero-package {
flex: 1 1 280px;
}
.ui-page--estimation .hero-action-stack {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
position: relative;
}
.ui-page--estimation .hero-actions {
width: 100%;
justify-content: flex-end;
}
.ui-page--estimation .floating-menu {
position: absolute;
top: calc(100% + 12px);
right: var(--ui-space-6);
padding: var(--ui-space-3);
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
width: 220px;
z-index: var(--z-dropdown);
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-xl);
box-shadow: var(--ui-shadow-lg);
backdrop-filter: var(--ui-blur-md);
-webkit-backdrop-filter: var(--ui-blur-md);
}
.ui-page--estimation .floating-menu button {
border: none;
background: transparent;
color: var(--ui-text-secondary);
text-align: left;
font-size: 13px;
padding: var(--ui-space-2) var(--ui-space-1);
border-radius: var(--ui-radius-md);
}
.ui-page--estimation .floating-menu button:hover {
background: var(--ui-surface-hover);
}
/* ==========================================================================
PILL BUTTON (PAGE-SPECIFIC VARIANTS)
========================================================================== */
.ui-page--estimation .pill-button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ui-radius-full);
border: 1px solid var(--ui-border-light);
padding: 0 var(--ui-space-4);
height: 32px;
font-size: 13px;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ui-text-primary);
background: var(--ui-surface-1);
cursor: pointer;
font-weight: var(--ui-font-semibold);
transition: transform var(--ui-transition-base), box-shadow var(--ui-transition-base), background var(--ui-transition-base), border-color var(--ui-transition-base);
text-decoration: none;
line-height: 1;
}
.ui-page--estimation .pill-button:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: var(--ui-shadow-md);
}
.ui-page--estimation .pill-button.accent {
background: var(--ui-brand-gradient);
color: #fff;
border: none;
font-weight: var(--ui-font-semibold);
box-shadow: 0 12px 24px rgba(233, 68, 36, 0.45);
}
.ui-page--estimation .pill-button.ghost {
border: 1px solid var(--ui-border-hover);
background: var(--ui-surface-1);
color: var(--ui-text-secondary);
}
.ui-page--estimation .pill-button.outline {
background: transparent;
border: 1px solid rgba(255, 140, 100, 0.5);
color: rgba(255, 140, 100, 0.9);
font-weight: var(--ui-font-semibold);
gap: 6px;
}
.ui-page--estimation .pill-button.outline:hover {
background: rgba(255, 140, 100, 0.1);
border-color: rgba(255, 140, 100, 0.8);
color: var(--ui-brand-light);
}
.ui-page--estimation .pill-button .btn-icon {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 18px;
color: inherit;
opacity: 0.9;
flex-shrink: 0;
}
/* ==========================================================================
SUMMARY CARD GRID
========================================================================== */
.ui-page--estimation .summary-card {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-5);
position: relative;
align-items: stretch; /* Ensure all cards have equal height */
}
@media (max-width: 1200px) {
.ui-page--estimation .summary-card {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ui-page--estimation .summary-card {
grid-template-columns: 1fr;
}
}
.ui-page--estimation .summary-column {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
padding: var(--ui-space-6);
position: relative;
background: var(--ui-glass-light);
border-radius: var(--ui-radius-3xl);
border: 1px solid var(--ui-border);
box-shadow: var(--ui-shadow-xl);
backdrop-filter: var(--ui-blur-md);
-webkit-backdrop-filter: var(--ui-blur-md);
transition: all var(--ui-transition-slow);
min-width: 0;
overflow: visible;
height: 100%; /* Fill grid cell for equal heights */
}
.ui-page--estimation .summary-column:hover {
background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
border-color: var(--ui-border-hover);
transform: translateY(-2px);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}
.ui-page--estimation .summary-label {
font-size: var(--ui-text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ui-brand-light);
margin: 0 0 10px 0;
font-weight: var(--ui-font-bold);
padding-bottom: var(--ui-space-2);
border-bottom: 2px solid rgba(255, 153, 102, 0.2);
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-page--estimation .summary-label mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
opacity: 0.8;
}
.ui-page--estimation .summary-column h3 {
margin: 0 0 var(--ui-space-1) 0;
font-size: var(--ui-text-xl);
color: var(--ui-text-primary);
font-weight: var(--ui-font-semibold);
line-height: 1.3;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-page--estimation .summary-sub {
margin: 0;
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
line-height: 1.5;
font-weight: var(--ui-font-normal);
}
.ui-page--estimation .summary-actions {
display: flex;
gap: 10px;
margin-top: var(--ui-space-2);
}
.ui-page--estimation .view-profile-btn {
margin-top: var(--ui-space-3);
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: 0 var(--ui-space-4);
height: 32px;
background: var(--ui-surface-1);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-full);
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.02em;
cursor: pointer;
transition: all var(--ui-transition-slow);
backdrop-filter: var(--ui-blur-sm);
}
.ui-page--estimation .view-profile-btn:hover {
background: var(--ui-surface-hover);
border-color: rgba(255, 255, 255, 0.2);
color: var(--ui-text-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.ui-page--estimation .summary-column ul {
list-style: none;
margin: var(--ui-space-2) 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.ui-page--estimation .summary-column li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--ui-space-4);
font-size: 13px;
color: var(--ui-text-secondary);
padding: 6px 10px;
transition: all var(--ui-transition-base);
border-radius: var(--ui-radius-sm);
background: rgba(255, 255, 255, 0.01);
flex-wrap: nowrap;
min-width: 0;
}
.ui-page--estimation .summary-column li:hover {
color: var(--ui-text-primary);
background: var(--ui-surface-1);
padding-left: var(--ui-space-4);
}
.ui-page--estimation .summary-column li span {
text-transform: uppercase;
font-size: 9px;
color: var(--ui-text-subtle);
letter-spacing: 0.1em;
font-weight: var(--ui-font-bold);
min-width: 110px;
flex-shrink: 0;
white-space: nowrap;
}
.ui-page--estimation .summary-column li strong {
color: var(--ui-text-primary);
font-weight: var(--ui-font-medium);
text-align: right;
transition: all var(--ui-transition-base);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-page--estimation .highlight {
color: #ffb86c;
}
/* ==========================================================================
SERVICES TABLE
==========================================================================
Visual styling is handled by the ui-table--glass-input contract.
========================================================================== */
/* ==========================================================================
PACKAGE ROW — visual distinction for type="package" services
========================================================================== */
.ui-page--estimation .row--package {
position: relative;
background: linear-gradient(90deg, rgba(25, 210, 196, 0.06) 0%, rgba(25, 210, 196, 0.02) 30%, transparent 100%) !important;
border-left: 3px solid rgba(25, 210, 196, 0.5) !important;
}
.ui-page--estimation .row--package:hover {
background: linear-gradient(90deg, rgba(25, 210, 196, 0.1) 0%, rgba(25, 210, 196, 0.04) 30%, transparent 100%) !important;
border-left-color: rgba(25, 210, 196, 0.8) !important;
}
.ui-page--estimation .service-name-cell {
display: flex;
align-items: center;
gap: 8px;
}
.ui-page--estimation .pkg-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px 3px 6px;
background: rgba(25, 210, 196, 0.12);
border: 1px solid rgba(25, 210, 196, 0.25);
border-radius: var(--ui-radius-full);
color: #5de8d8;
font-size: 9px;
font-weight: var(--ui-font-bold);
text-transform: uppercase;
letter-spacing: 0.1em;
width: fit-content;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
}
.ui-page--estimation .pkg-badge mat-icon {
font-size: 11px;
width: 11px;
height: 11px;
}
/* ==========================================================================
PACKAGE SELECT
========================================================================== */
.ui-page--estimation .package-select {
min-width: 240px;
}
.ui-page--estimation .package-select.pill-select-shell {
background: var(--ui-surface-1);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-full);
padding: 0 var(--ui-space-4);
height: 32px;
display: flex;
align-items: center;
gap: var(--ui-space-2);
position: relative;
}
.ui-page--estimation .remove-package-btn {
width: 24px;
height: 24px;
min-width: 24px;
padding: 0;
border-radius: 50%;
background: rgba(239, 68, 68, 0.15);
color: var(--ui-danger);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ui-page--estimation .remove-package-btn mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.ui-page--estimation .remove-package-btn:hover {
background: rgba(239, 68, 68, 0.25);
transform: scale(1.1);
}
.ui-page--estimation .package-empty-state {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: 0 var(--ui-space-4);
height: 32px;
background: var(--ui-surface-1);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-full);
color: var(--ui-text-muted);
font-size: 13px;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.02em;
cursor: default;
min-width: 200px;
}
.ui-page--estimation .package-empty-state .empty-icon {
font-size: 16px;
width: 16px;
height: 16px;
opacity: 0.6;
}
/* ==========================================================================
CLAIM PILL
========================================================================== */
.ui-page--estimation .claim-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
background: var(--ui-surface-2);
border: 1px solid var(--ui-border-light);
color: var(--ui-text-muted);
border-radius: 50px;
font-size: 11px;
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
cursor: pointer;
transition: all var(--ui-transition-base);
-webkit-user-select: none;
user-select: none;
min-width: 110px;
white-space: nowrap;
}
.ui-page--estimation .claim-pill.active {
background: var(--ui-success-bg);
border-color: var(--ui-success-border);
color: var(--ui-success);
}
.ui-page--estimation .claim-pill.active:hover {
background: rgba(81, 203, 90, 0.25);
border-color: rgba(81, 203, 90, 0.5);
}
.ui-page--estimation .claim-pill:hover {
background: var(--ui-surface-hover);
border-color: rgba(255, 255, 255, 0.2);
color: var(--ui-text-secondary);
}
/* ==========================================================================
ICON BUTTON
========================================================================== */
.ui-page--estimation .icon-btn {
width: 36px;
height: 36px;
border-radius: var(--ui-radius-md);
border: 1px solid var(--ui-border);
background: var(--ui-surface-2);
color: var(--ui-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--ui-transition-base);
}
.ui-page--estimation .icon-btn:hover {
background: var(--ui-surface-hover);
border-color: rgba(255, 255, 255, 0.25);
color: var(--ui-text-primary);
}
.ui-page--estimation .icon-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.ui-page--estimation .icon-btn:disabled,
.ui-page--estimation .icon-btn.disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: auto;
}
.ui-page--estimation .icon-btn.ghost {
background: transparent;
border: 1px solid var(--ui-border);
}
.ui-page--estimation .action-buttons {
display: flex;
gap: var(--ui-space-2);
justify-content: flex-end;
}
/* ==========================================================================
TABLE EMPTY STATE
========================================================================== */
.ui-page--estimation .table-empty {
padding: 80px var(--ui-space-6);
text-align: center;
color: var(--ui-text-subtle);
}
.ui-page--estimation .empty-row td {
padding: 40px var(--ui-space-5);
text-align: center;
}
.ui-page--estimation .empty-message {
color: var(--ui-text-muted);
font-size: var(--ui-text-base);
font-style: italic;
}
/* ==========================================================================
FOOTER STATS BAR
========================================================================== */
.ui-page--estimation .footer-stats-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-4) 32px;
background: rgba(33, 33, 33, 0.6);
border-top: 1px solid var(--ui-border);
margin-top: 0;
border-radius: var(--ui-radius-lg);
backdrop-filter: var(--ui-blur-md);
}
.ui-page--estimation .footer-action {
flex: 0 0 auto;
}
.ui-page--estimation .footer-costs {
display: flex;
gap: var(--ui-space-6);
justify-content: flex-start;
flex: 1;
border-right: 1px solid var(--ui-border-light);
margin: 0 32px;
padding-left: var(--ui-space-6);
}
.ui-page--estimation .footer-cost-item {
display: flex;
align-items: baseline;
gap: var(--ui-space-2);
}
.ui-page--estimation .footer-cost-item:last-child {
border-left: 1px solid var(--ui-border-light);
margin-left: 32px;
padding-left: var(--ui-space-6);
}
.ui-page--estimation .footer-cost-label {
font-size: var(--ui-text-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ui-text-muted);
}
.ui-page--estimation .footer-cost-value {
font-size: var(--ui-text-md);
font-weight: var(--ui-font-medium);
color: var(--ui-text-primary);
}
.ui-page--estimation .footer-total {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.ui-page--estimation .footer-total span {
font-size: 11px;
letter-spacing: 0.1em;
color: var(--ui-text-muted);
text-transform: uppercase;
margin-bottom: 2px;
}
.ui-page--estimation .footer-total strong {
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1;
}
/* ==========================================================================
SKELETON LOADER
========================================================================== */
.ui-page--estimation .estimation-skeleton .skeleton-line,
.ui-page--estimation .estimation-skeleton .skeleton-pill {
display: block;
border-radius: var(--ui-radius-full);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
background-size: 220% 100%;
animation: estimationSkeletonShimmer 1.4s ease-in-out infinite;
}
/* Keep loading layout aligned to page-level gutters without extra centered inset. */
.ui-page--estimation .estimation-skeleton .ui-page__content {
max-width: none;
margin: 0;
width: 100%;
}
.ui-page--estimation .estimation-skeleton .skeleton-line {
height: 14px;
margin: 6px 0;
border-radius: var(--ui-radius-md);
}
.ui-page--estimation .estimation-skeleton .skeleton-pill {
height: 32px;
width: 140px;
margin: var(--ui-space-1) 0;
}
.ui-page--estimation .estimation-skeleton .skeleton-pill.sm {
width: 110px;
height: 26px;
}
.ui-page--estimation .estimation-skeleton .skeleton-pill.md {
width: 150px;
}
.ui-page--estimation .estimation-skeleton .skeleton-pill.lg {
width: 170px;
}
.ui-page--estimation .estimation-skeleton .skeleton-pill.xs {
width: 80px;
height: 20px;
}
.ui-page--estimation .estimation-skeleton .skeleton-pill.checkbox {
width: 32px;
height: 32px;
border-radius: var(--ui-radius-md);
}
.ui-page--estimation .estimation-skeleton .skeleton-line.skeleton-title {
width: 240px;
height: 34px;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.skeleton-subtitle {
width: 180px;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.skeleton-label {
width: 130px;
height: 12px;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.skeleton-heading {
width: 180px;
height: 22px;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.skeleton-heading.short {
width: 140px;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.skeleton-text {
width: 70%;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.skeleton-micro {
width: 40%;
height: 10px;
opacity: 0.8;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.flex {
flex: 1;
min-width: 160px;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.short {
width: 120px;
}
.ui-page--estimation .estimation-skeleton .skeleton-line.long {
width: 240px;
}
.ui-page--estimation .estimation-skeleton .skeleton-chip-row {
display: flex;
gap: var(--ui-space-2);
margin: var(--ui-space-3) 0;
}
.ui-page--estimation .estimation-skeleton .skeleton-card-block ul {
list-style: none;
margin: var(--ui-space-3) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.ui-page--estimation .estimation-skeleton .skeleton-table {
margin-top: var(--ui-space-3);
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-page--estimation .estimation-skeleton .skeleton-row {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) 0;
border-bottom: 1px solid var(--ui-border);
}
.ui-page--estimation .estimation-skeleton .skeleton-row:last-child {
border-bottom: none;
}
.ui-page--estimation .estimation-skeleton .skeleton-footer-card {
display: flex;
justify-content: space-between;
gap: var(--ui-space-6);
align-items: flex-start;
}
.ui-page--estimation .estimation-skeleton .skeleton-summary-rows,
.ui-page--estimation .estimation-skeleton .skeleton-totals {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
width: 100%;
}
@keyframes estimationSkeletonShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ==========================================================================
JOB VALUE OVERVIEW
========================================================================== */
.ui-page--estimation .jvo-split-row {
display: flex;
gap: var(--ui-space-5);
align-items: stretch;
}
.ui-page--estimation .jvo-card {
flex: 0 0 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ui-space-6);
padding: 28px var(--ui-space-6);
text-align: center;
}
.ui-page--estimation .jvo-payment-card {
flex: 1;
min-width: 0;
}
.ui-page--estimation .jvo-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
animation: jvoFadeUp 500ms ease-out both;
}
.ui-page--estimation .jvo-label {
font-size: 11px;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ui-brand-light);
}
.ui-page--estimation .jvo-amount {
font-size: 42px;
font-weight: 800;
color: var(--ui-text-primary);
letter-spacing: -0.02em;
position: relative;
}
.ui-page--estimation .jvo-amount::after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
background: linear-gradient(90deg, transparent, var(--ui-brand-light), transparent);
border-radius: 2px;
}
.ui-page--estimation .jvo-ring-wrap {
position: relative;
width: 160px;
height: 160px;
animation: jvoFadeUp 500ms 150ms ease-out both;
}
.ui-page--estimation .jvo-ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.ui-page--estimation .jvo-ring circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}
.ui-page--estimation .jvo-ring-track {
stroke: var(--ui-border);
}
.ui-page--estimation .jvo-ring-fill {
stroke: var(--ui-brand-light);
animation: jvoRingDraw 600ms 300ms ease-out both;
}
.ui-page--estimation .jvo-ring-labour {
stroke: var(--ui-brand-light);
filter: drop-shadow(0 0 8px var(--ui-brand-glow));
}
.ui-page--estimation .jvo-ring-parts {
stroke: rgba(255, 255, 255, 0.25);
}
.ui-page--estimation .jvo-ring-others {
stroke: rgba(110, 198, 255, 0.5);
}
@keyframes jvoRingDraw {
from {
stroke-dasharray: 0 264;
}
}
.ui-page--estimation .jvo-ring-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ui-page--estimation .jvo-ring-pct {
font-size: var(--ui-text-3xl);
font-weight: 800;
color: var(--ui-text-primary);
line-height: 1;
}
.ui-page--estimation .jvo-ring-txt {
font-size: 11px;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.ui-page--estimation .jvo-bifurcation {
display: flex;
justify-content: center;
gap: var(--ui-space-6);
margin-top: var(--ui-space-4);
animation: jvoFadeUp 400ms 200ms ease-out both;
}
.ui-page--estimation .jvo-bifurcation-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-page--estimation .jvo-bif-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.ui-page--estimation .jvo-bifurcation-item.labour .jvo-bif-dot {
background: var(--ui-brand-light);
}
.ui-page--estimation .jvo-bifurcation-item.parts .jvo-bif-dot {
background: rgba(255, 255, 255, 0.25);
}
.ui-page--estimation .jvo-bifurcation-item.others .jvo-bif-dot {
background: #6ec6ff;
}
.ui-page--estimation .jvo-bif-label {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ui-page--estimation .jvo-bif-value {
font-size: 13px;
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--estimation .jvo-perday {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-1);
animation: jvoFadeUp 500ms 300ms ease-out both;
}
.ui-page--estimation .jvo-perday-label {
font-size: 11px;
font-weight: var(--ui-font-semibold);
color: var(--ui-brand-light);
text-transform: uppercase;
letter-spacing: 1px;
}
.ui-page--estimation .jvo-perday-row {
display: flex;
align-items: baseline;
gap: var(--ui-space-2);
}
.ui-page--estimation .jvo-perday-value {
font-size: 28px;
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.ui-page--estimation .jvo-perday-unit {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-medium);
color: var(--ui-text-muted);
}
.ui-page--estimation .jvo-badge {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
padding: var(--ui-space-1) 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-left: var(--ui-space-1);
}
.ui-page--estimation .jvo-badge.health-excellent {
background: rgba(76, 217, 100, 0.2);
color: #4cd964;
}
.ui-page--estimation .jvo-badge.health-healthy {
background: rgba(90, 200, 250, 0.2);
color: #5ac8fa;
}
.ui-page--estimation .jvo-badge.health-average {
background: rgba(255, 204, 0, 0.2);
color: #ffcc00;
}
.ui-page--estimation .jvo-badge.health-low {
background: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
}
@keyframes jvoFadeUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
PAYMENT CARD
========================================================================== */
.ui-page--estimation .jvo-payment-content {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
padding: var(--ui-space-5);
}
.ui-page--estimation .payment-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--ui-space-4);
}
.ui-page--estimation .payment-label {
flex: 1;
text-align: right;
color: var(--ui-text-secondary);
font-size: var(--ui-text-base);
}
.ui-page--estimation .payment-value {
flex: 0 0 180px;
text-align: right;
font-size: var(--ui-text-base);
color: var(--ui-text-primary);
}
.ui-page--estimation .payment-divider {
height: 1px;
background: var(--ui-border-light);
margin: var(--ui-space-2) 0;
}
.ui-page--estimation .payment-total .payment-label,
.ui-page--estimation .payment-total .payment-value {
font-size: var(--ui-text-md);
font-weight: var(--ui-font-semibold);
}
.ui-page--estimation .payment-total {
background-color: rgba(255, 153, 102, 0.08);
border: 1px solid rgba(255, 153, 102, 0.2);
border-radius: var(--ui-radius-md);
padding: 10px var(--ui-space-4);
}
/* ==========================================================================
PART ISSUE PAGE - SPECIFIC STYLES
==========================================================================
Additional styles for /console/part/issue pages that share the estimation
page visual design but have unique table and cell structures.
========================================================================== */
/* Issue Table - Flex layout with scrollable body */
.ui-page--estimation .issue-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--ui-border-hover);
border-radius: var(--ui-radius-md);
overflow: hidden;
color: var(--ui-text-secondary);
display: flex;
flex-direction: column;
}
.ui-page--estimation .issue-table thead {
display: table;
width: 100%;
table-layout: fixed;
flex-shrink: 0;
}
.ui-page--estimation .issue-table tbody {
display: block;
width: 100%;
max-height: calc(100vh - 500px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.03);
}
.ui-page--estimation .issue-table tbody::-webkit-scrollbar {
width: 6px;
}
.ui-page--estimation .issue-table tbody::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03);
border-radius: 3px;
}
.ui-page--estimation .issue-table tbody::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
.ui-page--estimation .issue-table tbody::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.28);
}
.ui-page--estimation .issue-table thead tr,
.ui-page--estimation .issue-table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.ui-page--estimation .issue-table thead tr:first-child th:first-child {
border-top-left-radius: var(--ui-radius-md);
}
.ui-page--estimation .issue-table thead tr:first-child th:last-child {
border-top-right-radius: var(--ui-radius-md);
}
.ui-page--estimation .issue-table tbody tr:last-child td:first-child {
border-bottom-left-radius: var(--ui-radius-md);
}
.ui-page--estimation .issue-table tbody tr:last-child td:last-child {
border-bottom-right-radius: var(--ui-radius-md);
}
.ui-page--estimation .issue-table th,
.ui-page--estimation .issue-table td {
padding: 14px var(--ui-space-4);
text-align: left;
border-bottom: 1px solid var(--ui-border-light);
}
.ui-page--estimation .issue-table th {
font-size: var(--ui-text-sm);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ui-text-muted);
background: var(--ui-surface-hover);
font-weight: var(--ui-font-semibold);
}
.ui-page--estimation .issue-table th:first-child,
.ui-page--estimation .issue-table td:first-child {
min-width: 280px;
width: 35%;
}
.ui-page--estimation .issue-table tbody tr:hover {
background: var(--ui-surface-1);
}
.ui-page--estimation .clickable-row {
cursor: pointer;
transition: background-color var(--ui-transition-base);
}
.ui-page--estimation .clickable-row:hover {
background: var(--ui-surface-hover);
}
/* Cell patterns for issue table */
.ui-page--estimation .cell-strong {
display: block;
color: var(--ui-text-primary);
font-weight: var(--ui-font-medium);
font-size: 15px;
}
.ui-page--estimation .cell-muted {
display: block;
margin-top: var(--ui-space-1);
font-size: 13px;
color: var(--ui-text-muted);
}
/* Frosted input (read-only display) */
.ui-page--estimation .frosted-input {
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
color: var(--ui-text-primary);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: 13px;
font-weight: var(--ui-font-medium);
width: 100%;
backdrop-filter: var(--ui-blur-sm);
-webkit-backdrop-filter: var(--ui-blur-sm);
transition: all var(--ui-transition-base);
outline: none;
pointer-events: none;
}
/* Table meta text */
.ui-page--estimation .table-meta {
font-size: 13px;
color: var(--ui-text-muted);
}
/* Status chips */
.ui-page--estimation .status-chip {
display: inline-flex;
align-items: center;
padding: var(--ui-space-1) 14px;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-sm);
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid var(--ui-border);
margin-bottom: 6px;
}
.ui-page--estimation .status-chip.claim {
border-color: var(--ui-danger-border);
color: var(--ui-danger);
background: var(--ui-danger-bg);
}
.ui-page--estimation .status-chip.no-claim {
border-color: var(--ui-success-border);
color: var(--ui-success);
background: var(--ui-success-bg);
}
/* Approval pill */
.ui-page--estimation .approval-pill {
display: inline-flex;
padding: var(--ui-space-1) var(--ui-space-3);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px dashed rgba(255, 255, 255, 0.3);
margin-bottom: 6px;
}
.ui-page--estimation .approval-pill.approved {
color: var(--ui-success);
border-color: var(--ui-success-border);
background: var(--ui-success-bg);
}
.ui-page--estimation .approval-pill.pending {
color: var(--ui-text-muted);
border-color: var(--ui-border);
background: var(--ui-surface-1);
}
/* Issue totals section */
.ui-page--estimation .issue-totals-card {
display: flex;
flex-direction: column;
gap: var(--ui-space-6);
}
.ui-page--estimation .issue-totals-grid {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
width: 100%;
max-width: 360px;
margin-left: auto;
}
.ui-page--estimation .totals-item {
display: flex;
align-items: baseline;
justify-content: space-between;
background: transparent;
border: none;
padding: 2px 0;
}
.ui-page--estimation .totals-item span {
font-size: 13px;
letter-spacing: 0.02em;
text-transform: none;
color: var(--ui-text-secondary);
margin-bottom: 0;
text-align: left;
}
.ui-page--estimation .totals-item strong {
font-size: 18px;
color: var(--ui-text-primary);
text-align: right;
font-weight: var(--ui-font-medium);
}
.ui-page--estimation .totals-item.highlight strong {
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--estimation .total-item {
border-top: 2px solid var(--ui-brand);
padding-top: 10px;
margin-top: 2px;
}
.ui-page--estimation .totals-item span::after {
content: ":";
margin-left: var(--ui-space-1);
color: var(--ui-text-muted);
}
/* Skeleton specific to issue page */
.ui-page--estimation .issue-skeleton .ui-page__content {
max-width: none;
margin: 0;
width: 100%;
}
.ui-page--estimation .issue-skeleton .skeleton-line,
.ui-page--estimation .issue-skeleton .skeleton-pill {
display: block;
border-radius: var(--ui-radius-full);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
background-size: 220% 100%;
animation: estimationSkeletonShimmer 1.4s ease-in-out infinite;
}
.ui-page--estimation .issue-skeleton .skeleton-line {
height: 14px;
margin: 6px 0;
border-radius: var(--ui-radius-md);
}
.ui-page--estimation .issue-skeleton .skeleton-pill {
height: 32px;
width: 140px;
margin: var(--ui-space-1) 0;
}
.ui-page--estimation .issue-skeleton .skeleton-pill.xs {
width: 80px;
height: 20px;
}
.ui-page--estimation .issue-skeleton .skeleton-line.skeleton-title {
width: 240px;
height: 34px;
}
.ui-page--estimation .issue-skeleton .skeleton-line.skeleton-label {
width: 130px;
height: 12px;
}
.ui-page--estimation .issue-skeleton .skeleton-line.skeleton-heading {
width: 180px;
height: 22px;
}
.ui-page--estimation .issue-skeleton .skeleton-line.skeleton-heading.short {
width: 140px;
}
.ui-page--estimation .issue-skeleton .skeleton-line.skeleton-text {
width: 70%;
}
.ui-page--estimation .issue-skeleton .skeleton-line.skeleton-micro {
width: 40%;
height: 10px;
opacity: 0.8;
}
.ui-page--estimation .issue-skeleton .skeleton-line.flex {
flex: 1;
min-width: 160px;
}
.ui-page--estimation .issue-skeleton .skeleton-line.short {
width: 120px;
}
.ui-page--estimation .issue-skeleton .skeleton-line.long {
width: 240px;
}
.ui-page--estimation .issue-skeleton .skeleton-chip-row {
display: flex;
gap: var(--ui-space-2);
margin: var(--ui-space-3) 0;
}
.ui-page--estimation .issue-skeleton .skeleton-table {
margin-top: var(--ui-space-3);
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
padding: 0 32px 32px;
}
.ui-page--estimation .issue-skeleton .skeleton-row {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) 0;
border-bottom: 1px solid var(--ui-border);
}
.ui-page--estimation .issue-skeleton .skeleton-row:last-child {
border-bottom: none;
}
.ui-page--estimation .issue-skeleton .skeleton-footer {
display: flex;
justify-content: space-between;
gap: var(--ui-space-6);
padding: var(--ui-space-4) 32px;
}
/* ==========================================================================
PAYMENT INPUTS & FORM ELEMENTS
========================================================================== */
/* Convenience input styling */
.ui-page--estimation .careager_convenience_input {
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
color: var(--ui-text-primary);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: 13px;
font-weight: var(--ui-font-medium);
width: 160px;
max-width: 100%;
backdrop-filter: var(--ui-blur-sm);
-webkit-backdrop-filter: var(--ui-blur-sm);
transition: all var(--ui-transition-base);
outline: none;
}
.ui-page--estimation .careager_convenience_input:hover {
background: var(--ui-surface-hover);
border-color: var(--ui-border-hover);
}
.ui-page--estimation .careager_convenience_input:focus {
background: var(--ui-surface-hover);
border-color: var(--ui-border-focus);
box-shadow: 0 0 0 3px rgba(255, 126, 64, 0.1);
}
.ui-page--estimation .careager_convenience_input::placeholder {
color: var(--ui-text-subtle);
}
/* JVO input group */
.ui-page--estimation .jvo-input-group {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-page--estimation .jvo-input-group .input-box {
display: flex;
align-items: center;
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
overflow: hidden;
}
.ui-page--estimation .jvo-input-group .input-box .first {
padding: var(--ui-space-2) var(--ui-space-2);
background: var(--ui-surface-hover);
color: var(--ui-text-muted);
font-size: 13px;
border-right: 1px solid var(--ui-border);
}
.ui-page--estimation .jvo-input-group .input-box input {
background: transparent;
border: none;
padding: var(--ui-space-2) var(--ui-space-3);
color: var(--ui-text-primary);
font-size: 13px;
font-weight: var(--ui-font-medium);
width: 100px;
outline: none;
}
.ui-page--estimation .jvo-save-btn {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
border: none;
background: var(--ui-brand-gradient);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--ui-transition-base);
}
.ui-page--estimation .jvo-save-btn:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(255, 126, 64, 0.3);
}
.ui-page--estimation .jvo-save-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
/* Careager cash styling */
.ui-page--estimation .careager-cash {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-page--estimation .careager-cash--spaced {
justify-content: flex-end;
}
/* Select dropdown in payment section */
.ui-page--estimation .payment-row select,
.ui-page--estimation .legacy-summary-card select {
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
color: var(--ui-text-primary);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: 13px;
font-weight: var(--ui-font-medium);
cursor: pointer;
backdrop-filter: var(--ui-blur-sm);
transition: all var(--ui-transition-base);
min-width: auto;
}
.ui-page--estimation .payment-row select:hover,
.ui-page--estimation .legacy-summary-card select:hover {
background: var(--ui-surface-hover);
border-color: var(--ui-border-hover);
}
.ui-page--estimation .payment-row select:focus,
.ui-page--estimation .legacy-summary-card select:focus {
outline: none;
border-color: var(--ui-border-focus);
}
.ui-page--estimation .payment-row select option {
background: var(--ui-surface-base);
color: var(--ui-text-primary);
}
/* Coupon button */
.ui-page--estimation .couponbtn {
background: transparent;
color: var(--ui-text-secondary);
font-size: 13px;
font-weight: var(--ui-font-medium);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-1) 0;
transition: all var(--ui-transition-base);
}
.ui-page--estimation .couponbtn:hover {
color: var(--ui-text-primary);
}
.ui-page--estimation .couponbtn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
transition: transform var(--ui-transition-base);
}
/* Coupon dropdown card */
.ui-page--estimation .selected-coupon {
position: absolute;
top: 100%;
right: 0;
margin-top: var(--ui-space-2);
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-lg);
backdrop-filter: var(--ui-blur-lg);
-webkit-backdrop-filter: var(--ui-blur-lg);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
z-index: 100;
min-width: 320px;
max-height: 400px;
overflow: hidden;
}
.ui-page--estimation .coupon-search {
padding: var(--ui-space-3);
border-bottom: 1px solid var(--ui-border-light);
}
.ui-page--estimation .coupon-search input {
width: 100%;
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
color: var(--ui-text-primary);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: 13px;
outline: none;
}
.ui-page--estimation .coupon-search input:focus {
border-color: var(--ui-border-focus);
}
.ui-page--estimation .coupon-list-items {
max-height: 300px;
overflow-y: auto;
padding: var(--ui-space-2);
}
.ui-page--estimation .coupon-item-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ui-space-3);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
margin-bottom: var(--ui-space-2);
transition: all var(--ui-transition-base);
}
.ui-page--estimation .coupon-item-card:hover {
background: var(--ui-surface-hover);
}
.ui-page--estimation .summary-column {
flex: 1;
min-width: 260px;
min-height: 240px; /* Base height for all summary columns */
}
.ui-page--estimation .coupon-item-left {
flex: 1;
min-width: 0;
}
.ui-page--estimation .coupon-code {
font-size: 14px;
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
margin-bottom: 2px;
}
.ui-page--estimation .coupon-desc {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-page--estimation .coupon-discount {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-success);
}
.ui-page--estimation .coupon-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--ui-space-1);
}
/* Clearfix (X button for input) */
.ui-page--estimation .clearfix {
position: absolute;
right: var(--ui-space-2);
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: var(--ui-text-muted);
display: flex;
align-items: center;
justify-content: center;
}
.ui-page--estimation .clearfix:hover {
color: var(--ui-text-primary);
}
.ui-page--estimation .clearfix mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
/* Available balance text */
.ui-page--estimation .available_balance {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
/* ==========================================================================
LEGACY SUMMARY CARD (Fallback when JVO not shown)
========================================================================== */
.ui-page--estimation .legacy-summary-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 28px 32px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
margin-top: var(--ui-space-5);
}
/* Custom row layout (flex grid) */
.ui-page--estimation .custom-row {
display: flex;
flex-wrap: wrap;
margin-left: -12px;
margin-right: -12px;
}
/* Column classes */
.ui-page--estimation .col-md-1,
.ui-page--estimation .col-md-2,
.ui-page--estimation .col-md-3,
.ui-page--estimation .col-md-4,
.ui-page--estimation .col-md-5,
.ui-page--estimation .col-md-6,
.ui-page--estimation .col-md-7,
.ui-page--estimation .col-md-8,
.ui-page--estimation .col-md-9,
.ui-page--estimation .col-md-10,
.ui-page--estimation .col-md-11,
.ui-page--estimation .col-md-12 {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.ui-page--estimation .col-md-1 {
flex: 0 0 8.333%;
max-width: 8.333%;
}
.ui-page--estimation .col-md-2 {
flex: 0 0 16.666%;
max-width: 16.666%;
}
.ui-page--estimation .col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.ui-page--estimation .col-md-4 {
flex: 0 0 33.333%;
max-width: 33.333%;
}
.ui-page--estimation .col-md-5 {
flex: 0 0 41.666%;
max-width: 41.666%;
}
.ui-page--estimation .col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.ui-page--estimation .col-md-7 {
flex: 0 0 58.333%;
max-width: 58.333%;
}
.ui-page--estimation .col-md-8 {
flex: 0 0 66.666%;
max-width: 66.666%;
}
.ui-page--estimation .col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.ui-page--estimation .col-md-10 {
flex: 0 0 83.333%;
max-width: 83.333%;
}
.ui-page--estimation .col-md-11 {
flex: 0 0 91.666%;
max-width: 91.666%;
}
.ui-page--estimation .col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
/* Summary breakdown area */
.ui-page--estimation .summary-breakdown {
min-height: auto;
background: transparent;
border-radius: 0;
padding: 0;
}
.ui-page--estimation .summary-breakdown-card {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
color: var(--ui-text-secondary);
font-size: 13px;
}
.ui-page--estimation .summary-breakdown-card > div {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Summary breakdown values column */
.ui-page--estimation .summary-breakdown-values {
border: none;
padding: 0;
margin: 0;
text-align: end;
display: flex;
flex-direction: column;
gap: 12px;
color: #6fe3ff;
}
.ui-page--estimation .summary-breakdown-values > div {
padding: 8px 14px;
background: transparent;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: none;
}
/* Summary total values column */
.ui-page--estimation .summary-total-values {
text-align: end;
display: flex;
flex-direction: column;
gap: 12px;
}
.ui-page--estimation .summary-total-values > div {
padding: 8px 14px;
background: transparent;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: none;
color: rgba(255, 255, 255, 0.9);
}
/* Legacy total title */
.ui-page--estimation .legacy-total-title {
font-size: 18px !important;
font-weight: 700 !important;
color: #ffffff !important;
}
/* Input styling in legacy card */
.ui-page--estimation .legacy-summary-card input {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
color: rgba(255, 255, 255, 0.9);
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
width: 100%;
max-width: 280px;
outline: none;
backdrop-filter: blur(8px);
transition: all 0.3s ease;
}
.ui-page--estimation .legacy-summary-card input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.ui-page--estimation .legacy-summary-card input:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
}
.ui-page--estimation .legacy-summary-card input:focus {
border-color: #ff9966;
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.1);
}
/* Select dropdown in legacy card */
.ui-page--estimation .legacy-summary-card select {
width: 100%;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}
.ui-page--estimation .legacy-summary-card select:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
}
.ui-page--estimation .legacy-summary-card select:focus {
outline: none;
border-color: #ff9966;
box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.1);
}
/* Input box in legacy card */
.ui-page--estimation .legacy-summary-card .input-box {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
max-width: 280px;
}
.ui-page--estimation .legacy-summary-card .input-box:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
}
.ui-page--estimation .legacy-summary-card .input-box:focus-within {
border-color: #ff9966;
box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.1);
}
.ui-page--estimation .legacy-summary-card .input-box .first {
width: 32px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
font-size: 13px;
background: rgba(255, 255, 255, 0.03);
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.ui-page--estimation .legacy-summary-card .input-box input {
flex: 1;
padding: 8px 12px;
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
font-weight: 500;
max-width: none;
}
.ui-page--estimation .legacy-summary-card .input-box input:focus {
outline: none;
box-shadow: none;
}
/* Text utilities */
.ui-page--estimation .text-right {
text-align: right !important;
}
.ui-page--estimation .text-end {
text-align: right !important;
}
/* Bootstrap utility equivalents */
.ui-page--estimation .mb-1 {
margin-bottom: 4px;
}
.ui-page--estimation .mb-2 {
margin-bottom: 8px;
}
.ui-page--estimation .mt-1 {
margin-top: 4px;
}
.ui-page--estimation .mt-2 {
margin-top: 8px;
}
.ui-page--estimation .my-2 {
margin-top: 8px;
margin-bottom: 8px;
}
.ui-page--estimation .pt-1 {
padding-top: 4px;
}
.ui-page--estimation .py-1 {
padding-top: 4px;
padding-bottom: 4px;
}
.ui-page--estimation .d-flex {
display: flex !important;
}
.ui-page--estimation .justify-content-end {
justify-content: flex-end !important;
}
.ui-page--estimation .position-relative {
position: relative;
}
.ui-page--estimation .w-100 {
width: 100%;
}
.ui-page--estimation .border-0 {
border: 0 !important;
}
/* Text color utilities */
.ui-page--estimation .text-success {
color: var(--ui-success) !important;
}
.ui-page--estimation .text-danger {
color: var(--ui-danger) !important;
}
.ui-page--estimation .text-white {
color: var(--ui-text-primary) !important;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 992px) {
.ui-page--estimation .jvo-split-row {
flex-direction: column;
}
.ui-page--estimation .jvo-card {
flex: none;
width: 100%;
}
}
@media (max-width: 991px) {
.ui-page--estimation .services-shell {
padding: 0 var(--ui-space-1);
}
.ui-page--estimation .services-top,
.ui-page--estimation .toolbar-grid {
flex-direction: column;
align-items: flex-start;
}
.ui-page--estimation .toolbar-actions {
width: 100%;
justify-content: flex-start;
}
.ui-page--estimation .floating-menu {
position: static;
width: 100%;
margin-top: var(--ui-space-3);
}
.ui-page--estimation .table-wrap {
padding: 0 var(--ui-space-3) var(--ui-space-3);
}
}
@media (max-width: 768px) {
.ui-page--estimation .jvo-amount {
font-size: var(--ui-text-3xl);
}
.ui-page--estimation .jvo-ring-wrap {
width: 130px;
height: 130px;
}
.ui-page--estimation .jvo-ring-pct {
font-size: 26px;
}
.ui-page--estimation .jvo-perday-value {
font-size: 22px;
}
}
/* ==========================================================================
MARKETING TOOLS PAGE HELPERS
========================================================================== */
.marketing-shell .stat-indicator--customers {
background: var(--ui-brand-light);
}
.marketing-shell .stat-indicator--revenue {
background: var(--ui-info);
}
.marketing-shell .stat-indicator--avg-order {
background: var(--ui-brand);
}
.marketing-shell .stat-indicator--redeemed {
background: var(--ui-success);
}
.marketing-shell .summary-skeleton-block {
height: 100px;
}
/* ==========================================================================
CAMPAIGNS PAGE — Restored Campaign Card Hierarchy
========================================================================== */
.marketing-campaigns-page .ui-section-title {
margin: 0 0 var(--ui-space-3);
padding-bottom: var(--ui-space-2);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.marketing-campaigns-page .campaign-list-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
overflow: hidden;
border-radius: var(--ui-radius-xl);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: transform var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
.marketing-campaigns-page .campaign-list-card:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.36);
}
.marketing-campaigns-page .campaign-list-card--inactive {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
}
.marketing-campaigns-page .campaign-list-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.marketing-campaigns-page .campaign-list-card__title-group {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.marketing-campaigns-page .campaign-list-card__title {
margin: 0;
max-width: min(320px, 36vw);
font-size: 18px;
line-height: 1.1;
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.marketing-campaigns-page .campaign-platform-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.marketing-campaigns-page .campaign-platform-badge.platform-website {
background: rgba(255, 152, 0, 0.15);
border-color: rgba(255, 152, 0, 0.3);
color: #ffb74d;
}
.marketing-campaigns-page .campaign-platform-badge.platform-justdial {
background: rgba(76, 175, 80, 0.15);
border-color: rgba(76, 175, 80, 0.3);
color: #81c784;
}
.marketing-campaigns-page .campaign-platform-badge.platform-social {
background: rgba(33, 150, 243, 0.15);
border-color: rgba(33, 150, 243, 0.3);
color: #64b5f6;
}
.marketing-campaigns-page .campaign-platform-badge.platform-call {
background: rgba(0, 188, 212, 0.15);
border-color: rgba(0, 188, 212, 0.3);
color: #4dd0e1;
}
.marketing-campaigns-page .campaign-platform-badge.platform-meta {
background: rgba(255, 87, 34, 0.15);
border-color: rgba(255, 87, 34, 0.3);
color: #ff7043;
}
.marketing-campaigns-page .campaign-platform-badge.platform-knowlarity {
background: rgba(156, 39, 176, 0.15);
border-color: rgba(156, 39, 176, 0.3);
color: #ba68c8;
}
.marketing-campaigns-page .campaign-platform-badge.platform-walkin {
background: rgba(255, 193, 7, 0.15);
border-color: rgba(255, 193, 7, 0.3);
color: #f6c860;
}
.marketing-campaigns-page .campaign-list-card__meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
margin-left: auto;
color: rgba(255, 255, 255, 0.72);
}
.marketing-campaigns-page .campaign-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
white-space: nowrap;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
font-weight: var(--ui-font-medium);
}
.marketing-campaigns-page .campaign-meta-item mat-icon {
width: 14px;
height: 14px;
font-size: 14px;
color: rgba(255, 255, 255, 0.45);
}
.marketing-campaigns-page .campaign-meta-divider {
color: rgba(255, 255, 255, 0.28);
font-size: 12px;
line-height: 1;
}
.marketing-campaigns-page .campaign-list-card__edit {
margin-left: 8px;
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
}
.marketing-campaigns-page .campaign-list-card__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.marketing-campaigns-page .campaign-list-card__toggle:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.45);
outline-offset: 2px;
}
.marketing-campaigns-page .campaign-list-card__toggle-track {
width: 44px;
height: 24px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
display: inline-flex;
align-items: center;
padding: 2px;
transition: var(--ui-transition-base);
}
.marketing-campaigns-page .campaign-list-card__toggle-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
transform: translateX(0);
transition: transform var(--ui-transition-base), background var(--ui-transition-base);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.marketing-campaigns-page .campaign-list-card__toggle.is-active .campaign-list-card__toggle-track {
background: linear-gradient(135deg, #ff5722, #e14125);
border-color: rgba(255, 87, 34, 0.45);
box-shadow: 0 0 10px rgba(255, 87, 34, 0.24);
}
.marketing-campaigns-page .campaign-list-card__toggle.is-active .campaign-list-card__toggle-thumb {
transform: translateX(20px);
background: #fff;
}
.marketing-campaigns-page .campaign-list-card__metrics {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
}
.marketing-campaigns-page .campaign-metric-card {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 18px 20px;
text-align: left;
border: 0;
border-right: 1px solid rgba(255, 255, 255, 0.06);
background: transparent;
color: inherit;
font: inherit;
transition: background var(--ui-transition-fast);
}
.marketing-campaigns-page .campaign-metric-card:last-child {
border-right: none;
}
.marketing-campaigns-page .campaign-metric-card--interactive {
cursor: pointer;
}
.marketing-campaigns-page .campaign-metric-card:hover {
background: rgba(255, 255, 255, 0.03);
}
.marketing-campaigns-page .campaign-metric-card--interactive:hover {
background: rgba(255, 255, 255, 0.05);
}
.marketing-campaigns-page .campaign-metric-card__label {
font-size: 11px;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.marketing-campaigns-page .campaign-metric-card__value {
font-size: 20px;
line-height: 1;
font-weight: var(--ui-font-bold);
letter-spacing: -0.02em;
color: var(--ui-text-primary);
}
.marketing-campaigns-page .campaign-metric-card__value--roas {
color: var(--ui-success);
}
@media (max-width: 1280px) {
.marketing-campaigns-page .campaign-list-card__metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.marketing-campaigns-page .campaign-metric-card {
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.marketing-campaigns-page .campaign-metric-card:nth-child(3n) {
border-right: none;
}
.marketing-campaigns-page .campaign-metric-card:nth-child(n+4) {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
}
@media (max-width: 920px) {
.marketing-campaigns-page .campaign-list-card__header {
flex-wrap: wrap;
align-items: flex-start;
}
.marketing-campaigns-page .campaign-list-card__title {
max-width: none;
}
.marketing-campaigns-page .campaign-list-card__meta {
justify-content: flex-start;
margin-left: 0;
}
.marketing-campaigns-page .campaign-list-card__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.marketing-campaigns-page .campaign-metric-card {
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.marketing-campaigns-page .campaign-metric-card:nth-child(2n) {
border-right: none;
}
.marketing-campaigns-page .campaign-metric-card:nth-child(n+3) {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
}
@media (max-width: 640px) {
.marketing-campaigns-page .campaign-list-card__title {
font-size: 16px;
}
.marketing-campaigns-page .campaign-list-card__header {
padding: 14px 16px;
}
.marketing-campaigns-page .campaign-list-card__meta {
gap: 6px;
}
.marketing-campaigns-page .campaign-meta-divider {
display: none;
}
.marketing-campaigns-page .campaign-list-card__metrics {
grid-template-columns: 1fr;
}
.marketing-campaigns-page .campaign-metric-card {
padding: 16px;
border-right: none;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.marketing-campaigns-page .campaign-metric-card:first-child {
border-top: none;
}
}
/* ==========================================================================
COUPONS PAGE — Restored Coupon Card Hierarchy
========================================================================== */
.marketing-coupons-page .ui-section-title {
margin: 0 0 var(--ui-space-3);
padding-bottom: var(--ui-space-2);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.marketing-coupons-page .coupon-list-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
overflow: hidden;
border-radius: var(--ui-radius-xl);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: transform var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
.marketing-coupons-page .coupon-list-card:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.36);
}
.marketing-coupons-page .coupon-list-card--inactive {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
}
.marketing-coupons-page .coupon-list-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.marketing-coupons-page .coupon-list-card__title-group {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.marketing-coupons-page .coupon-list-card__title {
margin: 0;
max-width: min(220px, 26vw);
font-size: 16px;
line-height: 1.1;
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.marketing-coupons-page .coupon-type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
font-weight: var(--ui-font-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.marketing-coupons-page .coupon-type-badge.badge-percent {
background: rgba(76, 175, 80, 0.15);
border-color: rgba(76, 175, 80, 0.3);
color: #81c784;
}
.marketing-coupons-page .coupon-type-badge.badge-fixed {
background: rgba(33, 150, 243, 0.15);
border-color: rgba(33, 150, 243, 0.3);
color: #64b5f6;
}
.marketing-coupons-page .coupon-list-card__meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
margin-left: auto;
color: rgba(255, 255, 255, 0.72);
}
.marketing-coupons-page .coupon-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
white-space: nowrap;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
font-weight: var(--ui-font-medium);
}
.marketing-coupons-page .coupon-meta-item mat-icon {
width: 14px;
height: 14px;
font-size: 14px;
color: rgba(255, 255, 255, 0.45);
}
.marketing-coupons-page .coupon-meta-divider {
color: rgba(255, 255, 255, 0.28);
font-size: 12px;
line-height: 1;
}
.marketing-coupons-page .coupon-list-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.marketing-coupons-page .coupon-list-card__edit {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
}
.marketing-coupons-page .coupon-list-card__toggle-action {
min-width: 112px;
}
.marketing-coupons-page .coupon-list-card__metrics {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
}
.marketing-coupons-page .coupon-metric-card {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 16px 18px;
text-align: left;
border-right: 1px solid rgba(255, 255, 255, 0.06);
background: transparent;
color: inherit;
}
.marketing-coupons-page .coupon-metric-card:last-child {
border-right: none;
}
.marketing-coupons-page .coupon-metric-card:hover {
background: rgba(255, 255, 255, 0.03);
}
.marketing-coupons-page .coupon-metric-card__value {
font-size: 18px;
line-height: 1;
font-weight: var(--ui-font-bold);
letter-spacing: -0.02em;
color: var(--ui-text-primary);
}
.marketing-coupons-page .coupon-metric-card__label {
font-size: 10px;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 1280px) {
.marketing-coupons-page .coupon-list-card__metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.marketing-coupons-page .coupon-metric-card {
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.marketing-coupons-page .coupon-metric-card:nth-child(3n) {
border-right: none;
}
.marketing-coupons-page .coupon-metric-card:nth-child(n+4) {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
}
@media (max-width: 980px) {
.marketing-coupons-page .coupon-list-card__header {
flex-wrap: wrap;
align-items: flex-start;
}
.marketing-coupons-page .coupon-list-card__title {
max-width: none;
}
.marketing-coupons-page .coupon-list-card__meta {
margin-left: 0;
}
.marketing-coupons-page .coupon-list-card__actions {
width: 100%;
justify-content: flex-start;
}
.marketing-coupons-page .coupon-list-card__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.marketing-coupons-page .coupon-metric-card {
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.marketing-coupons-page .coupon-metric-card:nth-child(2n) {
border-right: none;
}
.marketing-coupons-page .coupon-metric-card:nth-child(n+3) {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
}
@media (max-width: 640px) {
.marketing-coupons-page .coupon-list-card__header {
padding: 14px 16px;
}
.marketing-coupons-page .coupon-list-card__title {
font-size: 15px;
}
.marketing-coupons-page .coupon-meta-divider {
display: none;
}
.marketing-coupons-page .coupon-list-card__toggle-action {
min-width: 96px;
}
.marketing-coupons-page .coupon-list-card__metrics {
grid-template-columns: 1fr;
}
.marketing-coupons-page .coupon-metric-card {
padding: 16px;
border-right: none;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.marketing-coupons-page .coupon-metric-card:first-child {
border-top: none;
}
}
/* ==========================================================================
CONVERSIONS PAGE — Attribution Console
========================================================================== */
/* ── Attribution Coverage Inline ──────────────────────────────────── */
/* ── Stat card sub-label (below value) ────────────────────────────── */
.stat-card__sub {
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
margin-top: -2px;
}
/* ── Table Layout (8 columns) ─────────────────────────────────────── */
.marketing-conversions-page .premium-table.premium-table--marketing-conversions {
width: 100%;
min-width: 1200px;
table-layout: fixed;
}
/* Col 1: Invoice Date */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(1),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(1) {
width: 120px;
}
/* Col 2: Customer */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(2),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(2) {
width: 170px;
}
/* Col 3: Attribution */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(3),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(3) {
width: 200px;
}
/* Col 4: Revenue */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(4),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(4) {
width: 110px;
}
/* Col 5: Confidence */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(5),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(5) {
width: 90px;
}
/* Col 6: Source */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(6),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(6) {
width: 110px;
}
/* Col 7: CRE */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(7),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(7) {
width: 120px;
}
/* Col 8: Car */
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(8),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(8) {
width: 160px;
}
.marketing-conversions-page .premium-table--marketing-conversions .cell-name,
.marketing-conversions-page .premium-table--marketing-conversions .cell-car,
.marketing-conversions-page .premium-table--marketing-conversions .cell-attribution {
white-space: normal;
}
.marketing-conversions-page .premium-table--marketing-conversions .cell-primary {
display: flex;
flex-direction: column;
gap: var(--ui-space-1, 4px);
}
.marketing-conversions-page .premium-table--marketing-conversions .cell-primary-name {
white-space: normal;
word-break: break-word;
}
.marketing-conversions-page .premium-table--marketing-conversions .cell-source .glass-status-chip {
width: fit-content;
}
.marketing-conversions-page .premium-table--marketing-conversions .cell-revenue {
white-space: nowrap;
}
.marketing-conversions-page .premium-table--marketing-conversions .revenue-amount {
font-size: var(--ui-text-lg, 16px);
font-weight: var(--ui-font-semibold, 600);
color: var(--ui-success, #00b894);
}
/* ── Revenue Zero State ───────────────────────────────────────────── */
.revenue-zero {
font-size: 14px;
color: rgba(255, 255, 255, 0.3);
display: block;
}
.revenue-zero-hint {
font-size: 10px;
color: rgba(255, 255, 255, 0.18);
display: block;
margin-top: 1px;
}
/* ── Attribution Cell (Enriched) ──────────────────────────────────── */
.attr-cell-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.attr-campaign-name {
font-size: 13px;
color: #e0e0e0;
white-space: normal;
word-break: break-word;
}
.attr-hint {
font-size: 10px;
color: rgba(255, 255, 255, 0.25);
}
.attr-fix-cta {
font-size: 11px;
color: #d4a24e;
cursor: pointer;
font-weight: 500;
transition: color 0.2s;
}
.attr-fix-cta:hover {
color: #e8b85e;
text-decoration: underline;
}
.attr-warn-icon {
font-size: 13px !important;
width: 13px !important;
height: 13px !important;
margin-right: 2px;
vertical-align: middle;
}
/* ── Attribution Badges ───────────────────────────────────────────── */
.attr-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
width: fit-content;
}
.attr-badge-attributed {
background: rgba(0, 184, 148, 0.1);
color: #00b894;
border: 1px solid rgba(0, 184, 148, 0.18);
}
.attr-badge-unattributed {
background: rgba(214, 48, 49, 0.1);
color: #e17055;
border: 1px solid rgba(214, 48, 49, 0.18);
}
/* ── Confidence Badge ─────────────────────────────────────────────── */
.conf-badge {
display: inline-flex;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
width: fit-content;
}
.conf-high {
color: #00b894;
background: rgba(0, 184, 148, 0.08);
}
.conf-medium {
color: #fdcb6e;
background: rgba(253, 203, 110, 0.08);
}
.conf-low {
color: #e17055;
background: rgba(225, 112, 85, 0.08);
}
.conf-none {
color: rgba(255, 255, 255, 0.2);
background: none;
}
/* ── Row States ───────────────────────────────────────────────────── */
.premium-table--marketing-conversions tr.row-unattributed {
border-left: 3px solid rgba(214, 48, 49, 0.25);
}
.premium-table--marketing-conversions tr.row-unattributed:hover {
border-left-color: rgba(214, 48, 49, 0.5);
}
.premium-table--marketing-conversions tr.row-attributed {
border-left: 3px solid transparent;
}
.premium-table--marketing-conversions tr.row-high-value {
background: rgba(212, 162, 78, 0.02);
}
.premium-table--marketing-conversions tr.row-high-value .revenue-amount {
color: #d4a24e;
text-shadow: 0 0 8px rgba(212, 162, 78, 0.15);
}
/* ── Hover Lift ───────────────────────────────────────────────────── */
.premium-table--marketing-conversions tr.row-clickable {
transition: transform 0.15s ease, background 0.2s, border-left-color 0.2s;
}
.premium-table--marketing-conversions tr.row-clickable:hover {
transform: translateY(-1px);
}
/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(8),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(8) {
display: none;
}
}
@media (max-width: 980px) {
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(5),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(5),
.marketing-conversions-page .premium-table--marketing-conversions th:nth-child(7),
.marketing-conversions-page .premium-table--marketing-conversions td:nth-child(7) {
display: none;
}
.attr-summary-bar {
padding: 10px 14px;
gap: 12px;
}
}
/* ==========================================================================
AD CONNECT BANNER
========================================================================== */
.ad-connect-banner {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
margin: 0 var(--ui-space-4) var(--ui-space-4);
background: var(--ui-glass-light);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
backdrop-filter: var(--ui-blur-sm);
flex-wrap: wrap;
}
.ad-connect-banner__prompt {
display: flex;
align-items: center;
gap: var(--ui-space-2);
color: var(--ui-text-subtle);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
}
.ad-connect-banner__prompt mat-icon {
font-size: var(--ui-text-lg);
width: 18px;
height: 18px;
color: var(--ui-brand-light);
}
.ad-connect-banner__actions {
display: flex;
gap: var(--ui-space-2);
}
.ad-connect-banner__status {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.pill-btn-connect {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
border-radius: var(--ui-radius-full);
border: 1px solid;
cursor: pointer;
transition: all var(--ui-transition-base);
backdrop-filter: var(--ui-blur-sm);
}
.pill-btn-connect i {
font-size: 14px;
}
.pill-btn-connect:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.pill-btn-connect--meta {
background: rgba(24, 119, 242, 0.12);
color: #4599ff;
border-color: rgba(24, 119, 242, 0.3);
}
.pill-btn-connect--meta:hover {
background: rgba(24, 119, 242, 0.2);
}
.pill-btn-connect--google {
background: rgba(66, 133, 244, 0.12);
color: #74b0ff;
border-color: rgba(66, 133, 244, 0.3);
}
.pill-btn-connect--google:hover {
background: rgba(66, 133, 244, 0.2);
}
.ad-status-badge {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-1) var(--ui-space-3);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
border-radius: var(--ui-radius-full);
background: rgba(34, 197, 94, 0.1);
color: var(--ui-success);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.ad-status-badge i {
font-size: 13px;
}
.ad-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ui-success);
animation: overduePulse 2s ease-in-out infinite;
}
.btn-glass--sm {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid var(--ui-border-hover);
border-radius: 50%;
background: var(--ui-surface-1);
color: var(--ui-text-muted);
cursor: pointer;
transition: all var(--ui-transition-base);
}
.btn-glass--sm mat-icon {
font-size: 15px;
width: 15px;
height: 15px;
}
.btn-glass--sm:hover {
background: var(--ui-danger-bg);
color: var(--ui-danger);
border-color: var(--ui-danger-border);
}
.ui-page--whatsapp {
position: relative;
/* Title line: name + badges grouped, timestamp pinned right */
/* ── Entity Role Badges ─────────────────────────────────────────
* Badges display the resolved identity type for WhatsApp contacts:
* Employee, Customer, Vendor, Insurance, Corporate, Dealer, etc.
* Rendered in conversation list rows and the chat header.
* ────────────────────────────────────────────────────────────── */
/* Conversation list: compact inline badges */
/* Chat header: allow slightly larger badges */
/* Overflow indicator: "+N" when badges exceed max visible (3) */
/* Date-group separator — shared by both legacy and marketing WhatsApp views */
/* ── Template-only mode (24h window closed) ──────────────── */
/* ─── WhatsApp Context Drawer — fixed overlay (matches stock-drawer-overlay) ─── */
}
.ui-page--whatsapp .erp-header-block {
position: relative;
z-index: 2;
}
.ui-page--whatsapp .erp-header-primary {
align-items: center;
}
.ui-page--whatsapp .erp-subtitle {
margin-top: var(--ui-space-1);
max-width: 620px;
}
.ui-page--whatsapp .whatsapp-shell {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
min-width: 0;
}
.ui-page--whatsapp .whatsapp-stats-header {
width: min(100%, 1480px);
margin: 0 auto;
}
.ui-page--whatsapp .whatsapp-stats-header .stats-summary-row.is-loading {
opacity: 0.6;
}
.ui-page--whatsapp .whatsapp-stats-header .stats-header__actions {
margin-left: auto;
}
.ui-page--whatsapp .whatsapp-stats-header .stat-card--compact {
min-width: 168px;
}
.ui-page--whatsapp .tab-panel {
min-width: 0;
}
.ui-page--whatsapp .whatsapp-content-rail {
width: min(100%, 1480px);
margin: 0 auto;
}
.ui-page--whatsapp .dashboard-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
}
.ui-page--whatsapp .dashboard-toolbar__copy {
display: flex;
align-items: center;
gap: var(--ui-space-3);
min-width: 0;
}
.ui-page--whatsapp .dashboard-toolbar__copy strong {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--whatsapp .eyebrow {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.ui-page--whatsapp .dashboard-toolbar__actions {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
justify-content: flex-end;
}
.ui-page--whatsapp .dashboard-container {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-page--whatsapp .campaigns-container {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-page--whatsapp .dashboard-section,
.ui-page--whatsapp .campaign-table--refined,
.ui-page--whatsapp .pane {
min-width: 0;
}
.ui-page--whatsapp .dashboard-section {
gap: var(--ui-space-3);
}
.ui-page--whatsapp .dashboard-section--compact {
padding: var(--ui-space-4);
}
.ui-page--whatsapp .kpi-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--ui-space-2);
}
.ui-page--whatsapp .kpi-card,
.ui-page--whatsapp .health-card {
width: 100%;
min-width: 0;
align-items: flex-start;
justify-content: space-between;
text-align: left;
appearance: none;
cursor: pointer;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .kpi-card {
min-height: 76px;
padding: var(--ui-space-3);
}
.ui-page--whatsapp .kpi-card:hover:not(.is-disabled),
.ui-page--whatsapp .health-card:hover {
border-color: var(--ui-border-hover);
transform: translateY(-1px);
}
.ui-page--whatsapp .kpi-card.is-disabled {
opacity: 0.55;
cursor: default;
pointer-events: none;
}
.ui-page--whatsapp .kpi-label,
.ui-page--whatsapp .health-card .label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.ui-page--whatsapp .kpi-value,
.ui-page--whatsapp .health-card .value {
font-size: clamp(1.15rem, 1.7vw, 1.55rem);
font-weight: var(--ui-font-bold);
line-height: 1.1;
color: var(--ui-text-primary);
font-variant-numeric: tabular-nums;
}
.ui-page--whatsapp .kpi-trend {
display: inline-flex;
align-items: center;
padding: calc(var(--ui-space-1) / 2) var(--ui-space-2);
border-radius: var(--ui-radius-full);
background: var(--ui-success-bg);
color: var(--ui-success);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
}
.ui-page--whatsapp .kpi-trend.negative {
background: var(--ui-danger-bg);
color: var(--ui-danger);
}
.ui-page--whatsapp .section-header--compact {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
padding-bottom: var(--ui-space-3);
margin-bottom: var(--ui-space-2);
border-bottom: 1px solid var(--ui-border);
}
.ui-page--whatsapp .section-header--compact h3 {
margin: 0;
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--whatsapp .section-desc {
margin: var(--ui-space-1) 0 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--whatsapp .dashboard-main-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
gap: var(--ui-space-3);
align-items: stretch;
}
.ui-page--whatsapp .dashboard-empty-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 152px;
border: 1px dashed var(--ui-border);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.025);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
}
.ui-page--whatsapp .message-flow {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
min-height: 176px;
}
.ui-page--whatsapp .flow-chart {
width: 100%;
height: 152px;
overflow: visible;
}
.ui-page--whatsapp .line-sent,
.ui-page--whatsapp .line-delivered,
.ui-page--whatsapp .line-read {
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.ui-page--whatsapp .line-sent {
stroke: var(--ui-accent);
}
.ui-page--whatsapp .line-delivered {
stroke: var(--ui-warning);
}
.ui-page--whatsapp .line-read {
stroke: var(--ui-success);
}
.ui-page--whatsapp .chart-legend {
display: flex;
align-items: center;
gap: var(--ui-space-4);
flex-wrap: wrap;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--whatsapp .chart-legend span {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-page--whatsapp .chart-legend .dot,
.ui-page--whatsapp .typing-indicator .dot,
.ui-page--whatsapp .badge--dot {
display: inline-flex;
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 auto;
}
.ui-page--whatsapp .chart-legend .dot.sent {
background: var(--ui-accent);
}
.ui-page--whatsapp .chart-legend .dot.delivered {
background: var(--ui-warning);
}
.ui-page--whatsapp .chart-legend .dot.read {
background: var(--ui-success);
}
.ui-page--whatsapp .chart-skeleton,
.ui-page--whatsapp .campaign-skeleton {
border: 1px dashed var(--ui-border);
border-radius: var(--ui-radius-xl);
background: linear-gradient(180deg, var(--ui-surface-1), var(--ui-surface-2));
}
.ui-page--whatsapp .chart-skeleton {
min-height: 152px;
}
.ui-page--whatsapp .campaign-skeleton {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
padding: var(--ui-space-5);
}
.ui-page--whatsapp .conversation-health {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.ui-page--whatsapp .health-card {
min-height: 96px;
padding: var(--ui-space-4);
}
.ui-page--whatsapp .activity-table,
.ui-page--whatsapp .logs-table {
min-width: 0;
overflow: hidden;
}
.ui-page--whatsapp .dashboard-section--activity .activity-table {
overflow: auto;
}
.ui-page--whatsapp .dashboard-section--activity .glass-table th,
.ui-page--whatsapp .dashboard-section--activity .glass-table td {
padding-top: var(--ui-space-2);
padding-bottom: var(--ui-space-2);
}
.ui-page--whatsapp .dashboard-section--activity .glass-table th {
white-space: nowrap;
}
.ui-page--whatsapp .activity-table .glass-table,
.ui-page--whatsapp .campaigns-grid,
.ui-page--whatsapp .logs-table .glass-table {
font-variant-numeric: tabular-nums;
}
.ui-page--whatsapp .activity-table .glass-table,
.ui-page--whatsapp .logs-table .glass-table,
.ui-page--whatsapp .variables-table {
min-width: 0;
width: 100%;
}
.ui-page--whatsapp .activity-table .glass-table tbody,
.ui-page--whatsapp .logs-table .glass-table tbody,
.ui-page--whatsapp .variables-table tbody {
max-height: none;
}
.ui-page--whatsapp .activity-grid th:nth-child(1),
.ui-page--whatsapp .activity-grid td:nth-child(1) {
width: 22%;
}
.ui-page--whatsapp .activity-grid th:nth-child(2),
.ui-page--whatsapp .activity-grid td:nth-child(2) {
width: 42%;
}
.ui-page--whatsapp .activity-grid th:nth-child(3),
.ui-page--whatsapp .activity-grid td:nth-child(3) {
width: 20%;
}
.ui-page--whatsapp .activity-grid th:nth-child(4),
.ui-page--whatsapp .activity-grid td:nth-child(4) {
width: 16%;
}
.ui-page--whatsapp .activity-grid .cell-timestamp,
.ui-page--whatsapp .activity-grid .cell-status,
.ui-page--whatsapp .campaigns-grid .cell-meta,
.ui-page--whatsapp .campaigns-grid .cell-metric,
.ui-page--whatsapp .logs-table .cell-time,
.ui-page--whatsapp .logs-table .cell-stat {
color: var(--ui-text-muted);
}
.ui-page--whatsapp .search-field--compact {
min-width: 0;
width: 100%;
}
.ui-page--whatsapp .date-filter--compact,
.ui-page--whatsapp .filter-select--compact,
.ui-page--whatsapp .template-select,
.ui-page--whatsapp .campaign-form mat-form-field {
width: 100%;
}
.ui-page--whatsapp .date-filter--compact {
width: 220px;
flex: 0 0 220px;
}
.ui-page--whatsapp .date-filter--compact .mat-mdc-text-field-wrapper,
.ui-page--whatsapp .filter-select--compact .mat-mdc-text-field-wrapper,
.ui-page--whatsapp .campaign-form .mat-mdc-text-field-wrapper {
border-radius: var(--ui-radius-lg);
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
box-shadow: none;
}
.ui-page--whatsapp .date-filter--compact .mat-mdc-form-field-infix,
.ui-page--whatsapp .filter-select--compact .mat-mdc-form-field-infix,
.ui-page--whatsapp .campaign-form .mat-mdc-form-field-infix {
min-height: 44px;
padding: var(--ui-space-3) 0;
}
.ui-page--whatsapp .campaign-form .mat-mdc-form-field {
--mat-form-field-container-height: 44px;
margin-bottom: 0;
}
.ui-page--whatsapp .campaign-form .mat-mdc-form-field-subscript-wrapper {
display: none;
}
.ui-page--whatsapp .campaign-form .mat-mdc-select-value,
.ui-page--whatsapp .campaign-form input.mat-mdc-input-element {
font-size: var(--ui-text-sm);
}
.ui-page--whatsapp .campaign-table--refined {
padding: 0;
overflow: hidden;
}
.ui-page--whatsapp .campaign-table--refined .glass-table-scroll,
.ui-page--whatsapp .logs-table .glass-table-scroll {
overflow-x: auto;
}
.ui-page--whatsapp .campaigns-grid {
min-width: 1080px;
width: 100%;
}
.ui-page--whatsapp .campaigns-grid tbody {
max-height: none;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(1),
.ui-page--whatsapp .campaigns-grid td:nth-child(1) {
width: 18%;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(2),
.ui-page--whatsapp .campaigns-grid td:nth-child(2) {
width: 10%;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(3),
.ui-page--whatsapp .campaigns-grid td:nth-child(3) {
width: 14%;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(4),
.ui-page--whatsapp .campaigns-grid td:nth-child(4) {
width: 10%;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(5),
.ui-page--whatsapp .campaigns-grid td:nth-child(5),
.ui-page--whatsapp .campaigns-grid th:nth-child(6),
.ui-page--whatsapp .campaigns-grid td:nth-child(6),
.ui-page--whatsapp .campaigns-grid th:nth-child(7),
.ui-page--whatsapp .campaigns-grid td:nth-child(7) {
width: 8%;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(8),
.ui-page--whatsapp .campaigns-grid td:nth-child(8),
.ui-page--whatsapp .campaigns-grid th:nth-child(9),
.ui-page--whatsapp .campaigns-grid td:nth-child(9) {
width: 7%;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(10),
.ui-page--whatsapp .campaigns-grid td:nth-child(10) {
width: 6%;
}
.ui-page--whatsapp .campaigns-grid th:nth-child(11),
.ui-page--whatsapp .campaigns-grid td:nth-child(11) {
width: 6%;
}
.ui-page--whatsapp .campaigns-grid th.col-metric,
.ui-page--whatsapp .campaigns-grid td.cell-metric,
.ui-page--whatsapp .campaigns-grid th.col-failed,
.ui-page--whatsapp .logs-table .cell-stat,
.ui-page--whatsapp .logs-table .col-stat {
text-align: right;
}
.ui-page--whatsapp .campaigns-grid .cell-name,
.ui-page--whatsapp .campaigns-grid .cell-meta,
.ui-page--whatsapp .activity-grid .cell-event,
.ui-page--whatsapp .activity-grid .cell-entity,
.ui-page--whatsapp .logs-table .cell-cust,
.ui-page--whatsapp .logs-table .cell-phone,
.ui-page--whatsapp .logs-table .cell-camp {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-page--whatsapp .campaign-row--dense td {
padding-top: var(--ui-space-3);
padding-bottom: var(--ui-space-3);
}
.ui-page--whatsapp .cell-name {
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--whatsapp .cell-meta {
white-space: nowrap;
}
.ui-page--whatsapp .cell-failed .has-failures {
color: var(--ui-danger);
font-weight: var(--ui-font-semibold);
}
.ui-page--whatsapp .status-tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 var(--ui-space-3);
border-radius: var(--ui-radius-full);
border: 1px solid var(--ui-border);
background: var(--ui-surface-2);
color: var(--ui-text-secondary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
}
.ui-page--whatsapp .status-tag.chip-muted {
background: var(--ui-surface-2);
color: var(--ui-text-muted);
}
.ui-page--whatsapp .status-tag.chip-amber,
.ui-page--whatsapp .status-pill.pill-sent {
background: var(--ui-warning-bg);
border-color: var(--ui-warning-border);
color: var(--ui-warning);
}
.ui-page--whatsapp .status-tag.chip-warm,
.ui-page--whatsapp .status-pill.pill-delivered {
background: var(--ui-accent-bg);
border-color: var(--ui-accent-border);
color: var(--ui-accent);
}
.ui-page--whatsapp .status-tag.chip-teal,
.ui-page--whatsapp .status-pill.pill-read {
background: var(--ui-success-bg);
border-color: var(--ui-success-border);
color: var(--ui-success);
}
.ui-page--whatsapp .status-tag.chip-danger,
.ui-page--whatsapp .status-pill.pill-failed {
background: var(--ui-danger-bg);
border-color: var(--ui-danger-border);
color: var(--ui-danger);
}
.ui-page--whatsapp .action-group {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-1);
}
.ui-page--whatsapp .campaigns-grid .ui-icon-btn {
width: 30px;
min-width: 30px;
height: 30px;
}
.ui-page--whatsapp .empty-state--subtle,
.ui-page--whatsapp .empty-state--minimal,
.ui-page--whatsapp .empty-chat--minimal {
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
padding: var(--ui-space-6);
border: 1px dashed var(--ui-border);
border-radius: var(--ui-radius-xl);
background: var(--ui-surface-1);
color: var(--ui-text-muted);
text-align: center;
}
.ui-page--whatsapp .chat-layout {
position: relative;
display: grid;
grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
gap: var(--ui-space-2);
align-items: stretch;
height: clamp(620px, 100dvh - 190px, 860px);
min-height: 0;
overflow: hidden;
scroll-margin-top: var(--ui-space-4);
}
.ui-page--whatsapp .pane {
display: flex;
flex-direction: column;
padding: 0;
height: 100%;
min-height: 0;
overflow: hidden;
}
.ui-page--whatsapp .pane-header {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
padding: var(--ui-space-2);
border-bottom: 1px solid var(--ui-border);
flex: 0 0 auto;
}
.ui-page--whatsapp .conversation-header {
border-bottom-color: color-mix(in srgb, var(--ui-border) 70%, transparent);
}
.ui-page--whatsapp .chat-list-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-2);
min-width: 0;
}
.ui-page--whatsapp .chat-list-titlebar h2 {
margin: 0;
color: var(--ui-text-primary);
font-family: var(--ui-font-display);
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
line-height: 1.1;
}
.ui-page--whatsapp .conversations-pane--wa .search-field {
min-height: 36px;
border-radius: var(--ui-radius-md);
}
.ui-page--whatsapp .chat-filter-chips {
display: flex;
align-items: center;
gap: var(--ui-space-1);
overflow-x: auto;
scrollbar-width: none;
}
.ui-page--whatsapp .chat-filter-chips::-webkit-scrollbar {
display: none;
}
.ui-page--whatsapp .chat-filter-chip {
flex: 0 0 auto;
min-height: 28px;
padding: 0 var(--ui-space-2);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
cursor: pointer;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .chat-filter-chip:hover,
.ui-page--whatsapp .chat-filter-chip.active {
color: var(--ui-success);
background: var(--ui-success-bg);
border-color: var(--ui-success-border);
}
.ui-page--whatsapp .conversation-list {
display: flex;
flex-direction: column;
gap: 0;
flex: 1 1 auto;
min-height: 0;
max-height: none;
padding: var(--ui-space-1);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: auto;
overscroll-behavior-x: contain;
scrollbar-gutter: stable;
}
.ui-page--whatsapp .conversation-row {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: var(--ui-space-2);
align-items: center;
width: 100%;
min-height: 64px;
padding: var(--ui-space-1) var(--ui-space-2);
border: 1px solid transparent;
border-radius: var(--ui-radius-lg);
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .conversation-row:hover {
background: color-mix(in srgb, var(--ui-surface-hover) 82%, transparent);
border-color: transparent;
}
.ui-page--whatsapp .conversation-row.active {
background: var(--ui-surface-hover);
border-color: var(--ui-border);
box-shadow: none;
}
.ui-page--whatsapp .conversation-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
overflow: hidden;
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-full);
background: linear-gradient(135deg, var(--ui-accent-bg), var(--ui-surface-3));
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
letter-spacing: 0;
}
.ui-page--whatsapp .conversation-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-page--whatsapp .conversation-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ui-page--whatsapp .conversation-title-line,
.ui-page--whatsapp .conversation-message-line,
.ui-page--whatsapp .conversation-meta-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-2);
min-width: 0;
}
.ui-page--whatsapp .conversation-title-line {
justify-content: flex-start;
gap: 4px;
}
.ui-page--whatsapp .conversation-row .name {
flex: 0 1 auto;
min-width: 0;
max-width: 55%;
font-size: var(--ui-text-base);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-page--whatsapp .conversation-row .timestamp {
margin-left: auto;
flex: 0 0 auto;
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.ui-page--whatsapp .conversation-row .timestamp.has-unread {
color: var(--ui-success);
font-weight: var(--ui-font-semibold);
}
.ui-page--whatsapp .conversation-row .preview {
min-width: 0;
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-page--whatsapp .conversation-row .phone {
min-width: 0;
color: var(--ui-text-subtle);
font-family: var(--ui-font-mono);
font-size: var(--ui-text-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-page--whatsapp .unread-count {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 22px;
height: 22px;
padding: 0 var(--ui-space-1);
border-radius: var(--ui-radius-full);
background: var(--ui-success);
color: var(--ui-surface-base);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
line-height: 1;
}
.ui-page--whatsapp .mini-flag {
flex: 0 0 auto;
padding: 1px var(--ui-space-2);
border-radius: var(--ui-radius-full);
font-size: 10px;
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
}
.ui-page--whatsapp .mini-flag.sla {
color: var(--ui-danger);
background: var(--ui-danger-bg);
}
.ui-page--whatsapp .mini-flag.closed {
color: var(--ui-text-muted);
background: var(--ui-surface-2);
}
.ui-page--whatsapp .entity-badges {
display: inline-flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
min-width: 0;
}
.ui-page--whatsapp .entity-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 16px;
padding: 1px 5px;
border-radius: var(--ui-radius-full);
font-size: 9px;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.03em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .badge-employee {
color: #fbbf24;
background: rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.25);
}
.ui-page--whatsapp .badge-customer {
color: #2dd4bf;
background: rgba(20, 184, 166, 0.15);
border-color: rgba(20, 184, 166, 0.25);
}
.ui-page--whatsapp .badge-vendor,
.ui-page--whatsapp .badge-supplier {
color: #a78bfa;
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.25);
}
.ui-page--whatsapp .badge-insurance {
color: #fb923c;
background: rgba(251, 146, 60, 0.15);
border-color: rgba(251, 146, 60, 0.25);
}
.ui-page--whatsapp .badge-corporate {
color: #60a5fa;
background: rgba(96, 165, 250, 0.15);
border-color: rgba(96, 165, 250, 0.25);
}
.ui-page--whatsapp .badge-dealer {
color: #f472b6;
background: rgba(244, 114, 182, 0.15);
border-color: rgba(244, 114, 182, 0.25);
}
.ui-page--whatsapp .badge-internal {
color: #94a3b8;
background: rgba(148, 163, 184, 0.1);
border-color: rgba(148, 163, 184, 0.2);
}
.ui-page--whatsapp .badge-lead {
color: #94a3b8;
background: rgba(148, 163, 184, 0.1);
border-color: rgba(148, 163, 184, 0.18);
}
.ui-page--whatsapp .badge-default {
color: var(--ui-text-muted);
background: var(--ui-surface-2);
border-color: var(--ui-border);
}
.ui-page--whatsapp .conversation-row .entity-badges {
flex: 0 1 auto;
max-width: none;
overflow: hidden;
flex-wrap: nowrap;
}
.ui-page--whatsapp .chat-header .entity-badge {
min-height: 20px;
padding: 0 8px;
font-size: 11px;
}
.ui-page--whatsapp .badge-overflow {
color: var(--ui-text-subtle);
background: var(--ui-surface-2);
border-color: var(--ui-border);
cursor: default;
}
.ui-page--whatsapp .conversation-list--loading {
gap: var(--ui-space-1);
}
.ui-page--whatsapp .skeleton-conversation {
pointer-events: none;
}
.ui-page--whatsapp .skeleton-avatar {
background: var(--ui-surface-3);
}
.ui-page--whatsapp .conversation-loading-more {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
}
.ui-page--whatsapp .spinner-small {
width: 16px;
height: 16px;
border: 2px solid var(--ui-border);
border-top-color: var(--ui-accent);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.ui-page--whatsapp .chat-pane {
display: flex;
flex-direction: column;
}
.ui-page--whatsapp .chat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--ui-border);
flex: 0 0 auto;
}
.ui-page--whatsapp .customer-block,
.ui-page--whatsapp .chat-controls {
min-width: 0;
}
.ui-page--whatsapp .title-line {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
line-height: 1.1;
}
.ui-page--whatsapp .title-line h2 {
margin: 0;
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--whatsapp .meta-line {
margin: 2px 0 0;
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.ui-page--whatsapp .chat-controls {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
flex-wrap: wrap;
}
.ui-page--whatsapp .chat-controls--compact .channel-trigger {
height: 34px;
padding-inline: var(--ui-space-3);
}
.ui-page--whatsapp .chat-controls--compact .ui-icon-btn {
width: 34px;
height: 34px;
}
.ui-page--whatsapp .status-pill--small,
.ui-page--whatsapp .status-pill--tiny,
.ui-page--whatsapp .status-pill--subtle {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ui-radius-full);
border: 1px solid var(--ui-border);
background: var(--ui-surface-2);
color: var(--ui-text-secondary);
font-weight: var(--ui-font-semibold);
}
.ui-page--whatsapp .status-pill--small {
min-height: 24px;
padding: 0 var(--ui-space-2);
font-size: var(--ui-text-xs);
}
.ui-page--whatsapp .status-pill--tiny {
min-height: 24px;
padding: 0 var(--ui-space-2);
font-size: 11px;
}
.ui-page--whatsapp .status-pill.closed {
background: var(--ui-danger-bg);
border-color: var(--ui-danger-border);
color: var(--ui-danger);
}
.ui-page--whatsapp .status-banner {
margin: var(--ui-space-2) var(--ui-space-3) 0;
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
font-size: var(--ui-text-sm);
flex: 0 0 auto;
}
.ui-page--whatsapp .status-banner.closed {
background: var(--ui-danger-bg);
border-color: var(--ui-danger-border);
color: var(--ui-danger);
}
.ui-page--whatsapp .status-banner.caution {
background: var(--ui-warning-bg);
border-color: var(--ui-warning-border);
color: var(--ui-warning);
}
.ui-page--whatsapp .chat-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: auto;
overscroll-behavior-x: contain;
scrollbar-gutter: stable;
padding: var(--ui-space-3);
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 24%);
}
.ui-page--whatsapp .message-label {
align-self: center;
padding: calc(var(--ui-space-1) / 2) var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
}
.ui-page--whatsapp .date-separator {
display: flex;
align-items: center;
justify-content: center;
margin: var(--ui-space-3) 0 var(--ui-space-2);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.ui-page--whatsapp .date-separator__label {
padding: 3px var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
letter-spacing: 0.02em;
}
.ui-page--whatsapp .message {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
width: fit-content;
max-width: min(68%, 520px);
padding: var(--ui-space-3) var(--ui-space-4);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.045);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.ui-page--whatsapp .message.outgoing {
margin-left: auto;
background: rgba(255, 130, 90, 0.12);
border-color: rgba(255, 130, 90, 0.26);
}
.ui-page--whatsapp .message.incoming {
margin-right: auto;
background: rgba(255, 255, 255, 0.055);
}
.ui-page--whatsapp .message-type,
.ui-page--whatsapp .message-meta {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.ui-page--whatsapp .message-body {
color: var(--ui-text-primary);
line-height: 1.5;
word-break: break-word;
}
.ui-page--whatsapp .message-body.document {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-page--whatsapp .message-body.document a {
color: var(--ui-text-primary);
text-decoration: underline;
}
.ui-page--whatsapp .image-caption {
margin-top: var(--ui-space-2);
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
}
.ui-page--whatsapp .typing-indicator {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: 0 var(--ui-space-2);
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
}
.ui-page--whatsapp .typing-indicator .dot {
background: var(--ui-text-muted);
opacity: 0.7;
}
.ui-page--whatsapp .chat-composer {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-3);
border-top: 0;
background: transparent;
flex: 0 0 auto;
}
.ui-page--whatsapp .composer-surface {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
padding: var(--ui-space-2);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
}
.ui-page--whatsapp .composer-input-row {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto auto;
align-items: center;
gap: var(--ui-space-2);
min-width: 0;
}
.ui-page--whatsapp .composer-surface.disabled {
opacity: 0.7;
}
.ui-page--whatsapp .composer-surface textarea,
.ui-page--whatsapp .note-input textarea {
width: 100%;
resize: vertical;
border: none;
outline: none;
background: transparent;
color: var(--ui-text-primary);
font: inherit;
min-height: 30px;
max-height: 72px;
resize: none;
line-height: 1.4;
padding: 0 var(--ui-space-2);
}
.ui-page--whatsapp .composer-surface textarea::placeholder,
.ui-page--whatsapp .note-input textarea::placeholder {
color: var(--ui-text-subtle);
}
.ui-page--whatsapp .composer-actions,
.ui-page--whatsapp .composer-meta {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.ui-page--whatsapp .composer-meta {
justify-content: space-between;
min-height: 20px;
padding: 0 var(--ui-space-2);
}
.ui-page--whatsapp .template-selected {
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
}
.ui-page--whatsapp .composer-surface--template-only {
border-radius: var(--ui-radius-lg);
}
.ui-page--whatsapp .template-only-bar {
display: flex;
align-items: center;
gap: var(--ui-space-2);
min-height: 44px;
padding: 0 var(--ui-space-2);
}
.ui-page--whatsapp .template-only-icon {
color: var(--ui-warning);
font-size: 18px;
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.ui-page--whatsapp .template-only-label {
flex: 1 1 auto;
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-page--whatsapp .template-only-pick {
flex: 0 0 auto;
}
.ui-page--whatsapp .template-only-bar--selected {
gap: var(--ui-space-3);
}
.ui-page--whatsapp .template-preview-col {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ui-page--whatsapp .template-preview-name {
display: flex;
align-items: center;
gap: 2px;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--whatsapp .template-preview-body {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-page--whatsapp .clear-template-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 4px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--ui-text-muted);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .clear-template-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--ui-text-primary);
}
.ui-page--whatsapp .send {
min-height: 38px;
margin-left: 0;
color: var(--ui-accent);
}
.ui-page--whatsapp .empty-chat__text {
font-size: var(--ui-text-base);
color: var(--ui-text-muted);
}
.ui-page--whatsapp .empty-chat {
flex: 1 1 auto;
min-height: 0;
height: 100%;
}
.ui-page--whatsapp .wa-drawer-overlay.mat-drawer-container {
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
pointer-events: none;
background: transparent !important;
}
.ui-page--whatsapp .wa-drawer-overlay .mat-drawer-backdrop {
pointer-events: auto;
}
.ui-page--whatsapp .wa-drawer-overlay .mat-drawer {
pointer-events: auto;
}
.ui-page--whatsapp .wa-drawer-overlay.mat-drawer-container-has-open {
pointer-events: auto;
}
.ui-page--whatsapp .context-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
}
.ui-page--whatsapp .context-header h4 {
margin: 0;
color: var(--ui-text-primary);
}
.ui-page--whatsapp .context-card {
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-3);
}
.ui-page--whatsapp .context-card:last-child {
margin-bottom: 0;
}
.ui-page--whatsapp .profile-row,
.ui-page--whatsapp .note-meta {
display: grid;
grid-template-columns: minmax(80px, 96px) minmax(0, 1fr);
gap: var(--ui-space-3);
align-items: start;
}
.ui-page--whatsapp .profile-row .label,
.ui-page--whatsapp .chip-panel .label,
.ui-page--whatsapp .template-preview .label,
.ui-page--whatsapp .modal-indicators .label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.ui-page--whatsapp .profile-row .value,
.ui-page--whatsapp .entity-title,
.ui-page--whatsapp .note-author {
color: var(--ui-text-primary);
font-weight: var(--ui-font-medium);
}
.ui-page--whatsapp .profile-row .value.warn {
color: var(--ui-warning);
}
.ui-page--whatsapp .tags {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.ui-page--whatsapp .tag--small {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 var(--ui-space-2);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
font-size: var(--ui-text-xs);
color: var(--ui-text-secondary);
}
.ui-page--whatsapp .section-toggle,
.ui-page--whatsapp .entity-row {
border: none;
background: transparent;
}
.ui-page--whatsapp .entity-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
width: 100%;
padding: var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-lg);
background: var(--ui-surface-2);
text-align: left;
cursor: pointer;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .entity-row--clickable:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--ui-border-light);
}
.ui-page--whatsapp .entity-arrow {
font-size: 16px;
width: 16px;
height: 16px;
color: var(--ui-text-muted);
opacity: 0.5;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .entity-row--clickable:hover .entity-arrow {
opacity: 1;
color: var(--ui-text-primary);
}
.ui-page--whatsapp .entity-meta,
.ui-page--whatsapp .note-time,
.ui-page--whatsapp .pagination-meta,
.ui-page--whatsapp .count-info,
.ui-page--whatsapp .channel-info,
.ui-page--whatsapp .muted {
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
}
.ui-page--whatsapp .note-input {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-page--whatsapp .note-list {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-page--whatsapp .note-row {
padding-top: var(--ui-space-3);
border-top: 1px solid var(--ui-border);
}
.ui-page--whatsapp .note-text {
margin: var(--ui-space-2) 0 0;
color: var(--ui-text-secondary);
}
.ui-page--whatsapp .modal-layer {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--ui-space-6);
z-index: 10000;
isolation: isolate;
}
.ui-page--whatsapp .modal-layer .modal-backdrop {
position: absolute;
inset: 0;
z-index: 0;
}
.ui-page--whatsapp .logs-modal,
.ui-page--whatsapp .campaign-modal {
position: relative;
z-index: 1;
width: min(1180px, 100vw - var(--ui-space-8));
max-height: calc(100vh - var(--ui-space-10));
display: flex;
flex-direction: column;
overflow: hidden;
}
.ui-page--whatsapp .logs-modal {
width: min(1120px, 100vw - var(--ui-space-8));
}
.ui-page--whatsapp .campaign-modal--refined {
width: min(1080px, 100vw - var(--ui-space-8));
}
.ui-page--whatsapp .modal-header--refined .meta-row {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.ui-page--whatsapp .logs-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ui-space-3);
padding: 0 var(--ui-space-5) var(--ui-space-4);
}
.ui-page--whatsapp .summary-card {
align-items: flex-start;
}
.ui-page--whatsapp .summary-card .label {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ui-page--whatsapp .summary-card .value {
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
font-variant-numeric: tabular-nums;
}
.ui-page--whatsapp .value--error.has-error {
color: var(--ui-danger);
}
.ui-page--whatsapp .logs-table {
flex: 1 1 auto;
overflow: auto;
}
.ui-page--whatsapp .logs-table .glass-table {
min-width: 940px;
}
.ui-page--whatsapp .logs-table .glass-table th:nth-child(1),
.ui-page--whatsapp .logs-table .glass-table td:nth-child(1) {
width: 18%;
}
.ui-page--whatsapp .logs-table .glass-table th:nth-child(2),
.ui-page--whatsapp .logs-table .glass-table td:nth-child(2) {
width: 22%;
}
.ui-page--whatsapp .logs-table .glass-table th:nth-child(3),
.ui-page--whatsapp .logs-table .glass-table td:nth-child(3) {
width: 18%;
}
.ui-page--whatsapp .logs-table .glass-table th:nth-child(4),
.ui-page--whatsapp .logs-table .glass-table td:nth-child(4) {
width: 24%;
}
.ui-page--whatsapp .logs-table .glass-table th:nth-child(5),
.ui-page--whatsapp .logs-table .glass-table td:nth-child(5) {
width: 12%;
}
.ui-page--whatsapp .logs-table .glass-table th:nth-child(6),
.ui-page--whatsapp .logs-table .glass-table td:nth-child(6) {
width: 6%;
}
.ui-page--whatsapp .logs-footer,
.ui-page--whatsapp .modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
padding: var(--ui-space-4) var(--ui-space-5);
border-top: 1px solid var(--ui-border);
background: var(--ui-surface-1);
}
.ui-page--whatsapp .pagination-controls,
.ui-page--whatsapp .modal-indicators {
display: flex;
align-items: center;
gap: var(--ui-space-3);
flex-wrap: wrap;
}
.ui-page--whatsapp .modal-indicators > div {
display: flex;
flex-direction: column;
gap: calc(var(--ui-space-1) / 2);
min-width: 110px;
}
.ui-page--whatsapp .limit-warning {
margin: 0 var(--ui-space-5);
padding: var(--ui-space-3) var(--ui-space-4);
border-radius: var(--ui-radius-lg);
background: var(--ui-warning-bg);
border: 1px solid var(--ui-warning-border);
color: var(--ui-warning);
}
.ui-page--whatsapp .campaign-form {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
padding: var(--ui-space-4);
overflow: auto;
}
.ui-page--whatsapp .campaign-form--compact {
background: radial-gradient(circle at 14% 0%, rgba(255, 120, 79, 0.08), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 40%);
}
.ui-page--whatsapp .campaign-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
gap: var(--ui-space-3);
}
.ui-page--whatsapp .form-section {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
padding: var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.035);
}
.ui-page--whatsapp .form-section--compact {
gap: var(--ui-space-3);
}
.ui-page--whatsapp .campaign-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
min-width: 0;
}
.ui-page--whatsapp .form-section h3 {
margin: 0;
font-size: var(--ui-text-base);
line-height: 1.2;
color: var(--ui-text-primary);
}
.ui-page--whatsapp .form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.ui-page--whatsapp .audience-summary {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
}
.ui-page--whatsapp .audience-summary span {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
}
.ui-page--whatsapp .audience-picker-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.ui-page--whatsapp .chip-panel {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
background: rgba(255, 255, 255, 0.025);
}
.ui-page--whatsapp .chip-panel--compact {
min-height: 112px;
max-height: 176px;
overflow: auto;
}
.ui-page--whatsapp .chip-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-2);
}
.ui-page--whatsapp .chip-panel__header .label {
margin: 0;
}
.ui-page--whatsapp .chip-panel__header span {
color: var(--ui-text-subtle);
font-size: var(--ui-text-xs);
font-variant-numeric: tabular-nums;
}
.ui-page--whatsapp .muted--empty {
min-height: 32px;
display: inline-flex;
align-items: center;
}
.ui-page--whatsapp .audience-chip {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-2);
width: 100%;
min-height: 30px;
padding: 0 var(--ui-space-2);
border-radius: var(--ui-radius-full);
border: 1px solid var(--ui-border);
background: var(--ui-surface-2);
color: var(--ui-text-secondary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: var(--ui-transition-base);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-page--whatsapp .audience-chip.active {
background: var(--ui-accent-bg);
border-color: var(--ui-accent-border);
color: var(--ui-accent);
}
.ui-page--whatsapp .chip-count {
font-size: 11px;
opacity: 0.7;
margin-left: 2px;
}
.ui-page--whatsapp .direct-recipient-panel {
display: grid;
grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
gap: var(--ui-space-3);
align-items: center;
padding: var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.025);
}
.ui-page--whatsapp .direct-recipient-copy {
display: flex;
flex-direction: column;
gap: calc(var(--ui-space-1) / 2);
min-width: 0;
}
.ui-page--whatsapp .direct-recipient-copy .label {
margin: 0;
}
.ui-page--whatsapp .manual-phone-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
min-width: 0;
}
.ui-page--whatsapp .phone-input-field {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex: 1;
min-width: 0;
min-height: 40px;
padding: 0 var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
}
.ui-page--whatsapp .phone-prefix {
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
font-variant-numeric: tabular-nums;
}
.ui-page--whatsapp .phone-input-field input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--ui-text-primary);
font: inherit;
font-variant-numeric: tabular-nums;
}
.ui-page--whatsapp .phone-input-field input::placeholder {
color: var(--ui-text-subtle);
}
.ui-page--whatsapp .manual-recipients-list {
grid-column: 2;
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
margin-top: calc(var(--ui-space-1) * -1);
}
.ui-page--whatsapp .recipient-chip {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
min-height: 32px;
padding: 0 var(--ui-space-2) 0 var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: var(--ui-accent-bg);
border: 1px solid var(--ui-accent-border);
color: var(--ui-accent);
font-size: var(--ui-text-sm);
}
.ui-page--whatsapp .recipient-phone {
font-variant-numeric: tabular-nums;
font-weight: var(--ui-font-medium);
}
.ui-page--whatsapp .recipient-chip .remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--ui-accent);
cursor: pointer;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .recipient-chip .remove-btn:hover {
background: var(--ui-danger-bg);
color: var(--ui-danger);
}
.ui-page--whatsapp .recipient-chip .remove-btn .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.ui-page--whatsapp .option-line,
.ui-page--whatsapp .option-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
color: var(--ui-text-secondary);
}
.ui-page--whatsapp .option-line--compact {
min-height: 40px;
padding: 0 var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.025);
}
.ui-page--whatsapp .schedule-option {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
min-height: 38px;
padding: 0 var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
color: var(--ui-text-secondary);
cursor: pointer;
transition: var(--ui-transition-base);
}
.ui-page--whatsapp .schedule-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ui-page--whatsapp .schedule-option mat-icon {
width: 18px;
height: 18px;
font-size: 18px;
}
.ui-page--whatsapp .schedule-option.active {
color: var(--ui-accent);
background: var(--ui-accent-bg);
border-color: var(--ui-accent-border);
}
.ui-page--whatsapp .option-line input[type=number],
.ui-page--whatsapp .option-row input[type=datetime-local] {
min-height: 36px;
padding: 0 var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
background: var(--ui-surface-2);
color: var(--ui-text-primary);
}
.ui-page--whatsapp .option-line input[type=number] {
width: 86px;
font-variant-numeric: tabular-nums;
}
.ui-page--whatsapp .schedule-input {
flex: 1 1 190px;
min-width: 180px;
}
.ui-page--whatsapp .form-section--template .campaign-section-header {
align-items: flex-start;
}
.ui-page--whatsapp .form-section--template .template-select {
width: min(420px, 55%);
}
.ui-page--whatsapp .template-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
gap: var(--ui-space-3);
align-items: start;
}
.ui-page--whatsapp .variables-table {
min-width: 640px;
}
.ui-page--whatsapp .variables-table th:nth-child(1),
.ui-page--whatsapp .variables-table td:nth-child(1) {
width: 24%;
}
.ui-page--whatsapp .variables-table th:nth-child(2),
.ui-page--whatsapp .variables-table td:nth-child(2),
.ui-page--whatsapp .variables-table th:nth-child(3),
.ui-page--whatsapp .variables-table td:nth-child(3) {
width: 38%;
}
.ui-page--whatsapp .template-preview {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.ui-page--whatsapp .preview-card {
padding: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
background: rgba(255, 255, 255, 0.025);
color: var(--ui-text-secondary);
line-height: 1.6;
}
@media (max-width: 1200px) {
.ui-page--whatsapp .kpi-grid,
.ui-page--whatsapp .conversation-health,
.ui-page--whatsapp .logs-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-page--whatsapp .dashboard-main-grid {
grid-template-columns: 1fr;
}
.ui-page--whatsapp .chat-layout {
grid-template-columns: 1fr;
min-height: auto;
}
.ui-page--whatsapp .pane {
min-height: 560px;
}
.ui-page--whatsapp .context-drawer {
top: auto;
right: var(--ui-space-4);
bottom: var(--ui-space-4);
left: var(--ui-space-4);
width: auto;
max-height: 70vh;
}
.ui-page--whatsapp .campaign-form-grid,
.ui-page--whatsapp .audience-picker-grid,
.ui-page--whatsapp .template-grid {
grid-template-columns: 1fr;
}
.ui-page--whatsapp .direct-recipient-panel {
grid-template-columns: 1fr;
}
.ui-page--whatsapp .manual-recipients-list {
grid-column: 1;
}
}
@media (max-width: 768px) {
.ui-page--whatsapp .kpi-grid,
.ui-page--whatsapp .conversation-health,
.ui-page--whatsapp .form-grid,
.ui-page--whatsapp .logs-summary {
grid-template-columns: 1fr;
}
.ui-page--whatsapp .section-header--compact,
.ui-page--whatsapp .dashboard-toolbar,
.ui-page--whatsapp .chat-header,
.ui-page--whatsapp .logs-footer,
.ui-page--whatsapp .modal-footer {
flex-direction: column;
align-items: stretch;
}
.ui-page--whatsapp .dashboard-toolbar__copy,
.ui-page--whatsapp .dashboard-toolbar__actions {
justify-content: flex-start;
}
.ui-page--whatsapp .date-filter--compact {
max-width: none;
width: 100%;
flex: 1 1 auto;
}
.ui-page--whatsapp .message {
max-width: 100%;
}
.ui-page--whatsapp .campaign-section-header,
.ui-page--whatsapp .direct-recipient-panel,
.ui-page--whatsapp .manual-phone-row,
.ui-page--whatsapp .option-line--compact,
.ui-page--whatsapp .option-row--schedule {
align-items: stretch;
flex-direction: column;
}
.ui-page--whatsapp .form-section--template .template-select {
width: 100%;
}
.ui-page--whatsapp .chat-body,
.ui-page--whatsapp .chat-composer,
.ui-page--whatsapp .campaign-form {
padding-left: var(--ui-space-4);
padding-right: var(--ui-space-4);
}
.ui-page--whatsapp .modal-layer {
padding: var(--ui-space-3);
}
.ui-page--whatsapp .logs-modal,
.ui-page--whatsapp .campaign-modal {
width: 100%;
max-height: calc(100vh - var(--ui-space-6));
}
}
/* ==========================================================================
UI PAGE VARIANT - MANAGEMENT SUB-PAGES
==========================================================================
Covers: Traffic Details, Lifecycle Conversions, Performance Stats,
Branch Comparison
REUSES from existing contracts:
- fd-* classes from financial-dashboard.scss
- period-chip, live-pill from customer-lifecycle.scss
- glass-table from data/table.scss
- ApexCharts tooltips from vendors/apexcharts.scss
========================================================================== */
/* ==========================================================================
SHARED SHELLS & LAYOUTS
========================================================================== */
.traffic-shell,
.conversions-shell {
position: relative;
/* Page padding now handled by .ui-page contract */
min-height: calc(100vh - 60px);
}
.back-link {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
font-size: 13px;
}
.back-link:hover {
text-decoration: underline;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.panel-header .fd-eyebrow {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.01em;
text-transform: none;
color: #f5f8ff;
margin: 0;
}
.panel-header h2,
.panel-header h3 {
margin: 2px 0 4px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #ffb37a;
}
.panel-split {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 18px;
align-items: stretch;
}
/* ==========================================================================
STAT ITEMS & OVERVIEW CARDS
========================================================================== */
.stat-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.stat-item {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
}
.stat-item .label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.62);
}
.stat-item .value {
font-size: 32px;
font-weight: 700;
margin: 6px 0 4px;
}
.stat-item .helper {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.overview-card {
border-radius: 18px;
padding: 14px 16px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.overview-card .label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.62);
}
.overview-card .value {
font-size: 28px;
font-weight: 700;
margin: 4px 0;
}
.overview-card .helper {
font-size: 12px;
color: rgba(255, 255, 255, 0.58);
}
/* ==========================================================================
TRAFFIC DETAILS SPECIFIC
========================================================================== */
.traffic-overview .overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.performance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.performance-body {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-top: 20px;
}
.chart-card {
padding: 10px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.chart-card.expanded {
min-height: 260px;
}
.team-performance .table-card,
.traffic-shell .table-card,
.conversions-shell .table-card,
.branch-comparison-shell .table-card {
padding: 12px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.table-head {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.glass-table-wrap.compact {
max-height: 260px;
overflow: auto;
}
/* App Panel (Traffic Details) */
.app-panel .app-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.app-card {
padding: 14px;
border-radius: 22px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
gap: 14px;
}
.app-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.traffic-shell .chip {
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.traffic-shell .chip.ios {
background: rgba(122, 91, 255, 0.2);
border-color: rgba(122, 91, 255, 0.4);
}
.traffic-shell .chip.android {
background: rgba(255, 122, 61, 0.2);
border-color: rgba(255, 122, 61, 0.4);
}
.app-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.app-metrics .metric {
padding: 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.app-metrics .metric-label {
margin: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.6);
}
.app-metrics .metric-value {
margin: 4px 0 0;
font-size: 17px;
font-weight: 600;
}
/* ==========================================================================
CONVERSIONS SPECIFIC
========================================================================== */
.conversions-overview .overview-grid,
.conversions-analysis .analysis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.donut-card {
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.35);
padding: 16px;
}
.conversions-bottom .bottom-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
/* ==========================================================================
PERFORMANCE STATS SPECIFIC
========================================================================== */
.team-performance {
position: relative;
max-width: 1280px;
margin: 0 auto;
z-index: 1;
}
.glow {
position: fixed;
border-radius: 50%;
filter: blur(90px);
opacity: 0.45;
pointer-events: none;
animation: glowPulse 8s ease-in-out infinite;
z-index: 0;
}
.glow-1 {
width: 300px;
height: 300px;
top: -30px;
left: -60px;
background: rgba(255, 122, 61, 0.7);
}
.glow-2 {
width: 320px;
height: 320px;
top: 40px;
right: -70px;
background: rgba(108, 91, 255, 0.6);
animation-delay: 1.2s;
}
.glow-3 {
width: 240px;
height: 240px;
bottom: 20px;
left: 30%;
background: rgba(25, 210, 196, 0.5);
animation-delay: 2s;
}
@keyframes glowPulse {
0%, 100% {
transform: translate3d(0, 0, 0) scale(0.95);
opacity: 0.4;
}
50% {
transform: translate3d(10px, -20px, 0) scale(1.05);
opacity: 0.6;
}
}
.team-performance .glass {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 22px;
}
.dashboard-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 20px 24px;
background: transparent;
border: none;
box-shadow: none;
}
.dashboard-brand {
min-width: 260px;
}
.brand-title {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.brand-subtitle {
color: #cdd7f9;
margin: 0 0 14px;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: flex-end;
}
.pill-filter {
min-width: 220px;
}
.branch-filter {
min-width: 180px;
}
.team-performance .pill,
.team-performance button.pill,
.customer-overview-page .pill,
.customer-overview-page button.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: #f7f8ff;
font-size: 13px;
font-weight: 500;
cursor: default;
}
.team-performance .pill.secondary,
.customer-overview-page .pill.secondary {
background: rgba(83, 113, 173, 0.35);
border-color: rgba(125, 226, 255, 0.6);
}
.team-performance .pill.soft,
.customer-overview-page .pill.soft {
background: rgba(255, 255, 255, 0.08);
}
.team-performance .pill.light,
.customer-overview-page .pill.light {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.team-performance .pill.ghost,
.customer-overview-page .pill.ghost {
cursor: pointer;
border-color: rgba(255, 255, 255, 0.16);
background: rgba(15, 18, 32, 0.5);
transition: transform 0.2s ease, background 0.2s ease;
}
.team-performance .pill.ghost:hover,
.customer-overview-page .pill.ghost:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.16);
}
.team-performance button.pill,
.customer-overview-page button.pill {
border: none;
outline: none;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.panel {
margin-top: 22px;
padding: 22px;
position: relative;
overflow: hidden;
}
.performance-hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
align-items: stretch;
}
.hero-copy {
display: flex;
flex-direction: column;
gap: 16px;
}
.team-performance .section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.team-performance .section-header h2,
.team-performance .section-header h3 {
margin: 0;
letter-spacing: -0.2px;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
color: #ffba85;
margin: 0 0 6px;
}
.team-performance .muted {
color: #cdd7f9;
margin: 4px 0 0;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
.team-performance .metric,
.traffic-shell .metric,
.customer-overview-page .metric {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 14px 16px;
}
.stat-value {
font-size: 28px;
font-weight: 600;
margin: 0;
}
.duo-panel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
/* .glass-card visuals → Single owner: ui/layout/card.scss */
/* Removed: background, border, radius, shadow, blur. Use .ui-card */
.breakdown-body {
display: flex;
align-items: center;
gap: 28px;
margin-top: 18px;
}
.donut {
width: 160px;
height: 160px;
border-radius: 50%;
position: relative;
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45);
}
.donut-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(7, 10, 18, 0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 13px;
}
.breakdown-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.breakdown-list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.breakdown-list li:last-of-type {
border-bottom: none;
}
.breakdown-list .dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
}
.breakdown-list .label {
flex: 1;
color: rgba(255, 255, 255, 0.7);
}
.leaders-card {
display: flex;
flex-direction: column;
gap: 12px;
}
.top-employee {
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.top-employee:last-of-type {
border-bottom: none;
}
.top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rank {
font-size: 20px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
}
.top-info .name {
margin: 0;
font-weight: 600;
}
.top-info .role {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.top-metrics {
display: flex;
justify-content: space-between;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
margin-top: 6px;
}
.progress {
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
margin-top: 8px;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #ffb774, #ff4780);
transition: width 0.4s ease;
}
.spotlight-panel .spotlight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
margin-top: 12px;
}
.micro-chart {
margin-top: 18px;
min-height: 120px;
}
.role-section {
padding: 26px;
}
/* ── SAP-style branch divider (GROUP mode) ── */
.branch-divider {
display: flex;
align-items: center;
gap: 0;
margin: 28px 0 6px;
}
.branch-divider:first-of-type {
margin-top: 18px;
}
.branch-divider__line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 183, 116, 0.35) 20%, rgba(255, 183, 116, 0.35) 80%, transparent);
}
.branch-divider__label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 18px;
border-radius: 999px;
background: linear-gradient(145deg, rgba(255, 183, 116, 0.12), rgba(255, 183, 116, 0.04));
border: 1px solid rgba(255, 183, 116, 0.22);
backdrop-filter: blur(8px);
white-space: nowrap;
}
.branch-divider__icon {
font-size: 16px;
width: 16px;
height: 16px;
color: rgba(255, 183, 116, 0.85);
}
.branch-divider__name {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.92);
}
.branch-divider__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: rgba(255, 183, 116, 0.2);
color: #ffb774;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
.role-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
margin-top: 18px;
}
.member-card {
display: flex;
flex-direction: column;
gap: 16px;
}
.member-top {
display: flex;
align-items: center;
gap: 18px;
}
.avatar {
position: relative;
width: 64px;
height: 64px;
}
.avatar img {
width: 100%;
height: 100%;
border-radius: 18px;
object-fit: cover;
}
.avatar-glow {
position: absolute;
inset: -6px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.22);
animation: avatarPulse 4s ease-in-out infinite;
}
@keyframes avatarPulse {
0% {
opacity: 0.25;
}
50% {
opacity: 0.85;
}
100% {
opacity: 0.25;
}
}
.member-title h3 {
margin: 0;
font-size: 18px;
}
.member-title p {
margin: 0;
color: rgba(255, 255, 255, 0.6);
}
.member-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.member-meta .label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 4px;
}
.member-meta .value {
margin: 0;
font-weight: 600;
}
.member-metrics {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.metric-pill {
flex: 1 1 30%;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.metric-pill .label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.55);
}
.metric-pill .value {
font-size: 16px;
font-weight: 600;
}
.table-section {
overflow: hidden;
}
.table-actions {
display: flex;
gap: 12px;
}
.table-wrapper {
overflow-x: auto;
margin-top: 16px;
}
.table-section table {
width: 100%;
border-collapse: collapse;
color: inherit;
}
.table-section th,
.table-section td {
padding: 14px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 14px;
}
.table-section th {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.6);
}
.table-section tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
}
/* ==========================================================================
BRANCH COMPARISON SPECIFIC
========================================================================== */
.branch-comparison-shell {
position: relative;
isolation: isolate;
background: transparent;
}
.branch-comparison-shell .fd-glow {
opacity: 0.22;
filter: blur(40px);
}
.aurora-band,
.aurora-two {
display: none;
}
.branch-header {
position: relative;
z-index: 1;
background: transparent;
backdrop-filter: none;
padding: 8px 8px 4px;
}
.branch-header .fd-brand-title {
font-size: 26px;
margin-bottom: 4px;
}
.branch-header .fd-muted {
color: rgba(236, 242, 255, 0.72);
margin-top: 2px;
}
.branch-filters {
flex-wrap: wrap;
justify-content: flex-end;
}
.branch-hero {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
padding: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 22px;
}
.branch-hero-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.hero-highlights {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.highlight-chip {
display: grid;
gap: 2px;
padding: 10px 12px;
border-radius: 14px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
min-width: 160px;
}
.highlight-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.highlight-value {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
}
.highlight-branch {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
}
.top-compare-layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
gap: 16px;
align-items: start;
}
.top-compare-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.rank-column {
display: grid;
gap: 10px;
padding: 12px;
border-radius: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Scoped metric-card for branch comparison - does NOT override global stat-cards.css */
}
.rank-column.is-first {
border-color: rgba(255, 183, 94, 0.4);
box-shadow: inset 0 0 0 1px rgba(255, 183, 94, 0.12);
}
.rank-column .metric-card {
display: grid;
gap: 4px;
padding: 10px;
border-radius: 12px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
position: relative;
}
.rank-column .metric-card.is-revenue {
border-left: 2px solid rgba(255, 122, 61, 0.7);
}
.rank-column .metric-card.is-nps {
border-left: 2px solid rgba(34, 211, 164, 0.7);
}
.rank-column .metric-label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.rank-column .metric-value {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.01em;
color: #fff;
}
.rank-column .metric-branch {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
}
.rank-column .metric-rank {
position: absolute;
top: 8px;
right: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.rank-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.rank-number {
font-size: 20px;
font-weight: 800;
color: #ffd48a;
}
.rank-caption {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.nps-overview-card {
display: grid;
gap: 10px;
padding: 14px;
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
align-content: start;
}
.nps-overview-card .section-title {
font-size: 16px;
margin-top: 2px;
}
.nps-donut {
position: relative;
width: 180px;
height: 180px;
margin: 4px 0 6px;
display: grid;
place-items: center;
z-index: 1;
}
.donut-svg {
width: 180px;
height: 180px;
transform: rotate(-90deg);
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
}
.donut-track {
fill: none;
stroke: rgba(255, 255, 255, 0.08);
stroke-width: 12;
}
.donut-segment {
fill: none;
stroke-width: 12;
stroke-linecap: round;
transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease;
}
.nps-donut .donut-center {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
color: #fff;
gap: 2px;
transform: none;
width: auto;
height: auto;
background: none;
}
.donut-value {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
}
.donut-label {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.nps-meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-start;
margin-top: 4px;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #f5f7ff;
font-size: 12px;
}
.legend-swatch {
width: 12px;
height: 12px;
border-radius: 50%;
}
.legend-name {
font-weight: 600;
}
.legend-value {
font-weight: 700;
color: #fff;
}
.nps-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: #fff;
}
.nps-chip .chip-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffae6f;
box-shadow: 0 0 12px rgba(255, 174, 111, 0.8);
}
.nps-chip.accent-indigo .chip-dot {
background: #6bb6ff;
box-shadow: 0 0 12px rgba(107, 182, 255, 0.8);
}
.chip-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.82);
}
.chip-value {
font-size: 16px;
font-weight: 700;
}
.branch-chart-panel {
position: relative;
z-index: 1;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 22px;
}
.branch-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.section-title {
font-size: 17px;
font-weight: 700;
color: #f5f7ff;
margin-top: 4px;
}
.chart-shell {
position: relative;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
border-radius: 20px;
padding: 14px 14px 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
overflow: hidden;
}
.chart-overlay {
position: absolute;
inset: 0;
background: none;
opacity: 0.2;
pointer-events: none;
z-index: 0;
}
.chart-top {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-bottom: 4px;
}
.branch-table {
position: relative;
z-index: 1;
margin-top: 14px;
}
.branch-table-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 16px 6px;
}
.branch-table .glass-table th {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
}
.branch-table .glass-table th,
.branch-table .glass-table td {
padding: 10px 12px;
font-size: 13px;
}
.branch-table .glass-table th.is-numeric,
.branch-table .glass-table td.is-numeric {
text-align: right;
}
.glass-table tbody tr.is-primary td {
background: linear-gradient(90deg, rgba(255, 122, 61, 0.08), rgba(255, 122, 61, 0.02));
}
.glass-table tbody tr.is-secondary td {
background: linear-gradient(90deg, rgba(76, 63, 255, 0.08), rgba(76, 63, 255, 0.02));
}
.glass-table tbody tr.is-watch td {
background: rgba(255, 174, 111, 0.06);
}
.glass-table tbody tr.is-risk td {
background: rgba(255, 99, 71, 0.08);
}
.glass-table tbody tr.is-watch td:first-child,
.glass-table tbody tr.is-risk td:first-child {
position: relative;
}
.glass-table tbody tr.is-watch td:first-child::before,
.glass-table tbody tr.is-risk td:first-child::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
border-radius: 2px;
}
.glass-table tbody tr.is-watch td:first-child::before {
background: rgba(255, 174, 111, 0.6);
}
.glass-table tbody tr.is-risk td:first-child::before {
background: rgba(255, 99, 71, 0.7);
}
.glass-table tbody tr:hover td {
background: rgba(255, 255, 255, 0.04);
}
.branch-cell {
display: flex;
align-items: center;
gap: 12px;
}
.row-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #ff7a3d, #ff4da0);
flex-shrink: 0;
}
.complaints {
color: rgba(255, 255, 255, 0.72);
}
.nps-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
padding: 4px 8px;
border-radius: 10px;
font-weight: 700;
color: #fff;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.nps-pill.positive {
background: rgba(59, 251, 180, 0.12);
color: #3bfbb4;
border-color: rgba(59, 251, 180, 0.42);
}
.nps-pill.caution {
background: rgba(255, 174, 111, 0.12);
color: #ffae6f;
border-color: rgba(255, 174, 111, 0.32);
}
.nps-pill.warning {
background: rgba(255, 99, 71, 0.12);
color: #ff6347;
border-color: rgba(255, 99, 71, 0.32);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1024px) {
.performance-body,
.panel-split {
grid-template-columns: 1fr;
}
.dashboard-top {
flex-direction: column;
}
.filter-pills {
justify-content: flex-start;
}
.member-meta {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.top-compare-layout,
.top-compare-grid {
grid-template-columns: 1fr;
}
.branch-section-header,
.branch-table-header {
flex-direction: column;
align-items: flex-start;
}
.branch-filters,
.hero-highlights {
justify-content: flex-start;
}
.branch-hero-header {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 768px) {
.traffic-shell,
.conversions-shell {
padding: 20px 10px 80px;
}
.panel,
.glass-card {
padding: 18px;
}
button.pill,
.pill-filter {
width: 100%;
}
.filter-pills {
flex-direction: column;
}
}
/* ==========================================================================
UI PAGE VARIANT - CUSTOMER LIFECYCLE
==========================================================================
Scoped page contract for /console/management/customer-lifecycle.
========================================================================== */
.customer-lifecycle-page {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.customer-lifecycle-page .header-card__top {
align-items: flex-start;
}
.customer-lifecycle-page .header-card__title-block {
flex: 1 1 auto;
min-width: 0;
}
.customer-lifecycle-page .header-card__stats {
align-self: flex-start;
}
.customer-lifecycle-page .header-card__bottom {
flex-wrap: wrap;
}
.customer-lifecycle-page__filters {
margin-left: 0;
flex-wrap: wrap;
}
.customer-lifecycle-page__date-filter {
min-width: 0;
}
.customer-lifecycle-page__header-stat .stat-card__subtitle {
display: block;
max-width: 16ch;
line-height: 1.45;
white-space: normal;
}
.customer-lifecycle-page__section {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
min-width: 0;
padding: var(--ui-space-6);
}
.customer-lifecycle-page .card-head,
.customer-lifecycle-page .campaign-header,
.customer-lifecycle-page .stage-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-3);
flex-wrap: wrap;
}
.customer-lifecycle-page .eyebrow,
.customer-lifecycle-page .fd-eyebrow {
margin: 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 176, 131, 0.88);
}
.customer-lifecycle-page .fd-muted {
margin: var(--ui-space-1) 0 0;
font-size: var(--ui-text-sm);
line-height: 1.6;
color: var(--ui-text-muted);
}
.customer-lifecycle-page .stage-title,
.customer-lifecycle-page .card-head h3,
.customer-lifecycle-page .campaign-header h3 {
margin: var(--ui-space-1) 0 0;
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-semibold);
line-height: 1.2;
color: var(--ui-text-primary);
}
.customer-lifecycle-page .card-head h3,
.customer-lifecycle-page .campaign-header h3 {
font-size: var(--ui-text-lg);
}
.customer-lifecycle-page .stats-copy {
display: flex;
}
.customer-lifecycle-page .fd-chip-row {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.customer-lifecycle-page .fd-chip {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--ui-border-light);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
line-height: 1.3;
}
.customer-lifecycle-page .fd-chip strong {
color: var(--ui-text-primary);
font-weight: var(--ui-font-semibold);
}
.customer-lifecycle-page .journey-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.customer-lifecycle-page .journey-node {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
min-height: 132px;
padding: var(--ui-space-4);
border-radius: var(--ui-radius-xl);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--ui-shadow-sm);
overflow: hidden;
}
.customer-lifecycle-page .journey-node::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--node-accent), transparent 78%);
opacity: 0.8;
}
.customer-lifecycle-page .journey-node.has-connector::after {
content: "";
position: absolute;
top: 50%;
right: calc(var(--ui-space-3) * -1);
width: calc(var(--ui-space-3) * 1.5);
height: 1px;
background: linear-gradient(90deg, var(--node-accent), rgba(255, 255, 255, 0.14));
transform: translateY(-50%);
}
.customer-lifecycle-page .node-pulse {
width: 12px;
height: 12px;
border-radius: var(--ui-radius-full);
background: var(--node-accent);
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05);
}
.customer-lifecycle-page .node-label {
margin-top: var(--ui-space-2);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.customer-lifecycle-page .node-value {
font-size: clamp(22px, 2vw, 30px);
font-weight: var(--ui-font-bold);
line-height: 1.05;
color: var(--ui-text-primary);
}
.customer-lifecycle-page .node-helper {
margin-top: auto;
font-size: var(--ui-text-sm);
line-height: 1.5;
color: var(--ui-text-muted);
}
.customer-lifecycle-page .journey-sankey {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
min-width: 0;
}
.customer-lifecycle-page .sankey-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 130, 90, 0.32), transparent);
}
.customer-lifecycle-page .sankey-panel {
min-width: 0;
padding: var(--ui-space-4);
border-radius: var(--ui-radius-2xl);
}
.customer-lifecycle-page .sankey-diagram {
display: block;
width: 100%;
min-height: 420px;
}
.customer-lifecycle-page .sankey-node-label {
fill: var(--ui-text-secondary);
font-family: var(--ui-font-primary);
font-size: 14px;
font-weight: var(--ui-font-medium);
}
.customer-lifecycle-page .sankey-node-value {
fill: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: 12px;
font-weight: var(--ui-font-semibold);
}
.customer-lifecycle-page .stage-actions {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.customer-lifecycle-page .ghost-link {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
height: 32px;
padding: 0 var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--ui-border);
color: var(--ui-text-secondary);
text-decoration: none;
font-family: inherit;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
transition: background var(--ui-transition-base), border-color var(--ui-transition-base), color var(--ui-transition-base);
}
.customer-lifecycle-page button.ghost-link {
cursor: pointer;
}
.customer-lifecycle-page .ghost-link:hover {
background: var(--ui-surface-2);
border-color: var(--ui-border-hover);
color: var(--ui-text-primary);
}
.customer-lifecycle-page .ghost-link mat-icon {
width: 16px;
height: 16px;
font-size: 16px;
}
.customer-lifecycle-page .period-chip {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
min-height: 32px;
padding: 0 var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
white-space: nowrap;
}
.customer-lifecycle-page .period-chip.subtle {
color: var(--ui-text-muted);
}
.customer-lifecycle-page .stage-body {
display: grid;
grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.45fr);
gap: var(--ui-space-4);
align-items: stretch;
}
.customer-lifecycle-page .stage-body.dual {
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.92fr);
}
.customer-lifecycle-page .stage-metrics,
.customer-lifecycle-page .retention-kpi-row,
.customer-lifecycle-page .retention-kpis {
display: grid;
gap: var(--ui-space-3);
}
.customer-lifecycle-page .stage-metrics,
.customer-lifecycle-page .retention-kpi-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.customer-lifecycle-page .stage-metrics.inline {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: var(--ui-space-4);
}
.customer-lifecycle-page .retention-kpis {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: var(--ui-space-4);
}
.customer-lifecycle-page .stage-metric,
.customer-lifecycle-page .retention-kpi,
.customer-lifecycle-page .retention-mini {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
min-width: 0;
padding: var(--ui-space-4);
border-radius: var(--ui-radius-xl);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--ui-border-light);
}
.customer-lifecycle-page .stage-metric.accent-teal,
.customer-lifecycle-page .retention-kpi.accent-teal,
.customer-lifecycle-page .retention-mini.accent-teal {
border-color: rgba(74, 222, 128, 0.18);
background: linear-gradient(160deg, rgba(74, 222, 128, 0.08), rgba(255, 255, 255, 0.02));
}
.customer-lifecycle-page .stage-metric.accent-orange,
.customer-lifecycle-page .retention-kpi.accent-orange,
.customer-lifecycle-page .retention-mini.accent-orange {
border-color: rgba(251, 191, 36, 0.2);
background: linear-gradient(160deg, rgba(251, 191, 36, 0.08), rgba(255, 255, 255, 0.02));
}
.customer-lifecycle-page .stage-metric.accent-pink,
.customer-lifecycle-page .retention-kpi.accent-pink,
.customer-lifecycle-page .retention-mini.accent-pink {
border-color: rgba(248, 113, 113, 0.2);
background: linear-gradient(160deg, rgba(248, 113, 113, 0.08), rgba(255, 255, 255, 0.02));
}
.customer-lifecycle-page .stage-metric.accent-violet,
.customer-lifecycle-page .retention-kpi.accent-violet,
.customer-lifecycle-page .retention-mini.accent-violet {
border-color: rgba(169, 123, 255, 0.22);
background: linear-gradient(160deg, rgba(169, 123, 255, 0.1), rgba(255, 255, 255, 0.02));
}
.customer-lifecycle-page .metric-label {
margin: 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ui-text-muted);
}
.customer-lifecycle-page .metric-value {
margin: 0;
font-size: clamp(22px, 2vw, 30px);
font-weight: var(--ui-font-bold);
line-height: 1.05;
color: var(--ui-text-primary);
}
.customer-lifecycle-page .retention-mini .metric-value {
font-size: var(--ui-text-xl);
}
.customer-lifecycle-page .metric-helper {
margin: 0;
font-size: var(--ui-text-sm);
line-height: 1.55;
color: var(--ui-text-muted);
}
.customer-lifecycle-page .stage-chart,
.customer-lifecycle-page .lead-loss-card {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
min-width: 0;
min-height: 100%;
padding: var(--ui-space-4);
border-radius: var(--ui-radius-2xl);
}
.customer-lifecycle-page .stage-chart {
min-height: 360px;
}
.customer-lifecycle-page .stage-chart apx-chart,
.customer-lifecycle-page .lead-loss-chart apx-chart {
display: block;
width: 100%;
}
.customer-lifecycle-page .chart-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.customer-lifecycle-page .live-pill {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: calc(var(--ui-space-1) * 1.5) var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: rgba(74, 222, 128, 0.08);
border: 1px solid rgba(74, 222, 128, 0.22);
color: rgba(192, 255, 216, 0.95);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.customer-lifecycle-page .live-pill .dot {
width: 8px;
height: 8px;
border-radius: var(--ui-radius-full);
background: var(--ui-success);
}
.customer-lifecycle-page .chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.customer-lifecycle-page .legend-pill {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: calc(var(--ui-space-1) * 1.5) var(--ui-space-3);
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
}
.customer-lifecycle-page .legend-pill::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--ui-radius-full);
background: var(--legend-color);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
}
.customer-lifecycle-page .lead-loss-chart {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.customer-lifecycle-page .loss-list {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-2);
margin: 0;
padding: 0;
}
.customer-lifecycle-page .loss-list li {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--ui-border-light);
}
.customer-lifecycle-page .loss-dot {
width: 10px;
height: 10px;
border-radius: var(--ui-radius-full);
flex-shrink: 0;
}
.customer-lifecycle-page .loss-copy {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ui-space-3);
width: 100%;
}
.customer-lifecycle-page .loss-label,
.customer-lifecycle-page .loss-value {
margin: 0;
font-size: var(--ui-text-sm);
}
.customer-lifecycle-page .loss-label {
color: var(--ui-text-secondary);
}
.customer-lifecycle-page .loss-value {
color: var(--ui-text-primary);
font-weight: var(--ui-font-semibold);
}
.customer-lifecycle-page .campaign-table {
display: flex;
flex-direction: column;
padding: 0;
}
.customer-lifecycle-page .campaign-header {
padding: var(--ui-space-4) var(--ui-space-4) 0;
}
.customer-lifecycle-page .campaign-table .glass-table-wrap {
padding: var(--ui-space-2) var(--ui-space-4) var(--ui-space-4);
}
.customer-lifecycle-page .campaign-table .cell-muted {
display: block;
margin-top: var(--ui-space-1);
}
.customer-lifecycle-page .trend {
display: inline-flex;
align-items: center;
justify-content: flex-end;
font-weight: var(--ui-font-semibold);
color: var(--ui-text-muted);
}
.customer-lifecycle-page .trend.positive {
color: var(--ui-success);
}
.customer-lifecycle-page .retention-body {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.95fr);
gap: var(--ui-space-4);
align-items: stretch;
}
.customer-lifecycle-page .lifecycle-goals {
display: flex;
flex-direction: column;
padding: 0;
}
.customer-lifecycle-page .lifecycle-goals .card-head {
padding: var(--ui-space-4) var(--ui-space-4) 0;
}
.customer-lifecycle-page .lifecycle-goals .glass-input-table-wrap {
padding: var(--ui-space-2) var(--ui-space-4) 0;
}
.customer-lifecycle-page .lifecycle-goals .status-col {
white-space: nowrap;
}
@media (max-width: 1440px) {
.customer-lifecycle-page .journey-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.customer-lifecycle-page .stage-metrics.inline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1200px) {
.customer-lifecycle-page .stage-body,
.customer-lifecycle-page .stage-body.dual,
.customer-lifecycle-page .retention-body {
grid-template-columns: 1fr;
}
.customer-lifecycle-page .loss-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 960px) {
.customer-lifecycle-page .header-card__actions {
width: 100%;
margin-left: 0;
justify-content: space-between;
flex-wrap: wrap;
}
.customer-lifecycle-page .journey-grid,
.customer-lifecycle-page .stage-metrics,
.customer-lifecycle-page .retention-kpi-row,
.customer-lifecycle-page .retention-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.customer-lifecycle-page .customer-lifecycle-page__filters {
width: 100%;
}
}
@media (max-width: 640px) {
.customer-lifecycle-page {
gap: var(--ui-space-4);
}
.customer-lifecycle-page__section {
padding: var(--ui-space-4);
}
.customer-lifecycle-page .header-card__count {
border-right: none;
padding-right: 0;
}
.customer-lifecycle-page .journey-grid,
.customer-lifecycle-page .stage-metrics,
.customer-lifecycle-page .stage-metrics.inline,
.customer-lifecycle-page .retention-kpi-row,
.customer-lifecycle-page .retention-kpis {
grid-template-columns: 1fr;
}
.customer-lifecycle-page .loss-copy,
.customer-lifecycle-page .stage-head {
flex-direction: column;
align-items: flex-start;
}
.customer-lifecycle-page .sankey-panel {
padding: var(--ui-space-3);
}
.customer-lifecycle-page .sankey-diagram {
min-height: 320px;
}
}
/**
* Communications Page Contract
* Layout-only styles for the Communications page.
* All visual styling comes from UI contracts.
*/
.communications-page .tab-content-container {
margin-top: var(--ui-space-4);
}
.communications-tab-content {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.communications-loading-state {
padding: var(--ui-space-8);
}
.communications-page .communications-logs-table {
overflow: hidden;
}
.communications-page .communications-logs-table .glass-table-scroll {
overflow-x: hidden;
}
.communications-page .communications-logs-table .glass-table {
table-layout: fixed;
min-width: 0;
width: 100%;
}
.communications-page .communications-logs-table .glass-table th,
.communications-page .communications-logs-table .glass-table td {
padding-inline: 10px;
}
.communications-page .communications-logs-table .glass-table th:first-child,
.communications-page .communications-logs-table .glass-table td:first-child {
padding-left: 16px;
}
.communications-page .communications-logs-table .glass-table th:last-child,
.communications-page .communications-logs-table .glass-table td:last-child {
padding-right: 12px;
}
.communications-page .communications-logs-table .comm-log-col {
min-width: 0;
}
.communications-page .communications-logs-table .comm-log-col--time {
width: 8%;
}
.communications-page .communications-logs-table .comm-log-col--event {
width: 17%;
}
.communications-page .communications-logs-table .comm-log-col--channel {
width: 10%;
}
.communications-page .communications-logs-table .comm-log-col--recipient {
width: 16%;
}
.communications-page .communications-logs-table .comm-log-col--source {
width: 15%;
}
.communications-page .communications-logs-table .comm-log-col--latency {
width: 8%;
}
.communications-page .communications-logs-table .comm-log-col--status {
width: 12%;
}
.communications-page .communications-logs-table .comm-log-col--error {
width: 10%;
}
.communications-page .communications-logs-table .comm-log-col--actions {
width: 4%;
}
.communications-page .communications-logs-table .cell-primary-name,
.communications-page .communications-logs-table .cell-meta-text,
.communications-page .communications-logs-table .cell-chip-text {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.communications-page .communications-logs-table .cell-chip {
max-width: 100%;
}
.communications-page .communications-logs-table .cell-stacked {
min-width: 0;
}
.communications-page .communications-logs-table .comm-log-col--status {
text-align: center;
}
.communications-page .communications-logs-table td.comm-log-col--status {
display: table-cell;
}
.communications-page .communications-logs-table td.comm-log-col--status .type-pill {
width: fit-content;
max-width: 100%;
margin: 0 auto 4px !important;
white-space: nowrap;
}
.communications-page .communications-logs-table td.comm-log-col--status .type-pill:last-child {
margin-bottom: 0 !important;
}
.communications-page .communications-logs-table .comm-status-pill--read {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
.communications-page .communications-logs-table .comm-status-pill--sent {
background: rgba(234, 179, 8, 0.2);
color: #eab308;
}
.communications-page .communications-logs-table .comm-log-pill--live {
background: rgba(34, 197, 94, 0.2);
}
.communications-page .communications-logs-table .comm-log-pill--shadow {
background: rgba(139, 92, 246, 0.2);
color: #a78bfa;
}
.communications-page .communications-logs-table .comm-log-col--actions .ui-btn {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
justify-content: center;
}
.communications-page .communications-logs-table .detail-row td {
white-space: normal;
}
.communications-page .communications-logs-table .comm-log-detail {
padding: 12px 16px;
margin: 4px 0;
background: rgba(255, 255, 255, 0.02);
}
.communications-page .communications-logs-table .comm-log-detail-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.communications-page .communications-logs-table .comm-log-muted {
opacity: 0.6;
}
.communications-page .communications-logs-table .comm-log-code,
.communications-page .communications-logs-table .comm-log-metadata {
background: rgba(0, 0, 0, 0.2);
}
.communications-page .communications-logs-table .comm-log-code {
padding: 1px 6px;
}
.communications-page .communications-logs-table .comm-log-metadata {
margin: 4px 0 0;
}
.communications-page .communications-logs-table .comm-log-shadow-panel {
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.2);
}
.communications-page .communications-logs-table .comm-log-shadow-title {
color: #a78bfa;
}
@media (max-width: 1100px) {
.communications-page .communications-logs-table .glass-table-scroll {
overflow-x: auto;
}
.communications-page .communications-logs-table .glass-table {
min-width: 1060px;
}
}
.event-module-group {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.event-module-group .event-count {
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: 400;
}
.communications-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--ui-space-4);
}
.communications-cards-grid--2col {
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
.template-variables {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
margin-top: var(--ui-space-2);
}
.template-variables-label {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.template-variables-chips {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-1);
}
.variant-panel {
background: rgba(30, 25, 20, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ui-radius-lg, 12px);
backdrop-filter: blur(20px);
overflow: hidden;
animation: variantPanelSlide 0.2s ease;
}
@keyframes variantPanelSlide {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.variant-panel__loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.variant-panel__loading mat-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.variant-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.variant-panel__title {
display: flex;
align-items: flex-start;
gap: 10px;
}
.variant-panel__title > mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: rgba(255, 180, 130, 0.8);
margin-top: 2px;
}
.variant-panel__title h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.variant-panel__subtitle {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
font-family: var(--ui-font-mono);
}
.variant-panel__current {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: rgba(74, 222, 128, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.variant-panel__current mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: rgba(74, 222, 128, 0.7);
}
.variant-panel__current strong {
color: rgba(255, 255, 255, 0.9);
font-family: var(--ui-font-mono);
}
.variant-source-pill {
display: inline-flex;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(139, 92, 246, 0.2);
color: rgba(167, 139, 250, 0.9);
margin-left: 6px;
}
.variant-source-pill--override {
background: rgba(59, 130, 246, 0.2);
color: rgba(96, 165, 250, 0.9);
}
.variant-panel__options {
padding: 12px 20px;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 400px;
overflow-y: auto;
}
.variant-option {
display: flex;
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
cursor: pointer;
transition: all 0.15s ease;
}
.variant-option:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
}
.variant-option--selected {
background: rgba(233, 68, 36, 0.08) !important;
border-color: rgba(233, 68, 36, 0.35) !important;
box-shadow: 0 0 0 1px rgba(233, 68, 36, 0.15);
}
.variant-option__radio {
flex-shrink: 0;
padding-top: 2px;
}
.variant-radio {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.2);
background: transparent;
transition: all 0.15s ease;
position: relative;
}
.variant-radio--active {
border-color: rgba(233, 68, 36, 0.8);
}
.variant-radio--active::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #e94424;
}
.variant-option__content {
flex: 1;
min-width: 0;
}
.variant-option__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.variant-option__name {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.variant-tone-icon {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
color: rgba(255, 180, 130, 0.7);
}
.variant-lang-badge {
display: inline-flex;
padding: 1px 4px;
border-radius: 3px;
font-size: 8px;
font-weight: 700;
background: rgba(59, 130, 246, 0.2);
color: rgba(96, 165, 250, 0.9);
}
.variant-option__badges {
display: flex;
gap: 4px;
}
.variant-default-badge {
display: inline-flex;
padding: 1px 6px;
border-radius: 3px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
background: rgba(74, 222, 128, 0.15);
color: rgba(74, 222, 128, 0.8);
border: 1px solid rgba(74, 222, 128, 0.2);
}
.variant-selected-badge {
display: inline-flex;
padding: 1px 6px;
border-radius: 3px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
background: rgba(59, 130, 246, 0.15);
color: rgba(96, 165, 250, 0.9);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.variant-deprecated-badge {
display: inline-flex;
padding: 1px 6px;
border-radius: 3px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
background: rgba(239, 68, 68, 0.15);
color: rgba(248, 113, 113, 0.9);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.variant-tone-badge {
display: inline-flex;
padding: 1px 6px;
border-radius: 3px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.4);
}
.variant-option__template-id {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
font-family: var(--ui-font-mono);
margin-bottom: 6px;
}
.variant-option__template-id mat-icon {
font-size: 12px;
width: 12px;
height: 12px;
}
.variant-option__preview {
margin: 0;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 6px;
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
font-style: italic;
}
.variant-option__description {
margin: 6px 0 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
line-height: 1.4;
}
.variant-panel__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.variant-panel__hint {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
}
.ui-card--selected {
border-color: rgba(233, 68, 36, 0.5) !important;
box-shadow: 0 0 0 1px rgba(233, 68, 36, 0.3), 0 4px 16px rgba(233, 68, 36, 0.15) !important;
}
.channel-header-info {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.channel-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: var(--ui-text-muted);
}
.channel-disabled-notice {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
}
.channel-disabled-notice mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.channel-metrics {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-4);
}
.channel-metric {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
}
.channel-metric-label {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.channel-metric-value {
font-size: var(--ui-text-lg);
font-weight: 600;
color: var(--ui-text-primary);
}
.communications-info-card {
flex-direction: row;
align-items: flex-start;
gap: var(--ui-space-3);
padding: var(--ui-space-3);
}
.communications-info-card mat-icon {
color: var(--ui-text-muted);
flex-shrink: 0;
}
.communications-info-card p {
margin: 0;
font-size: var(--ui-text-sm);
}
.communications-info-card p:first-of-type {
margin-bottom: var(--ui-space-1);
}
.channels-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-4);
flex-wrap: wrap;
}
.channels-header__info {
flex: 1;
min-width: 200px;
}
.channels-header__info .section-helper {
margin: 0;
}
.channels-header__actions {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-shrink: 0;
}
.registry-empty {
text-align: center;
padding: var(--ui-space-8) var(--ui-space-4);
}
.registry-empty__icon {
font-size: 48px;
width: 48px;
height: 48px;
color: rgba(255, 255, 255, 0.2);
margin-bottom: var(--ui-space-4);
}
.registry-empty__title {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 var(--ui-space-2) 0;
}
.registry-empty__steps {
text-align: left;
display: inline-block;
margin: 0 auto var(--ui-space-4);
padding-left: 20px;
color: rgba(255, 255, 255, 0.55);
font-size: var(--ui-text-sm);
line-height: 2;
}
.registry-empty__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-3);
}
.registry-row--disabled {
opacity: 0.5;
}
.registry-row--removed {
opacity: 0.4;
}
.registry-row--removed td:first-child::after {
content: "Removed in Provider";
display: block;
font-size: 10px;
color: var(--ui-danger);
margin-top: 2px;
}
.registry-channel-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.registry-channel-cell__name {
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
}
.registry-channel-cell__id {
font-size: 11px;
font-family: var(--ui-font-mono);
color: rgba(255, 255, 255, 0.35);
}
.registry-channel-cell__meta {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
}
.registry-default-star {
color: #fbbf24;
font-size: 18px;
width: 18px;
height: 18px;
}
.registry-notice {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
color: rgba(255, 255, 255, 0.45);
}
.registry-notice mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.integration-content {
max-width: 640px;
}
.integration-connect {
padding: var(--ui-space-5);
}
.integration-connect__header {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
}
.integration-connect__icon {
width: 40px;
height: 40px;
border-radius: var(--ui-radius-md);
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.integration-connect__icon mat-icon {
color: var(--ui-text-muted);
}
.integration-connect__title {
margin: 0 0 var(--ui-space-1);
font-size: var(--ui-text-md);
font-weight: 600;
}
.integration-connect__subtitle {
margin: 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.integration-connect__steps {
margin-bottom: var(--ui-space-4);
padding: var(--ui-space-3);
background: rgba(255, 255, 255, 0.03);
border-radius: var(--ui-radius-md);
}
.integration-connect__steps ol {
margin: 0;
padding-left: var(--ui-space-4);
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.integration-connect__steps li {
margin-bottom: var(--ui-space-1);
}
.integration-connect__steps a {
color: var(--ui-accent);
text-decoration: none;
}
.integration-connect__steps a:hover {
text-decoration: underline;
}
.integration-connect__form {
margin-bottom: var(--ui-space-3);
}
.integration-connect__input-row {
display: flex;
gap: var(--ui-space-2);
}
.integration-connect__input-row .ui-input {
flex: 1;
padding: var(--ui-space-2) var(--ui-space-3);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ui-radius-md);
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
}
.integration-connect__input-row .ui-input::placeholder {
color: var(--ui-text-muted);
}
.integration-connect__input-row .ui-input:focus {
outline: 1px solid var(--ui-accent);
}
.integration-connect__input-row .ui-input:disabled {
opacity: 0.5;
}
.integration-connect__error {
margin-top: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
background: rgba(239, 68, 68, 0.1);
border-radius: var(--ui-radius-sm);
color: #ef4444;
font-size: var(--ui-text-sm);
display: flex;
align-items: center;
gap: var(--ui-space-1);
}
.integration-connect__error mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.integration-connect__note,
.integration-connected__note {
display: flex;
align-items: flex-start;
gap: var(--ui-space-2);
margin-top: var(--ui-space-3);
padding: var(--ui-space-2) var(--ui-space-3);
background: rgba(255, 255, 255, 0.03);
border-radius: var(--ui-radius-sm);
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.integration-connect__note mat-icon,
.integration-connected__note mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 2px;
}
.integration-connected {
padding: var(--ui-space-5);
}
.integration-connected__header {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
}
.integration-connected__icon--active {
width: 40px;
height: 40px;
border-radius: var(--ui-radius-md);
background: rgba(34, 197, 94, 0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.integration-connected__icon--active mat-icon {
color: #22c55e;
}
.integration-connected__title {
margin: 0 0 var(--ui-space-1);
font-size: var(--ui-text-md);
font-weight: 600;
}
.integration-connected__subtitle {
margin: 0;
}
.integration-connected__details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ui-space-2);
margin-bottom: var(--ui-space-4);
padding: var(--ui-space-3);
background: rgba(255, 255, 255, 0.03);
border-radius: var(--ui-radius-md);
}
.integration-connected__detail {
display: flex;
flex-direction: column;
gap: 2px;
}
.integration-connected__label {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.integration-connected__value {
font-size: var(--ui-text-sm);
color: var(--ui-text-primary);
}
.integration-connected__actions {
display: flex;
gap: var(--ui-space-2);
}
.integration-section-divider {
margin-top: var(--ui-space-5);
padding-top: var(--ui-space-5);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-loading {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-4);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
}
.settings-loading mat-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.system-summary-strip {
display: flex;
gap: var(--ui-space-3);
flex-wrap: wrap;
}
.system-summary-card {
flex: 1;
min-width: 120px;
padding: var(--ui-space-3) var(--ui-space-4);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--ui-radius-md);
text-align: center;
}
.system-summary-card--danger {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.2);
}
.system-summary-card--warning {
background: rgba(245, 158, 11, 0.06);
border-color: rgba(245, 158, 11, 0.15);
}
.system-summary-card--success {
background: rgba(34, 197, 94, 0.06);
border-color: rgba(34, 197, 94, 0.15);
}
.system-summary-card__value {
font-size: 22px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
line-height: 1.2;
}
.system-summary-card__label {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 4px;
}
.system-summary-card--danger .system-summary-card__value {
color: #f87171;
}
.system-summary-card--warning .system-summary-card__value {
color: #fbbf24;
}
.system-summary-card--success .system-summary-card__value {
color: #4ade80;
}
.system-warnings {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.system-warning {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
animation: warningFadeIn 0.3s ease;
}
.system-warning mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.system-warning--danger {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #fca5a5;
}
.system-warning--danger mat-icon {
color: #f87171;
}
.system-warning--warning {
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.15);
color: #fde68a;
}
.system-warning--warning mat-icon {
color: #fbbf24;
}
@keyframes warningFadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.system-all-clear {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.15);
border-radius: var(--ui-radius-md);
color: #86efac;
font-size: var(--ui-text-sm);
}
.system-all-clear mat-icon {
color: #4ade80;
font-size: 20px;
width: 20px;
height: 20px;
}
.system-section {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.system-section .section-helper {
margin: 0;
color: rgba(255, 255, 255, 0.45);
font-size: var(--ui-text-sm);
}
.system-section__header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.system-section__header h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.source-tabs {
display: flex;
gap: 4px;
margin-bottom: var(--ui-space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-bottom: 0;
}
.source-tab {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s ease;
font-family: inherit;
}
.source-tab mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.source-tab__count {
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
}
.source-tab:hover {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.03);
}
.source-tab--active {
color: #f59e0b;
border-bottom-color: #f59e0b;
}
.source-tab--active .source-tab__count {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.section-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.section-icon--danger {
color: #f87171;
}
.section-icon--warning {
color: #fbbf24;
}
.section-icon--success {
color: #4ade80;
}
.section-badge {
display: inline-flex;
padding: 2px 8px;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: var(--ui-space-2);
}
.section-badge--danger {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.25);
}
.section-badge--warning {
background: rgba(245, 158, 11, 0.12);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.section-badge--success {
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.source-name {
display: block;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
}
.source-desc {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
line-height: 1.4;
margin-top: 2px;
}
.file-badge {
display: inline-block;
padding: 1px 6px;
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
font-size: 11px;
font-family: var(--ui-font-mono);
color: rgba(255, 255, 255, 0.55);
}
.volume-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.45);
}
.volume-badge--active {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
}
.row--inactive {
opacity: 0.5;
}
.row--disabled {
opacity: 0.45;
}
.row--disabled td {
color: rgba(255, 255, 255, 0.4);
}
.retry-link {
color: var(--ui-accent);
cursor: pointer;
text-decoration: underline;
}
.legacy-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--ui-radius-lg, 12px);
padding: var(--ui-space-4);
}
.legacy-card__top {
display: flex;
gap: var(--ui-space-6);
margin-bottom: var(--ui-space-4);
}
.legacy-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.legacy-stat--success .legacy-stat__value {
color: #4ade80;
}
.legacy-stat__value {
font-size: 28px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
line-height: 1;
}
.legacy-stat__label {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
}
.migration-bar {
margin-bottom: var(--ui-space-4);
}
.migration-bar__label {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 6px;
}
.migration-bar__track {
height: 8px;
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
}
.migration-bar__fill {
height: 100%;
background: linear-gradient(90deg, #f59e0b, #4ade80);
border-radius: 4px;
transition: width 0.6s ease;
min-width: 4px;
}
.legacy-modules h4 {
margin: 0 0 var(--ui-space-2);
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.legacy-module-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--ui-space-2);
}
.legacy-module-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-3);
background: rgba(255, 255, 255, 0.03);
border-radius: var(--ui-radius-sm);
font-size: 13px;
}
.legacy-module-item__name {
color: rgba(255, 255, 255, 0.7);
}
.legacy-module-item__count {
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.06);
padding: 1px 8px;
border-radius: 10px;
font-size: 11px;
}
.feature-flag-card {
padding: var(--ui-space-4);
border-radius: var(--ui-radius-lg, 12px);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.feature-flag-card--enabled {
background: rgba(34, 197, 94, 0.06);
border-color: rgba(34, 197, 94, 0.2);
}
.feature-flag-card--disabled {
background: rgba(239, 68, 68, 0.06);
border-color: rgba(239, 68, 68, 0.2);
}
.feature-flag-card__header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
margin-bottom: var(--ui-space-2);
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.feature-flag-card__header mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.feature-flag-card--enabled .feature-flag-card__header mat-icon {
color: #4ade80;
}
.feature-flag-card--disabled .feature-flag-card__header mat-icon {
color: #f87171;
}
.feature-flag-card__value {
margin-bottom: var(--ui-space-2);
}
.feature-flag-card__value code {
padding: 4px 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
font-size: 13px;
font-family: var(--ui-font-mono);
color: rgba(255, 255, 255, 0.7);
}
.feature-flag-card__desc {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.5;
}
.system-footer {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) 0;
font-size: var(--ui-text-xs);
color: rgba(255, 255, 255, 0.35);
border-top: 1px solid rgba(255, 255, 255, 0.04);
margin-top: var(--ui-space-2);
}
.system-footer mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.system-footer a {
color: var(--ui-accent);
cursor: pointer;
text-decoration: underline;
}
.system-tab .toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
width: 44px;
height: 24px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.system-tab .toggle-switch .toggle-track {
position: relative;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
transition: background 0.2s;
}
.system-tab .toggle-switch .toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
transition: all 0.2s;
}
.system-tab .toggle-switch.active .toggle-track {
background: rgba(245, 158, 11, 0.35);
}
.system-tab .toggle-switch.active .toggle-thumb {
left: 22px;
background: #f59e0b;
}
.source-group {
margin-bottom: 20px;
}
.source-group__header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px 8px 0 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.source-group__header mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: var(--ui-accent, #e8a838);
}
.source-group__count {
margin-left: auto;
background: rgba(255, 255, 255, 0.08);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
}
.glass-table--compact th, .glass-table--compact td {
padding: 8px 12px;
font-size: 12px;
}
.section-icon--info {
color: #60a5fa !important;
}
.section-badge--info {
background: rgba(96, 165, 250, 0.12);
color: #60a5fa;
}
.kill-switch-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
margin-bottom: 20px;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 10px;
animation: kill-pulse 2s ease-in-out infinite;
}
.kill-switch-banner mat-icon {
font-size: 28px;
width: 28px;
height: 28px;
color: #ef4444;
}
.kill-switch-banner__content {
display: flex;
flex-direction: column;
gap: 2px;
}
.kill-switch-banner__content strong {
font-size: 14px;
color: #ef4444;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kill-switch-banner__content span {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
@keyframes kill-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.toggle-confirm-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(4px);
}
.toggle-confirm-card {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 24px 28px;
min-width: 380px;
max-width: 440px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.toggle-confirm-card__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.toggle-confirm-card__header mat-icon {
font-size: 24px;
width: 24px;
height: 24px;
color: #f59e0b;
}
.toggle-confirm-card__header span {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.toggle-confirm-card__impact {
font-size: 13px;
color: var(--ui-accent, #e8a838);
margin: 0 0 8px;
padding: 8px 12px;
background: rgba(232, 168, 56, 0.08);
border-radius: 6px;
border-left: 3px solid var(--ui-accent, #e8a838);
}
.toggle-confirm-card__warning {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 20px;
}
.toggle-confirm-card__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.btn-toggle-cancel {
padding: 8px 20px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: transparent;
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.btn-toggle-cancel:hover {
background: rgba(255, 255, 255, 0.05);
color: white;
}
.btn-toggle-disable {
padding: 8px 20px;
border-radius: 6px;
border: none;
background: #ef4444;
color: white;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-toggle-disable:hover {
background: #dc2626;
}
.whatsapp-channels-panel {
margin-top: var(--ui-space-4);
}
.whatsapp-channels-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
flex-wrap: wrap;
}
.whatsapp-channels-panel__title-row {
display: flex;
align-items: flex-start;
gap: var(--ui-space-2);
}
.whatsapp-channels-panel__icon {
font-size: 22px;
width: 22px;
height: 22px;
color: #25d366;
margin-top: 2px;
flex-shrink: 0;
}
.whatsapp-channels-panel__title {
margin: 0 0 4px;
font-size: var(--ui-text-md);
font-weight: 600;
color: var(--ui-text-primary);
}
.whatsapp-channels-panel__subtitle {
margin: 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
line-height: 1.5;
}
.whatsapp-channels-panel__actions {
display: flex;
gap: var(--ui-space-2);
flex-shrink: 0;
}
.whatsapp-channels-panel__error {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
margin-bottom: var(--ui-space-3);
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--ui-radius-md);
color: #fca5a5;
font-size: var(--ui-text-sm);
}
.whatsapp-channels-panel__error mat-icon {
color: #f87171;
font-size: 18px;
width: 18px;
height: 18px;
}
.whatsapp-channels-panel__loading {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-4);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
}
.whatsapp-channels-panel__loading mat-icon {
animation: spin 1s linear infinite;
}
.whatsapp-channels-panel__empty {
text-align: center;
padding: var(--ui-space-6) var(--ui-space-4);
color: var(--ui-text-muted);
}
.whatsapp-channels-panel__empty mat-icon {
font-size: 40px;
width: 40px;
height: 40px;
opacity: 0.3;
display: block;
margin: 0 auto var(--ui-space-2);
}
.whatsapp-channels-panel__empty p {
margin: 0 0 4px;
font-size: var(--ui-text-sm);
}
.whatsapp-channels-panel__empty-hint {
font-size: var(--ui-text-xs);
opacity: 0.6;
line-height: 1.5;
max-width: 420px;
margin: var(--ui-space-2) auto 0 !important;
}
.whatsapp-channels-panel__footer {
display: flex;
align-items: center;
gap: var(--ui-space-2);
margin-top: var(--ui-space-3);
padding-top: var(--ui-space-3);
border-top: 1px solid rgba(255, 255, 255, 0.05);
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.whatsapp-channels-panel__footer mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.whatsapp-channels-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.whatsapp-channel-row {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: 12px var(--ui-space-3);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--ui-radius-md);
transition: background 0.15s;
}
.whatsapp-channel-row:hover {
background: rgba(255, 255, 255, 0.04);
}
.whatsapp-channel-row--inactive {
opacity: 0.55;
}
.whatsapp-channel-row__indicator {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.15);
}
.whatsapp-channel-row__indicator--active {
background: #25d366;
box-shadow: 0 0 6px rgba(37, 211, 102, 0.5);
}
.whatsapp-channel-row__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.whatsapp-channel-row__phone {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.88);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.whatsapp-channel-row__meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.whatsapp-channel-row__sync-time {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
}
.whatsapp-channel-row__actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.spin {
animation: spin 1s linear infinite;
}
.ui-badge--sm {
font-size: 10px;
padding: 1px 6px;
}
.badge--success {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
}
.badge--warning {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
}
.badge--danger {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
}
.badge--muted {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.4);
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
}
.badge--primary {
background: rgba(var(--ui-accent-rgb, 232, 168, 56), 0.15);
color: var(--ui-accent, #e8a838);
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
}
.ui-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--ui-radius-sm, 6px);
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.15s;
}
.ui-icon-btn mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.ui-icon-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.85);
}
.ui-icon-btn:disabled {
opacity: 0.35;
cursor: default;
}
.ui-btn--ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.6);
}
.ui-btn--ghost:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.85);
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
backdrop-filter: blur(4px);
animation: fadeIn 0.15s ease;
}
.modal-card {
background: var(--ui-surface, #1a1a1a);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ui-radius-lg, 12px);
width: 480px;
max-width: calc(100vw - 32px);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.modal-card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.modal-card__title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.modal-card__body {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.modal-card__hint {
margin: 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
line-height: 1.5;
}
.modal-card__hint a {
color: var(--ui-accent, #e8a838);
text-decoration: none;
}
.modal-card__hint a:hover {
text-decoration: underline;
}
.modal-card__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.modal-card__error {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--ui-radius-sm);
color: #fca5a5;
font-size: var(--ui-text-sm);
}
.modal-card__error mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #f87171;
}
.modal-card__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.01);
}
.ui-label, .ui-filter-label {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.required {
color: #f87171;
margin-left: 2px;
}
.ui-hint {
font-size: 11px;
color: rgba(255, 255, 255, 0.3);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Integration Intelligence styles moved to src/ui/pages/integrations.scss */
/* ═══════════════════════════════════════════════════════════════════════
INTEGRATIONS HUB — Liquid Glass Design System (Phase 2)
═══════════════════════════════════════════════════════════════════════ */
/* ── Design Tokens ────────────────────────────────────────────────── */
/* ── Overview Container ───────────────────────────────────────────── */
.intg-overview {
max-width: 860px;
margin: 0 auto;
padding: 0 16px;
}
.intg-overview__header {
margin-bottom: 20px;
}
.intg-overview__count {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(52, 199, 89, 0.12);
color: #34C759;
font-size: 11px;
font-weight: 600;
padding: 2px 10px;
border-radius: 12px;
margin-left: 8px;
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════════════════
DIAGNOSTICS ALERT PANEL (Glass Banner)
═══════════════════════════════════════════════════════════════════════ */
.intg-diagnostics {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.intg-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
animation: slideDown 0.3s ease;
}
.intg-alert--high {
background: rgba(255, 59, 48, 0.1);
border-color: rgba(255, 59, 48, 0.18);
}
.intg-alert--high .intg-alert__icon {
color: #FF3B30;
}
.intg-alert--medium {
background: rgba(255, 204, 0, 0.1);
border-color: rgba(255, 204, 0, 0.18);
}
.intg-alert--medium .intg-alert__icon {
color: #FFCC00;
}
.intg-alert--low {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.18);
}
.intg-alert--low .intg-alert__icon {
color: #60a5fa;
}
.intg-alert__icon {
flex-shrink: 0;
margin-top: 1px;
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
}
.intg-alert__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.intg-alert__message {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
}
.intg-alert__suggestion {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
}
/* ═══════════════════════════════════════════════════════════════════════
CATEGORY GROUPS
═══════════════════════════════════════════════════════════════════════ */
.intg-category {
margin-bottom: 28px;
}
.intg-category__label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 10px;
}
.intg-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ═══════════════════════════════════════════════════════════════════════
GLASS INTEGRATION CARDS
═══════════════════════════════════════════════════════════════════════ */
.intg-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
backdrop-filter: blur(20px);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-user-select: none;
user-select: none;
}
.intg-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.14);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.intg-card:active {
transform: translateY(0);
box-shadow: none;
}
.intg-card--connected {
border-color: rgba(52, 199, 89, 0.18);
}
.intg-card--connected:hover {
border-color: rgba(52, 199, 89, 0.3);
box-shadow: 0 8px 32px rgba(52, 199, 89, 0.06);
}
.intg-card--degraded {
border-color: rgba(255, 204, 0, 0.18);
}
.intg-card--degraded:hover {
border-color: rgba(255, 204, 0, 0.3);
box-shadow: 0 8px 32px rgba(255, 204, 0, 0.06);
}
.intg-card--error {
border-color: rgba(255, 59, 48, 0.18);
}
.intg-card--error:hover {
border-color: rgba(255, 59, 48, 0.3);
box-shadow: 0 8px 32px rgba(255, 59, 48, 0.06);
}
.intg-card--loading {
opacity: 0.6;
pointer-events: none;
}
/* ── Card Icon ────────────────────────────────────────────────────── */
.intg-card__icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s, box-shadow 0.2s;
}
.intg-card__icon .mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s;
}
.intg-card__icon--active {
background: rgba(52, 199, 89, 0.12);
box-shadow: 0 0 12px rgba(52, 199, 89, 0.08);
}
.intg-card__icon--active .mat-icon {
color: #34C759;
}
.intg-card__icon--degraded {
background: rgba(255, 204, 0, 0.1);
box-shadow: 0 0 12px rgba(255, 204, 0, 0.08);
}
.intg-card__icon--degraded .mat-icon {
color: #FFCC00;
}
.intg-card__icon--error {
background: rgba(255, 59, 48, 0.1);
box-shadow: 0 0 12px rgba(255, 59, 48, 0.08);
}
.intg-card__icon--error .mat-icon {
color: #FF3B30;
}
/* ── Card Info ────────────────────────────────────────────────────── */
.intg-card__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.intg-card__label {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.intg-card__desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
.intg-card__meta {
font-size: 11px;
color: rgba(255, 255, 255, 0.3);
font-family: "SF Mono", "Fira Code", monospace;
}
/* ── Card Right (Health + Status) ─────────────────────────────────── */
.intg-card__right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.intg-card__health {
display: flex;
align-items: center;
}
.intg-card__arrow {
color: rgba(255, 255, 255, 0.15);
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
transition: color 0.2s, transform 0.2s;
}
.intg-card:hover .intg-card__arrow {
color: rgba(255, 255, 255, 0.45);
transform: translateX(2px);
}
/* ═══════════════════════════════════════════════════════════════════════
HEALTH BADGES (Score Indicators)
═══════════════════════════════════════════════════════════════════════ */
.intg-health-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 8px;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.intg-health--good {
background: rgba(52, 199, 89, 0.12);
color: #34C759;
}
.intg-health--warn {
background: rgba(255, 204, 0, 0.1);
color: #FFCC00;
}
.intg-health--critical {
background: rgba(255, 59, 48, 0.1);
color: #FF3B30;
}
/* ═══════════════════════════════════════════════════════════════════════
STATUS BADGES
═══════════════════════════════════════════════════════════════════════ */
.intg-status {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 10px;
white-space: nowrap;
}
.intg-status--connected {
background: rgba(52, 199, 89, 0.12);
color: #34C759;
}
.intg-status--degraded {
background: rgba(255, 204, 0, 0.1);
color: #FFCC00;
}
.intg-status--error {
background: rgba(255, 59, 48, 0.1);
color: #FF3B30;
}
.intg-status--disconnected {
background: rgba(245, 158, 11, 0.12);
color: #fbbf24;
}
.intg-status--idle {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.35);
}
/* ═══════════════════════════════════════════════════════════════════════
INLINE BADGE VARIANTS (Channel rows, sub-components)
═══════════════════════════════════════════════════════════════════════ */
.intg-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 4px;
line-height: 1.4;
}
.intg-badge--connected {
background: rgba(52, 199, 89, 0.12);
color: #34C759;
}
.intg-badge--warning {
background: rgba(255, 204, 0, 0.1);
color: #FFCC00;
}
.intg-badge--danger {
background: rgba(255, 59, 48, 0.1);
color: #FF3B30;
}
.intg-badge--muted {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.35);
}
.intg-badge--primary {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
}
/* ═══════════════════════════════════════════════════════════════════════
PROVIDER PAGE SHELL
═══════════════════════════════════════════════════════════════════════ */
.intg-page {
max-width: 860px;
margin: 0 auto;
padding: 0 16px;
}
.intg-back {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
font-weight: 500;
cursor: pointer;
padding: 4px 0;
margin-bottom: 16px;
transition: color 0.15s ease;
}
.intg-back:hover {
color: rgba(255, 255, 255, 0.8);
}
.intg-back .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.intg-page__header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.intg-page__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.intg-page__icon .mat-icon {
font-size: 22px;
width: 22px;
height: 22px;
color: rgba(255, 255, 255, 0.5);
}
.intg-page__icon--active {
background: rgba(52, 199, 89, 0.12);
}
.intg-page__icon--active .mat-icon {
color: #34C759;
}
/* ═══════════════════════════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ═══════════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.intg-card {
padding: 12px 14px;
gap: 10px;
border-radius: 12px;
}
.intg-card__icon {
width: 36px;
height: 36px;
border-radius: 10px;
}
.intg-card__label {
font-size: 13px;
}
.intg-status {
font-size: 10px;
padding: 2px 8px;
}
.intg-health-badge {
font-size: 10px;
padding: 2px 6px;
}
.intg-page, .intg-overview {
padding: 0 10px;
}
.intg-alert {
padding: 12px 14px;
gap: 10px;
}
}
/* ==========================================================================
INTEGRATIONS PAGE — Page Contract
==========================================================================
Scoped page styles for the Integration Intelligence dashboard.
All values use design tokens from src/ui/tokens.scss.
Drawer/modal overlays reuse existing layout contracts where possible.
========================================================================== */
/* ── Container ────────────────────────────────────────────────────── */
.intg-intelligence {
max-width: 860px;
margin: 0 auto;
padding: 0 var(--ui-space-4);
}
.intg-section {
margin-top: var(--ui-space-2);
}
.intg-section-title {
font-family: var(--ui-font-primary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ui-text-subtle);
margin: 0 0 var(--ui-space-3);
}
/* ==========================================================================
1. SMART BANNER
========================================================================== */
.intg-smart-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-4);
padding: var(--ui-space-3) var(--ui-space-5);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
background: var(--ui-surface-1);
backdrop-filter: var(--ui-blur-lg);
margin-bottom: var(--ui-space-6);
animation: intg-banner-in 0.35s var(--ui-transition-spring);
}
.intg-smart-banner--critical {
background: var(--ui-danger-bg);
border-color: var(--ui-danger-border);
}
.intg-smart-banner--recommended {
background: var(--ui-success-bg);
border-color: var(--ui-success-border);
}
.intg-smart-banner__body {
display: flex;
align-items: center;
gap: var(--ui-space-3);
flex: 1;
min-width: 0;
}
.intg-smart-banner__icon {
font-size: var(--ui-text-xl);
width: 22px;
height: 22px;
flex-shrink: 0;
}
.intg-smart-banner--critical .intg-smart-banner__icon {
color: var(--ui-danger);
}
.intg-smart-banner--recommended .intg-smart-banner__icon {
color: var(--ui-success);
}
.intg-smart-banner__text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.intg-smart-banner__title {
font-family: var(--ui-font-primary);
font-size: var(--ui-table-cell-font);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.intg-smart-banner__desc {
font-size: var(--ui-text-sm);
color: var(--ui-text-subtle);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.intg-smart-banner__cta {
flex-shrink: 0;
padding: 7px var(--ui-space-4);
border-radius: var(--ui-radius-sm);
border: none;
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
cursor: pointer;
transition: all var(--ui-transition-base);
white-space: nowrap;
}
.intg-smart-banner--critical .intg-smart-banner__cta {
background: var(--ui-danger);
color: var(--ui-text-primary);
}
.intg-smart-banner--critical .intg-smart-banner__cta:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.intg-smart-banner--recommended .intg-smart-banner__cta {
background: var(--ui-success-bg);
color: var(--ui-success);
}
.intg-smart-banner--recommended .intg-smart-banner__cta:hover {
background: rgba(74, 222, 128, 0.25);
}
@keyframes intg-banner-in {
from {
opacity: 0;
transform: translateY(-12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
2. BUSINESS READINESS CARD
========================================================================== */
.intg-readiness {
padding: var(--ui-space-5);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
background: var(--ui-surface-1);
backdrop-filter: var(--ui-blur-md);
margin-bottom: var(--ui-space-6);
}
.intg-readiness__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--ui-space-3);
}
.intg-readiness__info {
display: flex;
flex-direction: column;
gap: 2px;
}
.intg-readiness__title {
font-family: var(--ui-font-primary);
font-size: 15px;
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
margin: 0;
}
.intg-readiness__label {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
}
.intg-readiness__score {
font-family: var(--ui-font-primary);
font-size: var(--ui-text-3xl);
font-weight: var(--ui-font-bold);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.intg-readiness__bar {
height: 6px;
border-radius: 3px;
background: var(--ui-surface-2);
overflow: hidden;
margin-bottom: var(--ui-space-3);
}
.intg-readiness__fill {
height: 100%;
border-radius: 3px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.intg-readiness__issues {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.intg-readiness__issue {
display: flex;
align-items: center;
gap: var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.intg-readiness__issue-icon {
font-size: var(--ui-text-md);
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ==========================================================================
3. RECOMMENDED ACTIONS
========================================================================== */
.intg-actions {
margin-bottom: var(--ui-space-8);
}
.intg-actions__list {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.intg-action-card {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
border-radius: var(--ui-radius-md);
border: 1px solid var(--ui-border-light);
background: var(--ui-surface-1);
backdrop-filter: var(--ui-blur-md);
transition: all var(--ui-transition-base);
}
.intg-action-card:hover {
background: var(--ui-surface-2);
}
.intg-action-card--critical {
border-color: var(--ui-danger-border);
}
.intg-action-card--critical .intg-action-card__icon {
color: var(--ui-danger);
}
.intg-action-card--warning {
border-color: var(--ui-warning-border);
}
.intg-action-card--warning .intg-action-card__icon {
color: var(--ui-warning);
}
.intg-action-card--info {
border-color: var(--ui-info-border);
}
.intg-action-card--info .intg-action-card__icon {
color: var(--ui-info);
}
.intg-action-card__icon {
font-size: var(--ui-text-xl);
width: 20px;
height: 20px;
flex-shrink: 0;
}
.intg-action-card__content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.intg-action-card__title {
font-family: var(--ui-font-primary);
font-size: var(--ui-table-cell-font);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
}
.intg-action-card__desc {
font-size: var(--ui-text-sm);
color: var(--ui-text-subtle);
}
.intg-action-card__cta {
flex-shrink: 0;
padding: 6px var(--ui-space-3);
border-radius: var(--ui-radius-sm);
border: 1px solid var(--ui-border-hover);
background: transparent;
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
cursor: pointer;
transition: all var(--ui-transition-base);
white-space: nowrap;
}
.intg-action-card__cta:hover {
background: var(--ui-surface-2);
color: var(--ui-text-primary);
border-color: var(--ui-border-hover);
}
/* ==========================================================================
4. DETAIL DRAWER — extends ui-drawer contract
========================================================================== */
.intg-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(8, 8, 8, 0.18);
backdrop-filter: var(--ui-blur-md);
-webkit-backdrop-filter: var(--ui-blur-md);
z-index: var(--z-drawer-backdrop);
animation: intg-fade-in 0.15s ease;
}
body:has(.intg-drawer-overlay) .ui-app-shell {
isolation: auto !important;
}
body:has(.intg-drawer-overlay) app-console-sidebar,
body:has(.intg-drawer-overlay) app-console-header,
body:has(.intg-drawer-overlay) .careager-topbar,
body:has(.intg-drawer-overlay) .navbar-custom.careager-topbar,
body:has(.intg-drawer-overlay) .left-side-menu,
body:has(.intg-drawer-overlay) .left-side-menu.glass-sidebar {
z-index: var(--z-base) !important;
}
.intg-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 92vw;
background: var(--ui-surface-1);
backdrop-filter: var(--ui-blur-lg) saturate(120%);
-webkit-backdrop-filter: var(--ui-blur-lg) saturate(120%);
border-left: 1px solid var(--ui-border);
box-shadow: var(--ui-shadow-xl), inset 1px 0 0 var(--ui-border-light);
z-index: var(--z-drawer-panel);
animation: intg-drawer-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.intg-drawer__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: var(--ui-space-6) var(--ui-space-5) var(--ui-space-4);
border-bottom: 1px solid var(--ui-border-light);
}
.intg-drawer__title-row {
display: flex;
align-items: center;
gap: var(--ui-space-3);
}
.intg-drawer__title {
font-family: var(--ui-font-primary);
font-size: var(--ui-text-md);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
margin: 0 0 var(--ui-space-1);
}
.intg-drawer__close {
background: none;
border: none;
color: var(--ui-text-subtle);
cursor: pointer;
padding: var(--ui-space-1);
border-radius: var(--ui-radius-sm);
transition: all var(--ui-transition-fast);
}
.intg-drawer__close:hover {
color: var(--ui-text-secondary);
background: var(--ui-surface-2);
}
.intg-drawer__close mat-icon {
font-size: var(--ui-text-xl);
width: 20px;
height: 20px;
}
.intg-drawer__body {
padding: var(--ui-space-5);
flex: 1;
}
.intg-drawer__stat-row {
display: flex;
gap: var(--ui-space-4);
margin-bottom: var(--ui-space-6);
}
.intg-drawer__stat {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
padding: var(--ui-space-3);
border-radius: var(--ui-radius-sm);
background: var(--ui-surface-1);
border: 1px solid var(--ui-border-light);
}
.intg-drawer__stat-label {
font-family: var(--ui-font-primary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ui-text-disabled);
}
.intg-drawer__stat-value {
font-family: var(--ui-font-primary);
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
font-variant-numeric: tabular-nums;
}
.intg-drawer__section-title {
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ui-text-disabled);
margin: 0 0 var(--ui-space-3);
}
.intg-drawer__actions {
margin-bottom: var(--ui-space-6);
}
.intg-drawer__action-item {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
padding: var(--ui-space-3) 0;
font-size: var(--ui-table-cell-font);
color: var(--ui-text-muted);
}
.intg-drawer__action-item mat-icon {
font-size: var(--ui-text-lg);
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
}
.intg-drawer__primary-btn {
width: 100%;
padding: var(--ui-space-3);
border-radius: var(--ui-radius-md);
border: none;
background: var(--ui-surface-3);
color: var(--ui-text-secondary);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
cursor: pointer;
transition: all var(--ui-transition-base);
margin-top: var(--ui-space-2);
}
.intg-drawer__primary-btn:hover {
background: var(--ui-surface-active);
color: var(--ui-text-primary);
}
@keyframes intg-drawer-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
/* ==========================================================================
5. BLOCKING MODAL
========================================================================== */
.intg-blocking-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: var(--ui-blur-sm);
z-index: var(--z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
animation: intg-fade-in 0.15s ease;
}
.intg-blocking-modal {
width: 400px;
max-width: 90vw;
padding: var(--ui-space-8);
border-radius: var(--ui-radius-xl);
border: 1px solid var(--ui-border);
background: var(--ui-glass-dark);
box-shadow: var(--ui-shadow-xl);
text-align: center;
animation: intg-modal-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.intg-blocking-modal__icon {
font-size: 40px;
width: 40px;
height: 40px;
color: var(--ui-text-disabled);
margin-bottom: var(--ui-space-4);
}
.intg-blocking-modal__title {
font-family: var(--ui-font-primary);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
margin: 0 0 var(--ui-space-2);
}
.intg-blocking-modal__message {
font-size: var(--ui-text-base);
color: var(--ui-text-subtle);
margin: 0 0 var(--ui-space-6);
line-height: 1.5;
}
.intg-blocking-modal__actions {
display: flex;
gap: var(--ui-space-3);
justify-content: center;
}
.intg-blocking-modal__secondary {
padding: var(--ui-space-3) var(--ui-space-5);
border-radius: var(--ui-radius-sm);
border: 1px solid var(--ui-border-hover);
background: transparent;
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-table-cell-font);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: all var(--ui-transition-base);
}
.intg-blocking-modal__secondary:hover {
background: var(--ui-surface-1);
color: var(--ui-text-primary);
}
.intg-blocking-modal__cta {
padding: var(--ui-space-3) var(--ui-space-6);
border-radius: var(--ui-radius-sm);
border: none;
background: var(--ui-danger);
color: var(--ui-text-primary);
font-family: var(--ui-font-primary);
font-size: var(--ui-table-cell-font);
font-weight: var(--ui-font-semibold);
cursor: pointer;
transition: all var(--ui-transition-base);
}
.intg-blocking-modal__cta:hover {
opacity: 0.9;
transform: translateY(-1px);
}
@keyframes intg-modal-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ==========================================================================
6. RECOVERY TOAST
========================================================================== */
.intg-toast {
position: fixed;
bottom: var(--ui-space-6);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-5);
border-radius: var(--ui-radius-md);
background: var(--ui-success-bg);
border: 1px solid var(--ui-success-border);
backdrop-filter: var(--ui-blur-md);
z-index: var(--z-toast);
animation: intg-toast-in 0.3s ease, intg-toast-out 0.3s ease 3.5s forwards;
}
.intg-toast__icon {
font-size: var(--ui-text-xl);
width: 20px;
height: 20px;
color: var(--ui-success);
}
.intg-toast span {
font-family: var(--ui-font-primary);
font-size: var(--ui-table-cell-font);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
}
@keyframes intg-toast-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(16px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes intg-toast-out {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateX(-50%) translateY(8px);
}
}
/* ==========================================================================
7. LOADING STATE
========================================================================== */
.intg-loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-3);
padding: 60px var(--ui-space-5);
color: var(--ui-text-disabled);
font-size: var(--ui-text-base);
}
.intg-loading__spinner {
animation: spin 1s linear infinite;
font-size: var(--ui-text-xl);
width: 20px;
height: 20px;
}
/* ==========================================================================
SHARED ANIMATIONS
========================================================================== */
@keyframes intg-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ==========================================================================
SMARTFLO PROVIDER PAGE
========================================================================== */
.smartflo-integration-page .intg-page {
width: 100%;
max-width: none;
padding: 0;
}
.smartflo-integration-page .intg-back {
margin-bottom: var(--ui-space-5);
}
.smartflo-integration-page .intg-page__header {
align-items: center;
gap: var(--ui-space-4);
margin-bottom: var(--ui-space-6);
}
.smartflo-integration-page .intg-page__copy {
flex: 1 1 auto;
min-width: 0;
}
.smartflo-integration-page .intg-page__eyebrow {
margin-bottom: var(--ui-space-1);
color: var(--ui-text-subtle);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.smartflo-integration-page .page-heading {
margin: 0;
color: var(--ui-text-primary);
font-family: var(--ui-font-display);
font-size: var(--ui-text-3xl);
font-weight: var(--ui-font-bold);
line-height: 1.1;
}
.smartflo-integration-page .section-helper {
margin: var(--ui-space-2) 0 0;
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-base);
}
.smartflo-integration-page .intg-page__icon,
.smartflo-integration-page .integration-connect__icon,
.smartflo-integration-page .integration-connected__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: var(--ui-radius-lg);
background: var(--ui-success-bg);
border: 1px solid var(--ui-success-border);
}
.smartflo-integration-page .intg-page__icon {
width: 52px;
height: 52px;
}
.smartflo-integration-page .intg-page__icon .mat-icon,
.smartflo-integration-page .integration-connect__icon .mat-icon,
.smartflo-integration-page .integration-connected__icon .mat-icon {
color: var(--ui-success);
}
.smartflo-integration-page .smartflo-status-chips {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.smartflo-integration-page .integration-content {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
width: 100%;
max-width: none;
}
.smartflo-integration-page .smartflo-loading {
justify-content: flex-start;
min-height: 120px;
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-lg);
background: var(--ui-surface-1);
}
.smartflo-integration-page .smartflo-connect,
.smartflo-integration-page .smartflo-connected {
width: 100%;
gap: var(--ui-space-4);
padding: var(--ui-space-6);
background: var(--ui-surface-1);
border-color: var(--ui-border);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.smartflo-integration-page .integration-connect__header,
.smartflo-integration-page .integration-connected__header {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
margin: 0;
}
.smartflo-integration-page .integration-connect__icon,
.smartflo-integration-page .integration-connected__icon {
width: 44px;
height: 44px;
}
.smartflo-integration-page .integration-connect__copy,
.smartflo-integration-page .integration-connected__copy {
min-width: 0;
}
.smartflo-integration-page .integration-connect__title,
.smartflo-integration-page .integration-connected__title {
margin: 0;
color: var(--ui-text-primary);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
line-height: 1.25;
}
.smartflo-integration-page .integration-connect__subtitle,
.smartflo-integration-page .integration-connected__subtitle {
margin: var(--ui-space-1) 0 0;
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-base);
line-height: 1.45;
}
.smartflo-integration-page .smartflo-connected__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--ui-space-4);
align-items: start;
}
.smartflo-integration-page .smartflo-connected__primary,
.smartflo-integration-page .smartflo-connected__sidebar {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
min-width: 0;
}
.smartflo-integration-page .integration-connect__body {
display: grid;
grid-template-columns: minmax(240px, 0.9fr) minmax(300px, 1.1fr);
gap: var(--ui-space-5);
align-items: stretch;
}
.smartflo-integration-page .integration-connect__steps {
margin: 0;
padding: var(--ui-space-4);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
}
.smartflo-integration-page .integration-connect__steps ol {
margin: 0;
padding-left: var(--ui-space-5);
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
line-height: 1.65;
}
.smartflo-integration-page .integration-connect__steps a {
color: var(--ui-info);
text-decoration: none;
}
.smartflo-integration-page .integration-connect__steps a:hover {
text-decoration: underline;
}
.smartflo-integration-page .integration-connect__form {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--ui-space-2);
margin: 0;
min-width: 0;
}
.smartflo-integration-page .smartflo-field-label,
.smartflo-integration-page .integration-connected__label {
color: var(--ui-text-subtle);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.smartflo-integration-page .integration-connect__input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--ui-space-2);
}
.smartflo-integration-page .integration-connect__input-row .ui-input {
width: 100%;
min-width: 0;
height: 40px;
padding: 0 var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
color: var(--ui-text-primary);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
}
.smartflo-integration-page .integration-connect__input-row .ui-input::placeholder {
color: var(--ui-text-subtle);
}
.smartflo-integration-page .integration-connect__input-row .ui-input:focus {
border-color: var(--ui-border-focus);
outline: none;
}
.smartflo-integration-page .integration-connect__error,
.smartflo-integration-page .integration-validation-warning {
display: flex;
align-items: flex-start;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
border: 1px solid var(--ui-danger-border);
border-radius: var(--ui-radius-md);
background: var(--ui-danger-bg);
color: var(--ui-danger);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
line-height: 1.45;
}
.smartflo-integration-page .integration-connect__error .mat-icon,
.smartflo-integration-page .integration-validation-warning .mat-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
font-size: 18px;
}
.smartflo-integration-page .integration-connect__note,
.smartflo-integration-page .integration-connected__note {
display: flex;
align-items: flex-start;
gap: var(--ui-space-2);
margin: 0;
padding: var(--ui-space-3);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
line-height: 1.45;
}
.smartflo-integration-page .integration-connect__note .mat-icon,
.smartflo-integration-page .integration-connected__note .mat-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
font-size: 18px;
color: var(--ui-text-subtle);
}
.smartflo-integration-page .smartflo-webhook-panel,
.smartflo-integration-page .smartflo-did-section {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
padding: var(--ui-space-4);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
}
.smartflo-integration-page .smartflo-section-heading,
.smartflo-integration-page .smartflo-did-section__header {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
}
.smartflo-integration-page .smartflo-section-heading {
min-width: 0;
}
.smartflo-integration-page .smartflo-section-heading .mat-icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
color: var(--ui-text-muted);
font-size: 20px;
}
.smartflo-integration-page .smartflo-section-title {
display: block;
color: var(--ui-text-secondary);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
line-height: 1.3;
}
.smartflo-integration-page .smartflo-section-subtitle {
display: block;
margin-top: 2px;
color: var(--ui-text-subtle);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
line-height: 1.35;
}
.smartflo-integration-page .smartflo-webhook-url {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--ui-space-2);
align-items: center;
}
.smartflo-integration-page .webhook-code {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: var(--ui-space-3);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-2);
color: var(--ui-info);
font-family: var(--ui-font-mono);
font-size: var(--ui-text-sm);
line-height: 1.35;
}
.smartflo-integration-page .smartflo-webhook-hint {
margin: 0;
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
}
.smartflo-integration-page .integration-connected__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-3);
margin: 0;
padding: 0;
background: transparent;
}
.smartflo-integration-page .smartflo-connected__sidebar .integration-connected__details {
grid-template-columns: 1fr;
}
.smartflo-integration-page .integration-connected__detail {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
min-width: 0;
padding: var(--ui-space-4);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
}
.smartflo-integration-page .integration-connected__value {
color: var(--ui-text-primary);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-medium);
line-height: 1.35;
}
.smartflo-integration-page .smartflo-did-section__header {
justify-content: space-between;
}
.smartflo-integration-page .smartflo-did-section__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ui-space-2);
flex: 0 0 auto;
}
.smartflo-integration-page .smartflo-did-syncing,
.smartflo-integration-page .smartflo-did-empty {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
}
.smartflo-integration-page .smartflo-did-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-2);
}
.smartflo-integration-page .smartflo-did-card {
display: flex;
align-items: center;
gap: var(--ui-space-3);
min-width: 0;
min-height: 56px;
padding: var(--ui-space-3);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
cursor: pointer;
transition: border-color var(--ui-transition-base), background var(--ui-transition-base);
}
.smartflo-integration-page .smartflo-did-card:hover,
.smartflo-integration-page .smartflo-did-card--selected {
border-color: var(--ui-success-border);
background: var(--ui-success-bg);
}
.smartflo-integration-page .smartflo-did-card__radio {
flex: 0 0 auto;
accent-color: var(--ui-success);
}
.smartflo-integration-page .smartflo-did-card__content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.smartflo-integration-page .did-number {
overflow: hidden;
color: var(--ui-text-primary);
font-family: var(--ui-font-mono);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.smartflo-integration-page .did-label {
overflow: hidden;
color: var(--ui-text-muted);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.smartflo-integration-page .integration-connected__actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--ui-space-2);
margin: 0;
padding-top: var(--ui-space-1);
flex-wrap: wrap;
}
@media (max-width: 1120px) {
.smartflo-integration-page .smartflo-connected__grid {
grid-template-columns: 1fr;
}
.smartflo-integration-page .smartflo-connected__sidebar .integration-connected__details {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.smartflo-integration-page .intg-page__header,
.smartflo-integration-page .smartflo-connected__grid,
.smartflo-integration-page .integration-connect__body,
.smartflo-integration-page .smartflo-webhook-url,
.smartflo-integration-page .integration-connected__details,
.smartflo-integration-page .smartflo-connected__sidebar .integration-connected__details,
.smartflo-integration-page .smartflo-did-list {
grid-template-columns: 1fr;
}
.smartflo-integration-page .intg-page__header {
display: grid;
}
.smartflo-integration-page .smartflo-status-chips,
.smartflo-integration-page .smartflo-did-section__actions,
.smartflo-integration-page .integration-connected__actions {
justify-content: flex-start;
}
.smartflo-integration-page .smartflo-did-section__header {
flex-direction: column;
}
.smartflo-integration-page .integration-connect__input-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.smartflo-integration-page .page-heading {
font-size: var(--ui-text-2xl);
}
.smartflo-integration-page .smartflo-connect,
.smartflo-integration-page .smartflo-connected {
padding: var(--ui-space-4);
}
.smartflo-integration-page .smartflo-did-section__actions,
.smartflo-integration-page .integration-connected__actions {
width: 100%;
flex-direction: column;
align-items: stretch;
}
}
.insurance-claims-page .header-card__bottom .filter-row {
width: 100%;
}
.insurance-claims-page .header-card__bottom .filter-group {
margin-left: auto;
justify-content: flex-end;
}
.insurance-claims-page .ui-table td, .insurance-claims-page .premium-table td, .insurance-claims-page .glass-table td {
padding-top: 16px;
padding-bottom: 16px;
}
.insurance-claims-page .insurance-claims-table__stack {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.insurance-claims-page .insurance-claims-table__stack .cell-chip {
width: fit-content;
max-width: 100%;
}
.insurance-claims-page .insurance-claims-table__stack .cell-primary-name,
.insurance-claims-page .insurance-claims-table__stack .cell-primary-sub,
.insurance-claims-page .insurance-claims-table__stack .cell-muted {
margin: 0;
}
.insurance-claims-page .insurance-claims-table__stack--vehicle .cell-primary-name {
line-height: 1.45;
color: var(--ui-text-secondary);
}
.insurance-claims-page .insurance-claims-table__invoice-chip {
background: rgba(255, 140, 90, 0.12);
border-color: rgba(255, 140, 90, 0.28);
}
.insurance-claims-page .insurance-claims-table__owner-name {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ui-text-secondary);
}
.insurance-claims-page .insurance-claims-table__owner-icon {
width: 16px;
height: 16px;
font-size: 16px;
color: rgba(147, 197, 253, 0.92);
}
.insurance-claims-page .cell-status .glass-status-chip {
justify-content: center;
min-width: 122px;
}
.insurance-claims-page .insurance-claims-table__revenue {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.insurance-claims-page .insurance-claims-table__revenue .cell-muted {
text-align: right;
}
.insurance-claims-page .ui-table tbody tr:hover .insurance-claims-table__invoice-chip, .insurance-claims-page .premium-table tbody tr:hover .insurance-claims-table__invoice-chip, .insurance-claims-page .glass-table tbody tr:hover .insurance-claims-table__invoice-chip {
background: rgba(255, 140, 90, 0.18);
border-color: rgba(255, 140, 90, 0.34);
}
@media (max-width: 1024px) {
.insurance-claims-page .header-card__bottom .filter-group {
justify-content: flex-start;
}
}
/* ==========================================================================
UI PAGES - MY PAYROLL (EMPLOYEE VIEW)
==========================================================================
Scoped UI contract for employee payroll viewing.
All selectors MUST be inside .my-payroll-page scope.
========================================================================== */
.my-payroll-page {
padding: 0 20px;
/* ==========================================================================
HEADER BLOCK - Profile section
========================================================================== */
/* Avatar styling uses .avatar-wrap from role-management contract */
/* ==========================================================================
SUMMARY CARDS - 3-column grid layout
========================================================================== */
/* Stat list rows inside summary columns */
/* ==========================================================================
STATUTORY LIST - Compliance items with status icons
========================================================================== */
/* ==========================================================================
EMPTY STATE - Centered placeholder for empty cards
========================================================================== */
/* ==========================================================================
PAYROLL HISTORY TABLE - Uses glass-table contract
========================================================================== */
/* Table uses .glass-table contract - only page-specific overrides here */
/* Uses .type-pill contract from data-table.scss */
/* View button uses pill button contract */
/* ==========================================================================
LOADING, ERROR, EMPTY STATES
========================================================================== */
}
.my-payroll-page .erp-header-block {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
margin-bottom: 16px;
overflow: hidden;
}
.my-payroll-page .erp-header-primary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
}
.my-payroll-page .row-identity {
display: flex;
align-items: center;
gap: 16px;
}
.my-payroll-page .identity-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.my-payroll-page .emp-name-row {
display: flex;
align-items: center;
gap: 12px;
}
.my-payroll-page .emp-name {
font-size: 18px;
font-weight: 600;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.95));
}
.my-payroll-page .emp-code-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
font-family: var(--ui-font-mono);
letter-spacing: 0.3px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.6));
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
}
.my-payroll-page .emp-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ui-text-secondary, rgba(255, 255, 255, 0.6));
}
.my-payroll-page .meta-sep {
color: var(--ui-text-muted, rgba(255, 255, 255, 0.4));
}
.my-payroll-page .summary-card {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-4, 16px);
margin-bottom: 16px;
}
@media (max-width: 900px) {
.my-payroll-page .summary-card {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.my-payroll-page .summary-card {
grid-template-columns: 1fr;
}
}
.my-payroll-page .summary-column {
display: flex;
flex-direction: column;
gap: var(--ui-space-2, 8px);
padding: var(--ui-space-6, 24px);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.2s ease;
}
.my-payroll-page .summary-column:hover {
background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
border-color: var(--ui-border-hover, rgba(255, 255, 255, 0.15));
transform: translateY(-2px);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}
.my-payroll-page .summary-column--highlight {
border-color: rgba(74, 222, 128, 0.25);
background: linear-gradient(150deg, rgba(74, 222, 128, 0.08), rgba(255, 255, 255, 0.02));
}
.my-payroll-page .summary-column--highlight:hover {
border-color: rgba(74, 222, 128, 0.4);
}
.my-payroll-page .summary-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--gdt-accent, #ff9868);
padding-bottom: var(--ui-space-2, 8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin: 0;
}
.my-payroll-page .summary-label mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
opacity: 0.8;
}
.my-payroll-page .salary-amount {
font-size: 28px;
font-weight: 700;
color: var(--ui-success, #4ade80);
letter-spacing: -0.5px;
line-height: 1.2;
margin: var(--ui-space-2, 8px) 0 0;
}
.my-payroll-page .summary-sub {
font-size: 12px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.5));
margin: 0;
}
.my-payroll-page .summary-column ul {
list-style: none;
margin: var(--ui-space-2, 8px) 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.my-payroll-page .summary-column li {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.my-payroll-page .summary-column li:last-child {
border-bottom: none;
}
.my-payroll-page .summary-column li span {
color: var(--ui-text-muted, rgba(255, 255, 255, 0.5));
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.05em;
font-weight: 600;
}
.my-payroll-page .summary-column li strong {
color: var(--ui-text-primary, rgba(255, 255, 255, 0.9));
font-weight: 500;
}
.my-payroll-page .summary-column li strong.mono {
font-family: var(--ui-font-mono);
letter-spacing: 0.02em;
}
.my-payroll-page .statutory-list {
list-style: none;
margin: var(--ui-space-2, 8px) 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.my-payroll-page .statutory-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.my-payroll-page .statutory-list li:last-child {
border-bottom: none;
}
.my-payroll-page .statutory-list .stat-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.5));
}
.my-payroll-page .statutory-list .stat-value {
font-size: 13px;
font-weight: 500;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.9));
}
.my-payroll-page .statutory-list .stat-value.active {
color: var(--ui-success, #4ade80);
}
.my-payroll-page .statutory-list .stat-value.muted {
color: var(--ui-text-muted, rgba(255, 255, 255, 0.4));
}
.my-payroll-page .summary-column .empty-state-compact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
flex: 1;
padding: 24px 16px;
gap: 8px;
min-height: 100px;
}
.my-payroll-page .summary-column .empty-state-compact mat-icon,
.my-payroll-page .summary-column .empty-state-compact .empty-icon {
font-size: 32px;
width: 32px;
height: 32px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.25));
}
.my-payroll-page .summary-column .empty-state-compact .empty-text {
font-size: 12px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.4));
margin: 0;
}
.my-payroll-page .payroll-history-section {
padding: 0 20px;
}
.my-payroll-page .section-header {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: var(--ui-space-4, 16px);
}
.my-payroll-page .section-header h2 {
font-size: 18px;
font-weight: 600;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.95));
margin: 0;
}
.my-payroll-page .section-header .record-count {
font-size: 13px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.5));
}
.my-payroll-page .month-cell {
font-weight: 500;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.9));
}
.my-payroll-page .payment-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.my-payroll-page .payment-date {
font-size: 11px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.45));
}
.my-payroll-page .payslip-pending {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.35));
font-size: 12px;
font-weight: 500;
}
.my-payroll-page .payslip-pending mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
opacity: 0.7;
}
.my-payroll-page .pill-btn-view {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
font-size: 12px;
font-weight: 500;
color: var(--ui-text-secondary, rgba(255, 255, 255, 0.75));
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 100px;
cursor: pointer;
transition: all 0.15s ease;
}
.my-payroll-page .pill-btn-view mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.my-payroll-page .pill-btn-view:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: var(--ui-text-primary, rgba(255, 255, 255, 0.95));
}
.my-payroll-page-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px;
gap: 20px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.6));
}
.my-payroll-page-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px;
gap: 16px;
text-align: center;
}
.my-payroll-page-error mat-icon {
font-size: 64px;
width: 64px;
height: 64px;
color: var(--ui-error, #ef4444);
opacity: 0.6;
}
.my-payroll-page-error h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.9));
}
.my-payroll-page-error p {
margin: 0;
font-size: 14px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.5));
max-width: 400px;
}
.my-payroll-page-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100px 24px;
gap: 20px;
text-align: center;
}
.my-payroll-page-empty mat-icon {
font-size: 72px;
width: 72px;
height: 72px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.2));
}
.my-payroll-page-empty h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.9));
}
.my-payroll-page-empty p {
margin: 0;
font-size: 14px;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.5));
max-width: 400px;
}
/* ==========================================================================
MY PROFILE PAGE - LAYOUT ONLY
==========================================================================
Page-level layout (grids, spacing). All card visuals from UI contracts.
========================================================================== */
.my-profile-page {
padding: var(--ui-space-5);
max-width: 1400px;
margin: 0 auto;
}
/* Loading & Error States */
.my-profile-loading,
.my-profile-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ui-space-4);
min-height: 400px;
text-align: center;
}
.my-profile-error mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
color: var(--ui-danger);
}
.my-profile-error h3 {
margin: 0;
color: var(--ui-text-primary);
}
.my-profile-error p {
margin: 0;
color: var(--ui-text-muted);
}
/* Hero Card Layout */
.profile-hero-card {
margin-bottom: var(--ui-space-5);
}
.profile-hero-layout {
display: flex;
align-items: flex-start;
gap: var(--ui-space-5);
}
.avatar-wrap--hero {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: var(--ui-radius-full);
overflow: hidden;
background: var(--ui-surface-2);
border: 2px solid var(--ui-border-light);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-wrap--hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-wrap--hero .initials {
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
text-transform: uppercase;
}
/* Grid Spacing & Alignment */
.glass-summary-grid,
.glass-summary-grid.cols-2 {
margin-bottom: var(--ui-space-5);
align-items: start;
}
/* Empty state (uses existing contract pattern) */
.empty-state-compact {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--ui-space-2);
padding: var(--ui-space-4) 0;
color: var(--ui-text-muted);
}
.empty-state-compact mat-icon {
font-size: var(--ui-text-2xl);
width: var(--ui-text-2xl);
height: var(--ui-text-2xl);
color: var(--ui-text-muted);
opacity: 0.7;
}
.empty-state-compact .empty-message {
font-size: var(--ui-text-sm);
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.my-profile-page {
padding: var(--ui-space-3);
}
.profile-hero-layout {
flex-direction: column;
align-items: center;
text-align: center;
}
.avatar-wrap--hero {
width: 96px;
height: 96px;
}
}
/* ==========================================================================
USER PROFILE PAGE CONTRACT
==========================================================================
Page-level styles for /console/user/profile/:id
All selectors scoped via SCSS nesting under .user-profile-shell
Migrated from component CSS (originally 2706 lines, ViewEncapsulation scoped)
Per Autroid UI Rulebook v1.0:
- Location: src/ui/pages/ (page-level contract)
- Scoping: .user-profile-shell wraps all selectors
========================================================================== */
.user-profile-shell {
/* ==========================================================================
Profile Shell Container
========================================================================== */
/* Modal mode adjustments */
/* ==========================================================================
Ambient Glow Effects
========================================================================== */
/* ==========================================================================
Glass Surface Base
========================================================================== */
/* ==========================================================================
Modal Close Button
========================================================================== */
/* ==========================================================================
Profile Hero Section
========================================================================== */
/* Contact Person — shown for business parties when person ≠ company name */
/* Reward Points Wallet Card */
/* Convert to Business Floating Panel */
/* Status Chips */
/* Account Type Badges — Business / Individual */
/* Hero Meta */
/* Stat cards — use contract from headers/stat-cards.scss */
/* ==========================================================================
Category Select (Pill Dropdown)
========================================================================== */
/* ==========================================================================
Business Overview Grid & Section Headers
========================================================================== */
/* ==========================================================================
Business Overview — Two-Panel Summary Layout
========================================================================== */
/* Operational Summary — 3-column compact grid */
/* Financial Health — Stacked rows */
/* Overdue warning strip */
/* "This Branch" label in Financial Health header (non-transferred customers) */
/* "Group" badge on LTV meta item */
/* ─────────────────────────────────────────────────────────────────────────
CRM Insight Layer — Cross-Branch History Panel
Shown only when financialSummary.hasGroupData is true (transferred customers).
Visually distinct from the accounting layer — purple tones = informational.
───────────────────────────────────────────────────────────────────────── */
/* ==========================================================================
Profile Tabs Section - Pill Tab Style
========================================================================== */
/* ==========================================================================
Card Collections (Vehicles, Packages)
========================================================================== */
/* ==========================================================================
Booking Grid
========================================================================== */
/* Column grid template — shared by header + rows */
/* Header row */
/* Data row */
/* Columns */
/* Booking ID */
/* Date icon */
/* Car name + reg */
/* Amount */
/* Status Colors — scoped overrides */
/* Branch Badge — shared by bookings, invoices, sales tables */
/* Branch pills in hero meta row — teal/sky to signal identity-level grouping */
/* Layout for multi-branch pill list in meta row */
/* ==========================================================================
Lead Timeline
========================================================================== */
/* ==========================================================================
Wallet Transactions Table
========================================================================== */
/* Transaction type colors */
/* ==========================================================================
Premium Transactions Table (Party Statement)
========================================================================== */
/* Date Cell */
/* Details Cell */
/* Transaction Badge */
/* Amount Values */
/* Balance Chip */
/* Empty table state */
/* ==========================================================================
Empty States
========================================================================== */
/* ==========================================================================
Skeleton Loading States - Enhanced Independent Loaders
========================================================================== */
/* Base shimmer animation - Fast for immediate feedback */
/* Core skeleton elements with class-based shimmer */
/* === Independent Tab Skeleton Grids === */
/* Cars Tab Skeleton */
/* Bookings Tab Skeleton */
/* Leads Tab Skeleton */
/* === Hero Skeleton === */
/* Add shimmer animation to media */
/* === Load More Container === */
/* === Responsive Skeleton Adjustments === */
/* ==========================================================================
Responsive Adjustments
========================================================================== */
/* ==========================================================================
Glass Date Panel (Dropdown)
========================================================================== */
/* ==========================================================================
Transactions Tab (Party Statement) - Premium Design
========================================================================== */
/* Gradient Backgrounds */
/* Info Cards Grid */
/* Metrics Row */
/* Statement Actions */
/* Statement Skeleton Loading */
/* ==========================================================================
Statement Summary Card - Horizontal Layout
========================================================================== */
/* Stats Row - Left side */
/* Transaction Stat Icons */
/* Color-coded values */
/* Dividers */
/* Balance Section - Right side with highlight */
/* Payable state */
/* View Ledger Button */
/* Stats Row Spacer and Button */
/* Responsive */
/* ==========================================================================
Statement Transaction Table
========================================================================== */
/* Simple wrapper for horizontal scroll */
/* Transaction Type Badges */
/* Balance Value */
/* Wallet Transactions - Transaction Details Badge */
/* CC Transaction Value */
/* Empty Table State */
/* Load More Button */
/* ==========================================================================
Statement Skeleton Loading - Updated
========================================================================== */
/* ==========================================================================
Responsive Adjustments for Statement Tab
========================================================================== */
/* ==========================================================================
Premium Package Cards - Modern Design
========================================================================== */
/* Package Header */
/* Services Usage Grid */
/* Package Summary (compact) */
/* Phase 3: Overall Usage Progress */
/* Phase 3: Expiry Urgency */
/* Responsive Adjustments */
/* ==========================================================================
CRM Activity Timeline (Stage 10)
========================================================================== */
/* Vertical timeline line */
/* Event type color accents on icon */
/* ── New event type accents (Stage 11) ───────────────────────────── */
/* ── Day-group headers ───────────────────────────────────────────── */
/* Refund/cancelled amounts — show as red */
/* Timeline skeleton loading */
/* Responsive timeline */
/* ==========================================================================
Employee Financial Console — Payroll & Ledger Styles
========================================================================== */
/* Profile Type Badge */
/* Payroll History Timeline */
/* Status Pills */
/* Accounting Status Pills */
/* Deductions Breakdown */
/* Ledger Filter Tabs */
/* Outstanding balance meta-item — clickable, coloured value, subtle hover */
position: relative;
width: 100%;
max-width: 100%;
padding: 24px; /* Added padding for general view */
overflow: hidden;
box-sizing: border-box /* Ensure padding doesn't overflow width */
}
.user-profile-shell.modal-mode {
padding: 32px; /* Increased padding for modal */
max-height: 85vh;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(225, 90, 45, 0.4) transparent;
}
.user-profile-shell.modal-mode::-webkit-scrollbar {
width: 6px;
}
.user-profile-shell.modal-mode::-webkit-scrollbar-track {
background: transparent;
}
.user-profile-shell.modal-mode::-webkit-scrollbar-thumb {
background: rgba(225, 90, 45, 0.4);
border-radius: 10px;
}
.user-profile-shell.modal-mode::-webkit-scrollbar-thumb:hover {
background: rgba(255, 122, 61, 0.7);
}
.user-profile-shell .glow {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.user-profile-shell .glow-1 {
width: 280px;
height: 280px;
top: -80px;
left: -80px;
background: var(--glass-primary, #FF5722);
}
.user-profile-shell .glow-2 {
width: 240px;
height: 240px;
top: 50%;
right: -60px;
background: #6c5bff;
}
.user-profile-shell .glow-3 {
width: 200px;
height: 200px;
bottom: -40px;
left: 40%;
background: #19d2c4;
}
.user-profile-shell .glass {
background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
}
.user-profile-shell .modal-close-btn {
position: absolute;
top: 56px;
right: 32px;
z-index: 100;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: rgba(255, 255, 255, 0.8);
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.user-profile-shell .modal-close-btn:hover {
background: rgba(255, 59, 48, 0.25);
border-color: rgba(255, 59, 48, 0.5);
color: #fff;
}
.user-profile-shell .modal-close-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.user-profile-shell .profile-hero {
position: relative;
z-index: 1;
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.user-profile-shell .hero-actions {
position: absolute;
top: 24px;
right: 32px;
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
}
.user-profile-shell.modal-mode .hero-actions {
right: 68px;
}
.user-profile-shell .hero-edit {
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.user-profile-shell .hero-edit:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.user-profile-shell .hero-edit mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.user-profile-shell .hero-content-row {
display: flex;
align-items: flex-start;
gap: 24px;
}
.user-profile-shell .hero-main {
display: flex;
gap: 20px;
align-items: flex-start;
flex: 1;
}
.user-profile-shell .hero-avatar {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(255, 87, 34, 0.4), rgba(225, 65, 37, 0.25));
display: grid;
place-items: center;
font-size: 28px;
font-weight: 700;
color: #fff;
box-shadow: 0 12px 28px rgba(255, 87, 34, 0.3);
}
.user-profile-shell .eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
margin: 0 0 6px;
}
.user-profile-shell .hero-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 24px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
letter-spacing: -0.02em;
line-height: 1.2;
}
.user-profile-shell .hero-sub {
font-size: 14px;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
margin-bottom: 8px;
}
.user-profile-shell .hero-contact-person {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
padding: 3px 10px 3px 6px;
border-radius: 8px;
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.22);
font-size: 12px;
font-weight: 500;
color: #c4b5fd;
letter-spacing: 0.01em;
}
.user-profile-shell .hero-contact-person mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
color: rgba(196, 181, 253, 0.7);
}
.user-profile-shell .reward-points-card {
flex-shrink: 0;
padding: 14px 20px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
min-width: 280px;
margin-top: 48px;
}
.user-profile-shell .rp-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.user-profile-shell .rp-header mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.user-profile-shell .rp-stats {
display: flex;
gap: 24px;
}
.user-profile-shell .rp-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.user-profile-shell .rp-stat__value {
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.02em;
}
.user-profile-shell .rp-stat__label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
}
.user-profile-shell .rp-stat--balance .rp-stat__value {
color: rgba(255, 200, 150, 0.95);
}
.user-profile-shell .convert-business-panel {
position: absolute;
top: 24px;
right: 24px;
width: 280px;
padding: 16px;
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 10;
animation: convertPanelSlide 0.2s ease-out;
}
@keyframes convertPanelSlide {
from {
opacity: 0;
transform: translateX(12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.user-profile-shell .convert-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: #fbbf24;
letter-spacing: 0.02em;
}
.user-profile-shell .convert-panel-close {
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.5);
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.user-profile-shell .convert-panel-close mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.user-profile-shell .convert-panel-close:hover {
background: rgba(255, 69, 58, 0.2);
color: #ff8a82;
}
.user-profile-shell .convert-panel-input {
width: 100%;
height: 40px;
padding: 0 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--ui-radius-lg, 12px);
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
font-family: inherit;
outline: none;
box-sizing: border-box;
transition: all 0.2s ease;
}
.user-profile-shell .convert-panel-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.user-profile-shell .convert-panel-input:focus {
border-color: rgba(255, 122, 61, 0.5);
background: rgba(255, 255, 255, 0.06);
}
.user-profile-shell .convert-panel-submit {
width: 100%;
}
.user-profile-shell .status-chip {
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
}
.user-profile-shell .status-active {
border-color: rgba(52, 199, 89, 0.5);
background: rgba(52, 199, 89, 0.12);
color: #5eff9e;
}
.user-profile-shell .status-inactive {
border-color: rgba(255, 69, 58, 0.5);
background: rgba(255, 69, 58, 0.12);
color: #ff8a82;
}
.user-profile-shell .status-verified {
border: none;
background: transparent;
padding: 0 4px;
font-size: 14px;
}
.user-profile-shell .hero-title .ui-chip, .user-profile-shell .hero-title .ui-table .risk-badge, .user-profile-shell .hero-title .premium-table .risk-badge, .user-profile-shell .hero-title .glass-table .risk-badge, .ui-table .user-profile-shell .hero-title .risk-badge, .premium-table .user-profile-shell .hero-title .risk-badge, .glass-table .user-profile-shell .hero-title .risk-badge {
min-height: 24px;
border-radius: var(--ui-radius-md);
font-size: 10px;
font-weight: var(--ui-font-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.user-profile-shell .profile-chip {
line-height: 1;
}
.user-profile-shell .profile-chip--icon mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.user-profile-shell .profile-chip--code {
font-family: var(--ui-font-mono);
color: var(--ui-info);
}
.user-profile-shell .meta-item--balance {
cursor: pointer;
}
.user-profile-shell .meta-item--disabled {
cursor: default;
}
.user-profile-shell .meta-value--warning {
color: var(--ui-warning);
}
.user-profile-shell .meta-value--success {
color: var(--ui-success);
}
.user-profile-shell .meta-value--settled {
color: var(--ui-text-muted);
}
.user-profile-shell .meta-value--inline {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
}
.user-profile-shell .nps-category {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.user-profile-shell .profile-icon--info {
color: var(--ui-info);
}
.user-profile-shell .profile-icon--accent {
color: var(--ui-brand-light);
}
.user-profile-shell .profile-icon--warning {
color: var(--ui-warning);
}
.user-profile-shell .profile-icon--orange {
color: var(--ui-brand);
}
.user-profile-shell .profile-icon--pink {
color: #f472b6;
}
.user-profile-shell .profile-icon--success {
color: var(--ui-success);
}
.user-profile-shell .profile-icon--danger {
color: var(--ui-danger);
}
.user-profile-shell .finance-rows--divided {
margin-top: var(--ui-space-3);
padding-top: var(--ui-space-3);
border-top: 1px solid var(--ui-border-light);
}
.user-profile-shell .finance-row__value--warning {
color: var(--ui-warning);
}
.user-profile-shell .finance-row__value--success {
color: var(--ui-success);
}
.user-profile-shell .finance-row__value--danger {
color: var(--ui-danger);
}
.user-profile-shell .finance-row__value--strong {
font-weight: var(--ui-font-bold);
}
.user-profile-shell .finance-row__note {
margin-left: var(--ui-space-1);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
opacity: 0.7;
}
.user-profile-shell .badge-business {
border-color: rgba(245, 158, 11, 0.55);
background: rgba(245, 158, 11, 0.14);
color: #fbbf24;
}
.user-profile-shell .badge-individual {
border-color: rgba(139, 92, 246, 0.5);
background: rgba(139, 92, 246, 0.12);
color: #c4b5fd;
}
.user-profile-shell .hero-meta {
margin-top: 16px;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.user-profile-shell .meta-item {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 100px;
}
.user-profile-shell .meta-item label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
}
.user-profile-shell .meta-value {
font-size: 16px;
font-weight: 600;
color: var(--glass-text-primary, #f8f8ff);
}
.user-profile-shell .meta-divider {
padding-left: 20px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.user-profile-shell .stat-cards-row--compact {
margin-top: 16px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.user-profile-shell .hero-category-floating {
display: flex;
align-items: center;
}
.user-profile-shell .category-select {
width: auto;
min-width: 220px;
}
.user-profile-shell .category-select .mat-mdc-text-field-wrapper {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 999px !important;
padding: 6px 16px !important;
min-height: auto !important;
height: auto !important;
transition: all 0.2s ease !important;
}
.user-profile-shell .category-select .mat-mdc-text-field-wrapper:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.user-profile-shell .category-select .mat-mdc-form-field-flex {
min-height: auto !important;
height: auto !important;
align-items: center !important;
padding: 0 !important;
}
.user-profile-shell .category-select .mat-mdc-form-field-infix {
padding: 4px 0 !important;
min-height: auto !important;
border-top: 0 !important;
width: auto !important;
}
.user-profile-shell .category-select .mdc-text-field {
background: transparent !important;
}
.user-profile-shell .category-select .mdc-notched-outline,
.user-profile-shell .category-select .mdc-line-ripple {
display: none !important;
}
.user-profile-shell .category-select .mat-mdc-select-value {
color: #fff;
font-weight: 600;
font-size: 13px;
text-align: center;
}
.user-profile-shell .category-select .mat-mdc-select-arrow {
color: rgba(255, 255, 255, 0.7);
}
.user-profile-shell .category-select .mat-mdc-form-field-subscript-wrapper {
display: none !important;
}
.user-profile-shell .overview-grid {
display: flex;
flex-direction: column;
gap: 28px;
width: 100%;
min-width: 0;
}
.user-profile-shell .overview-counts {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.user-profile-shell .overview-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.user-profile-shell .overview-section__title {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
margin: 0;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.user-profile-shell .overview-panels {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
width: 100%;
min-width: 0;
}
@media (max-width: 768px) {
.user-profile-shell .overview-panels {
grid-template-columns: 1fr;
}
}
.user-profile-shell .summary-panel {
min-width: 0;
box-sizing: border-box;
padding: 24px 28px;
border-radius: var(--ui-radius-xl, 16px);
}
.user-profile-shell .summary-panel--operational {
display: flex;
flex-direction: column;
}
.user-profile-shell .summary-panel__title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
margin: 0;
}
.user-profile-shell .summary-panel__title mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
opacity: 0.6;
}
.user-profile-shell .summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
.user-profile-shell .summary-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 172px;
padding: 24px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.04);
transition: all 0.2s ease;
}
.user-profile-shell .summary-cell:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
}
.user-profile-shell .summary-cell mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.user-profile-shell .summary-cell__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.user-profile-shell .summary-cell__value {
font-size: 22px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
letter-spacing: -0.02em;
}
.user-profile-shell .summary-empty {
display: flex;
flex: 1;
min-height: 220px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.1);
text-align: center;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
}
.user-profile-shell .summary-empty mat-icon {
flex: 0 0 auto;
font-size: 24px;
width: 24px;
height: 24px;
color: rgba(255, 255, 255, 0.45);
}
.user-profile-shell .summary-empty p {
margin: 0;
font-size: 14px;
font-weight: 500;
color: inherit;
}
.user-profile-shell .finance-rows {
display: flex;
flex-direction: column;
gap: 0;
}
.user-profile-shell .finance-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-width: 0;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.user-profile-shell .finance-row:last-child {
border-bottom: none;
}
.user-profile-shell .finance-row--net {
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: none;
}
.user-profile-shell .finance-row__label {
display: flex;
align-items: center;
min-width: 0;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
}
.user-profile-shell .finance-row__label mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.user-profile-shell .finance-row__value {
flex: 0 1 auto;
min-width: 0;
overflow-wrap: anywhere;
text-align: right;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--glass-text-primary, #f8f8ff);
}
.user-profile-shell .finance-row__value.receivable {
color: #4ade80;
}
.user-profile-shell .finance-row__value.payable {
color: #f87171;
}
.user-profile-shell .overdue-warning {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
margin-top: 4px;
border-radius: 12px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.2);
font-size: 12px;
font-weight: 600;
color: #fbbf24;
}
.user-profile-shell .overdue-warning mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #fbbf24;
}
.user-profile-shell .overdue-clear {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
margin-top: 4px;
border-radius: 12px;
background: rgba(74, 222, 128, 0.06);
border: 1px solid rgba(74, 222, 128, 0.15);
font-size: 12px;
font-weight: 600;
color: rgba(74, 222, 128, 0.8);
}
.user-profile-shell .overdue-clear mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #4ade80;
}
.user-profile-shell .finance-scope-label {
margin-left: auto;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
padding: 2px 8px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.user-profile-shell .ltv-scope-badge {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 2px 8px;
border-radius: 6px;
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.3);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #c4b5fd;
vertical-align: middle;
}
.user-profile-shell .finance-group-panel {
margin-top: 16px;
padding: 14px;
border-radius: 14px;
background: rgba(139, 92, 246, 0.05);
border: 1px solid rgba(139, 92, 246, 0.18);
animation: fadeInSlide 0.25s ease-out;
}
@keyframes fadeInSlide {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.user-profile-shell .finance-group-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.85);
}
.user-profile-shell .finance-group-header mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #a78bfa;
}
.user-profile-shell .crm-badge {
margin-left: auto;
padding: 2px 9px;
border-radius: 6px;
background: rgba(139, 92, 246, 0.12);
border: 1px solid rgba(139, 92, 246, 0.25);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(167, 139, 250, 0.8);
white-space: nowrap;
}
.user-profile-shell .finance-split-row {
margin-bottom: 10px;
}
.user-profile-shell .finance-split-row:last-of-type {
margin-bottom: 0;
}
.user-profile-shell .finance-split-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 6px;
}
.user-profile-shell .finance-split-cols {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
.user-profile-shell .finance-split-col {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.user-profile-shell .finance-split-col .col-title {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
}
.user-profile-shell .finance-split-col .col-val {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.85);
/* amber = informational, not yours to collect */
}
.user-profile-shell .finance-split-col .col-val.receivable {
color: #4ade80;
}
.user-profile-shell .finance-split-col .col-val.col-val--other {
color: #fbbf24;
}
.user-profile-shell .finance-split-col--total {
background: rgba(139, 92, 246, 0.06);
border-color: rgba(139, 92, 246, 0.15);
}
.user-profile-shell .finance-split-col--total .col-val {
color: #c4b5fd;
}
.user-profile-shell .finance-group-note {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 10px 0 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
line-height: 1.5;
}
.user-profile-shell .finance-group-note mat-icon {
font-size: 13px;
width: 13px;
height: 13px;
flex-shrink: 0;
margin-top: 1px;
color: rgba(167, 139, 250, 0.5);
}
.user-profile-shell .profile-tabs {
margin-top: 24px;
padding: 24px 28px 32px;
}
.user-profile-shell .card-collection {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding: 8px 0;
}
.user-profile-shell .collection-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: all 0.2s ease;
}
.user-profile-shell .collection-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.user-profile-shell .vehicle-card .vehicle-media {
width: 100%;
height: 110px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.user-profile-shell .vehicle-card .vehicle-media img {
max-width: 90%;
max-height: 85px;
object-fit: contain;
}
.user-profile-shell .vehicle-card .vehicle-info {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
flex: 1;
}
.user-profile-shell .collection-card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.user-profile-shell .collection-card .card-title {
font-size: 14px;
font-weight: 600;
color: var(--glass-text-primary, #f8f8ff);
margin-bottom: 0;
line-height: 1.3;
min-height: 36px;
}
.user-profile-shell .collection-card .card-meta {
font-size: 12px;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
margin-top: auto;
padding-top: 10px;
font-family: var(--ui-font-mono);
letter-spacing: 0.05em;
}
.user-profile-shell .eyebrow.tiny {
font-size: 9px;
margin-bottom: 4px;
}
.user-profile-shell .booking-list {
display: flex;
flex-direction: column;
border-radius: var(--ui-radius-lg);
overflow: hidden;
}
.user-profile-shell .booking-list__header,
.user-profile-shell .booking-list__row {
display: grid;
grid-template-columns: 120px 110px 1fr 130px 100px 80px 120px;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
}
.user-profile-shell .booking-list__header {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ui-text-muted);
border-bottom: 1px solid var(--ui-border-light);
background: var(--ui-surface-1);
}
.user-profile-shell .booking-list__row {
width: 100%;
border: none;
background: transparent;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
border-bottom: 1px solid var(--ui-border-light);
transition: background 0.15s ease;
}
.user-profile-shell .booking-list__row:last-child {
border-bottom: none;
}
.user-profile-shell .booking-list__row:hover {
background: var(--ui-surface-hover);
}
.user-profile-shell .booking-list__col {
display: flex;
align-items: center;
gap: var(--ui-space-2);
min-width: 0;
}
.user-profile-shell .booking-list__col--car {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.user-profile-shell .booking-list__col--amount {
gap: var(--ui-space-2);
justify-content: flex-end;
text-align: right;
}
.user-profile-shell .booking-list__col--payment {
justify-content: center;
}
.user-profile-shell .booking-list__col--status {
justify-content: center;
}
.user-profile-shell .booking-list__id {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-text-secondary);
letter-spacing: 0.02em;
}
.user-profile-shell .booking-list__date-icon {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
color: var(--ui-brand-light);
}
.user-profile-shell .booking-list__car-name {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.user-profile-shell .booking-list__car-reg {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
font-family: var(--ui-font-mono);
letter-spacing: 0.04em;
}
.user-profile-shell .booking-list__amount {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.user-profile-shell .booking-list .status-completed {
border-color: rgba(52, 199, 89, 0.4);
background: rgba(52, 199, 89, 0.1);
color: #5eff9e;
}
.user-profile-shell .booking-list .status-job-open {
border-color: rgba(100, 149, 237, 0.4);
background: rgba(100, 149, 237, 0.1);
color: #a6c8ff;
}
.user-profile-shell .booking-list .status-confirmed {
border-color: rgba(255, 159, 10, 0.4);
background: rgba(255, 159, 10, 0.1);
color: #ffc870;
}
.user-profile-shell .booking-list .status-closed {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
}
.user-profile-shell .branch-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.06);
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
letter-spacing: 0.01em;
}
.user-profile-shell .branch-badge--profile {
background: rgba(56, 189, 248, 0.1);
border-color: rgba(56, 189, 248, 0.2);
color: rgba(125, 211, 252, 0.9);
max-width: none;
gap: 4px;
}
.user-profile-shell .branch-badge--profile mat-icon, .user-profile-shell .branch-badge--profile .branch-badge-icon {
font-size: 13px !important;
width: 13px !important;
height: 13px !important;
color: rgba(56, 189, 248, 0.7);
}
.user-profile-shell .meta-item--branches {
align-items: flex-start;
}
.user-profile-shell .meta-item--branches label {
margin-top: 3px;
}
.user-profile-shell .meta-value--branches {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 340px;
}
.user-profile-shell .lead-timeline {
padding: 8px 0;
}
.user-profile-shell .timeline-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
margin-bottom: 20px;
}
.user-profile-shell .timeline-track {
position: relative;
padding-left: 32px;
}
.user-profile-shell .timeline-track::before {
content: "";
position: absolute;
left: 11px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, rgba(255, 87, 34, 0.5), rgba(255, 87, 34, 0.1));
}
.user-profile-shell .timeline-entry {
position: relative;
margin-bottom: 24px;
cursor: pointer;
}
.user-profile-shell .timeline-point {
position: absolute;
left: -32px;
top: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.user-profile-shell .timeline-point span {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--glass-primary, #FF5722);
box-shadow: 0 0 12px rgba(255, 87, 34, 0.5);
}
.user-profile-shell .timeline-card {
padding: 16px;
border-radius: 14px;
}
.user-profile-shell .timeline-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.user-profile-shell .timeline-card-header small {
font-size: 12px;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
}
.user-profile-shell .timeline-card-body {
font-size: 14px;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
}
.user-profile-shell .timeline-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
margin-bottom: 8px;
}
.user-profile-shell .timeline-meta mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.user-profile-shell .timeline-text {
margin: 0;
line-height: 1.5;
}
.user-profile-shell .table-wrapper {
overflow-x: auto;
}
.user-profile-shell .table-grid {
width: 100%;
border-collapse: collapse;
}
.user-profile-shell .table-grid thead {
background: rgba(255, 255, 255, 0.06);
}
.user-profile-shell .table-grid th {
padding: 14px 16px;
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.user-profile-shell .table-grid td {
padding: 14px 16px;
font-size: 14px;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.user-profile-shell .table-grid tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
}
.user-profile-shell .table-grid tbody tr:last-child td {
border-bottom: none;
}
.user-profile-shell .job-cl {
color: #6ea8fe;
}
.user-profile-shell .sale-cl {
color: #7ee094;
}
.user-profile-shell .cash-cl {
color: #ffc870;
}
.user-profile-shell .txn-table-wrapper {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.15);
}
.user-profile-shell .txn-table {
width: 100%;
border-collapse: collapse;
}
.user-profile-shell .txn-table thead {
background: rgba(255, 255, 255, 0.04);
}
.user-profile-shell .txn-table th {
padding: 10px 14px;
text-align: left;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.user-profile-shell .txn-table th.text-right {
text-align: right;
}
.user-profile-shell .txn-table .col-date {
width: 70px;
}
.user-profile-shell .txn-table .col-details {
width: auto;
min-width: 180px;
}
.user-profile-shell .txn-table .col-type {
width: 130px;
}
.user-profile-shell .txn-table .col-amount {
width: 120px;
}
.user-profile-shell .txn-table .col-balance {
width: 120px;
}
.user-profile-shell .txn-row {
transition: background 0.15s ease;
}
.user-profile-shell .txn-row:hover {
background: rgba(255, 255, 255, 0.03);
}
.user-profile-shell .txn-table td {
padding: 10px 14px;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
}
.user-profile-shell .txn-table td.text-right {
text-align: right;
}
.user-profile-shell .txn-row:last-child td {
border-bottom: none;
}
.user-profile-shell .date-cell {
display: flex;
flex-direction: column;
gap: 1px;
}
.user-profile-shell .date-day {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.user-profile-shell .date-year {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
.user-profile-shell .details-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.user-profile-shell .bill-id {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.user-profile-shell .payment-mode {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.user-profile-shell .txn-badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
}
.user-profile-shell .txn-badge.txn-sale {
background: rgba(52, 199, 89, 0.12);
color: #4ade80;
}
.user-profile-shell .txn-badge.txn-payment-in {
background: rgba(52, 199, 89, 0.12);
color: #4ade80;
}
.user-profile-shell .txn-badge.txn-purchase {
background: rgba(59, 130, 246, 0.12);
color: #93c5fd;
}
.user-profile-shell .txn-badge.txn-payment-out {
background: rgba(251, 146, 60, 0.12);
color: #fdba74;
}
.user-profile-shell .txn-badge.txn-cancelled {
background: rgba(239, 68, 68, 0.12);
color: #fca5a5;
}
.user-profile-shell .amount-value {
font-size: 12px;
font-weight: 500;
}
.user-profile-shell .amount-credit {
color: #4ade80;
}
.user-profile-shell .amount-debit {
color: #f87171;
}
.user-profile-shell .balance-chip {
display: inline-block;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.04);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.user-profile-shell .empty-table-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
text-align: center;
}
.user-profile-shell .empty-table-state mat-icon {
font-size: 32px;
width: 32px;
height: 32px;
color: rgba(255, 255, 255, 0.15);
margin-bottom: 10px;
}
.user-profile-shell .empty-table-state p {
font-size: 13px;
color: rgba(255, 255, 255, 0.35);
margin: 0;
}
.user-profile-shell .empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
}
.user-profile-shell .empty-state mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
color: rgba(255, 255, 255, 0.2);
margin-bottom: 16px;
}
.user-profile-shell .empty-state p {
font-size: 14px;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
margin: 0;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
}
.user-profile-shell .skeleton-line,
.user-profile-shell .skeleton-pill {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.04) 100%);
background-size: 200% 100%;
border-radius: 6px;
height: 14px;
}
.user-profile-shell .skeleton-line.shimmer,
.user-profile-shell .skeleton-pill.shimmer,
.user-profile-shell .shimmer {
animation: shimmer 1.2s ease-in-out infinite;
}
.user-profile-shell .skeleton-pill {
border-radius: 999px;
height: 28px;
}
.user-profile-shell .skeleton-line.w-small {
width: 60px;
}
.user-profile-shell .skeleton-line.w-medium {
width: 120px;
}
.user-profile-shell .skeleton-line.w-large {
width: 200px;
}
.user-profile-shell .skeleton-pill.w-small {
width: 80px;
}
.user-profile-shell .skeleton-pill.w-medium {
width: 120px;
}
.user-profile-shell .skeleton-grid {
display: grid;
gap: 20px;
padding: 8px 0;
}
.user-profile-shell .card-collection.skeleton-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.user-profile-shell .collection-card.skeleton-card {
min-height: 170px;
cursor: default;
}
.user-profile-shell .collection-card.skeleton-card:hover {
transform: none;
box-shadow: none;
}
.user-profile-shell .skeleton-card .skeleton-media {
height: 110px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
background-size: 200% 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.user-profile-shell .skeleton-card .skeleton-info {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.user-profile-shell .booking-grid.skeleton-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.user-profile-shell .booking-card.skeleton-card {
min-height: 140px;
gap: 16px;
cursor: default;
}
.user-profile-shell .booking-card.skeleton-card:hover {
transform: none;
background: rgba(255, 255, 255, 0.03);
}
.user-profile-shell .skeleton-timeline {
padding: 8px 0;
padding-left: 32px;
}
.user-profile-shell .skeleton-timeline .skeleton-entry {
margin-bottom: 24px;
padding: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
}
.user-profile-shell .skeleton-avatar {
width: 72px;
height: 72px;
border-radius: 20px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
.user-profile-shell .skeleton-edit {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
.user-profile-shell .skeleton-hero-actions {
display: flex;
gap: 12px;
}
.user-profile-shell .skeleton-hero-copy {
display: flex;
flex-direction: column;
gap: 10px;
}
.user-profile-shell .skeleton-meta-row {
display: flex;
gap: 16px;
margin-top: 12px;
}
.user-profile-shell .skeleton-meta-grid {
display: flex;
gap: 24px;
margin-top: 16px;
}
.user-profile-shell .skeleton-meta-card {
display: flex;
flex-direction: column;
gap: 6px;
}
.user-profile-shell .skeleton-stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.user-profile-shell .skeleton-card {
padding: 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
gap: 8px;
}
.user-profile-shell .skeleton-tabs-shell {
margin-top: 24px;
padding: 24px 28px;
}
.user-profile-shell .skeleton-tab-row {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
.user-profile-shell .skeleton-panel {
padding: 16px 0;
}
.user-profile-shell .skeleton-panel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.user-profile-shell .skeleton-panel-card {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.03);
overflow: hidden;
}
.user-profile-shell .skeleton-media {
height: 100px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
background-size: 200% 100%;
}
.user-profile-shell .skeleton-media.shimmer {
animation: shimmer 1.2s ease-in-out infinite;
}
.user-profile-shell .skeleton-info {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.user-profile-shell .skeleton-table td {
padding: 16px;
}
.user-profile-shell .load-more-container {
display: flex;
justify-content: center;
padding: 24px 0;
}
.user-profile-shell .loading-more {
display: flex;
justify-content: center;
padding: 20px 0;
}
.user-profile-shell .loading-more .skeleton-line {
animation: shimmer 1s ease-in-out infinite;
}
@media (max-width: 768px) {
.user-profile-shell .skeleton-stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.user-profile-shell .skeleton-panel-grid {
grid-template-columns: repeat(2, 1fr);
}
.user-profile-shell .profile-hero {
padding: 20px;
}
.user-profile-shell .hero-main {
flex-direction: column;
align-items: center;
text-align: center;
}
.user-profile-shell .hero-meta {
justify-content: center;
}
.user-profile-shell .hero-stats {
grid-template-columns: repeat(2, 1fr);
}
.user-profile-shell .hero-actions {
position: static;
justify-content: center;
margin-bottom: 16px;
}
.user-profile-shell.modal-mode .hero-actions {
right: auto;
}
.user-profile-shell .card-collection,
.user-profile-shell .booking-grid {
grid-template-columns: 1fr;
}
.user-profile-shell .skeleton-stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.user-profile-shell .skeleton-panel-grid {
grid-template-columns: 1fr;
}
}
.user-profile-shell .glass-date-panel.mat-mdc-select-panel {
background: linear-gradient(145deg, rgba(40, 30, 35, 0.95), rgba(30, 22, 28, 0.98)) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
border-radius: 20px !important;
padding: 10px !important;
}
.user-profile-shell .glass-date-panel .mat-mdc-option {
background: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 10px 16px !important;
border-radius: 999px !important;
margin-bottom: 4px !important;
min-height: 40px !important;
transition: all 0.15s ease !important;
}
.user-profile-shell .glass-date-panel .mat-mdc-option:hover {
background: rgba(255, 255, 255, 0.08) !important;
color: #fff !important;
}
.user-profile-shell .glass-date-panel .mat-mdc-option.mdc-list-item--selected {
background: rgba(255, 87, 34, 0.2) !important;
color: #fff !important;
font-weight: 600 !important;
}
.user-profile-shell .glass-date-panel .mat-pseudo-checkbox {
display: none !important;
}
.user-profile-shell .statement-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.user-profile-shell .summary-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.user-profile-shell .summary-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.12;
z-index: 0;
transition: opacity 0.3s ease;
}
.user-profile-shell .summary-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.user-profile-shell .summary-card:hover::before {
opacity: 0.2;
}
.user-profile-shell .gradient-green::before {
background: linear-gradient(135deg, #34c759, #30d158);
}
.user-profile-shell .gradient-blue::before {
background: linear-gradient(135deg, #007aff, #5ac8fa);
}
.user-profile-shell .gradient-orange::before {
background: linear-gradient(135deg, #ff9500, #ff6b00);
}
.user-profile-shell .gradient-purple::before {
background: linear-gradient(135deg, #af52de, #bf5af2);
}
.user-profile-shell .summary-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
flex-shrink: 0;
}
.user-profile-shell .gradient-green .summary-icon {
background: linear-gradient(135deg, rgba(52, 199, 89, 0.25), rgba(48, 209, 88, 0.15));
border: 1px solid rgba(52, 199, 89, 0.35);
}
.user-profile-shell .gradient-green .summary-icon mat-icon {
color: #5eff9e;
}
.user-profile-shell .gradient-blue .summary-icon {
background: linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(90, 200, 250, 0.15));
border: 1px solid rgba(0, 122, 255, 0.35);
}
.user-profile-shell .gradient-blue .summary-icon mat-icon {
color: #6eb5ff;
}
.user-profile-shell .gradient-orange .summary-icon {
background: linear-gradient(135deg, rgba(255, 149, 0, 0.25), rgba(255, 107, 0, 0.15));
border: 1px solid rgba(255, 149, 0, 0.35);
}
.user-profile-shell .gradient-orange .summary-icon mat-icon {
color: #ffc870;
}
.user-profile-shell .gradient-purple .summary-icon {
background: linear-gradient(135deg, rgba(175, 82, 222, 0.25), rgba(191, 90, 242, 0.15));
border: 1px solid rgba(175, 82, 222, 0.35);
}
.user-profile-shell .gradient-purple .summary-icon mat-icon {
color: #d8a6ff;
}
.user-profile-shell .summary-icon mat-icon {
font-size: 24px;
width: 24px;
height: 24px;
}
.user-profile-shell .summary-content {
display: flex;
flex-direction: column;
gap: 4px;
z-index: 1;
}
.user-profile-shell .summary-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
}
.user-profile-shell .summary-value {
font-size: 22px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
letter-spacing: -0.02em;
}
.user-profile-shell .balance-highlight {
background: linear-gradient(135deg, #ff9966, #ff6b8a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.user-profile-shell .statement-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.user-profile-shell .info-card {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
overflow: hidden;
transition: all 0.2s ease;
}
.user-profile-shell .info-card:hover {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
}
.user-profile-shell .info-card-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.user-profile-shell .info-card-header mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #ff9966;
}
.user-profile-shell .info-card-header span {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
}
.user-profile-shell .info-card-body {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.user-profile-shell .info-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.user-profile-shell .info-label {
font-size: 12px;
font-weight: 500;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
flex-shrink: 0;
}
.user-profile-shell .info-value {
font-size: 13px;
font-weight: 500;
color: var(--glass-text-primary, #f8f8ff);
text-align: right;
word-break: break-word;
}
.user-profile-shell .info-value.mono {
font-family: var(--ui-font-mono);
font-size: 12px;
letter-spacing: 0.03em;
color: #a8d8ea;
}
.user-profile-shell .metrics-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.user-profile-shell .metric-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
font-size: 13px;
font-weight: 500;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
transition: all 0.2s ease;
}
.user-profile-shell .metric-chip:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
.user-profile-shell .metric-chip mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.5);
}
.user-profile-shell .statement-actions {
display: flex;
gap: 12px;
padding-top: 8px;
}
.user-profile-shell .action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: var(--glass-text-primary, #f8f8ff);
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
}
.user-profile-shell .action-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.user-profile-shell .action-btn.primary {
background: linear-gradient(135deg, rgba(255, 87, 34, 0.2), rgba(255, 120, 70, 0.12));
border-color: rgba(255, 87, 34, 0.4);
}
.user-profile-shell .action-btn.primary:hover {
background: linear-gradient(135deg, rgba(255, 87, 34, 0.3), rgba(255, 120, 70, 0.2));
border-color: rgba(255, 87, 34, 0.6);
box-shadow: 0 8px 24px rgba(255, 87, 34, 0.2);
}
.user-profile-shell .action-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.user-profile-shell .statement-skeleton {
padding: 8px 0;
}
.user-profile-shell .summary-cards-skeleton {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.user-profile-shell .skeleton-summary-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.03);
}
.user-profile-shell .skeleton-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 16px 0;
}
.user-profile-shell .info-skeleton {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.03);
}
.user-profile-shell .statement-summary-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 24px;
margin-bottom: 16px;
border-radius: 12px !important;
box-shadow: none !important;
}
.user-profile-shell .stats-row {
display: flex;
align-items: center;
gap: 0;
flex: 1;
}
.user-profile-shell .inline-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 0 20px;
}
.user-profile-shell .inline-stat .stat-icon-label {
display: flex;
align-items: center;
gap: 6px;
}
.user-profile-shell .inline-stat:first-child {
padding-left: 0;
}
.user-profile-shell .inline-stat:last-child {
padding-right: 0;
}
.user-profile-shell .txn-stat-icon {
font-size: 16px;
width: 16px;
height: 16px;
opacity: 0.9;
}
.user-profile-shell .txn-stat-icon.sale {
color: #4ade80;
}
.user-profile-shell .txn-stat-icon.purchase {
color: #f87171;
}
.user-profile-shell .txn-stat-icon.payment-in {
color: #60a5fa;
}
.user-profile-shell .txn-stat-icon.payment-out {
color: #fb923c;
}
.user-profile-shell .inline-stat-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.user-profile-shell .inline-stat-value {
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.user-profile-shell .inline-stat-value.sale {
color: #4ade80;
}
.user-profile-shell .inline-stat-value.purchase {
color: #f87171;
}
.user-profile-shell .inline-stat-value.payment-in {
color: #60a5fa;
}
.user-profile-shell .inline-stat-value.payment-out {
color: #fb923c;
}
.user-profile-shell .stat-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
}
.user-profile-shell .balance-section {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
padding: 16px 24px;
margin-left: 20px;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(74, 222, 128, 0.08) 0%, rgba(74, 222, 128, 0.02) 100%);
border-left: 2px solid rgba(74, 222, 128, 0.3);
border-radius: 0 8px 8px 0;
}
.user-profile-shell .balance-section.payable {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.08) 0%, rgba(248, 113, 113, 0.02) 100%);
border-left-color: rgba(248, 113, 113, 0.3);
}
.user-profile-shell .balance-label-row {
display: flex;
align-items: center;
gap: 6px;
}
.user-profile-shell .balance-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: rgba(74, 222, 128, 0.9);
}
.user-profile-shell .balance-section.payable .balance-icon {
color: rgba(248, 113, 113, 0.9);
}
.user-profile-shell .balance-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(74, 222, 128, 0.9);
}
.user-profile-shell .balance-amount {
font-size: 26px;
font-weight: 800;
color: #4ade80;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.user-profile-shell .balance-section.payable .balance-label {
color: rgba(248, 113, 113, 0.8);
}
.user-profile-shell .balance-section.payable .balance-amount {
color: #f87171;
}
.user-profile-shell .view-ledger-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 14px;
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 20px;
background: rgba(74, 222, 128, 0.1);
color: #4ade80;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.user-profile-shell .view-ledger-btn mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.user-profile-shell .view-ledger-btn:hover {
background: rgba(74, 222, 128, 0.2);
border-color: rgba(74, 222, 128, 0.5);
transform: translateY(-1px);
}
.user-profile-shell .balance-section.payable .view-ledger-btn {
border-color: rgba(248, 113, 113, 0.3);
background: rgba(248, 113, 113, 0.1);
color: #f87171;
}
.user-profile-shell .balance-section.payable .view-ledger-btn:hover {
background: rgba(248, 113, 113, 0.2);
border-color: rgba(248, 113, 113, 0.5);
}
.user-profile-shell .stats-row-spacer {
flex: 1;
}
.user-profile-shell .view-ledger-btn.stats-row-btn {
margin-left: auto;
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.8);
}
.user-profile-shell .view-ledger-btn.stats-row-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
@media (max-width: 900px) {
.user-profile-shell .statement-summary-card {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.user-profile-shell .stats-row {
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.user-profile-shell .stat-divider {
display: none;
}
.user-profile-shell .inline-stat {
padding: 8px 12px;
}
.user-profile-shell .balance-section {
padding-left: 0;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
align-items: center;
}
}
@media (max-width: 480px) {
.user-profile-shell .statement-summary-card {
padding: 16px;
}
.user-profile-shell .balance-amount {
font-size: 24px;
}
.user-profile-shell .inline-stat-value {
font-size: 14px;
}
}
.user-profile-shell .table-wrapper {
overflow-x: auto;
margin-bottom: 16px;
}
.user-profile-shell .txn-type-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.user-profile-shell .txn-sale {
color: #4ade80;
background: rgba(74, 222, 128, 0.12);
}
.user-profile-shell .txn-payment-in {
color: #22d3ee;
background: rgba(34, 211, 238, 0.12);
}
.user-profile-shell .txn-cancelled {
color: #f87171;
background: rgba(248, 113, 113, 0.12);
}
.user-profile-shell .txn-purchase {
color: #facc15;
background: rgba(250, 204, 21, 0.12);
}
.user-profile-shell .txn-payment-out {
color: #fb923c;
background: rgba(251, 146, 60, 0.12);
}
.user-profile-shell .balance-value {
font-weight: 600;
color: var(--glass-text-primary, #f8f8ff);
}
.user-profile-shell .txn-details-badge {
font-weight: 500;
}
.user-profile-shell .cc-txn-value {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.user-profile-shell .cc-txn-value.credit {
color: #60a5fa;
}
.user-profile-shell .cc-txn-value.debit {
color: rgba(255, 255, 255, 0.9);
}
.user-profile-shell .empty-row td {
padding: 48px 24px;
}
.user-profile-shell .empty-table-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.4));
}
.user-profile-shell .empty-table-state mat-icon {
font-size: 40px;
width: 40px;
height: 40px;
opacity: 0.5;
}
.user-profile-shell .empty-table-state p {
margin: 0;
font-size: 14px;
}
.user-profile-shell .load-more-container {
display: flex;
justify-content: center;
padding: 20px 32px 24px;
}
.user-profile-shell .loading-more {
display: flex;
justify-content: center;
padding: 16px;
}
.user-profile-shell .statement-header-skeleton {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 32px;
padding: 24px 28px;
margin-bottom: 20px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.user-profile-shell .skeleton-party-name {
width: 200px;
height: 32px;
border-radius: 8px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
.user-profile-shell .skeleton-stats-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.user-profile-shell .skeleton-balance {
width: 180px;
height: 48px;
border-radius: 8px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
.user-profile-shell .skeleton-table-header {
height: 48px;
border-radius: 8px 8px 0 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
margin-bottom: 2px;
}
.user-profile-shell .skeleton-table-rows {
border-radius: 0 0 16px 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.15);
}
.user-profile-shell .skeleton-table-row {
display: grid;
grid-template-columns: 60px 140px 120px 100px 130px 110px 100px 100px 120px;
gap: 12px;
padding: 14px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.user-profile-shell .skeleton-table-row:last-child {
border-bottom: none;
}
@media (max-width: 1024px) {
.user-profile-shell .statement-header {
grid-template-columns: 1fr;
gap: 20px;
}
.user-profile-shell .statement-header-right {
border-left: none;
padding-left: 0;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
align-items: flex-start;
}
.user-profile-shell .statement-table-wrapper {
margin: 0 -16px;
border-radius: 0;
border-left: none;
border-right: none;
}
}
@media (max-width: 768px) {
.user-profile-shell .statement-header {
padding: 20px;
}
.user-profile-shell .party-name {
font-size: 1.4rem;
}
.user-profile-shell .receivable-value {
font-size: 1.6rem;
}
.user-profile-shell .statement-table {
font-size: 12px;
}
.user-profile-shell .statement-table th,
.user-profile-shell .statement-table td {
padding: 10px 8px;
}
.user-profile-shell .col-mode,
.user-profile-shell .col-txn {
display: none;
}
.user-profile-shell .skeleton-table-row {
grid-template-columns: 40px 100px 80px 80px 80px 80px;
}
}
@media (max-width: 480px) {
.user-profile-shell .statement-header-center {
gap: 4px;
}
.user-profile-shell .stat-row {
flex-direction: column;
gap: 2px;
}
.user-profile-shell .stat-label {
min-width: auto;
font-size: 11px;
}
}
.user-profile-shell .package-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
padding: 8px 0;
}
.user-profile-shell .package-card {
background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
color: inherit;
text-align: left;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.user-profile-shell .package-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
background: rgba(255, 255, 255, 0.1);
}
.user-profile-shell .pkg-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.user-profile-shell .pkg-title-group {
flex: 1;
min-width: 0;
}
.user-profile-shell .pkg-name {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
line-height: 1.3;
}
.user-profile-shell .pkg-short-id {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
border-radius: 5px;
vertical-align: middle;
color: #ffab70;
background: rgba(255, 152, 0, 0.12);
border: 1px solid rgba(255, 152, 0, 0.25);
}
.user-profile-shell .pkg-vehicle {
margin: 6px 0 0;
font-size: 14px;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
}
.user-profile-shell .pkg-vehicle span {
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
}
.user-profile-shell .pkg-amount-badge {
font-size: 16px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
flex-shrink: 0;
}
.user-profile-shell .pkg-status-badge {
padding: 4px 12px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
}
.user-profile-shell .pkg-status-badge.small {
padding: 3px 10px;
font-size: 9px;
}
.user-profile-shell .pkg-status-badge.status-active {
border-color: rgba(52, 199, 89, 0.5);
background: rgba(52, 199, 89, 0.12);
color: #5eff9e;
}
.user-profile-shell .pkg-status-badge.status-expired {
border-color: rgba(255, 69, 58, 0.5);
background: rgba(255, 69, 58, 0.12);
color: #ff8a82;
}
.user-profile-shell .pkg-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.user-profile-shell .pkg-service-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.user-profile-shell .service-header {
display: flex;
align-items: center;
gap: 8px;
}
.user-profile-shell .service-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #ff5722;
}
.user-profile-shell .service-name {
font-size: 13px;
font-weight: 600;
color: var(--glass-text-primary, #f8f8ff);
}
.user-profile-shell .service-usage {
font-size: 12px;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.72));
}
.user-profile-shell .service-progress {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.user-profile-shell .service-progress .progress-bar {
height: 100%;
background: linear-gradient(90deg, #ff5722, #ff7a3d);
border-radius: 2px;
transition: width 0.5s ease;
}
.user-profile-shell .pkg-summary {
padding: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
.user-profile-shell .pkg-amount {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-profile-shell .amount-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
}
.user-profile-shell .amount-value {
font-size: 18px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
}
.user-profile-shell .pkg-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.user-profile-shell .validity-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.user-profile-shell .validity-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.5));
}
.user-profile-shell .validity-date {
font-size: 14px;
font-weight: 600;
color: var(--glass-text-primary, #f8f8ff);
}
.user-profile-shell .days-left {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
}
.user-profile-shell .days-left mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.user-profile-shell .days-left.urgent {
color: #ffd639;
}
.user-profile-shell .pkg-overall-progress {
display: flex;
align-items: center;
gap: 10px;
padding: 0 2px;
}
.user-profile-shell .overall-bar {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
overflow: hidden;
}
.user-profile-shell .overall-fill {
height: 100%;
background: linear-gradient(90deg, #4ade80, #22c55e);
border-radius: 2px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-profile-shell .overall-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
font-weight: 500;
}
.user-profile-shell .validity-label.expiry-urgent {
color: #f87171 !important;
font-weight: 700;
animation: expiryPulse 2s ease-in-out infinite;
}
@keyframes expiryPulse {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
@media (max-width: 768px) {
.user-profile-shell .package-grid {
grid-template-columns: 1fr;
}
.user-profile-shell .pkg-services-grid {
grid-template-columns: 1fr;
}
.user-profile-shell .package-card {
padding: 20px;
}
}
.user-profile-shell .crm-timeline {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding: 8px 0;
}
.user-profile-shell .crm-timeline::before {
content: "";
position: absolute;
left: 22px;
top: 32px;
bottom: 32px;
width: 2px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
border-radius: 1px;
}
.user-profile-shell .timeline-event {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 12px 8px;
border-radius: 12px;
transition: background 0.2s ease;
position: relative;
}
.user-profile-shell .timeline-event:hover {
background: rgba(255, 255, 255, 0.04);
}
.user-profile-shell .timeline-event__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
position: relative;
}
.user-profile-shell .event-emoji {
font-size: 17px;
line-height: 1;
}
.user-profile-shell .timeline-event__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 2px;
}
.user-profile-shell .timeline-event__header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.user-profile-shell .timeline-event__title {
font-size: 14px;
font-weight: 600;
color: var(--glass-text-primary, #f8f8ff);
line-height: 1.3;
}
.user-profile-shell .timeline-event__desc {
margin: 0;
font-size: 13px;
color: var(--glass-text-secondary, rgba(255, 255, 255, 0.65));
line-height: 1.4;
}
.user-profile-shell .timeline-event__footer {
display: flex;
align-items: center;
gap: 16px;
margin-top: 2px;
}
.user-profile-shell .timeline-event__amount {
font-size: 14px;
font-weight: 700;
color: #4ade80;
font-variant-numeric: tabular-nums;
}
.user-profile-shell .timeline-event__date {
font-size: 12px;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.4));
}
.user-profile-shell .event-booking .timeline-event__icon {
border-color: rgba(96, 165, 250, 0.35);
background: rgba(96, 165, 250, 0.1);
}
.user-profile-shell .event-success .timeline-event__icon {
border-color: rgba(74, 222, 128, 0.35);
background: rgba(74, 222, 128, 0.1);
}
.user-profile-shell .event-invoice .timeline-event__icon {
border-color: rgba(251, 146, 60, 0.35);
background: rgba(251, 146, 60, 0.1);
}
.user-profile-shell .event-danger .timeline-event__icon {
border-color: rgba(248, 113, 113, 0.35);
background: rgba(248, 113, 113, 0.1);
}
.user-profile-shell .event-payment .timeline-event__icon {
border-color: rgba(52, 211, 153, 0.35);
background: rgba(52, 211, 153, 0.1);
}
.user-profile-shell .event-payment .timeline-event__amount {
color: #34d399;
}
.user-profile-shell .event-lead .timeline-event__icon {
border-color: rgba(167, 139, 250, 0.35);
background: rgba(167, 139, 250, 0.1);
}
.user-profile-shell .event-vehicle .timeline-event__icon {
border-color: rgba(96, 165, 250, 0.35);
background: rgba(96, 165, 250, 0.1);
}
.user-profile-shell .event-nps .timeline-event__icon {
border-color: rgba(250, 204, 21, 0.4);
background: rgba(250, 204, 21, 0.1);
}
.user-profile-shell .event-sale .timeline-event__icon {
border-color: rgba(74, 222, 128, 0.3);
background: rgba(74, 222, 128, 0.08);
}
.user-profile-shell .event-estimate .timeline-event__icon {
border-color: rgba(34, 211, 238, 0.3);
background: rgba(34, 211, 238, 0.08);
}
.user-profile-shell .event-package .timeline-event__icon {
border-color: rgba(167, 139, 250, 0.35);
background: rgba(167, 139, 250, 0.1);
}
.user-profile-shell .event-claim .timeline-event__icon {
border-color: rgba(251, 191, 36, 0.35);
background: rgba(251, 191, 36, 0.08);
}
.user-profile-shell .event-reward .timeline-event__icon {
border-color: rgba(250, 204, 21, 0.3);
background: rgba(250, 204, 21, 0.08);
}
.user-profile-shell .event-purchase .timeline-event__icon {
border-color: rgba(148, 163, 184, 0.35);
background: rgba(148, 163, 184, 0.08);
}
.user-profile-shell .timeline-date-group {
padding: 12px 8px 4px;
margin-left: 52px;
position: relative;
z-index: 2;
}
.user-profile-shell .timeline-date-group__label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.45));
padding: 3px 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.user-profile-shell .event-danger .timeline-event__amount {
color: #f87171;
}
.user-profile-shell .timeline-skeleton {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 0;
}
.user-profile-shell .timeline-skeleton-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 12px 8px;
}
.user-profile-shell .skeleton-circle {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
.user-profile-shell .skeleton-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
}
@media (max-width: 768px) {
.user-profile-shell .crm-timeline::before {
left: 18px;
}
.user-profile-shell .timeline-event {
gap: 12px;
padding: 10px 4px;
}
.user-profile-shell .timeline-event__icon {
width: 32px;
height: 32px;
}
.user-profile-shell .event-emoji {
font-size: 15px;
}
.user-profile-shell .timeline-event__title {
font-size: 13px;
}
.user-profile-shell .timeline-event__desc {
font-size: 12px;
}
}
.user-profile-shell .badge-employee {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(139, 92, 246, 0.12)) !important;
border-color: rgba(167, 139, 250, 0.4) !important;
color: #c4b5fd !important;
}
.user-profile-shell .payroll-history-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.user-profile-shell .payroll-history-row {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
transition: background 0.2s ease;
}
.user-profile-shell .payroll-history-row:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}
.user-profile-shell .payroll-history-row__period {
min-width: 64px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.user-profile-shell .payroll-history-row__period .period-month {
font-size: 14px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.user-profile-shell .payroll-history-row__period .period-year {
font-size: 11px;
color: var(--glass-text-muted, rgba(255, 255, 255, 0.4));
}
.user-profile-shell .payroll-history-row__status {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.user-profile-shell .payroll-history-row__amount {
font-size: 14px;
font-weight: 700;
color: var(--glass-text-primary, #f8f8ff);
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 80px;
}
.user-profile-shell .status-paid {
background: rgba(74, 222, 128, 0.12) !important;
color: #4ade80 !important;
border: 1px solid rgba(74, 222, 128, 0.25);
}
.user-profile-shell .status-finalized {
background: rgba(96, 165, 250, 0.12) !important;
color: #60a5fa !important;
border: 1px solid rgba(96, 165, 250, 0.25);
}
.user-profile-shell .status-draft {
background: rgba(251, 191, 36, 0.12) !important;
color: #fbbf24 !important;
border: 1px solid rgba(251, 191, 36, 0.25);
}
.user-profile-shell .acct-posted {
background: rgba(74, 222, 128, 0.1) !important;
color: #4ade80 !important;
border: 1px solid rgba(74, 222, 128, 0.2);
}
.user-profile-shell .acct-failed {
background: rgba(248, 113, 113, 0.12) !important;
color: #f87171 !important;
border: 1px solid rgba(248, 113, 113, 0.3);
}
.user-profile-shell .acct-partial {
background: rgba(251, 191, 36, 0.1) !important;
color: #fbbf24 !important;
border: 1px solid rgba(251, 191, 36, 0.2);
}
.user-profile-shell .deductions-breakdown .finance-row {
padding: 3px 0;
}
.user-profile-shell .deductions-breakdown .finance-row__label {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
.user-profile-shell .deductions-breakdown .finance-row__value {
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.user-profile-shell .ledger-filter-tabs .ui-btn--primary {
background: rgba(96, 165, 250, 0.15);
border-color: rgba(96, 165, 250, 0.4);
color: #93c5fd;
}
.user-profile-shell .meta-item--balance .meta-value {
transition: opacity 120ms ease;
text-decoration-line: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
}
.user-profile-shell .meta-item--balance:hover .meta-value {
opacity: 0.8;
}
/* ==========================================================================
UI PAGES - SETTINGS PAGE LAYOUT CONTRACT
==========================================================================
SCOPED LAYOUT-ONLY contract for /console/account-settings
ALLOWED: display, grid, flex, gap, padding, margin, position, width
FORBIDDEN: background, color, border, shadow, radius (use UI contracts)
Root selector: .settings-page
========================================================================== */
/* ==========================================================================
PAGE CONTAINER
========================================================================== */
.settings-page {
display: block;
position: relative;
min-height: 100vh;
padding: 0 0 88px;
}
.settings-page > .container-fluid {
max-width: 1560px;
padding: 28px 32px 0;
}
/* Row wrapper for 2-column layout */
.settings-page .settings-layout {
display: flex;
flex-wrap: nowrap;
gap: 24px;
align-items: start;
margin-left: 0;
margin-right: 0;
}
/* ==========================================================================
SIDEBAR COLUMN (Fixed)
========================================================================== */
.settings-page .settings-layout__sidebar {
position: sticky;
top: 12px;
z-index: 10;
align-self: flex-start;
flex: 0 0 286px;
width: 286px;
max-width: 286px;
min-width: 0;
padding-left: 0;
padding-right: 0;
}
/* ==========================================================================
CONTENT COLUMN
========================================================================== */
.settings-page .settings-layout__content {
flex: 1 1 auto;
min-width: 0;
min-height: 320px;
width: min(100%, 100% - 310px);
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* Remove Bootstrap tab-content padding and borders */
.settings-page .tab-content {
padding: 0;
margin: 0;
border: none;
}
/* ==========================================================================
SIDEBAR NAVIGATION LAYOUT
========================================================================== */
.settings-page .settings-sidebar {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
position: sticky;
top: 12px;
max-height: calc(100vh - 24px);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 52px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 24px;
}
.settings-page .settings-sidebar::-webkit-scrollbar {
width: 6px;
}
.settings-page .settings-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.settings-page .settings-sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 999px;
}
.settings-page .settings-sidebar__header {
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 4px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.settings-page .settings-sidebar__eyebrow,
.settings-page .settings-page-header__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 190, 145, 0.82);
}
.settings-page .settings-sidebar__title {
margin: 0;
max-width: 100%;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.96);
overflow-wrap: normal;
word-break: normal;
}
.settings-page .settings-sidebar__hint {
margin: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.58);
}
.settings-page .sidebar-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.settings-page .settings-nav-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.settings-page .settings-nav-group + .settings-nav-group {
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-page .settings-nav-group__label {
padding: 0 8px 3px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.38);
}
.settings-page .sidebar-nav-item {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 7px 11px;
border-radius: 15px;
background: transparent;
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.72);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.settings-page .sidebar-nav-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.95);
}
.settings-page .sidebar-nav-item.active {
background: linear-gradient(135deg, rgba(255, 120, 80, 0.14), rgba(255, 120, 80, 0.06));
border-color: rgba(255, 140, 96, 0.32);
color: #ffc39f;
position: relative;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.settings-page .sidebar-nav-item mat-icon {
font-size: 17px;
width: 17px;
height: 17px;
min-width: 17px;
color: inherit;
flex-shrink: 0;
}
.settings-page .sidebar-nav-item span {
flex: 1;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Warning badge on sidebar tabs (e.g. Integrations not configured) */
.settings-page .sidebar-nav-item .sidebar-tab-warning {
flex: 0 0 auto;
font-size: 14px;
width: 14px;
height: 14px;
min-width: 14px;
color: var(--ui-warning, #FFCC00);
animation: sidebar-warn-pulse 2s ease-in-out infinite;
}
@keyframes sidebar-warn-pulse {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
/* ==========================================================================
TAB CONTENT LAYOUT
========================================================================== */
.settings-page .settings-tab-content {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Settings content wrapper */
.settings-page .settings-content {
display: flex;
flex-direction: column;
gap: 28px;
min-width: 0;
}
.settings-page .settings-content .ui-card.ui-card--solid, .settings-page .settings-content .glass-modal-container .ui-card--solid.glass-card, .glass-modal-container .settings-page .settings-content .ui-card--solid.glass-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.glass-panel,
.glass-modal-container .settings-page .settings-content .ui-card--solid.glass-panel,
.settings-page .settings-content .glass-modal-container .ui-card--solid.fd-glass,
.glass-modal-container .settings-page .settings-content .ui-card--solid.fd-glass,
.settings-page .settings-content .glass-modal-container .ui-card--solid.section-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.section-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.content-section,
.glass-modal-container .settings-page .settings-content .ui-card--solid.content-section,
.settings-page .settings-content .glass-modal-container .ui-card--solid.timeline-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.timeline-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.entry-section,
.glass-modal-container .settings-page .settings-content .ui-card--solid.entry-section,
.settings-page .settings-content .glass-modal-container .ui-card--solid.attachments,
.glass-modal-container .settings-page .settings-content .ui-card--solid.attachments,
.settings-page .settings-content .glass-modal-container .ui-card--solid.summary-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.summary-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.metric-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.metric-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.review-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.review-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.config-section,
.glass-modal-container .settings-page .settings-content .ui-card--solid.config-section,
.settings-page .settings-content .glass-modal-container .ui-card--solid.panel-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.panel-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 24px 26px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 28px;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* ==========================================================================
SETTINGS HEADER
========================================================================== */
.settings-page .settings-header,
.settings-page .settings-page-header {
margin-bottom: 0;
}
.settings-page .settings-page-header {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: flex-end;
justify-content: flex-start;
gap: 14px;
}
.settings-page .settings-page-header__title-row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.settings-page .settings-page-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 140, 90, 0.18), rgba(255, 140, 90, 0.08));
border: 1px solid rgba(255, 170, 130, 0.2);
color: #ffb48c;
flex-shrink: 0;
}
.settings-page .settings-page-header__icon mat-icon {
font-size: 26px;
width: 26px;
height: 26px;
}
.settings-page .settings-page-header__copy {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.settings-page .settings-page-header__meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
padding-left: 70px;
}
.settings-page .settings-meta-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.settings-page .settings-meta-pill mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: inherit;
}
.settings-page .settings-meta-pill--subtle {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.62);
}
.settings-page .settings-header {
padding: 6px 2px 2px;
}
.settings-page .settings-page-header .settings-title,
.settings-page .settings-header > .settings-title {
margin: 0;
font-size: clamp(32px, 4vw, 44px);
line-height: 0.98;
font-weight: 700;
color: rgba(255, 255, 255, 0.97);
letter-spacing: -0.045em;
}
.settings-page .settings-page-header .settings-subtitle,
.settings-page .settings-header > .settings-subtitle {
margin: 0;
max-width: 100%;
font-size: 15px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-page .section-helper {
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
margin: 0 0 16px 0;
}
/* ==========================================================================
SECTION TITLE LAYOUT
========================================================================== */
.settings-page .glass-section-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 0;
padding-bottom: 14px;
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(90deg, rgba(255, 200, 150, 0.85), rgba(255, 180, 140, 0.6));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-page .glass-section-title mat-icon {
font-size: 17px;
width: 17px;
height: 17px;
color: rgba(255, 180, 130, 0.8);
-webkit-text-fill-color: initial;
}
/* ==========================================================================
FORM LAYOUT
========================================================================== */
.settings-page .glass-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.settings-page .glass-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.settings-page .glass-form-grid.three-col {
grid-template-columns: repeat(3, 1fr);
}
.settings-page .glass-form-grid.four-col {
grid-template-columns: repeat(4, 1fr);
}
.settings-page .glass-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.settings-page .glass-field.full-width {
grid-column: 1/-1;
}
.settings-page .field-hint {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
margin-top: 4px;
font-style: italic;
}
.settings-page .form-actions {
display: flex;
justify-content: flex-start;
margin-top: 4px;
padding-top: 6px;
}
/* ==========================================================================
FORM ROW LEGACY SUPPORT
========================================================================== */
.settings-page .form-group.row {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.settings-page .form-group.row .col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.settings-page .form-group.row .col-form-label {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
/* ==========================================================================
MATERIAL FORM FIELD OVERRIDES
========================================================================== */
.settings-page .mat-mdc-form-field,
.settings-page .glass-form .mat-mdc-form-field {
width: 100%;
}
.settings-page .mat-mdc-text-field-wrapper {
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 16px;
padding: 0 16px;
min-height: 56px;
height: 56px;
transition: all 0.2s ease;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.settings-page .mat-mdc-form-field-flex {
min-height: 56px;
height: 56px;
align-items: center;
}
.settings-page .mat-mdc-form-field-infix {
padding-top: 24px;
padding-bottom: 8px;
min-height: 56px;
height: 56px;
display: flex;
align-items: center;
border-top: 0;
}
.settings-page .mat-mdc-floating-label {
top: 30px;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
font-weight: 400;
}
.settings-page .mat-mdc-floating-label--float-above {
transform: translateY(-120%) scale(0.75);
color: rgba(255, 255, 255, 0.6);
}
.settings-page .mat-mdc-text-field-wrapper:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
}
.settings-page .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 140, 80, 0.45);
box-shadow: 0 0 0 3px rgba(255, 140, 80, 0.12);
}
.settings-page .mat-mdc-input-element {
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 500;
caret-color: #ff8c50;
}
.settings-page .mat-mdc-input-element::placeholder {
color: rgba(255, 255, 255, 0.35);
}
/* Textarea */
.settings-page textarea.mat-mdc-input-element {
min-height: 92px;
resize: vertical;
}
.settings-page .mat-mdc-form-field:has(textarea) .mat-mdc-text-field-wrapper {
height: auto;
min-height: 124px;
padding: 14px 18px;
}
.settings-page .mat-mdc-form-field:has(textarea) .mat-mdc-form-field-flex {
height: auto;
min-height: auto;
align-items: flex-start;
}
.settings-page .mat-mdc-form-field:has(textarea) .mat-mdc-form-field-infix {
height: auto;
min-height: auto;
padding-top: 18px;
}
/* Remove Material underline/ripple */
.settings-page .mdc-line-ripple,
.settings-page .mdc-line-ripple::before,
.settings-page .mdc-line-ripple::after {
display: none;
opacity: 0;
height: 0;
border: none;
background-color: transparent;
}
.settings-page .mdc-text-field--filled::after,
.settings-page .mdc-text-field--filled:not(.mdc-text-field--disabled)::before {
display: none;
border-bottom: none;
}
.settings-page .mdc-notched-outline {
display: none;
}
/* Select styling */
.settings-page .mat-mdc-select-value {
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 500;
}
.settings-page .mat-mdc-select-arrow {
color: rgba(255, 255, 255, 0.5);
}
/* Radio button styling */
.settings-page .mat-mdc-radio-button {
--mdc-radio-unselected-icon-color: rgba(255, 255, 255, 0.5);
--mdc-radio-selected-icon-color: #ff8c50;
--mdc-radio-unselected-hover-icon-color: rgba(255, 255, 255, 0.7);
}
.settings-page .mat-mdc-radio-button .mdc-label {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
}
/* Checkbox styling */
.settings-page .mat-mdc-checkbox {
--mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, 0.4);
--mdc-checkbox-selected-icon-color: #ff8c50;
--mdc-checkbox-selected-checkmark-color: white;
}
/* ==========================================================================
TABLE LAYOUT (Manage Branches)
========================================================================== */
.settings-page .table-responsive {
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
padding: 0;
border: none;
overflow-x: auto;
overflow-y: auto;
}
.settings-page .ui-card.ui-card--solid, .settings-page .glass-modal-container .ui-card--solid.glass-card, .glass-modal-container .settings-page .ui-card--solid.glass-card,
.settings-page .glass-modal-container .ui-card--solid.glass-panel,
.glass-modal-container .settings-page .ui-card--solid.glass-panel,
.settings-page .glass-modal-container .ui-card--solid.fd-glass,
.glass-modal-container .settings-page .ui-card--solid.fd-glass,
.settings-page .glass-modal-container .ui-card--solid.section-card,
.glass-modal-container .settings-page .ui-card--solid.section-card,
.settings-page .glass-modal-container .ui-card--solid.content-section,
.glass-modal-container .settings-page .ui-card--solid.content-section,
.settings-page .glass-modal-container .ui-card--solid.timeline-card,
.glass-modal-container .settings-page .ui-card--solid.timeline-card,
.settings-page .glass-modal-container .ui-card--solid.entry-section,
.glass-modal-container .settings-page .ui-card--solid.entry-section,
.settings-page .glass-modal-container .ui-card--solid.attachments,
.glass-modal-container .settings-page .ui-card--solid.attachments,
.settings-page .glass-modal-container .ui-card--solid.summary-card,
.glass-modal-container .settings-page .ui-card--solid.summary-card,
.settings-page .glass-modal-container .ui-card--solid.metric-card,
.glass-modal-container .settings-page .ui-card--solid.metric-card,
.settings-page .glass-modal-container .ui-card--solid.review-card,
.glass-modal-container .settings-page .ui-card--solid.review-card,
.settings-page .glass-modal-container .ui-card--solid.config-section,
.glass-modal-container .settings-page .ui-card--solid.config-section,
.settings-page .glass-modal-container .ui-card--solid.panel-card,
.glass-modal-container .settings-page .ui-card--solid.panel-card {
border: none;
}
.settings-page .table {
width: 100%;
border-collapse: collapse;
color: rgba(255, 255, 255, 0.85);
background: transparent;
margin: 0;
table-layout: fixed;
}
.settings-page .table thead {
background: rgba(255, 255, 255, 0.04);
position: sticky;
top: 0;
z-index: 1;
}
.settings-page .table thead th {
padding: 10px 8px;
text-align: left;
border: none;
color: rgba(255, 255, 255, 0.65);
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
/* Column widths for branches table */
.settings-page .table thead th:nth-child(1) {
width: 22%;
}
.settings-page .table thead th:nth-child(2) {
width: 12%;
}
.settings-page .table thead th:nth-child(3) {
width: 16%;
}
.settings-page .table thead th:nth-child(4) {
width: 11%;
}
.settings-page .table thead th:nth-child(5) {
width: 7%;
}
.settings-page .table thead th:nth-child(6) {
width: 12%;
}
.settings-page .table thead th:nth-child(7) {
width: 12%;
}
.settings-page .table thead th:nth-child(8) {
width: 8%;
}
.settings-page .table tbody tr {
background: transparent;
transition: background 0.15s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-page .table tbody tr:last-child {
border-bottom: none;
}
.settings-page .table tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
}
.settings-page .table tbody td {
padding: 10px 8px;
border: none;
vertical-align: middle;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
/* ==========================================================================
FRANCHISOR CARD
========================================================================== */
.settings-page .franchisor-card {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.03) 100%);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: 12px;
}
.settings-page .franchisor-badge {
display: flex;
align-items: center;
gap: 10px;
}
.settings-page .franchisor-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fbbf24;
}
.settings-page .franchisor-info {
flex: 1;
}
.settings-page .franchisor-name {
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 2px;
}
.settings-page .franchisor-details {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.settings-page .franchisor-details .divider {
margin: 0 8px;
color: rgba(255, 255, 255, 0.25);
}
.settings-page .franchisor-status .status-active {
font-size: 11px;
font-weight: 700;
color: #4ade80;
letter-spacing: 0.03em;
}
.settings-page .hq-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #1a1a1a;
font-size: 10px;
font-weight: 800;
border-radius: 6px;
letter-spacing: 0.02em;
}
/* ==========================================================================
BRANDING ASSETS LAYOUT
========================================================================== */
.settings-page .branding-assets-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.settings-page .branding-asset-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
.settings-page .asset-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 180, 130, 0.85);
}
.settings-page .asset-header mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.settings-page .asset-content {
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
width: 100%;
}
.settings-page .asset-preview {
position: relative;
width: 140px;
height: 140px;
background: white;
border-radius: 8px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.settings-page .asset-preview.logo-preview {
background: rgba(255, 255, 255, 0.05);
width: 160px;
height: 100px;
}
.settings-page .asset-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.settings-page .asset-delete-btn {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 80, 80, 0.9);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.settings-page .asset-delete-btn:hover {
background: rgb(255, 60, 60);
transform: scale(1.1);
}
.settings-page .asset-delete-btn mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.settings-page .asset-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.4);
}
.settings-page .asset-empty mat-icon {
font-size: 40px;
width: 40px;
height: 40px;
opacity: 0.5;
}
.settings-page .asset-empty span {
font-size: 13px;
}
/* ==========================================================================
GALLERY LAYOUT
========================================================================== */
.settings-page .gal {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 16px;
padding: 8px 0;
}
.settings-page .img-wrap {
position: relative;
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
margin: 0;
}
.settings-page .img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.settings-page .img-wrap .fa-trash {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.9);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
opacity: 0;
transition: opacity 0.2s;
}
.settings-page .img-wrap:hover .fa-trash {
opacity: 1;
}
/* ==========================================================================
TOGGLE SWITCH
========================================================================== */
.settings-page .toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
width: 44px;
height: 24px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.settings-page .toggle-switch .toggle-track {
position: relative;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
transition: background 0.2s;
}
.settings-page .toggle-switch.active .toggle-track {
background: rgba(74, 222, 128, 0.3);
}
.settings-page .toggle-switch .toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
transition: all 0.2s;
}
.settings-page .toggle-switch.active .toggle-thumb {
left: 22px;
background: #4ade80;
}
/* ==========================================================================
GLASS PANEL (for nested sections)
========================================================================== */
.settings-page .glass-panel {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
/* ==========================================================================
EMPTY STATE
========================================================================== */
.settings-page .fd-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
}
.settings-page .fd-empty-state p {
margin: 0;
font-size: 14px;
}
/* ==========================================================================
EXPENSE SETTINGS TAB
========================================================================== */
.settings-page .policy-summary-panel {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 12px 14px;
}
.settings-page .summary-header {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.settings-page .summary-header .summary-title {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.settings-page .summary-header .expand-icon {
margin-left: auto;
color: rgba(255, 255, 255, 0.75);
}
.settings-page .summary-content {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 8px 16px;
}
.settings-page .summary-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.settings-page .summary-item .summary-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 170, 120, 0.95);
}
.settings-page .summary-item .summary-value {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}
.settings-page .summary-item .summary-value.enabled {
color: rgba(130, 245, 180, 0.95);
}
.settings-page .audit-hint {
grid-column: 1/-1;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.78);
margin-top: 6px;
}
.settings-page .test-flow-section {
display: flex;
align-items: center;
gap: 12px;
margin: -2px 0 2px;
}
.settings-page .test-flow-btn {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
border: 1px solid rgba(255, 165, 110, 0.38);
background: rgba(255, 165, 110, 0.12);
color: #ffb789;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.settings-page .test-flow-btn:hover {
background: rgba(255, 165, 110, 0.2);
border-color: rgba(255, 165, 110, 0.55);
color: #ffd5b9;
}
.settings-page .test-flow-hint {
font-size: 14px;
color: rgba(255, 255, 255, 0.72);
}
.settings-page .section-description {
margin: 0 0 14px;
color: rgba(255, 255, 255, 0.74);
font-size: 14px;
line-height: 1.45;
}
.settings-page .compact-info-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.settings-page .compact-info-bar {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.9);
}
.settings-page .compact-info-bar.admin {
border-color: rgba(120, 205, 255, 0.28);
background: rgba(120, 205, 255, 0.09);
}
.settings-page .compact-info-bar.warning {
border-color: rgba(255, 182, 84, 0.32);
background: rgba(255, 182, 84, 0.11);
color: rgba(255, 222, 182, 0.94);
}
.settings-page .compact-info-bar .info-icon-sm {
font-size: 16px;
width: 16px;
height: 16px;
opacity: 0.9;
}
.settings-page .workflow-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.settings-page .workflow-steps {
display: flex;
align-items: stretch;
gap: 12px;
flex-wrap: wrap;
}
.settings-page .workflow-step {
flex: 1 1 290px;
min-width: 280px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 10px 12px;
transition: all 0.2s ease;
}
.settings-page .workflow-step.submitter {
border-color: rgba(255, 173, 117, 0.28);
background: linear-gradient(145deg, rgba(255, 173, 117, 0.12), rgba(255, 173, 117, 0.05));
}
.settings-page .workflow-step.disabled {
opacity: 0.58;
}
.settings-page .step-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.settings-page .step-number {
width: 22px;
height: 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
.settings-page .step-role {
font-size: 17px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.settings-page .role-badge,
.settings-page .inactive-badge {
margin-left: auto;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
.settings-page .role-badge.submitter-badge {
border: 1px solid rgba(255, 173, 117, 0.38);
color: rgba(255, 208, 178, 0.96);
background: rgba(255, 173, 117, 0.14);
}
.settings-page .role-badge.approver-badge {
border: 1px solid rgba(255, 166, 102, 0.38);
color: rgba(255, 185, 130, 0.98);
background: rgba(255, 166, 102, 0.14);
}
.settings-page .inactive-badge {
border: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.62);
background: rgba(255, 255, 255, 0.05);
}
.settings-page .locked-indicator mat-icon {
font-size: 17px;
width: 17px;
height: 17px;
color: rgba(255, 255, 255, 0.65);
}
.settings-page .step-header .toggle-switch.small {
margin-left: 8px;
width: 40px;
height: 22px;
}
.settings-page .step-header .toggle-switch.small .toggle-thumb {
width: 18px;
height: 18px;
}
.settings-page .step-header .toggle-switch.small.active .toggle-thumb {
left: 20px;
}
.settings-page .step-details {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
.settings-page .submitter-note {
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.settings-page .step-option {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
}
.settings-page .step-option input[type=checkbox] {
width: 15px;
height: 15px;
margin: 0;
accent-color: #3b82f6;
}
.settings-page .step-escalation {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: rgba(255, 255, 255, 0.77);
}
.settings-page .step-escalation input[type=number] {
width: 56px;
height: 30px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
text-align: center;
font-weight: 600;
padding: 0 6px;
}
.settings-page .step-escalation input[type=number]:focus {
outline: none;
border-color: rgba(255, 166, 102, 0.6);
box-shadow: 0 0 0 2px rgba(255, 166, 102, 0.18);
}
.settings-page .escalation-hint {
color: rgba(255, 210, 180, 0.9);
font-size: 13px;
font-weight: 500;
}
.settings-page .workflow-connector {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
width: 24px;
color: rgba(255, 255, 255, 0.6);
}
.settings-page .workflow-connector mat-icon {
font-size: 22px;
width: 22px;
height: 22px;
}
.settings-page .workflow-preview {
border: 1px dashed rgba(255, 255, 255, 0.17);
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 10px 12px;
}
.settings-page .workflow-preview .preview-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 180, 130, 0.88);
margin-bottom: 7px;
}
.settings-page .preview-chain {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.settings-page .preview-step {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
padding: 5px 10px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.settings-page .preview-step.submitter {
border-color: rgba(255, 173, 117, 0.34);
background: rgba(255, 173, 117, 0.12);
}
.settings-page .preview-step .preview-action {
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
font-size: 12px;
}
.settings-page .preview-step mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
opacity: 0.7;
}
.settings-page .no-approvers {
display: inline-flex;
align-items: center;
gap: 4px;
color: rgba(255, 165, 110, 0.9);
font-weight: 600;
}
.settings-page .role-legend {
margin-top: 2px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 10px;
}
.settings-page .role-legend .legend-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 180, 130, 0.86);
margin-bottom: 8px;
}
.settings-page .legend-items {
display: grid;
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 8px 14px;
}
.settings-page .legend-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
}
.settings-page .legend-item .legend-role {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.settings-page .legend-item .legend-desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.66);
}
.settings-page .legend-item.admin {
border-color: rgba(120, 205, 255, 0.24);
background: rgba(120, 205, 255, 0.08);
}
.settings-page .expense-settings-tab {
gap: 22px;
}
.settings-page .expense-settings-tab .ui-card.ui-card--solid, .settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.glass-card, .glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.glass-card,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.glass-panel,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.glass-panel,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.fd-glass,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.fd-glass,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.section-card,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.section-card,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.content-section,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.content-section,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.timeline-card,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.timeline-card,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.entry-section,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.entry-section,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.attachments,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.attachments,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.summary-card,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.summary-card,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.metric-card,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.metric-card,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.review-card,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.review-card,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.config-section,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.config-section,
.settings-page .expense-settings-tab .glass-modal-container .ui-card--solid.panel-card,
.glass-modal-container .settings-page .expense-settings-tab .ui-card--solid.panel-card {
gap: 20px;
}
.settings-page .expense-settings-tab .settings-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.settings-page .expense-settings-tab .setting-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 18px 20px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)), rgba(12, 12, 18, 0.18);
}
.settings-page .expense-settings-tab .setting-row.full-width {
align-items: flex-start;
}
.settings-page .expense-settings-tab .setting-row.setting-row-highlight {
border-color: rgba(255, 160, 108, 0.18);
background: radial-gradient(circle at top right, rgba(255, 160, 108, 0.12), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), rgba(12, 12, 18, 0.2);
}
.settings-page .expense-settings-tab .setting-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.settings-page .expense-settings-tab .setting-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
line-height: 1.35;
font-weight: 600;
color: rgba(255, 255, 255, 0.94);
}
.settings-page .expense-settings-tab .setting-desc {
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.62);
}
.settings-page .expense-settings-tab .info-icon {
font-size: 17px;
width: 17px;
height: 17px;
color: rgba(255, 196, 150, 0.78);
flex-shrink: 0;
}
.settings-page .expense-settings-tab .limit-input {
display: grid;
grid-template-columns: auto minmax(110px, 1fr);
align-items: center;
gap: 10px;
min-width: 184px;
height: 52px;
padding: 0 16px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)), rgba(18, 18, 24, 0.34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.settings-page .expense-settings-tab .limit-input .currency {
font-size: 18px;
font-weight: 700;
line-height: 1;
color: rgba(255, 196, 150, 0.94);
}
.settings-page .expense-settings-tab .limit-input input {
width: 100%;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: rgba(255, 255, 255, 0.96);
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 0;
box-shadow: none;
appearance: textfield;
-moz-appearance: textfield;
}
.settings-page .expense-settings-tab .limit-input input::-webkit-outer-spin-button,
.settings-page .expense-settings-tab .limit-input input::-webkit-inner-spin-button {
margin: 0;
appearance: none;
-webkit-appearance: none;
}
.settings-page .expense-settings-tab .limit-input input::placeholder {
color: rgba(255, 255, 255, 0.34);
}
.settings-page .expense-settings-tab .category-exception-note,
.settings-page .expense-settings-tab .compliance-hint,
.settings-page .expense-settings-tab .hierarchy-hint,
.settings-page .expense-settings-tab .budget-reset-info {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(255, 188, 120, 0.16);
background: rgba(255, 188, 120, 0.07);
font-size: 13px;
line-height: 1.55;
color: rgba(255, 227, 197, 0.88);
}
.settings-page .expense-settings-tab .category-exception-note mat-icon,
.settings-page .expense-settings-tab .compliance-hint mat-icon,
.settings-page .expense-settings-tab .hierarchy-hint mat-icon,
.settings-page .expense-settings-tab .budget-reset-info mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: rgba(255, 190, 126, 0.96);
flex-shrink: 0;
}
.settings-page .expense-settings-tab .approval-limits-table,
.settings-page .expense-settings-tab .budget-controls-table,
.settings-page .expense-settings-tab .categories-container {
display: flex;
flex-direction: column;
gap: 14px;
}
.settings-page .expense-settings-tab .limits-header,
.settings-page .expense-settings-tab .limit-row {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(140px, 0.7fr) 104px;
align-items: center;
gap: 14px;
}
.settings-page .expense-settings-tab .limits-header {
padding: 0 16px;
}
.settings-page .expense-settings-tab .limits-header .header-col,
.settings-page .expense-settings-tab .budget-header .header-col {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 190, 150, 0.74);
}
.settings-page .expense-settings-tab .limit-row {
padding: 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)), rgba(10, 10, 16, 0.14);
}
.settings-page .expense-settings-tab .role-name,
.settings-page .expense-settings-tab .category-name {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: rgba(255, 255, 255, 0.94);
}
.settings-page .expense-settings-tab .limit-value,
.settings-page .expense-settings-tab .budget-amount {
font-size: 14px;
font-weight: 700;
color: rgba(255, 222, 186, 0.96);
}
.settings-page .expense-settings-tab .unlimited-badge,
.settings-page .expense-settings-tab .overspend-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.88);
}
.settings-page .expense-settings-tab .overspend-action.warning {
border-color: rgba(255, 194, 92, 0.26);
background: rgba(255, 194, 92, 0.1);
color: rgba(255, 220, 172, 0.95);
}
.settings-page .expense-settings-tab .overspend-action.hard-stop {
border-color: rgba(255, 120, 100, 0.24);
background: rgba(255, 120, 100, 0.1);
color: rgba(255, 194, 184, 0.95);
}
.settings-page .expense-settings-tab .limit-actions,
.settings-page .expense-settings-tab .budget-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.settings-page .expense-settings-tab .limit-actions.readonly {
justify-content: flex-start;
}
.settings-page .expense-settings-tab .action-btn,
.settings-page .expense-settings-tab .chip-edit,
.settings-page .expense-settings-tab .chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
transition: all 0.2s ease;
}
.settings-page .expense-settings-tab .action-btn:hover,
.settings-page .expense-settings-tab .chip-edit:hover,
.settings-page .expense-settings-tab .chip-remove:hover {
border-color: rgba(255, 168, 120, 0.26);
background: rgba(255, 168, 120, 0.1);
color: rgba(255, 222, 196, 0.96);
}
.settings-page .expense-settings-tab .action-btn.delete:hover,
.settings-page .expense-settings-tab .chip-remove:hover {
border-color: rgba(255, 120, 120, 0.28);
background: rgba(255, 120, 120, 0.12);
color: rgba(255, 210, 210, 0.96);
}
.settings-page .expense-settings-tab .action-btn mat-icon,
.settings-page .expense-settings-tab .chip-edit mat-icon,
.settings-page .expense-settings-tab .chip-remove mat-icon,
.settings-page .expense-settings-tab .locked-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.settings-page .expense-settings-tab .add-limit-row,
.settings-page .expense-settings-tab .add-category-row {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(180px, 0.75fr) auto;
align-items: center;
gap: 12px;
padding: 16px;
border-radius: 18px;
border: 1px dashed rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.025);
}
.settings-page .expense-settings-tab .add-category-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.settings-page .expense-settings-tab .compact-input {
width: 100%;
}
.settings-page .expense-settings-tab .compact-input .mat-mdc-form-field-subscript-wrapper {
display: none;
}
.settings-page .expense-settings-tab .add-btn,
.settings-page .expense-settings-tab .add-budget-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 16px;
border: 1px solid rgba(255, 160, 108, 0.24);
border-radius: 14px;
background: rgba(255, 160, 108, 0.12);
color: rgba(255, 221, 196, 0.96);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.settings-page .expense-settings-tab .add-btn:disabled,
.settings-page .expense-settings-tab .add-budget-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.settings-page .expense-settings-tab .add-btn:not(:disabled):hover,
.settings-page .expense-settings-tab .add-budget-btn:not(:disabled):hover {
background: rgba(255, 160, 108, 0.18);
border-color: rgba(255, 160, 108, 0.38);
}
.settings-page .expense-settings-tab .category-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
.settings-page .expense-settings-tab .category-chip {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), rgba(8, 8, 14, 0.16);
}
.settings-page .expense-settings-tab .chip-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.settings-page .expense-settings-tab .chip-name {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.94);
}
.settings-page .expense-settings-tab .chip-meta {
font-size: 12px;
color: rgba(255, 255, 255, 0.56);
}
.settings-page .expense-settings-tab .chip-badges,
.settings-page .expense-settings-tab .suggested-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.settings-page .expense-settings-tab .chip-badge,
.settings-page .expense-settings-tab .suggested-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.settings-page .expense-settings-tab .chip-badge.gst {
border-color: rgba(117, 218, 182, 0.22);
background: rgba(117, 218, 182, 0.1);
color: rgba(182, 246, 226, 0.94);
}
.settings-page .expense-settings-tab .chip-badge.reimburse {
border-color: rgba(120, 190, 255, 0.22);
background: rgba(120, 190, 255, 0.1);
color: rgba(190, 225, 255, 0.95);
}
.settings-page .expense-settings-tab .suggested-categories {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.settings-page .expense-settings-tab .suggested-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 190, 150, 0.76);
}
.settings-page .expense-settings-tab .suggested-chip {
cursor: pointer;
text-transform: none;
letter-spacing: 0.01em;
font-size: 12px;
color: rgba(255, 221, 196, 0.94);
}
.settings-page .expense-settings-tab .suggested-chip mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.settings-page .expense-settings-tab .payment-modes-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.settings-page .expense-settings-tab .mode-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
cursor: pointer;
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
font-weight: 600;
}
.settings-page .expense-settings-tab .mode-checkbox input[type=checkbox] {
width: 16px;
height: 16px;
margin: 0;
accent-color: #ff8c50;
}
.settings-page .expense-settings-tab .mode-checkbox.disabled {
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.025);
}
.settings-page .expense-settings-tab .budget-header,
.settings-page .expense-settings-tab .budget-row {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(130px, 0.7fr) minmax(150px, 0.8fr) 92px 96px;
align-items: center;
gap: 14px;
}
.settings-page .expense-settings-tab .budget-header {
padding: 0 16px;
}
.settings-page .expense-settings-tab .budget-row {
padding: 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)), rgba(10, 10, 16, 0.14);
}
.settings-page .expense-settings-tab .branch-wise {
display: inline-flex;
align-items: center;
justify-content: center;
}
.settings-page .expense-settings-tab .branch-wise mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.64);
}
.settings-page .expense-settings-tab .branch-wise mat-icon:first-child {
color: rgba(124, 230, 168, 0.95);
}
.settings-page .expense-settings-tab .budget-empty {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 16px;
border-radius: 18px;
border: 1px dashed rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
font-size: 13px;
color: rgba(255, 255, 255, 0.66);
}
.settings-page .expense-settings-tab .budget-empty mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: rgba(255, 196, 150, 0.78);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 992px) {
.settings-page > .container-fluid {
padding: 24px 20px 0;
}
.settings-page .settings-layout {
flex-direction: column;
gap: 24px;
}
.settings-page .settings-layout__sidebar {
position: relative;
top: 0;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
}
.settings-page .settings-layout__content {
width: 100%;
}
.settings-page .settings-page-header {
align-items: flex-start;
}
.settings-page .settings-page-header__meta {
justify-content: flex-start;
padding-left: 70px;
}
.settings-page .glass-form-grid.three-col,
.settings-page .glass-form-grid.four-col {
grid-template-columns: repeat(2, 1fr);
}
.settings-page .branding-assets-grid {
grid-template-columns: 1fr;
}
.settings-page .summary-content {
grid-template-columns: 1fr;
}
.settings-page .workflow-steps {
flex-direction: column;
}
.settings-page .workflow-step {
min-width: 100%;
}
.settings-page .workflow-connector {
width: 100%;
justify-content: flex-start;
padding-left: 8px;
}
.settings-page .legend-items {
grid-template-columns: 1fr;
}
.settings-page .expense-settings-tab .limits-header,
.settings-page .expense-settings-tab .budget-header {
display: none;
}
.settings-page .expense-settings-tab .limit-row,
.settings-page .expense-settings-tab .budget-row,
.settings-page .expense-settings-tab .add-limit-row,
.settings-page .expense-settings-tab .category-chip {
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
}
.settings-page .expense-settings-tab .limit-actions,
.settings-page .expense-settings-tab .budget-actions {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.settings-page > .container-fluid {
padding: 20px 16px 0;
}
.settings-page .settings-sidebar {
padding: 12px;
border-radius: 22px;
}
.settings-page .settings-sidebar__header {
padding: 4px 4px 10px;
}
.settings-page .settings-sidebar__hint {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.settings-page .settings-page-header__title-row {
flex-direction: column;
gap: 12px;
}
.settings-page .settings-page-header__meta {
padding-left: 0;
}
.settings-page .settings-page-header__icon {
width: 48px;
height: 48px;
border-radius: 16px;
}
.settings-page .settings-page-header__icon mat-icon {
font-size: 24px;
width: 24px;
height: 24px;
}
.settings-page .settings-page-header .settings-title,
.settings-page .settings-header > .settings-title {
font-size: 30px;
}
.settings-page .settings-page-header .settings-subtitle,
.settings-page .settings-header > .settings-subtitle {
font-size: 14px;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.settings-page .settings-content {
gap: 22px;
}
.settings-page .settings-content .ui-card.ui-card--solid, .settings-page .settings-content .glass-modal-container .ui-card--solid.glass-card, .glass-modal-container .settings-page .settings-content .ui-card--solid.glass-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.glass-panel,
.glass-modal-container .settings-page .settings-content .ui-card--solid.glass-panel,
.settings-page .settings-content .glass-modal-container .ui-card--solid.fd-glass,
.glass-modal-container .settings-page .settings-content .ui-card--solid.fd-glass,
.settings-page .settings-content .glass-modal-container .ui-card--solid.section-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.section-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.content-section,
.glass-modal-container .settings-page .settings-content .ui-card--solid.content-section,
.settings-page .settings-content .glass-modal-container .ui-card--solid.timeline-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.timeline-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.entry-section,
.glass-modal-container .settings-page .settings-content .ui-card--solid.entry-section,
.settings-page .settings-content .glass-modal-container .ui-card--solid.attachments,
.glass-modal-container .settings-page .settings-content .ui-card--solid.attachments,
.settings-page .settings-content .glass-modal-container .ui-card--solid.summary-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.summary-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.metric-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.metric-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.review-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.review-card,
.settings-page .settings-content .glass-modal-container .ui-card--solid.config-section,
.glass-modal-container .settings-page .settings-content .ui-card--solid.config-section,
.settings-page .settings-content .glass-modal-container .ui-card--solid.panel-card,
.glass-modal-container .settings-page .settings-content .ui-card--solid.panel-card {
padding: 20px 18px;
border-radius: 22px;
}
.settings-page .sidebar-nav-item {
min-height: 42px;
padding: 8px 10px;
border-radius: 14px;
}
.settings-page .glass-form-grid,
.settings-page .glass-form-grid.three-col,
.settings-page .glass-form-grid.four-col {
grid-template-columns: 1fr;
}
.settings-page .form-group.row {
flex-direction: column;
align-items: flex-start;
}
.settings-page .form-group.row .col-sm-6 {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
.settings-page .test-flow-section {
flex-direction: column;
align-items: flex-start;
}
.settings-page .step-header {
flex-wrap: wrap;
}
.settings-page .role-badge,
.settings-page .inactive-badge {
margin-left: 0;
}
.settings-page .step-header .toggle-switch.small {
margin-left: auto;
}
.settings-page .expense-settings-tab .setting-row {
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
}
.settings-page .expense-settings-tab .setting-row .toggle-switch,
.settings-page .expense-settings-tab .setting-row .limit-input {
width: 100%;
max-width: 100%;
}
.settings-page .expense-settings-tab .add-category-row {
grid-template-columns: minmax(0, 1fr);
}
.settings-page .expense-settings-tab .category-chips {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
COMMUNICATION SETTINGS — Channel Infrastructure & Routing
==========================================================================
Scoped visuals for /console/settings/communication page.
========================================================================== */
/* Health Dot — green/amber/red/grey */
.settings-page .comm-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.25);
}
.settings-page .comm-dot--healthy {
background: #4ade80;
box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}
.settings-page .comm-dot--degraded {
background: #fbbf24;
box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}
.settings-page .comm-dot--down {
background: #f87171;
box-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
}
.settings-page .comm-dot--unknown {
background: rgba(255, 255, 255, 0.3);
}
/* Channel List */
.settings-page .comm-channel-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 16px;
}
.settings-page .comm-channel-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.15s ease;
}
.settings-page .comm-channel-row:hover {
background: rgba(255, 255, 255, 0.05);
}
.settings-page .comm-channel-row__info {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.settings-page .comm-channel-row__name {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-page .comm-channel-row__meta {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
/* Health Badge */
.settings-page .comm-health-badge {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
padding: 3px 10px;
border-radius: 6px;
flex-shrink: 0;
}
.settings-page .comm-health-badge--healthy {
color: #4ade80;
background: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.2);
}
.settings-page .comm-health-badge--degraded {
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.2);
}
.settings-page .comm-health-badge--down {
color: #f87171;
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.2);
}
.settings-page .comm-health-badge--unknown {
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Empty State */
.settings-page .comm-empty {
text-align: center;
padding: 32px 16px;
}
.settings-page .comm-empty__icon {
font-size: 48px;
width: 48px;
height: 48px;
color: rgba(255, 255, 255, 0.2);
margin-bottom: 16px;
}
.settings-page .comm-empty__title {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 8px 0;
}
.settings-page .comm-empty__steps {
text-align: left;
display: inline-block;
margin: 0 auto 20px;
padding-left: 20px;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
line-height: 2;
}
/* Auto-Config (single channel state) */
.settings-page .comm-auto-config {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 12px;
}
.settings-page .comm-route-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.settings-page .comm-route-row__label {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
min-width: 130px;
}
.settings-page .comm-route-row__value {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.settings-page .comm-route-row__badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #4ade80;
background: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.2);
padding: 2px 8px;
border-radius: 4px;
}
/* Auto-config note */
.settings-page .comm-auto-note {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
background: rgba(74, 222, 128, 0.06);
border: 1px solid rgba(74, 222, 128, 0.15);
font-size: 12px;
color: rgba(74, 222, 128, 0.8);
}
.settings-page .comm-auto-note mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #4ade80;
}
/* Warning Banner (no active channels) */
.settings-page .comm-warning-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 10px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.2);
font-size: 13px;
color: rgba(251, 191, 36, 0.9);
}
.settings-page .comm-warning-banner mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: #fbbf24;
flex-shrink: 0;
}
/* Dropdown Option Dot (inside mat-option) */
.settings-page .comm-option-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.25);
}
/* Field Warning */
.settings-page .field-warning {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 11px;
color: #fbbf24;
}
.settings-page .field-warning mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
color: #fbbf24;
}
/* Communication grid — 2 columns with third spanning full width */
.settings-page .communication-grid {
grid-template-columns: repeat(2, 1fr);
}
/* ==========================================================================
STOCK STATUS RULES TAB
========================================================================== */
.settings-page .stock-rules-description {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
margin: 0 0 20px 0;
}
/* Rule Section — each rule category block */
.settings-page .rule-section {
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-page .rule-section:last-of-type {
border-bottom: none;
}
/* Rule Header — title + tooltip row */
.settings-page .rule-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.settings-page .rule-header .settings-subtitle {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin: 0;
}
/* Status indicator dots */
.settings-page .status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.settings-page .status-indicator.critical {
background: #ef4444;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}
.settings-page .status-indicator.adequate {
background: #fbbf24;
box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}
.settings-page .status-indicator.dead {
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}
.settings-page .status-indicator.out-of-stock {
background: #f97316;
box-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}
/* Rule Tooltip — info icon beside header */
.settings-page .rule-tooltip {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
color: rgba(255, 255, 255, 0.35);
transition: color 0.2s;
flex-shrink: 0;
}
.settings-page .rule-tooltip:hover {
color: rgba(255, 180, 130, 0.8);
}
.settings-page .rule-tooltip mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
/* Inline tooltip — appears next to a field */
.settings-page .inline-tooltip {
margin-top: 4px;
}
/* Rule Helper — description text below header */
.settings-page .rule-helper {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
line-height: 1.5;
margin: 0 0 12px 0;
}
/* Example value — hint below input fields */
.settings-page .example-value {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
margin-top: 4px;
font-style: italic;
}
/* Toggle field within stock rules */
.settings-page .toggle-field {
display: flex;
flex-direction: column;
justify-content: center;
}
.settings-page .toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
.settings-page .toggle-label {
display: flex;
flex-direction: column;
gap: 2px;
}
.settings-page .toggle-title {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}
.settings-page .toggle-hint {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
/* Mat-hint spacing fix inside stock rules */
.settings-page .rule-section .mat-mdc-form-field-subscript-wrapper {
padding: 0;
}
.settings-page .rule-section .mat-mdc-form-field-hint-wrapper {
padding: 0;
}
.settings-page .rule-section .mat-mdc-form-field-bottom-align::before {
height: 4px;
}
/* ==========================================================================
WALLET ENGINE v2 — Programs, Policies, Modals
========================================================================== */
/* Read-only notice (Branch mode) */
.settings-page .wallet-readonly-notice {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border-radius: 12px;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.18);
}
.settings-page .wallet-readonly-notice .notice-icon {
font-size: 28px;
width: 28px;
height: 28px;
color: rgba(96, 165, 250, 0.8);
flex-shrink: 0;
margin-top: 2px;
}
.settings-page .wallet-readonly-notice .notice-content h4 {
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin: 0;
}
/* Status badge */
.settings-page .status-badge {
display: inline-flex;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.settings-page .status-badge.active {
color: #4ade80;
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.2);
}
/* Event type badge */
.settings-page .event-badge {
display: inline-flex;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: rgba(255, 180, 130, 0.9);
background: rgba(255, 173, 117, 0.1);
border: 1px solid rgba(255, 173, 117, 0.2);
}
/* Modal Overlay */
.settings-page .wallet-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
animation: fadeIn 0.18s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Modal Card */
.settings-page .wallet-modal {
width: min(520px, 92vw);
max-height: 85vh;
overflow-y: auto;
border-radius: 16px;
background: linear-gradient(145deg, rgba(30, 30, 38, 0.98), rgba(22, 22, 30, 0.98));
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
padding: 24px;
animation: slideUp 0.22s ease;
}
@keyframes slideUp {
from {
transform: translateY(12px);
opacity: 0.6;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.settings-page .wallet-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.settings-page .wallet-modal-header h3 {
font-size: 17px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin: 0;
}
/* Responsive modal */
@media (max-width: 768px) {
.settings-page .wallet-modal {
width: 96vw;
padding: 16px;
}
}
/* Wallet Policy Status Badge — green dot = active, grey dot = disabled */
.settings-page .wallet-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.5);
transition: all 0.2s ease;
}
.settings-page .wallet-status-badge:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.07);
}
.settings-page .wallet-status-badge .wallet-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: all 0.2s ease;
}
.settings-page .wallet-status-badge.active {
color: #4ade80;
border-color: rgba(74, 222, 128, 0.25);
background: rgba(74, 222, 128, 0.08);
}
.settings-page .wallet-status-badge.active .wallet-status-dot {
background: #4ade80;
box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}
/* ==========================================================================
PEOPLE POLICIES HUB — Attendance, Shift, Payroll Impact
Enterprise-grade collapsible policy section cards
========================================================================== */
/* Each collapsible policy card — overrides ui-card padding for custom header */
.settings-page .policy-section-card.ui-card.ui-card--solid, .settings-page .glass-modal-container .policy-section-card.ui-card--solid.glass-card, .glass-modal-container .settings-page .policy-section-card.ui-card--solid.glass-card,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.glass-panel,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.glass-panel,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.fd-glass,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.fd-glass,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.section-card,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.section-card,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.content-section,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.content-section,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.timeline-card,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.timeline-card,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.entry-section,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.entry-section,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.attachments,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.attachments,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.summary-card,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.summary-card,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.metric-card,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.metric-card,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.review-card,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.review-card,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.config-section,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.config-section,
.settings-page .glass-modal-container .policy-section-card.ui-card--solid.panel-card,
.glass-modal-container .settings-page .policy-section-card.ui-card--solid.panel-card {
padding: 0;
overflow: hidden;
}
/* Clickable section header */
.settings-page .policy-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
cursor: pointer;
border-radius: 16px;
transition: background 0.18s ease;
-webkit-user-select: none;
user-select: none;
}
.settings-page .policy-section-header:hover {
background: rgba(255, 255, 255, 0.03);
}
.settings-page .policy-section-header__left {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 0;
}
/* Section icon circle */
.settings-page .policy-section-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 173, 117, 0.1);
border: 1px solid rgba(255, 173, 117, 0.15);
flex-shrink: 0;
}
.settings-page .policy-section-icon mat-icon {
font-size: 22px;
width: 22px;
height: 22px;
color: rgba(255, 173, 117, 0.85);
}
/* OT icon — changes color when active */
.settings-page .policy-section-icon--ot {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}
.settings-page .policy-section-icon--ot mat-icon {
color: rgba(255, 255, 255, 0.35);
}
.settings-page .policy-section-icon--ot.active {
background: rgba(255, 173, 117, 0.12);
border-color: rgba(255, 173, 117, 0.2);
}
.settings-page .policy-section-icon--ot.active mat-icon {
color: rgba(255, 173, 117, 0.9);
}
/* Title + meta text */
.settings-page .policy-section-title {
display: block;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
line-height: 1.2;
}
.settings-page .policy-section-meta {
display: block;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Active/Disabled status chip inside the section header */
.settings-page .policy-status-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
margin-left: 12px;
transition: all 0.25s ease;
}
.settings-page .policy-status-chip.active {
color: #4ade80;
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.22);
}
/* Animated chevron */
.settings-page .policy-chevron {
font-size: 22px;
width: 22px;
height: 22px;
color: rgba(255, 255, 255, 0.35);
flex-shrink: 0;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-page .policy-chevron.rotated {
transform: rotate(-90deg);
}
/* Collapsible content body */
.settings-page .policy-section-body {
padding: 0 24px 22px;
overflow: hidden;
max-height: 2000px;
opacity: 1;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.25s ease;
}
.settings-page .policy-section-body.collapsed {
max-height: 0;
opacity: 0;
padding-bottom: 0;
}
/* Separator line between header and body */
.settings-page .policy-section-card .policy-section-body:not(.collapsed) {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 20px;
}
/* Muted setting rows — for Coming Soon items */
.settings-page .setting-row--muted {
opacity: 0.45;
pointer-events: none;
}
/* "Coming Soon" pill badge */
.settings-page .coming-soon-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap;
flex-shrink: 0;
}
/* ==========================================================================
PAYROLL POLICIES — Coming Soon Page
========================================================================== */
.settings-page .policy-coming-soon-page {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px 40px;
}
.settings-page .policy-coming-soon__icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 24px;
background: rgba(255, 173, 117, 0.08);
border: 1px solid rgba(255, 173, 117, 0.18);
margin-bottom: 24px;
}
.settings-page .policy-coming-soon__icon mat-icon {
font-size: 36px;
width: 36px;
height: 36px;
color: rgba(255, 173, 117, 0.75);
}
.settings-page .policy-coming-soon__title {
font-size: 26px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 12px 0;
}
.settings-page .policy-coming-soon__subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.45);
line-height: 1.7;
max-width: 520px;
margin: 0 0 40px 0;
}
.settings-page .policy-coming-soon__modules {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 100%;
max-width: 700px;
}
/* Individual future module card */
.settings-page .policy-module-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 20px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
text-align: left;
transition: background 0.2s ease;
}
.settings-page .policy-module-card:hover {
background: rgba(255, 255, 255, 0.04);
}
.settings-page .policy-module-card mat-icon {
font-size: 28px;
width: 28px;
height: 28px;
color: rgba(255, 173, 117, 0.5);
margin-bottom: 4px;
}
.settings-page .policy-module-card__title {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
}
.settings-page .policy-module-card__desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.35);
line-height: 1.5;
}
@media (max-width: 768px) {
.settings-page .policy-coming-soon__modules {
grid-template-columns: 1fr;
}
.settings-page .policy-section-meta {
display: none;
}
.settings-page .policy-section-header {
padding: 16px 18px;
}
.settings-page .policy-section-body {
padding: 0 18px 18px;
}
.settings-page .policy-section-body:not(.collapsed) {
padding-top: 16px;
}
}
/* ==========================================================================
GSTIN VERIFICATION & AUTOFILL (P4)
========================================================================== */
/* Verify button in the mat-form-field suffix */
.settings-page .gstin-verify-btn {
color: #ff8c50 !important;
transition: color 0.2s ease;
}
.settings-page .gstin-verify-btn:hover {
color: #ffb48c !important;
}
/* Verified check icon suffix */
.settings-page .gstin-verified-icon {
color: #4ade80 !important;
font-size: 20px;
width: 20px;
height: 20px;
}
/* Hint colors */
.settings-page .gstin-verified-hint {
color: #4ade80 !important;
}
.settings-page .gstin-error-hint {
color: #f87171 !important;
}
/* Confirmation Modal Overlay */
.gstin-confirm-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
animation: gstin-overlay-in 0.2s ease;
}
@keyframes gstin-overlay-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Modal Card */
.gstin-confirm-modal {
background: linear-gradient(180deg, #1e1e2e, #181825);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 28px;
width: 520px;
max-width: 92vw;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
animation: gstin-modal-in 0.25s ease;
}
@keyframes gstin-modal-in {
from {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Modal Header */
.gstin-confirm-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.gstin-confirm-header h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
}
.gstin-confirm-icon {
font-size: 36px !important;
width: 36px !important;
height: 36px !important;
}
.gstin-confirm-icon.gstin-status--active {
color: #4ade80;
}
.gstin-confirm-icon.gstin-status--inactive {
color: #fbbf24;
}
/* Status Badge */
.gstin-status-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.gstin-status-badge.active {
background: rgba(74, 222, 128, 0.15);
color: #4ade80;
}
.gstin-status-badge.inactive {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
}
/* Modal Body — Field Rows */
.gstin-confirm-body {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 18px;
}
.gstin-field-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gstin-field-row:last-child {
border-bottom: none;
}
.gstin-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
flex-shrink: 0;
width: 110px;
}
.gstin-value {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
text-align: right;
flex: 1;
word-break: break-word;
}
.gstin-value.mono {
font-family: "SF Mono", "Fira Code", monospace;
letter-spacing: 0.04em;
}
/* Warning callout */
.gstin-confirm-warning {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: 12px;
margin-bottom: 16px;
}
.gstin-confirm-warning mat-icon {
color: #fbbf24;
font-size: 20px;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.gstin-confirm-warning span {
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
}
/* Prompt text */
.gstin-confirm-prompt {
font-weight: 600;
font-size: 15px;
color: rgba(255, 255, 255, 0.9);
margin: 8px 0 4px;
}
.gstin-confirm-hint {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
margin: 0 0 18px;
}
/* Action buttons */
.gstin-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* ── Inner layout container ────────────────────────────────────────
Replaces the former .settings-page .settings-content scope.
Provides the standard flex-column layout for stacking cards.
─────────────────────────────────────────────────────────────────── */
.finance-setup-page > .settings-content {
display: flex;
flex-direction: column;
gap: var(--ui-space-7);
min-width: 0;
padding-bottom: 88px;
}
.finance-setup-page .header-card__top {
align-items: flex-start;
}
.finance-setup-page .header-card__title-block {
flex: 1 1 auto;
min-width: 0;
}
.finance-setup-page .header-card__stats {
align-self: flex-start;
}
.finance-setup-page .header-card__bottom {
justify-content: flex-end;
}
.finance-setup-page .header-card__actions {
width: 100%;
justify-content: flex-end;
}
.finance-setup-page__loading-panel {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.finance-setup-page__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.finance-setup-page__panel {
display: flex;
flex-direction: column;
gap: 18px;
min-height: 100%;
}
.finance-setup-page__panel--wide {
grid-column: 1/-1;
}
.finance-setup-page__panel--wide-2 {
grid-column: span 2;
}
.finance-setup-page__panel-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.finance-setup-page__panel-top .glass-section-title {
flex: 1 1 auto;
}
.finance-setup-page__panel-summary {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.68);
}
.finance-setup-page__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.finance-setup-page__panel-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: auto;
}
.finance-setup-page__panel-chip {
display: inline-flex;
align-items: center;
gap: 8px;
}
.finance-setup-page__panel-chip mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.finance-setup-page__status-layout {
display: flex;
flex-direction: column;
gap: 18px;
}
.finance-setup-page__checklist {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.finance-setup-page__checklist-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.finance-setup-page__checklist-item.is-complete {
background: linear-gradient(155deg, rgba(96, 187, 132, 0.08), rgba(255, 255, 255, 0.025));
border-color: rgba(96, 187, 132, 0.22);
}
.finance-setup-page__checklist-item mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.42);
flex-shrink: 0;
}
.finance-setup-page__checklist-item.is-complete mat-icon {
color: rgba(120, 235, 160, 0.92);
}
.finance-setup-page__checklist-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.finance-setup-page__checklist-title {
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
}
.finance-setup-page__checklist-detail {
font-size: 12.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.62);
}
.finance-setup-page__modal-layer {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.finance-setup-page__modal {
width: min(560px, 100vw - 32px);
}
.finance-setup-page__modal-form {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 1280px) {
.finance-setup-page__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.finance-setup-page__panel--wide-2 {
grid-column: 1/-1;
}
.finance-setup-page__checklist {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.finance-setup-page .header-card__actions {
justify-content: flex-start;
flex-wrap: wrap;
}
.finance-setup-page__grid {
grid-template-columns: 1fr;
}
.finance-setup-page__facts {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.finance-setup-page__panel-top {
flex-direction: column;
align-items: flex-start;
}
.finance-setup-page__modal-layer {
padding: 16px;
}
}
.procurement-settings__stat-chip {
margin-top: 8px;
align-self: flex-start;
}
.procurement-settings__policy-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin-top: 16px;
}
.procurement-settings__policy-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border: 1.5px solid var(--ui-border, rgba(255, 255, 255, 0.08));
border-radius: 10px;
background: var(--glass-surface-2, rgba(255, 255, 255, 0.04));
cursor: pointer;
text-align: left;
transition: border-color 0.15s, background 0.15s;
}
.procurement-settings__policy-card:hover {
border-color: var(--ui-accent, rgba(255, 255, 255, 0.2));
background: var(--glass-surface-3, rgba(255, 255, 255, 0.07));
}
.procurement-settings__policy-card.is-selected {
border-color: var(--color-success, #4caf50);
background: rgba(76, 175, 80, 0.08);
}
.procurement-settings__policy-card-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.procurement-settings__policy-icon {
font-size: 22px;
width: 22px;
height: 22px;
color: var(--ui-text-secondary, rgba(255, 255, 255, 0.5));
}
.is-selected .procurement-settings__policy-icon {
color: var(--color-success, #4caf50);
}
.procurement-settings__policy-label {
font-size: 13px;
font-weight: 600;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.9));
}
.procurement-settings__policy-desc {
font-size: 12px;
line-height: 1.5;
color: var(--ui-text-secondary, rgba(255, 255, 255, 0.5));
}
/* ==========================================================================
UI PAGE VARIANT - ORGANIZATION PAGE (Hybrid Model)
==========================================================================
Covers: Departments & Roles tab + Permissions tab
Prefix: org-*
REUSES from existing contracts:
- ui-tabs, ui-tab from controls/tabs.scss
- ui-drawer from layout/drawer.scss
- ui-chip from controls/chips.scss
- ui-card from layout/card.scss
========================================================================== */
/* ==========================================================================
PAGE SHELL
========================================================================== */
.org-shell {
position: relative;
min-height: calc(100vh - 60px);
}
/* Allow role search autocomplete dropdown to overflow the header */
.org-shell .stats-header {
overflow: visible;
position: relative;
z-index: 10;
}
.org-shell .stats-header__filters {
overflow: visible;
}
/* Strip outer page shell when DepartmentsRoles is embedded */
.org-embedded.ui-page {
padding: 0;
min-height: auto;
}
.org-embedded .glass-page-shell {
padding: 0;
min-height: auto;
}
.org-embedded .glass-page-glow {
display: none;
}
.org-tab-shell {
min-height: auto;
padding-top: var(--ui-space-6);
}
.org-tab-content {
max-width: 1280px;
gap: 0;
}
.department-skeleton-host {
display: contents;
}
.department-card-horizontal--skeleton {
cursor: default;
pointer-events: none;
}
.department-card-horizontal--skeleton::before,
.department-card-horizontal--skeleton:hover::before {
opacity: 0;
}
.department-card-horizontal--skeleton:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.08);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.department-title--skeleton {
margin-bottom: 4px;
}
.roles-count--skeleton {
min-width: 82px;
}
.role-chip--skeleton {
cursor: default;
}
.org-skeleton-title {
width: 152px;
height: 20px;
border-radius: 10px;
}
.org-skeleton-lock {
width: 18px;
height: 18px;
border-radius: 6px;
}
.org-skeleton-subtitle {
width: 112px;
height: 12px;
border-radius: 999px;
}
.org-skeleton-pill {
width: 100%;
height: 10px;
border-radius: 999px;
}
.org-skeleton-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.org-skeleton-count {
width: 56px;
height: 24px;
border-radius: 12px;
}
.org-skeleton-count-label {
width: 84px;
height: 10px;
border-radius: 999px;
margin-left: auto;
}
.org-skeleton-role {
width: 64px;
height: 10px;
border-radius: 999px;
}
.org-skeleton-chevron {
width: 24px;
height: 24px;
border-radius: 10px;
}
/* ==========================================================================
ROLE CHIP PERMISSION INDICATORS
========================================================================== */
.org-role-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: var(--ui-transition-base);
white-space: nowrap;
}
.org-role-chip:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.18);
color: var(--ui-text-primary);
transform: translateY(-1px);
}
.org-role-chip--active {
background: rgba(255, 122, 61, 0.12);
border-color: rgba(255, 122, 61, 0.3);
color: #ff9966;
}
.org-perm-indicator {
display: inline-flex;
align-items: center;
font-size: 14px;
line-height: 1;
}
.org-perm-indicator--custom {
color: #64b5f6;
}
.org-perm-indicator--highrisk {
color: var(--ui-danger);
}
/* ==========================================================================
ROLE INFO DRAWER (extends ui-drawer contract)
========================================================================== */
.org-drawer__backdrop {
position: fixed;
inset: 0;
z-index: var(--z-drawer-backdrop);
background: rgba(0, 0, 0, 0.55);
backdrop-filter: var(--ui-blur-sm);
-webkit-backdrop-filter: var(--ui-blur-sm);
animation: ui-drawer-backdrop-in 0.2s ease-out;
}
.org-drawer__panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: var(--z-drawer-panel);
width: 460px;
max-width: 95vw;
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(145deg, rgba(30, 28, 26, 0.96), rgba(22, 20, 18, 0.98));
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-left: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: -8px 0 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: org-drawer-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes org-drawer-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.org-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-5) var(--ui-space-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
.org-drawer__header-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.org-drawer__eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: #ffb37a;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.org-drawer__eyebrow mat-icon,
.org-drawer__eyebrow .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.org-drawer__title {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--ui-text-primary);
letter-spacing: -0.01em;
}
.org-drawer__close {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--ui-transition-base);
}
.org-drawer__close:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.org-drawer__body {
flex: 1;
padding: var(--ui-space-6);
overflow-y: auto;
}
.org-drawer__footer {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-5) var(--ui-space-6);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Drawer summary sections */
.org-drawer-section {
margin-bottom: var(--ui-space-6);
}
.org-drawer-section__title {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 var(--ui-space-3);
}
.org-drawer-stat {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: var(--ui-text-sm);
}
.org-drawer-stat:last-child {
border-bottom: none;
}
.org-drawer-stat__label {
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
gap: 8px;
}
.org-drawer-stat__label mat-icon,
.org-drawer-stat__label .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: rgba(255, 255, 255, 0.35);
}
.org-drawer-stat__value {
font-weight: 600;
color: var(--ui-text-primary);
}
.org-drawer-stat__value--danger {
color: var(--ui-danger);
}
.org-drawer-stat__value--warning {
color: var(--ui-warning);
}
/* Domain pill list */
.org-domain-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--ui-space-2);
}
.org-domain-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
}
.org-domain-pill mat-icon,
.org-domain-pill .mat-icon {
font-size: 13px;
width: 13px;
height: 13px;
}
/* Manage permissions CTA */
.org-drawer__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 24px;
border-radius: var(--ui-radius-full);
background: linear-gradient(130deg, #ff7043, #e94424);
border: none;
color: #fff;
font-size: var(--ui-text-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 8px 24px rgba(233, 68, 36, 0.35);
}
.org-drawer__cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(233, 68, 36, 0.45);
}
.org-drawer__cta mat-icon,
.org-drawer__cta .mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
/* ==========================================================================
PERMISSIONS TAB
========================================================================== */
.org-perm-tab {
display: flex;
flex-direction: column;
gap: 0;
height: calc(100vh - 220px);
min-height: 500px;
width: 100%;
overflow: hidden;
}
/* Full-width mode (no sidebar) */
.org-perm-tab--full {
flex-direction: column;
}
/* Compact selectors row (inline in header filters bar) */
.org-perm-selectors {
display: flex;
align-items: center;
gap: var(--ui-space-4);
flex-shrink: 0;
}
.org-perm-selector {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.org-perm-selector__label {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.org-perm-selector__label mat-icon,
.org-perm-selector__label .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.org-perm-selector__select {
min-width: 180px;
max-width: 260px;
padding: 7px 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 500;
outline: none;
appearance: auto;
cursor: pointer;
transition: all 0.2s ease;
}
.org-perm-selector__select:hover {
border-color: rgba(255, 255, 255, 0.2);
}
.org-perm-selector__select:focus {
border-color: #ff7a3d;
color: #fff;
}
.org-perm-selector__select option {
background: #1a1a2e;
color: #fff;
}
/* Department group heading inside role dropdown menu */
.org-dropdown-dept-heading {
padding: 8px 16px 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.35);
pointer-events: none;
margin-top: 4px;
}
.org-dropdown-dept-heading:first-child {
margin-top: 0;
}
/* Editor fills remaining space */
.org-perm-editor {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.org-perm-editor > app-role-permissions-drawer {
display: block;
height: 100%;
}
/* Summary bar */
.org-perm-summary {
display: flex;
align-items: center;
gap: var(--ui-space-6);
padding: var(--ui-space-4) var(--ui-space-6);
margin-bottom: var(--ui-space-4);
border-radius: var(--ui-radius-xl);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Group wrapper to keep stats items clustered together in filter bar */
.org-perm-stats-group {
display: flex;
align-items: center;
gap: 16px;
}
.org-perm-summary__item {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--ui-text-sm);
color: rgba(255, 255, 255, 0.6);
}
.org-perm-summary__item strong {
font-size: 18px;
font-weight: 700;
color: var(--ui-text-primary);
}
.org-perm-summary__item--danger strong {
color: var(--ui-danger);
}
.org-perm-summary__divider {
width: 1px;
height: 28px;
background: rgba(255, 255, 255, 0.08);
}
/* Left panel - role list */
.org-perm-left {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
border-right: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.01);
}
.org-perm-left__header {
padding: var(--ui-space-4) var(--ui-space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
flex-shrink: 0;
}
.org-perm-left__search {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: border-color 0.2s ease;
}
.org-perm-left__search:focus-within {
border-color: rgba(255, 122, 61, 0.35);
}
.org-perm-left__search mat-icon,
.org-perm-left__search .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: rgba(255, 255, 255, 0.35);
}
.org-perm-left__search input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
}
.org-perm-left__search input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.org-perm-left__filter {
margin-top: var(--ui-space-2);
}
.org-perm-left__filter select {
width: 100%;
padding: 8px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.org-perm-left__filter select option {
background: #1a1a1a;
color: #fff;
}
.org-perm-left__list {
flex: 1;
min-height: 0;
overflow-y: auto;
/* Allow wheel/touch scroll to bubble to page when the list hits top/bottom */
overscroll-behavior: auto;
-webkit-overflow-scrolling: touch;
padding: var(--ui-space-2) 0;
}
.org-perm-left__dept-label {
padding: var(--ui-space-2) var(--ui-space-4);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.35);
margin-top: var(--ui-space-2);
}
.org-perm-left__dept-label:first-child {
margin-top: 0;
}
.org-perm-left__role {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) max-content max-content;
align-items: center;
column-gap: 10px;
width: 100%;
padding: 10px var(--ui-space-4);
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.org-perm-left__role:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--ui-text-primary);
}
.org-perm-left__role--active {
background: rgba(255, 122, 61, 0.1);
color: #ff9966;
border-right: 3px solid #ff7a3d;
}
.org-perm-left__role mat-icon,
.org-perm-left__role .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: rgba(255, 255, 255, 0.3);
}
.org-perm-left__role--active mat-icon,
.org-perm-left__role--active .mat-icon {
color: #ff9966;
}
.org-perm-left__perm-count {
min-width: 34px;
height: 24px;
margin-left: 0;
padding: 0 8px;
border-radius: var(--ui-radius-full);
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
font-size: 11px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.58);
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: end;
}
.org-perm-left__role--active .org-perm-left__perm-count {
border-color: rgba(255, 122, 61, 0.22);
background: rgba(255, 122, 61, 0.12);
color: #ff9966;
}
.org-perm-left__role-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.org-perm-left__risk-chip {
justify-self: end;
width: auto;
text-align: right;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Right panel - editor */
.org-perm-right {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.org-perm-right__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: var(--ui-space-4);
color: rgba(255, 255, 255, 0.45);
text-align: center;
padding: var(--ui-space-8);
}
.org-perm-right__empty mat-icon,
.org-perm-right__empty .mat-icon {
font-size: 72px;
width: 72px;
height: 72px;
opacity: 0.4;
}
.org-perm-right__empty p {
margin: 0;
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-medium);
}
/* Override drawer styling when used inline */
.org-perm-right app-role-permissions-drawer {
display: block;
height: 100%;
}
.org-perm-right app-role-permissions-drawer .permissions-drawer {
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Summary aside removed — replaced by floating stats card in permission-workspace.scss */
.org-perm-right app-role-summary .summary-panel {
min-width: 0;
}
.org-perm-right app-role-summary .stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-3);
align-items: stretch;
}
.org-perm-right app-role-summary .stat-card {
min-width: 0 !important;
width: 100%;
max-width: 100%;
flex: 1 1 auto !important;
margin: 0;
box-sizing: border-box;
}
.org-perm-right app-role-summary .stat-label {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.2;
}
/* Hide the back-btn when embedded inside the Permissions tab split panel */
.org-perm-right app-role-permissions-drawer .perm-ws__back-btn,
.org-perm-editor app-role-permissions-drawer .perm-ws__back-btn {
display: none !important;
}
/* Permission cards: keep risk badge in a fixed right-side slot */
.org-perm-right app-permission-row .permission-info {
padding-right: 40px;
}
.org-perm-right app-permission-row .permission-header {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
column-gap: var(--ui-space-3);
}
.org-perm-right app-permission-row .permission-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.org-perm-right app-permission-row .risk-badge {
width: auto;
justify-content: center;
justify-self: end;
}
@media (max-width: 1200px) {
/* summary-aside removed — no width override needed */
}
@media (max-width: 760px) {
.org-tab-shell {
padding-top: var(--ui-space-4);
}
}
/* ==========================================================================
ROLE SEARCH AUTOCOMPLETE — follows glass-menu contract tokens
========================================================================== */
.role-search-autocomplete {
position: relative;
flex-shrink: 0;
}
.role-search-input-wrapper {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
min-width: 180px;
max-width: 220px;
border-radius: var(--ui-radius-full, 999px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
}
.role-search-input-wrapper:focus-within {
border-color: rgba(255, 140, 80, 0.4);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(255, 140, 80, 0.08);
}
.role-search-icon {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
color: rgba(255, 255, 255, 0.35);
flex-shrink: 0;
}
.role-search-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: var(--ui-text-primary, rgba(255, 255, 255, 0.95));
font-size: 12px;
font-weight: 500;
font-family: inherit;
}
.role-search-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.role-search-clear {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.role-search-clear:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.role-search-clear mat-icon,
.role-search-clear .mat-icon {
font-size: 12px !important;
width: 12px !important;
height: 12px !important;
}
/* Mat-option content layout for role search autocomplete */
.role-search-autocomplete .mat-mdc-option .mdc-list-item__primary-text {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.role-search-item__name {
font-weight: 600;
}
.role-search-item__dept {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
/* ==========================================================================
3-DOT MENU TRIGGERS (Department Cards + Role Chips)
========================================================================== */
.card-menu-trigger,
.role-chip-menu-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: var(--ui-radius-sm);
background: transparent;
color: rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: var(--ui-transition-base);
flex-shrink: 0;
}
.card-menu-trigger {
width: 32px;
height: 32px;
}
.card-menu-trigger:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
}
.card-menu-trigger mat-icon,
.card-menu-trigger .mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.role-chip-menu-trigger {
width: 20px;
height: 20px;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease;
}
.role-chip-wrapper:hover .role-chip-menu-trigger {
opacity: 1;
}
.role-chip-menu-trigger:hover {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.8);
}
.role-chip-menu-trigger mat-icon,
.role-chip-menu-trigger .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
/* Role chip + menu trigger wrapper */
.role-chip-wrapper {
display: inline-flex;
align-items: center;
gap: 2px;
}
/* Danger menu items (Archive / Delete) */
.menu-item-danger {
color: var(--ui-danger) !important;
}
.menu-item-danger mat-icon,
.menu-item-danger .mat-icon {
color: var(--ui-danger) !important;
}
/* ==========================================================================
STATUS TOGGLE (Active / Archived)
========================================================================== */
.org-status-toggle {
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ui-pill-tab {
padding: 6px 16px;
border: none;
border-radius: var(--ui-radius-full);
background: transparent;
color: rgba(255, 255, 255, 0.5);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: var(--ui-transition-base);
white-space: nowrap;
}
.ui-pill-tab:hover {
color: rgba(255, 255, 255, 0.8);
}
.ui-pill-tab--active {
background: rgba(255, 122, 61, 0.15);
color: #ff9966;
font-weight: var(--ui-font-semibold);
}
/* ==========================================================================
CORPORATE GROUP MODE EMPTY STATE
========================================================================== */
.corporate-empty-state {
padding: 60px 40px !important;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 24px !important;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
max-width: 800px;
margin: 40px auto !important;
}
.corporate-empty-state .empty-visual.corporate-glow {
background: radial-gradient(circle, rgba(255, 122, 61, 0.25) 0%, rgba(255, 122, 61, 0) 70%) !important;
border-radius: 50%;
padding: 24px;
margin-bottom: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.corporate-empty-state .empty-visual.corporate-glow mat-icon {
font-size: 64px;
width: 64px;
height: 64px;
color: #ff9966 !important;
filter: drop-shadow(0 0 12px rgba(255, 122, 61, 0.6));
}
.corporate-empty-state h3 {
font-size: 22px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.corporate-empty-state .empty-desc {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
max-width: 580px;
margin: 0 auto 30px;
}
.corporate-empty-state .branch-selector-shortcut {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 24px;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.corporate-empty-state .branch-selector-shortcut .shortcut-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 16px;
}
.corporate-empty-state .branch-selector-shortcut .branch-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.corporate-empty-state .branch-selector-shortcut .branch-shortcut-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: rgba(255, 255, 255, 0.85);
font-size: var(--ui-text-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.corporate-empty-state .branch-selector-shortcut .branch-shortcut-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #ff9966;
margin-right: 4px;
}
.corporate-empty-state .branch-selector-shortcut .branch-shortcut-btn .branch-name {
font-weight: 600;
}
.corporate-empty-state .branch-selector-shortcut .branch-shortcut-btn .branch-city {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
margin-left: 4px;
}
.corporate-empty-state .branch-selector-shortcut .branch-shortcut-btn:hover:not(:disabled) {
background: rgba(255, 122, 61, 0.12);
border-color: rgba(255, 122, 61, 0.35);
color: #ff9966;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 122, 61, 0.15);
}
.corporate-empty-state .branch-selector-shortcut .branch-shortcut-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.corporate-empty-state .switching-loader {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 20px;
font-size: var(--ui-text-sm);
color: rgba(255, 255, 255, 0.5);
}
.corporate-empty-state .switching-loader mat-spinner {
margin: 0;
}
/* ==========================================================================
UI PAGE VARIANT — PERMISSION WORKSPACE (Full-Width Layout)
==========================================================================
Covers: Role permission editor (drawer component, domain sections, rows)
Prefix: perm-ws-*
REUSES from existing contracts:
- tokens.scss for --ui-* design tokens
- layout/drawer.scss for glass-drawer baseline
FEATURES:
- Full-width permission grid (no sidebar summary)
- Compact single-row toolbar (~64px)
- Floating stats card (sticky top-right)
- Dense mode toggle (.perm-ws--dense)
========================================================================== */
/* ==========================================================================
WORKSPACE SHELL
========================================================================== */
.perm-ws {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
border-radius: 28px;
overflow: hidden;
margin: 24px;
position: relative;
}
.perm-ws::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: inherit;
z-index: 0;
pointer-events: none;
}
.perm-ws > * {
position: relative;
z-index: 1;
}
/* Inline embed: strip chrome when inside org-perm-right or org-perm-editor */
.org-perm-right .perm-ws,
.org-perm-editor .perm-ws {
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
}
.org-perm-editor .perm-ws::before {
display: none;
}
/* Hide back button when embedded */
.org-perm-right .perm-ws__back-btn {
display: none;
}
/* ==========================================================================
COMPACT TOOLBAR (~64px single row)
==========================================================================*/
.perm-ws__toolbar {
display: flex;
align-items: center;
gap: 12px;
min-height: 64px;
padding: 10px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
flex-shrink: 0;
flex-wrap: wrap;
overflow: visible;
position: relative;
z-index: 10;
border-radius: var(--ui-radius-xl);
margin: 4px 8px 0;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Back button */
.perm-ws__back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.perm-ws__back-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.perm-ws__back-btn mat-icon,
.perm-ws__back-btn .mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
/* Role identity cluster */
.perm-ws__role-info {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
margin-right: 4px;
}
.perm-ws__role-name {
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.perm-ws__dept-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: rgba(255, 153, 102, 0.12);
border: 1px solid rgba(255, 153, 102, 0.2);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #ff9966;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.perm-ws__dept-badge mat-icon,
.perm-ws__dept-badge .mat-icon {
font-size: 13px;
width: 13px;
height: 13px;
}
/* Toolbar divider */
.perm-ws__divider {
width: 1px;
height: 28px;
background: rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
/* Inline stats (toolbar) */
.perm-ws__inline-stats {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.perm-ws__inline-stat {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 999px;
white-space: nowrap;
cursor: default;
}
.perm-ws__inline-stat-val {
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
line-height: 1;
}
.perm-ws__inline-stat-lbl {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
}
.perm-ws__inline-stat--danger {
background: rgba(239, 83, 80, 0.08);
border-color: rgba(239, 83, 80, 0.15);
}
.perm-ws__inline-stat--danger .perm-ws__inline-stat-val {
color: #ef5350;
}
.perm-ws__inline-stat--danger .perm-ws__inline-stat-lbl {
color: rgba(239, 83, 80, 0.6);
}
.perm-ws__inline-stat--warning {
background: rgba(255, 193, 7, 0.08);
border-color: rgba(255, 193, 7, 0.15);
}
.perm-ws__inline-stat--warning .perm-ws__inline-stat-val {
color: #ffc107;
}
.perm-ws__inline-stat--warning .perm-ws__inline-stat-lbl {
color: rgba(255, 193, 7, 0.6);
}
.perm-ws__inline-stat--dirty {
background: rgba(255, 193, 7, 0.08);
border-color: rgba(255, 193, 7, 0.2);
padding: 4px 6px;
}
.perm-ws__inline-stat--dirty mat-icon,
.perm-ws__inline-stat--dirty .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
color: #ffc107;
}
/* Search box */
.perm-ws__search {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
max-width: 320px;
margin-left: auto;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
transition: all 0.2s ease;
}
.perm-ws__search:focus-within {
border-color: rgba(220, 130, 80, 0.4);
background: rgba(255, 255, 255, 0.06);
}
.perm-ws__search mat-icon,
.perm-ws__search .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
.perm-ws__search input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
min-width: 0;
}
.perm-ws__search input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.perm-ws__search-clear {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.08);
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.15s ease;
}
.perm-ws__search-clear:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.perm-ws__search-clear mat-icon,
.perm-ws__search-clear .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
/* Roles grid cards on /console/role/permissions
Remove legacy left-edge color stripe to keep neutral glass cards. */
.org-shell .role-card-v2::before {
content: none !important;
display: none !important;
}
/* ==========================================================================
PERMISSIONS PAGE — TEMPLATES TAB CATALOG CARDS
========================================================================== */
.org-shell.templates-page .perm-template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: var(--ui-space-4);
padding: var(--ui-space-5) var(--ui-space-6);
}
.org-shell.templates-page .perm-template-card {
position: relative;
min-height: 290px;
padding: var(--ui-space-5);
gap: var(--ui-space-4);
border-radius: var(--ui-radius-xl);
border-color: var(--ui-border-light);
background: var(--ui-glass-light);
box-shadow: var(--ui-shadow-sm);
backdrop-filter: var(--ui-blur-sm);
-webkit-backdrop-filter: var(--ui-blur-sm);
text-align: left;
overflow: hidden;
isolation: isolate;
}
.org-shell.templates-page .perm-template-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
opacity: 0.9;
pointer-events: none;
z-index: 0;
}
.org-shell.templates-page .perm-template-card > * {
position: relative;
z-index: 1;
}
.org-shell.templates-page .perm-template-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 153, 102, 0.2);
box-shadow: var(--ui-shadow-md);
}
.org-shell.templates-page .perm-template-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-4);
}
.org-shell.templates-page .perm-template-card__identity {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
min-width: 0;
}
.org-shell.templates-page .perm-template-card__eyebrow {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.org-shell.templates-page .perm-template-card__name-group {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.org-shell.templates-page .perm-template-card .ui-card__heading {
font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem);
line-height: 1.2;
}
.org-shell.templates-page .perm-template-card .ui-card__badge {
padding-inline: var(--ui-space-3);
}
.org-shell.templates-page .perm-template-card .perm-template-card__badge--core {
background: rgba(255, 193, 7, 0.12);
border-color: rgba(255, 193, 7, 0.22);
color: var(--ui-warning);
}
.org-shell.templates-page .perm-template-card .perm-template-card__badge--preset {
background: rgba(88, 214, 141, 0.12);
border-color: rgba(88, 214, 141, 0.22);
color: var(--ui-success);
}
.org-shell.templates-page .perm-template-card__counter {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
min-width: 84px;
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.org-shell.templates-page .perm-template-card__counter-value {
font-size: clamp(1.35rem, 1vw + 1rem, 1.8rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ui-text-primary);
}
.org-shell.templates-page .perm-template-card__counter-label {
font-size: var(--ui-text-2xs, 0.7rem);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.org-shell.templates-page .perm-template-card .ui-card__description {
min-height: 3.5em;
color: var(--ui-text-secondary);
}
.org-shell.templates-page .perm-template-card__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.org-shell.templates-page .perm-template-card__metric {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
min-height: 108px;
min-width: 0;
padding: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.org-shell.templates-page .perm-template-card__metric-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.48);
}
.org-shell.templates-page .perm-template-card__metric-value {
display: block;
max-width: 100%;
font-size: clamp(1.05rem, 0.4vw + 1rem, 1.35rem);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1.25;
overflow-wrap: anywhere;
}
.org-shell.templates-page .perm-template-card__metric-sub {
font-size: var(--ui-text-xs);
line-height: 1.45;
color: var(--ui-text-muted);
}
.org-shell.templates-page .perm-template-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
padding-top: var(--ui-space-4);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.org-shell.templates-page .perm-template-card__signals {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
min-width: 0;
}
.org-shell.templates-page .perm-template-card__signal {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.04em;
color: var(--ui-text-secondary);
white-space: nowrap;
}
.org-shell.templates-page .perm-template-card__signal--core {
background: rgba(255, 193, 7, 0.12);
border-color: rgba(255, 193, 7, 0.18);
color: var(--ui-warning);
}
.org-shell.templates-page .perm-template-card__signal--preset {
background: rgba(88, 214, 141, 0.12);
border-color: rgba(88, 214, 141, 0.18);
color: var(--ui-success);
}
.org-shell.templates-page .perm-template-card__cta {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: rgba(255, 153, 102, 0.92);
white-space: nowrap;
flex-shrink: 0;
}
.org-shell.templates-page .perm-template-card__cta mat-icon,
.org-shell.templates-page .perm-template-card__cta .mat-icon {
width: 16px;
height: 16px;
font-size: 16px;
transition: transform 0.2s ease;
}
.org-shell.templates-page .perm-template-card:hover .perm-template-card__cta mat-icon,
.org-shell.templates-page .perm-template-card:hover .perm-template-card__cta .mat-icon {
transform: translate(2px, -2px);
}
@media (max-width: 1180px) {
.org-shell.templates-page .perm-template-card__metrics {
grid-template-columns: 1fr;
}
.org-shell.templates-page .perm-template-card__metric {
min-height: 0;
}
}
@media (max-width: 760px) {
.org-shell.templates-page .perm-template-grid {
grid-template-columns: 1fr;
padding-inline: var(--ui-space-4);
}
.org-shell.templates-page .perm-template-card__header,
.org-shell.templates-page .perm-template-card__footer {
flex-direction: column;
align-items: flex-start;
}
.org-shell.templates-page .perm-template-card__counter {
align-items: flex-start;
}
}
/* Preset button + dropdown */
.perm-ws__presets {
position: relative;
z-index: 200;
}
.perm-ws__preset-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.perm-ws__preset-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
.perm-ws__preset-btn--active {
background: rgba(220, 130, 80, 0.1);
border-color: rgba(220, 130, 80, 0.25);
color: #dc8250;
}
.perm-ws__preset-btn mat-icon,
.perm-ws__preset-btn .mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.perm-ws__preset-arrow {
transition: transform 0.2s ease;
}
.perm-ws__preset-btn--active .perm-ws__preset-arrow {
transform: rotate(180deg);
}
/* Dense toggle */
.perm-ws__dense-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.perm-ws__dense-toggle:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
}
.perm-ws__dense-toggle--active {
background: rgba(100, 181, 246, 0.1);
border-color: rgba(100, 181, 246, 0.25);
color: #64b5f6;
}
.perm-ws__dense-toggle mat-icon,
.perm-ws__dense-toggle .mat-icon {
font-size: 15px;
width: 15px;
height: 15px;
}
/* Save button */
.perm-ws__save-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 20px;
border-radius: 999px;
background: linear-gradient(130deg, #ff7043, #e94424);
border: none;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 8px 20px rgba(233, 68, 36, 0.35);
white-space: nowrap;
flex-shrink: 0;
}
.perm-ws__save-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(233, 68, 36, 0.45);
}
.perm-ws__save-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.perm-ws__save-btn mat-icon,
.perm-ws__save-btn .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
/* ==========================================================================
MAIN CONTENT AREA — FULL WIDTH
========================================================================== */
.perm-ws__body {
flex: 1;
min-height: 0;
overflow: hidden;
position: relative;
}
/* ==========================================================================
FLOATING STATS CARD
========================================================================== */
.perm-ws__floating-stats {
float: right;
width: 260px;
max-width: 280px;
margin: 16px 20px 16px 24px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
overflow: hidden;
isolation: isolate;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.25s ease;
position: sticky;
top: 16px;
z-index: 20;
shape-outside: margin-box;
}
.perm-ws__floating-stats::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(40, 36, 33, 0.85), rgba(28, 25, 22, 0.92));
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: inherit;
z-index: 0;
}
.perm-ws__floating-stats > * {
position: relative;
z-index: 1;
}
.perm-ws__stats-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.perm-ws__stats-title {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.perm-ws__stats-collapse {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease;
}
.perm-ws__stats-collapse:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
}
.perm-ws__stats-collapse mat-icon,
.perm-ws__stats-collapse .mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.perm-ws__stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(255, 255, 255, 0.04);
}
.perm-ws__stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 8px;
background: rgba(0, 0, 0, 0.15);
text-align: center;
}
.perm-ws__stat-value {
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
line-height: 1.1;
}
.perm-ws__stat-label {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 2px;
}
.perm-ws__stat--danger .perm-ws__stat-value {
color: #ef5350;
}
.perm-ws__stat--warning .perm-ws__stat-value {
color: #ffc107;
}
/* Collapsed state */
.perm-ws__floating-stats--collapsed .perm-ws__stats-grid {
display: none;
}
/* Unsaved indicator */
.perm-ws__stats-unsaved {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
color: #ffc107;
border-top: 1px solid rgba(255, 193, 7, 0.12);
background: rgba(255, 193, 7, 0.05);
}
.perm-ws__stats-unsaved mat-icon,
.perm-ws__stats-unsaved .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
/* ==========================================================================
PERMISSION GRID — FULL WIDTH
========================================================================== */
.perm-ws__grid {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 20px 24px 32px;
display: block;
height: 100%;
}
.perm-ws__grid > app-permission-domain {
display: block;
margin-bottom: 14px;
}
.perm-ws__grid > app-permission-domain:last-child {
margin-bottom: 0;
}
/* ==========================================================================
SEARCH RESULTS
========================================================================== */
.perm-ws__search-results {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
height: 100%;
}
.perm-ws__search-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.perm-ws__search-clear-link {
background: transparent;
border: none;
color: #dc8250;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.perm-ws__search-clear-link:hover {
text-decoration: underline;
}
.perm-ws__search-group-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.perm-ws__search-domain {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 16px;
}
.perm-ws__search-domain-label {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 14px;
font-weight: 600;
color: #dc8250;
}
.perm-ws__search-domain-label mat-icon,
.perm-ws__search-domain-label .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.perm-ws__no-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
}
.perm-ws__no-results mat-icon,
.perm-ws__no-results .mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
color: rgba(255, 255, 255, 0.15);
margin-bottom: 12px;
}
.perm-ws__no-results p {
margin: 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
}
/* Search result row (inline perms in search view) */
.perm-ws__search-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.perm-ws__search-row:hover {
background: rgba(255, 255, 255, 0.05);
}
.perm-ws__search-row--selected {
background: rgba(220, 130, 80, 0.08);
border-color: rgba(220, 130, 80, 0.2);
}
.perm-ws__search-row input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.perm-ws__search-checkbox {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.25);
background: transparent;
flex-shrink: 0;
transition: all 0.15s ease;
}
.perm-ws__search-row--selected .perm-ws__search-checkbox {
background: linear-gradient(135deg, #dc8250, #c75a30);
border-color: transparent;
}
.perm-ws__search-checkbox mat-icon,
.perm-ws__search-checkbox .mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
color: #fff;
}
.perm-ws__search-perm-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.perm-ws__search-perm-label {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.perm-ws__search-perm-desc {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.perm-ws__search-risk {
padding: 3px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
}
.perm-ws__search-risk--low {
background: rgba(76, 175, 80, 0.15);
color: #66bb6a;
}
.perm-ws__search-risk--medium {
background: rgba(255, 193, 7, 0.15);
color: #ffc107;
}
.perm-ws__search-risk--high {
background: rgba(244, 67, 54, 0.15);
color: #ef5350;
}
.perm-ws__search-perms {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ==========================================================================
DOMAIN SECTION (app-permission-domain)
========================================================================== */
app-permission-domain {
display: block;
}
.perm-ws .domain-section {
border-radius: 20px;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
overflow: hidden;
transition: all 0.25s ease;
}
.perm-ws .domain-section:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.perm-ws .domain-section.expanded {
border-color: rgba(255, 255, 255, 0.12);
}
.perm-ws .domain-section.has-selected {
border-color: rgba(255, 122, 61, 0.25);
box-shadow: 0 8px 30px rgba(255, 122, 61, 0.12);
}
.perm-ws .domain-section.has-selected.expanded {
border-color: rgba(255, 122, 61, 0.35);
}
.perm-ws .domain-section:not(.has-selected):not(.expanded) {
opacity: 0.5;
}
.perm-ws .domain-section:not(.has-selected):not(.expanded):hover {
opacity: 0.8;
}
/* Domain header */
.perm-ws .domain-header {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 18px 22px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.2s ease;
}
.perm-ws .domain-header:hover {
background: rgba(255, 255, 255, 0.02);
}
.perm-ws .domain-section.expanded .domain-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.perm-ws .domain-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(145deg, rgba(255, 122, 61, 0.18), rgba(255, 122, 61, 0.06));
border: 1px solid rgba(255, 122, 61, 0.25);
flex-shrink: 0;
}
.perm-ws .domain-icon {
font-size: 24px;
width: 24px;
height: 24px;
color: #ff7a3d;
}
.perm-ws .domain-info {
flex: 1;
min-width: 0;
}
.perm-ws .domain-title {
margin: 0 0 4px;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.perm-ws .domain-description {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.perm-ws .domain-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.perm-ws .selected-count {
font-size: 13px;
font-weight: 600;
color: #ff7a3d;
}
.perm-ws .total-count {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
}
.perm-ws .expand-indicator {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
flex-shrink: 0;
}
.perm-ws .expand-indicator mat-icon,
.perm-ws .expand-indicator .mat-icon {
font-size: 22px;
width: 22px;
height: 22px;
color: rgba(255, 255, 255, 0.5);
}
/* Domain header actions (inline in header row) */
.perm-ws .domain-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.perm-ws .select-all-btn,
.perm-ws .clear-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
background: transparent;
}
.perm-ws .select-all-btn {
background: rgba(255, 122, 61, 0.12);
border: 1px solid rgba(255, 122, 61, 0.28);
color: #ff7a3d;
}
.perm-ws .select-all-btn:hover:not(:disabled) {
background: rgba(255, 122, 61, 0.22);
border-color: rgba(255, 122, 61, 0.45);
}
.perm-ws .select-all-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.perm-ws .select-all-btn mat-icon,
.perm-ws .select-all-btn .mat-icon,
.perm-ws .clear-btn mat-icon,
.perm-ws .clear-btn .mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.perm-ws .clear-btn {
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
}
.perm-ws .clear-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}
/* Permissions list inside domain */
.perm-ws .permissions-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 16px;
padding: 14px 18px 18px;
}
/* ==========================================================================
SUBGROUPS — uiGroup-based sections within a domain
========================================================================== */
.perm-ws .subgroup {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.perm-ws .subgroup:first-child {
border-top: none;
}
.perm-ws .subgroup__header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px 2px;
}
.perm-ws .subgroup__icon {
font-size: 16px;
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
.perm-ws .subgroup__label {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.perm-ws .subgroup__count {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.3);
margin-right: auto;
}
.perm-ws .subgroup__select-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
}
.perm-ws .subgroup__select-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8);
}
.perm-ws .subgroup__select-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.perm-ws .subgroup__select-btn mat-icon,
.perm-ws .subgroup__select-btn .mat-icon {
font-size: 12px;
width: 12px;
height: 12px;
}
/* Self-Service accent variant */
.perm-ws .subgroup--self-service {
background: linear-gradient(150deg, rgba(100, 181, 246, 0.04), rgba(100, 181, 246, 0.01));
border-top: 1px solid rgba(100, 181, 246, 0.12);
}
.perm-ws .subgroup--self-service:first-child {
border-top: none;
}
.perm-ws .subgroup--self-service .subgroup__icon {
color: #64b5f6;
}
.perm-ws .subgroup--self-service .subgroup__label {
color: #64b5f6;
}
.perm-ws .subgroup--self-service .subgroup__select-btn {
background: rgba(100, 181, 246, 0.08);
border-color: rgba(100, 181, 246, 0.2);
color: #64b5f6;
}
.perm-ws .subgroup--self-service .subgroup__select-btn:hover:not(:disabled) {
background: rgba(100, 181, 246, 0.15);
border-color: rgba(100, 181, 246, 0.35);
}
/* ==========================================================================
PERMISSION ROW (app-permission-row)
========================================================================== */
app-permission-row {
display: block;
min-width: 0;
overflow: hidden;
}
.perm-ws .permission-row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 18px;
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.perm-ws .permission-row:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
.perm-ws .permission-row.selected {
background: rgba(255, 122, 61, 0.1);
border-color: rgba(255, 122, 61, 0.28);
}
.perm-ws .permission-row.selected:hover {
background: rgba(255, 122, 61, 0.15);
border-color: rgba(255, 122, 61, 0.4);
}
.perm-ws .permission-row.high-risk.selected {
background: rgba(255, 95, 109, 0.08);
border-color: rgba(255, 95, 109, 0.25);
}
/* Checkbox within permission-row */
.perm-ws .checkbox-wrapper {
position: relative;
flex-shrink: 0;
margin-top: 2px;
}
.perm-ws .checkbox-wrapper input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.perm-ws .checkbox-custom {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.04);
transition: all 0.2s ease;
}
.perm-ws .checkbox-custom mat-icon,
.perm-ws .checkbox-custom .mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: transparent;
transition: color 0.15s ease;
}
.perm-ws .permission-row.selected .checkbox-custom {
background: linear-gradient(130deg, #ff7043, #e94424);
border-color: transparent;
box-shadow: 0 4px 12px rgba(233, 68, 36, 0.4);
}
.perm-ws .permission-row.selected .checkbox-custom mat-icon,
.perm-ws .permission-row.selected .checkbox-custom .mat-icon {
color: #fff;
}
.perm-ws .permission-row.high-risk.selected .checkbox-custom {
background: linear-gradient(135deg, #ff5f6d, #c62828);
box-shadow: 0 4px 12px rgba(255, 95, 109, 0.35);
}
.perm-ws .permission-info {
flex: 1;
min-width: 0;
}
.perm-ws .permission-header {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
margin-bottom: 4px;
min-width: 0;
overflow: hidden;
}
.perm-ws .permission-label {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.perm-ws .permission-description {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* High-risk indicator */
.perm-ws .high-risk-indicator {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(244, 67, 54, 0.15);
animation: perm-ws-pulse 2s ease-in-out infinite;
}
.perm-ws .high-risk-indicator mat-icon,
.perm-ws .high-risk-indicator .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #ef5350;
}
@keyframes perm-ws-pulse {
0%, 100% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
50% {
opacity: 0.7;
transform: translateY(-50%) scale(1.05);
}
}
/* Focus state */
.perm-ws .checkbox-wrapper input:focus + .checkbox-custom {
box-shadow: 0 0 0 3px rgba(220, 130, 80, 0.25);
}
/* ==========================================================================
DENSE MODE — .perm-ws--dense
========================================================================== */
/* Domain header: compact */
.perm-ws--dense .domain-header {
padding: 8px 14px;
gap: 8px;
}
.perm-ws--dense .domain-icon-wrapper {
width: 32px;
height: 32px;
border-radius: 8px;
}
.perm-ws--dense .domain-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.perm-ws--dense .domain-title {
font-size: 13px;
margin-bottom: 0;
}
.perm-ws--dense .domain-description {
display: none;
}
.perm-ws--dense .domain-stats {
flex-direction: row;
gap: 6px;
}
.perm-ws--dense .total-count,
.perm-ws--dense .selected-count {
font-size: 11px;
}
.perm-ws--dense .expand-indicator {
width: 24px;
height: 24px;
border-radius: 6px;
}
.perm-ws--dense .expand-indicator mat-icon,
.perm-ws--dense .expand-indicator .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.perm-ws--dense .domain-header-actions {
gap: 4px;
}
.perm-ws--dense .select-all-btn,
.perm-ws--dense .clear-btn {
padding: 4px 8px;
font-size: 10px;
gap: 4px;
}
.perm-ws--dense .select-all-btn mat-icon,
.perm-ws--dense .select-all-btn .mat-icon,
.perm-ws--dense .clear-btn mat-icon,
.perm-ws--dense .clear-btn .mat-icon {
font-size: 13px;
width: 13px;
height: 13px;
}
/* Permission row: compact */
.perm-ws--dense .permissions-list {
grid-template-columns: repeat(4, 1fr);
gap: 4px 12px;
padding: 8px 12px 10px;
}
/* Subgroup: compact */
.perm-ws--dense .subgroup__header {
padding: 6px 12px 1px;
gap: 6px;
}
.perm-ws--dense .subgroup__icon {
font-size: 13px;
width: 13px;
height: 13px;
}
.perm-ws--dense .subgroup__label {
font-size: 10px;
}
.perm-ws--dense .subgroup__count {
font-size: 9px;
}
.perm-ws--dense .subgroup__select-btn {
padding: 2px 6px;
font-size: 9px;
gap: 3px;
}
.perm-ws--dense .subgroup__select-btn mat-icon,
.perm-ws--dense .subgroup__select-btn .mat-icon {
font-size: 10px;
width: 10px;
height: 10px;
}
.perm-ws--dense .permission-row {
padding: 6px 10px;
gap: 8px;
border-radius: 6px;
}
.perm-ws--dense .permission-label {
font-size: 12px;
}
.perm-ws--dense .permission-description {
display: none;
}
.perm-ws--dense .permission-header {
margin-bottom: 0;
gap: 6px;
}
.perm-ws--dense .risk-badge {
font-size: 9px;
padding: 1px 5px;
}
.perm-ws--dense .risk-badge .risk-icon {
font-size: 10px;
width: 10px;
height: 10px;
}
.perm-ws--dense .risk-badge .risk-text {
display: none;
}
.perm-ws--dense .checkbox-custom {
width: 16px;
height: 16px;
border-radius: 3px;
border-width: 1.5px;
}
.perm-ws--dense .checkbox-custom mat-icon,
.perm-ws--dense .checkbox-custom .mat-icon {
font-size: 11px;
width: 11px;
height: 11px;
}
.perm-ws--dense .high-risk-indicator {
width: 18px;
height: 18px;
right: 10px;
}
.perm-ws--dense .high-risk-indicator mat-icon,
.perm-ws--dense .high-risk-indicator .mat-icon {
font-size: 12px;
width: 12px;
height: 12px;
}
/* Grid spacing in dense mode */
.perm-ws--dense .perm-ws__grid {
padding: 10px 14px 16px;
}
.perm-ws--dense .perm-ws__grid > app-permission-domain {
margin-bottom: 6px;
}
/* Domain section: less shadow, tighter in dense */
.perm-ws--dense .domain-section {
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Search results dense */
.perm-ws--dense .perm-ws__search-row {
padding: 8px 10px;
}
.perm-ws--dense .perm-ws__search-perm-desc {
display: none;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1200px) {
.perm-ws__floating-stats {
width: 220px;
}
.perm-ws__role-name {
max-width: 140px;
}
}
@media (max-width: 1024px) {
.perm-ws__floating-stats {
position: relative;
top: auto;
right: auto;
width: 100%;
max-width: 100%;
border-radius: 0;
border-left: none;
border-right: none;
}
.perm-ws__stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.perm-ws {
margin: 12px;
border-radius: 20px;
}
.perm-ws__toolbar {
flex-wrap: wrap;
height: auto;
padding: 12px 16px;
gap: 8px;
}
.perm-ws__role-info {
width: 100%;
}
.perm-ws__search {
flex: 1;
max-width: 100%;
}
.perm-ws__divider {
display: none;
}
.perm-ws__grid {
padding: 12px 14px 24px;
}
.perm-ws .domain-header {
padding: 14px 16px;
gap: 12px;
}
.perm-ws .domain-icon-wrapper {
width: 40px;
height: 40px;
border-radius: 10px;
}
.perm-ws .domain-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.perm-ws .domain-description {
display: none;
}
.perm-ws .domain-stats {
flex-direction: row;
gap: 8px;
}
.perm-ws .permissions-list {
padding: 10px 12px 14px;
gap: 6px;
}
.perm-ws__stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.perm-ws__preset-dropdown {
position: fixed;
left: 16px;
right: 16px;
width: auto;
}
}
/* ==========================================================================
BILL EDIT PAGE — Scoped Contract
==========================================================================
Scope: /console/bill/edit/:id
Purpose: align bill edit cards + input table to active ui-* contracts
========================================================================== */
.ui-page--bill-edit {
padding: var(--ui-space-6) var(--ui-space-4) calc(var(--ui-space-12) + var(--ui-space-4));
overflow-x: clip;
/* ==========================================================================
OCR DRAFT STYLES
========================================================================== */
/* Info banner shown for OCR draft bills */
/* Unresolved item row highlight */
/* Unresolved item warning badge */
/* Chip icon sizing for OCR Draft status chip */
/* OCR Bill Image Preview */
/* ==========================================================================
BILL LOCK SYSTEM
========================================================================== */
/* Lock banner — red-tinted glassmorphic bar */
}
.ui-page--bill-edit .bill-edit-dashboard {
position: relative;
overflow-x: clip;
}
.ui-page--bill-edit .services-shell,
.ui-page--bill-edit .services-form {
gap: var(--ui-space-6);
}
.ui-page--bill-edit .bill-edit-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-5);
margin: var(--ui-space-3) 0 var(--ui-space-2);
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.ui-page--bill-edit .bill-edit-summary-card {
min-height: 248px;
width: 100%;
padding: var(--ui-space-5);
gap: var(--ui-space-4);
}
.ui-page--bill-edit .bill-edit-summary-card .ui-card__section-title,
.ui-page--bill-edit .bill-edit-summary-card .glass-modal-container .glass-section-title,
.glass-modal-container .ui-page--bill-edit .bill-edit-summary-card .glass-section-title,
.ui-page--bill-edit .bill-edit-summary-card .glass-modal-container .section-title,
.glass-modal-container .ui-page--bill-edit .bill-edit-summary-card .section-title,
.ui-page--bill-edit .bill-edit-summary-card .glass-modal-container .card-title,
.glass-modal-container .ui-page--bill-edit .bill-edit-summary-card .card-title {
margin: 0;
}
.ui-page--bill-edit .bill-edit-summary-title {
margin: 0;
font-size: var(--ui-text-3xl);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1.2;
}
.ui-page--bill-edit .bill-edit-summary-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-4);
}
.ui-page--bill-edit .bill-edit-balance {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--ui-space-1);
margin-left: auto;
text-align: right;
}
.ui-page--bill-edit .bill-edit-balance span {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.ui-page--bill-edit .bill-edit-balance strong {
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
line-height: 1.1;
}
.ui-page--bill-edit .bill-edit-summary-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.ui-page--bill-edit .bill-edit-summary-list li {
display: grid;
grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
gap: var(--ui-space-4);
align-items: start;
padding: var(--ui-space-3) 0;
border-bottom: 1px solid var(--ui-border-light);
}
.ui-page--bill-edit .bill-edit-summary-list li:last-child {
border-bottom: 0;
}
.ui-page--bill-edit .bill-edit-summary-list li span {
font-size: var(--ui-text-xs);
color: var(--ui-text-subtle);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: var(--ui-font-semibold);
white-space: nowrap;
}
.ui-page--bill-edit .bill-edit-summary-list li strong {
font-size: var(--ui-text-md);
color: var(--ui-text-primary);
font-weight: var(--ui-font-medium);
white-space: normal;
overflow-wrap: anywhere;
}
.ui-page--bill-edit .summary-actions {
margin-top: auto;
}
.ui-page--bill-edit .erp-header-primary .erp-title {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.ui-page--bill-edit .erp-filter-bar .filter-group:last-child {
max-width: 100%;
gap: var(--ui-space-2);
flex-wrap: wrap;
justify-content: flex-end;
}
.ui-page--bill-edit .return-link {
margin-top: 0;
}
@media (max-width: 1320px) {
.ui-page--bill-edit .bill-edit-summary-grid {
grid-template-columns: 1fr;
}
}
.ui-page--bill-edit .ui-page__content {
max-width: 1440px;
width: 100%;
}
.ui-page--bill-edit .bill-edit-items-table {
margin-top: var(--ui-space-1);
}
.ui-page--bill-edit .bill-edit-items-table.ui-table--input::before, .ui-page--bill-edit .bill-edit-items-table.glass-input-table-card::before {
opacity: 0;
background: none;
}
.ui-page--bill-edit .bill-edit-items-table .ui-table-wrap {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
box-shadow: var(--ui-shadow-xl);
}
.ui-page--bill-edit .bill-edit-items-table .ui-table, .ui-page--bill-edit .bill-edit-items-table .premium-table, .ui-page--bill-edit .bill-edit-items-table .glass-table {
--ui-table-min-width: 1120px;
}
.ui-page--bill-edit .bill-edit-items-table .ui-table th, .ui-page--bill-edit .bill-edit-items-table .premium-table th, .ui-page--bill-edit .bill-edit-items-table .glass-table th,
.ui-page--bill-edit .bill-edit-items-table .ui-table td,
.ui-page--bill-edit .bill-edit-items-table .premium-table td,
.ui-page--bill-edit .bill-edit-items-table .glass-table td {
white-space: nowrap;
}
.ui-page--bill-edit .bill-edit-items-table .ui-table th:nth-child(2), .ui-page--bill-edit .bill-edit-items-table .premium-table th:nth-child(2), .ui-page--bill-edit .bill-edit-items-table .glass-table th:nth-child(2),
.ui-page--bill-edit .bill-edit-items-table .ui-table td:nth-child(2),
.ui-page--bill-edit .bill-edit-items-table .premium-table td:nth-child(2),
.ui-page--bill-edit .bill-edit-items-table .glass-table td:nth-child(2) {
white-space: normal;
}
.ui-page--bill-edit .bill-edit-items-table .item-field {
min-width: 240px;
}
.ui-page--bill-edit .bill-edit-items-table .ui-action-btns {
justify-content: center;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-index {
width: 3%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-item {
width: 22%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-part {
width: 9%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-hsn {
width: 7%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-qty {
width: 5%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-unit-base {
width: 9%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-tax {
width: 8%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-discount {
width: 9%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-margin {
width: 6%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-unit-price {
width: 7%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-total {
width: 7%;
}
.ui-page--bill-edit .bill-edit-items-table col.bill-col-actions {
width: 5%;
}
.ui-page--bill-edit .ocr-info-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
margin-bottom: 16px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: 12px;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
line-height: 1.5;
}
.ui-page--bill-edit .ocr-info-bar mat-icon {
color: #fbbf24;
font-size: 20px;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.ui-page--bill-edit .ocr-unresolved-count {
margin-left: auto;
padding: 3px 10px;
border-radius: 12px;
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.ui-page--bill-edit tr.ocr-unresolved {
border-left: 3px solid #fbbf24 !important;
background: rgba(251, 191, 36, 0.04) !important;
}
.ui-page--bill-edit tr.ocr-unresolved:hover {
background: rgba(251, 191, 36, 0.08) !important;
}
.ui-page--bill-edit .ocr-unresolved-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 2px 8px;
border-radius: 8px;
background: rgba(251, 191, 36, 0.12);
color: #fbbf24;
font-size: 10px;
font-weight: 600;
}
.ui-page--bill-edit .ocr-unresolved-badge mat-icon {
font-size: 13px;
width: 13px;
height: 13px;
}
.ui-page--bill-edit .ocr-unresolved-badge .ocr-resolve-link {
margin-left: 4px;
padding: 0 4px;
color: #fbbf24;
font-size: 10px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.ui-page--bill-edit .ocr-unresolved-badge .ocr-resolve-link:hover {
opacity: 1;
text-decoration: underline;
}
.ui-page--bill-edit .chip-icon {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
margin-right: 2px;
}
.ui-page--bill-edit .ocr-bill-preview {
margin-top: 8px;
}
.ui-page--bill-edit .ocr-preview-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 200, 160, 0.9);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.ui-page--bill-edit .ocr-preview-link mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: rgba(255, 130, 90, 0.8);
}
.ui-page--bill-edit .ocr-preview-link:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 130, 90, 0.3);
color: rgb(255, 200, 160);
}
.ui-page--bill-edit .status-pill.status-warning {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.3);
}
.ui-page--bill-edit .bill-lock-banner {
margin-bottom: 16px;
padding: 14px 20px;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 12px;
backdrop-filter: blur(12px);
}
.ui-page--bill-edit .lock-banner-content {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ui-page--bill-edit .lock-icon {
color: #ef4444;
font-size: 22px !important;
width: 22px !important;
height: 22px !important;
flex-shrink: 0;
}
.ui-page--bill-edit .lock-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 200px;
}
.ui-page--bill-edit .lock-text strong {
font-size: 14px;
font-weight: 600;
color: #ef4444;
}
.ui-page--bill-edit .lock-text span {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.4;
}
.ui-page--bill-edit .lock-actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.ui-page--bill-edit .lock-link {
font-size: 12px;
font-weight: 500;
color: rgba(255, 160, 120, 0.9);
cursor: pointer;
transition: color 0.2s ease;
white-space: nowrap;
}
.ui-page--bill-edit .lock-link:hover {
color: rgb(255, 200, 160);
text-decoration: underline;
}
/* ==========================================================================
PAGE: TEMPLATES PAGE — Role permission templates showcase
==========================================================================
Scoped page styles for /console/role/templates.
Uses contract classes from card.scss + stats-header.scss as base.
This file adds page-specific layout and visual identity only.
========================================================================== */
/* ── Grid Layout ────────────────────────────────────────────────────────── */
.templates-page .tpl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--ui-space-4);
padding: var(--ui-space-5) var(--ui-space-6);
}
/* ── Template Card Overrides ────────────────────────────────────────────── */
.templates-page .tpl-card {
position: relative;
overflow: hidden;
cursor: pointer;
}
/* Left accent stripe by tier */
.templates-page .tpl-card::after {
content: "";
position: absolute;
top: var(--ui-space-2);
bottom: var(--ui-space-2);
left: 0;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--ui-success);
opacity: 0.6;
transition: opacity 0.25s ease;
}
.templates-page .tpl-card--core::after {
background: var(--ui-warning);
}
.templates-page .tpl-card:hover::after {
opacity: 1;
}
/* ── Name group ─────────────────────────────────────────────────────────── */
.templates-page .tpl-card__name-group {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
/* ── Badge Tier Variants ────────────────────────────────────────────────── */
.templates-page .tpl-badge--core {
background: var(--ui-warning-bg);
border-color: var(--ui-warning-border);
color: var(--ui-warning);
}
.templates-page .tpl-badge--preset {
background: var(--ui-success-bg);
border-color: var(--ui-success-border);
color: var(--ui-success);
}
/* ── SVG Ring Gauge ─────────────────────────────────────────────────────── */
.templates-page .tpl-ring {
position: relative;
width: 42px;
height: 42px;
flex-shrink: 0;
}
.templates-page .tpl-ring__svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.templates-page .tpl-ring__bg {
fill: none;
stroke: var(--ui-surface-2);
stroke-width: 3;
}
.templates-page .tpl-ring__fill {
fill: none;
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dasharray 0.5s ease;
}
.templates-page .tpl-ring__fill--core {
stroke: var(--ui-warning);
}
.templates-page .tpl-ring__fill--preset {
stroke: var(--ui-success);
}
.templates-page .tpl-ring__label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
/* ── Rings container — side-by-side permission + role count ─────────────── */
.templates-page .tpl-rings {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-shrink: 0;
}
.templates-page .tpl-ring--sm {
width: 32px;
height: 32px;
}
.templates-page .tpl-ring--sm .tpl-ring__label {
font-size: 10px;
}
.templates-page .tpl-ring__fill--roles {
stroke: rgba(100, 181, 246, 0.7);
}
.templates-page .tpl-ring__fill--employees {
stroke: rgba(129, 199, 132, 0.7);
}
/* ── Arrow icon in footer ───────────────────────────────────────────────── */
.templates-page .tpl-card__arrow {
font-size: 18px;
width: 18px;
height: 18px;
color: var(--ui-text-subtle);
margin-left: auto;
transition: all 0.25s ease;
}
.templates-page .tpl-card:hover .tpl-card__arrow {
color: var(--ui-brand-light);
transform: translateX(3px);
}
/* ── Meta Row — breathable layout for multi-stat cards ──────────────────── */
.templates-page .ui-card__meta-row {
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--ui-space-2) var(--ui-space-4);
row-gap: var(--ui-space-2);
}
.templates-page .tpl-card__arrow {
margin-left: auto;
}
/* ── Back Button ────────────────────────────────────────────────────────── */
.templates-page .tpl-back-btn {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-2);
border: 1px solid var(--ui-border-light);
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
cursor: pointer;
transition: var(--ui-transition-base);
}
.templates-page .tpl-back-btn:hover {
background: var(--ui-surface-hover);
border-color: var(--ui-border-hover);
}
.templates-page .tpl-back-btn mat-icon {
font-size: var(--ui-text-base);
width: var(--ui-text-base);
height: var(--ui-text-base);
}
/* ── Empty / Loading States ─────────────────────────────────────────────── */
.templates-page .tpl-empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-8) var(--ui-space-6);
color: var(--ui-text-muted);
}
.templates-page .tpl-empty-state mat-icon {
font-size: 40px;
width: 40px;
height: 40px;
}
.templates-page .tpl-empty-state--error mat-icon {
color: var(--ui-danger);
}
.templates-page .tpl-spinner {
animation: tpl-spin 1s linear infinite;
color: var(--ui-brand-light);
}
@keyframes tpl-spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
PARTIES PAGE — /console/user/list
Uses:
- ui/tables/glass-table.scss for full-page list table chrome
- ui/tables/data-table.scss for shared cell semantics
- ui/headers/stat-cards.scss for KPI stat cards (canonical contract)
- ui/controls/buttons.scss for button contract
Scoped to .parties-page
========================================================================== */
.parties-page {
/* ══════════════════════════════════════════════════════════════════════════
COCKPIT: KPI STAT CARDS — Inside erp-header-block (avoids dock overlap)
Uses canonical stat-cards-row--compact from ui/headers/stat-cards.scss
Only page-specific overrides here.
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
COCKPIT: FINANCIAL STATE FILTER CHIPS
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
COCKPIT: ACTIVITY / QUALITY DROPDOWN FILTERS
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
COCKPIT: LEDGER HEALTH BADGES
Badge visibility: ONLY non-SYNCED states show badges.
Healthy = silent. Unhealthy = visible.
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
TABLE LAYOUT
══════════════════════════════════════════════════════════════════════════ */
/* Non-current branches use a distinct purple/teal tone for visual differentiation */
/* ══════════════════════════════════════════════════════════════════════════
EMPLOYEE LIFECYCLE: "Include Exited" Toggle (Zoho/SAP/Oracle pattern)
Compact inline toggle — appears in glass-table-header for Employees tab.
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
EMPLOYEE LIFECYCLE: Exited Row Dimming
Rows for RESIGNED/TERMINATED/INACTIVE employees are visually muted.
Still interactive for audit/settlement purposes.
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
EMPLOYEE LIFECYCLE: Status Badge (inline with name)
Color-coded by status: RESIGNED=amber, TERMINATED=red, INACTIVE=gray
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
}
.parties-page .erp-header-block .stat-cards-row--financial {
display: flex;
overflow-x: auto;
padding: 4px 24px 12px;
}
.parties-page .cockpit-filter-chips {
display: flex;
gap: 8px;
padding: 8px 16px 12px;
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.parties-page .cockpit-filter-chips::-webkit-scrollbar {
display: none;
}
.parties-page .filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s ease;
}
.parties-page .filter-chip:hover {
border-color: rgba(255, 170, 126, 0.3);
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.06);
}
.parties-page .filter-chip--active {
background: rgba(255, 156, 102, 0.14);
border-color: rgba(255, 170, 126, 0.4);
color: rgba(255, 210, 180, 0.95);
}
.parties-page .filter-chip--active:hover {
background: rgba(255, 156, 102, 0.18);
}
.parties-page .filter-chip-icon {
width: 16px;
height: 16px;
font-size: 16px;
opacity: 0.7;
}
.parties-page .filter-chip--active .filter-chip-icon {
opacity: 1;
color: rgba(255, 180, 140, 0.9);
}
.parties-page .filter-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
font-variant-numeric: tabular-nums;
}
.parties-page .filter-chip--active .filter-chip-count {
background: rgba(255, 180, 140, 0.18);
color: rgba(255, 210, 180, 0.9);
}
.parties-page .cockpit-filter {
min-width: 150px;
}
.parties-page .cockpit-filter .mat-mdc-select {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
.parties-page .cockpit-filter .mat-mdc-select-trigger {
padding: 0 4px;
}
.parties-page .ledger-health-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1.4;
}
.parties-page .ledger-health-badge[data-health=AUTO_CORRECTED] {
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.2);
color: #93c5fd;
}
.parties-page .ledger-health-badge[data-health=PENDING_RETRY] {
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.2);
color: #fcd34d;
}
.parties-page .ledger-health-badge[data-health=DRIFT_DETECTED] {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #fca5a5;
}
.parties-page .parties-page__table-card {
margin-top: 4px;
}
.parties-page .parties-page__table-header {
align-items: flex-end;
padding-top: 16px;
padding-bottom: 12px;
margin-bottom: 0;
}
.parties-page .parties-page__table-header .glass-table-header__right {
margin-left: auto;
}
.parties-page .parties-page__table-header .glass-table-title {
font-size: 1.1rem;
letter-spacing: 0.01em;
}
.parties-page .parties-page__table-header .glass-table-meta {
margin: 0;
}
.parties-page .parties-page__table {
--parties-col-party: 31.5%;
--parties-col-contact: 14%;
--parties-col-context: 17%;
--parties-col-activity: 14%;
--parties-col-balance: 14%;
--parties-col-action: 9.5%;
width: 100%;
min-width: 1180px;
table-layout: fixed;
}
.parties-page .parties-page__table col.col-party {
width: var(--parties-col-party);
}
.parties-page .parties-page__table col.col-contact {
width: var(--parties-col-contact);
}
.parties-page .parties-page__table col.col-context {
width: var(--parties-col-context);
}
.parties-page .parties-page__table col.col-activity {
width: var(--parties-col-activity);
}
.parties-page .parties-page__table col.col-balance {
width: var(--parties-col-balance);
}
.parties-page .parties-page__table col.col-action {
width: var(--parties-col-action);
}
.parties-page .parties-page__table th:nth-child(1),
.parties-page .parties-page__table td:nth-child(1) {
width: var(--parties-col-party);
}
.parties-page .parties-page__table th:nth-child(2),
.parties-page .parties-page__table td:nth-child(2) {
width: var(--parties-col-contact);
}
.parties-page .parties-page__table th:nth-child(3),
.parties-page .parties-page__table td:nth-child(3) {
width: var(--parties-col-context);
}
.parties-page .parties-page__table th:nth-child(4),
.parties-page .parties-page__table td:nth-child(4) {
width: var(--parties-col-activity);
}
.parties-page .parties-page__table th:nth-child(5),
.parties-page .parties-page__table td:nth-child(5) {
width: var(--parties-col-balance);
}
.parties-page .parties-page__table th:nth-child(6),
.parties-page .parties-page__table td:nth-child(6) {
width: var(--parties-col-action);
}
.parties-page .parties-page__table th,
.parties-page .parties-page__table td {
vertical-align: middle;
}
.parties-page .parties-page__table .th-content {
gap: var(--ui-space-2);
}
.parties-page .parties-page__table .th-icon {
color: rgba(255, 130, 90, 0.72);
}
.parties-page .parties-page__table .cell-primary-name,
.parties-page .parties-page__table .cell-primary-sub,
.parties-page .parties-page__table .cell-muted {
overflow: hidden;
text-overflow: ellipsis;
}
.parties-page .parties-page__table .cell-primary-name {
font-size: 15px;
font-weight: 700;
color: rgba(255, 255, 255, 0.96);
white-space: normal;
line-height: 1.3;
}
.parties-page .parties-page__table .cell-primary-sub {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 210, 184, 0.62);
}
.parties-page .parties-page__table .cell-muted {
font-size: 12px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.58);
white-space: normal;
}
.parties-page .party-identity {
display: flex;
align-items: flex-start;
gap: 14px;
min-width: 0;
}
.parties-page .party-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 156, 102, 0.3), rgba(255, 112, 67, 0.14)), rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 170, 126, 0.32);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
color: rgba(255, 238, 228, 0.96);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.parties-page .party-avatar--employee {
background: linear-gradient(135deg, rgba(103, 232, 249, 0.22), rgba(59, 130, 246, 0.14)), rgba(255, 255, 255, 0.04);
border-color: rgba(125, 211, 252, 0.28);
}
.parties-page .party-avatar--vendor {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(249, 115, 22, 0.12)), rgba(255, 255, 255, 0.04);
border-color: rgba(253, 186, 116, 0.28);
}
.parties-page .party-identity__content {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.parties-page .party-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.parties-page .branch-badge,
.parties-page .transfer-badge {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 5px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.parties-page .branch-badge {
background: rgba(96, 165, 250, 0.12);
border: 1px solid rgba(96, 165, 250, 0.24);
color: #bfdbfe;
}
.parties-page .branch-badge--other {
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.28);
color: #c4b5fd;
}
.parties-page .transfer-badge {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.22);
color: #fcd34d;
}
.parties-page .branch-badge-icon,
.parties-page .branch-badge mat-icon,
.parties-page .transfer-badge mat-icon {
width: 14px;
height: 14px;
font-size: 14px;
flex-shrink: 0;
}
.parties-page .party-contact,
.parties-page .party-activity {
gap: 6px;
}
.parties-page .party-classification-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.parties-page .parties-page__table .type-pill {
min-width: 62px;
padding: 2px 8px;
border-radius: 999px;
font-size: 8px;
line-height: 1.25;
justify-content: center;
flex-shrink: 0;
}
.parties-page .party-classification-row__meta {
min-width: 0;
overflow: hidden;
color: rgba(255, 210, 184, 0.62);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.3;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.parties-page .parties-page__table .type-pill.muted {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
.parties-page .party-contact .cell-stacked-primary {
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
font-variant-numeric: tabular-nums;
}
.parties-page .parties-page__table .cell-meta {
padding-right: 8px;
}
.parties-page .parties-page__table .meta-wrapper {
gap: 6px;
}
.parties-page .parties-page__table .meta-label {
color: rgba(255, 180, 140, 0.8);
}
.parties-page .parties-page__table .meta-text {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.86);
white-space: normal;
line-height: 1.35;
}
.parties-page .party-activity__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 196, 167, 0.56);
}
.parties-page .party-activity .cell-stacked-primary {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.84);
}
.parties-page .party-activity__empty {
color: rgba(255, 255, 255, 0.5);
}
.parties-page .cell-balance {
white-space: nowrap;
}
.parties-page .party-balance {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.parties-page .parties-page__table .revenue-amount {
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.parties-page .parties-page__table .revenue-amount.zero {
color: rgba(255, 255, 255, 0.42);
}
.parties-page .party-balance__state {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.parties-page .party-balance__state--danger {
color: rgba(255, 184, 150, 0.92);
}
.parties-page .party-balance__state--success {
color: rgba(134, 239, 172, 0.9);
}
.parties-page .party-avatar--has-image {
padding: 0;
overflow: hidden;
background: none;
border-color: rgba(255, 255, 255, 0.15);
}
.parties-page .party-avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.parties-page .parties-page__table .empty-state {
text-align: center;
}
.parties-page .parties-page__table .data-row:hover .party-avatar {
border-color: rgba(255, 190, 154, 0.44);
transform: translateY(-1px);
}
.parties-page .glass-table-meta__hint {
color: rgba(251, 191, 36, 0.7);
font-style: italic;
}
.parties-page .exited-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 4px 12px 4px 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.parties-page .exited-toggle:hover {
border-color: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.05);
}
.parties-page .exited-toggle--active {
border-color: rgba(251, 191, 36, 0.28);
background: rgba(251, 191, 36, 0.08);
color: rgba(253, 224, 71, 0.9);
}
.parties-page .exited-toggle--active:hover {
border-color: rgba(251, 191, 36, 0.4);
background: rgba(251, 191, 36, 0.12);
}
.parties-page .exited-toggle__icon {
width: 20px;
height: 20px;
font-size: 20px;
line-height: 20px;
transition: color 0.2s ease;
}
.parties-page .exited-toggle--active .exited-toggle__icon {
color: rgba(251, 191, 36, 0.9);
}
.parties-page .exited-toggle__label {
line-height: 1;
}
.parties-page .parties-page__table .data-row--exited {
opacity: 0.55;
transition: opacity 0.2s ease;
}
.parties-page .parties-page__table .data-row--exited:hover {
opacity: 0.82;
}
.parties-page .parties-page__table .data-row--exited .party-avatar {
filter: grayscale(0.5);
}
.parties-page .parties-page__table .data-row--exited:hover .party-avatar {
filter: grayscale(0.15);
}
.parties-page .employee-status-badge {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 2px 8px;
border-radius: 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
line-height: 1.4;
}
.parties-page .employee-status-badge[data-status=RESIGNED] {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.24);
color: #fcd34d;
}
.parties-page .employee-status-badge[data-status=TERMINATED] {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.24);
color: #fca5a5;
}
.parties-page .employee-status-badge[data-status=INACTIVE] {
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.22);
color: #94a3b8;
}
@media (max-width: 1280px) {
.parties-page .parties-page__table {
--parties-col-party: 33%;
--parties-col-contact: 14%;
--parties-col-context: 15%;
--parties-col-activity: 12%;
--parties-col-balance: 15%;
--parties-col-action: 11%;
min-width: 1080px;
}
}
@media (max-width: 1024px) {
.parties-page .parties-page__table {
--parties-col-party: 32.5%;
--parties-col-contact: 20%;
--parties-col-context: 20%;
--parties-col-balance: 16.5%;
--parties-col-action: 11%;
min-width: 940px;
}
.parties-page .parties-page__table col.col-activity {
display: none;
}
.parties-page .parties-page__table th:nth-child(4),
.parties-page .parties-page__table td:nth-child(4) {
display: none;
}
}
@media (max-width: 768px) {
.parties-page .parties-page__table-card {
margin-top: 8px;
}
.parties-page .parties-page__table-header {
align-items: stretch;
}
.parties-page .parties-page__table-header .glass-table-header__right {
width: 100%;
margin-left: 0;
}
.parties-page .parties-page__table {
--parties-col-party: 42.5%;
--parties-col-contact: 25%;
--parties-col-balance: 21.5%;
--parties-col-action: 11%;
min-width: 820px;
}
.parties-page .parties-page__table col.col-context {
display: none;
}
.parties-page .parties-page__table th:nth-child(3),
.parties-page .parties-page__table td:nth-child(3) {
display: none;
}
}
/* ══════════════════════════════════════════════════════════════════════════
COCKPIT: Dropdown panel width fix (global overlay — must be outside .parties-page)
Prevents truncated "Unl... Par..." text in Activity/Quality dropdowns.
══════════════════════════════════════════════════════════════════════════ */
.cockpit-select-panel {
min-width: 220px;
}
/* Prevent mat-select inside cockpit pill-filters from expanding beyond content width */
.cockpit-filter .mat-mdc-select {
width: auto !important;
}
/* Force mat-select trigger to shrink to fit-content — prevents 180px default min-width */
.cockpit-filter mat-select,
.cockpit-filter .mat-mdc-select,
.cockpit-filter .mat-mdc-select-trigger {
width: fit-content !important;
min-width: 0 !important;
}
/* Scoped page contracts */
/* ==========================================================================
CRM LEADS PAGE — Scoped Page-Level Contract
==========================================================================
This contract provides page-specific styling for /console/lead/list.
SCOPE: All styles scoped under .crm-leads-page root class.
USES:
- ui/tables/glass-table.scss for table base
- ui/tables/data-table.scss for cell semantics
- ui/headers/stat-cards.scss for stat cards
PROVIDES:
- Pipeline stats widget
- Lead table card container
- Lead-specific column layouts
- Source pill color variants
- Timeline cell styling
========================================================================== */
.crm-leads-page {
/* ==========================================================================
PIPELINE STATS - Horizontal bar with hot/warm/cold pills
========================================================================== */
/* ==========================================================================
LEAD TABLE CARD - Glass morphism container
========================================================================== */
/* ==========================================================================
TABLE COLUMN WIDTHS
========================================================================== */
/* ==========================================================================
LEAD INFO CELL - Name + ID badge + contact
========================================================================== */
/* ==========================================================================
CAR CELL
========================================================================== */
/* ==========================================================================
SOURCE CELL & PILLS - Color-coded source indicators
========================================================================== */
/* ==========================================================================
TIMELINE CELL - Created/Follow-up with dots
========================================================================== */
/* ==========================================================================
PHASE 25: SCORE BADGE
========================================================================== */
/* ==========================================================================
PHASE 25: TOUCHPOINT CHAIN
========================================================================== */
/* ==========================================================================
PHASE 25: ACTIVITY COLUMN
========================================================================== */
/* ==========================================================================
BRANCH CELL
========================================================================== */
/* ==========================================================================
ACTION BUTTONS
========================================================================== */
/* ==========================================================================
SKELETON LOADERS
========================================================================== */
/* Progress bar styling */
}
.crm-leads-page .pipeline-stats {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
backdrop-filter: blur(12px);
}
.crm-leads-page .pipeline-label {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
}
.crm-leads-page .pipeline-total {
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
min-width: 18px;
text-align: center;
}
.crm-leads-page .pipeline-divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.15);
margin: 0 2px;
}
.crm-leads-page .pipeline-pills {
display: flex;
align-items: center;
gap: 4px;
}
.crm-leads-page .pipeline-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
transition: all 0.2s ease;
cursor: default;
background: transparent;
border: none;
}
.crm-leads-page .pipeline-pill img {
width: 16px;
height: 16px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.crm-leads-page .pipeline-pill.hot {
color: #FF8A65;
}
.crm-leads-page .pipeline-pill.warm {
color: #FFB74D;
}
.crm-leads-page .pipeline-pill.cold {
color: #64B5F6;
}
.crm-leads-page .pipeline-pill:hover {
transform: scale(1.05);
}
.crm-leads-page .lead-table-card {
--gdt-radius: 28px;
--gdt-surface: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
--gdt-border: rgba(255, 255, 255, 0.06);
--gdt-border-light: rgba(255, 255, 255, 0.08);
--gdt-border-subtle: rgba(255, 255, 255, 0.05);
--gdt-accent-light: rgba(255, 130, 90, 0.7);
margin-top: 12px;
max-height: none;
}
.crm-leads-page .lead-table-scroll {
max-height: calc(100vh - 310px);
overflow-y: auto;
}
.crm-leads-page .lead-list-table {
min-width: 1728px;
}
.crm-leads-page .lead-list-table tbody {
max-height: none;
overflow-y: visible;
}
.crm-leads-page .lead-list-table .th-content {
gap: var(--ui-space-2);
}
.crm-leads-page .lead-list-table .th-icon {
color: rgba(255, 130, 90, 0.7);
}
.crm-leads-page .lead-list-table .empty td {
text-align: center;
padding: 64px 16px;
color: rgba(255, 255, 255, 0.5);
font-size: 15px;
font-weight: 400;
}
.crm-leads-page .lead-list-table col.lead-col {
width: 720px;
}
.crm-leads-page .lead-list-table col.car-col {
width: 200px;
}
.crm-leads-page .lead-list-table col.source-col {
width: 150px;
}
.crm-leads-page .lead-list-table col.score-col {
width: 70px;
}
.crm-leads-page .lead-list-table col.timeline-col {
width: 180px;
}
.crm-leads-page .lead-list-table col.activity-col {
width: 120px;
}
.crm-leads-page .lead-list-table col.response-col {
width: 100px;
}
.crm-leads-page .lead-list-table col.manager-col {
width: 150px;
}
.crm-leads-page .lead-list-table col.branch-col {
width: 180px;
}
.crm-leads-page .lead-list-table col.actions-col {
width: 88px;
}
.crm-leads-page .lead-info-cell {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
width: 100%;
}
.crm-leads-page .potential-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.crm-leads-page .potential-icon img {
width: 20px;
height: 20px;
}
.crm-leads-page .lead-info-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.crm-leads-page .lead-name-row {
display: flex;
align-items: center;
margin-bottom: 2px;
width: 100%;
}
.crm-leads-page .lead-name {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
max-width: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-leads-page .lead-id-badge-sm {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
padding: 1px 7px;
background: rgba(255, 140, 80, 0.15);
border: 1px solid rgba(255, 140, 80, 0.35);
border-radius: 999px;
color: #ffb083;
font-family: var(--ui-font-mono);
font-size: 8px;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 14px;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
transition: all 0.2s ease;
}
.crm-leads-page .lead-id-badge-sm:hover {
background: rgba(255, 140, 80, 0.25);
border-color: rgba(255, 140, 80, 0.5);
}
.crm-leads-page .lead-secondary {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.crm-leads-page .lead-contact {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.02em;
}
.crm-leads-page .lead-type-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1px 6px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 999px;
white-space: nowrap;
transition: all 0.2s ease;
}
.crm-leads-page .lead-type-pill--new {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.crm-leads-page .lead-type-pill--old {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.crm-leads-page .car-cell {
padding-top: 8px !important;
padding-bottom: 8px !important;
vertical-align: middle;
text-align: left;
}
.crm-leads-page .car-model {
display: block;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 4px;
}
.crm-leads-page .car-reg {
display: block;
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.02em;
margin-bottom: 2px;
}
.crm-leads-page .segment-pill {
display: inline-block;
padding: 2px 8px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.03em;
border-radius: 999px;
background: rgba(139, 92, 246, 0.15);
color: #a78bfa;
border: 1px solid rgba(139, 92, 246, 0.3);
}
.crm-leads-page .source-cell {
text-align: center;
vertical-align: middle;
}
.crm-leads-page .source-pill {
display: inline-block;
padding: 4px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 999px;
white-space: nowrap;
text-transform: capitalize;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.crm-leads-page .source-pill--website {
background: rgba(255, 152, 0, 0.15);
color: #ffb74d;
border-color: rgba(255, 152, 0, 0.3);
}
.crm-leads-page .source-pill--instagram {
background: linear-gradient(135deg, rgba(225, 48, 108, 0.2), rgba(193, 53, 132, 0.2));
color: #f06292;
border-color: rgba(225, 48, 108, 0.4);
}
.crm-leads-page .source-pill--knowlarity {
background: rgba(0, 188, 212, 0.12);
color: #4dd0e1;
border-color: rgba(0, 188, 212, 0.3);
}
.crm-leads-page .source-pill--facebook {
background: rgba(66, 103, 178, 0.15);
color: #8b9dc3;
border-color: rgba(66, 103, 178, 0.3);
}
.crm-leads-page .source-pill--whatsapp {
background: rgba(37, 211, 102, 0.12);
color: #69f0ae;
border-color: rgba(37, 211, 102, 0.3);
}
.crm-leads-page .source-pill--justdial {
background: rgba(255, 235, 59, 0.12);
color: #fff176;
border-color: rgba(255, 235, 59, 0.3);
}
.crm-leads-page .source-pill--chat {
background: rgba(156, 39, 176, 0.12);
color: #ce93d8;
border-color: rgba(156, 39, 176, 0.3);
}
.crm-leads-page .source-pill--call {
background: rgba(33, 150, 243, 0.12);
color: #64b5f6;
border-color: rgba(33, 150, 243, 0.3);
}
.crm-leads-page .source-pill--android {
background: rgba(76, 175, 80, 0.12);
color: #81c784;
border-color: rgba(76, 175, 80, 0.3);
}
.crm-leads-page .source-pill--psf {
background: rgba(244, 67, 54, 0.12);
color: #ef9a9a;
border-color: rgba(244, 67, 54, 0.3);
}
.crm-leads-page .source-pill--voice-ai {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(139, 92, 246, 0.12));
color: #c4b5fd;
border-color: rgba(139, 92, 246, 0.4);
font-weight: 700;
}
.crm-leads-page .source-pill--intelligence {
background: rgba(99, 102, 241, 0.12);
color: #a5b4fc;
border-color: rgba(99, 102, 241, 0.3);
}
.crm-leads-page .timeline-cell {
text-align: left;
}
.crm-leads-page .timeline-dates {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
position: relative;
padding-left: 0;
}
.crm-leads-page .timeline-item {
display: flex;
align-items: flex-start;
gap: 10px;
position: relative;
}
.crm-leads-page .timeline-dot {
width: 8px;
height: 8px;
min-width: 8px;
border-radius: 50%;
margin-top: 3px;
position: relative;
z-index: 1;
}
.crm-leads-page .timeline-item.created .timeline-dot {
background: linear-gradient(135deg, #ff6a3a, #ff8a5c);
box-shadow: 0 0 6px rgba(255, 106, 58, 0.5);
}
.crm-leads-page .timeline-item.followup .timeline-dot {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}
.crm-leads-page .timeline-content {
display: flex;
flex-direction: column;
gap: 1px;
}
.crm-leads-page .timeline-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.45);
}
.crm-leads-page .timeline-value {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}
.crm-leads-page .timeline-item.followup .timeline-value {
color: #fbbf24;
}
.crm-leads-page .response-cell {
text-align: center;
white-space: nowrap;
}
.crm-leads-page .score-cell {
text-align: center;
vertical-align: middle;
}
.crm-leads-page .score-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
letter-spacing: -0.02em;
}
.crm-leads-page .score--high {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
border: 1.5px solid rgba(34, 197, 94, 0.4);
}
.crm-leads-page .score--mid {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
border: 1.5px solid rgba(245, 158, 11, 0.4);
}
.crm-leads-page .score--low {
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
border: 1.5px solid rgba(239, 68, 68, 0.3);
}
.crm-leads-page .score-label {
display: block;
font-size: 8px;
font-weight: 700;
margin-top: 3px;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.crm-leads-page .score-label--hot {
color: #22c55e;
}
.crm-leads-page .score-label--warm {
color: #f59e0b;
}
.crm-leads-page .score-label--cold {
color: #94a3b8;
}
.crm-leads-page .tp-chain-cell {
display: flex;
flex-wrap: wrap;
gap: 2px;
max-width: 150px;
}
.crm-leads-page .tp-chain-pill {
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}
.crm-leads-page .tp-chain-arrow {
color: rgba(255, 255, 255, 0.3);
font-size: 10px;
}
.crm-leads-page .activity-cell {
vertical-align: middle;
text-align: center;
}
.crm-leads-page .activity-signals {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.crm-leads-page .activity-last {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
}
.crm-leads-page .overdue-badge {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
animation: overduePulse 2s ease-in-out infinite;
}
@keyframes overduePulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.crm-leads-page .next-action {
font-size: 9px;
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
}
.crm-leads-page .branch-cell {
vertical-align: middle;
}
.crm-leads-page .branch-cell .cell-strong {
max-width: 140px;
}
.crm-leads-page .branch-cell .city-subtle {
display: block;
margin-top: 2px;
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
font-weight: 400;
}
.crm-leads-page .branch-name {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}
.crm-leads-page .action-buttons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.crm-leads-page .action-icon {
width: 20px;
height: 20px;
opacity: 0.8;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.crm-leads-page .action-icon:hover {
opacity: 1;
transform: scale(1.05);
}
.crm-leads-page .skeleton-row td {
border-bottom-color: rgba(255, 255, 255, 0.02);
}
.crm-leads-page .skeleton-box {
display: block;
width: 100%;
height: 14px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
background-size: 200% 100%;
animation: skeletonShimmer 1.3s ease-in-out infinite;
}
.crm-leads-page .skeleton-line {
margin-bottom: 8px;
}
.crm-leads-page .skeleton-line.short {
width: 40%;
}
.crm-leads-page .skeleton-line.medium {
width: 65%;
}
.crm-leads-page .skeleton-pill {
width: 72px;
height: 18px;
margin-left: auto;
border-radius: 999px;
}
@keyframes skeletonShimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.crm-leads-page .mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {
background-color: rgba(255, 255, 255, 0.08);
}
.crm-leads-page .mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
border-color: #E94526;
}
.ui-page--contacts .contacts-page {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.ui-page--contacts .erp-header-primary {
gap: var(--ui-space-5);
align-items: flex-start;
}
.ui-page--contacts .erp-header-primary .header-right {
margin-left: auto;
}
.ui-page--contacts .contacts-page__header-tabs {
margin: 0;
}
.ui-page--contacts .contacts-page__header-tabs .pill-tab-btn {
min-width: 132px;
justify-content: center;
}
.ui-page--contacts .contacts-page__stats-row {
padding-top: 0;
}
.ui-page--contacts .contacts-page__stats-row .stat-card {
min-width: 170px;
}
.ui-page--contacts .contacts-page__active-filters-bar {
padding-top: 4px;
}
.ui-page--contacts .contacts-page__clear-filters {
margin-left: auto;
}
.ui-page--contacts .contacts-page__filter-row {
align-items: center;
justify-content: flex-start;
}
.ui-page--contacts .contacts-page__filter-row .filter-group {
margin-left: 0;
}
.ui-page--contacts .contacts-page__branch-filter {
margin-inline-end: 12px;
}
.ui-page--contacts .contacts-page__search {
flex: 1 1 320px;
max-width: 360px;
margin-right: auto;
}
.ui-page--contacts .contacts-page__filter-summary {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ui-page--contacts .contacts-page__summary-pill {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.ui-page--contacts .contacts-page__summary-pill--accent {
color: rgba(255, 192, 150, 0.96);
border-color: rgba(255, 150, 110, 0.22);
background: rgba(255, 140, 90, 0.1);
}
.ui-page--contacts .contacts-page__filter-pills,
.ui-page--contacts .contacts-page__filter-actions {
gap: 8px;
flex-wrap: wrap;
}
.ui-page--contacts .contacts-page__filter-actions {
margin-left: auto;
justify-content: flex-end;
}
.ui-page--contacts .contacts-page__view-toggle {
margin: 0;
}
.ui-page--contacts .contacts-page__view-toggle .pill-tab-btn {
min-width: 76px;
justify-content: center;
}
.ui-page--contacts .contacts-page__tab-panel {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.ui-page--contacts .contacts-list-tab {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.ui-page--contacts .selection-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.ui-page--contacts .selection-info {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-right: auto;
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
font-weight: 600;
}
.ui-page--contacts .select-all-link,
.ui-page--contacts .clear-selection-link {
color: rgba(255, 176, 131, 0.92);
cursor: pointer;
text-decoration: none;
}
.ui-page--contacts .select-all-link:hover,
.ui-page--contacts .clear-selection-link:hover {
color: rgba(255, 205, 180, 0.98);
}
.ui-page--contacts .contacts-page__table-card {
max-height: min(72vh, 920px);
}
.ui-page--contacts .contacts-page__table {
min-width: 1320px;
}
.ui-page--contacts .contacts-page__table th:nth-child(1),
.ui-page--contacts .contacts-page__table td:nth-child(1) {
width: 56px;
}
.ui-page--contacts .contacts-page__table th:nth-child(2),
.ui-page--contacts .contacts-page__table td:nth-child(2) {
width: 18%;
}
.ui-page--contacts .contacts-page__table th:nth-child(3),
.ui-page--contacts .contacts-page__table td:nth-child(3) {
width: 11%;
}
.ui-page--contacts .contacts-page__table th:nth-child(4),
.ui-page--contacts .contacts-page__table td:nth-child(4),
.ui-page--contacts .contacts-page__table th:nth-child(5),
.ui-page--contacts .contacts-page__table td:nth-child(5) {
width: 11%;
}
.ui-page--contacts .contacts-page__table th:nth-child(6),
.ui-page--contacts .contacts-page__table td:nth-child(6) {
width: 11%;
}
.ui-page--contacts .contacts-page__table th:nth-child(7),
.ui-page--contacts .contacts-page__table td:nth-child(7),
.ui-page--contacts .contacts-page__table th:nth-child(8),
.ui-page--contacts .contacts-page__table td:nth-child(8) {
width: 12%;
}
.ui-page--contacts .contacts-page__table th:nth-child(9),
.ui-page--contacts .contacts-page__table td:nth-child(9),
.ui-page--contacts .contacts-page__table th:nth-child(10),
.ui-page--contacts .contacts-page__table td:nth-child(10) {
width: 10%;
}
.ui-page--contacts .contacts-page__table th:nth-child(11),
.ui-page--contacts .contacts-page__table td:nth-child(11) {
width: 92px;
}
.ui-page--contacts .contacts-page__table .cell-primary-name,
.ui-page--contacts .contacts-page__table .cell-primary-sub,
.ui-page--contacts .contacts-page__table .cell-muted {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-page--contacts .contacts-page__contact-type {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.74);
}
.ui-page--contacts .contacts-page__contact-type.type-customer {
background: rgba(255, 188, 126, 0.1);
border-color: rgba(255, 176, 131, 0.2);
color: rgba(255, 216, 194, 0.94);
}
.ui-page--contacts .contacts-page__contact-type.type-lead {
background: rgba(121, 162, 255, 0.12);
border-color: rgba(121, 162, 255, 0.2);
color: rgba(180, 210, 255, 0.95);
}
.ui-page--contacts .contacts-page__table .action-buttons {
justify-content: flex-end;
}
.ui-page--contacts .ui-table-pagination, .ui-page--contacts .glass-pagination {
margin-top: 0;
}
body:has(.ui-page--contacts) .mat-mdc-select-panel.contacts-branch-panel {
width: min(360px, 100vw - 32px) !important;
max-width: min(360px, 100vw - 32px) !important;
}
body:has(.ui-page--contacts) .cdk-overlay-pane:has(.contacts-branch-panel) {
margin-inline-start: -12px;
max-width: calc(100vw - 32px) !important;
}
.ui-page--contacts app-contacts-map-view,
.ui-page--contacts app-lists-tags-tab {
display: block;
}
body.map-fullscreen-active {
overflow: hidden !important;
}
body.map-fullscreen-active .careager-topbar,
body.map-fullscreen-active .navbar-custom.careager-topbar,
body.map-fullscreen-active app-console-header,
body.map-fullscreen-active app-console-sidebar,
body.map-fullscreen-active .left-side-menu,
body.map-fullscreen-active .left-side-menu.glass-sidebar {
opacity: 0;
pointer-events: none;
}
app-contacts-map-view .contacts-map {
position: relative;
}
app-contacts-map-view .contacts-map__backdrop {
position: fixed;
inset: 0;
background: rgba(6, 6, 8, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1190;
}
app-contacts-map-view .contacts-map__surface {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
app-contacts-map-view .contacts-map__surface--fullscreen {
position: fixed;
inset: 18px;
z-index: 1200;
padding: var(--ui-space-4);
border-radius: 28px;
background: radial-gradient(circle at top right, rgba(255, 135, 71, 0.12), transparent 42%), rgba(11, 9, 12, 0.84);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
app-contacts-map-view .contacts-map__surface--fullscreen .contacts-map__frame {
flex: 1 1 auto;
min-height: 0;
height: auto;
}
app-contacts-map-view .contacts-map__toolbar {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 0;
padding: 18px;
}
app-contacts-map-view .contacts-map__toolbar-row {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
}
app-contacts-map-view .contacts-map__toolbar-row--secondary {
align-items: center;
}
app-contacts-map-view .contacts-map__search-stack {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 220px;
flex: 1 1 260px;
}
app-contacts-map-view .contacts-map__search-stack--wide {
flex-basis: 280px;
}
app-contacts-map-view .contacts-map__field-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
app-contacts-map-view .contacts-map__search {
min-height: 46px;
}
app-contacts-map-view .contacts-map__results-panel {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(17, 14, 19, 0.94);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
z-index: 12;
}
app-contacts-map-view .contacts-map__result-item {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: none;
border-radius: 14px;
background: transparent;
color: rgba(255, 255, 255, 0.84);
text-align: left;
cursor: pointer;
transition: 0.18s ease;
}
app-contacts-map-view .contacts-map__result-item:hover {
background: rgba(255, 255, 255, 0.06);
}
app-contacts-map-view .contacts-map__result-item mat-icon {
width: 18px;
height: 18px;
font-size: 18px;
margin-top: 1px;
color: rgba(255, 180, 133, 0.92);
}
app-contacts-map-view .contacts-map__result-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
app-contacts-map-view .contacts-map__result-name {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
app-contacts-map-view .contacts-map__result-meta {
font-size: 12px;
color: rgba(255, 255, 255, 0.54);
text-transform: capitalize;
}
app-contacts-map-view .contacts-map__toolbar-actions {
display: flex;
align-items: flex-end;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
app-contacts-map-view .contacts-map__toolbar-icon {
width: 42px;
height: 42px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
app-contacts-map-view .contacts-map__summary-pills,
app-contacts-map-view .contacts-map__control-groups {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
app-contacts-map-view .contacts-map__control-groups {
margin-left: auto;
}
app-contacts-map-view .contacts-map__toggle-group {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
app-contacts-map-view .contacts-map__toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: 0.18s ease;
}
app-contacts-map-view .contacts-map__toggle-btn mat-icon {
width: 16px;
height: 16px;
font-size: 16px;
}
app-contacts-map-view .contacts-map__toggle-btn:hover {
color: rgba(255, 255, 255, 0.88);
background: rgba(255, 255, 255, 0.06);
}
app-contacts-map-view .contacts-map__toggle-btn.active {
color: rgba(255, 222, 206, 0.98);
background: rgba(255, 145, 91, 0.16);
border-color: rgba(255, 145, 91, 0.24);
}
app-contacts-map-view .contacts-map__toggle-group--muted .contacts-map__toggle-btn.active {
color: rgba(196, 218, 255, 0.98);
background: rgba(99, 146, 255, 0.16);
border-color: rgba(99, 146, 255, 0.22);
}
app-contacts-map-view .contacts-map__frame {
position: relative;
height: clamp(540px, 72vh, 820px);
min-height: 540px;
overflow: hidden;
margin-bottom: 0;
}
app-contacts-map-view .contacts-map__container {
width: 100%;
height: 100%;
background: rgba(16, 12, 18, 0.82);
}
app-contacts-map-view .contacts-map__loading,
app-contacts-map-view .contacts-map__skeleton,
app-contacts-map-view .contacts-map__error {
position: absolute;
z-index: 10;
}
app-contacts-map-view .contacts-map__loading {
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(15, 12, 17, 0.88);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.76);
font-size: 13px;
font-weight: 600;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
app-contacts-map-view .contacts-map__loading-spinner {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.18);
border-top-color: rgba(255, 164, 121, 0.95);
animation: contacts-map-spin 0.75s linear infinite;
}
app-contacts-map-view .contacts-map__skeleton,
app-contacts-map-view .contacts-map__error {
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
app-contacts-map-view .contacts-map__skeleton {
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), rgba(14, 11, 16, 0.94);
}
app-contacts-map-view .contacts-map__skeleton-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 84px 84px;
opacity: 0.4;
}
app-contacts-map-view .contacts-map__skeleton-pulse {
width: min(520px, 80%);
height: min(320px, 44%);
border-radius: 28px;
background: radial-gradient(circle at center, rgba(255, 143, 88, 0.16), transparent 70%);
filter: blur(20px);
animation: contacts-map-pulse 1.8s ease-in-out infinite;
}
app-contacts-map-view .contacts-map__error {
flex-direction: column;
gap: 12px;
padding: 24px;
text-align: center;
color: rgba(255, 255, 255, 0.8);
background: rgba(11, 9, 12, 0.84);
}
app-contacts-map-view .contacts-map__error mat-icon {
width: 32px;
height: 32px;
font-size: 32px;
color: rgba(255, 132, 102, 0.96);
}
app-contacts-map-view .contacts-map__error h3 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: rgba(255, 255, 255, 0.96);
}
app-contacts-map-view .contacts-map__error p {
margin: 0;
max-width: 420px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.66);
}
app-contacts-map-view .contacts-map__notice-stack {
position: absolute;
left: 16px;
bottom: 16px;
display: flex;
flex-direction: column;
gap: 8px;
max-width: min(420px, 100% - 32px);
z-index: 14;
pointer-events: none;
}
app-contacts-map-view .contacts-map__notice {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(15, 12, 17, 0.92);
color: rgba(255, 255, 255, 0.76);
font-size: 13px;
font-weight: 500;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
app-contacts-map-view .contacts-map__notice mat-icon {
width: 16px;
height: 16px;
font-size: 16px;
color: rgba(255, 176, 131, 0.94);
}
app-contacts-map-view .contacts-map__drawer {
position: absolute;
top: 16px;
right: 16px;
bottom: 16px;
width: min(360px, 100% - 32px);
z-index: 18;
display: flex;
flex-direction: column;
gap: 16px;
padding: 18px;
overflow: auto;
}
app-contacts-map-view .contacts-map__drawer-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
app-contacts-map-view .contacts-map__drawer-title {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
app-contacts-map-view .contacts-map__drawer-title h3 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: rgba(255, 255, 255, 0.94);
}
app-contacts-map-view .contacts-map__entity-badge {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
app-contacts-map-view .contacts-map__entity-badge--customer {
color: rgba(255, 224, 208, 0.96);
background: rgba(255, 144, 87, 0.14);
border-color: rgba(255, 144, 87, 0.22);
}
app-contacts-map-view .contacts-map__entity-badge--lead {
color: rgba(191, 215, 255, 0.96);
background: rgba(103, 150, 255, 0.14);
border-color: rgba(103, 150, 255, 0.2);
}
app-contacts-map-view .contacts-map__entity-badge--lost {
color: rgba(255, 202, 196, 0.96);
background: rgba(240, 102, 81, 0.14);
border-color: rgba(240, 102, 81, 0.22);
}
app-contacts-map-view .contacts-map__drawer-body {
display: flex;
flex-direction: column;
gap: 16px;
}
app-contacts-map-view .contacts-map__detail-list,
app-contacts-map-view .contacts-map__stats-grid,
app-contacts-map-view .contacts-map__drawer-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
app-contacts-map-view .contacts-map__detail-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
app-contacts-map-view .contacts-map__detail-row mat-icon {
width: 18px;
height: 18px;
font-size: 18px;
margin-top: 1px;
color: rgba(255, 176, 131, 0.92);
}
app-contacts-map-view .contacts-map__detail-row > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
app-contacts-map-view .contacts-map__detail-label,
app-contacts-map-view .contacts-map__stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.46);
}
app-contacts-map-view .contacts-map__detail-value,
app-contacts-map-view .contacts-map__stat-card strong {
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
}
app-contacts-map-view .contacts-map__stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
app-contacts-map-view .contacts-map__stat-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
app-contacts-map-view .contacts-map__zoom-controls {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 16;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
}
app-contacts-map-view .contacts-map__zoom-controls .ui-icon-btn {
width: 36px;
height: 36px;
}
app-contacts-map-view .contacts-map__fullscreen-hint {
position: absolute;
right: 16px;
bottom: 84px;
z-index: 16;
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 14px;
border-radius: 999px;
background: rgba(15, 12, 17, 0.88);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
font-weight: 600;
}
app-lists-tags-tab .contacts-lists-tags {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-4);
}
app-lists-tags-tab .contacts-lists-tags__panel {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 360px;
margin-bottom: 0;
}
app-lists-tags-tab .contacts-lists-tags__panel-header {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
app-lists-tags-tab .contacts-lists-tags__eyebrow-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
app-lists-tags-tab .contacts-lists-tags__panel-copy {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
max-width: 34ch;
}
app-lists-tags-tab .contacts-lists-tags__panel-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.02em;
line-height: 1.15;
}
app-lists-tags-tab .contacts-lists-tags__panel-subtitle {
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 13px;
line-height: 1.4;
}
app-lists-tags-tab .contacts-lists-tags__toolbar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: center;
}
app-lists-tags-tab .contacts-lists-tags__input-group {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
app-lists-tags-tab .contacts-lists-tags__search,
app-lists-tags-tab .contacts-lists-tags__create-input {
min-width: 0;
flex: 1 1 auto;
}
app-lists-tags-tab .contacts-lists-tags__input-group .pill-btn-add,
app-lists-tags-tab .contacts-lists-tags__input-group .pill-btn-secondary {
flex: 0 0 auto;
}
app-lists-tags-tab .contacts-lists-tags__content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
app-lists-tags-tab .contacts-lists-tags__items {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
}
app-lists-tags-tab .contacts-lists-tags__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.03);
transition: 0.18s ease;
}
app-lists-tags-tab .contacts-lists-tags__item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 176, 131, 0.12);
}
app-lists-tags-tab .contacts-lists-tags__item-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
app-lists-tags-tab .contacts-lists-tags__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(255, 145, 91, 0.12);
border: 1px solid rgba(255, 145, 91, 0.18);
color: rgba(255, 190, 150, 0.96);
}
app-lists-tags-tab .contacts-lists-tags__item-icon--list {
background: rgba(115, 151, 255, 0.12);
border-color: rgba(115, 151, 255, 0.18);
color: rgba(194, 214, 255, 0.96);
}
app-lists-tags-tab .contacts-lists-tags__item-copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
app-lists-tags-tab .contacts-lists-tags__item-title {
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
app-lists-tags-tab .contacts-lists-tags__item-meta {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
app-lists-tags-tab .contacts-lists-tags__empty {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 168px;
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: 16px;
color: rgba(255, 255, 255, 0.58);
text-align: center;
}
app-lists-tags-tab .contacts-lists-tags__empty mat-icon {
width: 22px;
height: 22px;
font-size: 22px;
color: rgba(255, 176, 131, 0.88);
}
@keyframes contacts-map-spin {
to {
transform: rotate(360deg);
}
}
@keyframes contacts-map-pulse {
0%, 100% {
opacity: 0.45;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.04);
}
}
@media (max-width: 1200px) {
.ui-page--contacts .contacts-page__filter-summary {
order: 3;
width: 100%;
}
.ui-page--contacts .contacts-page__filter-actions {
width: 100%;
margin-left: 0;
justify-content: flex-start;
}
app-contacts-map-view .contacts-map__toolbar-actions,
app-contacts-map-view .contacts-map__control-groups {
margin-left: 0;
}
app-contacts-map-view .contacts-map__drawer {
width: min(340px, 100% - 32px);
}
app-lists-tags-tab .contacts-lists-tags {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.ui-page--contacts .erp-header-primary {
flex-direction: column;
align-items: stretch;
}
.ui-page--contacts .erp-header-primary .header-right {
margin-left: 0;
}
.ui-page--contacts .contacts-page__header-tabs {
width: 100%;
}
.ui-page--contacts .selection-bar {
flex-direction: column;
align-items: stretch;
}
app-contacts-map-view .contacts-map__toolbar {
padding: 14px;
}
app-contacts-map-view .contacts-map__frame {
min-height: 500px;
height: min(68vh, 680px);
}
app-contacts-map-view .contacts-map__drawer {
top: auto;
left: 16px;
right: 16px;
bottom: 16px;
width: auto;
max-height: min(58%, 420px);
}
app-contacts-map-view .contacts-map__stats-grid {
grid-template-columns: 1fr;
}
app-contacts-map-view .contacts-map__zoom-controls {
right: 12px;
bottom: 12px;
}
app-lists-tags-tab .contacts-lists-tags__toolbar {
grid-template-columns: 1fr;
}
app-lists-tags-tab .contacts-lists-tags__input-group,
app-lists-tags-tab .contacts-lists-tags__item {
flex-direction: column;
align-items: stretch;
}
app-lists-tags-tab .contacts-lists-tags__panel-copy {
max-width: none;
}
app-lists-tags-tab .contacts-lists-tags__item-actions {
justify-content: flex-end;
}
}
@media (max-width: 640px) {
app-contacts-map-view .contacts-map__surface--fullscreen {
inset: 8px;
padding: 8px;
border-radius: 20px;
}
app-contacts-map-view .contacts-map__toolbar-row {
flex-direction: column;
align-items: stretch;
}
app-contacts-map-view .contacts-map__toolbar-actions,
app-contacts-map-view .contacts-map__control-groups {
width: 100%;
justify-content: flex-start;
}
app-contacts-map-view .contacts-map__toggle-group {
width: 100%;
overflow: auto;
}
app-contacts-map-view .contacts-map__fullscreen-hint {
left: 12px;
right: 12px;
bottom: 12px;
}
}
.ui-page--recovery-center .recovery-center-page {
display: flex;
flex-direction: column;
gap: var(--ui-space-6);
}
.ui-page--recovery-center .erp-header-primary {
align-items: flex-start;
gap: var(--ui-space-4);
}
.ui-page--recovery-center .header-right {
margin-left: auto;
}
.ui-page--recovery-center .recovery-center-page__filter-row {
justify-content: space-between;
gap: var(--ui-space-3);
flex-wrap: wrap;
}
.ui-page--recovery-center .recovery-center-page__filter-group {
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.ui-page--recovery-center .recovery-center-page__stats {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.ui-page--recovery-center .dashboard-snapshot-header {
display: flex;
flex-direction: column;
gap: 4px;
}
.ui-page--recovery-center .dashboard-snapshot-title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 183, 140, 0.92);
}
.ui-page--recovery-center .dashboard-snapshot-meta {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.ui-page--recovery-center .stat-card {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
min-height: 164px;
padding: var(--ui-space-5);
border-radius: var(--ui-radius-2xl);
border: 1px solid var(--ui-border);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
text-align: left;
cursor: pointer;
transition: transform var(--ui-transition-base), border-color var(--ui-transition-base), background var(--ui-transition-base);
}
.ui-page--recovery-center .stat-card:hover,
.ui-page--recovery-center .stat-card.active {
transform: translateY(-1px);
border-color: rgba(255, 160, 118, 0.32);
background: linear-gradient(155deg, rgba(255, 150, 100, 0.12), rgba(255, 255, 255, 0.04));
}
.ui-page--recovery-center .stat-header,
.ui-page--recovery-center .stat-value-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-3);
}
.ui-page--recovery-center .stat-label {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .stat-tooltip {
width: 28px;
height: 28px;
}
.ui-page--recovery-center .stat-value {
font-size: clamp(28px, 3vw, 38px);
font-weight: var(--ui-font-bold);
line-height: 1;
color: var(--ui-text-primary);
}
.ui-page--recovery-center .stat-trend {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
}
.ui-page--recovery-center .stat-trend.trend-up {
color: rgba(126, 229, 175, 0.96);
}
.ui-page--recovery-center .stat-trend.trend-down {
color: rgba(255, 136, 112, 0.96);
}
.ui-page--recovery-center .stat-trend.trend-flat {
color: rgba(255, 205, 134, 0.92);
}
.ui-page--recovery-center .stat-meta {
margin-top: auto;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .tab-content-container,
.ui-page--recovery-center .dashboard-shell {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.ui-page--recovery-center .dashboard-section {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.ui-page--recovery-center .dashboard-section-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--ui-space-3);
flex-wrap: wrap;
}
.ui-page--recovery-center .dashboard-section-title {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--recovery-center .dashboard-section-subtitle {
margin-top: 4px;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .dashboard-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-4);
}
.ui-page--recovery-center .chart-card {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
min-height: 228px;
padding: var(--ui-space-5);
}
.ui-page--recovery-center .chart-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-3);
}
.ui-page--recovery-center .chart-title {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--recovery-center .chart-subtitle {
margin-top: 4px;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .chart-body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--ui-space-3);
flex: 1;
}
.ui-page--recovery-center .chart-body svg {
width: 100%;
min-height: 144px;
}
.ui-page--recovery-center .chart-axis {
display: flex;
justify-content: space-between;
gap: var(--ui-space-2);
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .chart-empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 144px;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
text-align: center;
}
.ui-page--recovery-center .trend-line {
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.ui-page--recovery-center .trend-line--primary {
stroke: rgba(255, 146, 106, 0.96);
}
.ui-page--recovery-center .trend-line--secondary {
stroke: rgba(255, 206, 126, 0.94);
}
.ui-page--recovery-center .trend-line--warning {
stroke: rgba(255, 116, 104, 0.96);
}
.ui-page--recovery-center .trend-line--muted {
stroke: rgba(255, 255, 255, 0.34);
stroke-dasharray: 4 3;
}
.ui-page--recovery-center .trend-line--success {
stroke: rgba(126, 229, 175, 0.96);
}
.ui-page--recovery-center .bar-list,
.ui-page--recovery-center .impact-bars,
.ui-page--recovery-center .recovery-metrics {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-page--recovery-center .bar-row,
.ui-page--recovery-center .impact-bar {
display: grid;
grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto;
align-items: center;
gap: var(--ui-space-3);
}
.ui-page--recovery-center .bar-label,
.ui-page--recovery-center .impact-label {
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .bar-track,
.ui-page--recovery-center .impact-track {
position: relative;
height: 10px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.ui-page--recovery-center .bar-fill,
.ui-page--recovery-center .impact-segment {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(255, 140, 92, 0.98), rgba(255, 188, 126, 0.92));
}
.ui-page--recovery-center .segment-lost {
background: linear-gradient(90deg, rgba(255, 116, 104, 0.95), rgba(255, 154, 118, 0.88));
}
.ui-page--recovery-center .segment-atRisk {
background: linear-gradient(90deg, rgba(255, 196, 112, 0.95), rgba(255, 216, 158, 0.92));
}
.ui-page--recovery-center .segment-recovered {
background: linear-gradient(90deg, rgba(111, 220, 169, 0.96), rgba(156, 237, 201, 0.92));
}
.ui-page--recovery-center .bar-value,
.ui-page--recovery-center .impact-value,
.ui-page--recovery-center .legend-value {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--recovery-center .impact-panel {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
padding: var(--ui-space-5);
}
.ui-page--recovery-center .impact-legend {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-3);
}
.ui-page--recovery-center .legend-item {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: 8px 12px;
border-radius: var(--ui-radius-full);
border: 1px solid var(--ui-border-light);
background: rgba(255, 255, 255, 0.04);
}
.ui-page--recovery-center .legend-swatch {
width: 10px;
height: 10px;
border-radius: 999px;
}
.ui-page--recovery-center .legend-label {
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .recovery-layout {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
gap: var(--ui-space-4);
}
.ui-page--recovery-center .recovery-card {
padding: var(--ui-space-4);
border-radius: var(--ui-radius-xl);
}
.ui-page--recovery-center .recovery-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .recovery-value {
margin-top: var(--ui-space-3);
font-size: clamp(24px, 2.4vw, 32px);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.ui-page--recovery-center .recovery-meta,
.ui-page--recovery-center .warning-meta {
margin-top: var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .warning-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ui-page--recovery-center .warning-card {
min-height: 144px;
padding: var(--ui-space-4);
}
.ui-page--recovery-center .warning-label {
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .warning-value {
margin-top: var(--ui-space-3);
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.ui-page--recovery-center .main-content-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
gap: var(--ui-space-4);
align-items: start;
}
.ui-page--recovery-center .recovery-center-page__table-card {
--gdt-radius: 24px;
max-height: none;
}
.ui-page--recovery-center .recovery-center-page__table-header {
padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-4);
margin-bottom: 0;
}
.ui-page--recovery-center .recovery-center-page__table-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.ui-page--recovery-center .recovery-center-page__table-search {
min-width: 240px;
flex: 1 1 280px;
}
.ui-page--recovery-center .recovery-center-page__toolbar-actions {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-page--recovery-center .recovery-center-page__table-scroll {
padding: 0 var(--ui-space-6) var(--ui-space-6);
}
.ui-page--recovery-center .recovery-center-page__table {
min-width: 980px;
}
.ui-page--recovery-center .recovery-center-page__table--customers th:nth-child(1),
.ui-page--recovery-center .recovery-center-page__table--customers td:nth-child(1),
.ui-page--recovery-center .recovery-center-page__table--dissatisfied th:nth-child(1),
.ui-page--recovery-center .recovery-center-page__table--dissatisfied td:nth-child(1) {
width: 56px;
}
.ui-page--recovery-center .recovery-center-page__table--customers th:nth-child(8),
.ui-page--recovery-center .recovery-center-page__table--customers td:nth-child(8) {
width: 120px;
}
.ui-page--recovery-center .recovery-center-page__table--customers th:nth-child(9),
.ui-page--recovery-center .recovery-center-page__table--customers td:nth-child(9),
.ui-page--recovery-center .recovery-center-page__table--dissatisfied th:nth-child(7),
.ui-page--recovery-center .recovery-center-page__table--dissatisfied td:nth-child(7) {
width: 92px;
}
.ui-page--recovery-center .recovery-center-page__table--dissatisfied th:nth-child(5),
.ui-page--recovery-center .recovery-center-page__table--dissatisfied td:nth-child(5) {
width: 260px;
}
.ui-page--recovery-center .recovery-center-page__table--branch th:nth-child(1),
.ui-page--recovery-center .recovery-center-page__table--branch td:nth-child(1) {
width: 220px;
}
.ui-page--recovery-center .recovery-center-page__table .table-icon-btn {
margin-inline: auto;
}
.ui-page--recovery-center .recovery-center-page__cell-filter {
min-width: 0;
width: 100%;
max-width: 220px;
}
.ui-page--recovery-center .recovery-center-page__inline-meta {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.ui-page--recovery-center .recovery-center-page__sidebar {
min-height: 100%;
padding: var(--ui-space-5);
}
.ui-page--recovery-center .sidebar-header {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: var(--ui-space-4);
border-bottom: 1px solid var(--ui-border-light);
}
.ui-page--recovery-center .sidebar-title {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--recovery-center .sidebar-tag {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .sidebar-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-2);
padding: var(--ui-space-4) 0;
border-bottom: 1px solid var(--ui-border-light);
}
.ui-page--recovery-center .sidebar-cta-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 68px;
padding: var(--ui-space-3) var(--ui-space-2);
border-radius: var(--ui-radius-xl);
border: 1px solid var(--ui-border-light);
background: rgba(255, 255, 255, 0.04);
cursor: pointer;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
text-decoration: none;
text-align: center;
transition: background var(--ui-transition-base), border-color var(--ui-transition-base), transform var(--ui-transition-base);
}
.ui-page--recovery-center .sidebar-cta-btn mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.ui-page--recovery-center .sidebar-cta-btn:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.07);
}
.ui-page--recovery-center .sidebar-cta-btn--primary {
background: rgba(255, 146, 100, 0.1);
border-color: rgba(255, 146, 100, 0.24);
color: rgba(255, 214, 191, 0.96);
}
.ui-page--recovery-center .sidebar-cta-btn--primary:hover {
background: rgba(255, 146, 100, 0.18);
border-color: rgba(255, 146, 100, 0.38);
}
.ui-page--recovery-center .sidebar-cta-btn--whatsapp {
background: rgba(37, 211, 102, 0.08);
border-color: rgba(37, 211, 102, 0.22);
color: rgba(150, 240, 180, 0.96);
}
.ui-page--recovery-center .sidebar-cta-btn--whatsapp:hover {
background: rgba(37, 211, 102, 0.14);
border-color: rgba(37, 211, 102, 0.34);
}
.ui-page--recovery-center .sidebar-cta-btn--secondary {
background: rgba(255, 255, 255, 0.05);
border-color: var(--ui-border);
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .sidebar-cta-btn--secondary:hover {
background: rgba(255, 255, 255, 0.09);
}
.ui-page--recovery-center .sidebar-content {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
padding-top: var(--ui-space-4);
}
.ui-page--recovery-center .sidebar-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-3);
}
.ui-page--recovery-center .sidebar-section,
.ui-page--recovery-center .sidebar-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ui-page--recovery-center .field-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 183, 140, 0.84);
}
.ui-page--recovery-center .field-value,
.ui-page--recovery-center .field-text {
font-size: var(--ui-text-sm);
line-height: 1.6;
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .field-muted {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--recovery-center .interaction-list,
.ui-page--recovery-center .timeline-compact,
.ui-page--recovery-center .details-content {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.ui-page--recovery-center .interaction-item,
.ui-page--recovery-center .timeline-item,
.ui-page--recovery-center .mini-note,
.ui-page--recovery-center .mini-audit {
padding: 10px 12px;
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border-light);
background: rgba(255, 255, 255, 0.03);
}
.ui-page--recovery-center .interaction-channel,
.ui-page--recovery-center .timeline-stage,
.ui-page--recovery-center .audit-time,
.ui-page--recovery-center .note-meta {
display: block;
font-size: var(--ui-text-xs);
color: rgba(255, 183, 140, 0.84);
margin-bottom: 4px;
}
.ui-page--recovery-center .interaction-text,
.ui-page--recovery-center .timeline-note,
.ui-page--recovery-center .audit-action,
.ui-page--recovery-center .note-text {
font-size: var(--ui-text-sm);
line-height: 1.5;
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .tag-list {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.ui-page--recovery-center .mini-tag {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 var(--ui-space-3);
border-radius: var(--ui-radius-full);
border: 1px solid rgba(255, 176, 131, 0.18);
background: rgba(255, 176, 131, 0.08);
font-size: var(--ui-text-xs);
color: rgba(255, 220, 201, 0.94);
}
.ui-page--recovery-center .sidebar-details {
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-xl);
background: rgba(255, 255, 255, 0.02);
}
.ui-page--recovery-center .sidebar-details summary {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
cursor: pointer;
list-style: none;
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .sidebar-details summary::-webkit-details-marker {
display: none;
}
.ui-page--recovery-center .sidebar-details .details-content {
padding: 0 var(--ui-space-4) var(--ui-space-4);
}
.ui-page--recovery-center .note-input-compact {
display: flex;
align-items: flex-end;
gap: var(--ui-space-2);
}
.ui-page--recovery-center .note-input-compact textarea {
flex: 1;
min-height: 72px;
padding: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border-light);
background: rgba(255, 255, 255, 0.04);
color: var(--ui-text-primary);
resize: vertical;
}
.ui-page--recovery-center .note-input-compact textarea:focus {
outline: none;
border-color: var(--ui-border-focus);
box-shadow: 0 0 0 3px var(--ui-brand-glow);
}
.ui-page--recovery-center .add-note-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(255, 160, 118, 0.24);
background: rgba(255, 160, 118, 0.12);
color: rgba(255, 214, 191, 0.96);
cursor: pointer;
transition: background var(--ui-transition-base), border-color var(--ui-transition-base), transform var(--ui-transition-base);
}
.ui-page--recovery-center .add-note-btn:hover {
background: rgba(255, 160, 118, 0.18);
border-color: rgba(255, 160, 118, 0.34);
transform: translateY(-1px);
}
.ui-page--recovery-center .sidebar-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ui-space-3);
min-height: 240px;
text-align: center;
color: var(--ui-text-muted);
}
.ui-page--recovery-center .sidebar-empty mat-icon {
width: 40px;
height: 40px;
font-size: 40px;
color: rgba(255, 176, 131, 0.68);
}
/* Empty state with action buttons */
.ui-page--recovery-center .empty-state--action {
gap: var(--ui-space-4);
}
.ui-page--recovery-center .empty-actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-3);
flex-wrap: wrap;
margin-top: var(--ui-space-2);
}
.ui-page--recovery-center .btn-glass--sm {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
min-height: 36px;
padding: 0 var(--ui-space-4);
border-radius: var(--ui-radius-full);
border: 1px solid rgba(255, 146, 100, 0.24);
background: rgba(255, 146, 100, 0.1);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: rgba(255, 214, 191, 0.96);
cursor: pointer;
transition: background var(--ui-transition-base), border-color var(--ui-transition-base), transform var(--ui-transition-base);
}
.ui-page--recovery-center .btn-glass--sm mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.ui-page--recovery-center .btn-glass--sm:hover {
background: rgba(255, 146, 100, 0.16);
border-color: rgba(255, 146, 100, 0.36);
transform: translateY(-1px);
}
.ui-page--recovery-center .btn-glass--outline {
background: rgba(255, 255, 255, 0.04);
border-color: var(--ui-border);
color: var(--ui-text-secondary);
}
.ui-page--recovery-center .btn-glass--outline:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--ui-border-focus);
}
.ui-page--recovery-center .recovery-center-page__trend-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
}
.ui-page--recovery-center .recovery-center-page__trend-indicator.trend-up {
color: rgba(126, 229, 175, 0.96);
}
.ui-page--recovery-center .recovery-center-page__trend-indicator.trend-down {
color: rgba(255, 136, 112, 0.96);
}
.ui-page--recovery-center .recovery-center-page__trend-indicator.trend-flat {
color: rgba(255, 205, 134, 0.92);
}
.recovery-center-smart-filter-menu .filter-menu-header {
padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 183, 140, 0.84);
}
.recovery-center-smart-filter-menu .mat-mdc-menu-item,
.recovery-center-smart-filter-menu .mat-menu-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
@media (max-width: 1280px) {
.ui-page--recovery-center .stats-grid,
.ui-page--recovery-center .warning-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-page--recovery-center .dashboard-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-page--recovery-center .recovery-layout,
.ui-page--recovery-center .main-content-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 900px) {
.ui-page--recovery-center .erp-header-primary {
flex-direction: column;
}
.ui-page--recovery-center .header-right {
width: 100%;
margin-left: 0;
}
.ui-page--recovery-center .header-tab-navigation,
.ui-page--recovery-center .pill-tabs-container {
width: 100%;
}
.ui-page--recovery-center .pill-tabs-container {
justify-content: flex-start;
overflow-x: auto;
}
.ui-page--recovery-center .stats-grid,
.ui-page--recovery-center .dashboard-grid,
.ui-page--recovery-center .warning-grid,
.ui-page--recovery-center .sidebar-row {
grid-template-columns: minmax(0, 1fr);
}
.ui-page--recovery-center .bar-row,
.ui-page--recovery-center .impact-bar {
grid-template-columns: minmax(0, 1fr);
}
.ui-page--recovery-center .recovery-center-page__table-header {
padding-inline: var(--ui-space-5);
}
.ui-page--recovery-center .recovery-center-page__table-scroll {
padding-inline: var(--ui-space-5);
}
}
.ui-page--psf .psf-page__filter-row {
width: 100%;
justify-content: space-between;
gap: var(--ui-space-3);
}
.ui-page--psf .psf-page__search {
flex: 1 1 320px;
max-width: 420px;
}
.ui-page--psf .psf-page__filter-group {
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--ui-space-2);
}
.ui-page--psf .psf-page__showing-chip {
white-space: nowrap;
}
.ui-page--psf .psf-page__table-card {
--gdt-radius: 24px;
max-height: none;
}
.ui-page--psf .psf-page__table-header {
margin-bottom: 0;
padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-3);
gap: var(--ui-space-3);
}
.ui-page--psf .psf-page__table-header .glass-table-header__right {
flex-wrap: wrap;
justify-content: flex-end;
}
.ui-page--psf .psf-page__table-header .glass-table-header__titles {
gap: 2px;
}
.ui-page--psf .psf-page__table-header .glass-table-title {
font-size: var(--ui-text-xl);
}
.ui-page--psf .psf-page__table-header .glass-table-meta {
font-size: var(--ui-text-xs);
line-height: 1.45;
}
.ui-page--psf .glass-table-wrap {
padding-top: var(--ui-space-2);
}
.ui-page--psf .psf-table {
min-width: 1120px;
}
.ui-page--psf .psf-table tbody {
max-height: calc(100vh - 390px);
}
.ui-page--psf .psf-table th:nth-child(1),
.ui-page--psf .psf-table td:nth-child(1) {
width: 64px;
}
.ui-page--psf .psf-table th:nth-child(4),
.ui-page--psf .psf-table td:nth-child(4) {
width: 160px;
}
.ui-page--psf .psf-table th:nth-child(6),
.ui-page--psf .psf-table td:nth-child(6) {
width: 140px;
}
.ui-page--psf .psf-table th:nth-child(7),
.ui-page--psf .psf-table td:nth-child(7) {
width: 172px;
}
.ui-page--psf .psf-table th:nth-child(9),
.ui-page--psf .psf-table td:nth-child(9) {
width: 132px;
}
.ui-page--psf .psf-table td {
padding-top: 14px;
padding-bottom: 14px;
}
.ui-page--psf .psf-table__row-index {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--ui-space-2);
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: var(--ui-text-secondary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.04em;
}
.ui-page--psf .psf-table__stack {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.ui-page--psf .psf-table__stack .cell-primary-name,
.ui-page--psf .psf-table__stack .cell-strong,
.ui-page--psf .psf-table__stack .cell-muted {
margin: 0;
}
.ui-page--psf .psf-table__vehicle-title {
line-height: 1.45;
color: var(--ui-text-secondary);
}
.ui-page--psf .psf-table__channel-pill {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: 6px 10px;
border-radius: var(--ui-radius-full);
border: 1px solid rgba(37, 211, 102, 0.22);
background: rgba(37, 211, 102, 0.08);
color: rgba(181, 255, 207, 0.96);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
white-space: nowrap;
}
.ui-page--psf .psf-table__channel-pill img {
width: 16px;
height: 16px;
object-fit: contain;
}
@media (max-width: 1024px) {
.ui-page--psf .psf-page__filter-row {
align-items: stretch;
}
.ui-page--psf .psf-page__filter-group {
justify-content: flex-start;
margin-left: 0;
}
}
@media (max-width: 640px) {
.ui-page--psf .psf-page__search {
max-width: none;
}
.ui-page--psf .psf-page__showing-chip {
width: 100%;
justify-content: center;
}
}
.reminders-page .glass-table-card {
--gdt-radius: 24px;
}
.reminders-page .reminders-table__header {
margin-bottom: 0;
padding-bottom: var(--ui-space-4);
}
.reminders-page .reminders-table__header .glass-table-meta {
max-width: 42rem;
}
.reminders-page .reminders-table__header .glass-table-header__right {
flex-wrap: wrap;
justify-content: flex-end;
}
.reminders-page .glass-table-wrap {
padding-top: var(--ui-space-2);
}
.reminders-page .glass-table th:nth-child(1),
.reminders-page .glass-table td:nth-child(1) {
width: 64px;
}
.reminders-page .glass-table th:nth-child(11),
.reminders-page .glass-table td:nth-child(11) {
width: 168px;
}
.reminders-page .glass-table td {
padding-top: 14px;
padding-bottom: 14px;
}
.reminders-page .reminders-table__row-index {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--ui-space-2);
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: var(--ui-text-secondary);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.04em;
}
.reminders-page .reminders-table__stack {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.reminders-page .reminders-table__stack .cell-primary-name,
.reminders-page .reminders-table__stack .cell-muted,
.reminders-page .reminders-table__stack .cell-primary-sub {
margin: 0;
}
.reminders-page .reminders-table__stack .cell-chip {
width: fit-content;
max-width: 100%;
}
.reminders-page .reminders-table__stack--vehicle .cell-chip {
margin-bottom: 2px;
}
.reminders-page .reminders-table__vehicle-title {
line-height: 1.45;
color: var(--ui-text-secondary);
}
.reminders-page .reminders-table__type-chip--service {
background: rgba(96, 165, 250, 0.12);
border-color: rgba(96, 165, 250, 0.28);
}
.reminders-page .reminders-table__type-chip--service .cell-chip-icon {
color: rgba(96, 165, 250, 0.95);
}
.reminders-page .reminders-table__type-chip--service .cell-chip-text {
color: rgba(191, 219, 254, 0.96);
}
.reminders-page .glass-table .glass-status-chip {
max-width: 100%;
justify-content: center;
}
.reminders-page .actions-cell {
text-align: right;
}
.reminders-page .reminders-table__actions {
justify-content: flex-end;
}
.reminders-page .glass-pagination .pagination-size {
color: var(--ui-text-muted);
}
.reminders-page .glass-pagination .pagination-size span {
white-space: nowrap;
}
@media (max-width: 1280px) {
.reminders-page .reminders-table__header {
align-items: flex-start;
}
.reminders-page .reminders-table__header .glass-table-header__right {
justify-content: flex-start;
}
.reminders-page .glass-table th:nth-child(11),
.reminders-page .glass-table td:nth-child(11) {
width: 152px;
}
}
/* ==========================================================================
ACTION DASHBOARD — Decision-Driven Execution Engine
==========================================================================
Scoped under .crm-leads-page (page contract)
All values reference tokens from tokens.scss
========================================================================== */
.crm-leads-page {
/* ==========================================================================
DASHBOARD CONTAINER
========================================================================== */
/* ==========================================================================
BODY: 2-column layout (sections + pipeline)
========================================================================== */
/* ==========================================================================
ACTION SECTIONS (Call Now / Overdue / Cold)
========================================================================== */
/* Inline Pipeline Strip */
/* Empty Tab Placeholder */
/* Insight Bar */
/* ==========================================================================
ACTION ROW — Individual lead card inside a section
========================================================================== */
/* Score Circle */
/* Lead Info */
/* Metrics */
/* Time */
/* Assignee */
/* CTA Buttons */
/* ==========================================================================
EMPTY STATE
========================================================================== */
/* ==========================================================================
PIPELINE SNAPSHOT — Right panel
========================================================================== */
/* ==========================================================================
VIEW TOGGLE (when in table mode)
========================================================================== */
/* Score badge variants */
/* Pulsing animation for overdue indicators */
}
.crm-leads-page .action-dashboard {
margin-bottom: var(--ui-space-5);
}
.crm-leads-page .crm-action-drawer-overlay .mat-drawer.glass-sidenav.crm-action-queue-sidenav {
width: 760px;
max-width: 94vw;
}
.crm-leads-page .crm-action-queue-drawer .glass-drawer-header {
align-items: flex-start;
gap: var(--ui-space-4);
}
.crm-leads-page .crm-action-queue-drawer .drawer-item-name {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.crm-leads-page .crm-action-queue-drawer .drawer-item-name .header-icon {
color: var(--ui-brand-light);
filter: drop-shadow(0 0 8px rgba(255, 122, 61, 0.45));
}
.crm-leads-page .action-dashboard--drawer {
margin-bottom: 0;
}
.crm-leads-page .action-dashboard--drawer .action-section {
border-radius: var(--ui-radius-lg);
}
.crm-leads-page .action-dashboard--drawer .action-section__list {
max-height: none;
overflow: visible;
}
.crm-leads-page .action-dashboard--drawer .pill-tabs-container {
max-width: 100%;
}
.crm-leads-page .action-dashboard__loading-line {
width: 100%;
height: 40px;
border-radius: var(--ui-radius-sm);
margin-bottom: var(--ui-space-1);
}
.crm-leads-page .action-queue-trigger {
gap: var(--ui-space-2);
}
.crm-leads-page .action-queue-trigger__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--ui-space-2);
border-radius: var(--ui-radius-full);
background: rgba(255, 122, 61, 0.16);
border: 1px solid rgba(255, 122, 61, 0.28);
color: var(--ui-brand-light);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
}
.crm-leads-page .action-dashboard__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ui-space-4);
padding: 0 var(--ui-space-1);
}
.crm-leads-page .action-dashboard__title {
display: flex;
align-items: center;
gap: var(--ui-space-3);
}
.crm-leads-page .action-dashboard__title mat-icon {
font-size: var(--ui-text-2xl);
width: 24px;
height: 24px;
color: var(--ui-brand-light);
}
.crm-leads-page .action-dashboard__title h2 {
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
margin: 0;
letter-spacing: -0.02em;
}
.crm-leads-page .action-dashboard__subtitle {
font-size: var(--ui-text-sm);
color: var(--ui-text-subtle);
font-weight: var(--ui-font-normal);
}
.crm-leads-page .action-dashboard__controls {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.crm-leads-page .btn-glass--sm {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-muted);
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-full);
cursor: pointer;
transition: all var(--ui-transition-base);
backdrop-filter: var(--ui-blur-sm);
}
.crm-leads-page .btn-glass--sm mat-icon {
font-size: var(--ui-text-md);
width: 16px;
height: 16px;
}
.crm-leads-page .btn-glass--sm:hover {
background: var(--ui-surface-active);
color: var(--ui-text-primary);
border-color: var(--ui-border-hover);
}
.crm-leads-page .action-dashboard__body {
display: flex;
flex-direction: column;
}
.crm-leads-page .action-dashboard__sections {
display: flex;
flex-direction: column;
}
.crm-leads-page .action-section {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-3);
backdrop-filter: var(--ui-blur-md);
transition: all var(--ui-transition-slow);
}
.crm-leads-page .action-section--hot {
border-color: rgba(255, 153, 102, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 153, 102, 0.1);
}
.crm-leads-page .action-section--overdue {
border-color: var(--ui-danger-border);
box-shadow: inset 0 1px 0 var(--ui-danger-bg);
}
.crm-leads-page .action-section--cold {
border-color: var(--ui-info-border);
box-shadow: inset 0 1px 0 var(--ui-info-bg);
}
.crm-leads-page .action-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-2);
margin-bottom: var(--ui-space-2);
}
.crm-leads-page .action-pipeline-strip {
display: flex;
align-items: center;
gap: var(--ui-space-2);
margin-left: auto;
}
.crm-leads-page .pipeline-pill {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
padding: 2px var(--ui-space-2);
background: var(--ui-surface-2);
border-radius: var(--ui-radius-full);
white-space: nowrap;
}
.crm-leads-page .pipeline-pill--muted {
color: var(--ui-text-muted);
font-weight: var(--ui-font-semibold);
}
.crm-leads-page .confidence-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.crm-leads-page .confidence-dot.confidence--high {
background: var(--ui-success);
}
.crm-leads-page .confidence-dot.confidence--medium {
background: var(--ui-warning);
}
.crm-leads-page .confidence-dot.confidence--low {
background: var(--ui-danger);
}
.crm-leads-page .action-empty-tab {
display: flex;
align-items: center;
justify-content: center;
padding: var(--ui-space-6) var(--ui-space-4);
color: var(--ui-text-subtle);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
}
.crm-leads-page .action-insight-bar {
padding: var(--ui-space-2) var(--ui-space-3);
margin-top: var(--ui-space-2);
background: rgba(255, 153, 102, 0.06);
border-top: 1px solid rgba(255, 153, 102, 0.1);
border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
}
.crm-leads-page .action-insight-bar span {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-text-secondary);
}
.crm-leads-page .action-section__badge {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-1) var(--ui-space-3);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
letter-spacing: 0.02em;
}
.crm-leads-page .action-section__badge--hot {
background: rgba(255, 153, 102, 0.15);
color: var(--ui-brand-light);
border: 1px solid rgba(255, 153, 102, 0.3);
}
.crm-leads-page .action-section__badge--overdue {
background: var(--ui-danger-bg);
color: var(--ui-danger);
border: 1px solid var(--ui-danger-border);
animation: overduePulse 2s ease-in-out infinite;
}
.crm-leads-page .action-section__badge--cold {
background: var(--ui-info-bg);
color: var(--ui-info);
border: 1px solid var(--ui-info-border);
}
.crm-leads-page .action-section__count {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-subtle);
}
.crm-leads-page .action-section__list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 180px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.crm-leads-page .action-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-sm);
cursor: pointer;
transition: all var(--ui-transition-spring);
position: relative;
}
.crm-leads-page .action-row:hover {
background: var(--ui-surface-hover);
transform: translateX(2px);
}
.crm-leads-page .action-row:active {
transform: scale(0.995);
}
.crm-leads-page .action-row--hot:hover {
background: rgba(255, 153, 102, 0.08);
}
.crm-leads-page .action-row--overdue:hover {
background: var(--ui-danger-bg);
}
.crm-leads-page .action-row--cold:hover {
background: var(--ui-info-bg);
}
.crm-leads-page .action-row__score {
flex-shrink: 0;
}
.crm-leads-page .action-row__score .score-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
letter-spacing: -0.02em;
}
.crm-leads-page .action-row__score .overdue-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ui-danger-bg);
color: var(--ui-danger);
border: 1.5px solid var(--ui-danger-border);
animation: overduePulse 2s ease-in-out infinite;
}
.crm-leads-page .action-row__score .overdue-badge mat-icon {
font-size: var(--ui-text-lg);
width: 18px;
height: 18px;
}
.crm-leads-page .action-row__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.crm-leads-page .action-row__name {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-leads-page .action-row__reason {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-brand-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crm-leads-page .action-row__reason--overdue {
color: var(--ui-danger);
}
.crm-leads-page .action-row__reason--cold {
color: var(--ui-info);
}
.crm-leads-page .action-row__metrics {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
}
.crm-leads-page .action-row__revenue {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
color: var(--ui-success);
}
.crm-leads-page .action-row__probability {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-muted);
}
.crm-leads-page .action-row__time {
font-size: var(--ui-text-xs);
color: var(--ui-text-subtle);
font-weight: var(--ui-font-medium);
white-space: nowrap;
flex-shrink: 0;
min-width: 55px;
text-align: right;
}
.crm-leads-page .action-row__assignee {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
font-weight: var(--ui-font-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
flex-shrink: 0;
}
.crm-leads-page .action-row__call-btn {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-2) var(--ui-space-4);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
color: #fff;
background: var(--ui-brand-gradient);
border: none;
border-radius: var(--ui-radius-full);
cursor: pointer;
transition: all var(--ui-transition-base);
flex-shrink: 0;
box-shadow: var(--ui-shadow-glow);
}
.crm-leads-page .action-row__call-btn mat-icon {
font-size: 15px;
width: 15px;
height: 15px;
}
.crm-leads-page .action-row__call-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(255, 120, 79, 0.5);
}
.crm-leads-page .action-row__call-btn:active {
transform: scale(0.97);
}
.crm-leads-page .action-row__secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--ui-border-hover);
border-radius: 50%;
background: var(--ui-surface-1);
color: var(--ui-text-muted);
cursor: pointer;
transition: all var(--ui-transition-base);
flex-shrink: 0;
}
.crm-leads-page .action-row__secondary-btn mat-icon {
font-size: var(--ui-text-md);
width: 16px;
height: 16px;
}
.crm-leads-page .action-row__secondary-btn:hover {
background: var(--ui-surface-active);
color: var(--ui-text-primary);
border-color: rgba(255, 255, 255, 0.25);
}
.crm-leads-page .action-dashboard__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--ui-space-12) var(--ui-space-6);
text-align: center;
}
.crm-leads-page .action-dashboard__empty mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
color: var(--ui-success);
opacity: 0.5;
margin-bottom: var(--ui-space-3);
}
.crm-leads-page .action-dashboard__empty h3 {
font-size: var(--ui-text-md);
font-weight: var(--ui-font-bold);
color: var(--ui-text-secondary);
margin: 0 0 var(--ui-space-2) 0;
}
.crm-leads-page .action-dashboard__empty p {
font-size: var(--ui-text-sm);
color: var(--ui-text-subtle);
margin: 0;
}
.crm-leads-page .action-dashboard__pipeline {
position: sticky;
top: var(--ui-space-5);
}
.crm-leads-page .pipeline-card {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-xl);
padding: var(--ui-space-5);
backdrop-filter: var(--ui-blur-md);
}
.crm-leads-page .pipeline-card__header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
margin-bottom: var(--ui-space-4);
padding-bottom: var(--ui-space-3);
border-bottom: 1px solid var(--ui-border-light);
}
.crm-leads-page .pipeline-card__header mat-icon {
font-size: var(--ui-text-lg);
width: 18px;
height: 18px;
color: var(--ui-brand-light);
}
.crm-leads-page .pipeline-card__header span {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-bold);
color: var(--ui-text-secondary);
}
.crm-leads-page .pipeline-card__metrics {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.crm-leads-page .pipeline-metric {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.crm-leads-page .pipeline-metric__label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.crm-leads-page .pipeline-metric__value {
font-size: 15px;
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.crm-leads-page .pipeline-card__confidence {
margin-top: var(--ui-space-3);
padding-top: var(--ui-space-3);
border-top: 1px solid var(--ui-border-light);
text-align: center;
}
.crm-leads-page .confidence-badge {
display: inline-block;
padding: var(--ui-space-1) var(--ui-space-3);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: var(--ui-radius-full);
}
.crm-leads-page .confidence--high {
background: var(--ui-success-bg);
color: var(--ui-success);
border: 1px solid var(--ui-success-border);
}
.crm-leads-page .confidence--medium {
background: var(--ui-warning-bg);
color: var(--ui-warning);
border: 1px solid var(--ui-warning-border);
}
.crm-leads-page .confidence--low {
background: var(--ui-danger-bg);
color: var(--ui-danger);
border: 1px solid var(--ui-danger-border);
}
.crm-leads-page .pipeline-card__insight {
margin-top: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-3);
background: rgba(255, 153, 102, 0.08);
border: 1px solid rgba(255, 153, 102, 0.15);
border-radius: var(--ui-radius-md);
}
.crm-leads-page .pipeline-card__insight span {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-text-secondary);
line-height: 1.5;
}
.crm-leads-page .view-toggle {
display: flex;
justify-content: flex-end;
margin-bottom: var(--ui-space-3);
}
.crm-leads-page .action-row .score--high {
background: var(--ui-success-bg);
color: var(--ui-success);
border: 1.5px solid var(--ui-success-border);
}
.crm-leads-page .action-row .score--mid {
background: var(--ui-warning-bg);
color: var(--ui-warning);
border: 1.5px solid var(--ui-warning-border);
}
.crm-leads-page .action-row .score--low {
background: var(--ui-danger-bg);
color: var(--ui-danger);
border: 1.5px solid var(--ui-danger-border);
}
@keyframes overduePulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* ==========================================================================
EXECUTION ENGINE — Phase 3 UI
========================================================================== */
/* 🔥 Start Calling Button */
.btn-start-calling {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4);
background: linear-gradient(135deg, #f97316, #ea580c);
color: #fff;
border: none;
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
cursor: pointer;
transition: all var(--ui-transition-base);
box-shadow: 0 2px 10px rgba(249, 115, 22, 0.3);
}
.btn-start-calling mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.btn-start-calling:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
background: linear-gradient(135deg, #fb923c, #f97316);
}
.btn-start-calling:active {
transform: translateY(0);
}
/* Daily Execution Tracker Strip */
.exec-tracker {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-2) var(--ui-space-4);
margin-bottom: var(--ui-space-3);
background: var(--ui-glass-light);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-md);
backdrop-filter: var(--ui-blur-sm);
}
.exec-tracker__title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
white-space: nowrap;
}
.exec-tracker__stats {
display: flex;
gap: var(--ui-space-3);
flex-wrap: wrap;
}
.exec-stat {
font-size: var(--ui-text-sm);
color: var(--ui-text-subtle);
}
.exec-stat strong {
font-weight: 800;
color: var(--ui-text-primary);
margin-right: 2px;
}
.exec-stat--success strong {
color: var(--ui-success);
}
.exec-stat--danger strong {
color: var(--ui-danger);
}
/* Overdue Pressure Banner */
.overdue-pressure-banner {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4);
margin-bottom: var(--ui-space-3);
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--ui-radius-md);
cursor: pointer;
transition: all var(--ui-transition-base);
color: var(--ui-text-subtle);
font-size: var(--ui-text-sm);
}
.overdue-pressure-banner mat-icon:first-child {
font-size: 18px;
width: 18px;
height: 18px;
color: var(--ui-danger);
animation: overduePulse 2s ease-in-out infinite;
}
.overdue-pressure-banner strong {
color: var(--ui-danger);
}
.overdue-pressure-banner:hover {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.3);
}
.overdue-pressure-banner__arrow {
margin-left: auto;
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
color: var(--ui-danger) !important;
}
/* ==========================================================================
SMARTFLO INTEGRATION STYLES
========================================================================== */
/* Amber info banner — shown when Smartflo is not connected */
.smartflo-required-banner {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4);
margin-bottom: var(--ui-space-3);
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.25);
border-radius: var(--ui-radius-md);
color: var(--ui-text-subtle);
font-size: var(--ui-text-sm);
}
.smartflo-required-banner mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #d97706;
flex-shrink: 0;
}
.smartflo-required-banner span {
line-height: 1.5;
}
.smartflo-required-banner strong {
color: #d97706;
font-weight: 700;
}
.smartflo-required-banner a {
color: var(--ui-brand-light);
text-decoration: underline;
margin-left: 4px;
}
.smartflo-required-banner a:hover {
opacity: 0.8;
}
/* Collapsed pipeline insight strip — when no data */
.action-insight-bar--empty {
background: transparent;
border-color: transparent;
}
.action-insight-bar--empty span {
color: var(--ui-text-subtle);
font-style: italic;
opacity: 0.7;
}
/* Pass-through wrapper for
in queue rows */
.crm-leads-page .action-row app-click-to-call {
flex-shrink: 0;
}
.crm-leads-page .action-row app-click-to-call .ctc-wrapper {
margin: 0;
}
/* ==========================================================================
PAYABLES PAGE — Scoped Page-Level Contract
==========================================================================
This contract provides page-specific styling for /console/payables.
SCOPE: All styles scoped under .payables-page root class.
USES:
- ui/tables/glass-table.scss for table base
- ui/tables/data-table.scss for cell semantics
- ui/headers/stat-cards.scss for stat cards
PROVIDES:
- Dashboard KPI row
- Action zone (urgent/upcoming cards)
- Payables table structure
- Status pill variants
- Timeline cell styling
========================================================================== */
/* mat-sidenav-container must fill the full page height */
.payables-drawer-container {
width: 100%;
height: 100%;
display: block;
/* Payables statement drawer extends the shared glass sidenav contract */
/* The mat-sidenav inner content div needs flex column too */
/* Header */
/* Body — scrollable */
}
.payables-drawer-container .mat-drawer.glass-sidenav.payables-statement-drawer {
width: 480px;
display: flex;
flex-direction: column;
background: radial-gradient(circle at top left, rgba(255, 133, 74, 0.09) 0%, transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
}
.payables-drawer-container .mat-drawer-inner-container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: transparent;
}
.payables-drawer-container .ui-drawer__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 22px 22px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008));
}
.payables-drawer-container .ui-drawer__title {
font-size: 19px;
font-weight: 700;
color: rgba(255, 255, 255, 0.95);
margin: 0 0 4px;
letter-spacing: -0.02em;
}
.payables-drawer-container .ui-drawer__close {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.52);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 180ms ease;
flex-shrink: 0;
}
.payables-drawer-container .ui-drawer__close mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.payables-drawer-container .ui-drawer__close:hover {
background: rgba(255, 133, 74, 0.12);
border-color: rgba(255, 133, 74, 0.22);
color: rgba(255, 214, 194, 0.95);
}
.payables-drawer-container .ui-drawer__body {
flex: 1;
overflow-y: auto;
padding: 18px 20px 22px;
scrollbar-width: none;
background: radial-gradient(circle at top right, rgba(255, 133, 74, 0.05), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.008), rgba(255, 255, 255, 0));
}
.payables-drawer-container .ui-drawer__body::-webkit-scrollbar {
display: none;
}
.payables-page {
/* ==========================================================================
DASHBOARD KPI ROW
========================================================================== */
/* Date Range Indicator */
/* ==========================================================================
DASHBOARD KPI CARDS
========================================================================== */
/* KPI Variants */
/* ==========================================================================
ACTION ZONE
========================================================================== */
/* ==========================================================================
ACTION CARDS
========================================================================== */
/* ==========================================================================
COLLAPSIBLE INSIGHTS PANEL
========================================================================== */
/* ==========================================================================
DASHBOARD LOADING & ERROR STATES
========================================================================== */
/* ==========================================================================
PAYABLES SHELL & TABLE OVERRIDES
========================================================================== */
/* Cell: Payable */
/* Cell: Expense */
/* ==========================================================================
EXPENSE TYPE BADGE — Color Variants
========================================================================== */
/* Cell: Vendor */
/* Cell: Amount */
/* ==========================================================================
TIMELINE STATUS
========================================================================== */
/* ==========================================================================
STATUS TEXT STYLES
========================================================================== */
/* Payment Status Colors */
/* Approval Status Colors */
/* ==========================================================================
STATE & PAYMENT BADGE STYLES
========================================================================== */
/* ==========================================================================
REIMBURSEMENT FILTERS & SMART FILTER PILLS
========================================================================== */
/* ==========================================================================
ACTION BUTTONS - COMPACT ICON STYLE
========================================================================== */
/* ==========================================================================
BULK SETTLE PANEL
========================================================================== */
/* Horizontal Slider Container */
/* Hide scrollbar but keep functionality */
/* Bulk Settle Inline Form */
/* Settlement Preview — FIFO / Manual checkbox list */
/* ==========================================================================
EMPLOYEE STATEMENT DRAWER comment preserved — styles moved to
.payables-drawer-container scope (mat-sidenav lives outside .payables-page)
========================================================================== */
}
.payables-page .dashboard-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 24px;
margin-bottom: 32px;
}
@media (max-width: 1024px) {
.payables-page .dashboard-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.payables-page .dashboard-kpi-row {
grid-template-columns: 1fr;
}
}
.payables-page .date-range-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 130, 90, 0.08);
border: 1px solid rgba(255, 130, 90, 0.2);
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
}
.payables-page .date-range-indicator mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #ff8a50;
}
.payables-page .date-range-indicator strong {
color: #ffab91;
font-weight: 600;
}
.payables-page .dashboard-kpi {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 20px;
border-radius: 24px;
background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
cursor: pointer;
transition: all 0.25s ease;
outline: none;
}
.payables-page .dashboard-kpi:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.2);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.payables-page .dashboard-kpi:focus-visible {
box-shadow: 0 0 0 2px rgba(255, 176, 131, 0.5);
}
.payables-page .dashboard-kpi__label {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
}
.payables-page .dashboard-kpi__value {
font-size: 36px;
font-weight: 700;
color: #fff;
line-height: 1.1;
margin-bottom: 6px;
}
.payables-page .dashboard-kpi__meta {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.payables-page .dashboard-kpi--danger {
border-color: rgba(255, 99, 132, 0.3);
background: linear-gradient(155deg, rgba(255, 99, 132, 0.12), rgba(255, 99, 132, 0.02));
}
.payables-page .dashboard-kpi--danger .dashboard-kpi__value {
color: #ff8a9a;
}
.payables-page .dashboard-kpi--warning {
border-color: rgba(255, 179, 71, 0.3);
background: linear-gradient(155deg, rgba(255, 179, 71, 0.12), rgba(255, 179, 71, 0.02));
}
.payables-page .dashboard-kpi--warning .dashboard-kpi__value {
color: #ffc570;
}
.payables-page .dashboard-kpi--info {
border-color: rgba(77, 208, 225, 0.3);
background: linear-gradient(155deg, rgba(77, 208, 225, 0.1), rgba(77, 208, 225, 0.02));
}
.payables-page .dashboard-kpi--info .dashboard-kpi__value {
color: #60d5e8;
}
.payables-page .action-zone {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.payables-page .action-zone {
grid-template-columns: 1fr;
}
}
.payables-page .action-card {
padding: 24px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
min-height: 320px;
}
.payables-page .action-card--urgent {
border-color: rgba(255, 99, 132, 0.25);
}
.payables-page .action-card--upcoming {
border-color: rgba(77, 208, 225, 0.2);
}
.payables-page .action-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.payables-page .action-card__title {
display: flex;
align-items: center;
gap: 10px;
}
.payables-page .action-card__title h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #fff;
}
.payables-page .action-card__icon {
font-size: 22px;
width: 22px;
height: 22px;
}
.payables-page .action-card__icon.danger {
color: #ff6384;
}
.payables-page .action-card__icon.primary {
color: #4dd0e1;
}
.payables-page .action-card__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(255, 99, 132, 0.2);
color: #ff8a9a;
font-weight: 700;
font-size: 14px;
}
.payables-page .action-card__badge.secondary {
background: rgba(77, 208, 225, 0.15);
color: #4dd0e1;
}
.payables-page .action-card__list {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.payables-page .action-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
transition: all 0.2s ease;
}
.payables-page .action-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
.payables-page .action-item__info {
display: flex;
justify-content: space-between;
align-items: center;
}
.payables-page .action-item__vendor {
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
}
.payables-page .action-item__amount {
font-weight: 600;
color: #fff;
font-size: 14px;
}
.payables-page .action-item__meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.payables-page .action-item__date {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.payables-page .action-item__reason,
.payables-page .action-item__readiness {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
}
.payables-page .action-item__reason {
background: rgba(255, 99, 132, 0.15);
color: #ff8a9a;
}
.payables-page .readiness-ready {
background: rgba(105, 240, 174, 0.15);
color: #69f0ae;
}
.payables-page .readiness-pending {
background: rgba(255, 179, 71, 0.15);
color: #ffb347;
}
.payables-page .action-card__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.payables-page .action-card__empty mat-icon {
font-size: 32px;
width: 32px;
height: 32px;
opacity: 0.5;
}
.payables-page .action-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 16px;
padding: 12px 20px;
border: none;
border-radius: 999px;
background: linear-gradient(120deg, #ff7043, #ff3d00);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.payables-page .action-card__cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(255, 61, 0, 0.35);
}
.payables-page .action-card__cta.secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.payables-page .action-card__cta.secondary:hover {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.payables-page .action-card__cta mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.payables-page .insights-collapse-section {
margin-bottom: 32px;
}
.payables-page .insights-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 16px 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.payables-page .insights-toggle:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
.payables-page .insights-toggle.expanded {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: transparent;
}
.payables-page .insights-toggle mat-icon {
font-size: 22px;
width: 22px;
height: 22px;
color: rgba(255, 176, 131, 0.8);
}
.payables-page .insights-toggle__hint {
margin-left: auto;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.4);
}
.payables-page .insights-panel {
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: none;
border-radius: 0 0 16px 16px;
background: rgba(255, 255, 255, 0.02);
padding: 20px;
animation: slideDown 0.25s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.payables-page .dashboard-loading {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
width: 100%;
padding: 12px 0 0;
color: rgba(255, 255, 255, 0.7);
gap: 24px;
}
.payables-page .dashboard-loading mat-icon {
font-size: 36px;
width: 36px;
height: 36px;
opacity: 0.6;
}
.payables-page .dashboard-loading mat-icon.spin {
animation: spin 1.2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.payables-page .dashboard-error {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 24px;
margin-bottom: 20px;
border-radius: 14px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.25);
color: #f87171;
}
.payables-page .dashboard-error mat-icon {
color: #f87171;
}
.payables-page .dashboard-error button {
margin-left: auto;
}
.payables-page .payables-shell {
position: relative;
padding-bottom: 80px;
}
.payables-page .payables-card {
max-height: 72vh;
}
.payables-page .payable-row {
transition: all 0.18s ease;
}
.payables-page .payable-row:hover {
background: rgba(255, 130, 90, 0.06);
box-shadow: inset 4px 0 0 0 #ff784f;
}
.payables-page .cell-payable {
display: flex;
flex-direction: column;
gap: 4px;
}
.payables-page .payable-code {
font-family: var(--ui-font-mono);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
display: block;
}
.payables-page .expense-code {
font-family: var(--ui-font-mono);
font-size: 12px;
font-weight: 500;
color: rgba(255, 180, 140, 0.9);
display: block;
}
.payables-page .expense-category {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
display: block;
}
.payables-page .expense-type-badge.type-purchase {
background: rgba(245, 158, 11, 0.18) !important;
border: 1px solid rgba(245, 158, 11, 0.4) !important;
color: #fbbf24 !important;
}
.payables-page .expense-type-badge.type-reimbursement {
background: rgba(20, 184, 166, 0.18) !important;
border: 1px solid rgba(20, 184, 166, 0.4) !important;
color: #2dd4bf !important;
}
.payables-page .expense-type-badge.type-vendor {
background: rgba(59, 130, 246, 0.18) !important;
border: 1px solid rgba(59, 130, 246, 0.4) !important;
color: #60a5fa !important;
}
.payables-page .expense-type-badge.type-manual {
background: rgba(148, 163, 184, 0.15) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
color: #94a3b8 !important;
}
.payables-page .vendor-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.payables-page .vendor-avatar {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3));
border: 1px solid rgba(59, 130, 246, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #93c5fd;
flex-shrink: 0;
}
.payables-page .vendor-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.payables-page .vendor-date {
font-size: 10px;
color: rgba(255, 255, 255, 0.45);
}
.payables-page .vendor-code {
font-family: var(--ui-font-mono);
font-size: 11px;
color: rgba(255, 180, 140, 0.75);
letter-spacing: 0.02em;
}
.payables-page .cell-amount .due-indicator {
display: block;
font-size: 10px;
color: #ffb347;
margin-top: 2px;
}
.payables-page .cell-amount .due-indicator.overdue {
color: #ff6384;
}
.payables-page .cell-timeline {
padding-top: 8px;
padding-bottom: 8px;
}
.payables-page .timeline-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
padding-left: 12px;
}
.payables-page .timeline-wrapper::before {
content: "";
position: absolute;
left: 3px;
top: 6px;
bottom: 6px;
width: 2px;
background: linear-gradient(to bottom, rgba(251, 146, 60, 0.5), rgba(34, 197, 94, 0.5));
border-radius: 1px;
}
.payables-page .timeline-item {
display: flex;
align-items: center;
gap: 6px;
position: relative;
padding-left: 10px;
}
.payables-page .timeline-item:first-child .status-text {
font-size: 13px;
font-weight: 600;
}
.payables-page .timeline-item:last-child .status-text {
font-size: 10px;
font-weight: 500;
opacity: 0.85;
}
.payables-page .timeline-item::before {
content: "";
position: absolute;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.payables-page .timeline-label {
font-size: 8px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.3);
min-width: 44px;
}
.payables-page .timeline-value {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
}
.payables-page .status-text {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.payables-page .status-icon {
font-size: 9px;
line-height: 1;
opacity: 0.8;
}
.payables-page .status-text.status-pending {
color: #fb923c;
}
.payables-page .status-text.status-ready {
color: #38bdf8;
}
.payables-page .status-text.status-paid {
color: #4ade80;
}
.payables-page .status-text.status-partial,
.payables-page .status-text.status-partially_paid {
color: #4dd0e1;
}
.payables-page .status-text.status-on_hold,
.payables-page .status-text.status-on-hold {
color: #fbbf24;
}
.payables-page .status-text.status-failed {
color: #f87171;
}
.payables-page .status-text.status-cancelled {
color: #94a3b8;
}
.payables-page .status-text.approval-approved,
.payables-page .status-text.approval-finance-approved,
.payables-page .status-text.approval-manager-approved {
color: #4ade80;
}
.payables-page .status-text.approval-pending,
.payables-page .status-text.approval-submitted {
color: #fb923c;
}
.payables-page .status-text.approval-draft {
color: #94a3b8;
}
.payables-page .status-text.approval-rejected {
color: #f87171;
}
.payables-page .state-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
}
.payables-page .state-icon {
font-size: 12px;
}
.payables-page .state-active {
color: rgba(255, 255, 255, 0.7);
}
.payables-page .state-active .state-icon {
color: rgba(255, 255, 255, 0.5);
}
.payables-page .state-on-hold {
color: #fbbf24;
}
.payables-page .state-on-hold .state-icon {
color: #fbbf24;
}
.payables-page .state-cancelled {
color: #f87171;
}
.payables-page .state-cancelled .state-icon {
color: #f87171;
}
.payables-page .state-closed {
color: #4ade80;
}
.payables-page .state-closed .state-icon {
color: #4ade80;
}
.payables-page .payment-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
}
.payables-page .payment-icon {
font-size: 12px;
}
.payables-page .payment-paid {
color: #4ade80;
}
.payables-page .payment-paid .payment-icon {
color: #4ade80;
}
.payables-page .payment-partial {
color: #4dd0e1;
}
.payables-page .payment-partial .payment-icon {
color: #4dd0e1;
}
.payables-page .payment-pending {
color: #fb923c;
}
.payables-page .payment-pending .payment-icon {
color: #fb923c;
}
.payables-page .reimbursement-filters {
margin-top: 20px;
padding: 16px 20px;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: space-between;
}
.payables-page .smart-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.payables-page .filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.payables-page .filter-pill:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
}
.payables-page .filter-pill.active {
background: rgba(255, 130, 90, 0.15);
border-color: rgba(255, 130, 90, 0.3);
color: #ffb083;
}
.payables-page .filter-pill__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
font-size: 11px;
font-weight: 700;
}
.payables-page .filter-pill.active .filter-pill__count {
background: rgba(255, 130, 90, 0.25);
}
.payables-page .actions-cell {
padding: 8px !important;
}
.payables-page .action-buttons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
flex-wrap: nowrap;
}
.payables-page .action-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.18s ease;
flex-shrink: 0;
}
.payables-page .action-icon-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.payables-page .action-icon-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
transform: translateY(-1px);
}
.payables-page .action-icon-btn--danger {
color: rgba(239, 68, 68, 0.8);
}
.payables-page .action-icon-btn--danger:hover {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}
.payables-page .bulk-settle-panel {
margin-bottom: 16px;
padding: 14px 16px 12px;
border-radius: 18px;
background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
}
.payables-page .bulk-settle-header {
margin-bottom: 6px;
}
.payables-page .bulk-settle-title {
margin: 0 0 4px;
font-size: 16px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.payables-page .bulk-settle-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: #ffc889;
}
.payables-page .bulk-settle-subtitle {
display: block;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.3;
}
.payables-page .bulk-settle-slider {
display: flex;
align-items: center;
gap: 6px;
position: relative;
min-height: 0;
}
.payables-page .slider-arrow {
width: 30px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
.payables-page .slider-arrow mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.payables-page .slider-arrow:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.payables-page .bulk-settle-chips {
display: flex;
gap: 8px;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
flex: 1;
padding: 0;
min-height: 0;
}
.payables-page .bulk-settle-chips::-webkit-scrollbar {
display: none;
}
.payables-page .bulk-settle-chips {
-ms-overflow-style: none;
scrollbar-width: none;
}
.payables-page .bulk-settle-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.2s ease;
min-width: 0;
width: clamp(228px, 24vw, 288px);
flex-shrink: 0;
scroll-snap-align: start;
}
.payables-page .bulk-settle-chip:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
.payables-page .bulk-settle-chip.active {
background: rgba(255, 171, 118, 0.08);
border-color: rgba(255, 171, 118, 0.24);
box-shadow: inset 0 0 0 1px rgba(255, 171, 118, 0.1);
}
.payables-page .chip-info {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.payables-page .chip-avatar {
width: 32px;
height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(255, 171, 118, 0.22), rgba(255, 127, 80, 0.16));
border: 1px solid rgba(255, 171, 118, 0.24);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #ffc889;
flex-shrink: 0;
}
.payables-page .chip-details {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.payables-page .chip-name {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.payables-page .chip-meta {
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.payables-page .chip-actions {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.payables-page .chip-action-btn {
width: 26px;
height: 26px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.64);
}
.payables-page .chip-action-btn mat-icon {
font-size: 15px;
width: 15px;
height: 15px;
}
.payables-page .chip-action-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.payables-page .chip-action-btn--settle {
background: rgba(255, 171, 118, 0.14);
border-color: rgba(255, 171, 118, 0.18);
color: #ffc889;
}
.payables-page .chip-action-btn--settle:hover {
background: rgba(255, 171, 118, 0.22);
border-color: rgba(255, 171, 118, 0.28);
color: #ffe0b8;
transform: translateY(-1px);
}
.payables-page .bulk-settle-form {
margin-top: 12px;
padding: 14px 16px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 171, 118, 0.14);
animation: slideDown 0.2s ease-out;
}
.payables-page .bulk-settle-form-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.payables-page .bulk-settle-form-header h5 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.payables-page .bulk-settle-form-header strong {
color: #ffc889;
}
.payables-page .bulk-settle-close {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.payables-page .bulk-settle-form-body {
display: grid;
grid-template-columns: minmax(170px, 0.95fr) minmax(170px, 0.9fr) minmax(210px, 1fr) minmax(210px, 1fr);
gap: 10px 12px;
align-items: end;
}
.payables-page .bulk-settle-form-body .form-row {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.payables-page .bulk-settle-form-body label {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.payables-page .bulk-settle-form-body .form-select,
.payables-page .bulk-settle-form-body .form-input {
min-height: 42px;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 13px;
font-family: inherit;
outline: none;
transition: border-color 0.2s;
}
.payables-page .bulk-settle-form-body .form-select:focus,
.payables-page .bulk-settle-form-body .form-input:focus {
border-color: rgba(255, 171, 118, 0.34);
}
.payables-page .bulk-settle-form-body .form-select option {
background: #1a1a2e;
color: #fff;
}
.payables-page .amount-input-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 0;
}
.payables-page .amount-input-wrapper .currency-symbol {
position: absolute;
left: 12px;
font-size: 13px;
font-weight: 700;
color: #ffc889;
pointer-events: none;
z-index: 1;
}
.payables-page .amount-input-wrapper .amount-input {
padding-left: 28px !important;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
font-family: var(--ui-font-mono);
width: 100%;
}
.payables-page .amount-input-wrapper .amount-input::-webkit-inner-spin-button,
.payables-page .amount-input-wrapper .amount-input::-webkit-outer-spin-button {
opacity: 0.3;
}
.payables-page .amount-hint {
position: absolute;
right: 10px;
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
pointer-events: none;
}
.payables-page .settle-preview {
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.payables-page .settle-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.payables-page .settle-preview-label {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 8px;
}
.payables-page .settle-mode-badge {
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 171, 118, 0.12);
color: #ffc889;
letter-spacing: 0.08em;
}
.payables-page .settle-preview-summary {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.payables-page .settle-items-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 132px;
overflow: auto;
padding-right: 2px;
}
.payables-page .settle-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 9px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
background: transparent;
border: 1px solid transparent;
}
.payables-page .settle-item:hover {
background: rgba(255, 255, 255, 0.06);
}
.payables-page .settle-item--selected {
background: rgba(255, 171, 118, 0.06);
border-color: rgba(255, 171, 118, 0.12);
}
.payables-page .settle-item--skipped {
opacity: 0.5;
}
.payables-page .settle-item--skipped:hover {
opacity: 0.85;
}
.payables-page .settle-item-check {
flex-shrink: 0;
}
.payables-page .check-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.payables-page .check-icon--on {
color: #ffc889;
}
.payables-page .check-icon--off {
color: rgba(255, 255, 255, 0.25);
}
.payables-page .settle-item-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.payables-page .settle-item-ref {
font-family: var(--ui-font-mono);
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.payables-page .settle-item-cat {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
}
.payables-page .settle-item-amount {
font-family: var(--ui-font-mono);
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.payables-page .settle-item-amount--on {
color: #ffc889;
}
.payables-page .settle-item-amount--off {
color: rgba(255, 255, 255, 0.3);
text-decoration: line-through;
}
.payables-page .settle-unallocated {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 10px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.2);
font-size: 12px;
color: #fbbf24;
}
.payables-page .settle-unallocated mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.payables-page .settle-unallocated--error {
background: rgba(248, 113, 113, 0.08);
border-color: rgba(248, 113, 113, 0.2);
color: #f87171;
}
.payables-page .settle-apply-full {
margin-left: auto;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(255, 171, 118, 0.24);
background: rgba(255, 171, 118, 0.1);
color: #ffc889;
font-size: 11px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
}
.payables-page .settle-apply-full:hover {
background: rgba(255, 171, 118, 0.18);
border-color: rgba(255, 171, 118, 0.36);
}
.payables-page .form-actions {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
justify-content: flex-end;
grid-column: 1/-1;
flex-wrap: wrap;
min-width: 0;
padding-top: 2px;
}
.payables-page .pill-btn--settle {
background: linear-gradient(120deg, #ff9b61, #ff7a45) !important;
color: #fff !important;
border: none !important;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
@media (max-width: 1240px) {
.payables-page .bulk-settle-form-body {
grid-template-columns: repeat(2, minmax(200px, 1fr));
}
.payables-page .form-actions {
grid-column: 1/-1;
justify-content: flex-end;
min-width: 0;
flex-wrap: wrap;
}
}
@media (max-width: 900px) {
.payables-page .bulk-settle-panel {
padding: 12px 14px 10px;
}
.payables-page .bulk-settle-chip {
width: clamp(176px, 72vw, 214px);
}
.payables-page .bulk-settle-form-body {
grid-template-columns: 1fr;
}
.payables-page .form-actions {
width: 100%;
justify-content: stretch;
}
.payables-page .form-actions .pill-btn {
flex: 1 1 0;
justify-content: center;
}
}
.payables-page .pill-btn--settle:hover:not(:disabled) {
box-shadow: 0 8px 24px rgba(255, 122, 69, 0.28);
transform: translateY(-1px);
}
.payables-page .pill-btn--settle:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.payables-page .spin {
animation: spin 1.2s linear infinite;
}
/* end .payables-page */
/* ==========================================================================
EMPLOYEE STATEMENT — scoped to payables-drawer-container
mat-sidenav renders outside .payables-page, so styles must be here
========================================================================== */
.payables-drawer-container {
/* Summary Cards */
/* Entries List */
}
.payables-drawer-container .statement-employee-name {
font-size: 13px;
color: rgba(255, 175, 133, 0.92);
font-weight: 600;
letter-spacing: 0.01em;
}
.payables-drawer-container .statement-loading {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.payables-drawer-container .statement-loading mat-icon {
font-size: 32px;
width: 32px;
height: 32px;
color: rgba(255, 155, 97, 0.92);
}
.payables-drawer-container .statement-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.payables-drawer-container .summary-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 14px 13px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
border: 1px solid rgba(255, 255, 255, 0.09);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.payables-drawer-container .summary-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.44);
}
.payables-drawer-container .summary-value {
font-size: 17px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.payables-drawer-container .summary-count {
font-size: 11px;
color: rgba(255, 255, 255, 0.46);
}
.payables-drawer-container .summary-card--owed {
border-color: rgba(251, 146, 60, 0.24);
background: linear-gradient(180deg, rgba(251, 146, 60, 0.08), rgba(255, 255, 255, 0.025));
}
.payables-drawer-container .summary-card--owed .summary-value {
color: #ffae68;
}
.payables-drawer-container .summary-card--paid {
border-color: rgba(74, 222, 128, 0.24);
background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), rgba(255, 255, 255, 0.025));
}
.payables-drawer-container .summary-card--paid .summary-value {
color: #78e7a1;
}
.payables-drawer-container .summary-card--balance {
border-color: rgba(248, 113, 113, 0.24);
background: linear-gradient(180deg, rgba(248, 113, 113, 0.08), rgba(255, 255, 255, 0.025));
}
.payables-drawer-container .summary-card--balance .summary-value {
color: #ff918f;
}
.payables-drawer-container .summary-card--balance.summary-card--zero {
border-color: rgba(74, 222, 128, 0.2);
}
.payables-drawer-container .summary-card--balance.summary-card--zero .summary-value {
color: #4ade80;
}
.payables-drawer-container .statement-entries {
display: flex;
flex-direction: column;
gap: 8px;
}
.payables-drawer-container .statement-entry {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 14px 15px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.payables-drawer-container .statement-entry:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.028));
transform: translateY(-1px);
}
.payables-drawer-container .statement-entry--paid {
border-left: 3px solid rgba(74, 222, 128, 0.55);
}
.payables-drawer-container .statement-entry--owed {
border-left: 3px solid rgba(251, 146, 60, 0.55);
}
.payables-drawer-container .entry-left {
display: flex;
align-items: flex-start;
gap: 10px;
flex: 1;
}
.payables-drawer-container .entry-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: rgba(255, 255, 255, 0.42);
margin-top: 3px;
flex-shrink: 0;
}
.payables-drawer-container .entry-icon.paid {
color: #78e7a1;
}
.payables-drawer-container .entry-details {
display: flex;
flex-direction: column;
gap: 2px;
}
.payables-drawer-container .entry-ref {
font-family: var(--ui-font-mono);
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
}
.payables-drawer-container .entry-desc {
font-size: 11px;
color: rgba(255, 255, 255, 0.56);
}
.payables-drawer-container .entry-date {
font-size: 10px;
color: rgba(255, 255, 255, 0.38);
}
.payables-drawer-container .entry-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
}
.payables-drawer-container .entry-amount {
font-size: 14px;
font-weight: 700;
color: #ffae68;
}
.payables-drawer-container .entry-amount.paid {
color: #78e7a1;
}
.payables-drawer-container .entry-balance {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
font-family: var(--ui-font-mono);
}
.payables-drawer-container .entry-batch {
font-size: 9px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 175, 133, 0.12);
color: rgba(255, 193, 164, 0.95);
font-family: var(--ui-font-mono);
}
.payables-drawer-container .statement-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 0;
color: rgba(255, 255, 255, 0.35);
font-size: 14px;
}
.payables-drawer-container .statement-empty mat-icon {
font-size: 40px;
width: 40px;
height: 40px;
opacity: 0.4;
}
@media (max-width: 560px) {
.payables-drawer-container .mat-drawer.glass-sidenav.payables-statement-drawer {
width: min(100vw, 420px);
}
.payables-drawer-container .statement-summary {
grid-template-columns: 1fr;
}
.payables-drawer-container .statement-entry {
flex-direction: column;
align-items: stretch;
}
.payables-drawer-container .entry-right {
align-items: flex-start;
}
}
.payables-drawer-container .spin {
animation: spin 1.2s linear infinite;
}
/* ==========================================================================
PAGE CONTRACT: RECEIVABLES
==========================================================================
Scoped page-level ownership for /console/receivables.
========================================================================== */
.receivables-page .receivables-shell {
position: relative;
padding-bottom: 80px;
}
/* ==========================================================================
UI PAGE VARIANT - CAR SALES
==========================================================================
Scoped contract for /console/sales/car/view/:car.
========================================================================== */
.ui-page--car-sales {
color: var(--ui-text-primary);
}
.ui-page--car-sales .sales-car-shell {
gap: var(--ui-space-6);
}
.ui-page--car-sales .sales-car-loading,
.ui-page--car-sales .sales-car-empty-state--page {
min-height: calc(100vh - 180px);
}
.ui-page--car-sales .sales-car-hero {
display: grid;
grid-template-columns: 180px minmax(0, 1fr) minmax(340px, 380px);
gap: var(--ui-space-5);
align-items: start;
}
.ui-page--car-sales .sales-car-hero.sales-car-hero--without-media {
grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
}
.ui-page--car-sales .sales-car-hero__media {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ui-page--car-sales .sales-car-hero__image {
width: 100%;
max-height: 140px;
display: block;
object-fit: contain;
}
.ui-page--car-sales .sales-car-hero__main {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--ui-space-2);
min-width: 0;
}
.ui-page--car-sales .sales-car-hero__eyebrow {
margin: 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-hero__title {
margin: 0;
font-size: clamp(2rem, 3vw, 3rem);
font-weight: var(--ui-font-bold);
letter-spacing: -0.04em;
line-height: 1;
color: var(--ui-text-primary);
}
.ui-page--car-sales .sales-car-hero__subtitle {
margin: 0;
font-size: clamp(var(--ui-text-lg), 1.8vw, 1.6rem);
color: var(--ui-text-secondary);
}
.ui-page--car-sales .sales-car-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-hero__meta span::after {
content: "•";
margin-left: var(--ui-space-2);
color: var(--ui-text-subtle);
}
.ui-page--car-sales .sales-car-hero__meta span:last-child::after {
display: none;
}
.ui-page--car-sales .sales-car-hero__chips {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.ui-page--car-sales .sales-car-hero__owner-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.ui-page--car-sales .sales-car-hero__owner-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ui-text-subtle);
}
.ui-page--car-sales .sales-car-hero__owner-link,
.ui-page--car-sales .sales-car-hero__owner-value {
border: 0;
padding: 0;
background: transparent;
color: var(--ui-text-primary);
font-size: var(--ui-text-md);
font-weight: var(--ui-font-semibold);
text-align: left;
text-decoration: none;
}
.ui-page--car-sales .sales-car-hero__owner-link {
cursor: pointer;
}
.ui-page--car-sales .sales-car-hero__owner-link:hover {
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-hero__owner-phone {
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-hero__owner-phone::before {
content: "•";
margin-right: 8px;
color: var(--ui-text-subtle);
}
.ui-page--car-sales .sales-car-hero__aside {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
gap: var(--ui-space-3);
min-width: 0;
width: 100%;
}
.ui-page--car-sales .sales-car-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--ui-space-2);
}
.ui-page--car-sales .sales-car-hero__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-3);
width: 100%;
margin-top: auto;
}
.ui-page--car-sales .sales-car-hero-stat {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
min-width: 0;
min-height: 120px;
padding: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border);
background: rgba(255, 255, 255, 0.025);
}
.ui-page--car-sales .sales-car-hero-stat__label {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ui-text-subtle);
}
.ui-page--car-sales .sales-car-hero-stat__label mat-icon {
width: 16px;
height: 16px;
font-size: 16px;
}
.ui-page--car-sales .sales-car-hero-stat__value {
margin-top: auto;
font-size: clamp(1.15rem, 1.5vw, 1.7rem);
font-weight: var(--ui-font-bold);
line-height: 1.1;
color: var(--ui-text-primary);
overflow-wrap: anywhere;
}
.ui-page--car-sales .sales-car-hero-stat__meta {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
line-height: 1.35;
}
.ui-page--car-sales .sales-car-hero-stat--success .sales-car-hero-stat__label,
.ui-page--car-sales .sales-car-hero-stat--success .sales-car-hero-stat__value {
color: var(--ui-success);
}
.ui-page--car-sales .sales-car-hero-stat--info .sales-car-hero-stat__label,
.ui-page--car-sales .sales-car-hero-stat--info .sales-car-hero-stat__value {
color: var(--ui-info);
}
.ui-page--car-sales .sales-car-hero-stat--warning .sales-car-hero-stat__label,
.ui-page--car-sales .sales-car-hero-stat--warning .sales-car-hero-stat__value {
color: var(--ui-warning);
}
.ui-page--car-sales .sales-car-hero-stat--financial .sales-car-hero-stat__label {
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-hero-stat--financial .sales-car-hero-stat__value {
color: var(--ui-text-primary);
}
.ui-page--car-sales .sales-car-hero-stat--muted .sales-car-hero-stat__value {
color: var(--ui-text-secondary);
}
.ui-page--car-sales .sales-car-hero.sales-car-hero--without-media .sales-car-hero__stats {
max-width: 100%;
}
.ui-page--car-sales .sales-car-hero__actions {
width: 100%;
justify-content: flex-end;
}
.ui-page--car-sales .sales-car-hero__actions .ui-btn {
flex: 0 0 auto;
}
.ui-page--car-sales .sales-car-hero__aside > * {
width: 100%;
}
.ui-page--car-sales .sales-car-hero__stats {
padding-top: var(--ui-space-1);
}
.ui-page--car-sales .sales-car-hero.sales-car-hero--without-media .sales-car-hero__aside {
max-width: 380px;
}
.ui-page--car-sales .sales-car-hero__actions + .sales-car-hero__stats {
margin-top: var(--ui-space-2);
}
.ui-page--car-sales .sales-car-hero__stats .sales-car-hero-stat {
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.ui-page--car-sales .sales-car-hero__stats .sales-car-hero-stat__value {
min-height: 0;
}
.ui-page--car-sales .sales-car-hero__stats .sales-car-hero-stat__meta:empty {
display: none;
}
.ui-page--car-sales .sales-car-hero__stats {
align-items: stretch;
}
.ui-page--car-sales .sales-car-hero__stats .sales-car-hero-stat {
display: grid;
grid-template-rows: auto 1fr auto;
}
.ui-page--car-sales .sales-car-tabs-shell {
padding: var(--ui-space-5);
}
.ui-page--car-sales .sales-car-tab-content {
width: 100%;
}
.ui-page--car-sales .sales-car-overview {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-overview-lead,
.ui-page--car-sales .sales-car-overview-support {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-auto-rows: minmax(0, 1fr);
align-items: stretch;
gap: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-overview-support {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ui-page--car-sales .sales-car-panel-card,
.ui-page--car-sales .sales-car-package-card {
min-width: 0;
height: auto;
align-self: start;
}
.ui-page--car-sales .sales-car-overview-lead > .sales-car-panel-card,
.ui-page--car-sales .sales-car-overview-support > .sales-car-panel-card {
height: 100%;
align-self: stretch;
}
.ui-page--car-sales .sales-car-overview-lead > .sales-car-panel-card {
min-height: 300px;
}
.ui-page--car-sales .sales-car-overview-support > .sales-car-panel-card {
min-height: 220px;
}
.ui-page--car-sales .sales-car-panel-card--details {
width: 100%;
}
.ui-page--car-sales .sales-car-panel-card__header,
.ui-page--car-sales .sales-car-package-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-3);
}
.ui-page--car-sales .sales-car-panel-card__title {
display: flex;
align-items: center;
gap: var(--ui-space-2);
min-width: 0;
}
.ui-page--car-sales .sales-car-panel-card__title mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-panel-card__title .ui-card__heading,
.ui-page--car-sales .sales-car-package-card__header .ui-card__heading {
margin: 0;
font-size: var(--ui-text-lg);
}
.ui-page--car-sales .sales-car-panel-card__body,
.ui-page--car-sales .sales-car-package-card__body {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
flex: 1 1 auto;
}
.ui-page--car-sales .sales-car-panel-card__body--compact {
gap: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-panel-card__eyebrow {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-panel-card__headline {
margin: 0;
font-size: clamp(1.35rem, 2vw, 1.9rem);
font-weight: var(--ui-font-semibold);
line-height: 1.08;
color: var(--ui-text-primary);
}
.ui-page--car-sales .sales-car-inline-meta {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-inline-meta mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.ui-page--car-sales .sales-car-key-figure {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: var(--ui-space-3);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ui-page--car-sales .sales-car-key-figure__label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-key-figure__value {
font-size: clamp(1.4rem, 2vw, 2.1rem);
font-weight: var(--ui-font-bold);
letter-spacing: -0.03em;
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-inline-link {
width: fit-content;
padding: 0;
border: 0;
background: transparent;
color: var(--ui-brand-light);
font-size: var(--ui-text-md);
font-weight: var(--ui-font-semibold);
text-decoration: none;
cursor: pointer;
}
.ui-page--car-sales .sales-car-inline-link:hover {
color: var(--ui-text-primary);
}
.ui-page--car-sales .sales-car-capitalize {
text-transform: capitalize;
}
.ui-page--car-sales .sales-car-info-grid--compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-page--car-sales .sales-car-job-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ui-page--car-sales .sales-car-insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--ui-space-3);
}
.ui-page--car-sales .sales-car-insight-metric {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
padding: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.025);
}
.ui-page--car-sales .sales-car-insight-metric__label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-insight-metric__value {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1.2;
}
.ui-page--car-sales .sales-car-details-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ui-page--car-sales .sales-car-panel-state {
min-height: 220px;
}
.ui-page--car-sales .sales-car-empty-state {
min-height: 220px;
border: 1px dashed var(--ui-border);
border-radius: var(--ui-radius-xl);
background: rgba(255, 255, 255, 0.02);
}
.ui-page--car-sales .sales-car-empty-state p {
margin: 0;
}
.ui-page--car-sales .sales-car-history-feed {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-page--car-sales .sales-car-history-entry {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) minmax(120px, auto);
align-items: center;
gap: var(--ui-space-4);
padding: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-history-entry--clickable {
cursor: pointer;
}
.ui-page--car-sales .sales-car-history-entry--clickable:hover {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
.ui-page--car-sales .sales-car-history-entry__icon {
width: 56px;
height: 56px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ui-border-light);
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-history-entry__icon mat-icon {
font-size: 22px;
width: 22px;
height: 22px;
}
.ui-page--car-sales .sales-car-history-entry__icon--booking {
background: var(--ui-info-bg);
border-color: var(--ui-info-border);
color: var(--ui-info);
}
.ui-page--car-sales .sales-car-history-entry__icon--invoice {
background: var(--ui-success-bg);
border-color: var(--ui-success-border);
color: var(--ui-success);
}
.ui-page--car-sales .sales-car-history-entry__icon--package {
background: var(--ui-warning-bg);
border-color: var(--ui-warning-border);
color: var(--ui-warning);
}
.ui-page--car-sales .sales-car-history-entry__content {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
min-width: 0;
}
.ui-page--car-sales .sales-car-history-entry__meta {
font-size: var(--ui-text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-history-entry__heading {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: wrap;
}
.ui-page--car-sales .sales-car-history-entry__title {
font-size: clamp(1.2rem, 1.8vw, 1.8rem);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1.1;
}
.ui-page--car-sales .sales-car-history-entry__summary {
font-size: var(--ui-text-lg);
color: var(--ui-text-secondary);
line-height: 1.3;
}
.ui-page--car-sales .sales-car-history-entry__details {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-3);
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-history-entry__detail-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ui-page--car-sales .sales-car-history-entry__detail-item mat-icon {
font-size: 15px;
width: 15px;
height: 15px;
color: var(--ui-text-subtle);
}
.ui-page--car-sales .sales-car-history-entry__aside {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 6px;
min-width: 120px;
text-align: right;
}
.ui-page--car-sales .sales-car-history-entry__amount {
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
line-height: 1.1;
}
.ui-page--car-sales .sales-car-history-entry__amount--empty {
color: var(--ui-text-subtle);
}
.ui-page--car-sales .sales-car-history-entry__due {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-danger);
}
.ui-page--car-sales .sales-car-danger-text {
color: var(--ui-danger);
}
.ui-page--car-sales .sales-car-tab-actions {
display: flex;
justify-content: center;
margin-top: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-invoice-table-card {
--gdt-surface: rgba(255, 255, 255, 0.02);
--gdt-border: rgba(255, 255, 255, 0.08);
max-height: none;
}
.ui-page--car-sales .sales-car-invoice-table {
min-width: 0;
}
.ui-page--car-sales .sales-car-invoice-table tbody {
max-height: 420px;
}
.ui-page--car-sales .sales-car-col--invoice {
width: 14%;
}
.ui-page--car-sales .sales-car-col--date {
width: 12%;
}
.ui-page--car-sales .sales-car-col--service {
width: 26%;
}
.ui-page--car-sales .sales-car-col--branch {
width: 14%;
}
.ui-page--car-sales .sales-car-col--amount {
width: 12%;
}
.ui-page--car-sales .sales-car-col--due {
width: 10%;
}
.ui-page--car-sales .sales-car-col--actions {
width: 12%;
}
.ui-page--car-sales .sales-car-table-actions {
text-align: right;
}
.ui-page--car-sales .sales-car-action-icons {
display: inline-flex;
align-items: center;
gap: 4px;
justify-content: flex-end;
}
.ui-page--car-sales .sales-car-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.ui-page--car-sales .sales-car-action-btn mat-icon {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
}
.ui-page--car-sales .sales-car-action-btn:hover {
background: rgba(255, 130, 90, 0.15);
border-color: rgba(255, 130, 90, 0.3);
color: rgba(255, 180, 130, 0.95);
}
.ui-page--car-sales .sales-car-table-date {
margin-top: 0;
}
.ui-page--car-sales .sales-car-table-amount,
.ui-page--car-sales .sales-car-table-due {
text-align: right;
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--car-sales .sales-car-package-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-documents-layout {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-media-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ui-space-3);
}
.ui-page--car-sales .sales-car-media-card {
margin: 0;
overflow: hidden;
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border-light);
background: rgba(255, 255, 255, 0.03);
min-height: 160px;
}
.ui-page--car-sales .sales-car-media-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.ui-page--car-sales .sales-car-document-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 240px));
justify-content: flex-start;
gap: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-document-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-border-light);
background: rgba(255, 255, 255, 0.025);
min-width: 0;
}
.ui-page--car-sales .sales-car-document-card__preview {
position: relative;
height: 124px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid var(--ui-border-light);
overflow: hidden;
text-decoration: none;
}
.ui-page--car-sales .sales-car-document-card__preview img {
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--ui-space-2);
}
.ui-page--car-sales .sales-car-document-card__preview-frame {
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
background: rgba(255, 255, 255, 0.02);
}
.ui-page--car-sales .sales-car-document-card__file {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
background: linear-gradient(160deg, rgba(255, 122, 61, 0.12), rgba(255, 122, 61, 0.04));
}
.ui-page--car-sales .sales-car-document-card__preview mat-icon,
.ui-page--car-sales .sales-car-document-card__file mat-icon {
font-size: 36px;
width: 36px;
height: 36px;
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-document-card__ext {
padding: 4px 8px;
border-radius: var(--ui-radius-pill);
background: rgba(255, 122, 61, 0.16);
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-bold);
color: var(--ui-brand-light);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ui-page--car-sales .sales-car-document-card__preview-overlay {
position: absolute;
right: var(--ui-space-2);
bottom: var(--ui-space-2);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: var(--ui-radius-pill);
background: rgba(11, 12, 18, 0.72);
color: var(--ui-text-primary);
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-medium);
opacity: 0;
transition: opacity 0.2s ease;
}
.ui-page--car-sales .sales-car-document-card__preview:hover .sales-car-document-card__preview-overlay {
opacity: 1;
}
.ui-page--car-sales .sales-car-document-card__preview-overlay mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
color: currentColor;
}
.ui-page--car-sales .sales-car-document-card__body {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
}
.ui-page--car-sales .sales-car-document-card__name {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1.35;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ui-page--car-sales .sales-car-document-card__meta {
font-size: var(--ui-text-2xs);
color: var(--ui-text-muted);
font-weight: var(--ui-font-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ui-page--car-sales .sales-car-document-card__actions {
display: flex;
align-items: center;
gap: var(--ui-space-2);
margin-top: var(--ui-space-1);
}
.ui-page--car-sales .sales-car-document-card__actions .ui-btn:not(.sales-car-delete-btn) {
flex: 1;
}
.ui-page--car-sales .sales-car-delete-btn {
color: var(--ui-text-muted);
opacity: 0.6;
transition: opacity 0.2s, color 0.2s;
}
.ui-page--car-sales .sales-car-delete-btn:hover {
color: var(--ui-danger);
opacity: 1;
}
/* ── Documents Header ─────────────────────────── */
.ui-page--car-sales .sales-car-documents-header {
display: flex;
justify-content: flex-end;
margin-bottom: var(--ui-space-4);
}
.ui-page--car-sales .sales-car-document-input {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* ── Upload Queue ─────────────────────────────── */
.ui-page--car-sales .sales-car-upload-queue {
margin-bottom: var(--ui-space-4);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-lg);
background: rgba(255, 255, 255, 0.03);
overflow: hidden;
}
.ui-page--car-sales .sales-car-upload-queue__header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-brand-light);
border-bottom: 1px solid var(--ui-border-light);
}
.ui-page--car-sales .sales-car-upload-queue__header mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.ui-page--car-sales .sales-car-upload-item {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: 1px solid var(--ui-border-light);
}
.ui-page--car-sales .sales-car-upload-item:last-child {
border-bottom: none;
}
.ui-page--car-sales .sales-car-upload-item__preview {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ui-radius-md);
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.ui-page--car-sales .sales-car-upload-preview-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-page--car-sales .sales-car-upload-item__preview mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-upload-item__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ui-page--car-sales .sales-car-upload-item__name {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-page--car-sales .sales-car-upload-progress-bar {
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.ui-page--car-sales .sales-car-upload-progress-fill {
height: 100%;
border-radius: 2px;
background: var(--ui-brand);
transition: width 0.2s ease;
}
.ui-page--car-sales .sales-car-upload-item.done .sales-car-upload-progress-fill {
background: var(--ui-success);
}
.ui-page--car-sales .sales-car-upload-item.error .sales-car-upload-progress-fill {
background: var(--ui-danger);
}
.ui-page--car-sales .sales-car-upload-item__status {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-upload-retry-btn {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.06);
color: var(--ui-text-muted);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.ui-page--car-sales .sales-car-upload-retry-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--ui-danger);
}
.ui-page--car-sales .sales-car-upload-retry-btn mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
/* ── Documents Empty State ────────────────────── */
.ui-page--car-sales .sales-car-documents-empty {
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ui-space-3);
padding: var(--ui-space-8) var(--ui-space-4);
text-align: center;
}
.ui-page--car-sales .sales-car-documents-empty__icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ui-radius-xl);
background: rgba(var(--ui-brand-rgb, 200, 130, 50), 0.12);
}
.ui-page--car-sales .sales-car-documents-empty__icon mat-icon {
font-size: 32px;
width: 32px;
height: 32px;
color: var(--ui-brand-light);
}
.ui-page--car-sales .sales-car-documents-empty__title {
margin: 0;
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.ui-page--car-sales .sales-car-documents-empty__desc {
margin: 0;
font-size: var(--ui-text-md);
color: var(--ui-text-muted);
}
.ui-page--car-sales .sales-car-documents-empty__formats {
margin-top: var(--ui-space-2);
font-size: var(--ui-text-xs);
color: var(--ui-text-subtle);
}
@media (max-width: 1100px) {
.ui-page--car-sales .sales-car-hero {
grid-template-columns: 200px minmax(0, 1fr);
}
.ui-page--car-sales .sales-car-hero__aside {
grid-column: 2;
}
.ui-page--car-sales .sales-car-hero__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-page--car-sales .sales-car-details-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.ui-page--car-sales .sales-car-hero {
grid-template-columns: 1fr;
}
.ui-page--car-sales .sales-car-hero__aside {
grid-column: 1/-1;
}
.ui-page--car-sales .sales-car-hero__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-page--car-sales .sales-car-overview-lead,
.ui-page--car-sales .sales-car-overview-support,
.ui-page--car-sales .sales-car-details-grid,
.ui-page--car-sales .sales-car-info-grid--compact,
.ui-page--car-sales .sales-car-job-grid,
.ui-page--car-sales .sales-car-insights-grid {
grid-template-columns: 1fr;
}
.ui-page--car-sales .sales-car-history-entry {
grid-template-columns: 48px minmax(0, 1fr);
}
.ui-page--car-sales .sales-car-history-entry__aside {
grid-column: 2;
align-items: flex-start;
text-align: left;
}
.ui-page--car-sales .sales-car-invoice-table {
min-width: 960px;
}
}
@media (max-width: 720px) {
.ui-page--car-sales .sales-car-hero__media {
min-height: 200px;
}
.ui-page--car-sales .sales-car-hero__owner-inline {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.ui-page--car-sales .sales-car-hero__owner-phone::before {
display: none;
}
.ui-page--car-sales .sales-car-hero__actions {
justify-content: flex-start;
}
.ui-page--car-sales .sales-car-hero__actions .ui-btn {
width: 100%;
}
.ui-page--car-sales .sales-car-hero__stats {
grid-template-columns: 1fr;
}
.ui-page--car-sales .sales-car-tabs-shell {
padding: var(--ui-space-4);
}
}
/* ==========================================================================
UI PAGES - Marketing CMS
Scoped page contract for CMS composition and preview surfaces.
========================================================================== */
.cms-preview-card {
padding: var(--ui-space-3);
gap: var(--ui-space-2);
overflow: hidden;
}
.cms-preview-card .ui-card__header, .cms-preview-card .glass-modal-container .card-header, .glass-modal-container .cms-preview-card .card-header,
.cms-preview-card .glass-modal-container .section-header,
.glass-modal-container .cms-preview-card .section-header,
.cms-preview-card .glass-modal-container .entry-header,
.glass-modal-container .cms-preview-card .entry-header,
.cms-preview-card .glass-modal-container .timeline-card > header,
.glass-modal-container .cms-preview-card .timeline-card > header,
.cms-preview-card .glass-modal-container .attachments > header,
.glass-modal-container .cms-preview-card .attachments > header,
.cms-preview-card .glass-modal-container .review-header,
.glass-modal-container .cms-preview-card .review-header,
.cms-preview-card .glass-modal-container .modal-header,
.glass-modal-container .cms-preview-card .modal-header {
align-items: flex-start;
gap: var(--ui-space-3);
}
.cms-preview-card__summary {
flex: 1 1 auto;
min-width: 0;
}
.cms-preview-card__actions {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
flex: 0 0 auto;
}
.cms-preview-card__studio {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-1);
min-width: 0;
}
.cms-preview-card__phone {
display: flex;
justify-content: center;
width: 100%;
min-width: 0;
overflow: hidden;
}
.cms-preview-card__meta {
width: 100%;
max-width: 100%;
text-align: center;
}
/* Analytics dashboards */
/* ==========================================================================
ANALYTICS LAYOUT — STRUCTURE ONLY
==========================================================================
Grid structure ONLY for ALL analytics dashboards.
PROVIDES:
- .analytics-page — Page container
- .analytics-grid — Main grid system
- .analytics-row — Horizontal sections
- .analytics-kpi-row — Stats/KPI row layout
- .analytics-chart-row — Chart section layout
- .analytics-section — Generic section wrapper
❌ FORBIDDEN (must be in component contracts):
- Colors, shadows, borders, gradients
- Card styling, chart styling, table styling
- Typography beyond layout
========================================================================== */
/* --------------------------------------------
PAGE CONTAINER
-------------------------------------------- */
.analytics-page {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
min-height: 0;
}
/* --------------------------------------------
GRID SYSTEM
-------------------------------------------- */
.analytics-grid {
display: grid;
gap: var(--ui-space-5);
}
.analytics-grid--2-col {
grid-template-columns: 1fr 1fr;
}
.analytics-grid--3-col {
grid-template-columns: repeat(3, 1fr);
}
.analytics-grid--4-col {
grid-template-columns: repeat(4, 1fr);
}
.analytics-grid--main-sidebar {
grid-template-columns: 1fr 320px;
}
@media (max-width: 1100px) {
.analytics-grid--2-col,
.analytics-grid--main-sidebar {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.analytics-grid--3-col {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.analytics-grid--3-col,
.analytics-grid--4-col {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------
ROW LAYOUTS
-------------------------------------------- */
.analytics-row {
display: flex;
gap: var(--ui-space-4);
flex-wrap: wrap;
}
.analytics-row--between {
justify-content: space-between;
}
.analytics-row--center {
align-items: center;
}
/* --------------------------------------------
KPI ROW (Stats Layout)
-------------------------------------------- */
.analytics-kpi-row {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-4);
}
.analytics-kpi-row > * {
flex: 1;
min-width: 140px;
}
@media (max-width: 768px) {
.analytics-kpi-row > * {
min-width: calc(50% - var(--ui-space-2));
}
}
@media (max-width: 480px) {
.analytics-kpi-row > * {
min-width: 100%;
}
}
/* --------------------------------------------
CHART ROW
-------------------------------------------- */
.analytics-chart-row {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--ui-space-5);
}
@media (max-width: 1000px) {
.analytics-chart-row {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------
SECTION
-------------------------------------------- */
.analytics-section {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.analytics-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
}
.analytics-section__content {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--ui-space-5);
}
@media (max-width: 1100px) {
.analytics-section__content {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------
STACKED SECTIONS
-------------------------------------------- */
.analytics-sections-stack {
display: flex;
flex-direction: column;
gap: var(--ui-space-6);
}
/* --------------------------------------------
TABLE ROW
-------------------------------------------- */
.analytics-table-row {
display: block;
}
/* --------------------------------------------
PANEL LAYOUTS
-------------------------------------------- */
.analytics-left-panel {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.analytics-right-panel {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
/* ==========================================================================
ANALYTICS DASHBOARD — Layout & Composition Contract
==========================================================================
Layouts, grids, and composition for analytics dashboards.
SCOPE: .analytics-dashboard
PROVIDES:
- Dashboard shell and glow effects (.fd-shell, .fd-glow-*)
- Stats row layouts (.stats-row, .stat-item)
- Chart containers (.chart-stats-card, .chart-container)
- Pie card layout (.pie-card)
- Section layouts (.dashboard-row, .dashboard-content)
- Metric tabs (.fd-metric-tabs)
USES:
- .ui-card for card visuals (from card.scss)
- CSS custom properties from tokens.scss
❌ FORBIDDEN:
- Redefining card visuals (use .ui-card)
- Global selectors (must be scoped to .analytics-dashboard)
========================================================================== */
.analytics-dashboard {
position: relative;
min-height: 100%;
}
/* ==========================================================================
GLOW EFFECTS
========================================================================== */
.analytics-dashboard .fd-glow {
position: fixed;
border-radius: var(--ui-radius-full);
filter: blur(90px);
opacity: 0.4;
pointer-events: none;
animation: fd-glow-pulse 7s ease-in-out infinite;
z-index: -1;
}
.analytics-dashboard .fd-glow-1 {
width: 320px;
height: 320px;
top: -40px;
left: -60px;
background: var(--ui-accent);
}
.analytics-dashboard .fd-glow-2 {
width: 340px;
height: 340px;
top: 60px;
right: -80px;
background: var(--ui-info);
animation-delay: 1s;
}
.analytics-dashboard .fd-glow-3 {
width: 260px;
height: 260px;
bottom: 0;
left: 30%;
background: var(--ui-success);
animation-delay: 2s;
}
@keyframes fd-glow-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.35;
}
50% {
transform: scale(1.08);
opacity: 0.5;
}
}
/* ==========================================================================
DASHBOARD LAYOUT
========================================================================== */
.analytics-dashboard .dashboard-content {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.analytics-dashboard .dashboard-row {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--ui-space-5);
}
@media (max-width: 1000px) {
.analytics-dashboard .dashboard-row {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
STATS ROW — Connected KPI Strip
========================================================================== */
.analytics-dashboard .stats-row {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-bottom: var(--ui-space-5);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ui-radius-xl);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.analytics-dashboard .stat-item {
flex: 1;
min-width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--ui-space-1);
padding: var(--ui-space-4) var(--ui-space-3);
background: transparent;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
transition: background 0.15s ease;
}
.analytics-dashboard .stat-item:last-child {
border-right: none;
}
.analytics-dashboard .stat-item:hover {
background: rgba(255, 255, 255, 0.04);
}
.analytics-dashboard .stat-item.active,
.analytics-dashboard .stat-item.selected {
background: rgba(255, 130, 90, 0.12);
}
.analytics-dashboard .stat-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.analytics-dashboard .stat-content h3 {
margin: 0;
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
line-height: 1.2;
}
.analytics-dashboard .stat-content p {
margin: 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-text-muted);
}
.analytics-dashboard .stat-content h3 {
margin: 0;
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
line-height: 1.2;
}
.analytics-dashboard .stat-content p {
margin: 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-text-muted);
}
/* ==========================================================================
CHART CARD — Uses .ui-card for base visuals
========================================================================== */
.analytics-dashboard .chart-stats-card {
/* Extends ui-card visuals via composition */
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-xl);
box-shadow: var(--ui-shadow-lg);
padding: var(--ui-space-5);
backdrop-filter: var(--ui-blur-md);
-webkit-backdrop-filter: var(--ui-blur-md);
}
.analytics-dashboard .chart-container {
min-height: 280px;
position: relative;
}
/* ==========================================================================
PIE CARD
========================================================================== */
.analytics-dashboard .pie-card {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-xl);
padding: var(--ui-space-5);
display: flex;
flex-direction: column;
}
.analytics-dashboard .pie-card-header p {
margin: 0 0 var(--ui-space-4) 0;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
}
.analytics-dashboard .pie-card-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.analytics-dashboard .pie-legend {
display: flex;
justify-content: center;
gap: var(--ui-space-5);
margin-top: var(--ui-space-4);
}
.analytics-dashboard .legend-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
font-size: var(--ui-text-xs);
color: var(--ui-text-secondary);
}
.analytics-dashboard .legend-dot {
width: 8px;
height: 8px;
border-radius: var(--ui-radius-full);
background: var(--ui-border);
}
/* ==========================================================================
SECTION LAYOUTS
========================================================================== */
.analytics-dashboard .fd-sections-stack {
display: flex;
flex-direction: column;
gap: var(--ui-space-6);
margin-top: var(--ui-space-6);
}
.analytics-dashboard .fd-referral-section {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-xl);
padding: var(--ui-space-6);
box-shadow: var(--ui-shadow-lg);
backdrop-filter: var(--ui-blur-md);
-webkit-backdrop-filter: var(--ui-blur-md);
}
.analytics-dashboard .fd-section-header {
margin-bottom: var(--ui-space-5);
}
.analytics-dashboard .fd-section-title {
margin: 0;
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.analytics-dashboard .fd-section-content {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--ui-space-6);
}
@media (max-width: 1100px) {
.analytics-dashboard .fd-section-content {
grid-template-columns: 1fr;
}
}
.analytics-dashboard .fd-left-panel {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.analytics-dashboard .fd-right-panel {
padding: var(--ui-space-5);
border-radius: var(--ui-radius-lg);
}
/* ==========================================================================
METRIC TABS — Connected Strip (same style as stats-row)
========================================================================== */
.analytics-dashboard .fd-metric-tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ui-radius-xl);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.analytics-dashboard .fd-metric-tab {
flex: 1;
min-width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--ui-space-1);
padding: var(--ui-space-4) var(--ui-space-3);
background: transparent;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
transition: background 0.15s ease;
}
.analytics-dashboard .fd-metric-tab:last-child {
border-right: none;
}
.analytics-dashboard .fd-metric-tab:hover {
background: rgba(255, 255, 255, 0.04);
}
.analytics-dashboard .fd-metric-tab.active {
background: rgba(255, 130, 90, 0.12);
}
.analytics-dashboard .fd-metric-tab .metric-value {
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.analytics-dashboard .fd-metric-tab .metric-label {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
/* ==========================================================================
REFERRERS LIST
========================================================================== */
.analytics-dashboard .fd-referrers-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--ui-space-3);
border-bottom: 1px solid var(--ui-border-light);
margin-bottom: var(--ui-space-4);
}
.analytics-dashboard .fd-referrers-header .header-title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
}
.analytics-dashboard .fd-referrers-list {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.analytics-dashboard .fd-referrer-item {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
/* ==========================================================================
EMPTY STATES
========================================================================== */
.analytics-dashboard .chart-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
color: var(--ui-text-muted);
text-align: center;
gap: var(--ui-space-2);
}
.analytics-dashboard .chart-empty-state mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
opacity: 0.5;
}
.analytics-dashboard .chart-empty-state h4 {
margin: 0;
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
}
.analytics-dashboard .chart-empty-state p {
margin: 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.analytics-dashboard .fd-empty-state {
padding: var(--ui-space-6);
text-align: center;
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
}
/* ==========================================================================
FD-SHELL ALIAS (backwards compatibility)
========================================================================== */
.analytics-dashboard .fd-shell {
position: relative;
min-height: 100%;
}
.analytics-dashboard .fd-glass {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-xl);
box-shadow: var(--ui-shadow-lg);
padding: var(--ui-space-5);
backdrop-filter: var(--ui-blur-md);
-webkit-backdrop-filter: var(--ui-blur-md);
}
/* ==========================================================================
EXECUTIVE DASHBOARD — Enterprise Grade Patterns
==========================================================================
CFO-grade dashboard: calm, dense, premium.
No gradients, no glows, no visual noise.
========================================================================== */
/* Executive Page Container - suppresses glows */
.analytics-dashboard.exec-dashboard {
background: transparent;
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.analytics-dashboard.exec-dashboard .fd-glow,
.analytics-dashboard.exec-dashboard .fd-glow-1,
.analytics-dashboard.exec-dashboard .fd-glow-2,
.analytics-dashboard.exec-dashboard .fd-glow-3 {
display: none;
}
/* Executive Header */
.analytics-dashboard.exec-dashboard .ui-page-header {
margin-bottom: 0;
}
.analytics-dashboard .exec-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-4);
}
.analytics-dashboard .exec-header-left {
display: flex;
flex-direction: column;
gap: 2px;
}
.analytics-dashboard .exec-header-title {
margin: 0;
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1.2;
}
.analytics-dashboard .exec-header-subtitle {
margin: 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.analytics-dashboard .exec-filters {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.analytics-dashboard .exec-filter-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-wrap: nowrap;
}
@media (max-width: 960px) {
.analytics-dashboard .exec-filter-row {
flex-wrap: wrap;
}
}
.analytics-dashboard.exec-dashboard .pill-trigger,
.analytics-dashboard.exec-dashboard app-date-filter .pill-trigger {
height: 34px;
padding: 0 var(--ui-space-3);
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
color: var(--ui-text-secondary);
box-shadow: none;
font-weight: var(--ui-font-medium);
}
.analytics-dashboard.exec-dashboard app-date-filter .pill-trigger {
height: auto;
min-height: 34px;
padding: var(--ui-space-2) var(--ui-space-3);
}
.analytics-dashboard.exec-dashboard .pill-trigger:hover,
.analytics-dashboard.exec-dashboard app-date-filter .pill-trigger:hover {
background: var(--ui-surface-2);
border-color: var(--ui-border-hover);
}
.analytics-dashboard.exec-dashboard .pill-start-icon,
.analytics-dashboard.exec-dashboard app-date-filter .pill-start-icon {
color: var(--ui-text-muted);
}
.analytics-dashboard.exec-dashboard .pill-trigger mat-icon:last-child {
color: var(--ui-text-muted);
}
/* Executive KPI Strip - Flat, no shadows */
.analytics-dashboard .exec-kpi-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--ui-space-2);
margin: 0;
}
@media (max-width: 1200px) {
.analytics-dashboard .exec-kpi-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.analytics-dashboard .exec-kpi-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.analytics-dashboard .exec-kpi-strip {
grid-template-columns: 1fr;
}
}
.analytics-dashboard .exec-kpi {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
min-width: 0;
min-height: 96px;
}
.analytics-dashboard .exec-kpi-value {
font-size: var(--ui-text-3xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
line-height: 1.05;
letter-spacing: -0.01em;
white-space: nowrap;
}
.analytics-dashboard .exec-kpi-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.analytics-dashboard .exec-kpi-delta {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
padding: 2px 6px;
border-radius: var(--ui-radius-sm);
}
.analytics-dashboard .exec-kpi-delta.positive {
color: var(--ui-success);
background: rgba(16, 185, 129, 0.1);
}
.analytics-dashboard .exec-kpi-delta.negative {
color: var(--ui-error);
background: rgba(239, 68, 68, 0.1);
}
.analytics-dashboard .exec-kpi-delta.neutral {
color: var(--ui-text-muted);
background: rgba(255, 255, 255, 0.05);
}
/* Executive Chart Section */
.analytics-dashboard .exec-chart-section {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
margin: 0;
}
.analytics-dashboard .exec-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
}
.analytics-dashboard .exec-chart-title {
margin: 0;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.analytics-dashboard .exec-chart-container {
height: 200px;
}
/* Executive Grid - Secondary Insights */
.analytics-dashboard .exec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--ui-space-4);
margin-bottom: var(--ui-space-5);
}
.analytics-dashboard .exec-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--ui-space-4);
}
@media (max-width: 768px) {
.analytics-dashboard .exec-grid-2 {
grid-template-columns: 1fr;
}
}
/* Executive Card - Flat, subtle */
.analytics-dashboard .exec-card {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
min-width: 0;
min-height: 220px;
}
.analytics-dashboard .exec-card-header {
margin-bottom: var(--ui-space-3);
}
.analytics-dashboard .exec-card-title {
margin: 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.analytics-dashboard .exec-card-subtitle {
margin: var(--ui-space-1) 0 0 0;
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.analytics-dashboard .exec-card-value {
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.analytics-dashboard .exec-card-chart {
height: 160px;
}
/* Executive Section Title */
.analytics-dashboard .exec-section-title {
margin: 0 0 var(--ui-space-4) 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.analytics-dashboard .exec-section-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.analytics-dashboard .exec-section-header .exec-section-title {
margin: 0;
}
.analytics-dashboard .exec-insights {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.analytics-dashboard .exec-insights-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ui-space-3);
}
@media (max-width: 1100px) {
.analytics-dashboard .exec-insights-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.analytics-dashboard .exec-insights-grid {
grid-template-columns: 1fr;
}
}
.analytics-dashboard .exec-metric-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-3);
}
@media (max-width: 600px) {
.analytics-dashboard .exec-metric-list {
grid-template-columns: 1fr;
}
}
.analytics-dashboard .exec-metric {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
}
.analytics-dashboard .exec-metric-label {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.analytics-dashboard .exec-metric-value {
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
/* Executive Mini Donuts Grid */
.analytics-dashboard .exec-donuts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ui-space-3);
}
@media (max-width: 900px) {
.analytics-dashboard .exec-donuts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.analytics-dashboard .exec-donut-card {
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-3);
text-align: center;
}
.analytics-dashboard .exec-donut-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-text-muted);
text-transform: uppercase;
margin-bottom: var(--ui-space-2);
}
.analytics-dashboard .exec-donut-chart {
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
}
.analytics-dashboard .exec-skeleton-block {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-2);
min-height: 160px;
}
/* Empty state for exec */
.analytics-dashboard .exec-empty {
padding: var(--ui-space-4);
text-align: center;
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
}
/* ==========================================================================
OPERATIONS OVERVIEW — Focused Landing Layout
==========================================================================
Route: /console/management/operations-overview
Keeps the landing view intentionally light: summary first, chart second.
========================================================================== */
.operations-overview-page .exec-dashboard {
max-width: none;
gap: var(--ui-space-4);
}
.operations-overview-page .operations-overview-header {
margin-bottom: var(--ui-space-4);
}
.operations-overview-page .operations-overview-header__summary {
padding: 4px 24px 12px;
}
.operations-overview-page .operations-overview-header__summary .analytics-comparison-row {
display: flex;
gap: 14px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.operations-overview-page .operations-overview-header__summary .analytics-comparison-row::-webkit-scrollbar {
height: 4px;
}
.operations-overview-page .operations-overview-header__summary .analytics-comparison-row::-webkit-scrollbar-track {
background: transparent;
}
.operations-overview-page .operations-overview-header__summary .analytics-comparison-row::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
}
.operations-overview-page .operations-overview-header__summary .analytics-comparison-row:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card {
flex: 0 0 180px;
min-width: 180px;
max-width: 180px;
min-height: auto;
padding: 14px 16px;
border-radius: 18px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__header {
gap: 10px;
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__icon {
width: 20px;
height: 20px;
font-size: 20px;
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__label {
font-size: 11px;
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card--success {
border-color: rgba(120, 220, 180, 0.28);
background: linear-gradient(155deg, rgba(120, 220, 180, 0.18), rgba(255, 255, 255, 0.02));
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card--danger {
border-color: rgba(255, 59, 59, 0.38);
background: linear-gradient(155deg, rgba(255, 59, 59, 0.2), rgba(255, 255, 255, 0.02));
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card--neutral {
border-color: var(--ui-border);
background: var(--ui-surface-2);
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card--warning {
border-color: rgba(255, 176, 131, 0.35);
background: linear-gradient(155deg, rgba(255, 176, 131, 0.2), rgba(255, 255, 255, 0.02));
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__value {
justify-content: center;
min-height: 38px;
margin-top: 10px;
padding: 6px 14px;
border-radius: 999px;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.01em;
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__trend {
margin-top: 6px;
font-size: 11px;
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__insight {
margin-top: 7px;
font-size: 10px;
line-height: 1.3;
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__value--success {
background: rgba(96, 187, 132, 0.14);
color: rgba(163, 241, 189, 0.95);
border: 1px solid rgba(96, 187, 132, 0.32);
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__value--danger {
background: rgba(255, 59, 59, 0.14);
color: rgba(255, 140, 140, 0.98);
border: 1px solid rgba(255, 59, 59, 0.38);
}
.operations-overview-page .operations-overview-header .exec-comparison .stat-card__value--warning {
background: rgba(255, 176, 131, 0.22);
color: rgba(255, 200, 160, 0.98);
border: 1px solid rgba(255, 176, 131, 0.4);
}
.operations-overview-page .operations-overview-header__controls .filter-row {
justify-content: flex-end;
}
.operations-overview-page .exec-panel {
display: block;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.operations-overview-page .exec-panel--summary {
background: transparent;
}
.operations-overview-page .exec-summary-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-2);
}
.operations-overview-page .exec-summary-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.operations-overview-page .exec-bifurcation-toggle {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
height: 34px;
padding: 0 var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
background: var(--ui-surface-1);
color: var(--ui-text-secondary);
font-family: var(--ui-font-primary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: background var(--ui-transition-base), border-color var(--ui-transition-base), color var(--ui-transition-base);
}
.operations-overview-page .exec-bifurcation-toggle mat-icon {
width: var(--ui-text-md);
height: var(--ui-text-md);
font-size: var(--ui-text-md);
}
.operations-overview-page .exec-bifurcation-toggle:hover,
.operations-overview-page .exec-bifurcation-toggle.active {
border-color: var(--ui-border-hover);
background: var(--ui-surface-active);
color: var(--ui-text-primary);
}
.operations-overview-page .exec-section-header {
align-items: flex-start;
gap: var(--ui-space-4);
}
.operations-overview-page .exec-section-kicker {
margin: 0 0 var(--ui-space-1);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.operations-overview-page .exec-section-heading {
margin: 0;
font-size: var(--ui-text-md);
font-weight: var(--ui-font-semibold);
line-height: 1.35;
color: var(--ui-text-primary);
}
.operations-overview-page .exec-section-meta {
margin: var(--ui-space-1) 0 0;
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
line-height: 1.4;
}
.operations-overview-page .exec-chart-toolbar-actions {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-shrink: 0;
}
.operations-overview-page .exec-comparison .analytics-comparison-row {
gap: var(--ui-space-2);
}
.operations-overview-page .exec-comparison .stat-card {
min-height: 88px;
cursor: default;
border-radius: var(--ui-radius-md);
border-color: var(--ui-border);
background: var(--ui-surface-2);
box-shadow: none;
transform: none;
padding: var(--ui-space-3) var(--ui-space-4);
}
.operations-overview-page .exec-comparison .stat-card--has-tag {
margin-top: 0;
}
.operations-overview-page .exec-comparison .stat-card:hover {
border-color: var(--ui-border-hover);
background: var(--ui-surface-hover);
}
.operations-overview-page .exec-comparison .stat-card__section-tag {
display: none;
}
.operations-overview-page .exec-comparison .stat-card__header {
gap: var(--ui-space-2);
}
.operations-overview-page .exec-comparison .stat-card__icon {
color: var(--ui-text-muted);
filter: none;
}
.operations-overview-page .exec-comparison .stat-card__label {
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
letter-spacing: 0;
text-transform: none;
}
.operations-overview-page .exec-comparison .stat-card__value {
justify-content: flex-start;
min-height: auto;
margin-top: var(--ui-space-2);
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ui-text-primary);
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-semibold);
letter-spacing: 0;
}
.operations-overview-page .exec-comparison .stat-card__trend {
margin-top: var(--ui-space-2);
padding: 0;
background: transparent;
font-size: var(--ui-text-sm);
}
.operations-overview-page .exec-comparison .stat-card__trend--up {
color: var(--ui-success);
}
.operations-overview-page .exec-comparison .stat-card__trend--down {
color: var(--ui-danger);
}
.operations-overview-page .exec-comparison .analytics-comparison-row__baseline {
color: var(--ui-text-subtle);
font-size: var(--ui-text-xs);
}
.operations-overview-page .exec-comparison--summary .analytics-comparison-row {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.operations-overview-page .exec-comparison--summary .stat-card {
min-height: 96px;
}
.operations-overview-page .exec-comparison--summary .stat-card__value {
font-size: var(--ui-text-xl);
}
.operations-overview-page .exec-bifurcation-panel {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
padding: var(--ui-space-4);
border-radius: var(--ui-radius-md);
box-shadow: none;
}
.operations-overview-page .exec-bifurcation-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-4);
}
.operations-overview-page .exec-bifurcation-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
background: var(--ui-surface-1);
color: var(--ui-text-muted);
cursor: pointer;
transition: background var(--ui-transition-base), color var(--ui-transition-base);
}
.operations-overview-page .exec-bifurcation-close:hover {
background: var(--ui-surface-hover);
color: var(--ui-text-primary);
}
.operations-overview-page .exec-bifurcation-close mat-icon {
width: var(--ui-text-md);
height: var(--ui-text-md);
font-size: var(--ui-text-md);
}
.operations-overview-page .exec-bifurcation-groups {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.operations-overview-page .exec-bifurcation-group {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.operations-overview-page .exec-bifurcation-group + .exec-bifurcation-group {
padding-top: var(--ui-space-4);
border-top: 1px solid var(--ui-border);
}
.operations-overview-page .exec-bifurcation-group__header {
display: flex;
align-items: center;
gap: var(--ui-space-3);
}
.operations-overview-page .exec-bifurcation-group__label {
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.operations-overview-page .exec-comparison--bifurcation .analytics-comparison-row {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.operations-overview-page .exec-comparison--margins .analytics-comparison-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.operations-overview-page .exec-comparison--bifurcation .stat-card {
min-height: 84px;
padding: var(--ui-space-3);
}
.operations-overview-page .exec-comparison--bifurcation .stat-card__header {
gap: var(--ui-space-2);
}
.operations-overview-page .exec-comparison--bifurcation .stat-card__label {
font-size: var(--ui-text-xs);
}
.operations-overview-page .exec-comparison--bifurcation .stat-card__icon {
width: var(--ui-text-md);
height: var(--ui-text-md);
font-size: var(--ui-text-md);
}
.operations-overview-page .exec-comparison--bifurcation .stat-card__value {
font-size: var(--ui-text-lg);
}
.operations-overview-page .exec-chart-section {
border-radius: var(--ui-radius-md);
box-shadow: none;
padding: var(--ui-space-4);
}
.operations-overview-page .exec-chart-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-4);
margin-bottom: var(--ui-space-2);
}
.operations-overview-page .exec-chart-tabs {
display: block;
margin-left: auto;
}
.operations-overview-page .exec-chart-tabs .pill-tabs-nav {
justify-content: flex-end;
}
.operations-overview-page .exec-donut-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-4);
}
.operations-overview-page .exec-donut-row .exec-chart-section {
min-width: 0;
}
@media (max-width: 1200px) {
.operations-overview-page .exec-comparison--summary .analytics-comparison-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.operations-overview-page .exec-comparison--bifurcation .analytics-comparison-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.operations-overview-page .exec-section-header,
.operations-overview-page .exec-chart-toolbar {
flex-direction: column;
align-items: stretch;
}
.operations-overview-page .exec-chart-tabs {
margin-left: 0;
}
.operations-overview-page .exec-chart-tabs .pill-tabs-nav {
justify-content: flex-start;
}
.operations-overview-page .exec-comparison--summary .analytics-comparison-row {
grid-template-columns: 1fr;
}
.operations-overview-page .exec-comparison--bifurcation .analytics-comparison-row {
grid-template-columns: 1fr;
}
.operations-overview-page .exec-donut-row {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
ANALYTICS WIDGETS — SHARED INTERNAL CONTRACT
==========================================================================
Shared inner chrome for analytics widgets. This file styles only the
widget-owned selectors and composes existing page, chart, card, and table
contracts from ui/layout, ui/controls, and ui/tables.
========================================================================== */
.analytics-widget {
display: block;
min-width: 0;
}
.analytics-widget--chart,
.analytics-widget--table {
height: 100%;
}
.analytics-widget__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
}
.analytics-widget__title {
margin: 0;
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
line-height: 1.2;
}
.analytics-widget__chart-frame {
min-height: 100%;
}
.analytics-widget__table-header {
margin-bottom: 0;
}
.analytics-widget__table-wrap {
padding-top: 0;
}
.analytics-widget__state {
min-height: 240px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ui-space-3);
padding: var(--ui-space-6) var(--ui-space-4);
text-align: center;
color: var(--ui-text-muted);
}
.analytics-widget__state--compact {
min-height: 160px;
}
.analytics-widget__state-icon {
font-size: 28px;
width: 28px;
height: 28px;
color: rgba(255, 176, 131, 0.8);
}
.analytics-widget__state-title {
margin: 0;
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.analytics-widget__state-copy {
margin: 0;
max-width: 420px;
font-size: var(--ui-text-sm);
line-height: 1.5;
color: var(--ui-text-muted);
}
.analytics-widget__table-state {
padding: var(--ui-space-6) var(--ui-space-8) var(--ui-space-8);
}
.analytics-widget__skeleton {
width: 100%;
}
.analytics-widget__skeleton--chart {
height: 240px;
border-radius: 18px;
}
.analytics-widget__skeleton--donut {
width: min(220px, 100%);
height: 220px;
border-radius: 50%;
}
.analytics-widget__skeleton--row {
height: 34px;
margin-bottom: var(--ui-space-2);
border-radius: 10px;
}
.analytics-widget__skeleton--row:last-child {
margin-bottom: 0;
}
.analytics-widget__leaderboard-table .text-right {
text-align: right;
}
.analytics-widget__rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(255, 176, 131, 0.18);
background: rgba(255, 176, 131, 0.08);
color: rgba(255, 214, 194, 0.92);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
.analytics-comparison-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ui-space-4);
}
.analytics-comparison-row .stat-card {
min-width: 0;
flex: 1 1 auto;
}
.analytics-comparison-row__baseline {
margin-left: var(--ui-space-1);
font-size: 10px;
color: rgba(255, 255, 255, 0.45);
}
.analytics-comparison-row .stat-card__trend mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.analytics-comparison-row .stat-card__trend--positive {
color: var(--ui-success);
}
.analytics-comparison-row .stat-card__trend--negative {
color: var(--ui-danger);
}
.analytics-comparison-row .stat-card__value--muted {
color: var(--ui-text-muted);
}
.analytics-comparison-row .stat-card__insight {
margin: var(--ui-space-2) 0 0;
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
line-height: 1.35;
}
@media (max-width: 768px) {
.analytics-widget__state {
min-height: 200px;
}
.analytics-widget__table-state {
padding: var(--ui-space-5);
}
}
/* ==========================================================================
REFERRAL DASHBOARD — Page Wiring Contract (Layer 3)
==========================================================================
Grid placement and column sizing ONLY. NO visuals.
SCOPE: .referral-dashboard-page
USES:
- ui/analytics/analytics-layout.scss (structural grid)
- ui/analytics/analytics-components.scss (visual components)
========================================================================== */
.referral-dashboard-page {
/* Page container - inherits from ui-page */
display: contents;
}
.referral-dashboard-page .dashboard-row {
/* Referral-specific: main chart gets more space */
grid-template-columns: 1fr 300px;
}
@media (max-width: 1100px) {
.referral-dashboard-page .dashboard-row {
grid-template-columns: 1fr;
}
}
.referral-dashboard-page .fd-section-content {
/* Referral-specific: right panel sizing */
grid-template-columns: 1fr 340px;
}
@media (max-width: 1100px) {
.referral-dashboard-page .fd-section-content {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
LOYALTY DASHBOARD — Page Wiring Contract (Layer 3)
==========================================================================
Grid placement and column sizing ONLY. NO visuals.
SCOPE: .loyalty-dashboard-page
USES:
- ui/analytics/analytics-layout.scss (structural grid)
- ui/analytics/analytics-components.scss (visual components)
========================================================================== */
.loyalty-dashboard-page {
/* Page container - inherits from dashboard-wrapper */
display: contents;
}
.loyalty-dashboard-page .charts-grid {
/* Loyalty-specific: main chart + tier breakdown */
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--ui-space-5);
}
@media (max-width: 1100px) {
.loyalty-dashboard-page .charts-grid {
grid-template-columns: 1fr;
}
}
/* Tier breakdown card sizing */
.loyalty-dashboard-page .tier-breakdown-card {
min-width: 300px;
}
/* Donut chart centering */
.loyalty-dashboard-page .donut-chart-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
/* ==========================================================================
WALLET ADMIN — Page Contract (Layer 3)
==========================================================================
Page-specific layout and overrides ONLY. NO reusable visuals.
SCOPE: .wallet-admin-page, .wallet-admin-shell
USES:
- ui/layout/page.scss (ui-page base)
- ui/headers/page-header.scss (erp-header-block)
- ui/controls/pill-tabs.scss (pill-tabs-container)
- ui/layout/card.scss (ui-card)
- ui/tables/glass-table.scss (glass-table, glass-data-table)
- ui/controls/buttons.scss (pill-btn, pill-btn-primary)
- ui/headers/stat-cards.scss (stat-card, stat-card__trend)
- ui/vendors/glass-chart.scss (glass-chart-wrapper, glass-chart-tooltip)
========================================================================== */
/* Shell — inherits fd-shell glow patterns */
.wallet-admin-shell {
display: contents; /* Inherits fd-shell glow patterns */
}
/* ── Section containers ── */
.wallet-admin-page .wallet-section {
margin-bottom: var(--ui-space-6);
}
.wallet-admin-page .wallet-section-title {
font-size: var(--ui-text-sm);
font-weight: 500;
color: var(--ui-text-muted, rgba(255, 255, 255, 0.45));
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--ui-space-3);
}
/* ── Wallet Health grid (4 columns, liability hero spans 2) ── */
.wallet-admin-page .wallet-health-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--ui-space-4);
}
.wallet-admin-page .wallet-liability-card {
grid-column: span 2;
}
/* Hero stat value (larger for Wallet Liability) */
.wallet-admin-page .stat-value--hero {
font-size: var(--ui-text-3xl, 1.875rem);
font-weight: 700;
color: var(--ui-text-primary);
}
/* ── Metric progress bar ── */
.wallet-admin-page .wallet-metric-bar {
height: 4px;
border-radius: var(--ui-radius-full);
background: var(--ui-border-subtle, rgba(255, 255, 255, 0.06));
margin-top: var(--ui-space-3);
overflow: hidden;
}
.wallet-admin-page .wallet-metric-fill {
height: 100%;
border-radius: var(--ui-radius-full);
transition: width 0.6s ease;
}
.wallet-admin-page .wallet-metric-fill--liability {
background: linear-gradient(90deg, var(--ui-success), var(--ui-warning));
}
/* ── Wallet Value grid (2 columns) ── */
.wallet-admin-page .wallet-value-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--ui-space-4);
}
/* ── Wallet Activity grid (4 columns) ── */
.wallet-admin-page .wallet-activity-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--ui-space-4);
}
/* ── Charts grid (asymmetric — main chart wider) ── */
.wallet-admin-page .wallet-charts-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--ui-space-5);
}
/* Chart section titles */
.wallet-admin-page .wallet-chart-title {
font-size: var(--ui-text-base);
font-weight: 600;
color: var(--ui-text-primary);
margin-bottom: var(--ui-space-1);
}
.wallet-admin-page .wallet-chart-subtitle {
font-size: var(--ui-text-xs);
color: var(--ui-text-secondary);
margin-bottom: var(--ui-space-4);
}
/* ── LRM summary card (inside glass-chart-wrapper) ── */
.wallet-admin-page .wallet-lrm-summary {
display: flex;
flex-direction: column;
justify-content: center;
}
.wallet-admin-page .wallet-lrm-value {
font-size: 48px;
font-weight: 700;
color: #a78bfa;
letter-spacing: -0.02em;
margin: var(--ui-space-4) 0 var(--ui-space-2);
}
.wallet-admin-page .wallet-lrm-explanation {
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
margin-bottom: var(--ui-space-3);
}
/* ── Trend warning color (increase in redeemed) ── */
.wallet-admin-page .stat-card__trend--warning {
color: var(--ui-warning);
}
.wallet-admin-page .stat-card {
padding: var(--ui-space-5);
}
.wallet-admin-page .stat-label {
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
margin-bottom: var(--ui-space-2);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wallet-admin-page .stat-value {
font-size: var(--ui-text-2xl);
font-weight: 600;
color: var(--ui-text-primary);
}
.wallet-admin-page .stat-value--earn {
color: var(--ui-success);
}
.wallet-admin-page .stat-value--redeem {
color: var(--ui-warning);
}
/* Type pills in ledger table */
.wallet-admin-page .type-pill {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: 500;
text-transform: capitalize;
background: var(--ui-surface-subtle);
color: var(--ui-text-secondary);
}
.wallet-admin-page .type-pill--earn {
background: hsla(142, 70%, 45%, 0.12);
color: var(--ui-success);
}
.wallet-admin-page .type-pill--redeem {
background: hsla(25, 95%, 53%, 0.12);
color: var(--ui-warning);
}
.wallet-admin-page .type-pill--adjust {
background: hsla(217, 91%, 60%, 0.12);
color: var(--ui-info, hsl(217, 91%, 60%));
}
.wallet-admin-page .type-pill--expire {
background: hsla(0, 0%, 60%, 0.12);
color: var(--ui-text-muted, hsl(0, 0%, 60%));
}
.wallet-admin-page .type-pill--reversal {
background: hsla(0, 72%, 51%, 0.12);
color: var(--ui-danger, hsl(0, 72%, 51%));
}
/* Stat value colors */
.wallet-admin-page .stat-value--expire {
color: var(--ui-text-muted, hsl(0, 0%, 60%));
}
.wallet-admin-page .stat-value--reversal {
color: var(--ui-danger, hsl(0, 72%, 51%));
}
/* ── Sortable column headers ── */
.wallet-admin-page .sortable-th {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
transition: color 0.15s ease;
}
.wallet-admin-page .sortable-th:hover {
color: rgba(255, 255, 255, 0.9);
}
.wallet-admin-page .sortable-th .sort-icon {
font-size: 14px;
width: 14px;
height: 14px;
vertical-align: middle;
margin-left: 4px;
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease;
color: rgba(255, 255, 255, 0.35);
}
.wallet-admin-page .sortable-th:hover .sort-icon {
opacity: 0.6;
}
.wallet-admin-page .sortable-th.sorted .sort-icon {
opacity: 1;
color: var(--ui-brand, #ff8a50);
}
.wallet-admin-page .sortable-th.sorted {
color: rgba(255, 200, 160, 0.95);
}
/* ── Date input inside pill-trigger (glass style) ── */
.pill-date-input {
background: transparent;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
font-family: inherit;
width: 130px;
cursor: pointer;
}
.pill-date-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
/* Override date input calendar icon color */
.pill-date-input::-webkit-calendar-picker-indicator {
filter: invert(0.7);
cursor: pointer;
}
.pill-btn--sm {
font-size: var(--ui-text-xs);
padding: var(--ui-space-1) var(--ui-space-3);
min-height: 34px;
display: inline-flex;
align-items: center;
}
/* Negative balance badge */
.wallet-negative-badge {
display: inline-flex;
align-items: center;
margin-left: var(--ui-space-2);
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: var(--ui-radius-full);
background: hsla(25, 95%, 53%, 0.12);
color: var(--ui-warning);
cursor: help;
}
/* ── Customer search (mat-autocomplete — uses glass-dropdown-panel) ── */
.wallet-admin-page .wallet-customer-field .mat-icon[matprefix] {
color: var(--ui-text-secondary);
margin-right: var(--ui-space-1);
}
/* ── Confirmation panel ── */
.wallet-confirm-backdrop {
position: fixed;
inset: 0;
z-index: 1050;
background: rgba(8, 8, 8, 0.65);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
display: flex;
align-items: center;
justify-content: center;
animation: ui-modal-backdrop-in 0.2s ease-out;
}
.wallet-confirm-panel {
max-width: 440px;
width: 90%;
padding: var(--ui-space-6);
text-align: center;
animation: ui-modal-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wallet-confirm-details {
background: var(--ui-surface-subtle, rgba(255, 255, 255, 0.03));
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-3);
margin: var(--ui-space-4) 0;
text-align: left;
}
.wallet-confirm-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ui-space-2) 0;
}
.wallet-confirm-row:not(:last-child) {
border-bottom: 1px solid var(--ui-border);
}
.wallet-confirm-label {
font-size: var(--ui-text-xs);
color: var(--ui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wallet-confirm-value {
font-size: var(--ui-text-sm);
font-weight: 500;
color: var(--ui-text-primary);
}
.wallet-confirm-value--credit {
color: var(--ui-success);
}
.wallet-confirm-value--debit {
color: var(--ui-warning);
}
/* Empty state */
.wallet-admin-page .wallet-empty {
text-align: center;
padding: var(--ui-space-10) var(--ui-space-5);
color: var(--ui-text-secondary);
}
.wallet-admin-page .wallet-empty mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
margin-bottom: var(--ui-space-3);
opacity: 0.4;
}
/* Load more */
.wallet-admin-page .wallet-load-more {
display: flex;
justify-content: center;
padding: var(--ui-space-5);
}
/* Adjustment form */
.wallet-admin-page .wallet-adjust-form {
max-width: 720px;
}
.wallet-admin-page .section-title {
font-size: var(--ui-text-lg);
font-weight: 600;
color: var(--ui-text-primary);
margin-bottom: var(--ui-space-1);
}
.wallet-admin-page .section-subtitle {
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
margin-bottom: var(--ui-space-5);
}
.wallet-admin-page .adjust-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ui-space-4);
}
.wallet-admin-page .form-field--full {
grid-column: 1/-1;
}
.wallet-admin-page .form-label {
display: block;
font-size: var(--ui-text-sm);
font-weight: 500;
color: var(--ui-text-secondary);
margin-bottom: var(--ui-space-1);
}
.wallet-admin-page .form-input,
.wallet-admin-page .form-textarea {
width: 100%;
padding: var(--ui-space-2) var(--ui-space-3);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
background: var(--ui-surface);
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
font-family: inherit;
transition: border-color 0.15s ease;
}
.wallet-admin-page .form-input:focus,
.wallet-admin-page .form-textarea:focus {
outline: none;
border-color: var(--ui-primary);
}
.wallet-admin-page .form-textarea {
resize: vertical;
}
.wallet-admin-page .adjust-form-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--ui-space-5);
}
/* Skeleton */
.wallet-admin-page .wallet-skeleton {
padding: var(--ui-space-4);
}
/* Clickable rows */
.wallet-admin-page .row-clickable {
cursor: pointer;
transition: background-color 0.15s ease;
}
.wallet-admin-page .row-clickable:hover {
background: var(--ui-surface-subtle, hsla(0, 0%, 100%, 0.03));
}
/* ── Wallet Customer Detail Dialog (extends glass-modal contracts) ── */
.wallet-dialog-subtitle {
font-size: var(--ui-text-xs);
color: var(--ui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: var(--ui-space-1);
}
.wallet-dialog-balance-badge {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-surface-subtle, rgba(255, 255, 255, 0.03));
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
}
.wallet-dialog-balance-label {
font-size: var(--ui-text-xs);
color: var(--ui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wallet-dialog-balance-value {
font-size: var(--ui-text-xl);
font-weight: 600;
color: var(--ui-text-primary);
}
.wallet-dialog-loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-3);
padding: var(--ui-space-10);
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
}
.wallet-dialog-txn {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) 0;
border-bottom: 1px solid var(--ui-border);
}
.wallet-dialog-txn:last-child {
border-bottom: none;
}
.wallet-dialog-txn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--ui-radius-full);
background: var(--ui-surface-subtle, rgba(255, 255, 255, 0.04));
flex-shrink: 0;
}
.wallet-dialog-txn-icon mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: var(--ui-text-secondary);
}
.wallet-dialog-txn--earn .wallet-dialog-txn-icon {
background: hsla(142, 70%, 45%, 0.12);
}
.wallet-dialog-txn--earn .wallet-dialog-txn-icon mat-icon {
color: var(--ui-success);
}
.wallet-dialog-txn--redeem .wallet-dialog-txn-icon {
background: hsla(25, 95%, 53%, 0.12);
}
.wallet-dialog-txn--redeem .wallet-dialog-txn-icon mat-icon {
color: var(--ui-warning);
}
.wallet-dialog-txn--adjust .wallet-dialog-txn-icon {
background: hsla(217, 91%, 60%, 0.12);
}
.wallet-dialog-txn--adjust .wallet-dialog-txn-icon mat-icon {
color: var(--ui-info, hsl(217, 91%, 60%));
}
.wallet-dialog-txn-details {
flex: 1;
min-width: 0;
}
.wallet-dialog-txn-reason {
font-size: var(--ui-text-sm);
font-weight: 500;
color: var(--ui-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wallet-dialog-txn-meta {
font-size: var(--ui-text-xs);
color: var(--ui-text-secondary);
margin-top: var(--ui-space-1);
}
.wallet-dialog-txn-amount {
font-size: var(--ui-text-base);
font-weight: 600;
color: var(--ui-text-primary);
flex-shrink: 0;
padding-left: var(--ui-space-3);
}
.wallet-dialog-txn-amount--positive {
color: var(--ui-success);
}
.wallet-dialog-txn-amount--negative {
color: var(--ui-warning);
}
/* ── Responsive: tablet ── */
@media (max-width: 1024px) {
.wallet-admin-page .wallet-health-grid {
grid-template-columns: repeat(2, 1fr);
}
.wallet-admin-page .wallet-liability-card {
grid-column: span 2;
}
.wallet-admin-page .wallet-activity-grid {
grid-template-columns: repeat(2, 1fr);
}
.wallet-admin-page .wallet-charts-grid {
grid-template-columns: 1fr;
}
}
/* ── Responsive: mobile ── */
@media (max-width: 768px) {
.wallet-admin-outlet {
padding: var(--ui-space-3) var(--ui-space-4);
}
.wallet-admin-page .wallet-health-grid {
grid-template-columns: 1fr 1fr;
}
.wallet-admin-page .wallet-liability-card {
grid-column: span 2;
}
.wallet-admin-page .wallet-value-grid {
grid-template-columns: 1fr;
}
.wallet-admin-page .wallet-activity-grid {
grid-template-columns: 1fr 1fr;
}
.wallet-admin-page .wallet-charts-grid {
grid-template-columns: 1fr;
}
.wallet-admin-page .adjust-form-grid {
grid-template-columns: 1fr;
}
.wallet-admin-page .wallet-lrm-value {
font-size: 36px;
}
}
/* ==========================================================================
TRAINING CONSUMPTION PAGE - LAYOUT ONLY
==========================================================================
Structure-only rules for:
/me/training/:trainingId
Design: Video-first, scannable, modern learning experience
========================================================================== */
.training-consumption-page__content {
display: flex;
flex-direction: column;
gap: var(--ui-space-6);
}
/* ==========================================================================
SECTION 1: VIDEO HERO
========================================================================== */
.training-video-hero {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.training-back-link {
align-self: flex-start;
}
.training-video-container {
padding: 0;
overflow: hidden;
}
.training-video-container .ui_media__content {
border-radius: var(--ui-radius-xl);
}
.training-title {
margin: 0;
}
/* ==========================================================================
SECTION 2: META STATS BAR
========================================================================== */
.training-meta-bar {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-3);
}
.training-stat-pill {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--ui-space-1);
min-width: 100px;
flex: 0 1 auto;
}
.training-stat-pill__label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ui-text-muted);
}
.training-stat-pill__value {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
/* ==========================================================================
SECTION 3: CONTENT GRID (Progress + Description)
========================================================================== */
.training-content-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--ui-space-5);
}
@media (min-width: 900px) {
.training-content-grid {
grid-template-columns: 1fr 1fr;
}
}
/* --------------------------------
Progress Card
-------------------------------- */
.training-progress-card {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.training-completion-hint {
display: flex;
align-items: flex-start;
gap: var(--ui-space-2);
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
}
.training-completion-hint .ui_icon {
flex-shrink: 0;
color: var(--ui-info);
}
.training-completion-dates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ui-space-3);
margin: 0;
padding: var(--ui-space-3) 0 0 0;
border-top: 1px solid var(--ui-border-light);
}
.training-completion-dates__item {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
}
.training-completion-dates__label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ui-text-muted);
}
.training-completion-dates__value {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-text-secondary);
margin: 0;
}
/* --------------------------------
Description Card
-------------------------------- */
.training-description-card {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.training-description-content {
max-height: 120px;
overflow: hidden;
position: relative;
transition: max-height var(--ui-transition-slow);
}
.training-description-content--expanded {
max-height: none;
}
.training-description-content .ui-card__description {
line-height: 1.65;
}
.training-read-more {
align-self: flex-start;
margin-top: var(--ui-space-1);
}
/* ==========================================================================
RESPONSIVE ADJUSTMENTS
========================================================================== */
@media (max-width: 640px) {
.training-consumption-page__content {
gap: var(--ui-space-4);
}
.training-meta-bar {
gap: var(--ui-space-2);
}
.training-stat-pill {
min-width: calc(50% - var(--ui-space-2));
flex: 1 1 auto;
}
.training-completion-dates {
grid-template-columns: 1fr;
gap: var(--ui-space-2);
}
}
/* Not-found (404) page */
/* ==========================================================================
UI PAGE — NOT FOUND (404)
==========================================================================
Scoped to .ui-page--not-found.
Faithfully reproduces the original 404 page design from the backup,
moved into a proper page contract per the UI Rulebook.
========================================================================== */
/* ── Shell ─────────────────────────────────────────────────────────────── */
.ui-page--not-found {
padding: 0;
overflow: hidden;
}
.nf-shell {
position: relative;
min-height: 100vh;
height: 100vh;
padding: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2.5rem);
background: #040303;
color: var(--ui-text-primary);
font-family: var(--ui-font-primary);
overflow: hidden;
perspective: 1200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/* ── Hero Stack ────────────────────────────────────────────────────────── */
.nf-hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(3rem, 4vw, 3.5rem);
margin-inline: auto;
margin-top: 0;
z-index: var(--z-base);
width: 100%;
max-width: 1100px;
}
/* ── Brand Mark ────────────────────────────────────────────────────────── */
.nf-brand {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-4);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
margin-top: clamp(1rem, 3vw, 2rem);
}
.nf-brand__logo {
width: clamp(48px, 6vw, 72px);
filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55));
}
.nf-brand__name {
font-size: 0.9rem;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.6em;
}
/* ── Decorative Background ─────────────────────────────────────────────── */
.nf-decorative {
position: absolute;
inset: -8%;
pointer-events: none;
will-change: transform;
background-color: #000000;
background-image: url("/assets/images/404.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.nf-decorative::before,
.nf-decorative::after {
display: none;
}
/* ── Particles ─────────────────────────────────────────────────────────── */
.nf-particles {
position: absolute;
inset: 0;
overflow: hidden;
will-change: transform;
pointer-events: none;
}
.nf-particle-dot {
position: absolute;
border-radius: var(--ui-radius-full);
box-shadow: 0 0 12px rgba(255, 200, 150, 0.55);
animation: nf-particleFloat 18s ease-in-out infinite;
opacity: 0.9;
mix-blend-mode: screen;
}
/* ── Card Parallax Wrapper ─────────────────────────────────────────────── */
.nf-card-parallax {
width: 100%;
transition: transform 600ms ease-out;
will-change: transform;
}
/* ── Rings ─────────────────────────────────────────────────────────────── */
.nf-rings {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-base);
pointer-events: none;
}
.nf-ring-wrapper {
position: relative;
--nf-core-size: clamp(320px, 45vw, 520px);
width: var(--nf-core-size);
height: var(--nf-core-size);
pointer-events: none;
--nf-ring-gap: clamp(32px, 4vw, 60px);
margin-top: 50px;
}
.nf-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(var(--nf-core-size, 360px) - var(--ring-index, 0) * var(--nf-ring-gap));
aspect-ratio: 1/1;
border-radius: var(--ui-radius-full);
border: 1px solid rgba(255, 199, 149, 0.35);
box-shadow: 0 0 18px rgba(242, 70, 39, 0.25);
animation: nf-ringPulse 6.5s ease-in-out infinite;
opacity: calc(0.65 - var(--ring-index, 0) * 0.12);
background: radial-gradient(circle, rgba(242, 70, 39, 0.16), transparent 70%);
}
.nf-halo {
position: absolute;
inset: 28%;
border-radius: var(--ui-radius-full);
background: radial-gradient(circle, rgba(242, 70, 39, 0.4), transparent 70%);
filter: blur(35px);
animation: nf-haloPulse 6.5s ease-in-out infinite;
}
/* ── Glass Card ────────────────────────────────────────────────────────── */
.nf-card {
position: relative;
overflow: hidden;
z-index: 2;
width: clamp(520px, 60vw, 900px);
margin-inline: auto;
padding: clamp(3rem, 6vw, 4.5rem) clamp(2.75rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
border-radius: var(--ui-radius-3xl);
border: 1px solid var(--ui-border);
background: rgba(20, 10, 10, 0.65);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 80px rgba(242, 70, 39, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
animation: nf-cardFloat 6.5s ease-in-out infinite, nf-cardReveal 900ms ease both;
transition: border var(--ui-transition-slow), box-shadow var(--ui-transition-slow);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: -50px;
}
.nf-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(242, 70, 39, 0.12), transparent 60%);
pointer-events: none;
z-index: -1;
}
.nf-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
pointer-events: none;
}
.nf-card-parallax:hover .nf-card {
border-color: rgba(242, 70, 39, 0.3);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 100px rgba(242, 70, 39, 0.25), inset 0 0 0 1px rgba(242, 70, 39, 0.2);
transform: translateY(-3px);
}
/* ── Code Display ──────────────────────────────────────────────────────── */
.nf-code-stack {
position: relative;
z-index: var(--z-base);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-4);
}
.nf-code-label {
letter-spacing: 0.7em;
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
font-size: var(--ui-text-xs);
}
.nf-code-digits {
font-size: clamp(5rem, 12vw, 9.375rem);
margin: 0;
line-height: 1;
letter-spacing: 0.05em;
background: linear-gradient(120deg, #ffaa50, #f24627 65%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(242, 70, 39, 0.55));
animation: nf-digitsGlow 6.5s ease-in-out infinite;
font-weight: var(--ui-font-semibold);
}
/* ── Subtitle ──────────────────────────────────────────────────────────── */
.nf-subtitle {
position: relative;
z-index: var(--z-base);
margin: var(--ui-space-6) auto var(--ui-space-8);
max-width: 560px;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.72);
font-size: clamp(1rem, 1.5vw, 1.1rem);
line-height: 1.6;
}
/* ── CTA Button ────────────────────────────────────────────────────────── */
.nf-cta {
position: relative;
z-index: var(--z-base);
border: none;
cursor: pointer;
font: inherit;
letter-spacing: 0.4em;
font-size: 0.88rem;
text-transform: uppercase;
color: #fff;
min-width: clamp(160px, 25%, 220px);
padding: 0.35rem 2rem;
background: linear-gradient(135deg, #b32d14, #d96226);
border-radius: var(--ui-radius-full);
overflow: hidden;
isolation: isolate;
box-shadow: 0 18px 40px rgba(242, 70, 39, 0.35);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.nf-cta::before {
content: "";
position: absolute;
inset: 2px;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.22);
opacity: 0.35;
}
.nf-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0) 70%);
opacity: 0.5;
animation: nf-shimmer 7s linear infinite;
}
.nf-cta:hover,
.nf-cta:focus-visible {
box-shadow: 0 28px 52px rgba(242, 70, 39, 0.5);
transform: translateY(-3px) scale(1.02);
}
.nf-cta:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.4);
outline-offset: 4px;
}
/* ── CTA Ripple ────────────────────────────────────────────────────────── */
.nf-cta-ripple {
position: absolute;
top: var(--ripple-y, 50%);
left: var(--ripple-x, 50%);
width: 10px;
height: 10px;
border-radius: var(--ui-radius-full);
transform: translate(-50%, -50%) scale(0);
background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
pointer-events: none;
opacity: 0.9;
}
.nf-cta.is-rippling .nf-cta-ripple {
animation: nf-ripple 900ms ease-out forwards;
}
/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes nf-particleFloat {
0% {
transform: translate3d(0, 0, 0);
opacity: 0;
}
20% {
opacity: 0.6;
}
50% {
transform: translate3d(8px, -12px, 0);
opacity: 0.85;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 0.45;
}
}
@keyframes nf-cardFloat {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -12px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes nf-cardReveal {
0% {
opacity: 0;
transform: translate3d(0, 40px, 0) scale(0.96);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes nf-ringPulse {
0%, 100% {
opacity: inherit;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: calc(0.4 + var(--ring-index, 0) * 0.05);
transform: translate(-50%, -50%) scale(1.03);
}
}
@keyframes nf-haloPulse {
0%, 100% {
opacity: 0.35;
}
50% {
opacity: 0.65;
}
}
@keyframes nf-digitsGlow {
0%, 100% {
text-shadow: 0 0 25px rgba(242, 70, 39, 0.45);
}
50% {
text-shadow: 0 0 35px rgba(242, 70, 39, 0.7);
}
}
@keyframes nf-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes nf-ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.9;
}
100% {
transform: translate(-50%, -50%) scale(12);
opacity: 0;
}
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
.nf-card {
width: min(90vw, 640px);
}
.nf-ring-wrapper {
--nf-core-size: clamp(260px, 70vw, 420px);
--nf-ring-gap: clamp(20px, 6vw, 40px);
}
}
@media (max-width: 640px) {
.nf-hero {
gap: 2.5rem;
}
.nf-brand__name {
letter-spacing: 0.4em;
}
.nf-particle-dot:nth-of-type(odd) {
display: none;
}
.nf-card {
padding: 2.25rem 1.75rem 2.5rem;
width: 100%;
}
.nf-cta {
letter-spacing: 0.2em;
min-width: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.nf-card,
.nf-cta,
.nf-ring,
.nf-halo,
.nf-particle-dot {
animation: none;
transition: none;
}
.nf-particles,
.nf-decorative,
.nf-card-parallax {
transform: none !important;
}
}
/* ==========================================================================
UI PAGES - ACCESS DENIED
==========================================================================
Full-page access denied state. Shown when a user lacks permissions.
Design language mirrors session-expired-dialog but with warning (amber) tone.
LAYER ORDER (topbar & sidebar stay above this overlay):
- Sidebar: z-index 10000
- Header: z-index 1000
- Overlay: z-index 999
========================================================================== */
.access-denied-page {
position: fixed;
top: 56px; /* sit below header bar so header stays accessible */
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 32px;
/* glass-dialog-backdrop (modal.scss) — same overlay as session-expired */
background: rgba(8, 8, 8, 0.65);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
animation: access-denied-fadein 0.4s ease-out;
}
@keyframes access-denied-fadein {
0% {
opacity: 0;
transform: translateY(16px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ---- Icon ---- */
.access-denied-page .ad-icon {
position: relative;
width: 88px;
height: 88px;
margin: 0 auto 28px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(255, 140, 50, 0.08));
border: 1px solid rgba(245, 158, 11, 0.25);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 40px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.access-denied-page .ad-icon mat-icon {
font-size: 44px;
width: 44px;
height: 44px;
color: #fbbf24;
animation: ad-icon-glow 2s ease-in-out infinite alternate;
}
.access-denied-page .ad-icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: transparent;
border: 2px solid rgba(245, 158, 11, 0.35);
animation: ad-pulse 2.5s ease-out infinite;
}
@keyframes ad-pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
@keyframes ad-icon-glow {
0% {
filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
}
100% {
filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.6));
}
}
/* ---- Text ---- */
.access-denied-page .ad-title {
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px 0;
letter-spacing: -0.02em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.access-denied-page .ad-message {
font-size: 15px;
line-height: 1.6;
color: rgba(220, 210, 205, 0.7);
margin: 0 0 8px 0;
max-width: 380px;
}
/* ---- Permission Info ---- */
.access-denied-page .ad-permission-info {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.15);
border-radius: 999px;
margin: 12px 0 28px;
}
.access-denied-page .ad-permission-info mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
color: rgba(251, 191, 36, 0.6);
}
.access-denied-page .ad-permission-info span {
font-size: 12px;
font-weight: 500;
color: rgba(251, 191, 36, 0.7);
letter-spacing: 0.02em;
}
/* ---- Action Button ---- */
.access-denied-page .ad-action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 12px 28px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
letter-spacing: 0.01em;
}
.access-denied-page .ad-action-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
.access-denied-page .ad-action-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.access-denied-page .ad-action-btn:active {
transform: translateY(0);
}
/* Auth domain (isolated — NOT part of main app UI system) */
/* ==========================================================================
UI PAGE - AUTH (Login/Register)
==========================================================================
Full-screen auth page contract. Used for login and registration flows.
This is a self-contained page that replaces the console shell.
========================================================================== */
/* Auth page tokens */
:root {
--auth-bg-left: #090909;
--auth-bg-right: #a0381f;
--auth-bg-mid: #2b130c;
--auth-card-glass: rgba(18, 14, 14, 0.45);
--auth-card-border: rgba(255, 255, 255, 0.06);
--auth-card-glow: rgba(231, 70, 48, 0.3);
--auth-text-primary: #f5e2ce;
--auth-text-secondary: #c9b8a8;
--auth-text-muted: #bfb6af;
--auth-link-color: #f08a5b;
--auth-pill-bg: rgba(32, 16, 12, 0.92);
--auth-pill-border: rgba(255, 146, 90, 0.35);
--auth-input-bg: transparent;
--auth-input-border: rgba(255, 140, 100, 0.25);
--auth-input-border-hover: rgba(255, 160, 110, 0.35);
--auth-input-border-focus: rgba(255, 180, 130, 0.45);
--auth-button-left: #e74630;
--auth-button-right: #ff7a4f;
}
/* ==========================================================================
MAIN SHELL
========================================================================== */
.ui-page--auth {
min-height: 100vh;
padding: 0;
overflow: hidden;
color: var(--auth-text-primary);
font-family: "Manrope", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}
.ui-page--auth > .login-shell,
.ui-page--auth > .register-shell {
max-width: none;
margin: 0;
}
.login-shell,
.register-shell {
position: fixed;
inset: 0;
height: 100vh;
width: 100vw;
padding: 32px 42px 48px;
background: linear-gradient(115deg, var(--auth-bg-left) 0%, #110707 35%, var(--auth-bg-mid) 58%, var(--auth-bg-right) 100%);
color: var(--auth-text-primary);
font-family: "Manrope", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}
.login-shell {
overflow: hidden;
}
.register-shell {
overflow-x: hidden;
overflow-y: auto;
}
/* ==========================================================================
AMBIENT GLOW EFFECTS
========================================================================== */
.ambient-glow {
position: absolute;
border-radius: 999px;
filter: blur(110px);
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.glow-one {
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(255, 134, 76, 0.55), rgba(58, 17, 11, 0));
top: -30px;
right: 16%;
}
.glow-two {
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(217, 110, 57, 0.35), rgba(36, 13, 9, 0));
bottom: -120px;
left: -40px;
}
/* ==========================================================================
LAYOUT GRID
========================================================================== */
.login-shell .layout,
.register-shell .layout {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: 52px;
align-items: flex-start;
}
.register-shell .layout {
min-height: calc(100vh - 80px);
grid-template-columns: minmax(0, 1.05fr) minmax(520px, 640px);
gap: 44px;
align-items: center;
}
/* ==========================================================================
HERO PANEL (Left Side)
========================================================================== */
.hero-panel {
padding: 12px 8px 8px;
color: var(--auth-text-primary);
}
.hero-download {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-top: -24px;
}
.brand-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.brand-mark {
height: 38px;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}
.subhead {
margin: 12px 0 8px;
font-size: 16px;
color: var(--auth-text-secondary);
opacity: 0.9;
}
.hero-illustration {
margin: 0 0 0 0;
overflow: visible;
}
.illustration-img {
max-width: 900px;
width: 100%;
height: auto;
filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.65)) hue-rotate(-10deg) saturate(1.3);
}
.store-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 12px 0;
border-radius: 999px;
background: transparent;
width: 100%;
}
.store-copy {
font-weight: 500;
color: var(--auth-text-secondary);
font-size: 13px;
}
.store-badge {
height: 16px;
border-radius: 6px;
margin-top: 2px;
}
.copyright {
margin: 0;
font-size: 12px;
color: #8e7f75;
padding-left: 0;
text-align: left;
}
.copyright--legal {
margin-top: 4px;
font-size: 10.5px;
letter-spacing: 0.02em;
}
.copyright-link {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.copyright-link:hover {
color: rgba(240, 200, 170, 0.85);
text-decoration: underline;
}
/* ==========================================================================
CARD COLUMN (Right Side)
========================================================================== */
.card-column {
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
height: auto;
padding-top: 0;
margin-top: 0;
gap: 12px;
}
/* ==========================================================================
FLIP CARD CONTAINER
========================================================================== */
.flip-container {
perspective: 1000px;
width: 100%;
max-width: 520px;
position: relative;
}
.flipper {
transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
position: relative;
width: 100%;
}
.flip-container.flipped .flipper {
transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.front {
z-index: 2;
transform: rotateY(0deg);
position: relative;
}
.back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}
/* ==========================================================================
LOGIN CARD
========================================================================== */
.login-card {
width: 100%;
max-width: 380px;
min-height: auto;
padding: 32px 32px 24px;
border-radius: 32px;
background: var(--auth-card-glass);
border: 1px solid var(--auth-card-border);
box-shadow: 0 45px 110px rgba(0, 0, 0, 0.65), 0 0 60px var(--auth-card-glow);
backdrop-filter: blur(28px);
display: flex;
flex-direction: column;
transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}
/* Hover effect removed */
/* .login-card:hover {
transform: translateY(-8px) scale(1.005);
border-color: rgba(255, 255, 255, 0.12);
background: rgba(28, 20, 18, 0.55);
box-shadow: 0 65px 150px rgba(0, 0, 0, 0.75), 0 0 100px rgba(231, 70, 48, 0.5);
} */
.logo-badge {
width: 100px;
height: 100px;
margin: 0 auto 4px;
border-radius: 22px;
background: transparent;
display: grid;
place-items: center;
}
.logo-icon {
width: 80px;
height: 80px;
filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55));
}
.card-title {
text-align: center;
color: var(--auth-text-primary);
font-size: 15px;
letter-spacing: 5px;
margin: 0 0 16px;
}
.login-form {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.forgot-row {
display: flex;
justify-content: flex-end;
margin-top: -8px;
}
.forgot-link {
font-size: 11px;
font-weight: 500;
color: var(--auth-text-muted);
opacity: 0.6;
text-decoration: none;
letter-spacing: 0.2px;
transition: opacity 200ms ease;
}
.forgot-link:hover {
opacity: 1;
}
/* ==========================================================================
REGISTER CARD
========================================================================== */
.register-card {
width: 100%;
height: auto;
border-radius: 32px;
background: var(--auth-card-glass);
border: 1px solid var(--auth-card-border);
box-shadow: 0 45px 110px rgba(0, 0, 0, 0.65), 0 0 60px var(--auth-card-glow);
backdrop-filter: blur(28px);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}
.register-shell .register-card {
max-width: 640px;
max-height: calc(100vh - 64px);
}
/* Hover effect removed */
/* .register-card:hover {
transform: translateY(-8px) scale(1.005);
border-color: rgba(255, 255, 255, 0.12);
background: rgba(28, 20, 18, 0.55);
box-shadow: 0 65px 150px rgba(0, 0, 0, 0.75), 0 0 100px rgba(231, 70, 48, 0.5);
} */
.register-header {
flex-shrink: 0;
padding: 24px 28px 8px;
text-align: center;
}
.register-body {
flex: 0 0 auto;
padding: 4px 28px 12px;
}
.register-shell .register-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 140, 80, 0.45) transparent;
}
.register-body::-webkit-scrollbar {
width: 6px;
}
.register-body::-webkit-scrollbar-thumb {
background: rgba(255, 140, 80, 0.35);
border-radius: 999px;
}
.register-footer {
flex-shrink: 0;
padding: 8px 28px 22px;
}
.register-form {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.field-row {
display: flex;
gap: 12px;
}
.half-field {
flex: 1;
min-width: 0;
}
.country-code-field {
flex: 0 0 90px;
max-width: 90px;
}
.phone-field {
flex: 1;
}
.field-error {
color: #ff6b6b;
font-size: 11px;
margin-top: 4px;
margin-bottom: 0;
padding-left: 12px;
}
/* ==========================================================================
FROSTED FIELD STYLING - LOGIN CARD (Underline Style)
========================================================================== */
/* Text Field Wrapper for Login Card - Underline Style */
.login-card .mat-mdc-form-field {
width: 100% !important;
}
/* NUCLEAR: Remove ALL backgrounds from any form field child */
.login-card .mat-mdc-form-field *:not(input):not(mat-icon):not(.mat-icon):not(.fa):not(.fas):not(.far) {
background: transparent !important;
background-color: transparent !important;
}
.login-card .frosted-field .mat-mdc-text-field-wrapper,
.login-card .mat-mdc-form-field .mat-mdc-text-field-wrapper {
background: var(--auth-input-bg) !important;
background-color: var(--auth-input-bg) !important;
border: none !important;
border-radius: 0 !important;
padding: 0 0 4px 0;
margin: 0;
min-height: 48px;
height: 48px;
width: 100%;
box-shadow: inset 0 -1px 0 0 var(--auth-input-border) !important;
outline: none;
}
.login-card .frosted-field .mat-mdc-text-field-wrapper:hover,
.login-card .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover {
box-shadow: inset 0 -1px 0 0 var(--auth-input-border-hover) !important;
background: var(--auth-input-bg) !important;
background-color: var(--auth-input-bg) !important;
}
.login-card .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper {
box-shadow: inset 0 -1px 0 0 var(--auth-input-border-focus) !important;
background: var(--auth-input-bg) !important;
background-color: var(--auth-input-bg) !important;
}
/* Remove ALL Material filled backgrounds and states - COMPREHENSIVE */
.login-card .mdc-text-field,
.login-card .mdc-text-field--filled,
.login-card .mdc-text-field--filled:not(.mdc-text-field--disabled),
.login-card .mdc-text-field--outlined,
.login-card .mdc-text-field__input,
.login-card .mat-mdc-text-field-wrapper .mdc-text-field,
.login-card .mat-mdc-text-field-wrapper .mdc-text-field--filled,
.login-card .mdc-text-field--no-label,
.login-card .mdc-text-field--filled.mdc-text-field--no-label,
.login-card .mat-mdc-form-field-flex,
.login-card .mdc-notched-outline,
.login-card .mdc-notched-outline__leading,
.login-card .mdc-notched-outline__notch,
.login-card .mdc-notched-outline__trailing {
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
}
/* Remove focus overlay completely */
.login-card .mat-mdc-form-field-focus-overlay {
display: none !important;
opacity: 0 !important;
background: transparent !important;
background-color: transparent !important;
}
/* Remove all pseudo-element backgrounds */
.login-card .mat-mdc-text-field-wrapper::before,
.login-card .mat-mdc-text-field-wrapper::after,
.login-card .mdc-text-field::before,
.login-card .mdc-text-field::after,
.login-card .mdc-text-field--filled::before,
.login-card .mdc-text-field--filled::after,
.login-card .mat-mdc-form-field-flex::before,
.login-card .mat-mdc-form-field-flex::after {
display: none !important;
background: transparent !important;
background-color: transparent !important;
}
/* Remove subscript wrapper (hint/error area) if empty */
.login-card .mat-mdc-form-field-subscript-wrapper {
display: none !important;
}
/* Remove state layer (Material 3 hover/focus indicator) */
.login-card .mdc-text-field__ripple,
.login-card .mat-mdc-form-field .mdc-text-field__ripple,
.login-card .mdc-text-field--filled .mdc-text-field__ripple {
display: none !important;
opacity: 0 !important;
background: transparent !important;
}
/* Remove underline ripple */
.login-card .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before,
.login-card .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after,
.login-card .mdc-line-ripple,
.login-card .mdc-line-ripple::before,
.login-card .mdc-line-ripple::after {
display: none !important;
background-color: transparent !important;
}
/* Form field flex container */
.login-card .mat-mdc-form-field-flex {
align-items: center !important;
}
/* Form field infix */
.login-card .mat-mdc-form-field-infix {
padding-top: 20px !important;
padding-bottom: 8px !important;
border-top: 0 !important;
}
/* Floating label styling - colors only, let Material handle positioning */
.login-card .mat-mdc-floating-label {
color: var(--auth-text-secondary) !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.login-card .mat-mdc-floating-label--float-above {
color: rgba(255, 200, 150, 0.8) !important;
}
/* Input text */
.login-card .mat-mdc-input-element,
.login-card .mdc-text-field__input {
color: var(--auth-text-primary) !important;
font-size: 16px !important;
font-weight: 500 !important;
caret-color: var(--auth-button-right) !important;
}
.login-card .mat-mdc-input-element::placeholder {
color: transparent !important;
}
/* Icons - smaller and consistent */
.login-card .frosted-field mat-icon,
.login-card .frosted-field .mat-icon,
.login-card .mat-mdc-form-field mat-icon,
.login-card .mat-mdc-form-field .mat-icon {
color: rgba(211, 181, 160, 0.9) !important;
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
}
/* FontAwesome icons - same size as Material icons */
.login-card .frosted-field .fa,
.login-card .frosted-field .fas,
.login-card .frosted-field .far,
.login-card .frosted-field .fab,
.login-card .mat-mdc-form-field .fa,
.login-card .mat-mdc-form-field .fas,
.login-card .mat-mdc-form-field .far,
.login-card .mat-mdc-form-field .fab {
font-size: 16px !important;
width: 18px !important;
height: 18px !important;
line-height: 18px !important;
text-align: center !important;
}
/* ==========================================================================
FROSTED FIELD STYLING - LEGACY SELECTORS (Fallback)
========================================================================== */
.frosted-field .mat-form-field-flex,
.frosted-field .mat-mdc-form-field-flex {
background: var(--auth-input-bg);
border-bottom: 1px solid var(--auth-input-border);
border-radius: 0;
padding: 0 6px 6px 6px;
}
.frosted-field .mat-form-field-infix,
.frosted-field .mat-mdc-form-field-infix {
padding: 0.35em 0 0.4em 0;
}
.frosted-field.mat-focused .mat-form-field-flex,
.frosted-field.mat-focused .mat-mdc-form-field-flex {
border-bottom-color: rgba(255, 168, 109, 0.7);
box-shadow: none;
}
.frosted-field .mat-form-field-label,
.frosted-field .mat-mdc-floating-label {
color: var(--auth-text-secondary);
font-weight: 500;
}
.frosted-field .mat-input-element,
.frosted-field .mat-mdc-input-element {
color: var(--auth-text-muted);
caret-color: var(--auth-button-right);
}
.frosted-field .mat-form-field-underline,
.frosted-field .mat-form-field-ripple,
.frosted-field .mdc-line-ripple {
display: none;
}
.frosted-field mat-icon,
.frosted-field .mat-icon {
color: rgba(211, 181, 160, 0.9) !important;
}
/* Glass Box Input Fields for Register Card */
.register-card .frosted-field {
width: 100% !important;
display: block !important;
}
.register-card .mat-mdc-form-field {
width: 100% !important;
display: block !important;
}
.register-card .frosted-field .mat-mdc-text-field-wrapper,
.register-card .mat-mdc-form-field .mat-mdc-text-field-wrapper {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 14px !important;
padding: 0 !important;
min-height: 58px !important;
height: 58px !important;
width: 100% !important;
transition: all 0.25s ease !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-sizing: border-box !important;
}
.register-card .frosted-field .mat-mdc-text-field-wrapper:hover,
.register-card .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
.register-card .frosted-field.mat-focused .mat-mdc-text-field-wrapper,
.register-card .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 140, 80, 0.4) !important;
box-shadow: 0 0 0 2px rgba(255, 140, 80, 0.1) !important;
}
.register-card .frosted-field .mat-mdc-form-field-flex,
.register-card .mat-mdc-form-field .mat-mdc-form-field-flex {
min-height: 58px !important;
height: 58px !important;
align-items: center !important;
padding: 0 14px 0 0 !important;
}
.register-card .frosted-field .mat-mdc-form-field-infix,
.register-card .mat-mdc-form-field .mat-mdc-form-field-infix {
padding-top: 21px !important;
padding-bottom: 7px !important;
padding-left: 2px !important;
min-height: 58px !important;
height: 58px !important;
display: block !important;
border-top: 0 !important;
width: 100% !important;
}
/* Icons - subtle and elegant - ALIGN LEFT */
.register-card .mat-mdc-form-field-icon-prefix,
.register-card .frosted-field .mat-mdc-form-field-icon-prefix,
.register-card .mat-mdc-form-field-icon-suffix,
.register-card .frosted-field .mat-icon-prefix,
.register-card .mat-icon-suffix {
padding-left: 0 !important;
padding-right: 4px !important;
margin-left: 12px !important;
}
.register-card .frosted-field mat-icon,
.register-card .frosted-field .mat-icon,
.register-card .mat-mdc-form-field mat-icon {
color: rgba(255, 180, 140, 0.5) !important;
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Subtle floating label - smaller, more refined */
.register-card .frosted-field .mat-mdc-floating-label,
.register-card .mat-mdc-form-field .mat-mdc-floating-label {
color: rgba(255, 255, 255, 0.4) !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0.3px !important;
line-height: 1.1 !important;
top: 50% !important;
transform: translateY(-50%) !important;
transform-origin: left top !important;
pointer-events: none !important;
}
.register-card .frosted-field .mat-mdc-floating-label.mdc-floating-label--float-above,
.register-card .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label--float-above,
.register-card .frosted-field .mat-mdc-floating-label--float-above,
.register-card .mat-mdc-form-field .mat-mdc-floating-label--float-above,
.register-card .mat-mdc-form-field:has(.mat-mdc-select-value-text) .mat-mdc-floating-label {
top: 11px !important;
transform: translateY(0) scale(0.82) !important;
color: rgba(255, 180, 140, 0.7) !important;
font-size: 10px !important;
width: auto !important;
}
/* Remove Material underlines and overlays */
.register-card .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before,
.register-card .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after,
.register-card .mdc-line-ripple {
display: none !important;
}
.register-card .mdc-text-field--filled:not(.mdc-text-field--disabled) {
background: transparent !important;
}
.register-card .mat-mdc-form-field-focus-overlay {
display: none !important;
}
.register-card .mat-mdc-form-field-subscript-wrapper {
display: none !important;
}
/* Input text - crisp and readable */
.register-card .frosted-field .mat-mdc-input-element,
.register-card .frosted-field .mdc-text-field__input,
.register-card .mat-mdc-form-field .mat-mdc-input-element {
color: rgba(255, 255, 255, 0.95) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 24px !important;
caret-color: #ff8c5a !important;
padding: 0 !important;
margin: 0 !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}
.register-card .mat-mdc-input-element::placeholder {
color: transparent !important;
}
/* Select styling */
.register-card .mat-mdc-select-value {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 24px !important;
}
.register-card .mat-mdc-select-trigger {
min-height: 24px !important;
align-items: center !important;
}
.register-card .mat-mdc-select-arrow {
color: rgba(255, 255, 255, 0.5) !important;
}
/* ==========================================================================
FORM CONTROLS
========================================================================== */
.placeholder-text {
color: var(--auth-text-secondary);
}
.forgot-button {
font-size: 12px;
color: var(--auth-link-color);
cursor: pointer;
font-weight: 600;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.resend-timer {
font-size: 12px;
color: var(--auth-text-muted);
font-weight: 500;
opacity: 0.8;
cursor: not-allowed;
}
.primary-action {
display: flex;
justify-content: center;
margin-top: 6px;
}
.btn-gradient,
.login-card .btn-gradient,
.login-card button.btn-gradient,
.register-card .btn-gradient,
.register-card button.btn-gradient {
width: 100% !important;
border: none !important;
border-radius: 999px !important;
padding: 14px 24px !important;
min-height: 48px !important;
background: linear-gradient(90deg, var(--auth-button-left), var(--auth-button-right)) !important;
color: #1a0805 !important;
font-weight: 700 !important;
font-size: 15px !important;
box-shadow: 0 8px 24px rgba(231, 70, 48, 0.35) !important;
letter-spacing: 0.5px !important;
transition: transform 180ms ease, box-shadow 180ms ease !important;
cursor: pointer !important;
overflow: hidden !important;
}
.btn-gradient:not(:disabled):hover,
.login-card .btn-gradient:not(:disabled):hover,
.register-card .btn-gradient:not(:disabled):hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 32px rgba(231, 70, 48, 0.45) !important;
}
.btn-gradient:disabled,
.login-card .btn-gradient:disabled,
.register-card .btn-gradient:disabled {
opacity: 0.55 !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
/* Override Material button styles for auth pages */
.login-shell .btn-gradient,
.login-shell button.btn-gradient,
.login-shell .mat-mdc-button.btn-gradient,
.login-shell .mat-mdc-unelevated-button.btn-gradient,
.login-card .mat-mdc-button.btn-gradient,
.login-card .mat-mdc-unelevated-button.btn-gradient,
.login-card .mat-mdc-raised-button.btn-gradient,
.login-card .mat-mdc-outlined-button.btn-gradient,
.login-card button[mat-button].btn-gradient,
.register-card .mat-mdc-button.btn-gradient,
.register-card .mat-mdc-unelevated-button.btn-gradient,
.register-card .mat-mdc-raised-button.btn-gradient,
.register-card .mat-mdc-outlined-button.btn-gradient,
.register-card button[mat-button].btn-gradient {
background: linear-gradient(90deg, var(--auth-button-left), var(--auth-button-right)) !important;
color: #1a0805 !important;
border-radius: 999px !important;
--mdc-text-button-label-text-color: #1a0805 !important;
--mdc-filled-button-container-shape: 999px !important;
--mdc-outlined-button-container-shape: 999px !important;
--mdc-protected-button-container-shape: 999px !important;
--mat-mdc-button-persistent-ripple-color: transparent !important;
}
/* Target Material's internal .mdc-button element */
.login-shell .btn-gradient .mdc-button,
.login-shell button.btn-gradient .mdc-button,
.login-card .btn-gradient .mdc-button,
.register-card .btn-gradient .mdc-button {
border-radius: 999px !important;
background: transparent !important;
}
/* Target Material's button ripple container */
.login-shell .btn-gradient .mat-mdc-button-touch-target,
.login-shell .btn-gradient .mat-mdc-button-ripple,
.login-card .btn-gradient .mat-mdc-button-touch-target,
.login-card .btn-gradient .mat-mdc-button-ripple,
.register-card .btn-gradient .mat-mdc-button-touch-target,
.register-card .btn-gradient .mat-mdc-button-ripple {
border-radius: 999px !important;
}
.ghost-action {
display: flex;
justify-content: flex-end;
}
.linkish {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--auth-text-secondary);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
outline: none !important;
}
.linkish:hover {
color: var(--auth-link-color);
background: transparent !important;
background-color: transparent !important;
}
.login-arrow {
height: 18px;
width: 20px;
}
/* ==========================================================================
CARD FOOTERS
========================================================================== */
.login-card-divider {
display: flex;
align-items: center;
margin: 16px 0 8px;
}
.login-card-divider::before,
.login-card-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 204, 178, 0.25), transparent);
}
.login-card-divider::before {
margin-right: 12px;
}
.login-card-divider::after {
margin-left: 12px;
}
.register-card-divider {
height: 1px;
margin: 10px 0 8px;
background: linear-gradient(90deg, transparent, rgba(244, 204, 178, 0.5), transparent);
}
.login-card-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(244, 204, 178, 0.1);
}
.login-card-footer .contact-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.login-card-footer .footer-link {
font-size: 11px;
color: var(--auth-text-muted);
opacity: 0.6;
}
.login-card-footer .footer-number {
font-size: 13px;
font-weight: 700;
color: var(--auth-text-primary);
letter-spacing: 0.4px;
opacity: 0.8;
}
.register-card-footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
background: transparent;
}
.register-link {
color: #E14125 !important;
font-weight: 700;
text-transform: none;
letter-spacing: 0.4px;
text-decoration: none;
font-size: 13px;
margin-bottom: 2px;
}
.register-link:hover {
color: #E14125 !important;
}
.login-link {
color: #E14125 !important;
font-weight: 700;
text-transform: none;
letter-spacing: 0.4px;
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
}
.login-link:hover {
color: var(--auth-button-right) !important;
}
.login-prompt {
color: var(--auth-text-secondary);
font-size: 11px;
}
.contact-block {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--auth-text-secondary);
font-size: 14px;
}
.footer-link {
font-size: 13px;
color: var(--auth-text-muted);
}
.footer-number {
font-size: 19px;
font-weight: 700;
color: var(--auth-text-primary);
}
/* ── Inline validation hints ───────────────────────────────── */
.field-hint {
font-size: 11px;
color: var(--auth-text-muted);
opacity: 0.6;
margin: -4px 0 0 38px;
letter-spacing: 0.2px;
}
.field-hint--valid {
color: #4caf50;
opacity: 1;
font-weight: 600;
}
.field-hint--error {
color: #f44336;
opacity: 1;
font-weight: 500;
}
.field-hint--checking {
color: var(--auth-text-muted);
opacity: 0.8;
font-style: italic;
}
.field-hint-link {
color: #f44336;
text-decoration: underline;
cursor: pointer;
margin-left: 4px;
font-weight: 600;
}
.field-hint-link:hover {
color: rgb(234.1839622642, 27.9622641509, 12.8160377358);
}
/* ── Signup microcopy ─────────────────────────────────────── */
.signup-microcopy {
text-align: center;
color: var(--auth-text-muted);
font-size: 11px;
margin: 4px 0 0;
opacity: 0.5;
letter-spacing: 0.2px;
}
/* ── Terms note (implicit consent) ────────────────────────── */
.terms-note {
text-align: center;
color: var(--auth-text-muted);
font-size: 10px;
margin: 6px 0 0;
opacity: 0.4;
line-height: 1.4;
}
.terms-link {
color: var(--auth-link-color);
text-decoration: underline;
font-weight: 500;
}
.terms-link:hover {
color: var(--auth-button-right);
}
/* ==========================================================================
ANIMATIONS
========================================================================== */
.floating {
animation: floaty 6200ms ease-in-out infinite;
}
.lift-in {
/* Animation disabled - uncomment below to enable */
/* animation: liftIn 650ms ease 160ms both; */
opacity: 1;
}
@keyframes floaty {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
@keyframes liftIn {
0% {
opacity: 0;
transform: translateY(30px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ==========================================================================
GLASS DROPDOWN PANEL (Auth Context)
========================================================================== */
.login-shell .mat-mdc-select-panel,
.login-shell .mat-mdc-autocomplete-panel {
background: linear-gradient(145deg, rgba(60, 50, 45, 0.25), rgba(40, 35, 30, 0.35)) !important;
backdrop-filter: blur(60px) saturate(100%) brightness(1) !important;
-webkit-backdrop-filter: blur(60px) saturate(100%) brightness(1) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 20px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
padding: 10px !important;
margin-top: 8px !important;
}
.login-shell .mat-mdc-select-panel .mat-mdc-option,
.login-shell .mat-mdc-autocomplete-panel .mat-mdc-option {
color: rgba(255, 255, 255, 0.85) !important;
background: transparent !important;
min-height: 44px !important;
padding: 10px 16px !important;
margin: 4px 8px !important;
border-radius: 14px !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
border: 1px solid transparent !important;
}
.login-shell .mat-mdc-select-panel .mat-mdc-option:hover,
.login-shell .mat-mdc-autocomplete-panel .mat-mdc-option:hover {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
border-color: rgba(255, 140, 80, 0.3) !important;
color: #ffffff !important;
transform: translateX(2px) !important;
}
.login-shell .mat-mdc-select-panel .mat-mdc-option.mdc-list-item--selected,
.login-shell .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected {
background: rgba(255, 140, 80, 0.15) !important;
border: 1px solid rgba(255, 140, 80, 0.4) !important;
color: #ffffff !important;
font-weight: 600 !important;
}
.login-shell .mat-mdc-select-panel .mat-pseudo-checkbox,
.login-shell .mat-mdc-select-panel .mat-pseudo-checkbox-minimal {
border-color: rgba(255, 140, 80, 0.6) !important;
background: transparent !important;
}
.login-shell .mat-mdc-select-panel .mat-pseudo-checkbox-checked {
background: rgba(255, 140, 80, 0.8) !important;
border-color: rgba(255, 140, 80, 0.8) !important;
}
.login-shell .mat-mdc-select-panel .mat-mdc-option .mat-ripple-element,
.login-shell .mat-mdc-select-panel .mat-mdc-option::before,
.login-shell .mat-mdc-autocomplete-panel .mat-mdc-option .mat-ripple-element {
display: none !important;
opacity: 0 !important;
background: transparent !important;
}
/* ==========================================================================
RESPONSIVE BREAKPOINTS
========================================================================== */
@media (max-width: 1100px) {
.login-shell .layout,
.register-shell .layout {
grid-template-columns: 1fr;
gap: 40px;
}
.card-column {
order: -1;
margin-top: 0;
padding-top: 0;
align-self: center;
}
.hero-panel {
text-align: center;
}
.hero-illustration {
text-align: center;
}
.store-row {
margin: 0 auto;
}
}
@media (max-width: 640px) {
.login-shell,
.register-shell {
padding: 32px 18px 28px;
}
.login-card {
padding: 36px 26px 30px;
border-radius: 32px;
max-width: 100%;
min-height: unset;
}
.register-card {
border-radius: 28px;
max-width: 100%;
}
.register-shell .register-card {
max-height: none;
}
.register-shell .register-body {
overflow: visible;
}
.register-header {
padding: 20px 24px 12px;
}
.register-body {
padding: 8px 24px 12px;
}
.register-footer {
padding: 10px 24px 20px;
}
.field-row {
flex-direction: column;
gap: 10px;
}
}
/* ==========================================================================
BUSINESS PICKER (V5 Identity: multi-membership)
========================================================================== */
.business-picker-overlay {
padding: 0;
}
.picker-header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.picker-back-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--auth-text-secondary);
transition: all 0.2s ease;
}
.picker-back-btn:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--auth-text-primary);
}
.picker-back-btn mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.login-card.picker-active {
min-height: auto;
padding-top: 30px;
}
.picker-title {
flex: 1;
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--auth-text-secondary);
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0;
padding-right: 28px;
}
.picker-list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 2px;
overflow-y: auto;
}
.picker-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
min-height: 72px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition: all 0.2s ease;
}
.picker-item:hover {
background: rgba(255, 140, 80, 0.1);
border-color: rgba(255, 140, 80, 0.3);
transform: translateY(-1px);
}
.picker-biz-name {
font-size: 12px;
font-weight: 600;
color: var(--auth-text-primary);
}
.picker-role-badge {
font-size: 11px;
font-weight: 600;
color: var(--auth-button-right);
background: rgba(255, 140, 80, 0.12);
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.picker-item-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.picker-group-label {
font-size: 10px;
font-weight: 500;
color: rgba(255, 200, 150, 0.55);
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* ==========================================================================
GROUP PICKER — Enterprise Organization Hierarchy
========================================================================== */
/* Group header — clickable card to enter group mode */
.picker-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
margin-top: 14px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(231, 70, 48, 0.08), rgba(255, 122, 79, 0.04));
border: 1px solid var(--auth-pill-border);
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
/* Disabled state — employees with no group access */
}
.picker-group-header::before {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 122, 79, 0.06), transparent 60%);
opacity: 0;
transition: opacity 0.25s ease;
}
.picker-group-header:first-child {
margin-top: 0;
}
.picker-group-header:hover {
border-color: rgba(255, 122, 79, 0.5);
box-shadow: 0 4px 20px rgba(231, 70, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
transform: translateY(-1px);
}
.picker-group-header:hover::before {
opacity: 1;
}
.picker-group-header--disabled {
cursor: default;
border-color: rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.picker-group-header--disabled::before {
display: none;
}
.picker-group-header--disabled:hover {
border-color: rgba(255, 255, 255, 0.06);
box-shadow: none;
transform: none;
}
.picker-group-header--disabled .picker-group-icon-wrap {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
box-shadow: none;
}
.picker-group-header--disabled .picker-group-icon {
color: var(--auth-text-muted) !important;
}
.picker-group-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.picker-group-icon-wrap {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--auth-button-left), var(--auth-button-right));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(231, 70, 48, 0.25);
}
.picker-group-logo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.picker-group-icon {
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
color: #fff !important;
}
.picker-group-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.picker-group-name {
font-size: 13px;
font-weight: 700;
color: var(--auth-text-primary);
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.picker-group-meta-row {
display: flex;
align-items: center;
gap: 6px;
}
.picker-group-meta {
font-size: 11px;
font-weight: 500;
color: var(--auth-text-muted);
opacity: 0.7;
}
.picker-group-badge {
font-size: 9px;
font-weight: 700;
color: var(--auth-button-right);
background: var(--auth-pill-bg);
border: 1px solid var(--auth-pill-border);
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 1px;
text-transform: uppercase;
}
.picker-group-arrow {
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
color: var(--auth-text-muted) !important;
opacity: 0.5;
transition: all 0.25s ease;
flex-shrink: 0;
}
.picker-group-header:hover .picker-group-arrow {
color: var(--auth-button-right) !important;
opacity: 1;
transform: translateX(2px);
}
/* Branches container — visual tree */
.picker-branches-container {
position: relative;
margin-left: 18px;
padding-left: 16px;
margin-top: 4px;
margin-bottom: 4px;
border-left: 1px solid rgba(255, 122, 79, 0.15);
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 6px;
padding-bottom: 2px;
}
/* Branch items under a group */
.picker-item--grouped {
border-radius: 12px;
min-height: 56px;
position: relative;
}
.picker-branch-dot {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 122, 79, 0.3);
border: 1px solid rgba(255, 122, 79, 0.5);
}
.picker-item--grouped:hover .picker-branch-dot {
background: var(--auth-button-right);
box-shadow: 0 0 6px rgba(255, 122, 79, 0.4);
}
/* ==========================================================================
PHASE 1 — SAAS ENTRY FUNNEL
========================================================================== */
/* ── Demo CTA (highest priority — above login form) ──────────────── */
.demo-cta-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 0;
}
.demo-cta-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #ff7a4f;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
text-decoration: none;
padding: 6px 0;
transition: color 200ms ease, transform 200ms ease;
}
.demo-cta-link:hover {
color: #ffa870;
transform: translateY(-1px);
}
.demo-cta-link mat-icon,
.demo-cta-link .mat-icon {
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
color: inherit !important;
}
.btn-demo-cta {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #e74630 0%, #ff7a4f 50%, #ffa870 100%);
color: #fff;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
box-shadow: 0 8px 32px rgba(231, 70, 48, 0.45), 0 0 80px rgba(255, 122, 79, 0.15);
transition: transform 200ms ease, box-shadow 200ms ease;
animation: demoPulse 3s ease-in-out infinite;
}
.btn-demo-cta:not(:disabled):hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 40px rgba(231, 70, 48, 0.6), 0 0 100px rgba(255, 122, 79, 0.25);
}
.btn-demo-cta:disabled {
opacity: 0.7;
cursor: wait;
}
.btn-demo-cta mat-icon,
.btn-demo-cta .mat-icon {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
color: #fff !important;
}
@keyframes demoPulse {
0%, 100% {
box-shadow: 0 8px 32px rgba(231, 70, 48, 0.45), 0 0 80px rgba(255, 122, 79, 0.15);
}
50% {
box-shadow: 0 8px 40px rgba(231, 70, 48, 0.6), 0 0 100px rgba(255, 122, 79, 0.3);
}
}
.demo-subtext {
font-size: 11px;
color: var(--auth-text-muted);
opacity: 0.65;
margin-top: 8px;
letter-spacing: 0.3px;
}
/* ── Divider between demo CTA and login form ─────────────────────── */
.demo-divider {
display: flex;
align-items: center;
margin: 12px 0 8px;
}
.demo-divider::before,
.demo-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.demo-divider-text {
padding: 0 14px;
font-size: 11px;
color: var(--auth-text-muted);
opacity: 0.5;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 600;
}
/* ── Hero Panel CTAs ─────────────────────────────────────────────── */
.hero-ctas {
display: flex;
gap: 12px;
margin-top: 8px;
}
.btn-hero-primary {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
border-radius: 999px;
border: none;
background: linear-gradient(90deg, var(--auth-button-left), var(--auth-button-right));
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 20px rgba(231, 70, 48, 0.4);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn-hero-primary:not(:disabled):hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(231, 70, 48, 0.55);
}
.btn-hero-primary mat-icon,
.btn-hero-primary .mat-icon {
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
color: #fff !important;
}
.btn-hero-secondary {
padding: 10px 24px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.04);
color: var(--auth-text-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 180ms ease;
backdrop-filter: blur(8px);
}
.btn-hero-secondary:hover {
border-color: rgba(255, 140, 100, 0.35);
background: rgba(255, 255, 255, 0.08);
color: var(--auth-text-primary);
}
/* ── Pricing Link ────────────────────────────────────────────────── */
.pricing-link {
display: inline-block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: var(--auth-link-color);
text-decoration: none;
transition: color 200ms ease;
}
.pricing-link:hover {
color: var(--auth-button-right);
text-decoration: underline;
}
/* ── Website Link (autroid.ai) ───────────────────────────────── */
.website-link {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
margin-bottom: 6px;
padding: 6px 14px 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--auth-text-secondary);
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
transition: all 250ms ease;
letter-spacing: 0.3px;
}
.website-link:hover {
color: var(--auth-text-primary);
border-color: rgba(255, 140, 100, 0.3);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 16px rgba(231, 70, 48, 0.12);
transform: translateX(2px);
}
.website-link-text {
font-family: "Space Grotesk", "Manrope", sans-serif;
}
.website-link-icon {
opacity: 0.6;
transition: opacity 200ms ease, transform 200ms ease;
}
.website-link:hover .website-link-icon {
opacity: 1;
transform: translate(1px, -1px);
}
/* ── Picker Navigating State — Enterprise Sign-In Loading ────────── */
.picker-navigating {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px 36px;
gap: 0;
flex: 1;
position: relative;
overflow: hidden;
animation: navContainerIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes navContainerIn {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ── Ambient Pulse Backdrop ─────────────────────────────────────── */
.nav-glow-backdrop {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(231, 70, 48, 0.1) 0%, rgba(255, 122, 79, 0.04) 40%, transparent 70%);
animation: navGlowPulse 2.8s ease-in-out infinite;
}
@keyframes navGlowPulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
/* ── Logo Orbit Container ───────────────────────────────────────── */
.nav-logo-orbit {
position: relative;
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/* Orbiting arc rings */
.nav-orbit-ring {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: rgba(255, 122, 79, 0.7);
border-right-color: rgba(231, 70, 48, 0.25);
animation: navOrbitSpin 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
filter: drop-shadow(0 0 6px rgba(255, 122, 79, 0.3));
}
.nav-orbit-ring--reverse {
inset: -10px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: rgba(255, 122, 79, 0.45);
border-left-color: rgba(231, 70, 48, 0.15);
animation: navOrbitSpin 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse;
filter: drop-shadow(0 0 8px rgba(255, 122, 79, 0.15));
}
@keyframes navOrbitSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Logo core — glow + float */
.nav-logo-core {
width: 64px;
height: 64px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
backdrop-filter: blur(4px);
box-shadow: 0 0 30px rgba(231, 70, 48, 0.2), 0 0 60px rgba(255, 122, 79, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: navLogoFloat 2.4s ease-in-out infinite;
}
.nav-logo-img {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(231, 70, 48, 0.3));
}
@keyframes navLogoFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
/* ── Status Text ────────────────────────────────────────────────── */
.nav-status-text {
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
margin: 0 0 4px;
letter-spacing: 0.3px;
animation: navTextIn 0.5s 0.15s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.nav-status-sub {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.35);
margin: 0 0 24px;
letter-spacing: 0.2px;
animation: navTextIn 0.5s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes navTextIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animated ellipsis dots */
.nav-dots::after {
content: "";
animation: navDots 1.6s steps(4, end) infinite;
}
@keyframes navDots {
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
}
/* ── Progress Bar ───────────────────────────────────────────────── */
.nav-progress-track {
width: 140px;
height: 3px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
animation: navTextIn 0.5s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.nav-progress-bar {
width: 40%;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--auth-button-left), var(--auth-button-right), var(--auth-button-left));
background-size: 200% 100%;
animation: navProgressShimmer 1.8s ease-in-out infinite;
box-shadow: 0 0 10px rgba(255, 122, 79, 0.4);
}
@keyframes navProgressShimmer {
0% {
transform: translateX(-100%);
background-position: 0% 0;
}
50% {
background-position: 100% 0;
}
100% {
transform: translateX(350%);
background-position: 0% 0;
}
}
/* Dim back button while navigation is in-flight */
.picker-back-btn:disabled {
opacity: 0.25;
cursor: not-allowed;
pointer-events: none;
}
/* ── Inline Spinner ──────────────────────────────────────────────── */
.spinner-inline {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spinInline 0.7s linear infinite;
}
.spinner-inline.spinner-large {
width: 32px;
height: 32px;
border-width: 3px;
}
@keyframes spinInline {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
PHASE 1B — OTP-GATED DEMO FLOW
Uses: tokens.scss + auth-scoped vars
========================================================================== */
/* ── Demo Form Container (Step 2: Name + Phone + Email) ──────────── */
.demo-form-container,
.demo-otp-container {
display: flex;
flex-direction: column;
padding: 0;
background: transparent;
border: none;
margin-bottom: 0;
animation: demoSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes demoSlideIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Form Header (title + close button) ──────────────────────────── */
.demo-form-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ui-space-1);
}
.demo-form-title {
font-size: var(--ui-text-md);
font-weight: var(--ui-font-bold);
color: var(--auth-text-primary);
margin: 0;
letter-spacing: -0.2px;
}
.demo-form-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--ui-radius-sm);
border: none;
background: transparent;
color: var(--ui-text-muted);
cursor: pointer;
transition: all var(--ui-transition-fast);
}
.demo-form-close:hover {
background: var(--ui-surface-hover);
color: var(--ui-text-primary);
}
.demo-form-close mat-icon,
.demo-form-close .mat-icon {
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
}
.demo-form-subtitle {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
margin: 0 0 var(--ui-space-3);
letter-spacing: 0.2px;
}
/* ── Demo Input Fields ───────────────────────────────────────────── */
.demo-fields {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
margin-bottom: var(--ui-space-3);
}
.demo-field {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-md);
border: 1px solid var(--ui-border);
background: var(--ui-surface-1);
transition: border-color var(--ui-transition-fast);
}
.demo-field:focus-within {
border-color: var(--ui-border-focus);
}
.demo-field-icon {
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
color: var(--ui-text-muted) !important;
flex-shrink: 0;
}
.demo-field-prefix {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
font-weight: var(--ui-font-medium);
flex-shrink: 0;
padding-right: var(--ui-space-1);
border-right: 1px solid var(--ui-border);
margin-right: var(--ui-space-1);
}
.demo-field-input {
flex: 1;
border: none;
background: transparent;
color: var(--auth-text-primary);
font-size: var(--ui-text-base);
font-family: var(--ui-font-primary);
font-weight: var(--ui-font-medium);
outline: none;
line-height: 1.5;
}
.demo-field-input::placeholder {
color: var(--ui-text-subtle);
font-weight: var(--ui-font-normal);
}
.demo-field-select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.demo-field-select option {
background: var(--ui-surface-3);
color: var(--auth-text-primary);
}
.demo-field-suffix {
font-size: 18px !important;
width: 18px !important;
height: 18px !important;
color: var(--ui-text-muted) !important;
flex-shrink: 0;
cursor: pointer;
opacity: 0.6;
transition: opacity 200ms ease;
}
.demo-field-suffix:hover {
opacity: 1;
}
/* ── OTP Input (5-digit, large, center-aligned) ──────────────────── */
.demo-otp-sent-text {
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
margin: 0 0 var(--ui-space-4);
text-align: center;
}
.demo-otp-sent-text strong {
color: var(--auth-text-primary);
font-weight: var(--ui-font-semibold);
}
.demo-otp-input-wrap {
display: flex;
justify-content: center;
margin-bottom: var(--ui-space-3);
}
.demo-otp-input {
width: 200px;
text-align: center;
font-size: 28px;
font-weight: var(--ui-font-bold);
font-family: var(--ui-font-mono);
letter-spacing: 12px;
padding: var(--ui-space-3) var(--ui-space-4);
border-radius: var(--ui-radius-md);
border: 2px solid var(--ui-border);
background: var(--ui-surface-1);
color: var(--auth-text-primary);
outline: none;
transition: border-color var(--ui-transition-fast);
caret-color: var(--ui-brand);
}
.demo-otp-input:focus {
border-color: var(--ui-border-focus);
box-shadow: 0 0 0 3px rgba(255, 122, 79, 0.12);
}
.demo-otp-input::placeholder {
font-size: 18px;
letter-spacing: 8px;
color: var(--ui-text-subtle);
}
/* ── Resend Timer + Button ───────────────────────────────────────── */
.demo-resend {
display: flex;
justify-content: center;
margin-top: var(--ui-space-3);
}
.demo-resend-timer {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.demo-resend-btn {
border: none;
background: transparent;
color: var(--auth-link-color);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
cursor: pointer;
padding: var(--ui-space-1) var(--ui-space-2);
border-radius: var(--ui-radius-sm);
transition: all var(--ui-transition-fast);
}
.demo-resend-btn:hover {
color: var(--auth-button-right);
background: rgba(255, 122, 79, 0.08);
}
.demo-resend-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Error Message ───────────────────────────────────────────────── */
.demo-error {
font-size: var(--ui-text-sm);
color: var(--ui-danger);
text-align: center;
padding: var(--ui-space-2);
margin-bottom: var(--ui-space-2);
border-radius: var(--ui-radius-sm);
background: var(--ui-danger-bg);
border: 1px solid var(--ui-danger-border);
animation: demoSlideIn 0.2s ease;
}
/* ── Creating State (provisioning spinner) ───────────────────────── */
.demo-creating-container {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--ui-space-8) var(--ui-space-4);
margin-bottom: var(--ui-space-2);
animation: demoSlideIn 0.3s ease;
}
.demo-creating-spinner {
margin-bottom: var(--ui-space-4);
}
.demo-creating-text {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--auth-text-primary);
margin: 0 0 var(--ui-space-1);
}
.demo-creating-subtext {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
margin: 0;
}
/* ── Demo form button state extensions ───────────────────────────── */
.demo-form-container .btn-demo-cta,
.demo-otp-container .btn-demo-cta {
animation: none; /* No pulse inside form — too distracting */
}
.demo-form-container .btn-demo-cta:disabled,
.demo-otp-container .btn-demo-cta:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* ==========================================================================
CARD COLUMN FOOTER — Below the login card
========================================================================== */
.card-column-footer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 380px;
gap: 4px;
}
.card-column-footer .register-link {
font-size: 14px;
font-weight: 700;
color: var(--auth-link-color);
cursor: pointer;
text-decoration: none;
transition: color 200ms ease;
}
.card-column-footer .register-link:hover {
color: var(--auth-button-right);
}
.card-footer-contact {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.card-footer-contact .footer-link {
font-size: 12px;
color: var(--auth-text-muted);
opacity: 0.7;
}
.card-footer-contact .footer-number {
font-size: 15px;
font-weight: 700;
color: var(--auth-text-primary);
letter-spacing: 0.5px;
}
.card-footer-divider {
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
margin: 6px 0;
}
.btn-demo-cta--below {
padding: 12px 24px;
font-size: 14px;
border-radius: var(--ui-radius-lg);
}
.card-column-footer .demo-subtext {
margin-top: 2px;
}
/* ── WhatsApp OTP hint badge ──────────────────────────────────────── */
/* Shown when first-time employee receives OTP via WhatsApp */
.otp-whatsapp-hint {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
margin-bottom: var(--ui-space-2);
border-radius: var(--ui-radius-md);
background: var(--ui-success-bg);
border: 1px solid var(--ui-success-border);
color: var(--ui-success);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
letter-spacing: 0.2px;
animation: fadeInHint 0.3s ease;
}
.otp-whatsapp-icon {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
color: var(--ui-success) !important;
}
@keyframes fadeInHint {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Legal domain (isolated — public-facing, no auth required) */
/* ==========================================================================
UI PAGE - LEGAL (Privacy Policy / Terms of Service)
==========================================================================
Self-contained legal page contract. Renders as a fixed, scrollable overlay
above the entire app shell — same escape pattern as auth.scss .login-shell.
WHY position: fixed on host elements:
- app-shell.scss sets html, body { overflow: hidden } globally
- .ui-app-shell has overflow: hidden
- .ui-app-shell__background is position: fixed; z-index: 0 (bleeds through)
- Using position: fixed + overflow-y: auto on the host elements escapes ALL
of these constraints without touching any other part of the app.
Host elements: app-privacy-policy, app-terms-of-service, app-delete-account
Scoped to: .legal-page
========================================================================== */
/* ==========================================================================
HOST ELEMENTS — escape the app-shell overflow lock
========================================================================== */
app-privacy-policy,
app-terms-of-service,
app-delete-account {
display: block;
position: fixed;
inset: 0;
z-index: 300; /* above ui-app-shell__background (z-index: 0) and console header */
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
/* Custom scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
app-privacy-policy::-webkit-scrollbar,
app-terms-of-service::-webkit-scrollbar,
app-delete-account::-webkit-scrollbar {
width: 6px;
}
app-privacy-policy::-webkit-scrollbar-track,
app-terms-of-service::-webkit-scrollbar-track,
app-delete-account::-webkit-scrollbar-track {
background: transparent;
}
app-privacy-policy::-webkit-scrollbar-thumb,
app-terms-of-service::-webkit-scrollbar-thumb,
app-delete-account::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 3px;
}
/* ==========================================================================
PAGE SHELL
========================================================================== */
.legal-page {
min-height: 100%;
display: flex;
flex-direction: column;
background: var(--ui-surface-base);
color: var(--ui-text-secondary);
font-family: var(--ui-font-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
HEADER
========================================================================== */
.legal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 48px;
border-bottom: 1px solid var(--ui-border-light);
background: rgba(10, 10, 15, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: sticky;
top: 0;
z-index: 10;
flex-shrink: 0;
}
.legal-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ui-text-primary);
font-size: 18px;
font-weight: var(--ui-font-bold);
letter-spacing: -0.03em;
transition: opacity 200ms ease;
}
.legal-logo:hover {
opacity: 0.8;
}
.legal-logo-img {
height: 28px;
width: auto;
display: block;
}
.legal-nav {
display: flex;
align-items: center;
gap: 28px;
}
.legal-nav a {
color: var(--ui-text-muted);
text-decoration: none;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
transition: color 200ms ease;
}
.legal-nav a:hover {
color: var(--ui-text-primary);
}
.legal-nav-cta {
background: var(--ui-brand-gradient) !important;
color: #fff !important;
padding: 8px 20px !important;
border-radius: var(--ui-radius-sm) !important;
font-weight: var(--ui-font-semibold) !important;
font-size: var(--ui-text-sm) !important;
transition: opacity 200ms ease, transform 200ms ease !important;
box-shadow: 0 2px 12px rgba(242, 70, 39, 0.3) !important;
}
.legal-nav-cta:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* ==========================================================================
HERO
========================================================================== */
.legal-hero {
text-align: center;
padding: 56px 48px 44px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
flex-shrink: 0;
position: relative;
}
.legal-hero::after {
content: "";
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 2px;
background: var(--ui-brand-gradient);
border-radius: 1px;
}
.legal-hero-badge {
display: inline-block;
font-size: 11px;
font-weight: var(--ui-font-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ui-brand);
background: rgba(242, 70, 39, 0.08);
border: 1px solid rgba(242, 70, 39, 0.2);
padding: 4px 14px;
border-radius: 999px;
margin-bottom: 20px;
}
.legal-hero h1 {
font-size: 40px;
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
letter-spacing: -0.04em;
margin: 0 0 12px;
line-height: 1.1;
}
.legal-effective {
font-size: 14px;
color: var(--ui-text-subtle);
font-weight: var(--ui-font-medium);
margin: 0;
}
/* ==========================================================================
CONTENT LAYOUT
========================================================================== */
.legal-layout {
flex: 1;
display: flex;
max-width: 860px;
margin: 0 auto;
width: 100%;
gap: 0;
}
/* Sidebar TOC (optional — hidden on mobile) */
.legal-toc {
display: none; /* reserved for future use */
}
/* ==========================================================================
BODY
========================================================================== */
.legal-body {
flex: 1;
padding: 48px 48px 80px;
max-width: 860px;
margin: 0 auto;
width: 100%;
}
.legal-body section {
margin-bottom: 44px;
padding-bottom: 44px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.legal-body section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
.legal-body h2 {
font-size: 20px;
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
margin: 0 0 16px;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 10px;
}
.legal-body h2::before {
content: "";
display: block;
width: 3px;
height: 20px;
background: var(--ui-brand-gradient);
border-radius: 2px;
flex-shrink: 0;
}
.legal-body h3 {
font-size: 15px;
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
margin: 24px 0 10px;
letter-spacing: -0.01em;
}
.legal-body p {
font-size: 15px;
line-height: 1.8;
color: var(--ui-text-muted);
margin: 0 0 14px;
}
.legal-body p:last-child {
margin-bottom: 0;
}
.legal-body ul {
margin: 0 0 14px;
padding-left: 0;
list-style: none;
}
.legal-body ul li {
font-size: 15px;
line-height: 1.75;
color: var(--ui-text-muted);
padding: 5px 0 5px 22px;
position: relative;
}
.legal-body ul li::before {
content: "";
position: absolute;
left: 0;
top: 16px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ui-brand);
opacity: 0.6;
}
.legal-body ul li strong {
color: var(--ui-text-secondary);
font-weight: var(--ui-font-semibold);
}
.legal-body a {
color: var(--ui-brand);
text-decoration: none;
font-weight: var(--ui-font-medium);
transition: color 200ms ease;
}
.legal-body a:hover {
text-decoration: underline;
opacity: 0.85;
}
.legal-body code {
font-family: var(--ui-font-mono);
font-size: 13px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
padding: 1px 6px;
color: var(--ui-text-secondary);
}
/* Contact list — no bullets */
.contact-list li::before {
display: none !important;
}
.contact-list li {
padding-left: 0 !important;
}
/* ==========================================================================
FOOTER
========================================================================== */
.legal-footer {
margin-top: auto;
border-top: 1px solid var(--ui-border-light);
padding: 24px 48px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(10, 10, 15, 0.6);
flex-shrink: 0;
}
.legal-footer p {
font-size: var(--ui-text-sm);
color: var(--ui-text-subtle);
margin: 0;
}
.legal-footer nav {
display: flex;
gap: 24px;
}
.legal-footer nav a {
font-size: var(--ui-text-sm);
color: var(--ui-text-subtle);
text-decoration: none;
transition: color 200ms ease;
}
.legal-footer nav a:hover {
color: var(--ui-text-muted);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.legal-header {
padding: 14px 20px;
}
.legal-nav a:not(.legal-nav-cta) {
display: none;
}
.legal-hero {
padding: 40px 20px 32px;
}
.legal-hero h1 {
font-size: 28px;
}
.legal-body {
padding: 32px 20px 60px;
}
.legal-footer {
flex-direction: column;
gap: 12px;
text-align: center;
padding: 20px;
}
}
/* Invoice Pay domain (isolated — public, no auth, single-page payment) */
/* ==========================================================================
UI PAGE - INVOICE PAY (Public Payment Link)
==========================================================================
Full-screen public payment page contract. Used for invoice payment links.
This is a self-contained page that replaces the console shell.
NO auth required — isolated UI domain (like auth pages).
Classes:
.ipay-shell — Full-viewport root
.ipay-card — Centered card container
.ipay-org-* — Organization header
.ipay-hero-* — Amount hero section
.ipay-cta — Primary CTA button
.ipay-details-* — Invoice details (collapsible)
.ipay-trust-* — Trust footer
.ipay-success-* — Payment success state
.ipay-error-* — Error / expired state
.ipay-loading-* — Loading state
========================================================================== */
/* ── Invoice Pay Tokens ── */
:root {
--ipay-bg: var(--ui-surface-base, #0f1012);
--ipay-text: var(--ui-text-primary, #fefefe);
--ipay-text-secondary: var(--ui-text-muted, rgba(255, 255, 255, 0.55));
--ipay-text-dim: var(--ui-text-subtle, rgba(255, 255, 255, 0.4));
--ipay-card-bg: var(--ui-surface-1, rgba(255, 255, 255, 0.03));
--ipay-card-border: var(--ui-border-light, rgba(255, 255, 255, 0.06));
--ipay-card-border-hover: var(--ui-border-hover, rgba(255, 255, 255, 0.12));
--ipay-accent: var(--ui-brand, #ff784f);
--ipay-accent-dark: var(--ui-brand-dark, #e65a30);
--ipay-accent-glow: var(--ui-brand-glow, rgba(255, 153, 102, 0.6));
--ipay-success: var(--ui-success, #4ade80);
--ipay-success-bg: var(--ui-success-bg, rgba(74, 222, 128, 0.15));
--ipay-danger: var(--ui-danger, #f87171);
--ipay-danger-bg: var(--ui-danger-bg, rgba(248, 113, 113, 0.18));
--ipay-warning: var(--ui-warning, #fbbf24);
--ipay-warning-bg: var(--ui-warning-bg, rgba(251, 191, 36, 0.15));
--ipay-warning-border: var(--ui-warning-border, rgba(251, 191, 36, 0.4));
--ipay-radius: var(--ui-radius-xl, 20px);
--ipay-radius-sm: var(--ui-radius-md, 12px);
--ipay-radius-btn: var(--ui-radius-lg, 16px);
--ipay-font: var(--ui-font-primary, "Inter", system-ui, sans-serif);
}
/* ==========================================================================
SHELL
========================================================================== */
.ipay-shell {
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-10);
padding-top: var(--ui-space-10);
background: var(--ipay-bg);
position: relative;
overflow-x: hidden;
font-family: var(--ipay-font);
-webkit-font-smoothing: antialiased;
color: var(--ipay-text);
}
@media (min-width: 600px) {
.ipay-shell {
align-items: center;
padding-top: var(--ui-space-5);
}
}
/* ── Background Glows ── */
.ipay-glow {
position: fixed;
pointer-events: none;
border-radius: 999px;
z-index: 0;
}
.ipay-glow--top {
top: -30%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 120, 79, 0.1) 0%, transparent 70%);
}
.ipay-glow--bottom {
bottom: -20%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 120, 79, 0.06) 0%, transparent 70%);
}
/* ==========================================================================
CARD
========================================================================== */
.ipay-card {
width: 100%;
max-width: 420px;
position: relative;
z-index: var(--z-base, 1);
}
/* ==========================================================================
ORG HEADER
========================================================================== */
.ipay-org {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-5) var(--ui-space-6);
background: var(--ipay-card-bg);
border: 1px solid var(--ipay-card-border);
border-radius: var(--ipay-radius) var(--ipay-radius) 0 0;
}
.ipay-org__logo {
width: 48px;
height: 48px;
border-radius: var(--ui-radius-md);
background: var(--ui-brand-gradient);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--ui-font-bold);
font-size: var(--ui-text-xl);
color: #fff;
box-shadow: 0 4px 16px rgba(255, 120, 79, 0.3);
flex-shrink: 0;
}
.ipay-org__info {
display: flex;
flex-direction: column;
}
.ipay-org__name {
font-size: var(--ui-text-md);
font-weight: var(--ui-font-bold);
color: var(--ipay-text);
}
.ipay-org__label {
font-size: var(--ui-text-sm);
color: var(--ipay-text-secondary);
margin-top: 2px;
}
/* ==========================================================================
AMOUNT HERO
========================================================================== */
.ipay-hero {
text-align: center;
padding: var(--ui-space-8) var(--ui-space-6);
padding-top: 36px;
background: var(--ipay-card-bg);
border-left: 1px solid var(--ipay-card-border);
border-right: 1px solid var(--ipay-card-border);
}
.ipay-hero__label {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ipay-text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 var(--ui-space-2);
}
.ipay-hero__amount {
font-size: 48px;
font-weight: 800;
color: var(--ipay-text);
margin: 0;
letter-spacing: -2px;
font-feature-settings: "tnum";
}
.ipay-hero__sub {
font-size: var(--ui-text-sm);
color: var(--ipay-text-dim);
margin: var(--ui-space-3) 0 0;
}
/* ==========================================================================
CTA BUTTON
========================================================================== */
.ipay-cta {
display: block;
width: calc(100% - 48px);
margin: 0 var(--ui-space-6);
padding: var(--ui-space-4) var(--ui-space-5);
padding-top: 18px;
padding-bottom: 18px;
background: var(--ui-brand-gradient);
border: none;
border-radius: var(--ipay-radius-btn);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-bold);
color: #fff;
cursor: pointer;
transition: transform var(--ui-transition-base), box-shadow var(--ui-transition-base);
letter-spacing: 0.3px;
box-shadow: 0 6px 28px rgba(255, 120, 79, 0.35);
font-family: var(--ipay-font);
}
.ipay-cta:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 40px rgba(255, 120, 79, 0.45);
}
.ipay-cta:active:not(:disabled) {
transform: scale(0.98);
}
.ipay-cta:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
.ipay-cta--outline {
background: transparent;
border: 1px solid rgba(255, 120, 79, 0.4);
color: var(--ipay-accent);
box-shadow: none;
width: auto;
display: inline-block;
margin: var(--ui-space-4) 0 0;
padding: var(--ui-space-3) var(--ui-space-8);
font-size: var(--ui-text-base);
}
.ipay-cta--outline:hover:not(:disabled) {
background: rgba(255, 120, 79, 0.08);
box-shadow: none;
}
/* ==========================================================================
INVOICE DETAILS (Collapsible)
========================================================================== */
.ipay-details {
margin-top: var(--ui-space-5);
background: var(--ipay-card-bg);
border: 1px solid var(--ipay-card-border);
border-radius: var(--ipay-radius-sm);
overflow: hidden;
}
.ipay-details__toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: var(--ui-space-4) var(--ui-space-5);
background: none;
border: none;
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: color var(--ui-transition-base);
font-family: var(--ipay-font);
}
.ipay-details__toggle:hover {
color: var(--ipay-text);
}
.ipay-details__chevron {
font-size: var(--ui-text-lg);
transition: transform 0.25s;
color: var(--ipay-text-secondary);
transform: rotate(0deg);
}
.ipay-details__chevron--open {
transform: rotate(90deg);
}
.ipay-details__body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
padding: 0 var(--ui-space-5);
}
.ipay-details__body--expanded {
max-height: 800px;
padding: 0 var(--ui-space-5) var(--ui-space-4);
}
/* Detail Rows */
.ipay-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ui-space-2) 0;
font-size: var(--ui-text-base);
}
.ipay-row__label {
color: var(--ipay-text-secondary);
}
.ipay-row__value {
color: rgba(255, 255, 255, 0.7);
font-weight: var(--ui-font-medium);
text-align: right;
}
.ipay-row__value--bold {
color: var(--ipay-text);
font-weight: var(--ui-font-bold);
}
.ipay-row__value--accent {
color: var(--ipay-accent);
}
.ipay-row__value--success {
color: var(--ipay-success);
}
.ipay-row__value--discount {
color: var(--ipay-success);
}
.ipay-row--total {
padding-top: var(--ui-space-2);
}
/* Line Items */
.ipay-items {
margin-top: var(--ui-space-2);
}
.ipay-divider {
height: 1px;
background: var(--ipay-card-border);
margin: var(--ui-space-2) 0;
}
.ipay-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ui-space-1) 0;
font-size: var(--ui-text-sm);
}
.ipay-item__name {
color: var(--ipay-text-secondary);
flex: 1;
margin-right: var(--ui-space-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ipay-item__amount {
color: rgba(255, 255, 255, 0.6);
font-weight: var(--ui-font-medium);
font-feature-settings: "tnum";
white-space: nowrap;
}
/* ==========================================================================
OUTDATED WARNING
========================================================================== */
.ipay-outdated {
display: flex;
align-items: center;
gap: var(--ui-space-3);
margin: var(--ui-space-4) 0;
padding: var(--ui-space-3) var(--ui-space-4);
background: var(--ipay-warning-bg);
border: 1px solid var(--ipay-warning-border);
border-radius: var(--ipay-radius-sm);
font-size: var(--ui-text-sm);
color: var(--ipay-warning);
}
.ipay-outdated__icon {
font-size: var(--ui-text-lg);
flex-shrink: 0;
}
/* ==========================================================================
TRUST FOOTER
========================================================================== */
.ipay-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ui-space-3);
padding: var(--ui-space-5) 0 var(--ui-space-2);
margin-top: var(--ui-space-5);
}
.ipay-trust__badge {
font-size: var(--ui-text-sm);
color: var(--ipay-text-dim);
}
.ipay-trust__powered {
margin-top: var(--ui-space-1);
width: 100%;
text-align: center;
font-size: var(--ui-text-sm);
color: var(--ipay-text-dim);
}
.ipay-trust__powered strong {
color: var(--ipay-text-secondary);
}
/* ==========================================================================
SUCCESS STATE
========================================================================== */
.ipay-result {
text-align: center;
padding: var(--ui-space-12) var(--ui-space-6) var(--ui-space-8);
background: var(--ipay-card-bg);
border: 1px solid var(--ipay-card-border);
border-radius: var(--ui-radius-2xl);
}
.ipay-result__icon {
width: 72px;
height: 72px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: var(--ui-font-bold);
margin-bottom: var(--ui-space-5);
}
.ipay-result__icon--success {
background: var(--ipay-success-bg);
color: var(--ipay-success);
box-shadow: 0 0 40px rgba(74, 222, 128, 0.2);
}
.ipay-result__icon--error {
background: var(--ipay-danger-bg);
color: var(--ipay-danger);
box-shadow: 0 0 40px rgba(248, 113, 113, 0.2);
}
.ipay-result__title {
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
color: var(--ipay-text);
margin: 0 0 var(--ui-space-2);
}
.ipay-result__sub {
font-size: var(--ui-text-base);
color: var(--ipay-text-secondary);
margin: 0 0 var(--ui-space-5);
}
.ipay-result__payment-id {
font-size: var(--ui-text-sm);
color: var(--ipay-text-dim);
font-family: var(--ui-font-mono);
letter-spacing: 0.5px;
}
/* ==========================================================================
LOADING STATE
========================================================================== */
.ipay-loading {
text-align: center;
padding: 80px var(--ui-space-6);
background: var(--ipay-card-bg);
border: 1px solid var(--ipay-card-border);
border-radius: var(--ui-radius-2xl);
}
.ipay-loading__text {
font-size: var(--ui-text-base);
color: var(--ipay-text-secondary);
margin: var(--ui-space-5) 0 0;
}
.ipay-spinner {
width: 48px;
height: 48px;
border-radius: 50%;
margin: 0 auto;
border: 3px solid rgba(255, 120, 79, 0.2);
border-top-color: var(--ipay-accent);
animation: ipay-spin 0.8s linear infinite;
}
.ipay-spinner--inline {
display: inline-block;
width: 22px;
height: 22px;
border-width: 2.5px;
border-color: rgba(255, 255, 255, 0.3);
border-top-color: #fff;
}
@keyframes ipay-spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
UI PAGES — Corporate Dashboard
==========================================================================
Page-specific styles for the GROUP (Corporate) mode dashboard.
Uses: stat-card contract, glass-table contract, tokens.
========================================================================== */
/* ── Page Container ── */
.corporate-dashboard {
padding: var(--ui-space-6) var(--ui-space-8);
max-width: 1200px;
}
/* ── Corporate Mode Ribbon ── */
.corporate-ribbon {
display: inline-flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-2) var(--ui-space-5);
border-radius: var(--ui-radius-full);
background: var(--ui-warning-bg);
border: 1px solid var(--ui-warning-border);
color: var(--ui-warning);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.02em;
margin-bottom: var(--ui-space-8);
}
.corporate-ribbon mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
/* ── Section Title ── */
.corporate-dashboard__section-title {
font-size: var(--ui-text-md);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
margin: 0 0 var(--ui-space-4);
}
/* ==========================================================================
UI PAGES — Corporate Governance (Phase 10)
==========================================================================
Page-scoped styles for GROUP mode corporate pages.
ONLY business-identity and page-layout styles allowed here.
All reusable patterns MUST use existing contracts:
- Buttons: controls/buttons.scss (.ui-btn, .ui-icon-btn)
- Tabs: controls/tabs.scss (.ui-tabs, .ui-tab)
- Chips: controls/chips.scss (.ui-chip)
- Stat Cards: headers/stat-cards.scss (.stat-card)
- Tables: tables/glass-table.scss (.glass-table)
- Modals: layout/modal.scss (.glass-modal-*)
- Forms: modals/forms.scss (.ui-form, .glass-label)
========================================================================== */
/* ── Corporate Page Container ── */
.corporate-page {
padding: var(--ui-space-6);
max-width: 1200px;
}
.corporate-page__subtitle {
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
margin: 0 0 var(--ui-space-5) 0;
line-height: 1.5;
}
.corporate-page__actions {
display: flex;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-5);
}
.corporate-page__filters {
display: flex;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-5);
}
.corporate-page__filters select {
padding: 8px 12px;
border-radius: var(--ui-radius-md);
border: 1px solid var(--ui-border-light);
background: var(--ui-surface-1);
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
font-family: inherit;
min-width: 180px;
}
/* ── Corporate Ribbon (page identity, not reusable) ── */
.corporate-ribbon {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(184, 134, 11, 0.05));
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: var(--ui-radius-md);
margin-bottom: var(--ui-space-5);
color: var(--ui-warning);
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-base);
}
.corporate-ribbon mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
.corporate-ribbon__badge {
margin-left: auto;
padding: 2px 10px;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
letter-spacing: 0.06em;
background: rgba(212, 175, 55, 0.15);
color: var(--ui-warning);
border: 1px solid rgba(212, 175, 55, 0.25);
}
/* ── Corporate-Amber Button (page identity variant, not in controls) ── */
.ui-btn--corporate {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(184, 134, 11, 0.08));
border: 1px solid rgba(212, 175, 55, 0.3);
color: var(--ui-warning);
}
.ui-btn--corporate:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(184, 134, 11, 0.15));
border-color: rgba(212, 175, 55, 0.5);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
}
/* ── Branch Tags (corporate identity chip variant) ── */
.corporate-page .branch-tag {
display: inline-block;
padding: 2px 8px;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
background: rgba(99, 102, 241, 0.1);
color: var(--ui-brand);
border: 1px solid rgba(99, 102, 241, 0.15);
margin-right: 4px;
margin-bottom: 2px;
}
/* ── Enforced Badge (corporate-only indicator) ── */
.enforced-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
background: rgba(212, 175, 55, 0.12);
color: var(--ui-warning);
border: 1px solid rgba(212, 175, 55, 0.25);
}
.enforced-badge mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
/* ── Module Control Matrix (page-specific layout) ── */
.module-matrix .cell-module {
min-width: 140px;
font-weight: var(--ui-font-medium);
}
.module-matrix .cell-branch {
text-align: center;
min-width: 100px;
}
.module-matrix .cell-toggle {
text-align: center;
}
.module-toggle {
border: none;
background: transparent;
cursor: pointer;
padding: 4px;
border-radius: var(--ui-radius-sm);
transition: all 150ms ease;
display: inline-flex;
}
.module-toggle--on mat-icon {
color: var(--ui-success);
font-size: 22px;
width: 22px;
height: 22px;
}
.module-toggle--off mat-icon {
color: var(--ui-text-muted);
opacity: 0.4;
font-size: 22px;
width: 22px;
height: 22px;
}
.module-toggle:hover {
background: rgba(255, 255, 255, 0.06);
}
/* ── Completion Bar (corporate training only) ── */
.completion-bar {
width: 80px;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 6px;
}
.completion-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--ui-warning), var(--ui-success));
border-radius: 3px;
transition: width 300ms ease;
}
/* ── Info Card (corporate settings page only) ── */
.corporate-info-section {
margin-top: var(--ui-space-4);
}
.corporate-page .info-card {
display: flex;
gap: var(--ui-space-4);
padding: var(--ui-space-4) var(--ui-space-5);
background: rgba(99, 102, 241, 0.06);
border: 1px solid rgba(99, 102, 241, 0.12);
border-radius: var(--ui-radius-md);
margin-bottom: var(--ui-space-5);
}
.corporate-page .info-card mat-icon {
color: var(--ui-brand);
font-size: 22px;
margin-top: 2px;
flex-shrink: 0;
}
.corporate-page .info-card h4 {
margin: 0 0 4px 0;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
}
.corporate-page .info-card p {
margin: 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
line-height: 1.5;
}
/* ── Branch Checklist (assign modal, corporate only) ── */
.corporate-page .branch-check {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: 6px 0;
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
cursor: pointer;
}
.corporate-page .branch-check input[type=checkbox] {
accent-color: var(--ui-warning);
}
/* ── Inline utilities for corporate pages ── */
.corporate-page .cell-sub {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
margin-top: 2px;
}
/* ── Group Users page ── */
.group-users-page .erp-title {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
}
.group-users-page__title-icon {
width: 22px;
height: 22px;
font-size: 22px;
color: var(--ui-warning);
}
.group-users-page__filters .filter-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--ui-space-3);
width: 100%;
}
.group-users-page__filter-select {
width: min(220px, 100%);
}
.group-users-page__filter-select mat-form-field {
width: 100%;
}
.group-users-page__filter-toggle {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
min-height: 36px;
color: var(--ui-text-secondary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
cursor: pointer;
}
.group-users-page__filter-toggle input[type=checkbox] {
width: 16px;
height: 16px;
accent-color: var(--ui-warning);
}
.group-users-page__table-card {
min-height: 360px;
}
.group-users-page__table .cell-primary-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.group-users-page__branch-cell {
overflow: hidden;
}
.group-users-page__branch-list {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
min-width: 0;
}
.group-users-page__branch-item {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.group-users-page__branch-row {
display: flex;
align-items: center;
gap: var(--ui-space-1);
min-width: 0;
}
.group-users-page__branch-chip {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.group-users-page__role-label {
padding-left: 2px;
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
line-height: 1.2;
}
.group-users-page__primary-tag {
flex: 0 0 auto;
padding: 1px 6px;
border-radius: var(--ui-radius-full);
background: rgba(251, 191, 36, 0.12);
border: 1px solid var(--ui-warning-border);
color: var(--ui-warning);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
line-height: 1.2;
}
.group-users-page__permission-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ui-space-1);
max-width: 210px;
}
.group-users-page__perm-toggle {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--ui-space-1);
min-height: 28px;
padding: 4px var(--ui-space-2);
border: 1px solid var(--ui-border-light);
border-radius: var(--ui-radius-sm);
background: rgba(255, 255, 255, 0.02);
color: var(--ui-text-subtle);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
line-height: 1;
cursor: pointer;
transition: var(--ui-transition-base);
}
.group-users-page__perm-toggle mat-icon {
width: 15px;
height: 15px;
font-size: 15px;
}
.group-users-page__perm-toggle:hover {
background: var(--ui-surface-2);
border-color: var(--ui-border-hover);
color: var(--ui-text-secondary);
}
.group-users-page__perm-toggle--on {
background: var(--ui-success-bg);
border-color: var(--ui-success-border);
color: var(--ui-success);
}
.group-users-page .corporate-role-select {
width: 100%;
min-width: 150px;
}
.group-users-page .corporate-role-select .mat-mdc-form-field-subscript-wrapper {
display: none;
}
.group-users-page .corporate-role-select .mat-mdc-text-field-wrapper {
min-height: 36px !important;
padding: 0 var(--ui-space-2) !important;
border: 1px solid var(--ui-border-light) !important;
border-radius: var(--ui-radius-md) !important;
background: var(--ui-surface-2) !important;
}
.group-users-page .corporate-role-select .mat-mdc-form-field-flex {
padding: 0 !important;
}
.group-users-page .corporate-role-select .mat-mdc-form-field-infix {
min-height: 36px !important;
padding: 7px 0 !important;
}
.group-users-page .corporate-role-select .mat-mdc-select-value {
color: var(--ui-text-primary) !important;
font-size: var(--ui-text-sm) !important;
font-weight: var(--ui-font-medium) !important;
}
.group-users-page .corporate-role-select .mat-mdc-select-arrow {
color: var(--ui-text-muted) !important;
}
.group-users-page__modal {
position: fixed;
top: 50%;
left: 50%;
z-index: var(--z-modal);
width: min(480px, 100vw - 32px);
transform: translate(-50%, -50%);
}
.group-users-page__modal--confirm {
width: min(400px, 100vw - 32px);
z-index: calc(var(--z-modal) + 1);
}
.group-users-page__modal-header--danger {
border-bottom-color: var(--ui-danger-border);
}
.group-users-page__modal-header--danger h3 {
color: var(--ui-danger);
}
.group-users-page__modal-help,
.group-users-page__modal-copy {
margin: 0 0 var(--ui-space-3);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
line-height: 1.5;
}
.group-users-page__modal-help strong {
color: var(--ui-warning);
}
.group-users-page__branch-checkbox-list {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
max-height: 280px;
overflow-y: auto;
}
.group-users-page__branch-checkbox-item {
display: flex;
align-items: center;
gap: var(--ui-space-3);
min-height: 42px;
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-md);
transition: var(--ui-transition-base);
}
.group-users-page__branch-checkbox-item:hover {
background: var(--ui-surface-2);
}
.group-users-page__branch-checkbox-item input[type=checkbox] {
width: 18px;
height: 18px;
flex: 0 0 auto;
accent-color: var(--ui-warning);
}
.group-users-page__branch-checkbox-name {
flex: 1 1 auto;
min-width: 0;
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
}
.group-users-page__primary-radio {
display: inline-flex;
align-items: center;
margin-left: auto;
cursor: pointer;
}
.group-users-page__primary-radio input[type=radio] {
display: none;
}
.group-users-page__primary-radio-label {
padding: 3px var(--ui-space-2);
border-radius: var(--ui-radius-full);
background: var(--ui-surface-1);
border: 1px solid var(--ui-border-light);
color: var(--ui-text-muted);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
line-height: 1.2;
}
.group-users-page__primary-radio-label--active {
background: var(--ui-warning-bg);
border-color: var(--ui-warning-border);
color: var(--ui-warning);
}
.group-users-page__removed-list {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
margin: 0 0 var(--ui-space-3);
}
.group-users-page__removed-item {
padding: 4px 0;
color: var(--ui-danger);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
}
@media (max-width: 768px) {
.group-users-page__filter-select {
width: 100%;
}
.group-users-page__permission-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
POS QUICK CHECKOUT — Page Contract
==========================================================================
Migrated from pos.component.scss. Uses ONLY global design tokens.
All $pos-* variables replaced with var(--ui-*) equivalents.
========================================================================== */
.pos-container {
display: flex;
flex-direction: column;
height: 100vh;
background: var(--ui-surface-base);
color: var(--ui-text-primary);
font-family: var(--ui-font-primary);
overflow: hidden;
}
.pos-container.pos-processing {
pointer-events: none;
opacity: 0.85;
}
.pos-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-3) var(--ui-space-5);
background: var(--ui-surface-2);
border-bottom: 1px solid var(--ui-border);
flex-shrink: 0;
}
.pos-topbar__title {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-bold);
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.pos-topbar__title .pos-logo {
font-size: var(--ui-text-xl);
}
.pos-topbar__shortcuts {
display: flex;
gap: var(--ui-space-2);
}
.pos-topbar__customer {
display: flex;
align-items: center;
gap: var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.pos-topbar__customer mat-icon {
font-size: var(--ui-text-lg);
width: var(--ui-text-lg);
height: var(--ui-text-lg);
}
.shortcut-badge {
font-size: var(--ui-text-xs);
padding: 3px var(--ui-space-2);
border-radius: 4px;
background: var(--ui-info-bg);
color: var(--ui-info);
font-weight: var(--ui-font-medium);
font-family: var(--ui-font-mono);
}
.pos-body {
display: flex;
flex: 1;
overflow: hidden;
}
.pos-products {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--ui-space-4);
overflow-y: auto;
border-right: 1px solid var(--ui-border);
}
.pos-search {
position: relative;
display: flex;
align-items: center;
margin-bottom: var(--ui-space-4);
flex-shrink: 0;
}
.pos-search__icon {
position: absolute;
left: 14px;
color: var(--ui-text-muted);
font-size: var(--ui-text-xl);
}
.pos-search__input {
width: 100%;
padding: 14px 14px 14px 44px;
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
color: var(--ui-text-primary);
font-size: var(--ui-text-md);
outline: none;
transition: border-color var(--ui-transition-fast);
}
.pos-search__input::placeholder {
color: var(--ui-text-muted);
}
.pos-search__input:focus {
border-color: var(--ui-info);
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}
.pos-search__spinner {
position: absolute;
right: 14px;
}
.pos-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--ui-space-3);
overflow-y: auto;
}
.pos-product-card {
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
padding: 14px;
cursor: pointer;
transition: all var(--ui-transition-fast);
}
.pos-product-card:hover {
background: var(--ui-surface-hover);
border-color: var(--ui-info);
transform: translateY(-1px);
box-shadow: var(--ui-shadow-md);
}
.pos-product-card:active {
transform: translateY(0);
}
.pos-product-card__name {
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-base);
margin-bottom: var(--ui-space-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pos-product-card__meta {
display: flex;
gap: var(--ui-space-3);
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
margin-bottom: var(--ui-space-2);
}
.pos-product-card__meta .stock {
color: var(--ui-success);
}
.pos-product-card__price {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-bold);
color: var(--ui-info);
}
.pos-products__empty,
.pos-products__placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--ui-text-muted);
gap: var(--ui-space-2);
}
.pos-products__empty mat-icon,
.pos-products__placeholder mat-icon {
font-size: 48px;
width: 48px;
height: 48px;
opacity: 0.4;
}
.pos-products__empty p,
.pos-products__placeholder p {
margin: 0;
font-size: var(--ui-text-base);
}
.pos-products__empty .hint,
.pos-products__placeholder .hint {
font-size: var(--ui-text-sm);
opacity: 0.5;
}
.pos-cart {
width: 380px;
display: flex;
flex-direction: column;
background: var(--ui-surface-2);
flex-shrink: 0;
}
.pos-cart__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px var(--ui-space-4);
border-bottom: 1px solid var(--ui-border);
}
.pos-cart__header h3 {
margin: 0;
font-size: var(--ui-text-md);
font-weight: var(--ui-font-bold);
}
.pos-cart__count {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
background: var(--ui-info-bg);
padding: 3px var(--ui-space-3);
border-radius: var(--ui-radius-md);
}
.pos-cart__items {
flex: 1;
overflow-y: auto;
padding: var(--ui-space-2) 0;
}
.pos-cart__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
color: var(--ui-text-muted);
gap: var(--ui-space-2);
}
.pos-cart__empty mat-icon {
font-size: 40px;
width: 40px;
height: 40px;
opacity: 0.3;
}
.pos-cart__empty p {
margin: 0;
font-size: var(--ui-text-sm);
}
.pos-cart__footer {
border-top: 1px solid var(--ui-border);
flex-shrink: 0;
}
.pos-cart-item {
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: 1px solid rgba(42, 46, 58, 0.5);
transition: background 0.1s;
}
.pos-cart-item:hover {
background: rgba(255, 255, 255, 0.02);
}
.pos-cart-item__info {
display: flex;
justify-content: space-between;
margin-bottom: var(--ui-space-2);
}
.pos-cart-item__name {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.pos-cart-item__price {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
}
.pos-cart-item__controls {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.pos-cart-item__total {
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-base);
margin-left: auto;
margin-right: var(--ui-space-2);
min-width: 70px;
text-align: right;
}
.qty-btn {
width: 28px;
height: 28px;
border-radius: var(--ui-radius-sm);
border: 1px solid var(--ui-border);
background: var(--ui-surface-base);
color: var(--ui-text-primary);
font-size: var(--ui-text-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.1s;
}
.qty-btn:hover {
background: var(--ui-info);
border-color: var(--ui-info);
}
.qty-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.qty-input {
width: 40px;
height: 28px;
text-align: center;
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
background: var(--ui-surface-base);
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
appearance: textfield;
-moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
.remove-btn {
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ui-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all var(--ui-transition-fast);
}
.remove-btn mat-icon {
font-size: var(--ui-text-md);
width: var(--ui-text-md);
height: var(--ui-text-md);
}
.remove-btn:hover {
background: var(--ui-danger-bg);
color: var(--ui-danger);
}
.pos-totals {
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: 1px solid var(--ui-border);
}
.pos-totals__row {
display: flex;
justify-content: space-between;
font-size: var(--ui-text-sm);
padding: 3px 0;
color: var(--ui-text-muted);
}
.pos-totals__row--grand {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
padding-top: var(--ui-space-2);
margin-top: var(--ui-space-1);
border-top: 1px solid var(--ui-border);
}
.pos-totals__row .discount {
color: var(--ui-success);
}
.pos-payment {
padding: var(--ui-space-3) var(--ui-space-4);
}
.pos-payment__modes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--ui-space-2);
}
.pos-payment__btn {
padding: var(--ui-space-2) var(--ui-space-1);
border-radius: var(--ui-radius-sm);
border: 1px solid var(--ui-border);
background: var(--ui-surface-base);
color: var(--ui-text-muted);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: all var(--ui-transition-fast);
}
.pos-payment__btn:hover {
border-color: var(--ui-info);
color: var(--ui-text-primary);
}
.pos-payment__btn.active {
background: var(--ui-info-bg);
border-color: var(--ui-info);
color: var(--ui-info);
font-weight: var(--ui-font-semibold);
}
.pos-payment__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pos-checkout-btn {
width: calc(100% - 32px);
margin: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4);
padding: 14px;
border: none;
border-radius: var(--ui-radius-sm);
background: linear-gradient(135deg, var(--ui-info), #3a78ee);
color: #fff;
font-size: var(--ui-text-md);
font-weight: var(--ui-font-bold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
transition: all var(--ui-transition-base);
box-shadow: 0 4px 16px rgba(96, 165, 250, 0.25);
}
.pos-checkout-btn mat-icon {
font-size: var(--ui-text-xl);
width: var(--ui-text-xl);
height: var(--ui-text-xl);
}
.pos-checkout-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(96, 165, 250, 0.35);
}
.pos-checkout-btn:active:not(:disabled) {
transform: translateY(0);
}
.pos-checkout-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
:host ::ng-deep .pos-success-snackbar {
background: var(--ui-success) !important;
color: #fff !important;
}
:host ::ng-deep .pos-success-snackbar .mdc-snackbar__label {
color: #fff !important;
}
/* ==========================================================================
FINANCE PAGES — Page-Level UI Contract
==========================================================================
Scoped page styling for Finance module pages.
Uses ONLY design tokens — no hardcoded values.
Margin contract matches global .ui-page:
vertical = var(--ui-space-6) (24px)
horizontal = var(--ui-space-4) (16px)
========================================================================== */
/* ═══ Report Layout ═══ */
.finance-page {
padding: var(--ui-space-6) var(--ui-space-4);
min-height: 100%;
}
/* ═══ Nested Page Reset ═══
Workspace components (ledger-workspace, reports-workspace, etc.) already
wrap everything in .finance-page. Child routes rendered via
also use .finance-page — strip the nested one to avoid double padding. */
.finance-page .ui-tab-content .finance-page {
padding: 0;
min-height: auto;
}
.finance-page__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ui-space-6);
}
.finance-page__title {
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
letter-spacing: -0.01em;
}
.finance-page__subtitle {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
margin-top: var(--ui-space-1);
}
.finance-page__actions {
display: flex;
gap: var(--ui-space-3);
align-items: center;
}
/* ═══ Filter Bar ═══ */
.finance-filter-bar {
display: flex;
gap: var(--ui-space-3);
align-items: center;
padding: var(--ui-space-3) var(--ui-space-4);
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
margin-bottom: var(--ui-space-5);
}
.finance-filter-bar__input {
background: var(--ui-surface-2);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-sm);
color: var(--ui-text-primary);
font-size: var(--ui-text-sm);
padding: var(--ui-space-2) var(--ui-space-3);
outline: none;
transition: border-color var(--ui-transition-fast);
}
.finance-filter-bar__input:focus {
border-color: var(--ui-border-focus);
}
/* ═══ Operations Workspace Header ═══ */
.finance-page--operations {
padding-top: var(--ui-space-4);
}
.finance-page--operations .header-card {
margin-bottom: var(--ui-space-3);
border-radius: var(--ui-radius-lg);
}
.finance-page--operations .header-card__top {
padding: var(--ui-space-4) var(--ui-space-5);
gap: var(--ui-space-4);
}
.finance-page--operations .header-card__title {
font-size: var(--ui-text-2xl);
}
.finance-page--operations .header-card__title-block {
gap: var(--ui-space-1);
}
.finance-page--operations .header-card__stats {
gap: var(--ui-space-2);
}
.finance-page--operations .operations-header-stat {
min-width: 142px;
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-md);
gap: var(--ui-space-1);
}
.finance-page--operations .operations-header-stat .header-stat__value {
min-height: 26px;
justify-content: flex-start;
padding: var(--ui-space-1) var(--ui-space-3);
font-size: var(--ui-text-base);
font-family: var(--ui-font-mono);
}
.finance-page--operations .header-card__bottom {
flex-wrap: wrap;
padding: var(--ui-space-3) var(--ui-space-5);
}
.finance-page--operations .operations-header-controls {
display: flex;
align-items: center;
gap: var(--ui-space-3);
flex-wrap: wrap;
width: 100%;
}
.finance-page--operations .operations-fy-trigger__chevron {
width: 14px;
height: 14px;
font-size: 14px;
opacity: 0.5;
}
.finance-page--operations .operations-import-trigger {
margin-left: auto;
cursor: pointer;
height: 34px;
padding: 0 var(--ui-space-4);
}
.finance-page--operations .ui-tab-content {
display: block;
}
@media (max-width: 768px) {
.finance-page--operations .operations-import-trigger {
width: 100%;
justify-content: center;
margin-left: 0;
}
}
/* ═══ Glass Panel ═══ */
.finance-panel {
background: var(--ui-glass-light);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-5);
backdrop-filter: var(--ui-blur-sm);
}
.finance-panel--compact {
padding: var(--ui-space-4);
}
/* Panel sub-elements — label + monetary amount */
.finance-panel__label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.finance-panel__amount {
margin: var(--ui-space-1) 0 0;
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
font-family: var(--ui-font-mono);
color: var(--ui-text-primary);
}
/* ═══ Report Sections (P&L, Balance Sheet) ═══ */
.finance-report {
display: flex;
flex-direction: column;
gap: var(--ui-space-4);
}
.finance-report__section {
background: var(--ui-surface-1);
border: 1px solid var(--ui-border);
border-radius: var(--ui-radius-md);
overflow: hidden;
}
.finance-report__section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-3) var(--ui-space-4);
background: var(--ui-surface-2);
border-bottom: 1px solid var(--ui-border);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.finance-report__section-total {
font-family: var(--ui-font-mono);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-bold);
color: var(--ui-text-primary);
}
.finance-report__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-4);
border-bottom: 1px solid var(--ui-table-row-border);
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
transition: background var(--ui-transition-fast);
}
.finance-report__row:last-child {
border-bottom: none;
}
.finance-report__row:hover {
background: var(--ui-surface-hover);
}
.finance-report__row--total {
background: var(--ui-surface-2);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
border-top: 1px solid var(--ui-border);
}
.finance-report__row-label {
flex: 1;
}
.finance-report__row-value {
font-family: var(--ui-font-mono);
font-size: var(--ui-text-sm);
min-width: 120px;
text-align: right;
}
.finance-report__row-value--debit {
color: var(--ui-danger);
}
.finance-report__row-value--credit {
color: var(--ui-success);
}
/* ═══ Balance Sheet Two-Column ═══ */
.finance-balance-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ui-space-4);
margin-bottom: var(--ui-space-4);
}
@media (max-width: 768px) {
.finance-balance-grid {
grid-template-columns: 1fr;
}
}
.finance-balance-check {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
margin-top: var(--ui-space-4);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
}
.finance-balance-check--pass {
background: var(--ui-success-bg);
border: 1px solid var(--ui-success-border);
color: var(--ui-success);
}
.finance-balance-check--fail {
background: var(--ui-danger-bg);
border: 1px solid var(--ui-danger-border);
color: var(--ui-danger);
}
/* ═══ COA Tree ═══ */
.coa-tree {
padding: 0;
}
.coa-tree__node {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-sm);
cursor: pointer;
transition: background var(--ui-transition-fast);
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.coa-tree__node:hover {
background: var(--ui-surface-hover);
}
.coa-tree__node--active {
background: var(--ui-surface-active);
color: var(--ui-text-primary);
}
.coa-tree__expand {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--ui-text-muted);
transition: transform var(--ui-transition-fast);
}
.coa-tree__expand--open {
transform: rotate(90deg);
}
.coa-tree__children {
padding-left: var(--ui-space-5);
}
.coa-tree__code {
font-family: var(--ui-font-mono);
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
min-width: 60px;
}
.coa-tree__name {
flex: 1;
}
.coa-tree__type {
font-size: var(--ui-text-xs);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.coa-tree__actions {
display: flex;
gap: var(--ui-space-1);
opacity: 0;
transition: opacity var(--ui-transition-fast);
}
.coa-tree__node:hover .coa-tree__actions {
opacity: 1;
}
/* ═══ Integrity Status ═══ */
.finance-integrity {
text-align: center;
padding: var(--ui-space-10);
}
.finance-integrity__icon {
font-size: 64px;
margin-bottom: var(--ui-space-4);
}
.finance-integrity__icon--pass {
color: var(--ui-success);
}
.finance-integrity__icon--fail {
color: var(--ui-danger);
}
.finance-integrity__icon--pending {
color: var(--ui-text-muted);
}
.finance-integrity__status {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
margin-bottom: var(--ui-space-2);
}
.finance-integrity__meta {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
margin-bottom: var(--ui-space-6);
}
/* ═══ Placeholder Page (Coming Soon) ═══ */
.finance-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
}
.finance-placeholder__icon {
font-size: 48px;
color: var(--ui-text-subtle);
margin-bottom: var(--ui-space-4);
}
.finance-placeholder__title {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
margin-bottom: var(--ui-space-2);
}
.finance-placeholder__description {
font-size: var(--ui-text-sm);
color: var(--ui-text-muted);
max-width: 420px;
}
/* ═══ Journal Modal ═══ */
.journal-modal__lines-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-surface-2);
border-radius: var(--ui-radius-sm);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--ui-space-2);
}
.journal-modal__line {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--ui-table-row-border);
font-size: var(--ui-text-sm);
color: var(--ui-text-secondary);
}
.journal-modal__line:last-child {
border-bottom: none;
}
.journal-modal__total {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
background: var(--ui-surface-2);
border-radius: var(--ui-radius-sm);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-text-primary);
margin-top: var(--ui-space-2);
}
/* ═══ Finance Dashboard ═══ */
.fdash {
display: flex;
flex-direction: column;
gap: var(--ui-space-5);
}
.finance-page--dashboard .header-card__bottom {
flex-wrap: wrap;
}
.finance-page--dashboard .finance-dashboard-header__controls {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
}
/* ═══ FY Pill Select — transparent