/* site.css - Główny plik stylów - DARK FUTURISTIC THEME */

/*
    PRZENIESIONE ZE STAREGO CRM (allmirage-crm), z dwiema zmianami:

    1. Usunięty `@import` czcionek z fonts.googleapis.com.
       Czcionki są hostowane lokalnie — patrz wwwroot/lib/fonts/fonts.css.
       Powód: CSP bez wyjątków na obce domeny, brak trzech dodatkowych połączeń
       przed pierwszą literą i brak wycieku IP odwiedzających do Google.

    2. Usunięte `@import url(...)` pozostałych arkuszy.
       `@import` w CSS ładuje się SZEREGOWO: przeglądarka musi najpierw pobrać
       site.css, dopiero potem dowiaduje się o layout.css, potem o components.css…
       Osiem plików = osiem rund. Arkusze są teraz podpięte wprost w _Layout.cshtml,
       więc pobierają się równolegle. Kolejność podpięcia jest ta sama co dawne
       importy — kaskada zachowuje się identycznie.
*/

/* ---- GŁÓWNE ZMIENNE - DARK FUTURISTIC ---- */
:root {
    /* Kolory główne - ciemny futurystyczny motyw */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #667eea 75%, #764ba2 100%);
    --secondary-gradient: linear-gradient(45deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --accent-gradient: linear-gradient(120deg, #e94560 0%, #f093fb 50%, #667eea 100%);
    --aurora-gradient: linear-gradient(180deg, rgba(102,126,234,0.2) 0%, rgba(240,147,251,0.1) 50%, rgba(233,69,96,0.2) 100%);
    /* Kolory bazowe - ciemniejsze */
    --pink-light: #f093fb;
    --pink-medium: #e94560;
    --pink-dark: #c41e3a;
    --purple-light: #9d4edd;
    --purple-medium: #764ba2;
    --purple-dark: #5a189a;
    --blue-accent: #667eea;
    --cyan-accent: #00d9ff;
    /* Tła - bardzo ciemne */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.08);
    /* Teksty */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.4);
    /* Efekty - bardziej subtelne */
    --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.3);
    --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --blur-amount: 20px;
    /* Wymiary */
    --sidebar-width: 280px;
    --sidebar-collapsed: 80px;
    --border-radius: 16px;
    --border-radius-small: 8px;
    /*
        ---- SKALA INTERFEJSU ----
        Jedno miejsce, z ktorego caly panel bierze wymiary kontrolek i odstepow.

        DLACZEGO ISTNIEJE: wlasciciel zglosil, ze "UI jest zbyt duzy" - karta
        logowania na cztery pola zajmowala cala wysokosc ekranu. Zamiast poprawiac
        kilkadziesiat regul z osobna (i rozjechac je przy nastepnej zmianie), caly
        interfejs schodzi o jeden stopien przez te zmienne. Kolejna zmiana rozmiaru
        to edycja tych kilkunastu linijek, nie polowy arkuszy.

        DLACZEGO PIKSELE, A NIE rem, PRZY KONTROLKACH: responsive.css skaluje
        font-size korzenia (16 px -> 15 px ponizej 1920 -> 13 px ponizej 1440).
        Gdyby wysokosc pola byla w rem, na laptopie 1366 px pole mialoby ~30 px
        i przestaloby byc sensownym celem kliknięcia. Wymiary dotykowe zostaja
        wiec w px, a rozmiary pisma w rem - te maja sie skalowac razem z tekstem.

        WARTOSCI PRZED -> PO:
          pole/przycisk  ~52-56 px -> 42 px (przycisk glowny 40 px, duzy 44 px)
          odstep pol      ~22 px   -> 14 px
          padding karty   32-48 px -> 20 px
          komorka tabeli  16 px    -> 9/14 px
    */
    --kontrolka-wys: 42px;
    --kontrolka-pad-y: 9px;
    --kontrolka-pad-x: 14px;
    --kontrolka-font: 0.95rem;
    --etykieta-font: 0.82rem;
    --pole-odstep: 14px;
    --sekcja-odstep: 18px;
    --karta-pad: 20px;
    --karta-pad-maly: 16px;
    --komorka-pad-y: 9px;
    --komorka-pad-x: 14px;
    --przycisk-wys: 40px;
    --przycisk-wys-duzy: 44px;
    --przycisk-wys-maly: 34px;
    /* Animacje */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- RESET I PODSTAWY ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Exo 2', sans-serif;
    background: var(--bg-primary);
    background-image: radial-gradient(ellipse at top left, rgba(102, 126, 234, 0.15) 0%, transparent 40%), radial-gradient(ellipse at bottom right, rgba(233, 69, 96, 0.15) 0%, transparent 40%), linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0a0a0f 100%);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    line-height: 1.6;
}

    /* Subtelniejszy animowany background */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--aurora-gradient);
        opacity: 0.15;
        animation: aurora 20s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
    }

/* ---- TYPOGRAFIA ---- */
/*
    Naglowki zeszly o stopien razem z reszta interfejsu. Odstep pod naglowkiem
    1rem -> 0.6rem: przy 2rem naglowka odstep 1rem byl niewidoczny, przy 1.35rem
    robil sie dziura wieksza niz sam tekst.

    WERSALIKI zostaja tu, bo to jezyk wizualny panelu (naglowki sekcji), ale
    NIE schodza juz na etykiety pol formularza - patrz components.css i crm.css.
    Powod: polskie "ADRES E-MAIL" z rozstrzeleniem czyta sie wolniej niz
    "Adres e-mail", a przy polach czyta sie je przy kazdym wypelnianiu.
*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Gradient tylko dla h1 i h2 */
h1, h2 {
    background: linear-gradient(90deg, var(--blue-accent) 0%, var(--pink-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Bylo 2.5 / 2 / 1.5 / 1.25 / 1.1 / 1 rem. */
h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1.15rem;
}

h4 {
    font-size: 1.05rem;
}

h5 {
    font-size: 0.98rem;
}

h6 {
    font-size: 0.9rem;
}

p {
    margin-bottom: 0.6rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

a {
    text-decoration: none;
    color: var(--blue-accent);
    transition: var(--transition-fast);
}

    a:hover {
        color: var(--pink-light);
    }

/* ---- SCROLLBAR STYLING ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--blue-accent), var(--purple-medium));
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--pink-light), var(--purple-medium));
    }

/* ---- GLASSMORPHISM UPDATES ---- */
.glass {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---- NEON EFFECTS ---- */
.neon-glow {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor;
}

.neon-border {
    box-shadow: inset 0 0 10px rgba(102, 126, 234, 0.5), 0 0 20px rgba(102, 126, 234, 0.3);
}

/* ---- INPUTS & FORMS ---- */
input,
textarea,
select {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-fast);
}

    input:focus,
    textarea:focus,
    select:focus {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--blue-accent) !important;
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.3) !important;
        outline: none !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted) !important;
    }

/* ---- BUTTONS ---- */
.btn {
    background: linear-gradient(135deg, var(--blue-accent) 0%, var(--purple-medium) 100%);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
}

    .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .btn:hover::before {
        left: 100%;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    }

/* ---- CARDS ---- */
.card,
.content-box {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

    .card:hover,
    .content-box:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(102, 126, 234, 0.4);
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
    }

/* ---- TABLES ---- */
table {
    background: transparent;
}

thead {
    background: rgba(102, 126, 234, 0.1);
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-fast);
}

    tbody tr:hover {
        background: rgba(102, 126, 234, 0.05);
    }

/* ---- ALERTS & MESSAGES ---- */
.alert-success,
.success-message {
    background: rgba(0, 217, 255, 0.1) !important;
    border: 1px solid rgba(0, 217, 255, 0.3) !important;
    color: var(--cyan-accent) !important;
}

.alert-danger {
    background: rgba(233, 69, 96, 0.1) !important;
    border: 1px solid rgba(233, 69, 96, 0.3) !important;
    color: var(--pink-medium) !important;
}

/* ---- SIDEBAR ---- */
.sidebar {
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(102, 126, 234, 0.2);
}

    .sidebar nav a {
        color: var(--text-secondary);
        transition: all var(--transition-fast);
    }

        .sidebar nav a:hover,
        .sidebar nav a.active {
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1));
            color: var(--text-primary);
            border-left: 3px solid var(--blue-accent);
        }

/* ---- ACCESSIBILITY ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

*:focus {
    outline: 2px solid var(--blue-accent);
    outline-offset: 2px;
}

/* ---- ANIMATIONS ---- */
@keyframes aurora {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.15;
    }

    25% {
        transform: rotate(1deg) scale(1.05);
        opacity: 0.2;
    }

    50% {
        transform: rotate(-1deg) scale(1.1);
        opacity: 0.15;
    }

    75% {
        transform: rotate(0.5deg) scale(1.05);
        opacity: 0.18;
    }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0;
        --border-radius: 12px;
        --border-radius-small: 6px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.05rem;
    }
}

/* ---- PRINT STYLES ---- */
@media print {
    body {
        background: white;
        color: black;
    }

    .sidebar,
    .hamburger,
    .user-menu {
        display: none !important;
    }
}
/* RESPONSIVE & DROPDOWN FIXES */

/* ---- DROPDOWN/SELECT FIXES ---- */
select,
select.form-control,
select.form-select,
select.filter-input {
    background: rgba(16, 16, 26, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    cursor: pointer;
}

    select option {
        background: #1a1a2e !important;
        color: #ffffff !important;
        padding: 0.5rem;
    }

    select:focus {
        background: rgba(16, 16, 26, 0.95) !important;
        color: #ffffff !important;
        border-color: #667eea !important;
        outline: none !important;
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.3) !important;
    }

/* Dla input type="date" i innych specjalnych */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    background: rgba(16, 16, 26, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    color-scheme: dark;
}

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
    }

/* ---- RESPONSIVE CONTAINER ---- */
.container,
.container-fluid,
.content-wrapper {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container {
        max-width: 100%;
    }

    .content-wrapper {
        padding: 0.75rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }

    .content-wrapper {
        padding: 0.9rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .content-wrapper {
        padding: 1.1rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
/* Bylo 2rem - na 1366x768 sama ramka strony zjadala 64 px wysokosci. */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .content-wrapper {
        padding: 1.25rem;
    }
}

/* XXL devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ---- RESPONSIVE SIDEBAR ---- */
@media (max-width: 991px) {
    #container {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        background: rgba(10, 10, 15, 0.98) !important;
    }

        .sidebar.active {
            left: 0;
            box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5);
        }

    .hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        background: rgba(16, 16, 26, 0.8);
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: 8px;
        color: #667eea;
        font-size: 1.4rem;
        transition: all 0.3s;
    }

        .hamburger:hover {
            background: rgba(102, 126, 234, 0.2);
            transform: scale(1.05);
        }

    .mobile-menu-overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }

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

/* ---- RESPONSIVE TABLES ---- */
@media (max-width: 767px) {
    .table-container,
    .admin-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    th, td {
        font-size: 0.82rem;
        padding: 0.5rem 0.45rem;
    }
}

/* ---- RESPONSIVE CARDS/GRID ---- */
/* Bylo gap 1.5rem / padding 1.5rem - kafelki pulpitu zajmowaly dwa ekrany. */
.dashboard-grid,
.admin-dashboard-grid,
.cards-grid {
    display: grid;
    gap: 1rem;
    padding: 1rem 0;
}

/* Desktop - 4 columns */
@media (min-width: 1400px) {
    .dashboard-grid,
    .admin-dashboard-grid,
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large desktop - 3 columns */
@media (min-width: 992px) and (max-width: 1399px) {
    .dashboard-grid,
    .admin-dashboard-grid,
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet - 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .dashboard-grid,
    .admin-dashboard-grid,
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
    .dashboard-grid,
    .admin-dashboard-grid,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.75rem 0;
    }
}

/* ---- RESPONSIVE FORMS ---- */
@media (max-width: 767px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .filter-row {
        flex-direction: column;
        gap: 1rem;
    }

    .filter-group {
        width: 100%;
    }

    .form-control,
    .form-select,
    select {
        font-size: 16px !important; /* Prevent iOS zoom */
        min-height: 44px;
    }
}

/* ---- RESPONSIVE HEADER ---- */
@media (max-width: 767px) {
    main header {
        padding: 1rem;
        flex-wrap: wrap;
    }

        main header h2 {
            font-size: 1.25rem;
            flex: 1;
        }

    .user-menu {
        gap: 0.75rem;
    }

    .user-profile .user-role {
        display: none;
    }
}

/* ---- RESPONSIVE BUTTONS ---- */
@media (max-width: 575px) {
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.88rem;
    }

    .admin-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .admin-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- RESPONSIVE TYPOGRAPHY ---- */
@media (max-width: 767px) {
    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.15rem;
    }

    h3 {
        font-size: 1.05rem;
    }

    h4 {
        font-size: 1rem;
    }

    h5 {
        font-size: 0.95rem;
    }

    h6 {
        font-size: 0.88rem;
    }

    .content-header h2 {
        font-size: 1.1rem;
    }
}

/* ---- RESPONSIVE UTILITIES ---- */
@media (max-width: 991px) {
    .hide-md {
        display: none !important;
    }

    .show-md {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* ---- FIX DLA BIAŁYCH INPUTÓW W CIEMNYM MOTYWIE ---- */
input:not([type="checkbox"]):not([type="radio"]),
textarea {
    background: rgba(16, 16, 26, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

    input:not([type="checkbox"]):not([type="radio"]):focus,
    textarea:focus {
        background: rgba(16, 16, 26, 0.95) !important;
        color: #ffffff !important;
        border-color: #667eea !important;
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.3) !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }

/* Autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1a2e inset !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 30px #1a1a2e inset !important;
}

/* ---- MODAL RESPONSIVE ---- */
@media (max-width: 575px) {
    .modal {
        margin: 1rem;
        max-width: calc(100% - 2rem);
        padding: 1.5rem;
    }
}

/* ---- TIMELINE RESPONSIVE ---- */
@media (max-width: 767px) {
    .horizontal-timeline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

        .horizontal-timeline::before,
        .horizontal-timeline::after {
            display: none;
        }

    .timeline-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 479px) {
    .horizontal-timeline {
        grid-template-columns: 1fr;
    }
}

/* ---- PREVENT HORIZONTAL SCROLL ---- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

main {
    overflow-x: hidden;
}

/* ---- CUSTOMER PANEL FULL WIDTH FIX ---- */
@media (min-width: 992px) {
    .customer-panel .content-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    .customer-panel .dashboard-container {
        width: 100% !important;
    }
}