/* ==========================================================================
   admin-responsive.css  —  PlexiTrust Consolidated Admin
   Mobile responsiveness: off-canvas sidebar + card-style tables.
   Loaded on every admin page; only activates at <= 991px.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Toggle button + overlay are hidden on desktop */
.admin-mobile-toggle { display: none; }
.admin-sidebar-overlay { display: none; }

@media (max-width: 991px) {

  /* ---- Hamburger toggle (injected by admin-responsive.js) ---- */
  .admin-mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 12px; left: 12px; z-index: 1100;
    width: 46px; height: 46px; padding: 0;
    border: none; border-radius: 12px; cursor: pointer;
    background: var(--primary, #0b5e2a); color: #fff;
    font-size: 22px; line-height: 1;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
  }
  .admin-mobile-toggle:active { transform: scale(.96); }

  /* ---- Off-canvas sidebar ---- */
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    width: 268px !important; max-width: 84vw;
    z-index: 1050 !important;
  }
  body.admin-sidebar-open .admin-sidebar { transform: translateX(0); }
  body.admin-sidebar-open .admin-sidebar-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 1000;
  }

  /* ---- Main content takes full width ---- */
  .admin-container { display: block !important; }
  .admin-main,
  .main-content,
  .admin-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 70px 14px 28px !important;
  }

  /* ---- Stat / card grids stack vertically ---- */
  .stats-grid, .dashboard-stats, .stat-cards, .cards-grid,
  .summary-cards, .overview-cards, .info-grid, .form-grid, .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ---- Generic header rows wrap ---- */
  .admin-header, .page-header, .content-header, .toolbar, .table-actions {
    flex-wrap: wrap !important; gap: 10px;
  }

  /* ====================================================================
     TABLES  ->  CARDS
     Each row becomes a card; each cell shows its column header as a label.
     (Labels are added to <td data-label> by admin-responsive.js)
     ==================================================================== */
  table.admin-table, table.data-table,
  .admin-main table, .main-content table, .admin-content table {
    width: 100% !important; border: 0 !important; background: transparent !important;
  }
  table.admin-table thead, table.data-table thead,
  .admin-main table thead, .main-content table thead, .admin-content table thead {
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  table.admin-table tr, table.data-table tr,
  .admin-main table tbody tr, .main-content table tbody tr, .admin-content table tbody tr {
    display: block !important;
    margin: 0 0 14px !important;
    background: #fff !important;
    border: 1px solid #e3e7eb !important;
    border-radius: 14px !important;
    padding: 6px 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
  }
  table.admin-table td, table.data-table td,
  .admin-main table td, .main-content table td, .admin-content table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: right !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f2f4 !important;
    font-size: .9rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    min-height: 0 !important;
  }
  table.admin-table tr td:last-child, table.data-table tr td:last-child,
  .admin-main table tr td:last-child { border-bottom: 0 !important; }

  table.admin-table td::before, table.data-table td::before,
  .admin-main table td::before, .main-content table td::before, .admin-content table td::before {
    content: attr(data-label);
    font-weight: 600; color: #4a5560; text-align: left;
    flex: 0 0 42%; padding-right: 8px;
  }
  /* cells without a label (checkbox / actions) don't reserve label space */
  td:not([data-label])::before, td[data-label=""]::before { content: "" !important; flex: 0 !important; }
  td.checkbox-cell, td.actions-cell, td.action-cell { justify-content: flex-end !important; }

  /* keep action buttons usable */
  .admin-main table td .btn, .admin-main table td button, .admin-main table td a.btn {
    display: inline-flex; align-items: center;
  }

  /* ---- Forms & inputs fit the viewport ---- */
  .admin-main input, .admin-main select, .admin-main textarea,
  .main-content input, .main-content select, .main-content textarea {
    max-width: 100% !important;
  }

  /* ---- Modals fit small screens ---- */
  .modal-content, .modal-dialog, .popup-content {
    width: 94% !important; max-width: 94% !important; margin: 20px auto !important;
  }

  /* ---- Any leftover wide table can scroll horizontally ---- */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Avoid horizontal page scroll ---- */
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* Small phones: tighten card label width */
@media (max-width: 480px) {
  table.admin-table td::before, table.data-table td::before,
  .admin-main table td::before { flex: 0 0 46%; font-size: .82rem; }
  .admin-main, .main-content, .admin-content { padding: 66px 10px 24px !important; }
}