/* ===================================================================
   admin.css — Admin Panel Styles
   EDX Talent Academy
=================================================================== */

/* ── Admin Layout ── */
.admin-layout { display:grid; grid-template-columns:220px 1fr; gap:0; min-height:calc(100vh - 72px); }
#admin-dashboard { display:grid; grid-template-columns:220px 1fr; gap:0; min-height:100vh; position:relative; }
.admin-sidebar { background:#fff; border-right:1.5px solid #eee; display:flex; flex-direction:column; padding:1.5rem 1rem; gap:0.25rem; position:sticky; top:0; align-self:start; min-height:100vh; z-index:100; }
.admin-logo { display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0.75rem 1.5rem; }
.admin-main { background:#f7f8fc; overflow:auto; display:flex; flex-direction:column; min-height:100vh; }
.admin-header { background:#fff; border-bottom:1.5px solid #eee; padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; gap:0.75rem; }
.admin-sidebar-logo { padding:0.5rem 0.75rem 1.5rem; }
.admin-sidebar-logo h2 { font-size:15px; font-weight:900; letter-spacing:-0.02em; }
.admin-sidebar-logo p { font-size:11px; color:#aaa; font-weight:600; margin-top:2px; }
.admin-sidebar-section { font-size:10px; font-weight:900; color:#ccc; letter-spacing:.1em; text-transform:uppercase; padding:0.75rem 0.75rem 0.35rem; margin-top:0.5rem; }
.admin-nav-btn { display:flex; align-items:center; gap:0.6rem; padding:11px 14px; border:none; background:none; cursor:pointer; width:100%; text-align:left; border-radius:0.875rem; font-size:13px; font-weight:700; color:#777; transition:all .2s; text-decoration:none; }
.admin-nav-btn:hover { background:#f5f5f7; color:#333; }
.admin-nav-btn.active { background:linear-gradient(135deg,rgba(174,12,116,0.1),rgba(112,0,255,0.08)); color:var(--primary); }
.admin-nav-btn .nav-icon { font-size:16px; width:20px; text-align:center; }
.admin-content { background:#f7f8fc; padding:2rem 2.5rem; overflow:auto; }
.admin-main > #admin-content-area { flex:1; }
.admin-tab-panel { display:none; }
.admin-tab-panel.active { display:block; }

/* ── Hamburger button (hidden on desktop) ── */
.hamburger-btn { display:none; background:none; border:1.5px solid #eee; border-radius:0.75rem; padding:6px 8px; cursor:pointer; color:#555; transition:all .2s; flex-shrink:0; }
.hamburger-btn:hover { background:#f5f5f7; color:var(--primary); }
.hamburger-btn .material-symbols-outlined { font-size:22px; display:block; }

/* ── Sidebar overlay (hidden on desktop) ── */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(3px); z-index:99; }

/* ── Stats ── */
.stat-card { background:#fff; border-radius:1.5rem; padding:1.5rem; border:1px solid #eee; position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.07); }
.stat-card .stat-icon { width:44px; height:44px; border-radius:0.875rem; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:0.875rem; }
.stat-card .stat-num { font-size:2.2rem; font-weight:900; letter-spacing:-0.04em; line-height:1; }
.stat-card .stat-label { font-size:12px; font-weight:600; color:#888; margin-top:0.3rem; }
.stat-card .stat-badge { position:absolute; top:1rem; right:1rem; font-size:9px; font-weight:800; padding:3px 8px; border-radius:99px; letter-spacing:.04em; text-transform:uppercase; }

/* ── Cards & Workshop ── */
.ws-card { background:#fff; border:1.5px solid #eee; border-radius:1.25rem; padding:1.25rem; display:flex; align-items:center; gap:1.25rem; transition:all .2s; }
.ws-card:hover { border-color:rgba(174,12,116,0.25); box-shadow:0 4px 16px rgba(174,12,116,0.07); }
.ws-icon { width:48px; height:48px; border-radius:0.875rem; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.admin-input { width:100%; padding:10px 14px; border:2px solid #eee; border-radius:0.875rem; font-family:inherit; font-size:13px; font-weight:600; outline:none; transition:border .2s; box-sizing:border-box; }
.admin-input:focus { border-color:var(--primary); }
.ws-delete-btn { background:none; border:none; color:#ccc; cursor:pointer; font-size:18px; padding:4px; transition:color .2s; line-height:1; }
.ws-delete-btn:hover { color:#f00; }

/* ── Programs & Pricing ── */
.prog-card { background:#fff; border:1.5px solid #eee; border-radius:1.25rem; padding:1.5rem; display:flex; gap:1rem; transition:all .2s; }
.prog-card:hover { border-color:rgba(174,12,116,0.2); box-shadow:0 4px 16px rgba(174,12,116,0.06); }
.pricing-card { background:#fff; border:1.5px solid #eee; border-radius:1.5rem; padding:1.75rem; }

/* ── Admin sub-tabs ── */
.admin-sub-tab-bar { display:flex; gap:0.4rem; border-bottom:1.5px solid #eee; margin-bottom:1.75rem; }
.admin-sub-tab { padding:9px 16px; font-size:12px; font-weight:800; border:none; background:none; cursor:pointer; color:#aaa; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; border-radius:0.5rem 0.5rem 0 0; }
.admin-sub-tab.active { color:var(--primary); border-bottom-color:var(--primary); background:rgba(174,12,116,0.04); }
.sub-tab-bar { display:flex; gap:0.4rem; margin-bottom:1.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Section header ── */
.admin-section-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:0.75rem; }
.admin-section-hdr h2 { font-size:18px; font-weight:900; }
.admin-section-hdr p { font-size:12px; color:#999; margin-top:0.2rem; }

/* ── Stats Grid ── */
.admin-stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1.25rem; margin-bottom:2rem; }
.stat-card .num { font-size:2.5rem; font-weight:900; color:var(--primary); margin-top:0.5rem; }
.stat-card h3 { font-size:12px; font-weight:800; color:#aaa; text-transform:uppercase; letter-spacing:.05em; }

/* ── Card Grid (Programs, Pricing, Jobs) ── */
.admin-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

/* ── Table shared styles ── */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff; border-radius:1.25rem; border:1px solid #eee; }
.th-cell { padding:0.875rem 1.25rem; font-size:11px; font-weight:800; color:#aaa; text-transform:uppercase; letter-spacing:.04em; text-align:left; white-space:nowrap; }
.td-cell { padding:0.875rem 1.25rem; font-size:13px; font-weight:600; color:#555; }

/* ── Pagination ── */
.pagination-bar { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.25rem; }
.btn-sm { padding:7px 14px !important; font-size:12px !important; }
.btn-sm:disabled { opacity:0.4; cursor:not-allowed; }

/* ── Delete button ── */
.btn-del { background:none; border:1.5px solid #eee; color:#f00; font-size:11px; font-weight:700; cursor:pointer; padding:5px 12px; border-radius:99px; transition:all .2s; white-space:nowrap; }
.btn-del:hover { background:#fee2e2; border-color:#fca5a5; }

/* ── Quick actions ── */
.quick-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ===================================================================
   RESPONSIVE DESIGN
=================================================================== */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  #admin-dashboard { grid-template-columns:1fr; }

  /* Sidebar → drawer */
  .admin-sidebar {
    position:fixed; top:0; left:0; bottom:0; width:260px;
    transform:translateX(-100%); transition:transform .3s ease;
    box-shadow:none; z-index:100; min-height:100vh;
  }
  body.sidebar-open .admin-sidebar {
    transform:translateX(0);
    box-shadow:4px 0 24px rgba(0,0,0,0.15);
  }
  body.sidebar-open .sidebar-overlay { display:block; }

  .hamburger-btn { display:flex; align-items:center; justify-content:center; }
  .admin-header { padding:0.875rem 1.25rem; }
  #admin-content-area { padding:1.25rem !important; }

  .admin-card-grid { grid-template-columns:1fr; }
  .admin-stats-grid { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:1rem; }
  .stat-card .num { font-size:2rem; }

  /* WS card stack */
  .ws-card { flex-wrap:wrap; }
  .ws-card > div:nth-child(2) > div { flex-wrap:wrap; }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
  .admin-sidebar { width:80vw; max-width:280px; }
  .admin-header { padding:0.75rem 1rem; }
  .admin-header h2 { font-size:16px !important; }
  #admin-content-area { padding:0.875rem !important; }

  .admin-stats-grid { grid-template-columns:1fr 1fr; gap:0.75rem; }
  .stat-card { padding:1rem; border-radius:1rem; }
  .stat-card .num { font-size:1.75rem; }
  .stat-card h3 { font-size:10px; }

  .admin-card-grid { grid-template-columns:1fr; gap:1rem; }
  .ws-card { padding:1rem; gap:0.75rem; }

  /* Tables: horizontal scroll, min-width keeps columns readable */
  .table-responsive table { min-width:500px; }
  .th-cell, .td-cell { padding:0.65rem 0.875rem; font-size:12px; }

  /* Modal full width */
  .card[style*="max-width"] { max-width:95vw !important; }
  div[style*="max-width:600px"], div[style*="max-width:640px"],
  div[style*="max-width:500px"], div[style*="max-width:400px"],
  div[style*="max-width:360px"] { max-width:95vw !important; }

  /* Quick actions stack */
  .quick-actions { flex-direction:column; }
  .quick-actions button { width:100%; }

  /* Sub-tabs scroll */
  .sub-tab-bar { gap:0.25rem; }
  .admin-sub-tab { padding:8px 12px; font-size:11px; white-space:nowrap; }

  /* Touch targets */
  .admin-nav-btn { padding:13px 14px; min-height:44px; }
  .btn-del { padding:8px 14px; min-height:36px; }
  .ws-delete-btn { padding:8px; font-size:22px; }

  /* Login card responsive */
  #admin-login-section .card,
  #admin-login-section > div > div { padding:2rem 1.5rem !important; margin:1rem; }
}