/* ============================================================
   Admin Panel — unified styling for all admin pages.
   Uses shell-apple.css tokens (--surface, --border, --accent, etc.)
   ============================================================ */

/* ── Page header band ── */
.admin-header{
  background:linear-gradient(135deg,#0c2f33 0%,#0f766e 100%);
  color:#fff;
  border-radius:var(--radius-lg,16px);
  padding:1.5rem 1.75rem;
  margin-bottom:1.5rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.admin-header h1,.admin-header h2,.admin-header h3{
  color:#fff;
  font-weight:800;
  margin:0;
  font-size:1.35rem;
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-header .admin-header__actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-header .btn{
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-sm,8px);
  font-weight:600;
  font-size:.82rem;
  padding:.5rem 1rem;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .18s,border-color .18s;
}
.admin-header .btn:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.4)}
.admin-header .btn--primary{background:var(--accent,#0071e3);border-color:var(--accent,#0071e3)}
.admin-header .btn--primary:hover{background:var(--accent-hover,#0077ed)}

/* ── Stats row (api-keys stat cards) ── */
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.admin-stat-card{
  background:var(--card-surface,linear-gradient(180deg,#fff 0%,#f4f9fd 100%));
  border:1px solid var(--border,rgba(0,0,0,.07));
  border-radius:var(--radius-lg,16px);
  padding:1.25rem;
  text-align:center;
  transition:box-shadow .22s,transform .22s;
}
.admin-stat-card:hover{box-shadow:var(--shadow-sm,0 2px 6px rgba(0,0,0,.08));transform:translateY(-2px)}
.admin-stat-card .icon-circle{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto .5rem;font-size:1.1rem;
}
.admin-stat-card h3{font-weight:800;font-size:1.5rem;margin:0;color:var(--text,#1d1d1f)}
.admin-stat-card small{color:var(--text-2,#6e6e73);font-size:.78rem}

/* Icon circle tints */
.admin-icon--primary{background:rgba(0,113,227,.1);color:#0071e3}
.admin-icon--success{background:rgba(52,199,89,.12);color:#34c759}
.admin-icon--danger{background:rgba(255,59,48,.1);color:#ff3b30}
.admin-icon--info{background:rgba(8,145,178,.1);color:#0891b2}

/* ── Filter bar ── */
.admin-filters{
  background:var(--card-surface,linear-gradient(180deg,#fff 0%,#f4f9fd 100%));
  border:1px solid var(--border,rgba(0,0,0,.07));
  border-radius:var(--radius-lg,16px);
  padding:1rem 1.25rem;
  margin-bottom:1.5rem;
}
.admin-filters .form-label{font-weight:700;font-size:.8rem;color:var(--text-2,#6e6e73)}
.admin-filters .form-control,.admin-filters .form-select{
  border-radius:var(--radius-sm,8px);
  border:1.5px solid var(--border,rgba(0,0,0,.07));
  font-size:.85rem;
  background:var(--surface,#fff);
  transition:border-color .2s;
}
.admin-filters .form-control:focus,.admin-filters .form-select:focus{
  border-color:var(--accent,#0071e3);
  box-shadow:0 0 0 3px rgba(0,113,227,.12);
}

/* ── Data card (wraps table or content) ── */
.admin-card{
  background:var(--card-surface,linear-gradient(180deg,#fff 0%,#f4f9fd 100%));
  border:1px solid var(--border,rgba(0,0,0,.07));
  border-radius:var(--radius-lg,16px);
  overflow:hidden;
}
.admin-card__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border,rgba(0,0,0,.07));
}
.admin-card__head h5{margin:0;font-weight:800;font-size:.95rem}

/* ── Table styling ── */
.admin-table{width:100%;border-collapse:collapse}
.admin-table thead{background:var(--surface-2,#f7f7f9)}
.admin-table th{
  padding:.7rem 1rem;font-size:.78rem;font-weight:700;
  color:var(--text-2,#6e6e73);text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--border,rgba(0,0,0,.07));
  text-align:right;white-space:nowrap;
}
.admin-table td{
  padding:.7rem 1rem;font-size:.85rem;color:var(--text,#1d1d1f);
  border-bottom:1px solid var(--border,rgba(0,0,0,.04));
  vertical-align:middle;
}
.admin-table tbody tr{transition:background .15s}
.admin-table tbody tr:hover{background:rgba(0,113,227,.03)}
.admin-table tbody tr:last-child td{border-bottom:none}

/* ── Badges ── */
.admin-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;
}
.admin-badge--success{background:rgba(52,199,89,.12);color:#34c759}
.admin-badge--danger{background:rgba(255,59,48,.1);color:#ff3b30}
.admin-badge--primary{background:rgba(0,113,227,.1);color:#0071e3}
.admin-badge--secondary{background:rgba(0,0,0,.06);color:var(--text-2,#6e6e73)}
.admin-badge--warning{background:rgba(255,149,0,.12);color:#ff9500}
.admin-badge--info{background:rgba(8,145,178,.1);color:#0891b2}

/* ── Action buttons in table rows ── */
.admin-actions{display:flex;gap:4px;flex-wrap:nowrap}
.admin-actions .btn-icon{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  font-size:.8rem;border:1px solid var(--border,rgba(0,0,0,.07));
  background:var(--surface,#fff);color:var(--text-2,#6e6e73);
  transition:all .18s;flex-shrink:0;
}
.admin-actions .btn-icon:hover{background:var(--surface-2,#f7f7f9);border-color:var(--border-strong,rgba(0,0,0,.11));transform:translateY(-1px)}
.admin-actions .btn-icon--primary{color:#0071e3;border-color:rgba(0,113,227,.2)}
.admin-actions .btn-icon--danger{color:#ff3b30;border-color:rgba(255,59,48,.15)}
.admin-actions .btn-icon--warning{color:#ff9500;border-color:rgba(255,149,0,.15)}
.admin-actions .btn-icon--success{color:#34c759;border-color:rgba(52,199,89,.15)}

/* ── Pagination ── */
.admin-pagination{
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:1rem 1.25rem;border-top:1px solid var(--border,rgba(0,0,0,.04));
  flex-wrap:wrap;
}
.admin-pagination .page-link{
  border-radius:8px;min-width:36px;text-align:center;padding:.4rem .7rem;
  font-size:.82rem;font-weight:600;color:var(--text-2,#6e6e73);
  border:1px solid var(--border,rgba(0,0,0,.07));
  background:var(--surface,#fff);transition:all .18s;
}
.admin-pagination .page-link:hover{background:var(--surface-2,#f7f7f9);border-color:var(--accent,#0071e3);color:var(--accent,#0071e3)}
.admin-pagination .active .page-link{background:var(--accent,#0071e3);color:#fff;border-color:var(--accent,#0071e3)}
.admin-pagination .disabled .page-link{opacity:.4;pointer-events:none}

/* ── Form card (create/edit) ── */
.admin-form-card{
  background:var(--card-surface,linear-gradient(180deg,#fff 0%,#f4f9fd 100%));
  border:1px solid var(--border,rgba(0,0,0,.07));
  border-radius:var(--radius-lg,16px);
  overflow:hidden;
}
.admin-form-card__head{
  padding:1.25rem 1.5rem;
  background:var(--surface-2,#f7f7f9);
  border-bottom:1px solid var(--border,rgba(0,0,0,.07));
}
.admin-form-card__head h4{margin:0;font-weight:800}
.admin-form-card__body{padding:1.5rem}
.admin-form-card .form-label{font-weight:700;font-size:.82rem;color:var(--text-2,#6e6e73)}
.admin-form-card .form-control,.admin-form-card .form-select{
  border-radius:var(--radius-sm,8px);
  border:1.5px solid var(--border,rgba(0,0,0,.07));
  padding:.6rem .9rem;
  transition:border-color .2s,box-shadow .2s;
}
.admin-form-card .form-control:focus,.admin-form-card .form-select:focus{
  border-color:var(--accent,#0071e3);
  box-shadow:0 0 0 3px rgba(0,113,227,.12);
}
.admin-form-card .form-text{font-size:.78rem;color:var(--text-3,#a1a1a6)}
.admin-form-card .form-switch .form-check-input{
  width:2.5em;height:1.4em;
}
.admin-form-card .form-switch .form-check-input:checked{background-color:#34c759;border-color:#34c759}

/* ── Form actions ── */
.admin-form-actions{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:1rem;border-top:1px solid var(--border,rgba(0,0,0,.04));
  margin-top:1rem;
}
.admin-form-actions .btn-cancel{
  background:var(--surface-2,#f7f7f9);border:1.5px solid var(--border,rgba(0,0,0,.07));
  border-radius:var(--radius-sm,8px);padding:.55rem 1.2rem;font-weight:600;font-size:.85rem;
  color:var(--text-2,#6e6e73);transition:all .18s;
}
.admin-form-actions .btn-cancel:hover{background:var(--surface-3,#eeeef2)}
.admin-form-actions .btn-save{
  background:var(--accent,#0071e3);color:#fff;
  border:none;border-radius:var(--radius-sm,8px);
  padding:.55rem 1.4rem;font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .18s,transform .15s;
}
.admin-form-actions .btn-save:hover{background:var(--accent-hover,#0077ed);transform:translateY(-1px)}

/* ── Admin page bottom padding (above tabbar) ── */
.admin-page{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px) + 20px)}

/* ── Table note ── */
.admin-table-note{
  padding:.75rem 1.25rem;font-size:.78rem;color:var(--text-3,#a1a1a6);
  border-top:1px solid var(--border,rgba(0,0,0,.04));
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — stacked card layout instead of unreadable tables
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .admin-header{
    padding:1.25rem 1rem;border-radius:var(--radius-md,12px);
    flex-direction:column;align-items:flex-start;
  }
  .admin-header h1,.admin-header h2,.admin-header h3{font-size:1.15rem}
  .admin-header .admin-header__actions{width:100%}
  .admin-header .admin-header__actions .btn{flex:1;justify-content:center;padding:.6rem}

  .admin-stats{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .admin-stat-card{padding:1rem}
  .admin-stat-card h3{font-size:1.25rem}

  .admin-filters{padding:.75rem 1rem;border-radius:var(--radius-md,12px)}
  .admin-filters .row>*{margin-bottom:.5rem}

  /* ── Transform table into stacked cards ── */
  .admin-table thead{display:none}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{
    display:block;
    border:none;
  }
  .admin-table{margin:0}
  .admin-table tbody tr{
    background:var(--card-surface,linear-gradient(180deg,#fff 0%,#f4f9fd 100%));
    border:1px solid var(--border,rgba(0,0,0,.07));
    border-radius:var(--radius-md,12px);
    margin:.5rem .75rem;
    padding:0;
    overflow:hidden;
  }
  .admin-table td{
    padding:.55rem .75rem;
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;
    border-bottom:1px solid rgba(0,0,0,.03);
    font-size:.82rem;
    text-align:left; /* values on the left, labels on the right (RTL flips) */
  }
  .admin-table td::before{
    content:attr(data-label);
    font-weight:700;font-size:.72rem;color:var(--text-2,#6e6e73);
    text-transform:uppercase;letter-spacing:.03em;
    min-width:80px;flex-shrink:0;text-align:right;
  }
  .admin-table td:last-child{border-bottom:none}

  /* First cell = row title (mobile name / key label) */
  .admin-table td:first-child{
    font-weight:700;font-size:.9rem;color:var(--text,#1d1d1f);
    padding:.65rem .75rem;
    background:var(--surface-2,#f7f7f9);
  }
  .admin-table td:first-child::before{display:none}

  /* Action row: full width, centered */
  .admin-table td.admin-td-actions{
    padding:.5rem .75rem;justify-content:center;
    background:rgba(0,0,0,.015);
  }

  .admin-actions{
    width:100%;justify-content:center;gap:6px;
    padding-top:2px;
  }

  .admin-card__head{padding:.85rem 1rem}
  .admin-card__head h5{font-size:.88rem}

  .admin-pagination{padding:.75rem 1rem;gap:3px}
  .admin-pagination .page-link{min-width:32px;padding:.35rem .5rem;font-size:.78rem}

  /* Form card on mobile */
  .admin-form-card__body{padding:1rem}
  .admin-form-actions{flex-direction:column-reverse;gap:8px}
  .admin-form-actions .btn-cancel,.admin-form-actions .btn-save{width:100%;justify-content:center;padding:.7rem}

  .admin-table-note{text-align:center;font-size:.72rem;padding:.6rem .75rem}
}

@media (max-width:400px){
  .admin-stats{grid-template-columns:1fr 1fr}
  .admin-stat-card .icon-circle{width:36px;height:36px;font-size:.95rem}
  .admin-table td{font-size:.78rem;padding:.5rem .65rem}
  .admin-table td::before{min-width:70px;font-size:.68rem}
}

/* ═══════════════════════════════════════════════════════════════
   MODERN ENHANCEMENTS — avatars, filter chips, KPI strip,
   user cell, refined header band.
   ═══════════════════════════════════════════════════════════════ */

/* KPI strip (mini stat cards at top of list pages) */
.admin-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem;margin-bottom:1.4rem;
}
.admin-kpi{
  background:var(--card-surface,linear-gradient(180deg,#fff 0%,#f4f9fd 100%));
  border:1px solid var(--border,rgba(0,0,0,.07));
  border-radius:var(--radius-lg,16px);
  padding:1rem 1.1rem;
  display:flex;align-items:center;gap:.9rem;
  transition:box-shadow .2s,transform .2s;
}
.admin-kpi:hover{box-shadow:var(--shadow-sm,0 4px 14px rgba(0,0,0,.08));transform:translateY(-2px)}
.admin-kpi__icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.15rem;flex-shrink:0;
}
.admin-kpi__meta{display:flex;flex-direction:column}
.admin-kpi__value{font-size:1.35rem;font-weight:800;color:var(--text,#1d1d1f);line-height:1.1}
.admin-kpi__label{font-size:.72rem;color:var(--text-2,#6e6e73);font-weight:600}
.tint-teal{background:rgba(15,118,110,.12);color:#0f766e}
.tint-blue{background:rgba(0,113,227,.12);color:#0071e3}
.tint-purple{background:rgba(124,58,237,.12);color:#7c3aed}
.tint-pink{background:rgba(219,39,119,.12);color:#db2777}
.tint-orange{background:rgba(255,149,0,.14);color:#b45309}
.tint-gray{background:rgba(0,0,0,.06);color:var(--text-2,#6e6e73)}

/* User cell: avatar + name + sub-meta */
.admin-user{
  display:flex;align-items:center;gap:.7rem;min-width:0;
}
.admin-user__avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,#0f766e,#14b8a6);
}
.admin-user--purple .admin-user__avatar{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.admin-user--pink .admin-user__avatar{background:linear-gradient(135deg,#db2777,#f472b6)}
.admin-user--red .admin-user__avatar{background:linear-gradient(135deg,#dc2626,#f87171)}
.admin-user--gray .admin-user__avatar{background:linear-gradient(135deg,#6b7280,#9ca3af)}
.admin-user__cell{display:flex;flex-direction:column;min-width:0}
.admin-user__name{font-weight:700;font-size:.88rem;color:var(--text,#1d1d1f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user__sub{font-size:.72rem;color:var(--text-3,#a1a1a6);direction:ltr;text-align:left}

/* Filter chips */
.admin-filterbar{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  background:var(--card-surface,linear-gradient(180deg,#fff 0%,#f4f9fd 100%));
  border:1px solid var(--border,rgba(0,0,0,.07));
  border-radius:var(--radius-lg,16px);
  padding:1rem 1.25rem;margin-bottom:1.4rem;
}
.admin-filterbar .search-wrap{position:relative;flex:1 1 240px;min-width:200px}
.admin-filterbar .search-wrap i{
  position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--text-3,#a1a1a6);
}
.admin-filterbar .search-wrap input{
  width:100%;padding:.6rem 2.2rem .6rem .9rem;border-radius:10px;
  border:1.5px solid var(--border,rgba(0,0,0,.07));font-size:.85rem;
  background:var(--surface,#fff);transition:border-color .2s,box-shadow .2s;
}
.admin-filterbar .search-wrap input:focus{outline:none;border-color:var(--accent,#0071e3);box-shadow:0 0 0 3px rgba(0,113,227,.12)}
.admin-chip{
  padding:.42rem .85rem;border-radius:999px;font-size:.78rem;font-weight:600;
  background:var(--surface-2,#f7f7f9);color:var(--text-2,#6e6e73);
  border:1.5px solid transparent;cursor:pointer;transition:all .18s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
.admin-chip:hover{border-color:var(--border-strong,rgba(0,0,0,.14));color:var(--text,#1d1d1f)}
.admin-chip.active{background:var(--accent,#0071e3);color:#fff;box-shadow:0 2px 8px rgba(0,113,227,.28)}

/* Table tweaks for modern look */
.admin-table .num{font-variant-numeric:tabular-nums;direction:ltr;text-align:left}
.admin-trash{background:none;border:none;color:var(--text-3,#a1a1a6);cursor:pointer;font-size:.9rem;padding:6px;border-radius:8px;transition:all .18s}
.admin-trash:hover{color:#ff3b30;background:rgba(255,59,48,.1)}

/* Global primary button (also usable outside the header band) */
.btn--primary{
  background:var(--accent,#0071e3);color:#fff;border:none;
  border-radius:var(--radius-sm,8px);padding:.55rem 1.2rem;
  font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;
  transition:background .18s,transform .15s;
}
.btn--primary:hover{background:var(--accent-hover,#0077ed);color:#fff;transform:translateY(-1px)}

/* Base form labels in the admin panel (complementing Bootstrap) */
.admin-page .form-label{font-weight:700;font-size:.8rem;color:var(--text-2,#6e6e73);margin-bottom:.35rem}
.admin-page .form-select,.admin-page .form-control{
  border-radius:10px;border:1.5px solid var(--border,rgba(0,0,0,.07));
  font-size:.85rem;transition:border-color .2s,box-shadow .2s;
}
.admin-page .form-select:focus,.admin-page .form-control:focus{
  border-color:var(--accent,#0071e3);box-shadow:0 0 0 3px rgba(0,113,227,.12);
}

/* csrfless inline icon buttons inside table actions (reuse btn-icon) */
.admin-actions .d-inline-flex{align-items:center}

/* Empty state refinement */
.admin-empty{cursor:default}

/* Sub list cell (secondary line under a primary cell) */
.admin-cell-main{font-weight:700;font-size:.88rem;color:var(--text,#1d1d1f)}
.admin-cell-sub{font-size:.72rem;color:var(--text-3,#a1a1a6)}