/**
 * theme.css — Wspólny motyw wizualny panelu PBG Analytics (WebSonar / MediaPanel style).
 *
 * Wpinany przez src/Views/theme_head.php NA KOŃCU <head> każdej strony panelu,
 * czyli PO inline <style> strony. Dzięki temu (równa specyficzność + późniejsza
 * kolejność źródła) nadpisuje współdzielone tokeny każdej strony i przemapowuje
 * dotychczasowy motyw (indygo/Outfit) na paletę coral + fonty Sora/DM Sans —
 * bez przepisywania inline-CSS poszczególnych stron.
 *
 * Strony używają spójnych nazw tokenów (--accent, --bg, --surface, --text,
 * --text-2/-3, --border, --shadow...). Redefiniujemy tylko tokeny kolor/cień/font;
 * tokeny układu (--r, --max-w) zostają z definicji strony.
 */

:root {
    /* === Paleta źródłowa wg dokumentacji === */
    --coral-50:  #fff5f3;
    --coral-100: #ffe4df;
    --coral-200: #ffccc4;
    --coral-300: #ffa899;
    --coral-400: #ff7a5c;
    --coral-500: #ff5733;
    --coral-600: #ed3d19;
    --coral-700: #c83010;

    --gray-50:  #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #424242;
    --gray-800: #2d2d2d;
    --gray-900: #1a1a1a;

    /* === Remap tokenów aplikacji na nową paletę === */
    --accent:       #ff5733;            /* coral-500 — główny akcent */
    --accent-hover: #ed3d19;            /* coral-600 */
    --accent-light: #fff5f3;            /* coral-50  */
    --accent-ring:  rgba(255, 87, 51, 0.14);

    --bg:          #f5f5f5;             /* gray-100 — subtelne wstawki/tła */
    --surface:     #ffffff;
    --border:      #eeeeee;            /* gray-200 */
    --border-soft: #f5f5f5;           /* gray-100 */

    --text:    #1a1a1a;               /* gray-900 — tekst główny/nagłówki */
    --text-2:  #424242;               /* gray-700 — tekst drugorzędny */
    --text-3:  #9e9e9e;               /* gray-500 — tekst pomocniczy */

    --danger:  #dc2626;
    --success: #16a34a;
    /* --warn zostaje z definicji strony (amber) */

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);

    /* Tokeny WebSonar do komponentów .ws-* */
    --ws-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

/* === Fonty globalnie ===
   Tekst → DM Sans, nagłówki → Sora. Reguły późniejsze od inline <style> stron,
   więc wygrywają dla body i h1–h6. Mono ('JetBrains Mono') zostaje nietknięte. */
body {
    font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
    color: var(--text);
    /* Tło: dwa subtelne radialne akcenty coral w rogach + diagonalny gradient szarości.
       Realizowane jako wielowarstwowe tło body (zamiast ::before) — brak ryzyka
       nakładania na treść / problemów ze stackingiem. */
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 87, 51, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 122, 92, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.02em;
}

/* === Spójne coralowe focus-ringi na polach formularzy === */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--coral-400) !important;
    box-shadow: 0 0 0 3px rgba(255, 87, 51, 0.10) !important;
}

input[type="date"]:focus {
    box-shadow: 0 0 0 3px rgba(255, 87, 51, 0.08) !important;
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Liczby z równą szerokością cyfr (statystyki, tabele) */
.number-large, .mono, .stat-number { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Komponenty wielokrotnego użytku z dokumentacji — namespace .ws-*.
   Prefiks chroni przed kolizjami z istniejącymi .card/.badge/.data-table stron.
   Do stosowania w nowym markupie.
   ========================================================================= */

.ws-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

@keyframes ws-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ws-animate-fade-in { animation: ws-fadeInUp 0.6s ease-out forwards; }
.ws-animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.ws-animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.ws-animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
.ws-animate-delay-4 { animation-delay: 0.4s; opacity: 0; }

@keyframes ws-pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.2); opacity: 0.7; }
}
.ws-partial-data-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px;
    background: var(--coral-50); color: var(--coral-700);
    font-size: 12px; font-weight: 500;
    border-radius: 6px; border: 1px solid var(--coral-200);
}
.ws-partial-data-badge .ws-pulse-dot {
    width: 6px; height: 6px; background: var(--coral-500);
    border-radius: 50%; animation: ws-pulse-dot 1.5s ease-in-out infinite;
}

.ws-accent-line {
    width: 40px; height: 3px;
    background: linear-gradient(90deg, var(--coral-500), var(--coral-300));
    border-radius: 2px; margin-bottom: 12px;
}

.ws-source-pill {
    padding: 10px 20px; border-radius: 12px;
    border: 2px solid var(--gray-200); background: #fff;
    color: var(--gray-600); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
    font-family: 'Sora', sans-serif;
}
.ws-source-pill:hover { border-color: var(--coral-300); background: var(--coral-50); color: var(--coral-600); }
.ws-source-pill.active {
    border-color: var(--coral-500); background: var(--coral-500); color: #fff;
    box-shadow: 0 4px 12px rgba(255, 87, 51, 0.25);
}

.ws-metric-toggle {
    padding: 8px 16px; border-radius: 8px;
    border: 2px solid var(--gray-200); background: #fff;
    color: var(--gray-600); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    font-family: 'Sora', sans-serif;
}
.ws-metric-toggle:hover { border-color: var(--coral-300); background: var(--coral-50); color: var(--coral-600); }
.ws-metric-toggle.active {
    border-color: var(--coral-500); background: var(--coral-500); color: #fff;
    box-shadow: 0 4px 12px rgba(255, 87, 51, 0.25);
}

.ws-stat-number {
    font-family: 'Sora', sans-serif; font-size: 2.5rem; font-weight: 700;
    color: var(--gray-900); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.ws-stat-label {
    font-size: 0.875rem; color: var(--gray-500); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.ws-search-input {
    width: 100%; padding: 14px 48px 14px 20px;
    border: 2px solid var(--gray-200); border-radius: 12px;
    font-size: 15px; transition: all 0.2s ease; background: #fff;
}
.ws-search-input:focus {
    outline: none; border-color: var(--coral-400);
    box-shadow: 0 0 0 4px rgba(255, 87, 51, 0.08);
}

.ws-data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ws-data-table thead th {
    background: var(--gray-50); padding: 16px; text-align: left;
    font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 2px solid var(--gray-200);
}
.ws-data-table tbody tr { transition: background 0.15s ease; }
.ws-data-table tbody tr:hover { background: var(--gray-50); }
.ws-data-table tbody td {
    padding: 16px; border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700); font-size: 14px;
}

.ws-badge {
    display: inline-block; padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.ws-badge-audited { background: rgba(16, 185, 129, 0.1); color: rgb(5, 150, 105); }
.ws-badge-unaudited { background: var(--gray-100); color: var(--gray-500); }

.ws-spinner {
    border: 3px solid var(--gray-200); border-top: 3px solid var(--coral-500);
    border-radius: 50%; width: 40px; height: 40px;
    animation: ws-spin 0.8s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }
