/* CARTHENA ADMIN DASHBOARD - Production CSS */
.admin-body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; font-size:14px; color:#333; background:#F0F0F0; }
*,*::before,*::after { box-sizing:border-box; }
.admin-shell { display:grid; grid-template-columns:220px minmax(0,1fr); grid-template-rows:56px 1fr 40px; min-height:100vh; }
.admin-topbar { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#111; color:#fff; border-bottom:1px solid rgba(255,255,255,0.1); }
.topbar-logo { display:flex; align-items:baseline; gap:2px; font-size:15px; font-weight:600; letter-spacing:0.02em; }
.topbar-logo .red { color:#FF0000; }
.topbar-logo .sub { font-size:11px; color:rgba(255,255,255,0.5); margin-left:8px; text-transform:uppercase; letter-spacing:0.08em; font-weight:400; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.pill { font-size:10px; text-transform:uppercase; letter-spacing:0.1em; padding:4px 10px; border-radius:3px; font-weight:500; }
.pill-red { background:#FF0000; color:#fff; }
.pill-black { background:#333; color:#fff; }
.avatar { width:32px; height:32px; border-radius:50%; background:#333; border:1.5px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#fff; }
.topbar-username { font-size:13px; color:rgba(255,255,255,0.8); }
.topbar-signout { font-size:11px; color:rgba(255,255,255,0.4); cursor:pointer; text-decoration:underline; background:none; border:none; display:flex; align-items:center; }
.signout-text { display:inline; }
.signout-icon { display:none; }
.admin-sidebar { background:#fff; border-right:1px solid #E5E5E5; padding:20px 0; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 20px; font-size:13px; color:#888; cursor:pointer; border-left:3px solid transparent; transition:all 0.15s; text-decoration:none; }
.nav-item:hover { background:#F5F5F5; color:#333; }
.nav-item.active { border-left-color:#FF0000; color:#333; font-weight:500; background:#F5F5F5; }
.nav-icon { width:16px; height:16px; opacity:0.5; flex-shrink:0; }
.nav-item.active .nav-icon { opacity:0.8; }
.admin-main { padding:28px 32px; background:#F0F0F0; overflow-y:auto; }
.admin-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:11px; color:#888; border-top:1px solid #E5E5E5; background:#fff; }
.admin-footer a { color:#333; text-decoration:none; font-weight:500; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.page-title { font-size:18px; font-weight:500; }
.btn-create { display:flex; align-items:center; gap:6px; padding:8px 16px; background:#FF0000; color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.btn-create:hover { background:#CC0000; }
.btn-create:disabled { opacity:0.5; cursor:not-allowed; }
.btn-secondary { padding:8px 16px; background:#fff; color:#333; border:1px solid #CCC; border-radius:4px; font-size:13px; cursor:pointer; }
.btn-secondary:hover { background:#F5F5F5; }
.btn-text { background:none; border:none; color:#FF0000; font-size:13px; cursor:pointer; padding:0; text-decoration:none; }
.btn-text:hover { text-decoration:underline; }
.btn-outline-red { display:flex; align-items:center; gap:6px; padding:8px 16px; background:#fff; color:#FF0000; border:1px solid #FF0000; border-radius:4px; font-size:13px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.btn-outline-red:hover { background:#FFF0F0; }
.btn-outline-red:disabled { opacity:0.5; cursor:not-allowed; }
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index:9999; }
.modal-box { background:#fff; border-radius:8px; padding:24px; max-width:400px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.stat-card { background:#fff; border:1px solid #E8E8E8; border-radius:8px; padding:16px 20px; border-top:2px solid #E8E8E8; }
.stat-card:first-child { border-top-color:#FF0000; }
.stat-card .num { font-size:28px; font-weight:500; line-height:1.2; color:#111; }
.stat-card .label { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#888; margin-top:4px; }
.progress-section { margin-bottom:28px; }
.progress-track { height:8px; background:#E5E5E5; border-radius:4px; overflow:hidden; margin-bottom:4px; }
.progress-fill { height:100%; background:#FF0000; border-radius:4px; transition:width 0.3s; }
.progress-label { font-size:11px; color:#888; text-align:right; }
.table-card { background:#fff; border:1px solid #E8E8E8; border-radius:8px; overflow:hidden; }
.table-card table { width:100%; border-collapse:collapse; font-size:13px; }
.table-card thead { background:#F5F5F5; }
.table-card th { text-align:left; padding:10px 16px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#888; font-weight:500; }
.table-card td { padding:12px 16px; border-top:1px solid #F0F0F0; color:#333; }
.table-card tr[data-slug] { cursor:pointer; }
.table-card tr:hover td { background:#FAFAFA; }
.td-name { font-weight:500; }
.td-num { color:#888; font-size:12px; }
.slug { font-family:'SF Mono','Fira Code',monospace; font-size:11px; background:#F5F5F5; padding:2px 8px; border-radius:3px; color:#888; }
.badge { font-size:11px; padding:3px 10px; border-radius:3px; font-weight:500; display:inline-block; }
.badge-active { background:#FFEBEE; color:#C62828; }
.badge-invited { background:#F5F5F5; color:#888; }
.badge-complete { background:#111; color:#fff; }
.badge-expired { background:#fff; color:#C62828; border:1px solid #FFCDD2; }
.badge-green { background:#E8F5E9; color:#2E7D32; }
.progress-mini { display:flex; gap:3px; align-items:center; }
.seg { width:16px; height:6px; border-radius:2px; background:#E5E5E5; }
.seg.filled { background:#FF0000; }
.seg-label { font-size:11px; color:#888; margin-left:6px; }
.action-link { color:#FF0000; font-size:12px; text-decoration:none; font-weight:500; cursor:pointer; }
.action-link:hover { text-decoration:underline; }
.invite-bar { display:flex; gap:12px; align-items:center; margin-bottom:24px; padding:16px 20px; background:#fff; border:1px solid #E8E8E8; border-radius:8px; }
.invite-bar label { font-size:13px; color:#888; }
.invite-bar .dl-link { font-size:12px; color:#FF0000; text-decoration:none; margin-left:auto; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.section-title { font-size:15px; font-weight:500; }
.powered-by { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#888; margin-bottom:4px; }
.powered-by strong { color:#333; letter-spacing:0; text-transform:none; }
.client-heading { font-size:22px; font-weight:500; margin-bottom:2px; }
.client-subheading { font-size:13px; color:#888; margin-bottom:24px; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal { background:#fff; border-radius:8px; width:100%; max-width:500px; padding:0; overflow:hidden; }
.modal-accent { height:4px; background:#FF0000; }
.modal-body { padding:28px; }
.modal-title { font-size:18px; font-weight:500; margin-bottom:8px; }
.modal-subtitle { font-size:13px; color:#888; margin-bottom:24px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#888; margin-bottom:6px; font-weight:500; }
.form-label .optional { font-weight:400; text-transform:none; letter-spacing:0; color:#AAA; }
.form-input { width:100%; padding:10px 12px; border:1px solid #CCC; border-radius:4px; font-size:14px; color:#333; background:#fff; transition:border-color 0.15s; }
.form-input:focus { outline:none; border-color:#FF0000; }
.form-input.has-error { border-color:#C62828; }
.form-hint { font-size:11px; color:#888; margin-top:4px; }
.form-error { color:#C62828; font-size:13px; margin-top:8px; }
.password-field { position:relative; }
.password-field .form-input { padding-right:48px; }
.eye-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:4px; color:#888; transition:color 0.15s; display:flex; align-items:center; }
.eye-toggle:hover { color:#333; }
.eye-toggle.visible { color:#FF0000; }
.eye-toggle svg { width:20px; height:20px; }
.login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#F0F0F0; padding:20px; }
.login-card { background:#fff; border-radius:8px; width:100%; max-width:440px; padding:0; overflow:hidden; }
.login-accent { height:4px; background:#FF0000; }
.login-body { padding:40px 36px 36px; }
.login-logo { font-size:16px; font-weight:600; letter-spacing:0.02em; margin-bottom:4px; }
.login-logo .red { color:#FF0000; }
.login-tagline { font-size:11px; color:#888; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:28px; }
.login-heading { font-size:20px; font-weight:500; margin-bottom:6px; }
.login-subtext { font-size:13px; color:#888; margin-bottom:28px; }
.login-btn { width:100%; padding:12px; background:#FF0000; color:#fff; border:none; border-radius:4px; font-size:14px; font-weight:500; cursor:pointer; transition:background 0.15s; }
.login-btn:hover { background:#CC0000; }
.login-btn:disabled { opacity:0.5; cursor:not-allowed; }
.forgot-link { display:block; text-align:right; margin-top:12px; font-size:13px; color:#FF0000; text-decoration:none; cursor:pointer; }
.forgot-link:hover { text-decoration:underline; }
.signup-prompt { text-align:center; margin-top:20px; padding-top:20px; border-top:1px solid #E8E8E8; font-size:13px; color:#888; }
.signup-prompt a { color:#FF0000; font-weight:500; text-decoration:none; cursor:pointer; }
.signup-prompt a:hover { text-decoration:underline; }
.login-support { text-align:center; margin-top:20px; font-size:12px; color:#888; }
.login-support a { color:#333; text-decoration:none; font-weight:500; }
.confirm-box { border-left:3px solid #FF0000; background:#FFF5F5; padding:16px 20px; border-radius:0 4px 4px 0; margin-top:16px; }
.confirm-box .title { font-weight:500; margin-bottom:6px; }
.confirm-box .text { font-size:13px; color:#555; }
.hidden { display:none !important; }
.empty-state { text-align:center; padding:40px 20px; color:#888; font-size:13px; }
.admin-loading-state { text-align:center; padding:40px; color:#888; font-size:13px; }
.access-denied { text-align:center; padding:60px 20px; max-width:440px; margin:0 auto; }
.access-denied h2 { font-size:20px; font-weight:500; margin-bottom:12px; }
.access-denied p { font-size:13px; color:#888; line-height:1.6; }
.invite-progress-wrap { margin-top:12px; }
.invite-result { padding:12px 16px; font-size:13px; font-weight:500; margin-top:12px; border-radius:4px; }
.invite-result.success { background:#E8F5E9; color:#2E7D32; }
.invite-result.warning { background:#FFF3E0; color:#E65100; }
@media (max-width:768px) {
  /* --- Grid layout --- */
  .admin-shell { grid-template-columns:1fr; grid-template-rows:56px auto 1fr 40px; }

  /* --- Fix 1: Header lockup --- */
  .admin-topbar { padding:0 12px; gap:8px; }
  .topbar-logo .sub { display:none; }
  .topbar-username { display:none; }
  .topbar-right { gap:8px; }
  .signout-text { display:none; }
  .signout-icon { display:block; color:rgba(255,255,255,0.5); }
  .topbar-signout { text-decoration:none; padding:6px; }
  .pill { font-size:9px; padding:3px 8px; }

  /* --- Sidebar (existing) --- */
  .admin-sidebar { display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid #E5E5E5; padding:0; }
  .nav-item { border-left:none; border-bottom:3px solid transparent; padding:12px 16px; white-space:nowrap; }
  .nav-item.active { border-left-color:transparent; border-bottom-color:#FF0000; }

  /* --- Main content --- */
  .admin-main { padding:16px 12px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat-card { padding:12px 14px; }
  .stat-card .num { font-size:22px; }

  /* --- Fix 2: Table to stacked cards --- */
  .table-card { background:transparent; border:none; overflow:visible; }
  .table-card table { display:block; }
  .table-card thead { display:none; }
  .table-card tbody { display:block; }
  .table-card tr { display:block; background:#fff; border:1px solid #E8E8E8; border-radius:8px; padding:14px 16px; margin-bottom:10px; cursor:pointer; position:relative; }
  .table-card tr:hover { background:#FAFAFA; }
  .table-card td { display:block; padding:0; border:none; }
  .table-card td.td-name { font-size:15px; font-weight:500; margin-bottom:2px; }
  .table-card td.td-num { display:inline; font-size:12px; color:#888; }
  .table-card td.td-num::after { content:' \00B7 '; }
  .table-card td.td-num:last-of-type::after { content:''; }

  /* Card action links */
  .table-card .action-link { font-size:11px; }

  /* Page header */
  .page-header { flex-wrap:wrap; gap:8px; }
  .btn-create { width:100%; justify-content:center; }

  /* Invite bar */
  .invite-bar { flex-wrap:wrap; gap:8px; padding:12px 14px; }

  /* Modals */
  .modal { max-width:calc(100vw - 32px); margin:0 16px; }
  .modal-body { padding:20px 16px; }
}