/* ==========================================================================
   DESIGN SYSTEM – PROMĚNNÉ
   ========================================================================== */

:root {
    /* Barvy – základ */
    --color-bg-body: #f4f5f7;
    --color-bg-surface: #ffffff;

    /* Primární barva (značka) */
    --color-primary: #2563eb;       /* hlavní modrá */
    --color-primary-dark: #1d4ed8;  /* tmavší (hover, aktivní) */
    --color-primary-soft: #dbeafe;  /* světlejší pozadí */
    --color-primary-softer: #eff6ff;/* ještě jemnější podbarvení */

    /* Stavové barvy */
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;

    --color-success: #16a34a;
    --color-success-soft: #dcfce7;

    --color-border: var(--gray-300);

    --color-text-main: #111827;
    --color-text-muted: #6b7280;
    --color-text-soft: #9ca3af;
    --color-text-invert: #ffffff;

    /* Škála šedých – ať nemusíme psát hex kódy napříč projektem */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Badge barvy – můžeš je později navázat na výše uvedené, když budeš chtít */
    --color-badge-gray-bg: #f3f4f6;
    --color-badge-gray-text: #4b5563;

    --color-badge-blue-bg: #e0f2fe;
    --color-badge-blue-text: #1d4ed8;

    --color-badge-green-bg: #dcfce7;
    --color-badge-green-text: #15803d;

    --color-badge-orange-bg: #ffedd5;
    --color-badge-orange-text: #c2410c;

    /* Typografie */
    --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Stíny, radiusy */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.06);

    /* Přechody */
    --transition-fast: 0.15s ease-out;

    /* Rozestupy */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
}

/* ==========================================================================
   GLOBAL – BODY, LAYOUT
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    background: var(--color-bg-body);
    color: var(--color-text-main);
}

body {
    font-size: 14px;
    line-height: 1.5;
}

/* Hlavní obsah – společný wrapper */
.page-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px;
}

/* Wide layout – pro detailové stránky (vehicle/asset), kde je grid/foto */
.page-container--wide{
  max-width: 1400px;
}


/* Wide pages: keep images inside layout */
.page-container--wide img {
  max-width: 100%;
  height: auto;
}
/* Základní nadpisy */
h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    font-weight: 600;
    color: var(--color-text-main);
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 17px;
}

p {
    margin: 0 0 var(--space-2);
}

/* Jemně šedý text */
.text-muted {
    color: var(--color-text-muted);
}

/* Pomocná třída pro menší text */
.text-small {
    font-size: 12px;
    color: var(--color-text-soft);
}

/* ==========================================================================
   FILTRAČNÍ LIŠTA POD NADPISEM (projekty)
   ========================================================================== */

/* aktivní filtr */

/* ==========================================================================
   OBÁLKY KARET PRO PROJEKTY
   ========================================================================== */

/* barevný proužek vlevo – dle stavu */












/* obsah karty */

/* spodní řádek – termíny + odkaz na detail */




/* štítky */

/* barevné varianty badge */
/* mobilní zobrazení projektu */
@media (max-width: 640px) {
    

    

    
}

/* ==========================================================================
   LAYOUT – dvousloupec atd.
   ========================================================================== */

.layout-two-column {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .layout-two-column {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CASH – kasičky / peněženky – PŘEHLED
   ========================================================================== */



.cash-summary-row .card {
    flex: 1 1 220px;
    padding: 12px 16px;
}

.cash-summary-row .card-title {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.cash-summary-row .card-value {
    font-size: 26px;      /* větší čísla */
    font-weight: 600;
}

/* badge pro typ kasičky */




/* =============================================================================
   CASH – tabulka přehledu kasiček / peněženek
   ============================================================================= */







/* číslo v tabulce – zůstatek vpravo */


/* jemnější barvy pro záporné / kladné zůstatky */
.cash-balance-positive {
    color: #16a34a;
}

.cash-balance-negative {
    color: #dc2626;
}

/* =============================================================================
   CASH – detail hlavní kasičky – kompaktní souhrn nahoře
   ============================================================================= */

.compact-summary {
    margin-bottom: 16px;
}

.compact-summary .summary-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #374151;
}

/* ========================================================================== */
/* SPRÁVA UŽIVATELŮ – RESPONSIVE LAYOUT                                       */
/* ========================================================================== */

/* tabulka – desktop */
.users-table td,
.users-table th {
    vertical-align: middle;
}

/* na mobilu uděláme záznamy jako "karty" */
@media (max-width: 520px) {
    .users-table {
        border-collapse: separate;
        border-spacing: 0 8px;
    }

    .users-table thead {
        display: none; /* skryjeme hlavičku */
    }

    .users-table tr {
        display: block;
        background: #fff;
        border-radius: 8px;
        padding: 8px 10px;
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
    }

    .users-table td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: none;
    }

    .users-table td::before {
        font-weight: 500;
        color: #6b7280;
        margin-right: 8px;
    }

    .users-table td:nth-child(1)::before {
        content: "Uživatel";
    }
    .users-table td:nth-child(2)::before {
        content: "Majetek";
    }
    .users-table td:nth-child(3)::before {
        content: "Projekty";
    }
    .users-table td:nth-child(4)::before {
        content: "Stav. deník";
    }
    .users-table td:nth-child(5)::before {
        content: "Admin";
    }
    .users-table td:nth-child(6)::before {
        content: "Akce";
    }
}

/* značky ANO/NE */
.badge-yes {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 500;
}

.badge-no {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #fee2e2;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 500;
}

/* btn v buňkách uživatelů */
.users-table .btn-sm {
    font-size: 12px;
    padding: 4px 8px;
}

/* ========================================================================== */
/* TASKS – seznam úkolů                                                       */
/* ========================================================================== */

.tasks-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.tasks-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tasks-header-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* menší text u počtu úkolů */
.tasks-count {
    font-size: 13px;
    color: #6b7280;
}

/* tabulka úkolů – základní vzhled */
.tasks-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.tasks-table th,
.tasks-table td {
    padding: 8px 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border);
}

/* jemná čára mezi řádky */

/* VÝRAZNĚJŠÍ BARVY PODLE PRIORITY */


/* klikací řádky */



/* značky – podobné jako badge */








/* stav úkolu */
.task-status-open {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.task-status-in-progress {
    background-color: var(--color-badge-orange-bg);
    color: var(--color-badge-orange-text);
}

.task-status-done {
    background-color: var(--color-success-soft);
    color: var(--color-success);
}

/* responzivní zobrazení úkolů na mobilu */
@media (max-width: 520px) {
    .tasks-table {
        border-collapse: separate;
        border-spacing: 0 8px;
    }

    .tasks-table thead {
        display: none;
    }

    .tasks-table tr {
        display: block;
        background: #fff;
        border-radius: 8px;
        padding: 8px 10px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .tasks-table td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: none;
    }

    .tasks-table td::before {
        font-weight: 500;
        color: #6b7280;
        margin-right: 8px;
    }

    .tasks-table td:nth-child(1)::before {
        content: "Úkol";
    }
    .tasks-table td:nth-child(2)::before {
        content: "Projekt";
    }
    .tasks-table td:nth-child(3)::before {
        content: "Priorita";
    }
    .tasks-table td:nth-child(4)::before {
        content: "Stav";
    }
    .tasks-table td:nth-child(5)::before {
        content: "Do";
    }
    .tasks-table td:nth-child(6)::before {
        content: "Akce";
    }
}

/* schování řádků při filtrování */
.row-hidden {
  display: none;
}

/* mobil – jen připomenutí, ať to není moc velké */
@media (max-width: 520px) {

  #employee_search {
    width: 100%;
  }
}

/* ---------------------------------------
   Akční tlačítka vpravo (telefon, mapy, share)
   --------------------------------------- */

/* =========================================
   CASH – TRANSAKCE A MOBIL
   ========================================= */

.tx-in td {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.tx-out td {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.tx-in td:nth-child(5),
.tx-out td:nth-child(5) {
  font-weight: bold;
}

/* skrytí sloupců na mobilu */
.col-hide-mobile {
  display: table-cell;
}

@media (max-width: 520px) {
  #cash-tx-table th.col-hide-mobile,
  #cash-tx-table td.col-hide-mobile {
    display: none !important;
  }

  #cash-tx-table td {
    padding: 6px 4px;
    font-size: 13px;
  }
}

/* ================================
   MODAL DETAILU TRANSAKCE
   ================================ */

.tx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.tx-modal-backdrop.show {
  display: flex;
}

.tx-modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  max-width: 420px;
  width: 92%;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  animation: modalFadeIn 0.2s ease;
  transition:
      background var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
}

.tx-modal:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

@keyframes modalFadeIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Header modalu */
.tx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.tx-modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-main);
}

.tx-modal-close {
  color: var(--color-text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.tx-modal-close:hover {
  color: var(--color-primary-dark);
  transform: scale(1.15);
}

/* Footer modalu */
.tx-modal-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 500px) {
  .tx-modal-footer {
    flex-direction: column;
    width: 100%;
  }

  .tx-modal-footer .btn {
    width: 100%;
  }
}

/* =========================================
   UPLOAD DOKLAD
   ========================================= */

.upload-doc-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
  cursor: pointer;
  transition:
      background var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
}

.upload-doc-button:hover {
  background: var(--color-primary-softer);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* Náhled dokladu (kasičky) */
.receipt-preview {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  transition:
      background var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
}

.receipt-preview:hover {
  background: var(--color-primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.receipt-image {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

/* =========================
   DETAIL MAJETKU - INFO
   ========================= */

.asset-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.asset-info-box:hover {
    background: var(--gray-100);
    box-shadow: var(--shadow-soft);
}

.asset-info-box h3 {
    margin-bottom: 12px;
    font-size: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
}

.info-label {
    font-size: 12px;
    color: #6b7280;
}

.info-value {
    font-weight: 600;
    font-size: 14px;
}

.status-pill-warn {
    display: inline-block;
    background: #fff3cd;
    color: #92400e;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.asset-info-box {
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}



/* mobile */
@media (max-width: 900px) {
    .asset-info-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   DETAIL MAJETKU – layout
   ========================= */

/* Dvousloupec: vlevo fotka, vpravo detail majetku */
.asset-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Levý sloupec s hlavní fotkou */
.asset-layout-main-photo {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  min-width: 0;
}

/* Pravý sloupec s detaily */
.asset-layout-detail {
    flex: 1 1 400px;
  min-width: 0;
}

/* Kontejner kolem hlavní fotky */
.main-photo-wrapper {
    text-align: center;
}

/* Text pod hlavní fotkou (název souboru, velikost) */
.main-photo-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-text-soft);
}

/* Hlavička v kartě (nadpis + akce / info) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.card-header h3 {
    margin: 0;
    font-size: 15px;
}

/* Varianta hlavičky, kde potřebujeme zarovnání nahoru (např. název + QR) */
.card-header-top {
    align-items: flex-start;
    gap: 20px;
}

/* Menší pomocné mezery – může se hodit i jinde */
.mt-1 {
    margin-top: 4px;
}
.mt-2 {
    margin-top: 8px;
}

/* =========================================
   SOUBORY V DETAILU MAJETKU
   ========================================= */

/* fotky + dokumenty – univerzální layout */
.file-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

.file-sections > .card {
    flex: 1 1 320px;
    min-width: 0;
}
.file-sections > .card {
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.file-sections > .card:hover {
    background: var(--color-primary-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

/* Seznam dokumentů */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #f9fafb;
}
.file-row {
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.file-row:hover {
    background: var(--color-primary-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.file-icon {
    font-size: 20px;
    margin-right: 8px;
    margin-top: 2px;
}

.file-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.file-name {
    font-size: 14px;
    font-weight: 500;
    word-break: break-all;
}

.file-extra {
    font-size: 12px;
}

.file-actions {
    margin-left: 8px;
    display: flex;
    align-items: center;
}

/* Přehled nahraných souborů pod uploadem (edit režim) */
.file-chips {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}



/* Jemná oddělovací linka */
.divider-small {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 10px 0;
}

.btn-danger-outline:hover {
    background: #fee2e2;
}

/* Hlavní fotka majetku */
.main-photo-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin: 0 auto;
    object-fit: cover;
}
.main-photo-wrapper img {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.main-photo-wrapper img:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    cursor: zoom-in;
}
.map-box{
  width: 100%;
  height: 350px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.map-box--sm{
  height: 320px;
}
.map-box-bordered{
  border: 1px solid var(--color-border);
}

/* =========================================
   DETAIL PROJEKTU – SEZNAMY INFORMACÍ
   ========================================= */

.project-dl {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  margin: 8px 0 0 0;
  font-size: 13px;
}

.project-dl dt {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}

.project-dl dd {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-main);
}
/* =========================================
   PROJECT DETAIL – NOVÝ LAYOUT
   ========================================= */

.project-detail {
}

/* jedna sekce (blok) */
.project-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.project-section:last-of-type {
  border-bottom: none;
}

/* hlavní hlavička projektu */








/* společný grid pro label–hodnota */
.project-info-grid {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
}

.project-info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}

.project-info-value {
  font-size: 14px;
}

/* menší mezery mezi řádky ve „vnořených“ sekcích */
.project-subsection .project-info-grid {
  margin-top: 6px;
}

/* dvě podsekce vedle sebe (desktop), pod sebou (mobil) */
.project-section-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 900px) {
  

  

  .project-section-grid-2 {
    grid-template-columns: 1fr;
  }

  /* na mobilu label nad hodnotu */
  .project-info-grid {
    grid-template-columns: 1fr;
  }
}

/* titulek podsekce (Objednatel, Stavba...) */
.project-subsection-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Miniatury galerie */

/* Upload input */
.upload-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.upload-file {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.upload-input[type="file"] {
    display: none;
}

.upload-filename {
    color: var(--color-text-soft);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-chip-delete {
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1;
    font-size: 13px;
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #b91c1c;
    cursor: pointer;
}
.file-chip-delete:hover {
    background: #fecaca;
}

/* Souhrn hodin podle zaměstnanců – grid karet */
.employee-summary-grid {
    display: grid;
    gap: 12px;
}
/* V gridu nechci, aby .card dědily svislé odskočení */
.employee-summary-grid > .card {
    margin-top: 0;
}

.trip-row-checked {
    background-color: #d1fae5 !important;   /* světle zelená */
}
/* schovej jen na mobilu (NEpřepisuj display na desktopu) */
@media (max-width: 520px) {
  .hide-mobile { display: none !important; }
}

@media (max-width: 520px) {
  .vehicle-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .vehicle-controls {
    align-items: stretch !important;
  }

  /* vnitřní řádek s inputy + tlačítkem: ať se skládá pod sebe */
  .vehicle-controls > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .vehicle-controls .form-input,
  .vehicle-controls select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .crew-passengers-box {
    max-width: 100% !important;
  }

  .vehicle-controls .btn {
    width: 100%;
  }
}
/* =========================================================
   WORKER APP (mobil)
   ========================================================= */

.worker-wrap {
  max-width: 560px;
  margin: 0 auto;
}

/* horní řádek */
.worker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* stavová pilulka */
.status-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
  font-size: 14px;
}

/* HLAVNÍ TOGGLE TLAČÍTKO */
.worker-toggle {
  width: 100%;
  padding: 22px 16px;
  font-size: 26px;
  font-weight: 800;
  border-radius: 16px;
  border: none;
  cursor: pointer;
}

.worker-toggle.in {
  background: #1f7a1f;
  color: #fff;
}

.worker-toggle.out {
  background: #b00020;
  color: #fff;
}

.worker-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* text pod tlačítkem */
.worker-sub {
  margin-top: 8px;
  font-size: 14px;
}

/* dlaždice */
.worker-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.worker-tile {
  border-radius: 16px;
  padding: 16px;
  min-height: 110px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.worker-tile-title {
  font-size: 16px;
  font-weight: 800;
}

.worker-tile-desc {
  font-size: 13px;
  opacity: 0.7;
}

.worker-tile.disabled {
  opacity: 0.5;
}

/* =========================================================
   HORNÍ LIŠTA – JEDINÁ PRAVDA
   ========================================================= */
.top-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  background: var(--color-bg-surface, #fff);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  min-height: 60px;
}

.top-header-left{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.top-header-right{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.top-header-center{
  text-align: center;
  flex: 0 1 auto;
  min-width: 0;
}

.top-header .logo{
  height: 44px;
  width: auto;
  display: block;
}







.user-logout-btn{
  padding: 4px 10px;
  font-size: .75rem;
}

/* mobil – schovej jen název */
@media (max-width:700px){
  .header-title{ display:none !important; }
}

/* =========================================================
   MOBIL – zmenšit boční odsazení celé aplikace
   ========================================================= */
@media (max-width: 520px) {
  .page-container {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Karty a wrapper tabulek jsou na mobilu zbytečně “tlusté” */

}

/* =========================================================
   LAYOUT HELPERS – SINGLE SOURCE OF TRUTH (shared)
   ========================================================= */

  .card{
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: 16px;
    box-shadow: var(--shadow-soft);
  }


/* sjednotit top margin nadpisu v card (odskočení) */
.card h3:first-child{ margin-top: 0; }

/* =========================================================
   VEHICLES – term karty + hlavní foto
   ========================================================= */

/* aby tlačítka v term kartách seděla dole */
.term-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.term-card form{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.term-card .term-actions{ margin-top: auto; }
.term-card h3{ margin-top: 0; }

/* hlavní fotka vozidla v kartě */
@media (max-width: 900px){
  .vehicle-photo{ height: 180px; }
}
/* =========================================================
   GALLERY – SINGLE SOURCE OF TRUTH (global)
   ========================================================= */
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.thumb{
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px;
  background: var(--color-bg-surface, #fff);
  text-align: center;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.thumb:hover{
  background: var(--color-primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.thumb-image{
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.thumb img,
.thumb-image img{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (max-width: 640px){
  .gallery{
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* =========================================================
   VEHICLES – Dokumenty (buttons)
   ========================================================= */
.doc-tiles{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px){
  .doc-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .doc-tiles{ grid-template-columns: 1fr; }
}

/* “tlačítko” */
.doc-tile{
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-surface);
  padding: 10px 12px;

  display: flex;             /* vodorovně */
  align-items: center;
  gap: 10px;

  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);

  min-height: 56px;
}

.doc-tile:hover{
  background: var(--color-primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* levá ikonka */
.doc-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  font-size: 18px;
  flex: 0 0 auto;
}

/* text (title + sub) */
.doc-title{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
.doc-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* pravé akce */
.doc-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* “Nahráno” pilulka */
.doc-ok{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-weight: 600;
}

/* upload ve stavu “chybí” */
.doc-upload-form{
  display: flex;
  gap: 8px;
  align-items: center;
}
.doc-upload-form input[type="file"]{
  max-width: 170px;
}
/* =========================================================
   VEHICLES – Dokumenty (FORCE GRID) – alias doc-tiles i doc-grid
   ========================================================= */

.doc-tiles,
.doc-grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 1100px){
  .doc-tiles,
  .doc-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px){
  .doc-tiles,
  .doc-grid{
    grid-template-columns: 1fr !important;
  }
}

.doc-tiles .doc-tile,
.doc-grid .doc-tile{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  width: auto !important;
}
/* =========================================================
   VEHICLE DETAIL – layout (photo + info)
   ========================================================= */

.vehicle-basic{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.vehicle-basic-photo{ min-width: 0; }
.vehicle-basic-info{ min-width: 0; }

/* mobil: fotka nahoře, info pod ní */
@media (max-width: 900px){
  .vehicle-basic{
    grid-template-columns: 1fr;
  }
}

/* fotka vozidla */
.vehicle-photo{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* =========================================================
   MODAL – jednoduchý univerzál
   ========================================================= */

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.modal-backdrop.show{
  display: flex;
}

.modal{
  background: var(--color-bg-surface, #fff);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--color-border, #e5e7eb);
  box-shadow: var(--shadow-soft, 0 8px 20px rgba(15,23,42,.12));
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

.modal-body{
  padding: 16px;
}

.modal-footer{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* mobil: footer tlačítka pod sebe */
@media (max-width: 600px){
  .modal-footer{
    flex-direction: column;
    align-items: stretch;
  }
  .modal-footer .btn{ width: 100%; }
}

/* =========================================================
   (protože uvnitř modalu máme grid-3 s cardy)
   ========================================================= */
/* =========================================================
   FILE INPUT – jednotné “moderní” nahrávání
   ========================================================= */

/* reálný input schováme */
.file-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* wrapper řádek */
.file-upload {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* “tlačítko vybrat” */
.file-upload .file-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--gray-50);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  user-select: none;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.file-upload .file-btn:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.file-upload .file-btn:active { transform: translateY(0); }

/* název vybraného souboru */
.file-upload .file-name {
  font-size: 12px;
  color: var(--color-text-muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* když je soubor vybraný */
.file-upload.has-file .file-name { color: var(--color-text-main); }

/* na mobilu ať se to láme hezky */
@media (max-width: 600px){
  .file-upload .file-name{ max-width: 100%; }
}

/* pokud karta používá class .project-card (typicky má i .card) */


/* tlačítko/akce vždy dolů */
.project-card .project-footer,
.project-card .actions,
.project-card .btn,
.project-card a.btn{
  margin-top: auto;
}

/* omez délku textů, ať karta neroste do výšky jen kvůli adrese */
.project-card .project-meta,
.project-card .cash-table-description,
.project-card p,
.project-card .text-muted{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* typicky: meta/info max 3 řádky */
.project-card .project-meta,
.project-card .text-muted{
  -webkit-line-clamp: 3;
}

/* pokud máš někde dlouhou adresu v samostatném řádku, dej jí jen 2 řádky */

/* ==========================================================================
   SPACING HELPERS
   ========================================================================== */

.mb-6  { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-30 { margin-bottom: 30px; }

.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }

.my-16 { margin-top: 16px; margin-bottom: 16px; }

/* ==========================================================================
   LAYOUT HELPERS (flex lego)
   ========================================================================== */

.row      { display: flex; }
.row-wrap { display: flex; flex-wrap: wrap; }
.col      { display: flex; flex-direction: column; }

.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }

.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

.col-wrap{ display:flex; flex-direction:column; flex-wrap:wrap; }
.justify-center{ justify-content:center; }

/* ==========================================================================
   COMPONENT HELPERS (employees)
   ========================================================================== */

.avatar-circle{
  width:140px;
  height:140px;
  border-radius:50%;
  overflow:hidden;
  background:#f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}

.photo-placeholder{
  height:120px;
  background:#f7f7f7;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hidden{ display:none !important; }
.inline{ display:inline !important; }

.flex-1-160{ flex:1 1 160px; }
.flex-1-200{ flex:1 1 200px; }
.flex-1-220{ flex:1 1 220px; }
.flex-2-260{ flex:2 1 260px; }

.text-right{ text-align:right; }
.m-0{ margin:0; }

.card-mini{
  padding: 8px 12px;
  min-width: 180px;
}

.fs-12{ font-size:12px; }
.fs-14{ font-size:14px; }
.fs-18{ font-size:18px; }
.text-666 { color:#666; }

/* standardní reset uvnitř karet – ať nemusíme psát inline margin-top:0 pořád dokola */
.card :is(h1,h2,h3,h4,h5,h6) {
  margin-top: 0;
}
.card :is(h1,h2,h3,h4,h5,h6):last-child {
  margin-bottom: 0;
}
/* =========================================================
   DETAILS / SUMMARY – jednotné chování
   ========================================================= */

.details-summary{
  cursor: pointer;
  user-select: none;
}

/* typografie varianty */
.details-summary-lg{ font-weight: 700; font-size: 15px; } /* bold + 15px */
.details-summary-md{ font-weight: 700; }                  /* jen bold */
.details-summary-600{ font-weight: 600; }
.details-summary-500{ font-weight: 500; }
.details-summary-muted{ color: #555; }

/* když je summary tlačítko (diary_new) */
.btn-summary{
  cursor: pointer;
  user-select: none;
}
/* rozbalovací panel – filtry a souhrny */
.details-summary-panel{
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f5f5f7;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* obal pro rozbalovací panel (odsazení pod ním) */
.tx-filter-panel{
  margin-bottom: 10px;
}

label{ margin: 0; }
.label-block{ display:block; }
.label-mb-6{ margin-bottom:6px; }
.label-my-4{ margin:4px 0; }

.is-clickable{ cursor: pointer; }

.is-hidden{ display:none !important; }

.danger-box{ border:1px solid #f2c3c3; background:#fff5f5; }

.badge-red{ background: var(--color-danger-soft); color: var(--color-danger); }

.danger-outline{ border-color: var(--color-danger) !important; color: var(--color-danger) !important; }

.danger-soft{ border:1px solid var(--color-danger-soft); background: var(--color-danger-soft); }

.grid-auto-260{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; align-items:flex-start; }

.grid-auto-180{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }

.grid-auto-220{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

.summary-value{ font-size:1.3rem; font-weight:600; }

.summary-positive{ color: var(--color-success) !important; }
.summary-negative{ color: var(--color-danger) !important; }

.summary-total{ font-size:1.3rem; font-weight:700; }

.summary-status{ font-size:1.1rem; font-weight:600; }

.tile{ border:1px solid #ddd; border-radius:12px; padding:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.link-plain{ text-decoration:none; color:inherit; }

.flex-1{ flex:1; }

.flex-auto{ flex:0 0 auto; }

.min-160{ min-width:160px; }

.min-220{ min-width:220px; }

.flex-2{ flex:2; }
.min-260{ min-width:260px; }

.min-300{ min-width:300px; }

.flex-1-300{ flex:1 1 300px; }

.min-0{ min-width:0; }
.mt-12{ margin-top:12px; }

.mt-4{ margin-top:4px; }
.cash-card {
  position: relative;
  border: 1px solid #d0d7de;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* barevný pruh vlevo */
.cash-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 999px;
  margin: 10px 0 10px 10px;
}

/* jemné podbarvení celé karty */




.cash-card-main::before   { background: #2f9e44; }
.cash-card-side::before   { background: #f59f00; }
.cash-card-wallet::before { background: #228be6; }

.cash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  background-color: rgba(255,255,255,0.9);
}

.cash-card .dash-content {
  display: flex;
  flex-direction: column;
}

.cash-card .cash-amounts {
  text-align: right;
  white-space: nowrap;
}

.cash-card .cash-amount-main {
  font-size: 16px;
  font-weight: 600;
}

.cash-card .cash-amount-sub {
  font-size: 12px;
  color: #666;
}

/* ===========================
   CASH TAGS
   =========================== */







/* ===========================
   CASH DASHBOARD CARDS - layout polish
   =========================== */

/* zrušit barevné čáry vlevo */
.cash-card::before {
  display: none !important;
  content: none !important;
}

/* karta čistá, čitelná */
.cash-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff !important;
  gap: 20px;
}

/* zrušit barevné podbarvení variant (main/side/wallet) */

/* levá strana */
.cash-card .dash-content {
  flex: 1 1 auto;
  min-width: 0;
}

.cash-card .dash-content * {
  line-height: 1.25;
}

/* pravá strana: částky */
.cash-card .cash-amounts {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

/* hlavní částka výrazněji */
.cash-card .cash-amount-main {
  font-size: 18px;
  font-weight: 800;
}

/* podtext (typ / štítky / drobné info) */
.cash-card .cash-amount-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* název kasičky výraznější (hledáme v kartě typicky h3/strong) */
.cash-card h3,
.cash-card strong {
  font-size: 16px;
  font-weight: 800;
}

/* ===========================
   CASH - unify with dashboard cards
   =========================== */

/* jistota: žádné levé barevné čáry */
.cash-card::before { display:none !important; content:none !important; }

/* rozložení: vlevo popis, vpravo částky */
a.dash-card.cash-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

a.dash-card.cash-card .dash-content {
  flex: 1 1 auto;
  min-width: 0;
}

a.dash-card.cash-card .cash-amounts {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

/* typové rozlišení: jemný outline + badge */
a.dash-card.cash-card {
  border: 1px solid #d0d7de;
}

/* hlavní */

/* vedlejší */

/* peněženka */

/* čitelnost textů uvnitř */
a.dash-card.cash-card .dash-title,
a.dash-card.cash-card h3,
a.dash-card.cash-card strong {
  font-size: 16px;
  font-weight: 800;
}

a.dash-card.cash-card .cash-amount-main {
  font-size: 18px;
  font-weight: 900;
}

a.dash-card.cash-card .cash-amount-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* peněženka: 2 řádky částek (součet nahoře, materiál pod tím) */
a.dash-card.cash-card .cash-amounts .cash-amount-row {
  display: block;
  line-height: 1.25;
}

a.dash-card.cash-card .cash-amounts .cash-amount-row + .cash-amount-row {
  margin-top: 3px;
}

/* ===========================
   CASH - final polish (list)
   =========================== */

a.dash-card.cash-card{
  padding: 10px 14px;          /* víc prostoru než dashboard */
  border-radius: 16px;         /* už ne úplně pill, ale stále jemné */
  gap: 14px;
}

a.dash-card.cash-card .dash-content{
  gap: 3px;
  min-width: 0;
}

a.dash-card.cash-card .dash-name{
  font-size: 15px;
  font-weight: 700;
}

a.dash-card.cash-card .dash-desc{
  font-size: 12px;
}

/* pravý sloupec */
a.dash-card.cash-card .cash-amounts{
  text-align: right;
}

a.dash-card.cash-card .cash-amount-main{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

a.dash-card.cash-card .cash-amount-sub{
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* hover: jen lehce zvednout, ne přebarvit do primary */
a.dash-card.cash-card:hover{
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

/* mobil: ať se částky nezalamují divně */
@media (max-width: 640px){
  a.dash-card.cash-card{
    padding: 10px 12px;
  }
  a.dash-card.cash-card .cash-amount-main{
    font-size: 15px;
  }
}

/* ===========================
   CASH - make cards look like dashboard pills
   =========================== */

a.dash-card.cash-card{
  border-radius: 999px !important; /* stejné jako dashboard */
  padding: 6px 10px !important;    /* stejné jako .dash-card */
  gap: 10px !important;            /* stejné jako .dash-card */
}

/* na mobilu stejně jako dashboard */
@media (max-width: 640px){
  a.dash-card.cash-card{
    padding: 8px 12px !important;
  }
}

/* typografie - jasná hierarchie */
a.dash-card.cash-card .dash-name{
  font-size: 16px !important;
  font-weight: 800 !important;
}

a.dash-card.cash-card .dash-desc{
  font-size: 12px !important;
}

/* pravé hodnoty: méně “křiku”, ale čitelné */
a.dash-card.cash-card .cash-amount-main{
  font-size: 15px !important;
  font-weight: 700 !important;
}

a.dash-card.cash-card .cash-amount-sub{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text-main) !important;
  opacity: .75;
}

/* ===========================
   CASH – left side polish
   =========================== */

/* levá část klidnější */
a.dash-card.cash-card .dash-icon{
  font-size: 16px;       /* menší než dřív */
  opacity: 0.85;
}

a.dash-card.cash-card .dash-name{
  font-size: 15px;       /* sjednocení */
  font-weight: 700;      /* méně křičí */
}

a.dash-card.cash-card .dash-desc{
  font-size: 12px;
  opacity: 0.7;
}

/* víc vzduchu mezi levou a pravou částí */
a.dash-card.cash-card{
  justify-content: space-between;
}

/* ===========================
   CASH – jemně silnější barevné podbarvení
   =========================== */

/* hlavní kasička */

/* vedlejší kasičky */

/* peněženky */

/* hover – jen lehce víc */
a.dash-card.cash-card-main:hover{
  background: rgba(47, 158, 68, 0.14);
}
a.dash-card.cash-card-side:hover{
  background: rgba(245, 159, 0, 0.16);
}
a.dash-card.cash-card-wallet:hover{
  background: rgba(34, 139, 230, 0.14);
}

/* ===========================
   CASH – colors & typography
   =========================== */

/* sjednocená velikost textu vpravo */
a.dash-card.cash-card .cash-amount-main,
a.dash-card.cash-card .cash-amount-sub{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

/* MZDA – červeně */
a.dash-card.cash-card .cash-amount-main{
  color: #c92a2a; /* jemná firemní červená */
}

/* MATERIÁL – zeleně */
a.dash-card.cash-card .cash-amount-sub{
  color: #2f9e44; /* firemní zelená */
  opacity: 1;
}

/* ===========================
   CASH – výraznější podbarvení karet
   =========================== */

/* hlavní kasička */

/* vedlejší kasičky */

/* peněženky */

/* hover – ještě lehce silnější */
a.dash-card.cash-card-main:hover{
  background: rgba(47, 158, 68, 0.22);
}
a.dash-card.cash-card-side:hover{
  background: rgba(245, 159, 0, 0.24);
}
a.dash-card.cash-card-wallet:hover{
  background: rgba(34, 139, 230, 0.22);
}

/* ===========================
   CASH – final tweaks (badges, spacing, stronger tint)
   =========================== */

/* víc místa vpravo pro částky */
a.dash-card.cash-card{
  padding-right: 18px !important;
}

/* pravý blok lehce odsazení + srovnat řádky */
a.dash-card.cash-card .cash-amounts{
  padding-right: 2px;
}

/* sjednotit velikost i váhu obou řádků (přebít vše starší) */
a.dash-card.cash-card .cash-amount-row{
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* MZDA – červeně (jen text, bez badge) */
a.dash-card.cash-card .cash-amount-main{
  color: #c92a2a !important;
}

/* MATERIÁL – tmavě zelený badge */
a.dash-card.cash-card .cash-amount-sub{
  color: #1b5e20 !important;          /* tmavě zelená */
  background: #b7f7b0;                /* světle zelený podklad */
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-block;
  opacity: 1 !important;
}

/* i ZŮSTATEK u kasiček uděláme zelený badge */
a.dash-card.cash-card:not(.cash-card-wallet) .cash-amount-main{
  background: #b7f7b0;
  color: #1b5e20 !important;
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-block;
}

/* podbarvení karet výraznější */

a.dash-card.cash-card-main:hover{   background: rgba(47, 158, 68, 0.34) !important; }
a.dash-card.cash-card-side:hover{   background: rgba(245, 159, 0, 0.36) !important; }
a.dash-card.cash-card-wallet:hover{ background: rgba(34, 139, 230, 0.32) !important; }

/* ===========================
   CASH – final balance (softer tint, text-only green)
   =========================== */

/* === MATERIÁL: jen tmavě zelený text, žádný badge === */
a.dash-card.cash-card .cash-amount-sub{
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;

  color: #1f7a1f !important;   /* tmavě zelená */
  font-weight: 700 !important;
}

/* === ZŮSTATEK u kasiček: taky jen zelený text === */
a.dash-card.cash-card:not(.cash-card-wallet) .cash-amount-main{
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  color: #1f7a1f !important;
  font-weight: 700 !important;
}

/* === podbarvení – STŘED mezi starým a novým === */

a.dash-card.cash-card-main:hover{
  background: rgba(47, 158, 68, 0.26) !important;
}
a.dash-card.cash-card-side:hover{
  background: rgba(245, 159, 0, 0.28) !important;
}
a.dash-card.cash-card-wallet:hover{
  background: rgba(34, 139, 230, 0.26) !important;
}

/* ===========================
   CASH – ultra soft background (final)
   =========================== */


a.dash-card.cash-card-main:hover{
  background: rgba(47, 158, 68, 0.18) !important;
}
a.dash-card.cash-card-side:hover{
  background: rgba(245, 159, 0, 0.20) !important;
}
a.dash-card.cash-card-wallet:hover{
  background: rgba(34, 139, 230, 0.18) !important;
}

/* === Klikací karty (sjednocené chování) === */
.is-clickable {
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.is-clickable:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

/* === Back button (sjednocený vzhled) === */


/* === Page Header (standard 2-row layout) ===
   Row 1: left H1, right tools (search/filters)
   Row 2: left back, right CTA
   Mobile: stack to column, inputs full width
*/
.page-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-header__left,
.page-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.page-header__title {
  margin: 0;
  line-height: 1.2;
}

.page-header__tools,
.page-header__cta {

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-header__description {
  margin: 0;
}


/* Page header – search/tools doprava (desktop) */
.page-header__tools {
  margin-left: auto;
}
  /* tools: desktop sizing */
  .page-header__tools select.search-input {
    width: 220px;
    max-width: 100%;
  }

  .page-header__tools input.search-input,
  .page-header__tools .search-input[type="text"] {
    width: clamp(240px, 30vw, 360px);
    max-width: 100%;
  }

@media (max-width: 768px) {
  /* page-header tools: mobile override for desktop clamp widths */
  .page-header__tools select.search-input,
  .page-header__tools input.search-input,
  .page-header__tools .search-input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-header__row {
    flex-direction: column;
    align-items: stretch;
  }

    .page-header__left,
    .page-header__right,
    .page-header__tools,
    .page-header__cta {
    width: 100%;
    justify-content: flex-start;
  }

  .page-header__tools input,
  .page-header__tools select,
  .page-header__tools textarea,
  .page-header__tools .form-control {
    width: 100%;
  }

    /* mobil: tools vždy pod sebe */
    .page-header__tools {
      flex-direction: column;
      align-items: stretch;
    }


    /* mobil: lepší layout tools – 1 prvek full, 2 prvky půl/půl
       (používá :has(), v Chrome OK; když by ne, zůstane fallback column) */
    .page-header__tools:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }

    .page-header__tools:has(> :nth-child(2)):not(:has(> :nth-child(3))) > * {
      width: 100%;
      max-width: 100%;
    }
    /* mobil: pokud tools obsahují input-with-button, dej je taky pod sebe */
    .page-header__tools .input-with-button {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }

    .page-header__tools .input-with-button > * {
      width: 100%;
      max-width: 100%;
    }


    /* vehicles: mobil – 2 prvky vedle sebe, tlačítko full-width pod tím */
    /* vehicles: mobil – status + hledání full-width */
    .vehicles-tools-form {
      width: 100%;
    }

    .vehicles-tools-form select,
    .vehicles-tools-form input,
    .vehicles-tools-form button,
    .vehicles-tools-form .btn {
      width: 100%;
      max-width: 100%;
    }
    /* vehicles: IMPORTANT OVERRIDE – mobil full-width (přepíše clamp/max-width) */
    .page-header__right.page-header__tools {
      width: 100% !important;
      max-width: 100% !important;
    }

    .vehicles-tools-form {
      width: 100% !important;
      max-width: 100% !important;
    }

    .vehicles-tools-form .search-input,
    .vehicles-tools-form select,
    .vehicles-tools-form input,
    .vehicles-tools-form button,
    .vehicles-tools-form .btn {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box;
      display: block;
    }

  }

/* CACHE_TEST_999 */


/* --- Projects: mobile split header (Back left / Primary right) --- */
/* --- Split header (mobile): Back left / CTA right (NEW page-header pattern) --- */
@media (max-width: 640px) {
  .page-header--split-mobile .page-header__row--bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    align-items: start;
  }

  .page-header--split-mobile .page-header__row--bottom .page-header__back {
    grid-column: 1;
    width: 100%;
  }

  .page-header--split-mobile .page-header__row--bottom .page-header__cta {
    grid-column: 2;
    width: 100%;
    justify-content: flex-end;
  }

  .page-header--split-mobile .page-header__row--bottom .page-header__back .btn,
  .page-header--split-mobile .page-header__row--bottom .page-header__cta .btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

  }

  /* pokud je v CTA víc tlačítek, tak ať jsou pod sebou */
  .page-header--split-mobile .page-header__row--bottom .page-header__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .page-header--split-mobile .page-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  /* Back button -> left column */
  .page-header--split-mobile .page-header-actions 

  /* Primary CTA (e.g. Upravit projekt) -> right column */
  .page-header--split-mobile .page-header-actions .btn.btn-primary {
    grid-column: 2;
    width: 100%;
  }

  /* Other actions (secondary etc.) go full width below */
  .page-header--split-mobile .page-header-actions .btn:not(.btn-back):not(.btn-primary) {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* --- VEHICLES: FORCE full-width tools on mobile (last override) --- */
@media (max-width: 768px) {
  header.page-header .page-header__row--top .page-header__right.page-header__tools,
  header.page-header .page-header__row--top .page-header__right.page-header__tools * {
    max-width: 100% !important;
  }

  header.page-header .page-header__row--top .page-header__right.page-header__tools form.vehicles-tools-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  header.page-header .page-header__row--top .page-header__right.page-header__tools form.vehicles-tools-form select,
  header.page-header .page-header__row--top .page-header__right.page-header__tools form.vehicles-tools-form input,
  header.page-header .page-header__row--top .page-header__right.page-header__tools form.vehicles-tools-form button,
  header.page-header .page-header__row--top .page-header__right.page-header__tools form.vehicles-tools-form .btn,
  header.page-header .page-header__row--top .page-header__right.page-header__tools form.vehicles-tools-form .search-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}

/* Project action bar (detail projektu) */
.project-action-bar {
  margin-bottom: 1rem;
}

.project-action-bar-inner {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .project-action-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

/* =========================
   Data cards (detail views)
   ========================= */

.data-card{
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.data-card-title{
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 600;
}

.data-card .project-info-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6b7280;
}

.data-card .project-info-value {
  font-size: 0.9rem;
  color: #111827;
}

@media (max-width: 768px) {
  .project-section-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =========================
   Data grid – STANDARD
   ========================= */

.data-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
}

.data-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6b7280;
}

.data-value {
  font-size: 0.9rem;
  color: #111827;
}

/* =========================
   Backward compatibility
   Project -> Data grid
   ========================= */

.project-info-grid {
}

.project-info-label {
}

.project-info-value {
}

/* =========================
   Data grid – CANONICAL
   ========================= */

.data-grid,
.project-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
}

.data-label,
.project-info-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6b7280;
}

.data-value,
.project-info-value {
  font-size: 0.9rem;
  color: #111827;
}

/* =========================
   Utility – LEGACY SCALE
   Nepoužívat v novém kódu
   =========================

   Legacy spacing:
   mt-10 mt-12 mt-14 mt-16 mt-20 mt-24
   mb-6 mb-10 mb-12 mb-20 mb-24 mb-30
   my-16

   Legacy gap:
   gap-6 gap-10 gap-12 gap-20 gap-24

   Legacy flex / grid:
   flex-1-160 flex-1-200 flex-1-220 flex-1-300
   flex-2 flex-2-260
   grid-auto-180 grid-auto-220 grid-auto-260
   min-160 min-220 min-260 min-300
*/

/* =========================
   Asset -> Data components (alias)
   Udržuje vzhled, snižuje výjimky
   ========================= */


@media (max-width: 900px){
  .vehicle-photo{ height: 180px; }
}

/* =========================================
   PROJECT VIEW – layout (main + sidebar)
   ========================================= */

.project-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px){
  .project-layout{
    grid-template-columns: 1fr;
  }
}

.project-sidebar{
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 1100px){
  .project-sidebar{
    position: static;
    top: auto;
  }
}

/* PROJECT VIEW – sidebar actions */
.project-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-actions .btn{
  width: 100%;
  justify-content: center;
}

/* --- Project: 3-card grid (desktop), 2/1 cols on smaller screens --- */
.project-section-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

@media (max-width: 1200px){
  .project-section-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 680px){
  .project-section-grid-3{
    grid-template-columns:1fr;
  }
}


/* ===== Project info grid: wrap long values ===== */
.project-info-value{
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* --- Diary list: clickable rows + mobile columns --- */
tr.is-clickable { cursor: pointer; }

@media (hover: hover) {
  tr.is-clickable:hover { background: rgba(0,0,0,0.03); }
}

@media (max-width: 640px) {
  .col-weather,
  .col-workers,
  .col-created {
    display: none !important;
  }

  /* ať je popis čitelný na 1–2 řádky */
  .diary-table td {
    word-break: break-word;
  }
}

@media (max-width: 640px) {
  /* Datum úsporně */
  .diary-table th.u-w-90 { width: 72px; }
  .diary-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* Popis ať je čitelný */
  .diary-table td:nth-child(4) { line-height: 1.25; word-break: break-word; }
}

/* Top bar spacing */
.top-bar {
  margin-bottom: 12px;
}

/* === Mobile: left wraps, right fits (clients / subcontractors / employees) === */
@media (max-width: 640px) {

  .clients-table,
  .subcontractors-table,
  .employees-table {
    table-layout: fixed;
    width: 100%;
  }

  /* LEVÝ SLOUPEC – může se lámat */
  .clients-table td:first-child,
  .subcontractors-table td:first-child,
  .employees-table td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* TELEFON – musí se vejít */
  .clients-table td:nth-child(2),
  .subcontractors-table td:nth-child(2),
  .employees-table td:nth-child(2) {
    width: 96px;
    white-space: nowrap;
    vertical-align: top;
  }

  /* IKONY / STAV – musí se vejít */
  .clients-table td:nth-child(3),
  .subcontractors-table td:nth-child(3),
  .employees-table td:nth-child(3) {
    width: 44px;
    white-space: nowrap;
    text-align: center;
    vertical-align: top;
  }
}



/* payroll prev-balance quick row */
.payroll-quick-expenses--single{
  margin-top: 8px;
}
.payroll-quick-expense--prev-balance .payroll-quick-expense__amount{
  width: 120px;
}

/* ===== Payroll summary highlight ===== */
.summary-value {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.summary-value--final {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0a7a2f;
}

/* ===== Payroll summary highlight ===== */
.summary-value{
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.summary-value--final{
  font-size: 1.6rem;
  font-weight: 800;
}