@layer sh_v580{
/*
 * ui-consistency-v580.css
 *
 * Plik wyrównujący niespójności wizualne między modułami panelu:
 * - rent-btn, maint-btn, fik-btn → wspólna wysokość i border-radius z .btn
 * - rent-card, fik-card, maint-card → jednolite border-radius (16px)
 * - Kolory status-pill ujednolicone (green: #166534, red: #991b1b)
 * - Loading state dla przycisków formularzy
 * - Brakujące focus-visible na elementach interaktywnych
 * - Spójne odstępy między sekcjami (gap: 16px jako baza)
 *
 * Ładowany jako ostatni plik CSS w base.html — może bezpiecznie nadpisywać.
 */



/* ============================================================
   1. UJEDNOLICENIE WYSOKOŚCI I BORDER-RADIUS PRZYCISKÓW
   ============================================================
   Każdy moduł miał swój własny system: rent-btn (42px, r:12), maint-btn (38px, r:10), fik-btn (42px, r:12), .btn (34px, r:12).
   Wyrównujemy do wspólnej wysokości 40px i radius 10px.
   ============================================================ */



.rent-btn, .maint-btn, .fik-btn{min-height: 40px;border-radius: 10px;font-size: 13px;padding: 8px 14px;display: inline-flex;align-items: center;justify-content: center;gap: 6px;cursor: pointer;transition: opacity .15s ease, box-shadow .15s ease;}



.rent-btn:hover, .maint-btn:hover, .fik-btn:hover{opacity: .9;}



.rent-btn--tiny{min-height: 32px;padding: 5px 10px;font-size: 12px;}



/* Secondary variant across all button systems */


.rent-btn--secondary, .maint-btn-secondary, .fik-btn--secondary{background: #fff;color: #1f2937;border: 1px solid #eef2f7;}



.rent-btn--secondary:hover, .maint-btn-secondary:hover, .fik-btn--secondary:hover{background: #eef2f7;opacity: 1;}



/* ============================================================
   2. UJEDNOLICENIE BORDER-RADIUS KART
   ============================================================
   rent-card: 20px, fik-card: 18px, .card: 14px, maint-card: 16px
   → wszystkie 16px (kompromis, najbliższy .card)
   ============================================================ */















/* ============================================================
   3. UJEDNOLICENIE KOLORÓW STATUSÓW (PILLÓW)
   ============================================================
   rent-pill.green używał #15803d, reszta panelu #166534.
   fik-status używał #15803d. Wyrównujemy.
   ============================================================ */



.rent-pill.green{background: #dcfce7;color: #166534;}



.rent-pill.red{background: #fee2e2;color: #991b1b;}



.fik-status{background: #dcfce7;color: #166534;}



/* ============================================================
   4. LOADING STATE DLA PRZYCISKÓW FORMULARZY
   ============================================================
   Formularz z data-loading="true" → przyciski submit wyszarzają.
   Spinner CSS pojawia się na przycisku z klasą .is-loading.
   ============================================================ */



form[data-loading="true"] button[type="submit"], form[data-loading="true"] .btn[type="submit"]{opacity: .5;pointer-events: none;cursor: not-allowed;}



.btn.is-loading, .rent-btn.is-loading, .maint-btn.is-loading{pointer-events: none;position: relative;}



.btn.is-loading::after, .rent-btn.is-loading::after, .maint-btn.is-loading::after{content: '';position: absolute;inset: 0;margin: auto;width: 16px;height: 16px;border: 2px solid rgba(255,255,255,.4);border-top-color: #fff;border-radius: 50%;animation: btn-spin .7s linear infinite;}



.btn-secondary.is-loading::after, .rent-btn--secondary.is-loading::after{border-color: rgba(31, 41, 55,.2);border-top-color: #1f2937;}



@keyframes btn-spin {
    to{ transform: rotate(360deg); }
}



/* ============================================================
   5. FOCUS-VISIBLE UJEDNOLICENIE
   ============================================================
   Maint i rent moduły nie dziedziczyły focus ring z app.css
   przez specificity. Wymuszamy globalny ring.
   ============================================================ */



.rent-btn:focus-visible, .maint-btn:focus-visible, .fik-btn:focus-visible, .rent-input:focus-visible, .rent-select:focus-visible, .rent-textarea:focus-visible{outline: 3px solid rgba(31, 41, 55,.3);outline-offset: 2px;}



/* ============================================================
   6. SPÓJNE ODSTĘPY SEKCJI
   ============================================================
   Moduły używały margin-bottom: 14px, 16px, 18px na kartach.
   Normalizujemy przez gap na kontenerach grid.
   ============================================================ */



.rent-v321{gap: 16px;}



.fik-redesign{gap: 16px;}



.maint-shell .stack{gap: 16px;}



/* ============================================================
   7. TABELE — SPÓJNY STYL NAGŁÓWKÓW
   ============================================================
   rent-table{background: #f4f6f9;color: #1f2937;font-size: 11px;text-transform: uppercase;letter-spacing: .05em;font-weight: 700;padding: 10px 12px;border-bottom: 1px solid var(--border, #e5e7eb);}



/* ============================================================
   8. KOMUNIKATY — MARGIN ZERO W KARTACH
   ============================================================
   Messages wewnątrz .card czasem nakładały zbędny margin-bottom.
   ============================================================ */



.card > .message-stack:first-child, .card > .messages:first-child{margin-top: 0;}



.card > .message-stack:last-child, .card > .messages:last-child{margin-bottom: 0;}



/* ============================================================
   9. RESPONSYWNOŚĆ — BRAKUJĄCE BREAKPOINTY W MAINT MODULE
   ============================================================ */



@media (max-width: 768px){




.maint-pagehead{flex-direction: column;align-items: flex-start;}



.maint-pagehead__actions{width: 100%;flex-wrap: wrap;}



.maint-pagehead__actions .btn,
    .maint-pagehead__actions .maint-btn{flex: 1;min-width: 120px;}

}



@media (max-width: 480px){




.rent-btn, .maint-btn, .fik-btn{width: 100%;justify-content: center;}

}



/* ============================================================
   10. SIDEBAR — AKTYWNY LINK KONTRAST
   ============================================================
   active-link w sidebar używał rgba biały z opacity, przez co na bardzo jasnych motywach mógł być słabo widoczny.
   ============================================================ */



.sidebar a.active-link{font-weight: 600;}



/* ============================================================
   11. EMOJI W PRZYCISKACH — WYRÓWNANIE
   ============================================================
   Przycisk "📧 Wyślij zawiadomienia" dodany w rent_charges.html
   może mieć emoji z złym wyrównaniem w różnych przeglądarkach.
   ============================================================ */



.rent-btn > span[role="img"], .rent-btn > .emoji{line-height: 1;vertical-align: middle;}



/* Normalizacja emoji baseline w button text */


button .emoji, .btn .emoji, .rent-btn .emoji{display: inline-block;vertical-align: -0.1em;}


}