6775565e01
Implemented by Ralph autonomous loop. Iteration: 11 Co-Authored-By: Claude <noreply@anthropic.com>
504 lines
10 KiB
CSS
504 lines
10 KiB
CSS
/* Stats Components - ROA2WEB Dashboard */
|
|
|
|
/* Stats Grid Layout */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--space-lg);
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
/* Stats Cards */
|
|
.stats-card {
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--card-radius);
|
|
padding: var(--space-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-border-dark);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Stats Card Header */
|
|
.stats-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
margin-bottom: var(--space-md);
|
|
padding-bottom: var(--space-sm);
|
|
border-bottom: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
.stats-card-header i {
|
|
font-size: var(--text-xl);
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
.stats-card-header h3 {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--color-text);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Stats Details */
|
|
.stats-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.stat-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--text-sm);
|
|
padding: var(--space-xs) 0;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.stat-row span:first-child {
|
|
color: var(--color-text-secondary);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.stat-row span:last-child {
|
|
color: var(--color-text);
|
|
font-weight: var(--font-medium);
|
|
text-align: right;
|
|
}
|
|
|
|
.stat-highlight {
|
|
background: var(--color-bg-secondary);
|
|
padding: var(--space-sm);
|
|
border-radius: var(--radius-sm);
|
|
font-weight: var(--font-semibold);
|
|
margin: var(--space-sm) 0;
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
|
|
.stat-warning {
|
|
color: var(--color-error);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.stat-warning span:first-child {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.stat-success {
|
|
color: var(--color-success);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.stat-success span:first-child {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
/* Treasury Specific Styling */
|
|
.treasury-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.treasury-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.treasury-section-title {
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--color-text);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: var(--space-xs);
|
|
padding-bottom: var(--space-xs);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.account-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--text-xs);
|
|
padding: var(--space-xs) 0;
|
|
}
|
|
|
|
.account-name {
|
|
color: var(--color-text-secondary);
|
|
font-weight: var(--font-medium);
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.account-balance {
|
|
color: var(--color-text);
|
|
font-weight: var(--font-semibold);
|
|
flex-shrink: 0;
|
|
margin-left: var(--space-sm);
|
|
}
|
|
|
|
.treasury-totals {
|
|
margin-top: var(--space-sm);
|
|
padding-top: var(--space-sm);
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-bg-muted);
|
|
margin-left: calc(-1 * var(--space-lg));
|
|
margin-right: calc(-1 * var(--space-lg));
|
|
margin-bottom: calc(-1 * var(--space-lg));
|
|
padding-left: var(--space-lg);
|
|
padding-right: var(--space-lg);
|
|
padding-bottom: var(--space-lg);
|
|
}
|
|
|
|
.total-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--text-sm);
|
|
padding: var(--space-xs) 0;
|
|
color: var(--color-text);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
/* KPI Large Display */
|
|
.kpi-large-card {
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--card-radius);
|
|
padding: var(--space-xl);
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.kpi-large-card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.kpi-large-value {
|
|
font-size: var(--text-4xl);
|
|
font-weight: var(--font-bold);
|
|
color: var(--color-text);
|
|
line-height: var(--leading-tight);
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
.kpi-large-label {
|
|
font-size: var(--text-base);
|
|
font-weight: var(--font-medium);
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.kpi-large-change {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-xs);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-medium);
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.kpi-large-change.positive {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.kpi-large-change.negative {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
/* Mini Stats for V2 Dashboard */
|
|
.mini-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.mini-stat-card {
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-sm);
|
|
text-align: center;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mini-stat-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-primary);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.mini-stat-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-bottom: var(--space-xs);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.mini-stat-value {
|
|
font-size: var(--text-base);
|
|
font-weight: var(--font-bold);
|
|
line-height: var(--leading-tight);
|
|
color: var(--color-text);
|
|
margin-bottom: var(--space-xs);
|
|
}
|
|
|
|
.mini-stat-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--color-text-secondary);
|
|
line-height: var(--leading-tight);
|
|
}
|
|
|
|
/* Heat Map Colors for Mini Cards */
|
|
.mini-stat-card.heat-low {
|
|
background: var(--green-50);
|
|
border-color: var(--color-success);
|
|
}
|
|
|
|
.mini-stat-card.heat-low .mini-stat-value {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.mini-stat-card.heat-medium {
|
|
background: var(--yellow-50);
|
|
border-color: var(--color-warning);
|
|
}
|
|
|
|
.mini-stat-card.heat-medium .mini-stat-value {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.mini-stat-card.heat-high {
|
|
background: var(--red-50);
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
.mini-stat-card.heat-high .mini-stat-value {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
/* Quick Actions Grid */
|
|
.quick-actions-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
/* Loading Spinner for Stats */
|
|
.stats-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-xl);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.stats-loading-spinner {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid var(--color-border);
|
|
border-top-color: var(--color-primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
/* Stats Card Variants */
|
|
.stats-card.clients {
|
|
border-left-color: var(--blue-500);
|
|
}
|
|
|
|
.stats-card.clients .stats-card-header i {
|
|
color: var(--blue-500);
|
|
background: var(--blue-50);
|
|
}
|
|
|
|
.stats-card.suppliers {
|
|
border-left-color: var(--yellow-500);
|
|
}
|
|
|
|
.stats-card.suppliers .stats-card-header i {
|
|
color: var(--yellow-600);
|
|
background: var(--yellow-50);
|
|
}
|
|
|
|
.stats-card.treasury {
|
|
border-left-color: var(--green-500);
|
|
}
|
|
|
|
.stats-card.treasury .stats-card-header i {
|
|
color: var(--green-500);
|
|
background: var(--green-50);
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 1024px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.mini-stats-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.stats-card {
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.treasury-totals {
|
|
margin-left: calc(-1 * var(--space-md));
|
|
margin-right: calc(-1 * var(--space-md));
|
|
margin-bottom: calc(-1 * var(--space-md));
|
|
padding-left: var(--space-md);
|
|
padding-right: var(--space-md);
|
|
padding-bottom: var(--space-md);
|
|
}
|
|
|
|
.mini-stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(6, 1fr);
|
|
}
|
|
|
|
.kpi-large-value {
|
|
font-size: var(--text-3xl);
|
|
}
|
|
|
|
.quick-actions-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.mini-stats-grid {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: repeat(12, auto);
|
|
}
|
|
|
|
.mini-stat-card {
|
|
padding: var(--space-xs);
|
|
}
|
|
|
|
.mini-stat-value {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.stats-card-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.stat-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.stat-row span:last-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* ===== Summary Stats Inline ===== */
|
|
/* Compact horizontal stats display for page summaries */
|
|
/* US-610: Reduced margin-bottom from var(--space-md) to var(--space-sm) to eliminate excessive gap between filters and table */
|
|
.summary-stats-inline {
|
|
display: flex;
|
|
gap: var(--space-xl);
|
|
justify-content: flex-end;
|
|
margin-bottom: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
background-color: var(--color-bg-secondary);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.summary-stats-inline .stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.summary-stats-inline .stat-label {
|
|
font-size: var(--text-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.summary-stats-inline .stat-value {
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-semibold);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.summary-stats-inline .stat-value.positive,
|
|
.summary-stats-inline .stat-value.incasari {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.summary-stats-inline .stat-value.negative,
|
|
.summary-stats-inline .stat-value.plati {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
/* Responsive: Stack on mobile */
|
|
@media (max-width: 768px) {
|
|
.summary-stats-inline {
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.stats-card {
|
|
break-inside: avoid;
|
|
box-shadow: none;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.summary-stats-inline {
|
|
border: 1px solid #ccc;
|
|
background: #f5f5f5;
|
|
}
|
|
}
|