body {
    background-color: #eee;
}

.form-control {
    padding: 10px;
    font-size: 16px;
}

.login-image {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.login-wrapper {
    min-height: 100vh;
}

@font-face {
    font-family: 'OCRA';
    src: url('/fonts/OCRAExtended.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* tło strony w zależności od motywu */
[data-bs-theme="dark"] body {
    background-color: #121212;
    color: #f8f9fa;
}

/* bg-light w dark mode niech będzie ciemne */
[data-bs-theme="dark"] .bg-light {
    background-color: #121212 !important;
}

/* karta logowania w ciemnym trybie */
[data-bs-theme="dark"] .card {
    background-color: #1e1e1e;
    border-color: #333;
}

/* nagłówek i stopka */
[data-bs-theme="dark"] header,
[data-bs-theme="dark"] footer {
    background-color: #1f1f1f !important;
    color: #f8f9fa;
}

/* pola formularza w dark mode */
[data-bs-theme="dark"] .form-control {
    background-color: #2b2b2b;
    color: #f8f9fa;
    border-color: #444;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #adb5bd;
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: #2b2b2b;
    color: #fff;
}

/* alerty w dark mode - lekkie przyciemnienie tła */
[data-bs-theme="dark"] .alert-success {
    background-color: #12341f;
    color: #d1e7dd;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #3b1619;
    color: #f8d7da;
}

:root {
    --theme-transition: background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

body,
header,
footer,
.card,
.form-control,
.btn,
.dropdown-menu,
.alert {
    transition: var(--theme-transition);
}

/* domyślnie w jasnym theme pokazuj wersję light */
.theme-logo-light {
    display: inline-block;
}
.theme-logo-dark {
    display: none;
}

/* w dark mode zamień */
[data-bs-theme="dark"] .theme-logo-light {
    display: none;
}

[data-bs-theme="dark"] .theme-logo-dark {
    display: inline-block;
}