/* admin-mobile.css - pass 9. Makes /admin/* usable on phones without breaking desktop.
 * Overrides style.css which hid .sidebar entirely below 768px (no way to reopen nav). */
html { -webkit-text-size-adjust: 100%; }
.admin-layout, .admin-layout * { box-sizing: border-box; }
.admin-layout .main { max-width: 100%; overflow-x: clip; }
.admin-layout img, .admin-layout svg, .admin-layout video { max-width: 100%; height: auto; }
.admin-layout table { max-width: 100%; }
.admin-layout .btn, .admin-layout button.btn, .admin-layout a.btn {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem .95rem; touch-action: manipulation;
}
.admin-layout input, .admin-layout select, .admin-layout textarea {
  font-size: 16px; /* iOS zoom prevention */ max-width: 100%;
}
.admin-layout .grid2, .admin-layout .hub-grid { gap: .75rem; }

/* Backdrop for drawer */
.cnm-admin-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 90;
}
body.admin-nav-open .cnm-admin-backdrop { display: block; }

@media (max-width: 900px) {
  .admin-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  /* Revive the sidebar style.css hid; turn it into an off-canvas drawer */
  .admin-layout > .sidebar {
    display: block !important;
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 88vw) !important;
    z-index: 100;
    transform: translateX(-105%);
    transition: transform .22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 28px !important;
    min-height: 100vh;
    box-shadow: 8px 0 28px rgba(0,0,0,.25);
  }
  body.admin-nav-open .admin-layout > .sidebar {
    transform: translateX(0);
  }
  .admin-layout > .sidebar .logo {
    display: inline-block; margin: 4px 8px 12px 0; font-size: 1rem;
  }
  .admin-menu-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    position: sticky; top: 0; z-index: 5;
    margin: 0 0 12px !important;
    min-height: 44px; padding: .55rem 1rem;
    border-radius: 10px; border: 0;
    background: #0f766e; color: #fff; font-weight: 800;
    box-shadow: 0 2px 8px rgba(15,118,110,.35);
  }
  /* When toggle is injected inside sidebar (legacy), also pin a top bar in main */
  .admin-layout > .main {
    padding: 12px 12px 40px !important;
    width: 100%;
  }
  .cnm-admin-topbar {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 12px; position: sticky; top: 0; z-index: 40;
    background: #f8fafc; padding: 8px 0;
  }
  .cnm-admin-topbar .admin-menu-toggle { margin: 0 !important; }
  .cnm-admin-topbar .cnm-admin-title {
    font-weight: 800; font-size: .95rem; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .admin-layout > .sidebar nav {
    display: block !important;
  }
  .admin-layout > .sidebar nav .nav-label {
    margin: .85rem 0 .3rem; font-size: .68rem;
  }
  .admin-layout > .sidebar nav a {
    display: flex !important; align-items: center;
    min-height: 44px; padding: .65rem .85rem !important;
    border-radius: 10px; margin-bottom: .2rem;
  }
  /* Stack common admin grids */
  .admin-layout .grid2,
  .admin-layout .hub-grid,
  .admin-layout [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .admin-layout .page-title { font-size: 1.35rem; }
  .admin-layout .card, .admin-layout .hub-card {
    padding: .9rem !important;
  }
  /* Tables: horizontal scroll wrapper + card mode when marked */
  .admin-layout .table-wrap,
  .admin-layout .cnm-table-scroll {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: .5rem 0 1rem; border: 1px solid #e2e8f0; border-radius: 12px;
  }
  .admin-layout table {
    min-width: 640px; font-size: .88rem;
  }
  .admin-layout table.cnm-cards-on-mobile {
    min-width: 0; width: 100%; border: 0;
  }
  .admin-layout table.cnm-cards-on-mobile thead { display: none; }
  .admin-layout table.cnm-cards-on-mobile,
  .admin-layout table.cnm-cards-on-mobile tbody,
  .admin-layout table.cnm-cards-on-mobile tr,
  .admin-layout table.cnm-cards-on-mobile td {
    display: block; width: 100%;
  }
  .admin-layout table.cnm-cards-on-mobile tr {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: .7rem .85rem; margin: 0 0 .65rem;
  }
  .admin-layout table.cnm-cards-on-mobile td {
    border: 0; padding: .25rem 0;
    display: flex; justify-content: space-between; gap: .75rem;
  }
  .admin-layout table.cnm-cards-on-mobile td::before {
    content: attr(data-label);
    font-weight: 700; color: #64748b; flex: 0 0 42%;
  }
  .admin-layout .toolbar, .admin-layout .row {
    flex-direction: column; align-items: stretch !important;
  }
  .admin-layout .toolbar .btn, .admin-layout .row .btn { width: 100%; }
}

@media (min-width: 901px) {
  .cnm-admin-backdrop, .cnm-admin-topbar { display: none !important; }
  body.admin-nav-open .cnm-admin-backdrop { display: none !important; }
}