/* components.css - Karty, Przyciski, Formularze, Tabele */

/*
    WYMIARY BIORA SIE ZE ZMIENNYCH W site.css (:root, sekcja "SKALA INTERFEJSU").
    Nie wpisuj tu nowych wartosci na sztywno - inaczej za pol roku polowa panelu
    bedzie w jednej skali, a polowa w drugiej. Promienie zaokraglen zostaja bez
    zmian, bo to element stylu, a nie rozmiaru.
*/

/* ---- CARDS ---- */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--karta-pad);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

    .card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: var(--primary-gradient);
        opacity: 0;
        transition: opacity var(--transition-fast);
        z-index: -1;
    }

    .card:hover {
        transform: translateY(-10px) scale(1.02);
        border-color: var(--pink-medium);
        box-shadow: var(--shadow-card), 0 0 60px rgba(240, 147, 251, 0.3);
    }

        .card:hover::before {
            opacity: 0.05;
        }

    .card .icon {
        width: 42px; /* bylo 60px */
        height: 42px;
        background: var(--secondary-gradient);
        border-radius: var(--border-radius-small);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        color: var(--text-primary);
        margin-bottom: 0.75rem;
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        transition: all var(--transition-fast);
    }

    .card:hover .icon {
        transform: rotate(10deg) scale(1.1);
        box-shadow: 0 15px 30px rgba(102, 126, 234, 0.5);
    }

    .card h3 {
        font-size: 1.02rem;
        margin-bottom: 0.3rem;
    }

    .card .value {
        font-size: 1.6rem; /* bylo 2.5rem */
        font-weight: 700;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.25rem;
    }

    .card .description {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

/* ---- CONTENT BOX ---- */
.content-box {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--karta-pad); /* bylo 2.5rem */
    position: relative;
    overflow: hidden;
}

    .content-box.full-width {
        grid-column: 1 / -1;
    }

    /* Naglowek sekcji w karcie: 1.5rem -> 1.15rem, odstep pod nim 2rem -> 0.85rem.
       Kreska pod naglowkiem zostaje (to znak rozpoznawczy panelu), tylko krotsza. */
    .content-box h2 {
        font-size: 1.15rem;
        margin-bottom: 0.85rem;
        position: relative;
        padding-bottom: 0.5rem;
    }

        .content-box h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 64px;
            height: 2px;
            background: var(--primary-gradient);
            border-radius: 2px;
            transition: width var(--transition-fast);
        }

    .content-box:hover h2::after {
        width: 96px;
    }

/* ---- BUTTONS ---- */
/* Uwaga: mobile.css ma wlasna, globalna regule .btn i laduje sie pozniej niz ten
   plik. Ostateczne wymiary przyciskow pilnuje sekcja 11 w crm.css (laduje sie
   na samym koncu) - tutaj trzymamy te same wartosci, zeby plik byl spojny. */
.btn {
    padding: var(--kontrolka-pad-y) 18px;
    min-height: var(--przycisk-wys);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: inline-block;
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--text-primary);
    box-shadow: 0 10px 20px rgba(240, 147, 251, 0.3);
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(240, 147, 251, 0.5);
    }

.btn-secondary {
    background: transparent;
    color: var(--pink-medium);
    border: 2px solid var(--pink-medium);
}

    .btn-secondary:hover {
        background: var(--primary-gradient);
        border-color: transparent;
        color: var(--text-primary);
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(240, 147, 251, 0.3);
    }

/* Przycisk glowny akcji: bylo 1rem/2rem + 1.1rem pisma = ~56 px wysokosci. */
.btn-lg {
    padding: 11px 22px;
    min-height: var(--przycisk-wys-duzy);
    font-size: 0.95rem;
}

/* ---- FORMS ---- */
.form-group {
    margin-bottom: var(--pole-odstep);
}

    /* Etykieta pola: bez wersalikow i bez rozstrzelenia - patrz komentarz
       przy typografii w site.css. Zostaje wylacznie zmniejszona. */
    .form-group label {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: none;
        font-size: var(--etykieta-font);
        letter-spacing: 0;
    }

.form-control {
    width: 100%;
    padding: var(--kontrolka-pad-y) var(--kontrolka-pad-x);
    min-height: var(--kontrolka-wys);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    color: var(--text-primary);
    font-size: var(--kontrolka-font);
    transition: all var(--transition-fast);
}

    .form-control:focus {
        outline: none;
        border-color: var(--pink-medium);
        box-shadow: 0 0 0 3px rgba(255, 107, 149, 0.1), 0 0 20px rgba(240, 147, 251, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.08);
    }

    .form-control::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
    }

/* Form container for better mobile layout */
.form-container {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--karta-pad);
    margin: 0 auto;
    max-width: 800px;
}

/*
    Naglowek karty formularza (logowanie, reset hasla).
    PRZED: ikona 3rem (~77 px z .ikona--duza) + h2 1.8rem WERSALIKAMI lamiacy sie
    na dwie linijki + podtytul + kreska + 2rem odstepu = ~230 px zanim pojawilo sie
    pierwsze pole. PO: ikona 1.5rem, h2 w jednej linii, kreska zostaje, ale cala
    glowka miesci sie w ~90 px.
*/
.form-header {
    text-align: center;
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--glass-border);
}

    /* h1 w karcie logowania: 1.3rem (~21 px przy 16 px korzenia, ~17 px na
       laptopie) - mniej niz wymagane 24 px i mieszczace sie w JEDNEJ linii
       przy karcie 400 px. Mniejsze rozstrzelenie, zeby napis sie nie lamal. */
    .form-header h1,
    .form-header h2 {
        font-size: 1.3rem;
        letter-spacing: 0.5px;
        margin-bottom: 0.2rem;
    }

    .form-header p {
        margin-bottom: 0;
        font-size: 0.85rem;
    }

    .form-header .form-icon {
        font-size: 1.5rem; /* bylo 3rem */
        margin-bottom: 0.25rem;
        line-height: 1;
        color: var(--pink-medium);
    }

/* Form sections */
.form-section {
    margin-bottom: var(--sekcja-odstep);
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .form-section-title i {
        color: var(--pink-medium);
    }

/* Form grid for multiple columns */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 var(--pole-odstep);
}

/* Select elements */
.form-select {
    width: 100%;
    padding: var(--kontrolka-pad-y) var(--kontrolka-pad-x);
    min-height: var(--kontrolka-wys);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    color: var(--text-primary);
    font-size: var(--kontrolka-font);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .form-select:focus {
        outline: none;
        border-color: var(--pink-medium);
        box-shadow: 0 0 20px rgba(240, 147, 251, 0.3);
    }

/* Textarea */
.form-textarea {
    width: 100%;
    min-height: 88px; /* bylo 120px */
    padding: var(--kontrolka-pad-y) var(--kontrolka-pad-x);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small);
    color: var(--text-primary);
    font-size: var(--kontrolka-font);
    resize: vertical;
    transition: all var(--transition-fast);
}

/* Form actions */
.form-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--glass-border);
}

/* Input groups */
.input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-group-text {
    padding: var(--kontrolka-pad-y) var(--kontrolka-pad-x);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.input-group .form-control {
    border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
    border-left: none;
}

/* Form validation */
.form-control.is-invalid {
    border-color: #e74c3c;
}

.form-control.is-valid {
    border-color: #50E3C2;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #e74c3c;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Custom checkbox */
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 35px;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--text-secondary);
}

    .custom-checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
    background-color: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.custom-checkbox:hover .checkmark {
    border-color: var(--pink-medium);
    box-shadow: 0 0 10px rgba(240, 147, 251, 0.3);
}

.custom-checkbox input:checked ~ .checkmark {
    background: var(--primary-gradient);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(240, 147, 251, 0.5);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-label {
    color: var(--text-secondary);
    font-weight: 500;
    margin-left: 10px;
}

/* ---- TABLES ---- */
.table-container {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--primary-gradient);
}

/* Komorki: bylo 1.2rem / 1rem 1.2rem. Przy 20 wierszach na liscie zamowien
   sam padding zjadal ekran, a tresc komorki to najczesciej jedna liczba. */
th {
    padding: var(--komorka-pad-y) var(--komorka-pad-x);
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

td {
    padding: var(--komorka-pad-y) var(--komorka-pad-x);
    border-bottom: 1px solid var(--glass-border);
}

tbody tr {
    transition: all var(--transition-fast);
}

    tbody tr:hover {
        background: rgba(240, 147, 251, 0.05);
    }

/* ---- MODALS ---- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 12, 41, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.modal {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: var(--karta-pad);
    max-width: 460px;
    width: 90%;
    transform: scale(0.8) translateY(50px);
    transition: all var(--transition-fast);
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
}

/* ---- PROGRESS BARS ---- */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--glass-bg);
    border-radius: 50px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 50px;
    position: relative;
    transition: width 1s ease-out;
}

    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: progress-shine 2s linear infinite;
    }

/* ---- TOOLTIPS ---- */
.tooltip {
    position: relative;
    display: inline-block;
}

    .tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        background: var(--bg-primary);
        color: var(--text-primary);
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius-small);
        font-size: 0.85rem;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-fast);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        z-index: 100;
    }

    .tooltip:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1);
    }

/* ---- ALERTS ---- */
.alert {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    border-radius: var(--border-radius-small);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.7rem;
}

.text-danger {
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}