/* Admin dashboard styles extracted from application.css */

/* Admin dashboard styles */
.admin-page {
  --bg-1:#0B1220;
  --bg-2:#0F172A;
  --text:#E6EAF5;
  --muted:#9AA4BF;
  --card:#0F1A2E;
  --border: rgba(148,163,184,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --glow: 0 0 24px rgba(99,102,241,0.45), 0 0 48px rgba(168,85,247,0.25);
  color: var(--text);
}

/* Layout helpers */
.admin-page .page-head {
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  margin: 8px 0 14px;
}
.admin-page .page-title { margin:0; font-size: 22px; letter-spacing:.2px; }

/* Card */
.admin-page .card{
  padding:18px; border-radius:16px;
  background: linear-gradient(180deg, rgba(16,23,44,0.7), rgba(13,20,40,0.55));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

/* In admin, keep cards steady on hover */
.admin-page .card:hover{ transform:none; box-shadow: var(--shadow); }

/* Table */
.admin-page .table{ width:100%; border-collapse: separate; border-spacing:0; }
.admin-page .table-responsive{ overflow:auto; }
.admin-page .table thead th{
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,25,46,0.8), rgba(13,20,40,0.75));
  text-align:left; font-size:12px; font-weight:600; color:var(--muted);
  padding:10px 12px; border-bottom:1px solid var(--border);
  backdrop-filter: blur(4px) saturate(120%);
}
.admin-page .table tbody td{
  padding:12px 12px; border-bottom:1px solid var(--border); vertical-align: middle;
}
.admin-page .table tbody tr:hover{ background: rgba(99,102,241,0.07); }

/* Cells */
.admin-page .cell-primary .title{ font-weight:600; }
.admin-page .sub{ margin-top:4px; font-size:12px; }

/* Utilities */
.admin-page .muted{ color: var(--muted); }
.admin-page .nowrap{ white-space: nowrap; }
.admin-page .t-right{ text-align:right; }
.admin-page .truncate{ display:inline-flex; max-width: 320px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; gap:8px; align-items:center; }
@media (max-width: 720px){
  .admin-page .hide-sm{ display:none; }
  .admin-page .show-sm{ display:block; }
  .admin-page .truncate{ max-width: 160px; }
}
@media (min-width: 721px){
  .admin-page .show-sm{ display:none; }
}
.admin-page .badge{
  display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(13,20,40,0.65), rgba(10,15,30,0.35)); font-size:12px;
}
.admin-page .badge.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-page .repo-link{ color: var(--text); text-decoration:none; }
.admin-page .repo-link:hover{ text-decoration: underline; }

/* Buttons */
.admin-page .btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:600; text-decoration:none; color:var(--text);
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,25,46,0.7), rgba(13,20,40,0.5));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.admin-page .btn:hover{ transform: translateY(-1px); box-shadow: var(--glow); border-color: rgba(99,102,241,0.5); }
.admin-page .btn-secondary{ background: linear-gradient(180deg, rgba(16,23,44,0.6), rgba(13,20,40,0.45)); }
.admin-page .btn-danger{ border-color: rgba(244,63,94,0.45); color: var(--text) !important; }
.admin-page .btn-danger svg{ stroke: currentColor; }
.admin-page .btn-sm{ padding:8px 10px; border-radius:10px; font-size: 13px; }
.admin-page .btn-icon{ width:34px; height:34px; padding:8px; }
.admin-page .btn-icon svg{ width:18px; height:18px; }
.admin-page .btn-group{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.admin-page .btn-group form{ margin:0; }

/* Ensure forms rendered by button_to are styled the same when classes end up on the <form> */
.admin-page .btn-group form.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:600; text-decoration:none; color:var(--text);
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,25,46,0.7), rgba(13,20,40,0.5));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.admin-page .btn-group form.btn:hover{ transform: translateY(-1px); box-shadow: var(--glow); border-color: rgba(99,102,241,0.5); }
.admin-page .btn-group form.btn-secondary{ background: linear-gradient(180deg, rgba(16,23,44,0.6), rgba(13,20,40,0.45)); }
.admin-page .btn-group form.btn-danger{ border-color: rgba(244,63,94,0.45); color: var(--text) !important; }
.admin-page .btn-group form.btn-danger svg{ stroke: currentColor; }
.admin-page .btn-group form.btn-icon{ width:34px; height:34px; padding:8px; }
.admin-page .btn-group form.btn-icon svg{ width:18px; height:18px; }

/* If classes are on the form (button_to), make the inner button inherit styling */
.admin-page .btn-group form.btn > button{
  all: unset;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:100%;
  color:inherit; cursor:pointer;
}
.admin-page .btn-group form.btn-danger > button svg{ stroke: currentColor; }
.admin-page .btn-group form.btn-icon > button svg{ width:18px; height:18px; }

/* A11y */
.admin-page .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Column widths */
.admin-page .col-actions{ min-width: 180px; }