/* Admin/Feedback page styles; fully scoped to .admin-shell */
.admin-shell{ padding:18px; max-width:1200px; margin:0 auto; }

/* Centered login layout */
.admin-login .admin-shell{ min-height:100vh; display:grid; place-items:center; padding:24px; }

/* Top header inside pages */
.admin-shell header.top{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--ring, #e5e7eb); background:var(--surface, #fff);
  position:sticky; top:0; z-index:10; border-radius:12px;
}
[data-theme="dark"] .admin-shell header.top{
  background: var(--surface-dark, #0f172a);
  border-color: var(--ring-dark, #1f2a44);
}
.admin-shell header.top img{ height:34px }
.admin-shell header.top h1{ font-size:18px; margin:0; opacity:.85 }

/* Cards */
.admin-shell .card{
  background: var(--surface, #ffffff);
  color: var(--ink, #0f172a);
  border: 1px solid var(--ring, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  overflow:hidden;
}
[data-theme="dark"] .admin-shell .card{
  background: var(--surface-dark, #0f172a);
  color: var(--ink-dark, #e6edf7);
  border-color: var(--ring-dark, #1f2a44);
}

/* Login card specifics */
.admin-login .card{ width:min(560px, 95vw) }
.admin-login .card header{ display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--ring, #e5e7eb); padding:18px 22px }
[data-theme="dark"] .admin-login .card header{ border-color: var(--ring-dark, #1f2a44) }
.admin-login .card header img{ height:40px }
.admin-login .card header h1{ font-size:18px; margin:0 }
.admin-login form{ padding:22px }
.admin-login form label{ display:block; margin:10px 0 6px; font-weight:600; opacity:.8 }
.admin-login form input{ width:100%; padding:12px 14px; border:1px solid var(--ring, #e5e7eb); border-radius:12px; font-size:14px; background:var(--surface, #fff); color:var(--ink, #0f172a) }
[data-theme="dark"] .admin-login form input{ border-color: var(--ring-dark, #1f2a44); background: var(--surface-2, #0b1220); color: var(--ink-dark, #e6edf7) }
.admin-login form button{ margin-top:12px; background:var(--blue, #0b7dda); color:#fff; border:none; padding:12px 16px; border-radius:12px; font-weight:700; width:100%; cursor:pointer }

/* Tabs (admin.html) */
.admin-shell .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 }
.admin-shell .tab{ padding:10px 12px; border:1px solid var(--ring, #e5e7eb); border-radius:999px; background:var(--surface, #fff); cursor:pointer; font-weight:600 }
.admin-shell .tab.active{ background:var(--blue, #0b7dda); color:#fff; border-color:var(--blue, #0b7dda) }
[data-theme="dark"] .admin-shell .tab{ background: var(--surface-2, #0b1220); border-color: var(--ring-dark, #1f2a44); color: var(--ink-dark, #e6edf7) }

.admin-shell .panel{ display:none }
.admin-shell .panel.active{ display:block }

/* Section cards */
.admin-shell .actions{
  display:flex; gap:8px; align-items:center; padding:12px 14px;
  border-bottom:1px solid var(--ring, #e5e7eb);
}
[data-theme="dark"] .admin-shell .actions{ border-bottom-color: var(--ring-dark, #1f2a44) }
.admin-shell .muted{ color: var(--muted, #6b7280); font-size:13px }
.admin-shell .content{ padding:12px 14px }
.admin-shell .toast{ margin-top:8px } .admin-shell .ok{ color:#16a34a } .admin-shell .err{ color:#dc2626 }

/* Horizontal scroll tables */
.admin-shell .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
.admin-shell .table-scroll table{ width:max-content; min-width:100%; border-collapse:collapse; margin-top:8px }
.admin-shell .table-scroll th, .admin-shell .table-scroll td{ white-space:nowrap; padding:8px 10px; border-bottom:1px solid var(--ring, #e5e7eb) }
[data-theme="dark"] .admin-shell .table-scroll th, 
[data-theme="dark"] .admin-shell .table-scroll td{ border-bottom-color: var(--ring-dark, #1f2a44) }

/* Inputs inside tables and forms */
.admin-shell input.inline,
.admin-shell select.inline,
.admin-shell textarea.inline,
.admin-shell input,
.admin-shell select,
.admin-shell textarea{
  background: var(--surface, #ffffff);
  color: var(--ink, #0f172a);
  border: 1px solid var(--ring, #e5e7eb);
  border-radius: 12px;
}
[data-theme="dark"] .admin-shell input.inline,
[data-theme="dark"] .admin-shell select.inline,
[data-theme="dark"] .admin-shell textarea.inline,
[data-theme="dark"] .admin-shell input,
[data-theme="dark"] .admin-shell select,
[data-theme="dark"] .admin-shell textarea{
  background: var(--surface-2, #21252b);
  color: var(--ink-dark, #e6edf7);
  border-color: var(--ring-dark, #1f2a44);
}

/* Buttons */
.admin-shell button{
  background: var(--blue, #0b7dda);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}