:root {
--kamar-navy: #103547;
--kamar-dark-red: #962020;
--kamar-pastel-yellow: #F6B767;
--kamar-pastel-gray: #75795E;
--kamar-red: #D40513;
--kamar-green: #34a853;
--kamar-green-legacy: #059239;
--kamar-light-blue: #f4f7ff;
--kamar-light-gray: #cccccc;
--kamar-success-bg: #e6f4ea;
--kamar-success-border: #34a853;
--kamar-success-text: #1e5631;
--kamar-warning-bg: #fff8e6;
--kamar-warning-border: #f9ab00;
--kamar-warning-text: #8a6914;
--kamar-info-bg: #e8f4fd;
--kamar-info-border: #4285f4;
--kamar-info-text: #1a56db;
--kamar-danger-bg: #fce8e8;
--kamar-danger-border: #ea4335;
--kamar-danger-text: #991b1b;
--kamar-neutral-bg: #f5f5f5;
--kamar-neutral-border: #9e9e9e;
--kamar-neutral-text: #616161;
--kamar-special-bg: #f3e8fd;
--kamar-special-border: #9334e6;
--kamar-special-text: #6b21a8;
--status-processing: #e8f4fd;
--status-on-hold: #fff8e6;
--status-failed: #fce8e8;
--status-refunded: #f5f5f5;
--status-cancelled: #f5f5f5;
--status-completed: #e6f4ea;
--kpi-trend-positive: #34a853;
--kpi-trend-negative: #ea4335;
--kpi-trend-neutral: #75795E;
--kpi-warning: #f9ab00;
--finance-transfer-bg: #e8f4fd;
--finance-transfer-text: #103547;
--finance-frozen-bg: #103547;
--finance-frozen-text: #ffffff;
--finance-refund-leker-bg: #f3e8fd;
--finance-refund-wzy-bg: #6b4d8a;
--finance-payout-today-bg: #e6f4ea;
--finance-payout-tomorrow-bg: #34a853;
--card-bg-light: #ffffff;
--card-bg-gradient-start: #f8f9fa;
--card-bg-gradient-end: #e9ecef;
--card-border: #dee2e6;
--card-shadow: rgba(0, 0, 0, 0.1);
--text-primary: #212529;
--text-secondary: #6c757d;
--text-muted: #adb5bd;
--text-white: #ffffff;
--text-dark: #103547;
}
.text-kamar-navy { color: var(--kamar-navy) !important; }
.text-kamar-red { color: var(--kamar-red) !important; }
.text-kamar-green { color: var(--kamar-green) !important; }
.text-kamar-dark-red { color: var(--kamar-dark-red) !important; }
.bg-kamar-navy { background-color: var(--kamar-navy) !important; }
.bg-kamar-red { background-color: var(--kamar-red) !important; }
.bg-kamar-green { background-color: var(--kamar-green) !important; }
.bg-kamar-light-blue { background-color: var(--kamar-light-blue) !important; }
.trend-positive { color: var(--kpi-trend-positive) !important; }
.trend-negative { color: var(--kpi-trend-negative) !important; }
.trend-neutral { color: var(--kpi-trend-neutral) !important; }
.trend-warning { color: var(--kpi-warning) !important; }
.status-bg-processing { background-color: var(--status-processing) !important; }
.status-bg-on-hold { background-color: var(--status-on-hold) !important; }
.status-bg-failed { background-color: var(--status-failed) !important; }
.status-bg-refunded { background-color: var(--status-refunded) !important; }
.status-bg-cancelled { background-color: var(--status-cancelled) !important; }
.status-bg-completed { background-color: var(--status-completed) !important; }
.p-xs { padding: var(--spacing-xs, 4px); }
.p-sm { padding: var(--spacing-sm, 8px); }
.p-md { padding: var(--spacing-md, 16px); }
.p-lg { padding: var(--spacing-lg, 24px); }
.p-xl { padding: var(--spacing-xl, 32px); }
.m-xs { margin: var(--spacing-xs, 4px); }
.m-sm { margin: var(--spacing-sm, 8px); }
.m-md { margin: var(--spacing-md, 16px); }
.m-lg { margin: var(--spacing-lg, 24px); }
.m-xl { margin: var(--spacing-xl, 32px); }
.gap-xs { gap: var(--spacing-xs, 4px); }
.gap-sm { gap: var(--spacing-sm, 8px); }
.gap-md { gap: var(--spacing-md, 16px); }
.gap-lg { gap: var(--spacing-lg, 24px); }
.fs-xs { font-size: 0.75rem; }
.fs-sm { font-size: 0.875rem; }
.fs-md { font-size: 1rem; }
.fs-lg { font-size: 1.25rem; }
.fs-xl { font-size: 1.5rem; }
.fs-2xl { font-size: 2rem; }
@media (max-width: 1023px) and (min-width: 705px) {
.fs-lg { font-size: 1.125rem; }
.fs-xl { font-size: 1.25rem; }
.fs-2xl { font-size: 1.5rem; }
.p-lg { padding: var(--spacing-md, 16px); }
.p-xl { padding: var(--spacing-lg, 24px); }
.m-lg { margin: var(--spacing-md, 16px); }
.m-xl { margin: var(--spacing-lg, 24px); }
}
@media (max-width: 704px) {
.fs-sm { font-size: 0.75rem; }
.fs-md { font-size: 0.875rem; }
.fs-lg { font-size: 1rem; }
.fs-xl { font-size: 1.125rem; }
.fs-2xl { font-size: 1.25rem; }
.p-md { padding: var(--spacing-sm, 8px); }
.p-lg { padding: var(--spacing-md, 16px); }
.p-xl { padding: var(--spacing-md, 16px); }
.m-md { margin: var(--spacing-sm, 8px); }
.m-lg { margin: var(--spacing-md, 16px); }
.m-xl { margin: var(--spacing-md, 16px); }
.gap-lg { gap: var(--spacing-md, 16px); }
}
.kpi-card {
background: var(--card-bg-light, #ffffff);
border: 1px solid var(--card-border, #dee2e6);
border-radius: 8px;
padding: var(--spacing-md, 16px);
box-shadow: 0 1px 3px var(--card-shadow, rgba(0, 0, 0, 0.1));
transition: box-shadow 0.2s ease;
}
.kpi-card:hover {
box-shadow: 0 4px 12px var(--card-shadow, rgba(0, 0, 0, 0.15));
}
.kpi-card__value {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary, #212529);
}
.kpi-card__label {
font-size: 0.875rem;
color: var(--text-secondary, #6c757d);
margin-top: var(--spacing-xs, 4px);
}
.kpi-card__trend {
font-size: 0.75rem;
margin-top: var(--spacing-sm, 8px);
}
@media (max-width: 1023px) and (min-width: 705px) {
.kpi-card {
padding: var(--spacing-sm, 8px);
}
.kpi-card__value {
font-size: 1.5rem;
}
.kpi-card__label {
font-size: 0.8rem;
}
}
@media (max-width: 704px) {
.kpi-card {
padding: var(--spacing-sm, 8px);
border-radius: 6px;
}
.kpi-card__value {
font-size: 1.25rem;
}
.kpi-card__label {
font-size: 0.75rem;
}
.kpi-card__trend {
font-size: 0.7rem;
}
}
.finance-card {
border-radius: 6px;
padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
text-align: center;
}
.finance-card--transfer {
background-color: var(--finance-transfer-bg, #e3f2fd);
color: var(--finance-transfer-text, #103547);
}
.finance-card--frozen {
background-color: var(--finance-frozen-bg, #103547);
color: var(--finance-frozen-text, #ffffff);
}
.finance-card--refund-leker {
background-color: var(--finance-refund-leker-bg, #e8d5f0);
}
.finance-card--refund-wzy {
background-color: var(--finance-refund-wzy-bg, #6b4d8a);
color: var(--text-white, #ffffff);
}
.finance-card--payout-today {
background-color: var(--finance-payout-today-bg, #d4edda);
}
.finance-card--payout-tomorrow {
background-color: var(--finance-payout-tomorrow-bg, #059239);
color: var(--text-white, #ffffff);
}
@media (max-width: 704px) {
.finance-card {
padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
font-size: 0.9em;
}
}