@media (max-width: 1023px) {
/* --- Mobile UI (<=1023px) --- */

/* General spacing */
.container{
  padding:14px;
  padding-bottom:92px; /* space for sticky bar */
}
.card{padding:12px;}
.grid{gap:10px;}
label{margin:8px 0 4px;}

/* Inputs & buttons */
.btn{padding:11px 14px;border-radius:12px;}
input, select, textarea{padding:11px 12px;border-radius:12px;}

/* Prevent huge gaps when .inline becomes a column (override base.css flex:1 on children) */
.inline{
  flex-direction:column;
  gap:12px;
  align-items:stretch !important;
}
.inline > *{
  width:100%;
  flex:0 0 auto !important;
  min-height:auto !important;
}

/* Mobile: clean add -> forms behind buttons */
.add-open-btn{display:block;}
.add-box{display:none;}

/* Sticky status bar at the bottom */
#sticky_status_bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* --- Mobile menu (nav) --- */
.nav-trigger{margin-bottom:10px;}
.nav-toggle{width:100%;justify-content:center;}

/* Hide the panel by default on mobile; open it as a modal sheet */
.nav-panel{display:none;padding:0;}
.nav-panel .nav{padding:10px 12px 12px;}

.nav-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-panel-title{font-weight:700;}
.nav-close{padding:8px 10px;}

.nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:90;
}

body.nav-open{overflow:hidden;}
body.nav-open .nav-backdrop{display:block;}
body.nav-open .nav-panel{
  display:block;
  position:fixed;
  left:12px;
  right:12px;
  top:12px;
  bottom:12px;
  z-index:100;
  overflow:auto;
}
}

/* Light theme: nav overlay */
html[data-theme="light"] .nav-backdrop{ background:rgba(15,23,42,.28); }
html[data-theme="light"] .nav-panel{ background:var(--card); border-color:var(--line); }