/* Filaro - dark theme
   Brand:      #88b15b
   Tła:        #212121 (baza), #444444 (powierzchnie), #666666 (obramowania)
   Tekst:      #fefefe (główny), #888888 (drugorzędny)
*/

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

:root,
[data-bs-theme="dark"] {
    --filaro-brand: #88b15b;
    --filaro-brand-dark: #6f9a47;
    --filaro-brand-darker: #5f8540;
    --filaro-brand-light: #a4c97a;
    --filaro-bg: #212121;
    --filaro-surface: #444444;
    --filaro-border: #666666;
    --filaro-text: #fefefe;
    --filaro-text-muted: #888888;

    --bs-body-font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-primary: #88b15b;
    --bs-primary-rgb: 136, 177, 91;
    --bs-body-bg: #212121;
    --bs-body-bg-rgb: 33, 33, 33;
    --bs-body-color: #fefefe;
    --bs-body-color-rgb: 254, 254, 254;
    --bs-secondary-color: #888888;
    --bs-secondary-color-rgb: 136, 136, 136;
    --bs-border-color: #666666;
    --bs-tertiary-bg: #444444;
    --bs-tertiary-bg-rgb: 68, 68, 68;
    --bs-link-color: #a4c97a;
    --bs-link-color-rgb: 164, 201, 122;
    --bs-link-hover-color: #b9d895;
    /* Bootstrap domyslnie koloruje <code> na rozowo; u nas ma byc jak zwykly tekst */
    --bs-code-color: #fefefe;

    /* Warianty Bootstrapa kompilowane na sztywno - w tonacji brandu */
    --bs-primary-bg-subtle: rgba(136, 177, 91, 0.16);
    --bs-primary-border-subtle: rgba(136, 177, 91, 0.35);
    --bs-primary-text-emphasis: #b9d895;
    --bs-success: #88b15b;
    --bs-success-rgb: 136, 177, 91;
    --bs-success-bg-subtle: rgba(136, 177, 91, 0.16);
    --bs-success-border-subtle: rgba(136, 177, 91, 0.35);
    --bs-success-text-emphasis: #b9d895;
}

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

code {
    color: var(--filaro-text);
}

.card {
    --bs-card-bg: #444444;
    --bs-card-border-color: #666666;
}

.toast {
    --bs-toast-bg: #444444;
    --bs-toast-border-color: #666666;
    --bs-toast-color: #fefefe;
}

.toast .toast-body .bi-check-circle {
    color: var(--filaro-brand);
}

.toast .toast-body .bi-info-circle {
    color: #4a90d9;
}

.navbar {
    background-color: #1b1b1b;
    --bs-navbar-border-color: #666666;
}

.dropdown-menu {
    --bs-dropdown-bg: #444444;
    --bs-dropdown-border-color: #666666;
    --bs-dropdown-link-color: #fefefe;
    --bs-dropdown-link-hover-color: #fefefe;
    --bs-dropdown-link-hover-bg: #4f4f4f;
    --bs-dropdown-link-active-bg: var(--filaro-brand);
    --bs-dropdown-link-active-color: #212121;
}

.form-control,
.form-select {
    background-color: #212121;
    border-color: #666666;
    color: #fefefe;
}
.form-control:focus,
.form-select:focus {
    background-color: #212121;
    border-color: var(--filaro-brand);
    color: #fefefe;
    box-shadow: 0 0 0 0.25rem rgba(136, 177, 91, 0.25);
}

.btn-primary {
    --bs-btn-color: #212121;
    --bs-btn-bg: #88b15b;
    --bs-btn-border-color: #88b15b;
    --bs-btn-hover-color: #212121;
    --bs-btn-hover-bg: #a4c97a;
    --bs-btn-hover-border-color: #a4c97a;
    --bs-btn-focus-shadow-rgb: 136, 177, 91;
    --bs-btn-active-color: #212121;
    --bs-btn-active-bg: #6f9a47;
    --bs-btn-active-border-color: #6f9a47;
    --bs-btn-disabled-color: #212121;
    --bs-btn-disabled-bg: #88b15b;
    --bs-btn-disabled-border-color: #88b15b;
}

.btn-outline-primary {
    --bs-btn-color: #a4c97a;
    --bs-btn-border-color: #88b15b;
    --bs-btn-hover-color: #212121;
    --bs-btn-hover-bg: #88b15b;
    --bs-btn-hover-border-color: #88b15b;
    --bs-btn-focus-shadow-rgb: 136, 177, 91;
    --bs-btn-active-color: #212121;
    --bs-btn-active-bg: #6f9a47;
    --bs-btn-active-border-color: #6f9a47;
}

/* Success w tonacji brandu (Swatch ON, badge Aktywne) */
.btn-success {
    --bs-btn-color: #212121;
    --bs-btn-bg: #88b15b;
    --bs-btn-border-color: #88b15b;
    --bs-btn-hover-color: #212121;
    --bs-btn-hover-bg: #a4c97a;
    --bs-btn-hover-border-color: #a4c97a;
    --bs-btn-focus-shadow-rgb: 136, 177, 91;
    --bs-btn-active-color: #212121;
    --bs-btn-active-bg: #6f9a47;
    --bs-btn-active-border-color: #6f9a47;
    --bs-btn-disabled-color: #212121;
    --bs-btn-disabled-bg: #88b15b;
    --bs-btn-disabled-border-color: #88b15b;
}

/* Alerty zostaja semantyczne - przypiete do oryginalnych kolorow motywu dark */
.alert-success {
    --bs-alert-color: #75b798;
    --bs-alert-bg: #051b11;
    --bs-alert-border-color: #0f5132;
}

.btn-link {
    --bs-btn-color: #a4c97a;
    --bs-btn-hover-color: #b9d895;
}

.pagination {
    --bs-pagination-bg: #444444;
    --bs-pagination-border-color: #666666;
    --bs-pagination-color: #fefefe;
    --bs-pagination-hover-bg: #4f4f4f;
    --bs-pagination-hover-border-color: #666666;
    --bs-pagination-hover-color: #fefefe;
    --bs-pagination-active-bg: #88b15b;
    --bs-pagination-active-border-color: #88b15b;
    --bs-pagination-active-color: #212121;
    --bs-pagination-disabled-bg: #333333;
    --bs-pagination-disabled-border-color: #666666;
    --bs-pagination-disabled-color: #888888;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #fefefe;
    --bs-table-border-color: #555555;
    --bs-table-hover-bg: #2b2b2b;
    --bs-table-hover-color: #fefefe;
}

/* Stale szerokosci kolumn - wyrownanie miedzy sekcjami prefiksow */
.spools-table {
    table-layout: fixed;
    min-width: 720px;
}

.spools-table th:nth-child(1) { width: 10%; }
.spools-table th:nth-child(2) { width: 45%; }
.spools-table th:nth-child(3) { width: 22%; }
.spools-table th:nth-child(4) { width: 7%; }
.spools-table th:nth-child(5) { width: 8%; }
.spools-table th:nth-child(6) { width: 8%; }

.spool-status-badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.2em 0.5em;
}

.spool-status-toggle {
    border: 0;
    cursor: pointer;
    line-height: 1.4;
}

.spool-status-toggle .bi {
    font-size: 0.75em;
}

.usage-meter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    min-height: 1.2rem;
}

.usage-bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background-color: rgba(254, 254, 254, 0.12);
    overflow: hidden;
}

.usage-bar-fill {
    display: block;
    height: 100%;
    background-color: var(--filaro-brand);
}

.spool-weight-toggle {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
}

.spool-weight-toggle .bi {
    font-size: 0.95em;
}

.weight-derived {
    min-height: 1.25rem;
}

@keyframes spoolRowChanged {
    from { background-color: rgba(136, 177, 91, 0.28); }
    to { background-color: transparent; }
}

tr.spool-row-changed > td {
    animation: spoolRowChanged 1.6s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    tr.spool-row-changed > td {
        animation: none;
    }
}

/* Stale szerokosci kolumn - wyrownanie miedzy sekcjami listy filamentow */
.filaments-table,
.filaments-table-prefix {
    table-layout: fixed;
    min-width: 760px;
}

/* Grupowanie po producencie: podtyp, nazwa, kolor, szpule, ocena, akcje */
.filaments-table th:nth-child(1) { width: 14%; }
.filaments-table th:nth-child(2) { width: 24%; }
.filaments-table th:nth-child(3) { width: 34%; }
.filaments-table th:nth-child(4) { width: 10%; }
.filaments-table th:nth-child(5) { width: 10%; }
.filaments-table th:nth-child(6) { width: 8%; }

/* Grupowanie po prefiksie: nazwa, kolor, szpule, ocena, akcje */
.filaments-table-prefix th:nth-child(1) { width: 28%; }
.filaments-table-prefix th:nth-child(2) { width: 40%; }
.filaments-table-prefix th:nth-child(3) { width: 12%; }
.filaments-table-prefix th:nth-child(4) { width: 12%; }
.filaments-table-prefix th:nth-child(5) { width: 8%; }

/* Widoki mobilne (ponizej md): bez przewijania w poziomie */
@media (max-width: 767.98px) {
    .spools-table {
        table-layout: auto;
        min-width: 0;
    }

    .spools-table thead {
        display: none;
    }

    .spools-table tbody {
        display: block;
    }

    .spools-table tr:not(.spool-extra) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.35rem 0.5rem;
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--filaro-border);
    }

    .spools-table tr:not(.spool-extra) > td {
        display: block;
        padding: 0;
        border: 0;
    }

    .spools-table tr:not(.spool-extra) > td:nth-child(1) {
        grid-column: 1;
    }

    .spools-table tr:not(.spool-extra) > td:nth-child(2),
    .spools-table tr:not(.spool-extra) > td:nth-child(3) {
        grid-column: 1 / -1;
    }

    .spools-table tr:not(.spool-extra) > td:nth-child(6) {
        grid-column: 2;
        grid-row: 1;
    }

    .spools-table tr:not(.spool-extra) > td:nth-child(3) > div {
        width: 100%;
    }

    .spools-table tr.spool-extra > td {
        display: block;
        padding: 0;
        border: 0;
    }

    tr.spool-row-changed {
        animation: spoolRowChanged 1.6s ease-out 1;
    }

    tr.spool-row-changed > td {
        animation: none;
    }

    .spool-extra-toggle .bi {
        transition: transform 0.15s ease-in-out;
    }

    .spool-extra-toggle[aria-expanded="true"] .bi-chevron-down {
        transform: rotate(180deg);
    }

    .filaments-table,
    .filaments-table-prefix {
        table-layout: auto;
        min-width: 0;
    }
}

.brand-dot {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background-color: var(--filaro-brand);
    margin-right: 0.45em;
    vertical-align: baseline;
}

.color-swatch {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 0.25rem;
    border: 1px solid var(--filaro-border);
    margin-right: 0.45em;
    vertical-align: -0.1em;
}

.color-swatch-preview {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.35rem;
    vertical-align: middle;
}

.filament-picker {
    position: relative;
}

.filament-picker-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1055;
    max-height: 18rem;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.filament-picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: normal;
}

.filament-picker-item .color-swatch,
.filament-picker-swatch-empty {
    flex-shrink: 0;
    margin-right: 0;
}

.filament-picker-swatch-empty {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 0.25rem;
    border: 1px dashed var(--filaro-border);
    opacity: 0.5;
}

.filament-picker-item.active {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
}

.filament-picker-item.selected {
    font-weight: 600;
}

.filament-picker-check {
    margin-left: auto;
    visibility: hidden;
}

.filament-picker-item.selected .filament-picker-check {
    visibility: visible;
}

.filament-picker-empty {
    padding: 0.5rem 1rem;
    color: var(--filaro-text-muted);
    font-size: 0.875rem;
}

.nav-tabs {
    --bs-nav-tabs-border-color: #666666;
    --bs-nav-tabs-link-active-bg: #444444;
    --bs-nav-tabs-link-active-border-color: #666666 #666666 #444444;
    --bs-nav-tabs-link-active-color: #fefefe;
    --bs-nav-tabs-link-hover-border-color: #666666;
}

.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-box {
    width: 100%;
    max-width: 26rem;
    background-color: var(--filaro-surface);
    border: 1px solid var(--filaro-border);
    border-radius: 0.5rem;
    padding: 2rem;
}

.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    background-color: var(--filaro-bg);
    color: var(--filaro-text);
}

.error-page h1 {
    color: var(--filaro-brand);
    font-weight: 700;
}

.text-secondary {
    color: var(--filaro-text-muted) !important;
}

hr {
    border-color: var(--filaro-border);
    opacity: 0.6;
}