/**
 * KAMAR Brand Colors
 * Globalny plik z kolorami brandowymi i statusami zamówień
 * 
 * Użycie: var(--kamar-nazwa-koloru)
 */

:root {
    /* ===== KAMAR Brand Colors ===== */
    --kamar-navy: #103547;           /* ciemny granat */
    --kamar-dark-red: #962020;       /* ciemny czerwony */
    --kamar-pastel-yellow: #F6B767;  /* pastel żółty */
    --kamar-pastel-gray: #75795E;    /* pastel szary */
    --kamar-red: #D40513;            /* czerwony */
    --kamar-green: #34a853;          /* zielony brandowy (unified) */
    --kamar-green-legacy: #059239;   /* stary zielony - do usunięcia */
    --kamar-light-blue: #f4f7ff;     /* bladoniebieski */
    --kamar-light-gray: #cccccc;     /* bladoszary */
    
    /* ===== Unified Pastel Component Colors ===== */
    /* Green (success/completed) */
    --kamar-success-bg: #e6f4ea;
    --kamar-success-border: #34a853;
    --kamar-success-text: #1e5631;
    /* Yellow (warning/pending) */
    --kamar-warning-bg: #fff8e6;
    --kamar-warning-border: #f9ab00;
    --kamar-warning-text: #8a6914;
    /* Blue (info) */
    --kamar-info-bg: #e8f4fd;
    --kamar-info-border: #4285f4;
    --kamar-info-text: #1a56db;
    /* Red (error/danger) */
    --kamar-danger-bg: #fce8e8;
    --kamar-danger-border: #ea4335;
    --kamar-danger-text: #991b1b;
    /* Gray (neutral) */
    --kamar-neutral-bg: #f5f5f5;
    --kamar-neutral-border: #9e9e9e;
    --kamar-neutral-text: #616161;
    /* Purple (special) */
    --kamar-special-bg: #f3e8fd;
    --kamar-special-border: #9334e6;
    --kamar-special-text: #6b21a8;
    
    /* ===== Order Status Colors ===== */
    --status-processing: #e8f4fd;    /* przetwarzane - unified blue */
    --status-on-hold: #fff8e6;       /* wstrzymane - unified yellow */
    --status-failed: #fce8e8;        /* nieudane - unified red */
    --status-refunded: #f5f5f5;      /* zwrócone - unified gray */
    --status-cancelled: #f5f5f5;     /* anulowane - unified gray */
    --status-completed: #e6f4ea;     /* zakończone - unified green */
    
    /* ===== KPI Trend Colors ===== */
    --kpi-trend-positive: #34a853;   /* zielony brandowy */
    --kpi-trend-negative: #ea4335;   /* czerwony */
    --kpi-trend-neutral: #75795E;    /* pastel szary */
    --kpi-warning: #f9ab00;          /* żółty/pomarańczowy */
    
    /* ===== Financial Section Colors ===== */
    --finance-transfer-bg: #e8f4fd;       /* przelew - unified blue */
    --finance-transfer-text: #103547;     /* przelew - ciemny tekst (navy) */
    --finance-frozen-bg: #103547;         /* zamrożone - ciemny niebieski (navy) */
    --finance-frozen-text: #ffffff;       /* zamrożone - biały tekst */
    --finance-refund-leker-bg: #f3e8fd;   /* zwrot LEKER - unified purple */
    --finance-refund-wzy-bg: #6b4d8a;     /* zwrot WZY - ciemny fiolet */
    --finance-payout-today-bg: #e6f4ea;   /* wypłata dziś - unified green bg */
    --finance-payout-tomorrow-bg: #34a853; /* wypłata jutro - unified green */
    
    /* ===== Dashboard Card Colors ===== */
    --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 Colors ===== */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-white: #ffffff;
    --text-dark: #103547;
}

/* ===== Helper Classes ===== */

/* Brand colors */
.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; }

/* KPI trend colors */
.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; }

/* Order status backgrounds */
.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; }

/* ===============================================
   RESPONSYWNOŚĆ - BRAND UTILITIES
   Breakpointy: Desktop (>=1024px), Tablet (768-1023px), Mobile (<768px)
   =============================================== */

/* ----- Responsive Spacing Utilities ----- */
.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); }

/* ----- Responsive Font Size Utilities ----- */
.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; }

/* ---- TABLET STYLES (768px - 1023px) ---- */
@media (max-width: 1023px) and (min-width: 768px) {
    
    /* Slightly reduced font sizes */
    .fs-lg { font-size: 1.125rem; }
    .fs-xl { font-size: 1.25rem; }
    .fs-2xl { font-size: 1.5rem; }
    
    /* Slightly reduced spacing */
    .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); }
}

/* ---- MOBILE STYLES (<768px) ---- */
@media (max-width: 767px) {
    
    /* Reduced font sizes for mobile */
    .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; }
    
    /* Reduced spacing for mobile */
    .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 Dashboard Cards - Responsive ----- */
.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: 768px) {
    .kpi-card {
        padding: var(--spacing-sm, 8px);
    }
    
    .kpi-card__value {
        font-size: 1.5rem;
    }
    
    .kpi-card__label {
        font-size: 0.8rem;
    }
}

@media (max-width: 767px) {
    .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;
    }
}

/* ----- Financial Cards - Responsive ----- */
.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: 767px) {
    .finance-card {
        padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
        font-size: 0.9em;
    }
}