/* =========================================================
   ROA DENTAL – Admin Panel Styles
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #DBB16E; --primary-light: #e8c88a; --primary-dark: #b8924e;
  --accent: #DBB16E; --gold: #DBB16E;
  --bg: #f5f3f0; --bg-card: #ffffff;
  --sidebar-bg: #222222; --sidebar-w: 260px;
  --topbar-h: 64px;
  --text: #222222; --text-secondary: #555555; --text-light: #888888;
  --border: #d8d8d8; --danger: #c0392b; --success: #27ae60;
  --gradient: linear-gradient(135deg, #DBB16E 0%, #b8924e 100%);
  --shadow: 0 4px 20px rgba(34,34,34,0.10);
  --shadow-lg: 0 12px 40px rgba(34,34,34,0.16);
  --radius: 12px;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
}
body.admin-body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
code { background:#e8ecf2; padding:2px 8px; border-radius:4px; font-size:0.85rem; }

/* ── LOGIN ────────────────────────────────── */
.login-screen {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#0a1628; z-index:9999; overflow:hidden;
}
.login-bg { position:absolute; inset:0; }
.login-blob {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15;
}
.blob-1 { width:500px;height:500px;background:#0057d9;top:-100px;left:-100px; animation:blob-move 10s ease-in-out infinite alternate; }
.blob-2 { width:400px;height:400px;background:#00c2b3;bottom:-100px;right:-80px; animation:blob-move 14s ease-in-out infinite alternate-reverse; }
.blob-3 { width:300px;height:300px;background:#f5a623;top:50%;right:20%; animation:blob-move 8s ease-in-out infinite alternate; }
@keyframes blob-move { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,20px) scale(1.1)} }

.login-card {
  position:relative;z-index:1;
  background:rgba(255,255,255,0.06); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.12); border-radius:24px;
  padding:48px 40px; width:100%; max-width:420px;
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
  animation:login-in 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes login-in { from{opacity:0;transform:translateY(40px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.login-logo { text-align:center; margin-bottom:36px; }
.login-logo-icon {
  width:72px;height:72px;margin:0 auto 16px;
  background:var(--gradient); border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:#fff; box-shadow:0 8px 32px rgba(0,87,217,0.4);
}
.login-logo h1 { font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:4px; }
.login-logo p { font-size:0.85rem;color:rgba(255,255,255,0.55); }

.login-field { margin-bottom:20px; }
.login-field label { display:block;color:rgba(255,255,255,0.7);font-size:0.85rem;font-weight:600;margin-bottom:8px; }
.login-field label i { margin-right:6px; }
.login-field input {
  width:100%;padding:14px 16px;background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.12);border-radius:10px;
  color:#fff;font-family:'Outfit',sans-serif;font-size:0.95rem;outline:none;
  transition:border-color var(--transition);
}
.login-field input:focus { border-color:rgba(0,194,179,0.6); background:rgba(255,255,255,0.12); }
.login-field input::placeholder { color:rgba(255,255,255,0.3); }
.pass-wrapper { position:relative; }
.pass-toggle {
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;
  font-size:0.9rem; transition:color var(--transition);
}
.pass-toggle:hover { color:rgba(255,255,255,0.8); }
.login-error {
  background:rgba(231,76,60,0.15);border:1px solid rgba(231,76,60,0.3);
  color:#ff7675;border-radius:8px;padding:12px 14px;font-size:0.85rem;
  margin-bottom:16px; display:flex;align-items:center;gap:8px;
}
.login-btn {
  width:100%;padding:16px;background:var(--gradient);border:none;border-radius:10px;
  color:#fff;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all var(--transition); box-shadow:0 4px 20px rgba(0,87,217,0.4);
}
.login-btn:hover { transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,87,217,0.5); }
.back-link {
  display:block;text-align:center;margin-top:20px;color:rgba(255,255,255,0.45);
  text-decoration:none;font-size:0.85rem;transition:color var(--transition);
}
.back-link:hover { color:rgba(255,255,255,0.8); }
.back-link-inline {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.back-link-inline:hover {
  color: rgba(255,255,255,0.8);
}
#btn-show-recovery:hover {
  color: var(--primary-light) !important;
}

/* ── DASHBOARD LAYOUT ─────────────────────── */
.admin-dashboard { display:flex;min-height:100vh; }

/* Sidebar */
.admin-sidebar {
  width:var(--sidebar-w);min-height:100vh;background:var(--sidebar-bg);
  position:fixed;left:0;top:0;z-index:100;display:flex;flex-direction:column;
  transition:width var(--transition);overflow:hidden;
}
.admin-sidebar.collapsed { width:72px; }
.admin-sidebar.collapsed .sidebar-title,
.admin-sidebar.collapsed .sidebar-sub,
.admin-sidebar.collapsed .nav-section-label,
.admin-sidebar.collapsed .sidebar-link span { display:none; }
.admin-sidebar.collapsed .sidebar-link { justify-content:center;padding:14px 0; }
.admin-sidebar.collapsed .sidebar-header { padding:18px 0;justify-content:center; }

.sidebar-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-logo { display:flex;align-items:center;gap:12px; }
.sidebar-logo i { font-size:1.4rem;color:var(--accent); }
.sidebar-title { display:block;color:#fff;font-weight:800;font-size:1rem; }
.sidebar-sub { display:block;color:rgba(255,255,255,0.4);font-size:0.7rem; }
.sidebar-toggle {
  background:rgba(255,255,255,0.08);border:none;color:rgba(255,255,255,0.6);
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.sidebar-toggle:hover { background:rgba(255,255,255,0.15);color:#fff; }

.sidebar-nav { padding:16px 12px;flex:1;overflow-y:auto; }
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1);border-radius:2px; }
.nav-section-label { font-size:0.68rem;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,0.25);text-transform:uppercase;padding:16px 10px 8px; }
.sidebar-link {
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:10px;text-decoration:none;color:rgba(255,255,255,0.55);
  font-size:0.9rem;font-weight:500;transition:all var(--transition);
  margin-bottom:2px;
}
.sidebar-link:hover { background:rgba(255,255,255,0.08);color:#fff; }
.sidebar-link.active { background:linear-gradient(135deg,rgba(0,87,217,0.5),rgba(0,194,179,0.3));color:#fff;box-shadow:0 4px 16px rgba(0,87,217,0.2); }
.sidebar-link i { font-size:1.05rem;width:20px;text-align:center; }
.sidebar-divider { border-top:1px solid rgba(255,255,255,0.06);margin:12px 0; }
.sidebar-link-view { color:rgba(0,194,179,0.7); }
.sidebar-link-view:hover { color:var(--accent); }
.sidebar-link-logout { color:rgba(231,76,60,0.7); }
.sidebar-link-logout:hover { color:#e74c3c; }

/* Admin Main */
.admin-main {
  flex:1;margin-left:var(--sidebar-w);min-height:100vh;
  display:flex;flex-direction:column;transition:margin-left var(--transition);
}
.admin-sidebar.collapsed ~ .admin-main { margin-left:72px; }

/* Topbar */
.admin-topbar {
  height:var(--topbar-h);background:var(--bg-card);
  border-bottom:1px solid var(--border);display:flex;
  align-items:center;justify-content:space-between;padding:0 28px;
  position:sticky;top:0;z-index:50;box-shadow:var(--shadow);
}
.topbar-left,.topbar-right { display:flex;align-items:center;gap:16px; }
.topbar-menu-btn {
  background:none;border:none;font-size:1.1rem;color:var(--text-secondary);
  cursor:pointer;padding:6px;border-radius:8px;transition:all var(--transition);
  display:none;
}
.topbar-menu-btn:hover { background:var(--bg);color:var(--primary); }
.breadcrumb { display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:0.9rem; }
.breadcrumb i { color:var(--primary); }
.save-indicator {
  display:flex;align-items:center;gap:6px;color:var(--success);
  font-size:0.82rem;font-weight:600;opacity:0;
  transition:opacity var(--transition);
}
.save-indicator.visible { opacity:1; }
.btn-save-all {
  display:flex;align-items:center;gap:8px;padding:10px 20px;
  background:var(--gradient);color:#fff;border:none;border-radius:10px;
  font-family:'Outfit',sans-serif;font-size:0.88rem;font-weight:700;
  cursor:pointer;transition:all var(--transition);
  box-shadow:0 4px 16px rgba(0,87,217,0.3);
}
.btn-save-all:hover { transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,87,217,0.4); }
.admin-user-badge {
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:100px;padding:6px 14px;font-size:0.85rem;font-weight:600;
}
.user-avatar {
  width:28px;height:28px;border-radius:50%;background:var(--gradient);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;
}

/* Admin Content */
.admin-content { flex:1;padding:32px 28px; }
.admin-section { display:none; }
.admin-section.active { display:block; animation:fade-in 0.3s ease; }
@keyframes fade-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.section-title-bar { margin-bottom:28px; }
.section-title-bar h2 { font-size:1.4rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:12px; }
.section-title-bar h2 i { color:var(--primary); }
.section-desc { color:var(--text-light);font-size:0.88rem;margin-top:6px; }

/* Cards Grid */
.admin-cards-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px; }
.admin-card {
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);transition:box-shadow var(--transition);
}
.admin-card:hover { box-shadow:var(--shadow-lg); }
.admin-card.card-full { grid-column:1/-1; }
.card-header {
  display:flex;align-items:center;gap:8px;font-size:0.88rem;font-weight:700;
  color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;
  margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);
}
.form-group { margin-bottom:16px; }
.form-group:last-child { margin-bottom:0; }
.form-group label { display:block;font-size:0.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px; }
.admin-input, .admin-textarea {
  width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;
  font-family:'Outfit',sans-serif;font-size:0.9rem;color:var(--text);
  background:var(--bg);outline:none;transition:all var(--transition);
}
.admin-input:focus,.admin-textarea:focus { border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(0,87,217,0.08); }
.admin-textarea { resize:vertical;min-height:90px;line-height:1.6; }

/* Color Picker */
.color-input-wrapper { display:flex;gap:10px;align-items:center; }
.color-picker { width:44px;height:40px;border:2px solid var(--border);border-radius:8px;padding:2px;cursor:pointer;background:none; }
.color-text { flex:1; }

/* Image Preview */
.img-preview {
  border-radius:10px;overflow:hidden;border:2px solid var(--border);
  margin-top:12px;
}
.img-preview img { width:100%;height:140px;object-fit:cover;display:block; }

/* Gallery Editor */
.gallery-editor-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.gallery-thumb-preview {
  border-radius:8px;overflow:hidden;border:1.5px solid var(--border);margin-top:12px;
}
.gallery-thumb-preview img { width:100%;height:110px;object-fit:cover;display:block; }

/* Video YT Preview */
.video-yt-preview { margin-top:12px; }
.video-yt-preview img { width:100%;border-radius:8px;border:1.5px solid var(--border); }

/* Treatment Editor */
.treatment-cards-editor {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:20px;
}
.treatment-editor-card {
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;
}
.treatment-editor-card .card-header { color:var(--primary); }

/* Stats */
.stats-display-card { display:flex;align-items:center;gap:20px; }
.stat-display-icon {
  width:56px;height:56px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.4rem;flex-shrink:0;
}
.stat-display-info span { font-size:2rem;font-weight:800;color:var(--text); }
.stat-display-info p { font-size:0.8rem;color:var(--text-light);margin-top:2px; }

/* Danger button */
.btn-danger {
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  background:#fff;color:var(--danger);border:2px solid var(--danger);
  border-radius:10px;font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:700;
  cursor:pointer;transition:all var(--transition);
}
.btn-danger:hover { background:var(--danger);color:#fff; }

/* Toast */
.admin-toast {
  position:fixed;bottom:32px;right:32px;z-index:9999;
  background:var(--text);color:#fff;border-radius:12px;
  padding:14px 24px;font-size:0.9rem;font-weight:600;
  box-shadow:0 8px 32px rgba(0,0,0,0.2);
  transform:translateY(20px);opacity:0;
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.admin-toast.show { transform:translateY(0);opacity:1; }
.admin-toast.success { background:var(--success); }
.admin-toast.error { background:var(--danger); }

/* Responsive */
@media(max-width:900px){
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.mobile-open { transform:translateX(0); }
  .admin-main { margin-left:0 !important; }
  .topbar-menu-btn { display:flex; }
  .admin-topbar { padding:0 16px; }
  .admin-content { padding:20px 16px; }
}

/* ── Admin logo images ── */
.login-logo-img { height:90px; width:auto; object-fit:contain; margin:0 auto 12px; display:block; }
.sidebar-logo-img { height:36px; width:auto; object-fit:contain; }

/* ── Media Manager ── */
.media-add-bar {
  margin-bottom:20px; display:flex; align-items:center; gap:12px;
}
.btn-add-media {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; background:var(--gradient);
  color:#fff; border:none; border-radius:10px;
  font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:700;
  cursor:pointer; transition:all var(--transition);
  box-shadow:0 4px 16px rgba(219,177,110,0.35);
}
.btn-add-media:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(219,177,110,0.45); }

.media-manager-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;
}
.media-item-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); position:relative;
  animation:fade-in 0.3s ease;
}
.media-item-card .card-header {
  display:flex; justify-content:space-between; align-items:center;
}
.btn-remove-media {
  background:rgba(192,57,43,0.1); border:1px solid rgba(192,57,43,0.2);
  color:var(--danger); width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:0.75rem; transition:all var(--transition);
  flex-shrink:0;
}
.btn-remove-media:hover { background:var(--danger); color:#fff; }
.media-yt-preview, .media-img-preview {
  margin-top:12px; border-radius:8px; overflow:hidden;
  border:1.5px solid var(--border);
}
.media-yt-preview img, .media-img-preview img {
  width:100%; display:block; object-fit:cover; max-height:150px;
}
.media-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#DBB16E,#b8924e);
  color:#fff; font-size:0.7rem; font-weight:700;
  padding:3px 10px; border-radius:100px; margin-bottom:8px;
}

/* ── Upload Controls ── */
.input-upload-group {
  display: flex;
  gap: 8px;
  width: 100%;
}
.input-upload-group .admin-input {
  flex: 1;
}
.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-upload:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(219,177,110,0.2);
}
.btn-upload i {
  font-size: 0.85rem;
}

/* ── Subscribers Table Styles ── */
.subscribers-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.9rem;
  text-align: left;
}
.subscribers-table th {
  background: var(--bg);
  color: var(--text-secondary);
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 2px solid var(--border);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.subscribers-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.subscribers-table tbody tr:hover {
  background: rgba(219,177,110,0.04);
}
.subscribers-table tbody tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   USERS MANAGER
   ========================================================= */

/* Sidebar link color for users */
.sidebar-link-users { color: rgba(219,177,110,0.75); }
.sidebar-link-users:hover { color: var(--primary); }
.sidebar-link-users.active { background: linear-gradient(135deg,rgba(219,177,110,0.3),rgba(184,146,78,0.2)) !important; color: var(--primary) !important; }

/* Account Badge */
.users-account-badge {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.uab-avatar {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--gradient); display: flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem; flex-shrink: 0;
}
.uab-info { display: flex; flex-direction: column; gap: 4px; }
.uab-info strong { font-size: 1rem; font-weight: 700; color: var(--text); }
.uab-role {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600; padding: 3px 10px;
  border-radius: 100px;
}
.role-admin {
  background: linear-gradient(135deg,rgba(219,177,110,0.2),rgba(184,146,78,0.15));
  color: var(--primary-dark); border: 1px solid rgba(219,177,110,0.4);
}
.role-moderator {
  background: linear-gradient(135deg,rgba(155,89,182,0.12),rgba(108,52,131,0.1));
  color: #7d3c98; border: 1px solid rgba(155,89,182,0.3);
}

/* Password change wrapper */
.pass-change-wrapper {
  position: relative; display: flex; align-items: center;
}
.pass-change-wrapper .admin-input {
  padding-right: 44px;
}
.btn-eye-toggle {
  position: absolute; right: 10px;
  background: none; border: none; color: var(--text-light);
  cursor: pointer; font-size: 0.9rem;
  transition: color var(--transition); padding: 4px;
}
.btn-eye-toggle:hover { color: var(--primary); }

/* Save user button */
.btn-save-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; background: var(--gradient);
  color: #fff; border: none; border-radius: 10px;
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all var(--transition); margin-top: 8px;
  box-shadow: 0 4px 16px rgba(219,177,110,0.35);
  width: 100%; justify-content: center;
}
.btn-save-user:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(219,177,110,0.45); }

/* Inline user feedback */
.user-feedback {
  padding: 10px 14px; border-radius: 8px; font-size: 0.85rem;
  font-weight: 600; margin-top: 10px;
}
.uf-success {
  background: rgba(39,174,96,0.1); color: #1e8449;
  border: 1px solid rgba(39,174,96,0.25);
}
.uf-error {
  background: rgba(192,57,43,0.1); color: var(--danger);
  border: 1px solid rgba(192,57,43,0.25);
}

/* Extra users grid */
.extra-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

/* Extra user card */
.extra-user-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: box-shadow var(--transition), border-color var(--transition);
  animation: fade-in 0.3s ease;
}
.extra-user-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(219,177,110,0.35); }

.extra-user-header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.euh-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #9b59b6, #6c3483);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; flex-shrink: 0;
}
.euh-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.euh-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }