zbiorki_app/static/css/custom.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* ========= TOKENS ========= */
:root {
    color-scheme: dark;

    --bg: #121212;
    /* główne tło */
    --surface-0: #1a1a1a;
    /* navbar, header */
    --surface-1: #202020;
    /* karty */
    --surface-2: #2a2a2a;
    /* nagłówki kart, ciemniejsze sekcje */
    --border: #3a3a3a;

    --text: #e4e4e4;
    --text-muted: #a8a8a8;

    --accent: #f5c84c;
    /* żółty/amber akcent */
    --accent-600: #e3b23f;
    --accent-700: #cfa033;
    --accent-300: #ffe083;

    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --trans: 220ms cubic-bezier(.2, .8, .2, 1);
}

/* ========= BASE ========= */
body {
    font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding-top: 1vh;
}

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

a:hover {
    color: var(--accent-300);
}

/* ========= NAVBAR ========= */
.navbar {
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
}

.navbar-brand {
    color: var(--text);
    font-weight: 700;
    transition: color var(--trans);
}

.navbar-brand:hover {
    color: var(--accent);
}

.nav-link {
    color: var(--text-muted);
    transition: color var(--trans);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--accent);
}

/* ========= CARDS ========= */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color var(--trans);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

.card-body {
    background: transparent;
}

/* Wyróżniona karta */
.card.wspomoz-card {
    border: 1px solid var(--accent) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.card.wspomoz-card .card-body,
.card.wspomoz-card .card-title,
.card.wspomoz-card .card-text {
    color: var(--text) !important;
    font-weight: 700;
    font-size: 1.15rem;
}

/* ========= BUTTONS ========= */
.btn {
    font-weight: 700;
    border-radius: 8px;
    transition: transform 120ms ease, background-color var(--trans), border-color var(--trans), color var(--trans);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
    outline: none;
}

/* Primary = żółty */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent-600);
    color: #111;
}

.btn-primary:hover {
    background-color: var(--accent-600);
    border-color: var(--accent-700);
    color: #111;
}

.btn-primary:active,
.btn-primary:focus {
    background-color: var(--accent-700) !important;
    border-color: var(--accent-700) !important;
    color: #111 !important;
}

/* Secondary = ciemna szarość */
.btn-secondary,
.btn-outline-primary {
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-secondary:hover,
.btn-outline-primary:hover {
    border-color: var(--accent-600);
    color: var(--accent);
}

/* ========= PROGRESS ========= */
.progress {
    background: var(--surface-2);
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.progress-bar {
    --progress-width: 0%;
    width: var(--progress-width);
    background: linear-gradient(90deg, var(--accent-600), var(--accent));
    transition: width var(--trans);
}

/* ========= ALERTS ========= */


/* ALERT VARIANTS */
.alert-success {
    background: rgba(40, 167, 69, 0.15);
    /* lekka zieleń */
    border-color: #28a745;
    color: #28a745;
}

.alert-danger {
    background: rgba(220, 53, 69, 0.15);
    /* lekka czerwień */
    border-color: #dc3545;
    color: #dc3545;
}

.alert-warning {
    background: rgba(255, 193, 7, 0.15);
    /* lekki bursztyn */
    border-color: #ffc107;
    color: #ffc107;
}

.alert-info {
    background: rgba(23, 162, 184, 0.15);
    /* lekki cyjan */
    border-color: #17a2b8;
    color: #17a2b8;
}


@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ========= TYPO ========= */
h1 {
    font-size: 2rem;
    margin-bottom: .75rem;
}

h2 {
    font-size: 1.6rem;
    margin-bottom: .6rem;
}

h3 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
    color: var(--text-muted);
}

small,
.text-muted {
    color: var(--text-muted) !important;
}

/* ========= RESPONSIVE ========= */
.container {
    padding: 0 15px;
}

@media (max-width: 767px) {
    .card {
        margin-bottom: 1rem;
    }

    .card-title {
        font-size: 1.1rem;
    }

    .btn {
        font-size: .95rem;
    }
}

.table-responsive {
    overflow: visible;
}

.dropdown-menu {
    z-index: 1080;
}

/* ponad kartą/tabelą */
@media (max-width: 576px) {
    .table-responsive {
        overflow-x: auto;
    }
}

/* ========= FORMS ========= */
input.form-control,
textarea.form-control,
select.form-select {
    background-color: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text);
}

input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus {
    background-color: var(--surface-1);
    border-color: var(--accent-600);
    color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* pole edycji ciemne */
.CodeMirror {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* kursor */
.CodeMirror-cursor {
    border-left: 1px solid #e0e0e0 !important;
}