/* Moduł RMA — style nadbudowane na Bootstrap 5 */

:root {
    --rma-accent: #f05f00;
    --rma-text: #444645;

    /* Override BS5 primary — wracamy do koloru z legacy BS3 (#428bca = rgb(66,139,202)).
       Wpływa na wszystkie BS5 utility i komponenty: .bg-primary, .btn-primary, .text-primary,
       .border-primary, .table-primary, badges, links etc. */
    --bs-primary:        #428bca;
    --bs-primary-rgb:    66, 139, 202;
    --bs-primary-text-emphasis: #224870;
    --bs-primary-bg-subtle:     #d6e6f3;
    --bs-primary-border-subtle: #afcbe7;
}

/* BS5 `.btn-primary` używa hardcoded hover/active variables — nadpisuję żeby trzymały
   tonację BS3 (ciemniejszy odcień #357ebd przy hover). */
.btn-primary {
    --bs-btn-bg:          #428bca;
    --bs-btn-border-color: #357ebd;
    --bs-btn-hover-bg:    #3276b1;
    --bs-btn-hover-border-color: #285e8e;
    --bs-btn-active-bg:   #285e8e;
    --bs-btn-active-border-color: #1f496e;
    --bs-btn-disabled-bg: #428bca;
    --bs-btn-disabled-border-color: #428bca;
}

/* Override BS5 success — zielenie BS5 (#198754) są za jaskrawe; wracamy do wyważonej
   tonacji z legacy BS3. Wpływa na cały moduł RMA: .alert-success, .btn-success,
   .text-success, .bg-success, badges itd. (BS3: alert color #3c763d / bg #dff0d8 /
   border #d6e9c6; btn bg #5cb85c / border #4cae4c). */
:root {
    --bs-success:        #5cb85c;
    --bs-success-rgb:    92, 184, 92;
    --bs-success-text-emphasis: #3c763d;
    --bs-success-bg-subtle:     #dff0d8;
    --bs-success-border-subtle: #d6e9c6;
}

/* BS5 `.btn-success` używa hardcoded hover/active variables — nadpisuję na tonację BS3
   (hover ciemniejszy #449d44, active #398439). */
.btn-success {
    --bs-btn-color:       #fff;
    --bs-btn-bg:          #5cb85c;
    --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg:    #449d44;
    --bs-btn-hover-border-color: #398439;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg:   #398439;
    --bs-btn-active-border-color: #398439;
    --bs-btn-disabled-bg: #5cb85c;
    --bs-btn-disabled-border-color: #4cae4c;
}

/* Walidacja pól wymaganych (validate_controller.js) — myci-feel: czerwony
   PRZERYWANY obrys + jasnoróżowe tło. Scope: cały moduł RMA (rma.css ładuje się
   wyłącznie z entrypointu RMA przez importmap, nie wycieka do unified-orders).
   !important nadpisuje hardcoded BS5 (.form-control.is-invalid w bootstrap.css). */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
    border: 1px dashed #f00 !important;
    background: #faebe7 !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.2);
}
.invalid-feedback {
    font-weight: 600;
}

/* Logo w nagłówku */
.brand-logo {
    max-height: 60px;
}

/* Tytuły sekcji w stylu starego CI (.title) — pomarańczowy akcent z lewej */
.rma-title {
    color: var(--rma-text);
    border-left: 7px solid var(--rma-accent);
    padding-left: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* 3 panele (sprawdź status / zwrot / reklamacja) */
.rma-panels .card {
    height: 100%;
    border-color: #e5e5e5;
}

.rma-panel-icon {
    font-size: 2.75rem;
    color: var(--rma-accent);
    line-height: 1;
    margin-bottom: 0.75rem;
}

/* Akcentowany przycisk — niebieski (#428bca, jak BS3 primary), hover na czarny */
.btn-rma {
    background-color: #428bca;
    border-color: #428bca;
    color: #fff;
}
.btn-rma:hover,
.btn-rma:focus {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* Wariant czarny (do rozważenia po feedbacku):
.btn-rma {
    background-color: #000;
    border-color: #000;
    color: #fff;
}
.btn-rma:hover,
.btn-rma:focus {
    background-color: #333;
    border-color: #333;
    color: #fff;
}
*/

.rma-section {
    margin-top: 2.5rem;
}

/* TomSelect — większy widoczny dropdown (default 200px to za mało dla ~150 producentów) */
.ts-dropdown .ts-dropdown-content {
    max-height: 480px;
}

/* === Wizard timeline ===
   Pionowy układ z numerowanymi krokami po lewej. Wzorzec z legacy CI
   (.steps-history-list-panel + .line) ale przepisany w nowoczesnym CSS.

   .wizard-step                 — pojedynczy krok (number circle + body w flex row)
   .wizard-step--done           — kroki już zaliczone (greyed)
   .wizard-step--active         — aktualny krok (highlighted)
   .wizard-step__number         — kółko z numerem
   .wizard-step__body           — title + content
*/

/* Loading overlay — semi-transparent biały overlay + centered spinner. Pokazuje się gdy
   którykolwiek element wewnątrz wizarda ma klasę `htmx-request` (HTMX dodaje ją do
   formy/buttona/diva z hx-* atrybutami podczas in-flight requesta).

   Trigger na klasie `.wizard-timeline` (nie ID) — pasuje do wizardów reklamacji i zwrotu.

   Selektor `:has()` — Chrome 105+, Firefox 121+, Safari 15.4+ (2022-2023). Dla starszych
   browserów overlay nie pojawi się ale request i tak działa, więc to graceful degradation. */
.wizard-timeline {
    position: relative;
}
.wizard-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1050;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    cursor: progress;
}
.wizard-timeline:has(.htmx-request) > .wizard-loading-overlay {
    display: flex;
}

.wizard-timeline {
    position: relative;
    padding-left: 0;
}

.wizard-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    padding: 0.5rem 0;
}

/* Pionowa linia łącząca kółka — biegnie przez środek wszystkich .wizard-step__number */
.wizard-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(1.25rem - 1px); /* środek kółka 2.5rem szerokie = 1.25rem od lewej, minus pół linii */
    top: 2.75rem;              /* poniżej kółka */
    bottom: -0.5rem;           /* do następnego kroku */
    width: 2px;
    background-color: #dddddd;
}

.wizard-step__number {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid #ccc;
    background-color: #f7f7f7;
    color: #999;
    z-index: 1;
}

.wizard-step__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.25rem;
}

.wizard-step__title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: #999;
}

/* Greyed = wcześniejsze, zaliczone kroki */
.wizard-step--done .wizard-step__title {
    color: #999;
    margin-bottom: 0;
    padding-top: 0.25rem;
}

/* Klikalne (greyed step jako "back to step" link) */
.wizard-step--clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 0.375rem;
    padding-right: 0.5rem;
}
.wizard-step--clickable:hover .wizard-step__title,
.wizard-step--clickable:focus .wizard-step__title {
    color: var(--rma-text);
    text-decoration: underline;
}
.wizard-step--clickable:hover .wizard-step__number {
    border-color: var(--rma-accent);
    color: var(--rma-accent);
}

/* Aktywny = aktualny krok */
.wizard-step--active .wizard-step__number {
    background-color: var(--rma-accent);
    border-color: var(--rma-accent);
    color: #fff;
}

.wizard-step--active .wizard-step__title {
    color: var(--rma-text);
    font-weight: 600;
}

.wizard-step__form {
    margin: 0;
}

/* Flow-bar w kartach "sposób realizacji" (step_b2) — Klient → Serwis → ... → Klient.
   Layout: flex w jednej linii, każdy "step" = kółko + label pod spodem, strzałki
   między stepami wyrównane do wysokości kółka (nie do tekstu). Label może wisieć
   w 2 liniach (line-clamp) żeby card pomieścił 5 stepów na col-lg-6 bez wrapa.
*/
.rma-flow {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.rma-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 5.5rem;
}

.rma-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #fff;
    color: #000;
    font-size: 1.1rem;
    line-height: 1;
}

.rma-flow-label {
    width: 58px;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.15;
    color: #6c757d;
    text-align: center;
    /* Max 2 linie — dłuższe labele jak "Serwis producenta" zawijają się na 2 wiersze
       zamiast rozpychać step na całą szerokość. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rma-flow-arrow {
    /* Wyrównanie do środka kółka (kółko = 2.5rem, środek na 1.25rem od góry).
       Strzałka ląduje wertykalnie tam, nie pod tekstem. */
    height: 2.5rem;
    display: flex;
    align-items: center;
    color: #adb5bd;
    font-size: 1.8rem;
    flex: 0 0 auto;
}