/* ============================================
   NUI Admin Panel Styles — Extracted from JS
   ============================================
   Source: CSS Audit Phase — inline style extraction
   Scope: Loaded ONLY by /app/index.html
   ============================================ */

/* ── Layout: Grids ────────────────────────── */
.admin-grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-bottom:32px;}
.admin-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.admin-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.admin-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.admin-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}

/* ── Layout: Flex ─────────────────────────── */
.admin-row-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-gap-4{display:flex;gap:4px;}
.flex-gap-6{display:flex;gap:6px;}
.flex-gap-8{display:flex;gap:8px;}
.flex-gap-12{display:flex;gap:12px;}
.flex-gap-16{display:flex;gap:16px;}
.flex-gap-24{display:flex;gap:24px;}
.flex-center-gap-8{display:flex;align-items:center;gap:8px;}
.flex-center-gap-12{display:flex;align-items:center;gap:12px;}
.flex-col{display:flex;flex-direction:column;}
.flex-col-gap-8{display:flex;flex-direction:column;gap:8px;}
.flex-col-gap-12{display:flex;flex-direction:column;gap:12px;}
.flex-col-gap-16{display:flex;flex-direction:column;gap:16px;}
.flex-wrap{display:flex;flex-wrap:wrap;gap:8px;}

/* ── Cards ────────────────────────────────── */
.admin-card-dark{background:rgba(255,255,255,0.08);padding:24px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);transition:all 0.25s ease;}
.admin-card-dark:hover{border-color:rgba(255,255,255,0.18);}
.admin-card-gradient{background:linear-gradient(135deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.06) 100%);padding:24px;border-radius:14px;color:#fff;border:1px solid rgba(255,255,255,0.12);}
.admin-card-light{background:#fff;padding:24px;border-radius:14px;border:1px solid #e5e5e5;}
.admin-card-glass{background:rgba(255,255,255,0.09);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:24px;border-radius:14px;border:1px solid rgba(255,255,255,0.14);}
.admin-card-sm{background:rgba(255,255,255,0.08);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);}
.admin-list-item{padding:12px;border-bottom:1px solid rgba(255,255,255,0.09);}
.admin-list-item-lg{padding:16px;border-bottom:1px solid rgba(255,255,255,0.09);}

/* ── Form inputs (admin-specific) ─────────── */
.admin-input{background:rgba(255,255,255,0.09);color:#fff;border:1px solid rgba(255,255,255,0.16);padding:10px 14px;border-radius:10px;font-size:14px;width:100%;transition:border-color 0.2s,box-shadow 0.2s;}
.admin-input:focus{outline:none;border-color:rgba(255,68,68,0.5);box-shadow:0 0 0 3px rgba(255,68,68,0.08);}
.admin-select{background:rgba(255,255,255,0.09);color:#fff;border:1px solid rgba(255,255,255,0.16);padding:10px 14px;border-radius:10px;font-size:14px;}
.admin-textarea{background:rgba(255,255,255,0.09);color:#fff;border:1px solid rgba(255,255,255,0.16);padding:12px;border-radius:10px;font-size:14px;width:100%;min-height:100px;resize:vertical;transition:border-color 0.2s;}

/* ── Typography (admin) ──────────────────── */
.admin-heading-sm{font-size:14px;color:#999;margin-bottom:16px;}
.admin-heading-xs{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}

/* ── Stat numbers ─────────────────────────── */
.stat-num-lg{font-size:32px;font-weight:700;}
.stat-num-xl{font-size:48px;font-weight:700;}
.stat-num-accent{font-size:32px;font-weight:700;color:var(--red);}
.stat-num-green{font-size:32px;font-weight:700;color:#10b981;}
.stat-num-yellow{font-size:32px;font-weight:700;color:#f59e0b;}

/* ── Status badges ────────────────────────── */
.status-active{background:#10b981;color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}
.status-pending{background:#f59e0b;color:#000;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}
.status-overdue{background:#ef4444;color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}
.status-draft{background:#666;color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}


/* ── Pass 2: Additional extracted patterns ─── */
.admin-card-dark-sm{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:24px;}
.admin-card-dark-center{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:20px;text-align:center;}
.admin-footer-bar{background:rgba(28,28,28,0.90);backdrop-filter:blur(10px);padding:20px;text-align:center;border-top:1px solid rgba(255,255,255,0.12);}
.admin-input-dark{width:100%;padding:12px;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.16);color:#fff;border-radius:10px;transition:border-color 0.2s;}
.admin-input-dark:focus{outline:none;border-color:rgba(255,68,68,0.5);}
.admin-field-label{display:block;margin-bottom:8px;color:#888;font-size:13px;}
.admin-field-label-bold{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:8px;}
.admin-label-xs{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
.admin-subheading-red{margin:16px 0 8px;color:var(--red);}
.admin-text-muted-xs{font-size:12px;color:var(--admin-text-muted);}


/* ============================================
   ADMIN MOBILE RESPONSIVE SYSTEM
   Breakpoints: 768px (tablet), 480px (phone)
   ============================================ */

/* ── Mobile Nav Hamburger Button ─────────── */
.admin-mobile-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  background: rgba(153,0,0,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.admin-mobile-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.25s ease;
}
.admin-mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.admin-mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Sidebar Overlay ─────────────────────── */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
  /* Show hamburger */
  .admin-mobile-toggle { display: flex; }

  /* Sidebar slides in from left */
  .admin-sidebar, .portal-sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
    width: 260px !important;
    z-index: 9998;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
  }
  .admin-sidebar.open, .portal-sidebar.open {
    transform: translateX(0);
  }
  .admin-sidebar-overlay.open { display: block; }

  /* Main content fills full width */
  .admin-container, .portal-container {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .admin-main, .portal-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
  }

  /* Header padding for hamburger */
  .admin-header, .portal-header {
    padding-left: 68px !important;
  }

  /* Collapse all fixed grids to single column */
  .admin-grid-2-1,
  .admin-grid-2,
  .admin-grid-3,
  .admin-grid-4,
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 3fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex rows wrap on mobile */
  .admin-row-between,
  .flex-between,
  .flex-gap-12,
  .flex-gap-16,
  .flex-gap-24 {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Tables scroll horizontally */
  .data-table, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Modals full screen on mobile */
  .modal-overlay .modal, .modal {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Stat number sizes */
  .stat-num-xl, .fs-48 { font-size: 28px !important; }
  .stat-num-lg, .fs-32 { font-size: 22px !important; }
  .fs-28 { font-size: 20px !important; }

  /* Buttons full width in button groups */
  .modal-footer,
  .flex-gap-12.mt-24,
  .flex-gap-12.mt-16 {
    flex-direction: column;
  }
  .modal-footer .btn-admin,
  .modal-footer button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* Phone-specific tightening */
  .admin-main, .portal-main { padding: 10px !important; }
  .admin-card-dark, .admin-card-glass, .admin-card-gradient { padding: 14px !important; }
  .fs-24 { font-size: 18px !important; }
  .fs-20 { font-size: 16px !important; }

  /* Panel headers stack vertically */
  .panel-header .flex-between,
  .flex-between.mb-32,
  .flex-between.mb-24 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .panel-header .flex-gap-12,
  .panel-header .flex-gap-16 {
    width: 100%;
    flex-wrap: wrap;
  }
  .panel-header button,
  .panel-header a {
    flex: 1;
    text-align: center;
    min-width: 120px;
  }

  /* Form rows stack */
  .form-row { flex-direction: column !important; }
  .form-row .form-group { width: 100% !important; }

  /* Date range select full width */
  #analyticsDateRange { width: 100%; }
}

/* Hide site nav on /app/ — admin has its own header */
body:has(#adminDashboard) .nav { display: none !important; }

/* When admin dashboard is visible, ensure no top padding from site nav */
#adminDashboard[style*="display: block"] ~ .nav,
#adminDashboard.active ~ .nav { display: none !important; }