/*
 * Motyw mirbud_users na bazie Tablera, zgodny ze wzorcem MIRBUD
 * (Baza kontrahentów, example-tabler-ui/docs/przekazanie-ui.md).
 *
 * Mobile-first. Punkty łamania pochodzą ze wzorca, nie z Tablera:
 *   30.0625em (481px)  - większy tytuł strony,
 *   50.0625em (801px)  - zakładki w jednym wierszu z logo,
 *   78.1875em (1251px) - pełny pasek: nazwa aplikacji i użytkownika,
 *   100em     (1600px) - szersze marginesy boczne.
 * Logo zmienia wysokość przy 43.8125em (701px), jak we wzorcu.
 * Kolory wyłącznie przez zmienne CSS (--tblr-* i --mirbud-*).
 */

@font-face {
    font-family: Manrope;
    src: url('../fonts/Manrope-Variable.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

/* Warianty firmowe zmieniają tylko wartości w tym bloku. */
:root {
    --tblr-primary: #206bc4;
    --tblr-primary-rgb: 32, 107, 196;
    --tblr-body-bg: #f4f7fa;
    --tblr-body-color: #102d4a;
    --tblr-body-color-rgb: 16, 45, 74;
    --tblr-secondary: #6d82a0;
    --tblr-secondary-rgb: 109, 130, 160;
    --tblr-border-color: #e4ebf3;
    --tblr-font-sans-serif: Inter, 'Segoe UI', Arial, sans-serif;

    --mirbud-navy: #213e58;
    --mirbud-navy-dark: #152d44;
    --mirbud-navy-line: #496079;
    --mirbud-hero-from: #24445f;
    --mirbud-hero-to: #19344d;
    --mirbud-nav-text: #d5e2ef;
    --mirbud-nav-active: #4595fa;
    --mirbud-hero-text: #c3d8eb;
    --mirbud-hero-primary: #0874e8;
    --mirbud-hero-primary-hover: #0668d0;
    --mirbud-primary-hover: #185caf;
    --mirbud-field-border: #d8e2ee;
    --mirbud-label: #213e61;
    --mirbud-table-head: #586f8e;
    --mirbud-row-hover: #f9fbff;
    --mirbud-footer-text: #8394a9;
    --mirbud-focus: #5ba2f3;
}

/* --- Szkielet --------------------------------------------------------- */

body {
    background-color: var(--tblr-body-bg);
    color: var(--tblr-body-color);
}

/* Kontener wzorca: maks. 1504px, marginesy boczne rosną z ekranem. */
.shell {
    width: min(94rem, calc(100% - 2rem));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    top: -4.5rem;
    left: 1rem;
    z-index: 1100;
    padding: 0.625rem;
    background-color: var(--tblr-bg-surface);
    color: var(--tblr-primary);
}

.skip-link:focus {
    top: 0.3125rem;
}

a:not(.btn):focus-visible,
.topbar button:focus-visible {
    outline: 0.1875rem solid var(--mirbud-focus);
    outline-offset: 0.1875rem;
}

/* Zakładki leżą w przewijanym wierszu, który przycina zewnętrzny obrys. */
.topbar .topbar__link:focus-visible,
.topbar .dropdown-item:focus-visible {
    outline-offset: -0.1875rem;
}

/* --- Górny pasek ------------------------------------------------------ */

.topbar {
    border-bottom: 1px solid var(--mirbud-navy-line);
    background: linear-gradient(110deg, var(--mirbud-navy), var(--mirbud-navy-dark));
    color: #fff;
}

.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 3.875rem;
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    padding: 0.75rem 0;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}

.topbar__brand:hover {
    color: #fff;
    text-decoration: none;
}

.topbar__logo {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 2.5rem;
}

/* Nazwa aplikacji przy logo: widoczna dopiero na pełnym pasku. */
.topbar__app {
    display: none;
    padding-left: 1.25rem;
    border-left: 1px solid #8292a2;
    font-family: Manrope, Inter, 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Na wąskim ekranie zakładki są osobnym, przewijanym wierszem. */
.topbar__nav {
    display: flex;
    order: 3;
    width: 100%;
    min-height: 3rem;
    overflow-x: auto;
}

.topbar__item {
    display: flex;
    flex: 1;
}

.topbar__link {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    padding: 0 0.625rem;
    border: 0;
    border-bottom: 0.1875rem solid transparent;
    background: none;
    color: var(--mirbud-nav-text);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.topbar__link:hover,
.topbar__link--active,
.topbar__link[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.02);
    color: #fff;
    text-decoration: none;
}

.topbar__link--active {
    border-bottom-color: var(--mirbud-nav-active);
}

.topbar__link .ti {
    font-size: 1.25rem;
}

.topbar__link .topbar__caret,
.topbar__user-toggle .topbar__caret {
    font-size: 0.875rem;
}

/* Długa lista aplikacji w menu Grupy przewija się wewnątrz menu. */
.topbar .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
}

.topbar__user {
    margin-left: auto;
}

.topbar__user-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.25rem;
    border: 0;
    background: none;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}

.topbar__avatar {
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.19);
    box-shadow: none;
    color: #fff;
    font-weight: 600;
}

.topbar__user-name {
    display: none;
}

/* --- Obszar tytułu ---------------------------------------------------- */

.hero {
    background: radial-gradient(ellipse at 45% 0%, var(--mirbud-hero-from) 0%, var(--mirbud-hero-to) 70%);
    color: #fff;
}

/* Dolny odstęp robi miejsce na treść nachodzącą na hero. */
.hero__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    min-height: 10.875rem;
    padding-top: 1.375rem;
    padding-bottom: 5rem;
}

.hero__text {
    min-width: 0;
}

.hero__title {
    margin: 0 0 0.3125rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.03125rem;
    overflow-wrap: anywhere;
}

.hero__subtitle {
    margin: 0;
    color: var(--mirbud-hero-text);
    font-size: 0.75rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    max-width: 45%;
}

.hero__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.hero__actions .btn .ti {
    font-size: 1.125rem;
}

.hero--auth .hero__content {
    justify-content: center;
    text-align: center;
}

/*
 * Treść nachodzi 62px na dolną część hero. flow-root odcina margines
 * pierwszego dziecka (np. .row Tablera) od ujemnego marginesu kontenera.
 */
.main-content {
    position: relative;
    display: flow-root;
    min-height: 65vh;
    margin-top: -3.875rem;
    padding-bottom: 1.5rem;
}

.site-footer {
    padding: 0.625rem 0 1.5625rem;
    color: var(--mirbud-footer-text);
    font-size: 0.6875rem;
}

.auth-card {
    max-width: 28.125rem;
    margin-inline: auto;
}

/* --- Komponenty ------------------------------------------------------- */

.card {
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(25, 52, 77, 0.02);
}

.btn {
    min-height: 2.5625rem;
    border-radius: 0.3125rem;
    box-shadow: none;
    font-weight: 600;
}

.btn-sm {
    min-height: 2rem;
}

.btn-primary {
    --tblr-btn-hover-bg: var(--mirbud-primary-hover);
    --tblr-btn-hover-border-color: var(--mirbud-primary-hover);
}

.hero .btn-primary {
    --tblr-btn-bg: var(--mirbud-hero-primary);
    --tblr-btn-border-color: var(--mirbud-hero-primary);
    --tblr-btn-hover-bg: var(--mirbud-hero-primary-hover);
    --tblr-btn-hover-border-color: var(--mirbud-hero-primary-hover);
    min-height: 2.75rem;
}

.hero .btn-outline-light {
    --tblr-btn-border-color: #c2d3e2;
    --tblr-btn-color: #fff;
}

/* Tekst komunikatu w kolorze treści, kolor rodzaju tylko na ikonie. */
.alert {
    --tblr-alert-color: var(--tblr-body-color);
}

.alert > .ti {
    color: color-mix(in oklab, var(--tblr-alert-variant-color) 55%, var(--tblr-body-color));
}

.alert__label {
    font-weight: 600;
}

/* Opis formularza: nie ma przed nim .card-title z ujemnym marginesem. */
.card-body > .card-subtitle:first-child {
    margin-top: 0;
}

/* --- Formularze ------------------------------------------------------- */

.form-label {
    margin-bottom: 0.375rem;
    color: var(--mirbud-label);
    font-size: 0.8125rem;
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 2.5rem;
    border-color: var(--mirbud-field-border);
    border-radius: 0.3125rem;
}

ul.errorlist {
    margin: 0.25rem 0 0;
    padding-left: 0;
    color: var(--tblr-danger);
    font-size: 0.875em;
    list-style: none;
}

textarea.form-control {
    min-height: 8rem;
}

.form-hint ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

/* --- Tabele (django-tables2) ----------------------------------------- */

.table thead th {
    background-color: var(--tblr-body-bg);
    color: var(--mirbud-table-head);
    font-size: 0.6875rem;
    font-weight: 600;
}

.table tbody tr:hover > td {
    background-color: var(--mirbud-row-hover);
}

.table th a {
    color: inherit;
    text-decoration: none;
}

.table th a:hover,
.table th a:focus {
    text-decoration: underline;
}

.table-container .pagination {
    margin: 1rem;
}

.page-link {
    min-width: 2.0625rem;
    min-height: 2.0625rem;
    margin: 0 0.1875rem;
    border-radius: 0.3125rem;
}

/* Kolumna akcji przyklejona do prawej krawędzi przewijanej tabeli. */
.sticky-actions table tr th:last-child,
.sticky-actions table tr td:last-child {
    position: sticky;
    right: 0;
}

.sticky-actions table tr td:last-child {
    background-color: var(--tblr-bg-surface);
}

.sticky-actions table tr th:last-child {
    background-color: var(--tblr-body-bg);
}

.sticky-actions table tbody tr:hover > td:last-child {
    background-color: var(--mirbud-row-hover);
}

/* --- select2 dopasowany do pól wzorca -------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 2.5rem;
    border: var(--tblr-border-width) solid var(--mirbud-field-border);
    border-radius: 0.3125rem;
    background-color: var(--tblr-bg-forms);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 1rem;
    color: var(--tblr-body-color);
    line-height: 2.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.375rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    max-height: 18.75rem;
    overflow-y: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: var(--tblr-border-width) solid var(--mirbud-field-border);
    border-radius: 0.3125rem;
    background-color: var(--tblr-bg-surface-secondary);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

.select2-dropdown {
    border-color: var(--mirbud-field-border);
    border-radius: 0.3125rem;
    background-color: var(--tblr-bg-surface);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tblr-primary);
}

/* --- DataTables ------------------------------------------------------- */

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5rem;
}

.dataTables_wrapper .dataTables_length select {
    margin: 0 0.5rem;
}

/* --- Punkty łamania --------------------------------------------------- */

@media (min-width: 30.0625em) {
    .hero__title {
        font-size: 1.75rem;
    }

    .hero__subtitle {
        font-size: 0.875rem;
    }
}

@media (min-width: 43.8125em) {
    .topbar__logo {
        height: 3rem;
    }
}

@media (min-width: 50.0625em) {
    .shell {
        width: calc(100% - 3rem);
    }

    .topbar__inner {
        flex-wrap: nowrap;
        gap: 0.9375rem;
        min-height: 4.125rem;
    }

    .topbar__brand {
        padding: 0;
    }

    .topbar__nav {
        align-self: stretch;
        order: 0;
        width: auto;
        min-height: 0;
        overflow-x: visible;
    }

    .topbar__item,
    .topbar__link {
        flex: none;
    }

    .topbar__link {
        font-size: 0.9375rem;
    }

    .hero__content {
        align-items: center;
        gap: 1.375rem;
        padding-top: 1.625rem;
    }

    .hero__title {
        font-size: 2.125rem;
    }

    .hero__subtitle {
        font-size: 1rem;
    }

    .hero__actions {
        max-width: none;
    }

    .hero__actions .btn {
        padding: 0.5625rem 1.125rem;
        font-size: 0.875rem;
    }

    .auth-card .card-body {
        padding: 2rem;
    }
}

@media (min-width: 78.1875em) {
    .shell {
        width: min(94rem, calc(100% - 6rem));
    }

    .topbar__inner {
        gap: 1.75rem;
    }

    .topbar__app,
    .topbar__user-name {
        display: block;
    }

    .topbar__nav {
        gap: 0.5rem;
        margin-left: 1.25rem;
    }

    .topbar__link {
        padding: 0 0.875rem;
    }
}

@media (min-width: 100em) {
    .shell {
        width: min(94rem, calc(100% - 10rem));
    }
}

@media print {
    .hero {
        background: none;
        color: inherit;
    }

    .hero__content {
        min-height: 0;
        padding-bottom: 1rem;
    }

    .hero__title {
        color: inherit;
    }

    .hero__subtitle {
        color: inherit;
    }

    .hero__actions {
        display: none;
    }

    .main-content {
        margin-top: 0;
    }
}