/* HR Hisob — telefon va planshet uchun moslashuv. Kompyuterda (861px dan keng) faqat .menu-bg/.tabbar/.hamb yashiriladi. */
.menu-bg, .tabbar, .hamb { display: none; }
/* oyna ichidagi qatorlar siqilib ketmasin (uzun oynalarda tanlagich yo'qolib qolardi) */
.modal .body { grid-auto-rows: max-content; }

@media (max-width: 860px) {
  /* ---- yuqori panel ---- */
  .topbar { display: flex; align-items: center; gap: 8px; overflow: visible; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
    position: sticky; top: 0; z-index: 15; background: var(--bg-2); border-bottom: 1px solid var(--line); }
  .topbar .brand { font-size: 18px; padding: 0 2px; }
  .topbar .tb-sp { flex: 1; }
  .topbar .tt { width: 40px; height: 40px; }
  .topbar .lang-sw button { padding: 10px 10px; font-size: 13px; }
  .hamb { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; flex: 0 0 42px; color: var(--text); }
  .hamb i, .hamb i::before, .hamb i::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; }
  .hamb i::before, .hamb i::after { content: ''; position: absolute; left: 0; }
  .hamb i::before { top: -6px; } .hamb i::after { top: 6px; }

  /* ---- chap menyu (drawer) ---- */
  .side { display: flex !important; position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: min(300px, 86vw); z-index: 40;
    transform: translateX(-104%); transition: transform .22s ease; overflow-y: auto; box-shadow: 10px 0 40px rgba(0,0,0,.35);
    padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  body.menu-open .side { transform: none; }
  .menu-bg { display: block; position: fixed; inset: 0; background: rgba(4, 7, 12, .55); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.menu-open .menu-bg { opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; }
  .side .nav { padding: 12px 14px; font-size: 15px; }
  .side .me .btn { min-height: 40px; }

  /* ---- pastki menyu ---- */
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 14; background: var(--bg-2); border-top: 1px solid var(--line);
    padding: 6px 6px max(6px, env(safe-area-inset-bottom)); gap: 2px; }
  .tabbar .tab { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; border-radius: 12px;
    font-size: 11px; font-weight: 600; line-height: 1.1; text-align: center; color: var(--text-3); border: 0; background: transparent; cursor: pointer; min-height: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbar .tab::before { width: 22px; height: 22px; flex-basis: 22px; }
  .tabbar .tab.on { color: var(--cyan); background: var(--cyan-deep); }
  .tabbar .tab.on::after { display: none; }
  .tabbar .tab-menu::before { display: block !important; --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M4 6h16M4 12h16M4 18h16%22/%3E%3C/svg%3E"); }
  .tabbar .tab .badge { display: none; }

  /* ---- sahifa ---- */
  .main { padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); }
  .head { gap: 10px; margin-bottom: 12px; }
  .head h1 { font-size: 21px; flex: 1 1 auto; }
  .head > .input, .head > select.input { flex: 0 1 auto; }
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* ---- teginish uchun qulay o'lchamlar; iPhone kattalashtirmasligi uchun shrift 16px ---- */
  .btn { min-height: 42px; padding: 9px 14px; }
  .btn.sm { min-height: 36px; padding: 6px 12px; }
  .input, select.input, textarea.input { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .seg { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
  .tools { gap: 8px; }
  .tools > .input, .tools > select.input { flex: 1 1 150px; }
  .tools > .search, .search { flex: 1 1 100%; min-width: 0; }
  .tools > .btn { flex: 0 0 auto; }

  /* ---- kartochkalar ---- */
  .card { padding: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: minmax(84px, max-content) 1fr; }
  .kv dd { word-break: break-word; overflow-wrap: anywhere; }

  /* ---- oyna (modal): pastdan chiqadigan to'liq varaq ---- */
  .modal-bg { padding: 0; place-items: end center; }
  .modal, .modal.wide { width: 100%; max-width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .modal header { padding: 14px 16px 6px; }
  .modal .body { padding: 8px 16px 14px; }
  .modal footer { padding: 10px 16px max(12px, env(safe-area-inset-bottom)); }
  .modal footer .btn { flex: 1 1 0; justify-content: center; }

  /* ---- keng jadval (tabel): yon tomonga aylanadi, birinchi ustun qotadi ---- */
  .table-wrap.wide td:first-child, .table-wrap.wide th:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
  .table-wrap.wide th:first-child { z-index: 3; background: var(--bg-2); }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat b { font-size: 24px; }
  .stat span { font-size: 12px; }

  /* ---- jadval → kartochkalar ro'yxati ---- */
  .table-wrap.cardify { border: 0; background: transparent; overflow: visible; max-height: none !important; box-shadow: none; }
  .table-wrap.cardify > table, .table-wrap.cardify tbody, .table-wrap.cardify tfoot, .table-wrap.cardify tr, .table-wrap.cardify td { display: block; width: 100%; }
  .table-wrap.cardify thead { display: none; }
  .table-wrap.cardify tr { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px 14px; margin-bottom: 10px; position: relative; }
  .table-wrap.cardify tr.click:active { transform: scale(.995); }
  .table-wrap.cardify td { border: 0 !important; position: relative; padding: 7px 0 7px 44%; text-align: right; min-height: 32px; background: transparent !important; overflow-wrap: anywhere; }
  .table-wrap.cardify td::before { content: attr(data-label); position: absolute; left: 0; top: 8px; max-width: 42%; color: var(--text-3); font-size: 13px; font-weight: 600; text-align: left; line-height: 1.3; }
  .table-wrap.cardify td[data-label=""] { padding-left: 0; text-align: left; }
  .table-wrap.cardify td[data-label=""]::before { display: none; }
  .table-wrap.cardify td.c-head { padding: 6px 0 10px; text-align: left; font-size: 16px; font-weight: 700; margin-bottom: 4px; border-bottom: 1px solid var(--line) !important; }
  .table-wrap.cardify td.c-head::before { display: none; }
  .table-wrap.cardify td.c-ctl { position: absolute; top: 12px; right: 14px; width: auto; padding: 0; min-height: 0; }
  .table-wrap.cardify td.c-ctl::before { display: none; }
  .table-wrap.cardify td.c-act { padding-left: 0; text-align: right; padding-top: 10px; }
  .table-wrap.cardify td.c-act > * { margin: 3px 0 3px 6px; }
  .table-wrap.cardify td select.input, .table-wrap.cardify td input.input { width: 100%; }
  .table-wrap.cardify tr:has(> td.c-full:only-child) { background: transparent; border: 0; padding: 6px 2px 2px; margin-bottom: 4px; }
  .table-wrap.cardify td.c-full { padding: 0; text-align: left; color: var(--text-3); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; min-height: 0; }
  .table-wrap.cardify td.c-full::before { display: none; }
  .table-wrap.cardify td.c-full.empty, .table-wrap.cardify td.c-full:has(.empty) { text-transform: none; letter-spacing: 0; font-weight: 500; text-align: center; padding: 22px 0; font-size: 14px; }
  .table-wrap.cardify tr:has(td.c-ctl) td.c-head { padding-right: 40px; }
  .table-wrap.cardify tfoot tr { background: var(--panel-2); }
  .table-wrap.cardify td > .who { justify-content: flex-start; }
  .table-wrap.cardify td .btn { min-height: 38px; }
}
@media (max-width: 860px) { body .side { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px; }
  .lang-sw.in-me button { padding: 11px 9px; font-size: 13px; }
  .modal header .lang-sw button { padding: 9px 10px; font-size: 12px; }
  .modal header .btn { min-width: 40px; min-height: 40px; justify-content: center; }
  .theme-pick button { min-height: 44px; }
}
@media (max-width: 640px) {
  .table-wrap.cardify tr.c-hascont { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px dashed var(--line); }
  .table-wrap.cardify tr.c-cont { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .table-wrap.cardify tr.c-cont.c-hascont { border-bottom: 1px dashed var(--line); }
}
@media (max-width: 640px) {
  .lrow { flex-wrap: wrap; padding: 10px 0 !important; }
  .lrow > span:first-child { flex: 1 1 100% !important; font-weight: 600; }
  .lrow > .btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 640px) {
  .table-wrap.cardify td select, .table-wrap.cardify td input:not([type="checkbox"]) { max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
  .table-wrap.cardify tr { max-width: 100%; }
}

/* ---- «Bugun»: telefonda ixcham ro'yxat — har xodim 2 qator ---- */
@media (max-width: 640px) {
  .cards.mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
  .cards.mini .card { padding: 8px 6px; border-radius: 12px; text-align: center; }
  .cards.mini .stat b { font-size: 20px; }
  .cards.mini .stat span { font-size: 11px; line-height: 1.15; display: block; }
  .cards.mini .stat::after { display: none; }

  .table-wrap.cardify table.today tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; row-gap: 6px; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; align-items: center; }
  .table-wrap.cardify table.today td { padding: 0; min-height: 0; text-align: left; }
  .table-wrap.cardify table.today td::before { position: static; display: block; max-width: none; font-size: 11px; font-weight: 600; line-height: 1.2; margin-bottom: 1px; }
  .table-wrap.cardify table.today td:nth-child(1) { grid-column: 1 / 4; border: 0 !important; padding: 0; margin: 0; font-size: 15px; }
  .table-wrap.cardify table.today td:nth-child(1) .av { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }
  .table-wrap.cardify table.today td:nth-child(1) .who { gap: 8px; }
  .table-wrap.cardify table.today td:nth-child(1) .who b { font-size: 15px; line-height: 1.2; }
  .table-wrap.cardify table.today td:nth-child(2) { grid-column: 4; text-align: right; }
  .table-wrap.cardify table.today td:nth-child(2)::before { display: none; }
  .table-wrap.cardify table.today td:nth-child(2) .badge { font-size: 11px; padding: 2px 8px; }
  .table-wrap.cardify table.today td:nth-child(3) { display: none; }
  .table-wrap.cardify table.today td:nth-child(n+4) { font-size: 14px; font-weight: 600; }
  .table-wrap.cardify table.today td:nth-child(n+4):empty::after { content: '—'; color: var(--text-3); }
  .table-wrap.cardify table.today td:nth-child(7) { text-align: right; }
  .table-wrap.cardify table.today td:nth-child(7)::before { text-align: right; }
  .table-wrap.cardify table.today td.c-full { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .table-wrap.cardify table.today td:nth-child(1)::before { display: none; }
  /* kelmagan / dam / kutilmoqda — vaqtlar bo'sh, bitta qatorga qisqaradi */
  .table-wrap.cardify table.today tr:has(.st-absent, .st-off, .st-wait, .st-nosched) td:nth-child(n+4) { display: none; }
  .table-wrap.cardify table.today tr:has(.st-absent, .st-off, .st-wait, .st-nosched) { padding-top: 8px; padding-bottom: 8px; }
}
/* oylik hisob kartochkasida nol qiymatli qatorlar yashiriladi */
@media (max-width: 640px) { .table-wrap.cardify table.pay td.z { display: none; } .table-wrap.cardify table.pay tfoot td:empty, .table-wrap.cardify table.pay tfoot td[data-label=""] { display: none; } }