/* ====== NAV alapok (base.html-ből) ====== */
:root{
  --nav-bg:#fafcff; --nav-bd:#e8eef5;
  --pill:#f3f7ff; --pill-bd:#dbe7ff;
  --pill-hover:#eef5ff; --pill-active:#dbe9ff; --pill-active-bd:#bcd8ff;
  --text:#222;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;margin:0;color:var(--text)}

/* HEADER */
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid #eee}
.brand{display:flex;align-items:center;gap:1rem;min-width:0}
.logo{height:clamp(40px,6vw,70px);vertical-align:middle;display:block}

/* NAV – stabil desktop sor + kapszula */
.nav-shell{overflow:visible}
.nav-shell nav>ul{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
.nav-shell nav li{position:relative}
.nav-shell nav a{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:10px;text-decoration:none;color:var(--text);background:var(--pill);border:1px solid var(--pill-bd);transition:background .12s ease,box-shadow .12s ease,border-color .12s ease;font-weight:500}
.nav-shell nav a:hover{background:var(--pill-hover)}
.nav-shell nav a.active{background:var(--pill-active);border-color:var(--pill-active-bd);box-shadow:0 2px 10px rgba(28,92,255,.08)}
.nav-shell nav li.dropdown>a::after{content:"▾";margin-left:6px;font-size:.9em;opacity:.7}

/* 1. szintű lenyíló */
.nav-shell nav ul ul{
  position:absolute; left:0; top:calc(100% + .35rem);
  min-width:220px; background:#fff;
  border:1px solid var(--nav-bd); border-radius:12px;
  padding:.35rem; margin:0; display:none;
  box-shadow:0 10px 28px rgba(0,0,0,.08); z-index:1000;
  max-height:min(70vh, 480px); overflow:auto; white-space:normal;
}
.nav-shell nav li:hover>ul, .nav-shell nav li:focus-within>ul{display:block}

/* 2.→3. szint: oldalra nyílás */
.nav-shell nav ul ul li{position:relative}
.nav-shell nav ul ul li>ul{left:100%; top:0; margin-left:.25rem; margin-top:0}
.nav-shell nav ul ul a{display:flex;width:100%;background:#fff;border:1px solid transparent}
.nav-shell nav ul ul a:hover{background:#f7faff;border-color:#e6eefc}

/* Dropdown a régi nav-hoz (compat) */
nav li.dropdown{position:relative}
nav li.dropdown>ul{
  position:absolute; left:0; top:calc(100% + 4px);
  min-width:220px; background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.25rem; margin:0; display:none; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:1000;
}
nav li.dropdown:hover>ul, nav li.dropdown.open>ul{display:block}
nav li.dropdown>a{position:relative;padding-right:1.6rem}
nav li.dropdown>a::after{content:"▾";position:absolute;right:.6rem;top:50%;transform:translateY(-50%);font-size:.9em;pointer-events:none}
nav li.dropdown>ul a{display:block;padding:.45rem .6rem;border-radius:10px}
nav li.dropdown>ul a:hover{background:#f7f7f9}

/* AUTH gombok */
.auth{margin-left:auto;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.btn{padding:.45rem .8rem;border:1px solid #ddd;border-radius:10px;text-decoration:none;color:var(--text);background:#fff;cursor:pointer}
.btn:hover{background:#f5f5f5}
.auth .profile-link{display:inline-flex;align-items:center}
.auth .avatar{width:clamp(28px,3.5vw,40px);height:clamp(28px,3.5vw,40px);border-radius:9999px;object-fit:cover;border:1px solid #ddd;display:block}

/* Container */
.container{max-width:1100px;margin:1.5rem auto;padding:0 1rem}

/* Reszponzív nav */
@media (max-width:900px){
  header{flex-wrap:wrap;gap:.75rem}
  .nav-shell nav>ul{white-space:normal;flex-wrap:wrap}
}

/* Menü-badge */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .35rem;margin-left:.35rem;border-radius:999px;background:#ff3b30;color:#fff;font-size:.72rem;font-weight:700;line-height:1;vertical-align:middle}

/* ====== Kártyák + űrlapok (base.html-ből) ====== */
.badges{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .55rem;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1;border:1px solid transparent;white-space:nowrap}

/* státusz – meglévő névkonvenció */
.badge--st-new{ color:#374151; background:rgba(107,114,128,.14); border-color:rgba(107,114,128,.35) }     /* Új */
.badge--st-prog{ color:#1d4ed8; background:rgba(29,78,216,.14);  border-color:rgba(29,78,216,.35) }       /* Folyamatban */
.badge--st-done{ color:#166534; background:rgba(22,101,52,.14);  border-color:rgba(22,101,52,.35) }       /* Kész */

/* —— ALIAS a Tasks sablonokhoz: .badge.status-<state> —— */
.badge.status-new{    color:#374151; background:rgba(107,114,128,.14); border:1px solid rgba(107,114,128,.35) }
.badge.status-in_progress{ color:#1d4ed8; background:rgba(29,78,216,.14); border:1px solid rgba(29,78,216,.35) }
.badge.status-done{   color:#166534; background:rgba(22,101,52,.14); border:1px solid rgba(22,101,52,.35) }

/* típus/prioritás (ha kell) */
.badge--tp-company{ color:#0b6b53; background:rgba(11,107,83,.14); border-color:rgba(11,107,83,.35) }
.badge--tp-private{ color:#6d28d9; background:rgba(109,40,217,.14); border-color:rgba(109,40,217,.35) }
.badge--pr-low{ color:#065f46; background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.35) }
.badge--pr-med{ color:#92400e; background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.35) }
.badge--pr-high{ color:#991b1b; background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.35) }

/* Footer */
.site-footer{border-top:1px solid #e5e7eb;margin-top:24px;padding:12px 0;font-size:.9rem;color:#6b7280;background:#fff}
.site-footer .container{max-width:1100px;margin:0 auto;padding:0 16px;text-align:center}
.site-footer a{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(107,114,128,.5)}
.site-footer a:hover{text-decoration:underline;border-bottom-color:transparent}

/* Kártya */
.card{border:1px solid var(--nav-bd); border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.04); margin-bottom:16px}
.card-body{padding:16px}

/* ÚJ: kártyalisták (quotes kompat) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px;border-bottom:1px solid #eef2f7}
.card .title{font-weight:700;line-height:1.25}
.card .meta{display:flex;gap:10px;flex-wrap:wrap;padding:10px 16px;color:#6b7280;font-size:.92rem}
.card .desc{padding:0 16px 10px 16px}
.card-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #eef2f7}

/* Gomb-variánsok (quotes kompat) */
.btn.small{padding:.3rem .6rem;font-size:.88rem;border-radius:9px}
.btn.ghost{background:transparent}
.btn.primary{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.btn.primary:hover{filter:brightness(.95)}
.btn.secondary{background:#eff6ff;border-color:#cfe0ff;color:#1d4ed8}
.btn.secondary:hover{background:#e7f0ff}

/* Page head */
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;margin:0 0 18px}
.page-head + .alert{margin-top:6px}

/* Form grid + field */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.form-field label{display:block;font-weight:600;margin-bottom:6px}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{width:100%;padding:10px 12px;border:1px solid #dfe6ee;border-radius:10px;background:#fff;outline:none;transition:border-color .12s ease,box-shadow .12s ease}
.form-field textarea{min-height:92px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--pill-active-bd);box-shadow:0 0 0 3px rgba(28,92,255,.12)}
.check-row{display:flex;align-items:center;gap:18px;padding-top:28px}
.form-actions{display:flex;gap:8px;margin-top:8px}
.text-right{text-align:right}

/* Alert dobozok */
.alert{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;margin-bottom:16px}
.alert .icon{font-size:1.25rem;line-height:1;margin-top:2px}
.alert .body{flex:1;min-width:0}
.alert .title{font-weight:800;margin-bottom:2px}
.alert .list{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:6px}
.chip{padding:.18rem .52rem;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid transparent}
.alert.warn{border:1px solid #fde68a;border-left-width:6px;border-left-color:#f59e0b;background:linear-gradient(0deg,#fffdf6,#fff)}
.alert.danger{border:1px solid #fecaca;border-left-width:6px;border-left-color:#ef4444;background:linear-gradient(0deg,#fff6f6,#fff)}
.chip.warn{background:#fff7ed;border-color:#fed7aa;color:#92400e}
.chip.danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}

/* Táblázat (loose) */
.table.loose table{border-collapse:separate;border-spacing:0 10px;table-layout:auto}
.table.loose tbody tr>*{background:#fff;border:1px solid #eef2f7;padding:10px 12px;vertical-align:middle}
.table.loose tbody tr>*:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table.loose tbody tr>*:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px;overflow:hidden;text-align:right;padding-right:12px}
.table.loose tbody tr:hover>*{background:#fcfdff;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.table.loose tbody tr>*:last-of-type .btn{display:inline-block;margin:0}

/* Rács utilok */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:2fr 1fr auto;gap:16px}
.field label{display:block;margin-bottom:6px;font-weight:600}
.form-control,.form-select,.form-file,
.card .field input,.card .field select,.card .field textarea{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.card textarea{min-height:120px}
.att-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-bottom:10px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}.att-row{grid-template-columns:1fr}}

/* Jegyzetlista a Taskon */
.notes{list-style:none;margin:0;padding:0}
.note{padding:10px 12px;border-bottom:1px dashed #eaeef5}
.note:last-child{border-bottom:none}
.note-head{color:#6b7280;font-size:.9rem;margin-bottom:4px}
.note-body{white-space:pre-line}

/* ----- Hamburger + mobil navigáció ----- */

/* gomb alap */
.nav-toggle{
  display:none; /* desktopon rejtve */
  align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  border:1px solid var(--nav-bd); background:#fff; cursor:pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after{
  content:""; display:block; width:20px; height:2px; background:#1f2937;
  position:relative; transition:transform .15s ease, opacity .15s ease;
}
.nav-toggle .bars::before{ position:absolute; top:-6px; }
.nav-toggle .bars::after{ position:absolute; top:6px; }
.nav-open .nav-toggle .bars{ transform:rotate(45deg); }
.nav-open .nav-toggle .bars::before{ transform:translateY(6px) rotate(90deg); }
.nav-open .nav-toggle .bars::after{ opacity:0; transform:translateY(-6px) rotate(90deg); }

/* backdrop */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.38);
  z-index:999; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }

/* mobil elrendezés */
@media (max-width: 900px){
  header{ position:relative; }
  .nav-toggle{ display:inline-flex; }             /* mobilon látszik */
  .nav-shell{ width:100%; }

  /* auth elemek a menü alá mennek */
  .auth{ display:none; }

  /* menü panelként nyílik le */
  .nav-shell nav{
    position:fixed; left:0; right:0; top:64px;   /* header alá */
    background:#fff; border-top:1px solid var(--nav-bd);
    box-shadow:0 14px 30px rgba(0,0,0,.12);
    padding:10px; z-index:1000;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .15s ease, opacity .15s ease;
  }
  .nav-shell nav>ul{ flex-direction:column; align-items:stretch; gap:8px; }
  .nav-shell nav a{ padding:.7rem .9rem; border-radius:12px; }

  /* nyitott állapot */
  .nav-open .nav-shell nav{
    transform:translateY(0); opacity:1; pointer-events:auto;
  }

  /* legördülő (submenu) mobilon mindig blokkszinten */
  .nav-shell nav ul ul{
    position:static; display:block; box-shadow:none; border:none; padding:4px 0; max-height:none;
  }
  .nav-shell nav ul ul a{ background:transparent; border:1px solid transparent; padding:.5rem .8rem; }
}

/* --- Mobil finomhangolás a munkalap listához --- */

/* 1) Kártyarács egy oszlopra telefonon */
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
}

/* 2) Táblázat: legyen görgethető vízszintesen kis kijelzőn */
@media (max-width: 600px){
  .table.loose{
    display:block;                 /* a wrapper blokk legyen scroll-konténer */
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table.loose table{
    min-width:520px;               /* ne törjön be, inkább görgessen */
  }

  /* 3) apró méret-tweakek, hogy kényelmesen elférjen */
  .badge{ font-size:.72rem; padding:.22rem .45rem; }
  .btn.small{ padding:.28rem .5rem; font-size:.86rem; }
  .card .meta{ gap:6px; }
  .card{ overflow:hidden; }        /* ne lógjon ki semmi az íveken */
}

/* ===== Workorders mobil fix ===== */

/* (1) ne vágja le a kártya a belső overfl ow-t */
@media (max-width: 600px){
  .card{ overflow: visible; }
}

/* (2) a táblázat fenntarthatóan görgethető legyen vízszintesen
   - működik akkor is, ha a markup: <div class="table loose"><table>...</table></div>
   - és akkor is, ha a table közvetlenül a .card-body-ban van */
@media (max-width: 600px){
  .card-body,
  .card .table,
  .card .table.loose{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  /* a tényleges táblázat kapjon minimális szélességet, hogy legyen mit görgetni */
  .card-body > table,
  .card .table table,
  .card .table.loose table{
    min-width: 560px;  /* ha még szűk, emeld 600–640-re */
  }

  /* apró tipográfiai zsugorítás, hogy kevésbé kelljen görgetni */
  .badge{ font-size:.72rem; padding:.22rem .45rem; }
  .btn.small{ padding:.28rem .5rem; font-size:.86rem; }
}
/* ===== Mobil: táblázat → kártya (cardstack) ===== */
@media (max-width: 640px){
  /* rejtsük a fejléceket */
  .table.cardstack thead{
    position:absolute; left:-9999px; top:-9999px;
    height:0; width:0; overflow:hidden;
  }

  /* sor = kártya */
  .table.cardstack tbody tr{
    display:block;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.05);
    margin:10px 0;
    padding:8px 12px;
  }

  /* cellák: label + érték rácsban */
  .table.cardstack tbody td{
    display:grid;
    grid-template-columns: 110px 1fr; /* label | value */
    align-items:center;
    gap:10px;
    border:none !important;
    padding:8px 0;
  }
  .table.cardstack tbody td::before{
    content: attr(data-label);
    color:#6b7280;
    font-weight:600;
    font-size:.9rem;
  }

  /* akciógombok sora jobbra zárva, ne legyen label */
  .table.cardstack tbody td.actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:6px;
  }
  .table.cardstack tbody td.actions::before{ content:""; display:none; }

  /* finom zsugorítás, hogy kényelmes legyen */
  .badge{ font-size:.75rem; padding:.22rem .5rem; }
  .btn.small{ padding:.28rem .55rem; font-size:.88rem; }
}



/* ===== Desktop hard reset: a .cardstack táblák maradjanak asztali táblák ===== */
@media (min-width: 641px){
  .table.cardstack thead{ position:static !important; height:auto !important; width:auto !important; overflow:visible !important; }
  .table.cardstack tbody tr{ display:table-row !important; box-shadow:none !important; border:none !important; margin:0 !important; padding:0 !important; }
  .table.cardstack tbody td{ display:table-cell !important; padding:.5rem .6rem !important; border-bottom:1px solid #f0f0f0 !important; }
  .table.cardstack tbody td::before{ content:none !important; }
  .table.cardstack tbody td.actions{ text-align:left !important; }
}

/* ===== Mobil: táblázat → kártya ===== */
@media (max-width: 640px){
  /* rejtsük a fejléceket */
  .table.cardstack thead{
    position:absolute; left:-9999px; top:-9999px;
    height:0; width:0; overflow:hidden;
  }

  /* sor = kártya */
  .table.cardstack tbody tr{
    display:block;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.05);
    margin:10px 0;
    padding:8px 12px;
  }

  /* cellák: label + érték */
  .table.cardstack tbody td{
    display:grid;
    grid-template-columns: 120px 1fr; /* bal: label | jobb: érték */
    align-items:center;
    gap:10px;
    border:none !important;
    padding:8px 0;
    word-break: break-word;
  }
  .table.cardstack tbody td::before{
    content: attr(data-label);
    color:#6b7280;
    font-weight:600;
    font-size:.9rem;
  }

  /* akciógombok – külön sorba, jobbra zárva */
  .table.cardstack tbody td.actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:6px;
  }
  .table.cardstack tbody td.actions::before{ content:""; display:none; }
  .table.cardstack .btn{ padding:.28rem .55rem; font-size:.88rem; }

  /* kis UI finomítás */
  .pill{ white-space:nowrap; }
}

/* ===== Workorders list (desktop alap, a régi szép állapot megtartása) ===== */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th,.tbl td{ padding:.5rem .6rem; border-bottom:1px solid #f0f0f0; text-align:left; }

/* státusz jelvények */
.pill{ display:inline-block; line-height:1.2; padding:.15rem .5rem; border-radius:999px; border:1px solid #ddd; background:#f6f7fb; }
.pill.ok{   background:#e7f7ec; border-color:#cfeedd; }
.pill.warn{ background:#fff4d6; border-color:#ffe6a8; }

.pager{ margin-top:.5rem; color:#6b7280; font-size:.9rem; }
.ro{ color:#6b7280; }

/* ===== Mobil: táblázat → kártyák (csak a munkalap listán) ===== */
@media (max-width: 640px){
  /* thead elrejtése mobilon */
  .tbl thead{
    position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;
  }

  /* sorok kártyaként */
  .tbl tbody tr{
    display:block;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.05);
    margin:10px 0;
    padding:8px 12px;
  }

  /* cellák: balra label, jobbra érték */
  .tbl tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    border:none;
    padding:8px 0;
    word-break:break-word;
  }
  .tbl tbody td::before{
    color:#6b7280; font-weight:600; font-size:.9rem;
    content:""; margin-right:10px;
  }

  /* Nyitott táblázat címkék */
  .tbl.tbl-open   tbody td:nth-child(1)::before{ content:"#"; }
  .tbl.tbl-open   tbody td:nth-child(2)::before{ content:"Dátum"; }
  .tbl.tbl-open   tbody td:nth-child(3)::before{ content:"Hely"; }
  .tbl.tbl-open   tbody td:nth-child(4)::before{ content:"Állapot"; }
  .tbl.tbl-open   tbody td:nth-child(5)::before{ content:""; }

  /* Lezárt táblázat címkék */
  .tbl.tbl-closed tbody td:nth-child(1)::before{ content:"#"; }
  .tbl.tbl-closed tbody td:nth-child(2)::before{ content:"Lezárva"; }
  .tbl.tbl-closed tbody td:nth-child(3)::before{ content:"Hely"; }
  .tbl.tbl-closed tbody td:nth-child(4)::before{ content:"Lezárta"; }
  .tbl.tbl-closed tbody td:nth-child(5)::before{ content:""; }

  /* akciócellák külön sorban, jobbra zárva */
  .tbl tbody td:last-child{
    justify-content:flex-end;
    padding-top:10px;
  }
  .tbl tbody td:last-child .btn{
    padding:.28rem .55rem; font-size:.9rem;
  }

  .pill{ white-space:nowrap; }
}

/***** ALÁÍRÁS szétcsúszás ellen **********/
/* ===== Workorders – Aláírás blokk mobil fix ===== */
/* Cél: mobilon ne legyen két oszlop, a vászon/előnézet 100% széles,
   és ne legyen float/összecsúszás a jobb oldali elemekkel. */

@media (max-width: 640px){

  /* Ha a szekciót grid vagy flex tartja két oszlopban, tegyük egy oszlopossá */
  .wo-sign,
  .signature-section,
  .confirm-section {
    display: block;
  }
  .wo-sign .grid-2,
  .signature-section .grid-2,
  .confirm-section .grid-2 {
    display: grid;
    grid-template-columns: 1fr;           /* 1 oszlop mobilon */
    gap: 10px;
  }

  /* Általános „signature” elemek: ne úsztassuk, törjük sort */
  .wo-sign [class*="sign"],
  .signature-section [class*="sign"],
  .confirm-section [class*="sign"] {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
  }

  /* Vászon + előnézet legyen 100% széles, arányosan magas */
  .wo-sign canvas,
  .wo-sign img,
  .wo-sign .signature-pad,
  .wo-sign .signature-box,
  .signature-section canvas,
  .signature-section img,
  .signature-section .signature-pad,
  .signature-section .signature-box,
  .confirm-section canvas,
  .confirm-section img,
  .confirm-section .signature-pad,
  .confirm-section .signature-box {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    box-sizing: border-box;
  }

  /* A rajzvászon minimális magassága érintéshez kényelmesen nagy legyen */
  .wo-sign canvas,
  .signature-section canvas,
  .confirm-section canvas {
    min-height: 140px;
    touch-action: none; /* iOS-Android görgetés ne zavarjon rajzoláskor */
  }

  /* Dátum- és egyéb mezők 100% szélesen törjenek új sorba */
  .wo-sign input[type="date"],
  .signature-section input[type="date"],
  .confirm-section input[type="date"],
  .wo-sign .date-field,
  .signature-section .date-field,
  .confirm-section .date-field {
    width: 100%;
  }

  /* Gombok törjenek sorba, ne csússzanak egymásra */
  .wo-sign .actions,
  .signature-section .actions,
  .confirm-section .actions,
  .wo-sign .signature-toolbar,
  .signature-section .signature-toolbar,
  .confirm-section .signature-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===== Workorders – aláírás szekciók mobil elrendezés ===== */
@media (max-width: 640px){
  /* add ezt a wrappert az aláírás részek köré (lásd lent) */
  .wo-sign{ display:block; }
  .wo-sign .grid-2{ display:grid; grid-template-columns: 1fr; gap:12px; }
  .wo-sign .form-row{ width:100%; }
  .wo-sign .signature-box,
  .wo-sign .signature-pad,
  .wo-sign .signature-preview{
    width:100% !important;
    max-width:100%;
    display:block;
    box-sizing:border-box;
  }
  .wo-sign .signature-pad{ min-height:140px; }
}

/* ===== Teljes képernyős aláírás modal ===== */
.sig-modal{ position:fixed; inset:0; z-index:2000; display:none; }
.sig-modal[open]{ display:block; }
.sig-modal .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.sig-modal .sheet{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:14px; gap:10px;
}
.sig-modal .header{
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; font-weight:600;
}
.sig-modal .canvas-wrap{
  background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.2);
  padding:8px; flex:1; min-height:220px; display:flex;
}
.sig-modal canvas{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  flex:1; width:100%; height:100%;
  touch-action:none; /* ne görgessen rajzolás közben */
}
.sig-modal .toolbar{
  display:flex; gap:8px; justify-content:flex-end;
}
.sig-modal .btn{ padding:.5rem .8rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.sig-modal .btn.primary{ background:#111827; color:#fff; border-color:#111827; }
.sig-modal .btn.danger{ background:#fff1f2; border-color:#fecdd3; }

/* Fejléc jobb oldal */
.site-header { display:flex; align-items:center; }
.site-header .nav-right{
  margin-left:auto;
  display:flex; align-items:center; gap:.5rem;
}

/* Avatar */
.avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }
.avatar.initials{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:#e9eef3; font-weight:600;
}

/* Mobil töréspont: 768px alatt mindig látszódjon jobb oldalt */
@media (max-width: 768px){
  .site-header .nav-right{ display:flex !important; }      /* felülír, ha bárhol el volt rejtve */
  .site-header .logout-label{ display:none; }              /* helytakarékosság mobilon */
  .site-header .logout-btn{ padding:6px 8px; line-height:1; }
}

/* ===== Header layout ===== */
.site-header{
  display:flex; align-items:center; gap:1rem;
}
.site-header .brand{
  display:flex; align-items:center; gap:1rem;
  flex:1 1 auto; min-width:0;
}
.site-header .auth{
  margin-left:auto;
  display:flex; align-items:center; gap:.5rem;
}

/* Avatar megjelenítés */
.avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }
.avatar.initials{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:#e9eef3; font-weight:600;
}

/* Logout gomb kompakt megjelenítés */
.logout-form{ display:inline-block; }
.logout-btn{ line-height:1; padding:6px 8px; }
.logout-icon{ font-size:16px; }

/* ===== Mobil (≤768px) ===== */
@media (max-width: 768px){
  /* Mindig látszódjon a jobb oldali blokk */
  .site-header .auth{ display:flex !important; }

  /* Helytakarékosság: csak ikon maradjon a 'Kilépés' felirat helyett */
  .site-header .logout-label{ display:none; }
}

/* Teljes képernyőn (PWA) a notch/safe-area kezelése iOS-hez */
.pwa body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* PWA-ban rejtsük a böngésző-specifikus elemekre hagyatkozó tippeket, ha lennének */
@media (display-mode: standalone) {
  .only-browser { display: none !important; }
}

.badge.bubble{ background:#e11d48; color:#fff; border-radius:999px; padding:0 .4rem; margin-left:.4rem; font-size:.75rem; line-height:1.4; }
.badge.bubble.hidden{ display:none; }

/* ---- Orders ---- */
.orders-index .orders-toolbar {
  display:flex; gap:.5rem; align-items:center; margin-top:.75rem;
}
.orders-index .orders-toolbar input[type=text]{
  flex:1; padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:10px;
}
.orders-index .orders-toolbar select{
  padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:10px;
}

.stepper { display:flex; gap:.4rem; align-items:center; }
.stepper span{
  width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center;
  border:1px solid #e5e7eb; font-weight:600; font-size:.9rem; color:#6b7280;
}
.stepper span.active{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.stepper span.ghost{ opacity:.5; }

.form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form .grid .col-span-2{ grid-column: span 2; }
.form .field label{ display:block; font-weight:600; margin-bottom:.25rem; }
.form .field input[type=text],
.form .field input[type=email],
.form .field textarea,
.form .field select{
  width:100%; padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:10px;
}
.form .actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }

.tbl { display:grid; gap:.25rem; }
.tbl-head, .tbl-row { display:grid; grid-template-columns: 100px 1fr 180px 220px 140px; gap:.75rem; align-items:center; }
.tbl-head{ font-weight:700; color:#4b5563; }
.tbl-row{ padding:.5rem .25rem; border-bottom:1px dashed #eee; }
.tbl .strong{ font-weight:600; }
.meta.small{ font-size:.85rem; color:#6b7280; }

/* Mobil */
@media (max-width: 768px){
  .tbl-head{ display:none; }
  .tbl-row{ grid-template-columns: 1fr; border:1px solid #eee; border-radius:12px; padding:.75rem; }
  .form .grid{ grid-template-columns:1fr; }
}

/* CSAK sikertelen beküldési kísérlet után (was-validated) legyen piros */
form.was-validated input:invalid,
form.was-validated select:invalid,
form.was-validated textarea:invalid{
  border-color:#ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.08) inset;
}


  /* felső „pill” sor */
  .head-chips{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin: 6mm 0 3mm;
  }
  .chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    background:#e8f4ff; color:#0b5394;
    padding:6px 12px; border-radius:999px;
    border:1px solid #c7e0ff; font-weight:600;
  }

  /* fejléc sor: balra cím, jobbra logó */
  .header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .logo{ height:36mm; object-fit:contain; margin-left:auto; display:block; } /* nagyobb és teljesen jobbra */

/* === Responsive form readability (Orders wizard, etc.) === */
form {
  font-size: clamp(15px, 1.1vw, 17px);  /* Dinamikusan igazodik a képernyőhöz */
  line-height: 1.5;
}

form label {
  font-weight: 500;
  font-size: 1em;
}

form input,
form select,
form textarea {
  font-size: 1em;
  padding: 0.55em 0.75em;
  border-radius: 6px;
}

form .radio,
form .checkbox {
  font-size: 1em;
}

/* Gombok is arányosan nagyobbak */
form .btn {
  font-size: 1em;
  padding: 0.6em 1.2em;
}

/* Kisebb kijelzőkön (mobil, tablet) még kicsit nagyobb */
@media (max-width: 768px) {
  form {
    font-size: clamp(16px, 3vw, 18px);
  }
  form .btn {
    font-size: 1.05em;
  }
}

/* Menü jelvény (piros kör szám) – Reports */
.menu-badge{
  display:inline-block; min-width:18px; padding:0 6px; font-size:12px; line-height:18px;
  text-align:center; border-radius:999px; margin-left:6px; background:#e5e7eb; color:#111827; font-weight:700;
}
.menu-badge.danger{ background:#dc2626; color:#fff; }