@charset "UTF-8";

/* =========================================================
   KZASA BRANDING - NOWOCZESNY DESIGN TICKETOWY (2026 UI)
   ========================================================= */

/* --- 1. GLOBALNE TŁO I CZCIONKA --- */
body {
    font-family: 'mon-bold', 'Inter', 'Segoe UI', Tahoma, Verdana, sans-serif !important;
    background: #f0f2f5 !important;
    color: #333333;
    padding-top: 50px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2c3e50 !important;
    font-weight: 700;
}

/* Wymuszenie usunięcia systemowego, kropkowanego kwadratu na linkach po kliknięciu/najechaniu (outline focus) */
a,
button,
input,
a:hover,
a:focus,
a:active,
button:focus {
    outline: none !important;
}

#header a,
#header a:hover,
#header a:focus {
    outline: none !important;
    border: none !important;
}

/* --- 2. GŁÓWNY PANEL (ŚRODKOWANIE I STYL KARTY) --- */
#container {
    background-color: #ffffff !important;
    width: 960px !important;
    max-width: 95% !important;
    margin: 0 auto 40px auto !important;
    padding: 40px 50px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    box-sizing: border-box;
}

/* --- 3. NAGŁÓWEK I LOGO --- */
#header {
    padding-bottom: 0 !important;
    border: none !important;
    margin-bottom: 25px !important;
}

#header p a {
    color: rgb(252, 151, 0) !important;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background 0.2s ease;
}

#header p a:hover {
    background-color: rgba(252, 151, 0, 0.1);
}

/* --- 4. ZAKŁADKI (NOWOCZESNE MENU FLAT TAB) --- */
ul#nav {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #e1e8ed !important;
    display: flex;
    gap: 15px;
    padding: 0 !important;
    margin-bottom: 40px !important;
    box-shadow: none !important;
    height: auto !important;
    /* Nadpisanie sztywnego height z osTicket */
}

ul#nav li {
    background: transparent !important;
    border: none !important;
    display: block;
    margin: 0 !important;
    height: auto !important;
    /* Nadpisanie sztywnego height z osTicket */
}

ul#nav li a {
    display: block;
    background: transparent !important;
    border: none !important;
    color: #7f8c8d !important;
    font-weight: 600 !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    position: relative;
    transition: all 0.2s ease;
}

ul#nav li a.active {
    color: rgb(252, 151, 0) !important;
    background: transparent !important;
}

ul#nav li a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgb(252, 151, 0);
    border-radius: 3px 3px 0 0;
}

ul#nav li a:hover {
    color: rgb(252, 151, 0) !important;
    background-color: rgba(252, 151, 0, 0.05) !important;
    border-radius: 8px 8px 0 0;
}

ul#nav li a::before {
    display: none !important;
}

/* --- 5. PRZYCISKI - FLAT DESIGN i NEUMORFIZM --- */
/* Domyślna baza dla absolutnie każdego guzika */
a.button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    background-image: none !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    text-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    font-family: inherit !important;
    justify-content: center;
}

/* Pływające przyciski po najechaniu (efekt ogólny) */
a.button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover {
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

a.button:active,
.button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
button:active {
    transform: translateY(1px) !important;
}

/* === KOLORY PRZYCISKÓW === */

/* ZWYKŁY PRZYCISK BAZOWY (np. formularze) / ORAZ PRZYCISK UTWÓRZ (BLUE) */
input[type="submit"],
button,
.blue.button {
    background-color: rgb(252, 151, 0) !important;
    box-shadow: 0 4px 15px rgba(252, 151, 0, 0.25) !important;
}

input[type="submit"]:hover,
button:hover,
.blue.button:hover {
    background-color: rgb(228, 137, 7) !important;
    box-shadow: 0 6px 20px rgba(252, 151, 0, 0.35) !important;
}

input[type="submit"]:active,
button:active,
.blue.button:active {
    box-shadow: 0 2px 8px rgba(252, 151, 0, 0.3) !important;
}

/* PRZYCISK DRUGORZĘDNY - SPRAWDŹ STATUS (GREEN) */
.green.button {
    background-color: #4a5568 !important;
    /* Elegancki ciemno-grafitowy szary */
    box-shadow: 0 4px 15px rgba(74, 85, 104, 0.25) !important;
}

.green.button:hover {
    background-color: #2d3748 !important;
    /* Ściemnienie grafity dla hover */
    box-shadow: 0 6px 20px rgba(74, 85, 104, 0.35) !important;
}

.green.button:active {
    box-shadow: 0 2px 8px rgba(74, 85, 104, 0.3) !important;
}


/* Ekstra modyfikacja dla gigantycznych guzików na StartPage */
#landing_page .front-page-button a.button {
    padding: 16px 30px !important;
    font-size: 16px !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.5px;
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
    display: block !important;
}


/* --- 6. UKSZTAŁTOWANIE TREŚCI I LINKI W TEKŚCIE --- */
#content {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.main-content {
    color: #444444;
    line-height: 1.7;
    font-size: 15px;
}

/* Automatyczne linkowanie na stronie (zgłoszenia itd.) */
a {
    color: rgb(252, 151, 0) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

a:hover {
    color: rgb(200, 115, 0) !important;
    text-decoration: underline !important;
}

ul#nav li a {
    text-decoration: none !important;
}


/* --- 7. POLA TEKSTOWE - NEUTRALNE MINIMALISTYCZNE OBRAMOWANIE --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border: 1px solid #d1d8dd !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    background-color: #ffffff !important;
    font-size: 14px;
    margin-top: 6px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: rgb(252, 151, 0) !important;
    box-shadow: 0 0 0 3px rgba(252, 151, 0, 0.15) !important;
    outline: none !important;
}


/* --- 8. FOOTER NA SAMYM DOLE --- */
#footer {
    text-align: center;
    padding: 30px 0 50px 0 !important;
    color: #999999;
    background: transparent !important;
    font-size: 13px;
    border: none !important;
}

#footer a {
    color: #999999 !important;
    text-decoration: none;
    font-weight: 500;
}

#footer a:hover {
    color: rgb(252, 151, 0) !important;
    text-decoration: none;
}

/* --- 9. FORMULARZ LOGOWANIA (CLEAN MODAL LOGIN) --- */
form#clientLogin {
    background-image: none !important;
    /* Zniszczenie wielkiej kłódki w tle rodem z IE6 */
    background-color: #ffffff !important;
    /* Czysta biel */
    border: 1px solid #ebf0f4 !important;
    /* Bardzo cienki uładzony border */
    border-radius: 12px !important;
    /* Miękko zaokrąglona bryła */
    padding: 40px !important;
    /* Wymuszenie czystego oddechu */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    /* Delikatny glow wokół boxa logowania */
    margin-top: 30px !important;
}

form#clientLogin .login-box {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-right: 1px solid #e5e9ec !important;
    /* Ostra, cienka i ultranowoczesna płaska linia podziału */
    padding-right: 40px !important;
    width: 320px !important;
}

/* Wyrównanie przestrzeni pod polami "Email" i "Hasłow" */
form#clientLogin .login-box div {
    margin-bottom: 20px !important;
}

/* Wymuszenie szerokości na 100% obrysu dla ładnego efektu przycisku logowania */
form#clientLogin .btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    margin-top: 10px !important;
}

/* Odświeżenie prawej strony od separatora ("Jestem przedstawicielem...") */
form#clientLogin>div>div:nth-child(2) {
    padding-left: 40px !important;
    vertical-align: middle !important;
    font-size: 15px;
    color: #555555;
}

/* --- 10. FORMULARZ NOWEGO ZGŁOSZENIA (TICKET FORM) --- */

/* Przyciski pomocnicze: Anuluj, Reset (Jasnoszare, płaskie z bordrem) */
input[type="reset"],
input[type="button"][name="cancel"] {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

input[type="reset"]:hover,
input[type="button"][name="cancel"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Rozszerzenie i uporządkowanie tabeli formularza */
form#ticketForm table {
    width: 100% !important;
    border-collapse: collapse !important;
    /* Kasujemy border-spacing rodem z osTicket aby wyeliminować szpary tabeli */
}

form#ticketForm table td {
    padding-top: 4px !important;
    /* Nadpisuje paskudne inline style="padding-top:10px" */
    padding-bottom: 4px !important;
}

/* Estetyczne nagłówki sekcji (Informacje kontaktowe itp.) */
form#ticketForm .form-header h3,
form#ticketForm .form-header b {
    color: rgb(252, 151, 0) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    /* Ścięty margines nagłówka */
    display: inline-block;
}

/* Złagodzenie ostrych horyzontalnych linii */
form#ticketForm hr {
    border: none !important;
    border-top: 1px solid #e1e8ed !important;
    margin: 10px 0 !important;
    /* Skompresowany margines nad i pod liniami */
}

/* Stylizacja etykiet nad polami */
form#ticketForm label {
    font-weight: 600 !important;
    color: #4a5568 !important;
    display: block !important;
    margin-bottom: 2px !important;
    /* Pólka zbliżone do ramy inputa */
}

/* Obowiązkowa czerwona gwiazdka */
form#ticketForm .required .error,
form#ticketForm font.error {
    color: #e53e3e !important;
    font-weight: bold;
    margin-left: 3px;
}

/* Poszerzenie pól wyboru - maksymalnie na 450px żeby nie raziły po oczach */
form#ticketForm input[type="text"],
form#ticketForm input[type="email"],
form#ticketForm input[type="tel"],
form#ticketForm select {
    width: 100% !important;
    max-width: 450px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-top: 4px !important;
}

/* Zabezpieczenie małego pola do numeru wewnętrznego (wew. tel) */
form#ticketForm input[name*="-ext"] {
    display: inline-block !important;
    width: 80px !important;
    margin-left: 10px !important;
    margin-top: 0 !important;
}

/* --- 11. SYSTEMOWE KOMUNIKATY BŁĘDÓW / SUKCESÓW (ALERTY) --- */
#msg_error,
#msg_notice,
#msg_warning,
#msg_info {
    padding: 16px 20px !important;
    margin-bottom: 25px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    background-image: none !important;
    /* Wycięcie starych sztywnych PNG z wykrzyknikiem / x'em */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    display: block !important;

}

/* Moduł Błędu krytycznego / Braków w formularzu - Kolor czerwony */
#msg_error {
    background-color: #fef2f2 !important;
    /* Delikatny pastelowy czerwony wewnątrz */
    border-left: 5px solid #ef4444 !important;
    /* Nowoczesny lewy akcent graficzny zamiast całościowej mocnej ramki */
    border-top: 1px solid #fecaca !important;
    border-right: 1px solid #fecaca !important;
    border-bottom: 1px solid #fecaca !important;
    color: #b91c1c !important;
    /* Ciemnoczerwony kontrastowy tekst premium */
}

/* Moduł Informacyjny / Sukces - Kolor niebieski zgra z resztą */
#msg_notice,
#msg_info {
    background-color: #eff6ff !important;
    border-left: 5px solid #3b82f6 !important;
    border-top: 1px solid #bfdbfe !important;
    border-right: 1px solid #bfdbfe !important;
    border-bottom: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
}

/* Moduł Ostrzegawczy - Kolor lekki pomarańcz */
#msg_warning {
    background-color: #fffbeb !important;
    border-left: 5px solid #f59e0b !important;
    border-top: 1px solid #fde68a !important;
    border-right: 1px solid #fde68a !important;
    border-bottom: 1px solid #fde68a !important;
    color: #b45309 !important;
}

/* ========================================================= */
/* --- 12. LOGOWANIE AGENTA / PRACOWNIKA (SCP LOGIN) --- */
/* ========================================================= */

/* 12.1 Głębokie stałe tło (Usunięcie zdjęcia na życzenie i wymuszenie czystego ciemnego Hebanu) */
#brickwall {
    background: #0f172a !important;
    /* Elegancki nocny kolor zastępujący budynek w tle */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Wymuszenie na body idealnego Flexbox Centrowania by uniknąć hardcodowanych -200px marginów */
body#loginBody {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    margin: 0 !important;
    background-color: #0f172a !important;
    /* Heban jak solid background */
}

/* 12.2 Maska główna panelu logowania - Czysta Biel, Modern Card i resetowanie SCP legacy positioning */
#loginBox {
    background: #ffffff !important;
    border: none !important;
    padding: 30px 60px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    width: 100% !important;
    max-width: 440px !important;
    position: relative !important;
    left: auto !important;
    /* Reset od left: 50% */
    top: auto !important;
    /* Reset od top: 15% */
    margin: 0 !important;
    /* Zniszczenie margin-left: -200px ! */
    transform: none !important;
    z-index: 10;
}

/* Ukrywamy ten bardzo stary szklany box używający skryptowego blur */
#loginBox #blur,
#loginBox #background-compat {
    display: none !important;
}

/* Zabezpieczenie szerokości dla logo w nowym, grubszym paddingu kartowym */
#loginBox h1#logo {
    margin-bottom: 20px !important;
    text-align: center !important;
}

#loginBox h1#logo img {
    max-width: 100% !important;
    height: auto !important;
}

/* Poprawka uciętej nazwy "Zaloguj" (scp miało na sztywno height 24px!) i wsparcie okna Resetu Hasła */
#loginBox button.submit,
#loginBox input.submit[type="submit"] {
    width: 100% !important;
    height: auto !important;
    line-height: normal !important;
    padding: 14px !important;
    font-size: 16px !important;
    margin-top: 15px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Krawężniki pól wejściowych (Login SCP) */
#loginBox fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Inputy w logowaniu agenta dopasowane do tych wypracowanych frontendowych */
#loginBox input[type="text"],
#loginBox input[type="password"] {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    border: 1px solid #d1d8dd !important;
    background-color: #f8fafc !important;
}

/* Obrysówka hover / focus z kolorem marki na Inputach Agentów */
#loginBox input[type="text"]:focus,
#loginBox input[type="password"]:focus {
    border-color: rgb(252, 151, 0) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(252, 151, 0, 0.15) !important;
}

/* Podpis powitalny logowania agenta / okienko resetu */
#loginBox h3 {
    color: #475569 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

/* Link zapomniałem hasła - zrzucony pod przycisk na dół do czystej konstrukcji flow */
#loginBox a#reset-link {
    display: block !important;
    text-align: center !important;
    margin-top: 25px !important;
    color: #64748b !important;
    font-size: 14px !important;
    text-decoration: none !important;
    float: none !important;
}

#loginBox a#reset-link:hover {
    color: rgb(252, 151, 0) !important;
    text-decoration: underline !important;
}

/* Sekcja małych literek i praw autorskich - wyrwanie z absolute positioning */
#loginBox #company {
    position: static !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 35px auto 0 auto !important;
    padding-top: 20px !important;
    width: 100% !important;
    left: auto !important;
    bottom: auto !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    background: transparent !important;
}

/* Zabicie ciemnej pastylki otaczającej prawa autorskie */
#loginBox #company .content {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    text-shadow: none !important;
    padding: 0 !important;
}

/* Podpis osTicket poza obrysem modalu leci na ciemne tło zdjęcia, dlatego gasimy go dla nieinwazyjności */
#poweredBy {
    color: rgba(255, 255, 255, 0.4) !important;
    text-shadow: none !important;
    z-index: 10;
}

#loginBox form {
    width: 100% !important;
}