/* =========================================================
   CRM_CARDS-TABLES.CSS – DANE I STATYSTYKI (MIGRACJA)
   Zakres: Karty, Tabele, Statusy, Tracking, Paginacja
   ========================================================= */

/* =========================
   1. KARTY (CARDS)
========================= */
.card {
  border-radius: 12px !important;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  background-color: #ffffff;

.cardLoguj {
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.cardStat {
    min-height: 22vh;
    margin-bottom: 20px;
}

.cardNoBorder {
    background-color: transparent;
    border: 0px !important;
    box-shadow: none !important;
}

.marginCardStat {
    margin: -50px 10px 10px 0px !important;
}

/* =========================
   2. TABELE (TABLES) - KERNEL SYSTEMU
========================= */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #474747;
    font-size: .74rem;
}

.table td {
    /*padding: .6rem .2rem .6rem .3rem !important;*/
    vertical-align: top !important; /* Treść przypięta do góry */
    /*border-top: 1px solid #dee2e6;*/
}

.table thead th { 
    border-bottom: 2px solid #dee2e6;
    background-color: #f3f2f7 !important; /* NOWY KOLOR: f3f2f7 */
    color: #000000;
    font-weight: 600;
    padding: .75rem .3rem !important; /* Nieco większy padding dla nagłówków */
}

/* Specyficzne komórki th wewnątrz tabel (np. tabele w tabelach) */
.thInTable { 
    background-color: #f3f2f7 !important; 
    height: 20px !important; 
    border-bottom: 1px solid #dee2e6 !important; 
    vertical-align: top !important;
    font-weight: 600;
} 
 
/* Zachowanie hovera dla wierszy */
.table-hover tbody tr:hover {
    background-color: #fbfbfb;
}

/* Pozostałe klasy kolorystyczne wierszy */
.table-redMore, .table-redMore > td { background-color: #FFFAF0 !important; }
.table-green, .table-green > td { background-color: #E5FFE6 !important; }
.table-blue, .table-blue > td { background-color: #E7F1FF !important; }
.table-red, .table-red > td { background-color: #F8D7DA !important; }


.tdClassTableInTable {
    width: 50%;
}
 
.thInTable{
    background-color: transparent !important;
    height: 20px !important;
    vertical-align: top;
    border-bottom: 1px solid #dee2e6 !important;
}

.table td, .table th {
  padding: .6rem .2rem .6rem .3rem;
}

th {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

table thead th {
  background-color: #f3f2f7;
  vertical-align: top;
  text-transform: uppercase;
}

.tdClassTable {
  background-color: #fcfcfc;
  width: 25%;
}

/* =========================
   3. STATUSY I BADGE
========================= */
.badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.4em 0.6em;
    border-radius: 0.25rem;
}

.badge-edpo { background-color: #007e8c; color: #fff; }

/* Statusy górne (Pills) */
.badge-pill-top-center { float: right; border-right: 1px solid #000; border-left: 1px solid #000; padding: 5px 10px; }
.badge-pill-top-right { float: right; border-right: 1px solid #000; padding: 5px 10px; }
.badge-pill-top { float: right; padding: 5px 10px; }

/* =========================
   4. TRACKING I TIMELINE
========================= */
.tracking-list { border: 1px solid #dee2e6; padding: 15px; border-radius: 0.3rem; }
.tracking-item { border-left: 2px solid #007e8c; position: relative; padding: 10px 15px; margin-left: 10px; }
.tracking-icon { position: absolute; left: -9px; background: #fff; }

/* Timeline htmx */
tr.htmx-swapping td {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* =========================
   5. PAGINACJA
========================= */
.pagination { margin-bottom: 0; }
.page-link { 
    border: 0px !important; 
    border-radius: 10rem !important; 
    padding: .4rem .75rem;
    font-size: .74rem;
    color: #007e8c;
}
.page-item.active .page-link { 
    background-color: #0061E0 !important; 
    color: #fff !important; 
}

/* =========================
   6. SPECYFICZNE ELEMENTY TREŚCI
========================= */
.ileStat {
    color: #a36905;
    font-size: 36px !important;
}

.infoPlanTaryfowy {
    font-size: .80rem !important;
    color: #007e8c;
}

.planTaryfowyZloty { color: #FFD700; }
.bg-planTaryfowyZloty { background-color: #FFD700; color: #000; }
.planTaryfowySrebrny { color: #C0C0C0; }
.bg-planTaryfowySrebrny { background-color: #C0C0C0; color: #000; }
.planTaryfowyBrazowy { color: #bc5e00; }
.bg-planTaryfowyBrazowy { background-color: #bc5e00; color: #000; }

/* =========================================================
   KLASY DLA DYNAMICZNEGO ZWIJANIA TABELI (JS SUPPORT)
   ========================================================= */

/* Ukrywanie kolumn */
.hidden-column {
    display: none !important;
}

/* Szerokości dla kolumny LP */
.lp-default-width {
    width: 3% !important;
    text-align: left;
}

.lp-collapsed-width {
    width: 5% !important;
}

/* Szerokości dla kolumny Lokalizacja */
.lokalizacja-default-width {
    width: 15% !important;
}

.lokalizacja-expanded-width {
    width: 95% !important;
}

/* Opcjonalne: płynne przejście szerokości (jeśli tabela nie ma table-layout: fixed) */
 

/* --- Table Sorting & Dynamic Columns --- */
th[data-sortable] {
    cursor: pointer;
    position: relative;
}

.lp-default-width { width: 3%; }
.lp-collapsed-width { width: 3% !important; }

.lokalizacja-default-width { width: 15%; }
.lokalizacja-expanded-width { width: 95% !important; }

.hidden-column { display: none !important; }
.toggle-column { display: table-cell; }