/* Publishku responsive overrides */
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%;height:auto}
body{-webkit-text-size-adjust:100%}

/* Forms adapt to narrow viewport */
input,select,textarea,button{font-size:16px;max-width:100%}
textarea{width:100%}
.card,form{max-width:100%}

/* Topbar collapses on small screens */
@media (max-width: 640px){
  body{margin:1rem auto !important;padding:0 12px !important}
  h1{font-size:1.35rem !important}
  .topbar{flex-direction:column !important;align-items:flex-start !important;gap:8px}
  .topbar > div{width:100%}
  .topbar a{margin-left:0 !important;margin-right:12px}
  .actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .actions .btn{width:100%;text-align:center}
  .btn{display:inline-block;padding:10px 14px !important}
  form button,form .btn{width:100%}

  /* Table -> stacked cards */
  table{display:block;width:100%;border:0;background:transparent !important;box-shadow:none !important}
  thead{display:none}
  tbody,tr,td{display:block;width:100%}
  tr{background:#fff;border:1px solid #eee;border-radius:8px;margin-bottom:10px;padding:8px 12px}
  td{border:0 !important;padding:6px 0 !important;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
  td::before{content:attr(data-label);font-weight:600;color:#555;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
  td.actions-col{flex-direction:column;align-items:stretch}
  td.actions-col form{display:flex;flex-wrap:wrap;gap:6px}
  td.actions-col .btn,td.actions-col button{flex:1 1 auto}
  input.num{width:100% !important}
}

/* Ultra-small phones */
@media (max-width: 380px){
  body{font-size:14px}
  h1{font-size:1.2rem !important}
}