/* public/assets/css/style.css — light theme + liquid glass + sidebar (final mobile-safe) */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f8fb;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:rgba(255,255,255,0.72);
  --card-grad-1:rgba(255,255,255,0.85);
  --card-grad-2:rgba(255,255,255,0.60);
  --primary:#eb384a;
  --primary-contrast:#ffffff;
  --radius:16px;
  --shadow-sm:0 6px 18px rgba(17,24,39,.06);
  --shadow:0 12px 32px rgba(17,24,39,.08);
  --shadow-lg:0 18px 50px rgba(17,24,39,.10);
  --ring:0 0 0 4px rgba(235,56,74,.15);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  height:100%;
  -webkit-text-size-adjust:100%;
}

/* jemná vinětace pro sklo */
body:before{
  content:"";position:fixed;inset:-20% -10% auto -10%;height:40%;
  pointer-events:none;z-index:-1;
  background:
    radial-gradient(1200px 420px at 20% -10%, var(--bg-soft), transparent 60%),
    radial-gradient(1000px 380px at 100% -20%, #fff, transparent 55%);
}

a{color:var(--primary);text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:20px}
.container.narrow{max-width:980px}

.card{
  background:linear-gradient(135deg,var(--card-grad-1),var(--card-grad-2));
  border:1px solid rgba(17,24,39,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  position:relative;
}
.card:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

/* Inputs & forms */
label{font-size:14px;color:var(--muted);display:block;margin:6px 0}
.input, select, textarea{
  width:100%;border-radius:14px;border:1px solid var(--border);
  background:#fff;color:var(--text);
  padding:12px 14px;font-size:13px;min-height:44px;
  transition:.15s border-color,.15s box-shadow,.15s background-color;
  box-shadow:var(--shadow-sm);
}
textarea{min-height:120px;resize:vertical}
.input:focus, select:focus, textarea:focus{
  border-color:var(--primary); box-shadow:var(--ring),var(--shadow-sm);
  outline:none;background:#fff;
}
.input[disabled], select[disabled], textarea[disabled]{opacity:.6;cursor:not-allowed}

.form-grid{display:grid;gap:16px}
@media(min-width:720px){ .form-grid.cols-2{grid-template-columns:1fr 1fr} }
@media(min-width:1080px){ .form-grid.cols-3{grid-template-columns:1fr 1fr 1fr} }

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:8px;border:1px solid var(--border);
  font-size:14px;
  background:#fff;color:var(--text);cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:.15s transform,.15s box-shadow,.15s background-color;
  height: 45px;


}

.btn:hover{
  background-color: #007611;
  color: white;
  border:none;
}

.btn-secondary--big{color:black!important;}
.btn-secondary--big:hover{background-color:white!important;color: var(--primary)!important;}

.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--primary);border-color:var(--primary);color:var(--primary-contrast);
}
.btn-primary:hover{filter:brightness(.97)}
.btn-secondary{
  background:transparent;border:1.5px solid var(--primary);color:var(--primary);
}
.btn-secondary:hover{background-color:var(--primary);color:white;}

/* Zelené CTA (login) */
.checkbox-inline{display:flex;align-items:center;gap:8px}
.btn-success{
  background:#007611;border-color:#007611;color:#fff;
  box-shadow:0 8px 20px rgba(0,118,17,.25);
}
.btn-success:hover{
  filter:brightness(.97);box-shadow:0 12px 28px rgba(0,118,17,.35);color:white;
}

/* Badges & helpers */
.badge{padding:6px 10px;border-radius:10px;background:#f3f4f6;border:1px solid var(--border);font-size:12px;color:#374151}
.helper{font-size:13px;color:var(--muted)}

/* Gridy */
.grid{display:grid;gap:18px}
.login-layout{grid-template-columns:1fr}

/* ===== App shell + sidebar ===== */
.app-shell{display:grid;grid-template-columns:1fr;min-height:100dvh}
@media(min-width:1000px){.app-shell{grid-template-columns:auto 1fr}}

.sidebar{
  background:linear-gradient(135deg,var(--card-grad-1),var(--card-grad-2));
  border-right:1px solid rgba(17,24,39,.06);
  width:240px;transition:.2s width,.2s transform;will-change:transform;
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:var(--shadow);
}
.sidebar.collapsed{width:64px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px 12px;border-bottom:1px solid var(--border)}
.sidebar .brand img{display:block}
.sidebar .brand .logo-full{height:60px;margin:0 auto}
.sidebar .brand .logo-icon{height:35px;margin:0 auto}

/* přepínání loga */
.sidebar.collapsed .logo-full{display:none}
.sidebar:not(.collapsed) .logo-icon{display:none}

/* jedno tlačítko přímo v sidebaru */
.sidebar .toggle{padding:10px 12px;border-bottom:1px solid var(--border)}
.sidebar .toggle button{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.sidebar .toggle button:hover{background:#f8fafc}

.sidebar .nav{padding:10px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:#111827;
  border:1px solid transparent;transition:.15s background,.15s border-color,.15s color;
}
.nav a .label{white-space:nowrap}
.icon{width:20px;height:20px;display:inline-block}

/* Ikony */
.nav a .icon, .nav a .icon *{stroke:#111827;color:#111827;fill:none}
.nav a:hover{background:#f8fafc;border-color:#eef0f3}
.nav a.active{background:rgba(235,56,74,.08);color:var(--primary);border-color:rgba(235,56,74,.25)}
.nav a.active .icon, .nav a.active .icon *{stroke:var(--primary);color:var(--primary)}

/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;background:linear-gradient(135deg,var(--card-grad-1),var(--card-grad-2));
  position:sticky;top:0;z-index:10;
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
}

/* ===== COLLAPSED: jen ikony ===== */
.sidebar.collapsed .nav a{
  display:grid !important;grid-auto-flow:row;justify-items:center;align-items:center;
  gap:0 !important;padding-left:0 !important;padding-right:0 !important;min-height:46px;
}
.sidebar.collapsed .nav a .label,
.sidebar.collapsed .toggle .label{display:none !important;visibility:hidden !important}
.sidebar.collapsed .nav a .icon{display:block !important;width:22px !important;height:22px !important;flex:none !important;margin:0 auto !important}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table thead th{font-size:13px;color:#6b7280;text-align:left;padding:0 12px; text-align:center;}
.table tbody tr{background:#fff;box-shadow:var(--shadow-sm)}
.table tbody td{padding:12px 12px;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;text-align:center;
}
.table tbody tr:first-child td{border-top-left-radius:12px;border-top-right-radius:12px}
.table tbody tr:last-child td{border-bottom-left-radius:12px;border-bottom-right-radius:12px}

/* Utilities */
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.p-0{padding:0}.p-8{padding:8px}.p-12{padding:12px}.p-16{padding:16px}.p-20{padding:20px}
.hidden{display:none}

/* --- Login/Reset/Forgot — 2 řádky s malým logem nahoře --- */
.login-title{ text-align:center;font-size:22px;font-weight:700;margin:4px 0 12px 0; }

.login-container{
  padding:0;height:100vh;height:100dvh;height:100svh;min-height:100svh;overflow:hidden;
}
.login-layout{
  align-items:center !important;overflow:hidden;
}

/* karta uprostřed, šířka jako dřív */
.login-layout > .card{
  justify-self:center;align-self:center;margin:0;
  width:min(520px,92%);
}

/* Přepnutí na 2 řádky a logo těsně nad boxem — jen pro stránky BEZ registrace */
.login-layout:not(:has(#regForm)){
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  row-gap:48px !important;
  align-items:start !important;
}

/* logo do .right-pane a schovat velký obrázek */
.login-layout:not(:has(#regForm)) .right-pane{ display:block !important; height:auto !important; align-self:end !important; }
.login-layout:not(:has(#regForm)) .right-pane .img-cover{ display:none !important; }
.login-layout:not(:has(#regForm)) .right-pane::before{
  content:""; display:block; width:200px; height:160px; margin:0 auto 6px !important;
  background:url("/assets/pic/votopo_logo_1.png") center/contain no-repeat;
  opacity:.95;
}

.login-layout .card{
  order:2;
}

/* Na mobilech vynutíme zobrazení loga také */
@media (max-width:899px){
  .login-layout:not(:has(#regForm)) .right-pane{ display:block !important; }
}

/* Akce (checkbox + tlačítko) */
.form-actions{
  display:grid !important;grid-template-columns:1fr 2fr;align-items:center;column-gap:12px;
}
.form-actions .checkbox-inline{justify-self:start}
.form-actions .btn-success{width:100%;justify-content:center}
@media (max-width:640px){
  .form-actions{grid-template-columns:1fr;row-gap:10px}
  .form-actions .checkbox-inline{justify-self:center}
  .form-actions .btn-success{width:100%}
}

.muted-links{
  display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:14px;
}
.muted-links a{color:var(--muted)}
.muted-links a:hover{color:#374151}

/* Nízké displeje – drobná kompakce */
@media (max-height:740px){
  .login-layout .card{padding:14px; order:2}
  .login-title{margin:2px 0 8px 0;font-size:20px}
  .input, select, textarea{min-height:40px;padding:10px 12px}
  .btn, .btn-success{padding:10px 12px}
  .muted-links{margin-top:6px}
}
@media (max-height:600px){ .login-layout .card{transform:scale(.96);transform-origin:center} }
@media (max-height:540px){ .login-layout .card{transform:scale(.92)} }

/* === Pill toggle: Zákazník / Dodavatel === */
.pill-wrap{margin-bottom:6px}
.pill-toggle{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--border);border-radius:999px;background:#fff;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.pill-toggle input{display:none}
.pill-toggle .indicator{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 8px);
  border-radius:999px;background:var(--primary);
  box-shadow:0 8px 20px rgba(235,56,74,.25);
  transition:transform .22s ease;will-change:transform;
}
.pill-toggle .option{
  text-align:center;padding:10px 12px;cursor:pointer;user-select:none;
  font-weight:600;font-size:14px;color:#6b7280;position:relative;z-index:1;
}
.pill-toggle.active-left .option.left{color:#fff}
.pill-toggle.active-right .option.right{color:#fff}
.pill-toggle.active-right .indicator{transform:translateX(100%)}
.pill-toggle:focus-within{box-shadow:var(--ring),var(--shadow-sm);border-color:var(--primary)}

/* === Nice select (liquid glass) === */
label span, label > .label-text{font-size:14px;color:var(--muted)}
select:not([multiple]){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;min-height:46px;padding:12px 44px 12px 14px;
  border-radius:10px;border:1px solid var(--border);
  background:linear-gradient(135deg,var(--card-grad-1),var(--card-grad-2)) padding-box,#fff border-box;
  color:var(--text);box-shadow:var(--shadow-sm);
  transition:.15s border-color,.15s box-shadow,.15s background-color;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px;
}
select:not([multiple]):hover{box-shadow:var(--shadow)}
select:not([multiple]):focus{border-color:var(--primary);box-shadow:var(--ring),var(--shadow-sm);outline:none}
select[disabled]{opacity:.6;cursor:not-allowed}
select:invalid{color:var(--muted)}
select option[value=""]{color:#9ca3af}
select::-ms-expand{display:none}

/* Drobnost: centrovaný text #icoStatus */
.mt-8{text-align:center}

/* ===== REGISTER: žádný vnitřní scroll, stránka scrolluje jen když je třeba ===== */

/* Kontejner stránky – nefixovat výšku ani overflow */
.container.login-container:has(#regForm){
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-block: 16px; /* trochu prostoru nahoře/dole */
}

/* Grid wrapper – povolit přirozenou výšku/flow */
.login-layout:has(#regForm){
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: start !important;
  grid-template-columns: 1fr !important; /* jeden sloupec */
  row-gap: 16px !important;
}

/* Karta s formulářem – žádný max-height, žádný vnitřní scroll */
.login-layout > .card:has(#regForm){
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 20px;  /* klidně uprav */
  padding: 24px 28px;           /* příjemné okraje */
}

/* Mobil – o něco menší vnitřní padding */
@media (max-width: 640px){
  .login-layout > .card:has(#regForm){
    padding: 20px 16px;
  }
  .muted{
    display: inline-flex;
  }
  .badge{
    text-align: center;
    font-size:10px;
  }
}

/* Request form – žádný fixed height, stránka scrolluje přirozeně */
.container.login-container:has(#reqForm){
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-block: 16px;
 
}

.login-layout:has(#reqForm){
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  grid-template-columns: 1fr !important;
  row-gap: 16px !important;
  align-items: start !important;
}


/* logo v levém horním rohu */
.login-layout:has(#regForm) .right-pane{
  position:relative; left:10px;
  width:160px; height:44px;
  display:block !important;
  z-index:5; pointer-events:none;
}
.login-layout:has(#regForm) .right-pane .img-cover{ display:none !important; }
.login-layout:has(#regForm) .right-pane::before{
  content:""; display:block; width:100%; height:100%;
  background:url("/assets/pic/votopo_logo_1.png") left top/contain no-repeat;
  opacity:.95;
}
@media (max-width:480px){
  .login-layout:has(#regForm) .right-pane{
    width:136px;
    height:38px;
  }

  .container.login-container:has(#reqForm),
  .container.login-container:has(#regForm){
    margin-top:0 !important;
  }
}

@media (max-width:999px){
  .container.login-container:has(#reqForm),
  .container.login-container:has(#regForm){
    margin-top:0 !important;
  }
}



/* rozumné roztažení gridu ve formuláři na větších displejích */
@media (min-width:900px){
  .login-layout:has(#regForm) .form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .login-layout:has(#regForm) .form-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}

/* na mobilech nech jeden sloupec a dostatečný vnitřní padding už je výše */

/* Request form layout (#reqForm) – karta uprostřed, logo vlevo nahoře (klikací) */
.login-layout:has(#reqForm) > .card{
  width: min(840px, 96%) !important;
  margin: 80px auto 24px !important;
}

/* logo v levém horním rohu, klikací odkaz na app.votopo.cz */
.login-layout:has(#reqForm) .right-pane{
  position: fixed;
  top: 12px;
  left: 12px;
  width: 160px;
  height: auto;
  display: block !important;
  z-index: 20;
  pointer-events: auto;
}

/* u request formuláře nepotřebujeme pseudo-element s backgroundem, používáme <img> */
.login-layout:has(#reqForm) .right-pane::before{
  content: none !important;
}

/* samotný <img> */
.login-layout:has(#reqForm) .right-pane .img-cover{
  display: block !important;
  width: 100%;
  height: auto;
}

@media (max-width:480px){
  .login-layout:has(#reqForm) .right-pane{
    width: 136px;
  }
}


.avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #f3f4f6; /* jemné pozadí pro prázdné obrázky */
  display: block;
}

/* === Mobilní header + offcanvas sidebar === */
.app-mobile-header{
  display:none;
}

@media (max-width:999px){
  .app-mobile-header{
    position:fixed;
    display:block;
    top:0;
    left:0;
    right:0;
    height:56px;
    background:linear-gradient(135deg,var(--card-grad-1),var(--card-grad-2));
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    backdrop-filter:blur(10px) saturate(160%);
    z-index:60;
  }

  .app-mobile-header-inner{
    
    margin:0 auto;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
  }

  .app-mobile-logo img{
    height:32px;
    display:block;
  }

  .mobile-menu-btn{
    border:none;
    background:white;
    border-radius:999px;
    padding:6px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111827;
    cursor:pointer;
  }

  .mobile-menu-btn:active{
    transform:translateY(1px);
  }

  /* Sidebar jako offcanvas vpravo */
  .sidebar{
    position:fixed;
    top:0px;
    right:0;
    left:auto;
    bottom:0;
    width:280px;
    max-width:80%;
    transform:translateX(100%);
    z-index:70;
    border-right:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:16px; 
  }
  .sidebar.sidebar-open{
    transform:translateX(0);
  }

  /* v offcanvas režimu schovat interní toggle v sidebaru */
  .sidebar .toggle{
    display:none;
  }

  .sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    z-index:65;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease-out;
  }
  .sidebar-backdrop.visible{
    opacity:1;
    pointer-events:auto;
  }

  /* topbar se posune pod mobilní header */
  .topbar{
    top:56px!important;
    z-index:40;
  }
}

/* === Desktop reset ≥1000px — sidebar vlevo, bez mobilního headeru === */
@media (min-width:1000px){
  .app-mobile-header{
    display:none !important;
  }

  .sidebar{
    position:relative;
    top:0;
    bottom:auto;
    left:0;
    right:auto;
    width:240px;
    max-width:none;
    transform:none;
    border-right:1px solid rgba(17,24,39,.06);
    z-index:5;
  }

  .sidebar-backdrop{
    display:none !important;
  }

  .topbar{
    top:0 !important;
    z-index:10;
  }

  .sidebar .toggle{
    display:block;
  }
}

/* === Mobilní úpravy detailu poptávky + pracovních bloků === */
@media screen and (max-width:999px){

  
  /* Trochu místa pod mobilním headerem + topbarem */
  .container{
    margin-top:80px;
    padding:0 12px 16px;
  }

  /* Hlavní grid detailu poptávky (levý blok + QR) → 1 sloupec */
  .grid-main{
    grid-template-columns:1fr;
    gap:1rem;
  }

  /* Zákazník – 3 sloupce → 1 */
  .card-body[style*="grid-template-columns:repeat(3"]{
    grid-template-columns:1fr !important;
  }

  /* Parametry poptávky – 2 sloupce → 1 */
  .card-body[style*="grid-template-columns:repeat(2"]{
    grid-template-columns:1fr !important;
  }

  /* Galerie obrázků v přílohách – 4 → 2 sloupce */
  .card-body div[style*="grid-template-columns:repeat(4"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* ===== PRACOVNÍ BLOKY – FIXNÍ KARTA S VLASTNÍM SCROLLEM ===== */

  

  

  /* Chat – rozumná výška na mobilu */
  #chat-thread{
    max-height:320px;
  }
}

/* === Mobile fix: detail poptávky + pracovní bloky (tabs) === */
@media (max-width: 900px) {

  /* stránka jako celek se nesmí roztáhnout víc než viewport */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell,
  .app-shell > main,
  .app-shell .container {
    max-width: 100%;
  }

  /* Tabs = pracovní bloky: karta je fixní, scrolluje se uvnitř */
  .tabs {
    max-width: 100%;
  }

  .tabs .card,
  .tabs .card-body {
    max-width: 100%;
  }

  /* vnitřek záložek (kde je tabulka) – horizontální scroll jen tady */
  .tabs .card-body {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* tabulka může být širší než mobil, ale neroztáhne stránku */
  .tabs .card-body > table,
  .tabs .card-body .table {
    min-width: 720px;              /* klidně uprav podle počtu sloupců */
  }

  /* pro jistotu láme dlouhé texty, maily atd. */
  .tabs .card-body td,
  .tabs .card-body th {
    word-break: break-word;
  }
}

/* ===== DASHBOARD – responzivní layout (jen pro stránku s data-page="dashboard") ===== */

/* Základní spacing – desktop */
body[data-page="dashboard"] .container{
  max-width: 1100px;
  margin: 24px auto 32px;
  padding: 0 20px 24px;
}

/* Welcome karta nahoře trochu vystoupí */
body[data-page="dashboard"] .container > .card:first-child{
  margin-top: 8px;
  margin-bottom: 16px;
}

/* KPI kartičky uvnitř – lehce sjednotíme velikost */
body[data-page="dashboard"] .card .badge{
  font-size: 12px;
}

body[data-page="dashboard"] .card h3{
  font-size: 18px;
}

/* List aktivit – aby nebyly nalepené */
body[data-page="dashboard"] .list-unstyled{
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
}
body[data-page="dashboard"] .list-unstyled li{
  padding: 8px 0;
  border-bottom: 1px solid rgba(229,231,235,.8);
}
body[data-page="dashboard"] .list-unstyled li:last-child{
  border-bottom: none;
}

/* === TABLET (max 1024px) ======================================== */
@media (max-width:1024px){
  /* dashboard container – pod mobilním headerem, víc k okrajům */
  body[data-page="dashboard"] .container{
    margin-top: 80px;         /* pod mobilní header / topbar */
    padding: 0 12px 20px;
  }

  /* všechny cardy v dashboardu trochu kompaktnější */
  body[data-page="dashboard"] .card{
    padding: 14px 12px;
  }

  /* gridy uvnitř dashboardových karet → jeden sloupec na menších šířkách */
  body[data-page="dashboard"] .card .grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* tabulky se chovají jako scrollbox, ne jako layout breaker */
  body[data-page="dashboard"] .card .table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-spacing: 0 6px;
  }

  body[data-page="dashboard"] .card .table thead th,
  body[data-page="dashboard"] .card .table tbody td{
    white-space: nowrap;
  }
}

@media (max-width:640px){
  body[data-page="dashboard"] .container{
    margin-top: 80px;
    padding: 0 10px 18px;
  }

  body[data-page="dashboard"] .card{
    padding: 12px 10px;
    box-shadow: var(--shadow-sm);
  }

  /* KPI hodnoty – lehce menší */
  body[data-page="dashboard"] .card .badge{
    font-size: 11px;
  }
  body[data-page="dashboard"] .card h3{
    font-size: 16px;
  }

  /* seznam aktivit – menší text */
  body[data-page="dashboard"] .list-unstyled li{
    padding: 6px 0;
  }
  body[data-page="dashboard"] .list-unstyled li div{
    font-size: 13px;
  }

  /* Tabulky schůzek – NEchci je širší než viewport */
  body[data-page="dashboard"] .card .table{
    width: 100%;
    min-width: 0;                 /* zrušíme předchozí min-width */
    display: table;
    table-layout: fixed;          /* sloupce se rovnoměrně natáhnou */
  }

  body[data-page="dashboard"] .card .table thead th,
  body[data-page="dashboard"] .card .table tbody td{
    font-size: 12px;
    padding: 8px 6px;
    white-space: normal;          /* klidně zalamovat */
    word-break: break-word;
  }

  /* volitelně pořád schováme 5. sloupec (Adresa), ať je to kratší */
  body[data-page="dashboard"] .card .table thead th:nth-child(5),
  body[data-page="dashboard"] .card .table tbody td:nth-child(5){
    display: none;
  }
}
/* === Vendor – detail poptávky: mobil + tablet === */
@media (max-width: 999px){

  /* kontejner pod mobilním headerem + full width */
  body[data-page="vendor-request"] .container{
    margin-top: 80px;
    padding: 0 12px 16px;
    max-width: 100%;
  }

  /* hlavní layout (levý panel + QR + spodní karty) → 1 sloupec */
  body[data-page="vendor-request"] .container > .grid{
    grid-template-columns: 1fr !important;  /* přepíše inline 1.2fr .8fr */
  }

  /* blok Zákazník (3 sloupce) → 1 sloupec */
  body[data-page="vendor-request"] .card-body[style*="grid-template-columns:repeat(3"]{
    grid-template-columns: 1fr !important;
  }

  /* blok Detaily poptávky (2 sloupce) → 1 sloupec */
  body[data-page="vendor-request"] .card-body[style*="grid-template-columns:repeat(2"]{
    grid-template-columns: 1fr !important;
  }

  /* Fakturační blok (4 sloupce) → 2 sloupce na tablet */
  body[data-page="vendor-request"] .card-body[style*="grid-template-columns:repeat(4"]{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  /* Galerie příloh: 4 obrázky v řadě → 2 na řádku */
  body[data-page="vendor-request"] .card-body div[style*="grid-template-columns:repeat(4"]{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  /* formulář na nahrání příloh pod sebe */
  body[data-page="vendor-request"] form[enctype*="multipart/form-data"]{
    flex-direction: column;
    align-items: stretch;
  }
  body[data-page="vendor-request"] form[enctype*="multipart/form-data"] button{
    width: 100%;
    justify-content: center;
  }
}

/* užší mobily – ještě víc zjednodušit */
@media (max-width: 640px){

  /* fakturační blok → 1 sloupec */
  body[data-page="vendor-request"] .card-body[style*="grid-template-columns:repeat(4"]{
    grid-template-columns: 1fr !important;
  }

  /* galerie příloh → 1 obrázek na řádek */
  body[data-page="vendor-request"] .card-body div[style*="grid-template-columns:repeat(4"]{
    grid-template-columns: 1fr !important;
  }
}


/* Obal pro reCAPTCHA */
.recaptcha-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-sm);
  margin-top:14px;
}

/* Popisek vlevo od reCAPTCHA */
.recaptcha-label{
  font-size:14px;
  color:var(--muted);
  white-space:nowrap;
}

/* Malé zmenšení widgetu, ať nesedí tak „na doraz“ */
.recaptcha-wrap .g-recaptcha > div{
  transform:scale(0.95);
  transform-origin:left center;
}

/* Na mobilu pod sebe, ať se to nemačká */
@media (max-width: 480px){
  .recaptcha-wrap{
    flex-direction:column;
    align-items:flex-start;
  }
  .recaptcha-label{
    white-space:normal;
  }
}