/* Tailwind breakpoints: sm 640, md 768, lg 1024, xl 1280.
   Prefiksiz qoidalar — faqat mobil. md:/lg:/xl: — faqat katta ekran. */

/* Mobil: desktop chrome yashirin */
.hidden{display:none}
.desk-topbar{display:none}

/* --- Utility klasslar: faqat md+ / lg+ --- */
@media (min-width: 768px) {
  .md\:hidden{display:none!important}
  .md\:flex,.hidden.md\:flex{display:flex}
  .md\:w-64{width:16rem;min-width:16rem}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:max-w-4xl{max-width:56rem}
  .md\:max-w-6xl{max-width:72rem}
  .md\:max-w-7xl{max-width:80rem}
  .md\:mx-auto{margin-left:auto;margin-right:auto}
  .md\:gap-3{gap:.75rem}
  .md\:gap-6{gap:1.5rem}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:grid,.hidden.md\:grid{display:grid}
  .md\:bg-white\/70{background:rgba(255,255,255,.70)}
  .md\:backdrop-blur-lg{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .md\:border-r{border-right-width:1px;border-right-style:solid}
  .md\:border-slate-200{border-color:#e2e8f0}
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:flex,.hidden.lg\:flex{display:flex}
  .lg\:flex-row{flex-direction:row}
  .lg\:flex-col{flex-direction:column}
  .lg\:gap-6{gap:1.5rem}
  .lg\:items-start{align-items:flex-start}
  .lg\:w-2\/3{width:66.666667%;min-width:0}
  .lg\:w-1\/3{width:33.333333%;min-width:0}
  .lg\:w-full{width:100%}
  .lg\:max-w-none{max-width:none}
  .lg\:sticky{position:sticky}
  .lg\:top-6{top:1.5rem}
  .lg\:bg-white{background:#fff}
  .lg\:shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
  .lg\:rounded-2xl{border-radius:1rem}
  .lg\:p-6{padding:1.5rem}
  .lg\:hidden{display:none!important}
  .lg\:w-\[40\%\]{width:40%;min-width:0}
  .lg\:w-\[60\%\]{width:60%;min-width:0}
  .lg\:items-stretch{align-items:stretch}
  .lg\:w-16{width:4rem}
  .lg\:h-16{height:4rem}
  .lg\:rounded-full{border-radius:9999px}
  .lg\:shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
  .lg\:grid,.hidden.lg\:grid{display:grid}
}

/* --- Shell: katta ekranda chap menyu. Header faqat md+ --- */
@media (min-width: 768px) {
  html,body{height:auto;overflow:auto}
  body{position:static;width:auto}
  .shell{
    max-width:none;width:100%;height:auto;min-height:100dvh;
    display:grid;grid-template-columns:16rem minmax(0,1fr);align-items:stretch;
    background:transparent}
  .maincol{min-width:0;width:auto;min-height:100dvh;height:100dvh;display:flex;flex-direction:column}
  .appbar.md\:hidden,.appbar{display:none!important}
  .fab.md\:hidden,.fab,#scanFab{display:none!important}

  .sidebar{
    display:flex;flex-direction:column;gap:18px;
    width:16rem;min-width:16rem;position:sticky;top:0;z-index:24;
    height:100dvh;min-height:100dvh;padding:26px 18px;
    border-right:1px solid #e2e8f0;
    background:rgba(255,255,255,.70);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .sidebar .brand{font-size:24px;padding:0 6px}
  .sidebar nav{display:flex;flex-direction:column;gap:6px}
  .sidebar nav a{
    display:flex;align-items:center;gap:10px;text-decoration:none;
    color:var(--muted);font-size:14px;font-weight:600;padding:12px 14px;border-radius:12px}
  .sidebar nav a svg{width:20px;height:20px;flex:none}
  .sidebar nav a.on{background:var(--ink);color:#fff}

  /* Header: Orqaga va sarlavha bitta qatorda, vertikal markazda, gap-4 */
  .desk-topbar,
  .desk-topbar.md\:flex{
    display:flex;align-items:center;justify-content:flex-start;
    position:fixed;top:0;left:16rem;right:0;z-index:40;
    flex:none;width:auto;max-width:none;margin:0;
    padding:14px 24px;box-sizing:border-box;
    background:rgba(248,250,252,.92);
    border-bottom:1px solid rgba(226,232,240,.95);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .desk-topbar-main,
  .desk-topbar-main.flex.items-center.gap-4{
    display:flex;align-items:center;gap:1rem;min-width:0;min-height:44px}
  .desk-back{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    height:44px;padding:0 16px;border-radius:14px;
    background:#111827;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;
    text-decoration:none;white-space:nowrap;
    box-shadow:0 6px 16px rgba(17,24,39,.22)}
  .desk-back:hover{background:#0b1220}
  .desk-back:active{transform:scale(.97)}
  .desk-topbar-title{
    margin:0;min-width:0;display:flex;align-items:center;min-height:44px;
    font-size:22px;font-weight:800;letter-spacing:-.02em;color:#0f172a;line-height:1}

  /* Bosh sahifa — hub, header yo'q */
  body.is-home .desk-topbar{display:none!important}

  /* Ichki sahifa sarlavhasi va mobil orqaga tugmasi topbar bilan takrorlanmasin */
  body.is-ombor .ombor-head > .ombor-head-copy .page-title,
  body.is-hisobot .hisobot-head .page-title,
  body.is-xarajatlar .xarajat-head .page-title,
  body.is-sozlamalar .set-head .page-title,
  body.is-mijozlar .debt-title{display:none}
  body.is-hisobot .hisobot-back,
  body.is-xarajatlar .xarajat-back,
  body.is-sozlamalar .set-back,
  body.is-mijozlar a.debt-icon-btn[href="#/"]{display:none!important}
  body.is-mijozlar .debt-head{justify-content:flex-end}

  #view{
    max-width:80rem;width:100%;margin-left:auto;margin-right:auto;
    padding:8px 30px 50px;overflow:visible;height:auto;flex:1;min-height:0}
  body.show-nav #view{padding-bottom:50px!important}

  body.is-ombor #view,
  body.is-xarajatlar #view,
  body.is-mijozlar #view,
  body.is-sozlamalar #view,
  body.is-kassa #view,
  body.is-home #view{
    min-height:0!important;height:auto!important;max-height:none!important;flex:1 1 auto}

  body.is-mijozlar #view{position:relative}
  .debt-shell,.debt-ledger-full{
    position:absolute;left:0;right:0;top:84px;bottom:0;
    width:min(100%,56rem);max-width:56rem;margin-left:auto;margin-right:auto}
  .ledger-bar{left:0;right:0}

  /* Qotirilgan header kontentni yopmasin */
  body.is-ombor #view,
  body.is-hisobot #view,
  body.is-xarajatlar #view,
  body.is-sozlamalar #view,
  body.is-kassa #view{padding-top:84px!important}
}

@media (min-width: 1024px) {
  .page-title{font-size:28px}
  .desk-topbar-title{font-size:26px}
}

@media (min-width: 1280px) {
  #view,.desk-topbar{padding-left:40px;padding-right:40px}
}

/* Kirish: header va max-width qo'shilmasin */
html.is-auth .desk-topbar,body.is-auth .desk-topbar,
html.is-auth .sidebar,body.is-auth .sidebar{display:none!important}
html.is-auth .shell,body.is-auth .shell{display:block!important;grid-template-columns:none!important}
html.is-auth #view,body.is-auth #view{max-width:none;margin:0;padding:0!important;height:auto;min-height:0;max-height:none}