/* admin.css — Admin Panel styles for Albayyan (v0.0.9) */
/* ── Admin Panel ────────────────────────────────────── */
.admin-screen{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;height:100dvh;max-height:100dvh}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;min-height:calc(var(--topbar-height) + env(safe-area-inset-top, 0px));padding:env(safe-area-inset-top, 0px) clamp(var(--space-4),4vw,var(--space-8)) 0;border-bottom:1px solid var(--border);background:rgba(33,33,33,.82);backdrop-filter:blur(18px);flex-shrink:0}
.admin-topbar h1{font-size:var(--text-lg);font-weight:800}
.admin-body{flex:1 1 auto;min-height:0;height:100%;overflow-y:auto!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--space-6) clamp(var(--space-4),4vw,var(--space-8));display:grid;gap:var(--space-6);align-content:start}
.admin-section{border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden;align-self:start}
#adminUsersList,#adminStatsList,#messageLogsList{max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#generalStatsSection{overflow-x:auto}
#createUserSection .create-form{max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.admin-section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}
.admin-section-header h2{font-size:var(--text-xs);font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.admin-user-filters{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);background:var(--surface-alt,var(--surface))}
.user-item{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:start;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}
.user-item:last-child{border-bottom:0}
.user-item-info{display:grid;gap:var(--space-2)}
.user-item-name{font-size:var(--text-sm);font-weight:800}
.user-item-meta{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.user-item-actions{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-end}
.badge-admin{border:1px solid rgba(214,177,93,.28);background:rgba(214,177,93,.12);color:#f1d693;padding:0 var(--space-2);min-height:24px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800}
.badge-researcher{border:1px solid rgba(46,139,123,.36);background:rgba(46,139,123,.15);color:#9ee3d8;padding:0 var(--space-2);min-height:24px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800}
.badge-user{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);padding:0 var(--space-2);min-height:24px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800}
html[data-theme="light"] .badge-user{background:rgba(0,0,0,.05)}
.badge-inactive{border:1px solid rgba(224,122,122,.28);background:rgba(224,122,122,.1);color:#e07a7a;padding:0 var(--space-2);min-height:24px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800}
.danger-button{border-radius:var(--radius-pill);background:rgba(224,122,122,.12);color:#e07a7a;border:1px solid rgba(224,122,122,.25);font-weight:800;padding:0 var(--space-3);min-height:32px;font-size:var(--text-xs)}
.danger-button:hover:not(:disabled){background:rgba(224,122,122,.22)}
.admin-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap}
.admin-tab{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--muted);font-weight:800;min-height:36px;padding:0 var(--space-4)}
.admin-tab.active{background:var(--surface-raised);color:var(--text);border-color:var(--border-strong)}
.admin-burger{display:none;font-size:1.2rem;min-width:36px;min-height:36px;align-items:center;justify-content:center}
.admin-tab-menu{display:none;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--border);z-index:2;flex-shrink:0}
.admin-tab-menu-item{text-align:start;padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:800;color:var(--muted);background:none;border:none;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--transition),color var(--transition)}
.admin-tab-menu-item:last-child{border-bottom:0}
.admin-tab-menu-item:hover{background:var(--surface-soft);color:var(--text)}
.admin-tab-menu-item.active{color:var(--text);background:var(--surface-soft)}
.create-form{display:grid;gap:var(--space-4);padding:var(--space-5)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.subjects-input{min-height:36px;font-size:var(--text-xs);padding:0 var(--space-3)}
.checkbox-row{display:flex;align-items:center;gap:var(--space-2);color:var(--text);font-size:var(--text-sm);font-weight:700}
.checkbox-row input{width:18px;height:18px;accent-color:var(--teal)}
.user-item-save-row{display:flex;gap:var(--space-2);margin-top:var(--space-1)}
.user-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.user-edit-section{overflow:hidden;transition:opacity .15s}
.user-edit-toggle{background:none;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--muted);font-size:var(--text-xs);font-weight:700;padding:2px var(--space-3);cursor:pointer;margin-top:var(--space-1);transition:border-color .15s,color .15s}
.user-edit-toggle:hover{border-color:var(--border-strong);color:var(--text)}
.profile-screen{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.profile-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border);gap:var(--space-4);min-height:64px}
.profile-body{flex:1;overflow-y:auto;padding:var(--space-6);max-width:520px;width:100%;margin:0 auto}
.profile-field-group{display:grid;gap:var(--space-4)}
.profile-section-title{font-weight:800;font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--space-2)}
.amoled-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);cursor:pointer;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4)}
.amoled-toggle-row>span:first-child{display:grid;gap:2px;font-weight:700}
.amoled-toggle-hint{font-weight:500;font-size:var(--text-xs);color:var(--faint)}
.amoled-toggle-row input[type=checkbox]{flex:none;width:20px;height:20px;min-height:0;accent-color:var(--teal);cursor:pointer}
.admin-log-item{border-bottom:1px solid var(--border);padding:var(--space-4);display:grid;gap:var(--space-2)}
.admin-log-item:last-child{border-bottom:0}
.admin-log-meta{display:flex;gap:var(--space-2);flex-wrap:wrap;color:var(--faint);font-size:var(--text-xs);font-weight:800}
.subjects-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-2)}
.subjects-column{display:grid;gap:var(--space-3)}
.subject-checkbox{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:8px;background:rgba(255,255,255,.035);color:var(--text);font-size:var(--text-sm);cursor:pointer;transition:background var(--transition);border:1px solid rgba(255,255,255,.05)}
.subject-checkbox:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
.subject-checkbox input{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
.subject-checkbox label{cursor:pointer;flex:1;margin:0}
html[data-theme="light"] .subject-checkbox{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.05)}
html[data-theme="light"] .subject-checkbox:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
.phone-input{min-height:52px;border-radius:16px;padding:0 var(--space-4);width:100%;border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--text)}
.phone-input::placeholder{color:var(--faint)}
.phone-input:hover{border-color:var(--border-strong)}
.phone-input:focus{border-color:rgba(214,177,93,.58);box-shadow:0 0 0 4px rgba(214,177,93,.1);outline:0}
html[data-theme="light"] .phone-input{background:rgba(0,0,0,.025)}
.phone-wrap{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.035);direction:ltr}
.phone-wrap:hover{border-color:var(--border-strong)}
.phone-wrap:focus-within{border-color:rgba(214,177,93,.58);box-shadow:0 0 0 4px rgba(214,177,93,.1)}
.phone-cc{min-height:52px;border:none;border-right:1px solid var(--border);background:transparent;color:var(--text);padding:0 var(--space-3);font:inherit;font-size:var(--text-sm);font-weight:700;cursor:pointer;flex-shrink:0;outline:none}
.phone-wrap .phone-input{border:none;border-radius:0;background:transparent;box-shadow:none!important;outline:none;flex:1;min-width:0;width:auto}
.phone-wrap .phone-input:hover,.phone-wrap .phone-input:focus{border:none;box-shadow:none!important}
html[data-theme="light"] .phone-wrap{background:rgba(0,0,0,.025)}
.stat-card{background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.stat-card-label{font-size:var(--text-xs);color:var(--faint);font-weight:700}
.stat-card-value{font-size:var(--text-lg);font-weight:800;color:var(--text)}
.upgrade-dropdown{margin-top:var(--space-3);background:var(--surface-soft);border:1px solid var(--border);border-radius:16px;padding:var(--space-4);display:grid;gap:var(--space-3)}
.upgrade-type-btns{display:flex;gap:var(--space-2);flex-wrap:wrap}
.upgrade-type-btn{flex:1;min-width:80px;padding:var(--space-2) var(--space-3);border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:background var(--transition),border-color var(--transition)}
.upgrade-type-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.upgrade-type-btn.selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.upgrade-req-subsection{border-bottom:1px solid var(--border);padding-bottom:var(--space-4);margin-bottom:var(--space-4)}
.upgrade-req-subsection:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.upgrade-req-subsection-title{font-weight:800;font-size:var(--text-sm);color:var(--muted);padding:var(--space-4) var(--space-4) var(--space-2);border-top:1px solid var(--border)}
.upgrade-req-subsection-title:first-child{border-top:0}
.registrations-scroll{max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#gsErrorTable th,#gsErrorTable td{border-bottom:1px solid var(--border);padding:var(--space-2) var(--space-3);vertical-align:top}
#gsErrorTable tr:last-child td{border-bottom:0}
#gsErrorTable tbody tr:hover{background:var(--surface-soft)}
.admin-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);gap:var(--space-3);color:var(--faint);font-size:var(--text-sm)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton-item{padding:var(--space-4);margin-bottom:var(--space-2);border-radius:8px;background:var(--surface-soft);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@media(max-width:767px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .screen,.main-screen,.admin-screen,.login-screen{width:100vw;max-width:100vw;overflow-x:hidden}
  .admin-topbar{position:sticky;top:0;z-index:3;min-width:0;padding-inline:var(--space-4)}
  .admin-body{padding:var(--space-4);padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom))}
  .admin-tabs{display:none!important}
  .admin-burger{display:flex}
  .admin-tab-menu{display:none;position:sticky;top:calc(var(--topbar-height) + env(safe-area-inset-top,0px));z-index:2;backdrop-filter:blur(18px);background:rgba(33,33,33,.92)}
  .admin-tab-menu.open{display:flex}
  html[data-theme="light"] .admin-tab-menu{background:rgba(255,255,255,.92)}
  .admin-section{margin-bottom:var(--space-4);max-width:100%;overflow:visible}
  .admin-section-header{padding:var(--space-3) var(--space-4)}
  .form-row{grid-template-columns:1fr}
  .user-item{grid-template-columns:minmax(0,1fr);padding:var(--space-4);max-width:100%;overflow:visible;word-break:break-word}
  .user-item-info,.user-item-meta{min-width:0;max-width:100%;word-break:break-word}
  .user-edit-grid{grid-template-columns:minmax(0,1fr)}
  .user-item-save-row{flex-wrap:wrap}
  .user-item-save-row .subjects-input{flex:1 1 100%;width:100%}
  .profile-body{padding:var(--space-4)}
  .user-item-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  #feedbackList{max-height:calc(100dvh - var(--topbar-height) - 160px)!important;overflow-y:auto!important}
  #adminStatsList{max-width:100%;overflow-x:auto}
  .stat-card{min-width:160px;flex-shrink:0}
  table{font-size:var(--text-xs)}
  [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;scrollbar-width:thin}
}