/* ==========================================================================
   REDRA Layout
   Source of truth:
   - Page header
   - Generic layout helpers (grids, columns) – migrated gradually
   ========================================================================== */
/* =========================================================
   CARD ROW SYSTEM – JEDINÁ PRAVDA
   ========================================================= */

.card-row,
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.card-row,
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .card-row,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CARD LAYOUT (equal height in rows/grids)
   ========================================================================== */

/* karta je vždy flex (v řádcích / gridu) */
.card-row > .card,
.grid-2 > .card,
.grid-3 > .card,
.grid-4 > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-row > .card > .card-footer,
.grid-2 > .card > .card-footer,
.grid-3 > .card > .card-footer,
.grid-4 > .card > .card-footer {
  margin-top: auto;
}

/* === UI UTILITIES: audit cleanup (2025-12-29) === */
.u-w-60{width:60px;}
.u-w-120{width:120px;}
.u-w-140{width:140px;}

.u-mb-4{margin-bottom:4px;}
.u-mb-8{margin-bottom:8px;}
.u-mb-10{margin-bottom:10px;}
.u-mb-12{margin-bottom:12px;}
.u-mb-16{margin-bottom:16px;}
.u-mt-16{margin-top:16px;}
.u-mt-40{margin-top:40px;}
.u-ml-8{margin-left:8px;}

.u-text-13{font-size:13px;}
.u-label-meta{font-size:12px;text-transform:uppercase;color:#6b7280;margin-bottom:4px;}
.u-text-muted{color:#666;}
.u-text-danger{color:#b00020;}

.u-img-cover{width:100%;height:100%;object-fit:cover;}

/* === UI UTILITIES: trip modal (2025-12-29) === */
.u-mt-6{margin-top:6px;}
.u-mt-10{margin-top:10px;}
.u-pad-10{padding:10px;}
.u-pad-4-8{padding:4px 8px;}
.u-radius-10{border-radius:10px;}
.u-panel{border:1px solid #e5e7eb;border-radius:12px;background:#fff;}

/* === UI UTILITIES: ccs day_overview (2025-12-29) === */
.u-minw-170{min-width:170px;}
.u-pt-0{padding-top:0;}
.u-radius-pill{border-radius:999px;}

/* === UI UTILITIES: cash_detail (2025-12-29) === */
.u-minw-260{min-width:260px;}
.u-list-compact{margin:8px 0 0 18px;padding:0;font-size:13px;}

/* === UI UTILITIES: table widths (asset_settings) (2025-12-29) === */
.u-w-80{width:80px;}
.u-w-150{width:150px;}
.u-w-200{width:200px;}

/* === UI UTILITIES: task_detail (2025-12-29) === */
.u-w-full{width:100%;}
.u-bt-border{border-top:1px solid #e5e7eb;}
.u-bb-border{border-bottom:1px solid #e5e7eb;}
.u-pt-12{padding-top:12px;}
.u-py-8{padding-top:8px;padding-bottom:8px;}
.u-label-small{font-size:12px;color:#6b7280;margin-bottom:2px;}
.u-text-success{color:#16a34a;font-weight:600;}
.u-text-warn{color:#ea580c;font-weight:600;}
.u-text-muted-14{color:#6b7280;font-size:14px;}

/* === UI UTILITIES: employees_detail (2025-12-29) === */
.u-grid-span-all{grid-column:1 / -1;}
.u-text-15-muted{color:#666;font-size:15px;}
.u-text-13-muted2{font-size:13px;color:#777;}
.u-text-14-break{font-size:14px;word-break:break-word;}

.u-icon-user{font-size:48px;color:#aaa;}
.u-filetag{font-size:28px;font-weight:bold;}
.u-filetag--pdf{color:#d32f2f;}
.u-filetag--doc{color:#1565c0;}
.u-icon-file{font-size:32px;}

.u-corner-badge{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,0.6);color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;}

/* === UI UTILITIES: asset_detail (2025-12-29) === */
.u-mb-6{margin-bottom:6px;}
.u-help-11{font-size:11px;padding:2px 6px;margin-top:2px;}
.u-pill-blue{font-size:12px;padding:2px 6px;border-radius:999px;background:#dbeafe;color:#1d4ed8;}
.u-img-contain-rounded{max-width:100%;max-height:100%;border-radius:8px;}
.u-thumb-120{width:120px;height:120px;border:1px solid #e5e7eb;padding:6px;background:#fff;border-radius:8px;}
.u-dropzone{padding:20px;border:1px dashed #d1d5db;border-radius:8px;color:#6b7280;font-size:14px;}

/* === UI UTILITIES: cash_wallet (2025-12-29) === */
.u-icon-18{font-size:18px;}
.u-hidden{display:flex;}

.u-maxw-520{max-width:520px;}

/* === UI UTILITIES: vehicle_detail (2025-12-29) === */
.u-mb-0{margin-bottom:0;}

/* === UI UTILITIES: diary_list (2025-12-29) === */
.u-w-90{width:90px;}
.u-w-130{width:130px;}
.u-w-220{width:220px;}
.u-nowrap{white-space:nowrap;}
.u-inline{display:inline;}
.u-ml-4{margin-left:4px;}

/* === UI UTILITIES: tasks list (2025-12-29) === */
.u-w-40{width:40px;}
.u-block{display:block;}
.u-gap-24{gap:24px;}
.u-items-start{align-items:flex-start;}

/* === UI UTILITIES: employees_form (2025-12-29) === */
.u-mt-24{margin-top:24px;}
.u-pos-rel{position:relative;}




/* === CCS crew controls (day_overview) === */
.ccs-crew-grid{
  display: grid;
  grid-template-columns: 170px minmax(320px, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.ccs-crew-grid .form-group{ margin: 0; }
.ccs-crew-grid .form-label{ margin-bottom: 2px; }

/* pillbar: zalamování + rozumná výška */
.ccs-crew-grid .ccs-pillbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

/* aby se to na desktopu nerozbíhalo do nekonečna */
.ccs-crew-grid .crew-passengers-box{ min-width: 0; }

/* tlačítko držet vpravo */
.ccs-crew-grid > .btn{
  justify-self: end;

}

/* tablet/mobil: složit do 1 sloupce */
@media (max-width: 720px){
  .ccs-crew-grid{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ccs-crew-grid > .btn{
    justify-self: stretch;
    width: 100%;
  }
}

/* === CCS /ccs/day header layout (2025-12-30) === */
.ccs-day-header-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "h1   date"
    "back sync";
  gap: 12px;
  align-items: center;
}

.ccs-day-header-grid .ccs-h1{ grid-area: h1; }
.ccs-day-header-grid .ccs-date{ grid-area: date; }
.ccs-day-header-grid .ccs-back{ grid-area: back; }
.ccs-day-header-grid .ccs-sync{ grid-area: sync; justify-self: end; }

.ccs-day-header-grid .page-header-actions{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* mobil: H1, pod tím 50/50 back+sync, pod tím datum full width */
@media (max-width: 720px){
  .ccs-day-header-grid .ccs-back,
  .ccs-day-header-grid .ccs-sync{
    width: 100%;
  }

  .ccs-day-header-grid .ccs-back .btn,
  .ccs-day-header-grid .ccs-sync .btn{
    width: 100%;
  }

  .ccs-day-header-grid .ccs-sync{ justify-self: stretch; }

  .ccs-day-header-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "h1   h1"
      "back sync"
      "date date";
  }
  .ccs-day-header-grid .ccs-sync{ justify-self: end; }
  .ccs-day-header-grid .page-header-actions{
    justify-content: stretch;
    width: 100%;
  }
  .ccs-day-header-grid .page-header-actions input[type="date"]{
    width: 100%;
  }
}


/* === CCS: day summary (locked) compact cards (2025-12-30) === */
.employee-summary-grid{
  display:grid;
  gap:12px;
}

/* desktop: 2 sloupce, ať to není dlouhé */
@media (min-width: 980px){
  .employee-summary-grid{
    grid-template-columns: 1fr 1fr;
    align-items:start;
  }
}

/* kompaktnější karta jen pro souhrn dne */
.employee-summary-card{
  padding:12px;
}

.employee-summary-card .form-group{ margin:0; }
.employee-summary-card .form-label{ margin-bottom:2px; }
.employee-summary-card .row-wrap{ gap:8px; }
.employee-summary-card .col{ gap:8px; }

/* "uloženo" řádek (klikací) */
.ccs-done-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  cursor:pointer;
}

.ccs-done-row__meta{
  margin-top:2px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ccs-badge-saved{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  background:#16a34a;
  color:#fff;
}


.ccs-done-row__name{ font-weight:600; }


/* === CCS: employee summary - compact manual time row (2025-12-30) === */
.employee-summary-card .ccs-manual-time-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap:8px;
  align-items:end;
}

.employee-summary-card .ccs-manual-time-row .form-group{
  margin:0;
}

.employee-summary-card .ccs-manual-time-row .btn{
  padding:6px 10px; /* menší než default, ale pořád klikatelné */
  line-height:1.1;
}

/* mobil: dáme to do 2 řádků, ať to není natlačené */
@media (max-width: 720px){
  .employee-summary-card .ccs-manual-time-row{
    grid-template-columns: 1fr auto;
  }
}


.employee-summary-card .ccs-manual-time-col{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.employee-summary-card .manual-start-input,
.employee-summary-card .manual-end-input{
  max-width:140px;
}


/* ===== Login page ===== */
.page-container.login-page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  max-width: 520px;
}

.page-container.login-page .card{
  width: 100%;
  max-width: 420px;
}

.page-container.login-page .actions{
  margin-top: 12px;
}

.page-container.login-page .actions .btn{
  width: 100%;
}

/* ===== Login background watermark (logo) ===== */
.page-container.login-page{
  position: relative;
}

/* full-page background */
.page-container.login-page::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.92) 35%, rgba(255,255,255,0.96) 100%),
    url("/static/logo.png") no-repeat center 22%;
  background-size: cover, min(900px, 80vw);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* keep login content above background */
.page-container.login-page > *{
  position: relative;
  z-index: 1;
}

/* tint the login card */
.page-container.login-page .card{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(6px);
}




/* ===== Project view layout (PC vs Mobile) ===== */
.project-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.project-top-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.project-nav-mobile{
  display:flex;
  margin-top:10px;
  gap:8px;
}

.project-nav-mobile .btn{
  flex:1 1 auto;
}

/* Moduly: PC 2 sloupce (levý/pravý), mobil 1 sloupec */
.project-modules .data-card{
  width:100%;
}

.project-modules{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
  align-items:start;
}

.project-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

@media (max-width: 900px){

  .project-modules{
    grid-template-columns: 1fr;
  }
  .project-nav-mobile{
    display:flex;
  }
}


.project-title-row{
  margin-top: 10px;
}


/* ===== Project header mobile buttons 50/50 ===== */
@media (max-width: 900px){
  .project-topbar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .project-topbar .page-header__back,
  .project-topbar .project-top-actions{
    width: 100%;
  }

  .project-topbar .btn{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   COSTS – součty dokladů (templates/costs/new.html)
   Používá: .summary-box .summary-label .summary-value
   ========================================================= */

.summary-box{
  padding: 14px 18px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fafbfc;
  height: 100%;
}

.summary-label{
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  line-height: 1.1;
}

.summary-value{
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
/* =========================================================
   COSTS – součty dokladů (templates/costs/new.html)
   Používá: .summary-box .summary-label .summary-value
   ========================================================= */

.summary-box{
  padding: 14px 18px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fafbfc;
  height: 100%;
}

.summary-label{
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  line-height: 1.1;
}

.summary-value{
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   COSTS / NEW — mobile fixes (only inside .costs-new-page)
   ========================================================= */

@media (max-width: 768px){

  /* 1) FIX: vynutit wrap gridu bootstrap-like */
  .costs-new-page .row{
    flex-wrap: wrap !important;
  }

  /* 2) Na mobilu udělej z col-* plnou šířku,
        ale NE uvnitř hlavního FORM (tam budeme chtít 2 sloupce) */
  .costs-new-page :not(form) > .row [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* 3) Akční tlačítka vždy pod sebou a full width */
  .costs-new-page .costs-actions > .btn,
  .costs-new-page .costs-actions > a.btn{
    width: 100%;
  }

  /* 4) Souhrny: ať jsou příjemně čitelné */
  .costs-new-page .summary-box{
    padding: 12px;
  }
  .costs-new-page .summary-value{
    font-size: 1.25rem;
    line-height: 1.2;
  }

  /* 5) Filtry: tlačítka pod sebe */
  .costs-new-page form.row.g-2.align-items-end .d-flex{
    flex-direction: column;
    align-items: stretch;
  }
  .costs-new-page form.row.g-2.align-items-end .d-flex .btn,
  .costs-new-page form.row.g-2.align-items-end .d-flex a.btn{
    width: 100%;
  }

  /* 6) Tabulka dokladů: schovej vybrané sloupce jen na mobilu
        POZOR: pořadí v <thead>:
        1 Datum, 2 Projekt, 3 Bez DPH, 4 S DPH, 5 Dodavatel, 6 Číslo, 7 Popis, 8 Akce */
  .costs-new-page #recent_costs_table th:nth-child(3),
  .costs-new-page #recent_costs_table td:nth-child(3),
  .costs-new-page #recent_costs_table th:nth-child(5),
  .costs-new-page #recent_costs_table td:nth-child(5),
  .costs-new-page #recent_costs_table th:nth-child(6),
  .costs-new-page #recent_costs_table td:nth-child(6){
    display: none;
  }

  /* 7) Tabulka: trochu zmenšit padding, ať se vejde víc */
  .costs-new-page #recent_costs_table td,
  .costs-new-page #recent_costs_table th{
    padding: 8px 10px;
    vertical-align: top;
  }

  /* 8) Na mobilu roztáhnout obsah stránky do šířky jako tabulka */
  .costs-new-page{
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

  .costs-new-page > .mb-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .costs-new-page .card{
    margin-left: 0;
    margin-right: 0;
  }

  .costs-new-page .card-body{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
  /* =========================================================
     9) /costs/new FORM: řádek 2 a 3 jako 2 sloupce na mobilu
     - ŘÁDEK 2: Datum, Bez DPH, S DPH, Období => 2 sloupce
     - ŘÁDEK 3: Kategorie, Dodavatel, Popis => 2 sloupce, Popis přes celou šířku
     ========================================================= */

  /* řádek 2 = druhý .row ve formuláři (hned po řádku "Projekt + DPH") */
  .costs-new-page form > .row:nth-of-type(2){
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 10px !important;
  }
  .costs-new-page form > .row:nth-of-type(2) > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* řádek 3 */
  .costs-new-page form > .row:nth-of-type(3){
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 10px !important;
  }
  .costs-new-page form > .row:nth-of-type(3) > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Popis (col-md-6) přes celou šířku */
  .costs-new-page form > .row:nth-of-type(3) > .col-md-6{
    grid-column: 1 / -1 !important;
  }

  /* =========================================================
     10) Tabulka dokladů: opravdu zmenšit (přepsat i globální .table)
     ========================================================= */
  .costs-new-page #recent_costs_table{
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .costs-new-page #recent_costs_table td,
  .costs-new-page #recent_costs_table th{
    padding: 6px 8px !important;
  }