/* Benutzerverwaltung – Admin Only (Basis-Stile bereits über home.css eingebunden) */

:root {
  --admin-accent: #4ea3ff;
  --admin-danger: #e53935;
  --admin-bg-glass: rgba(20,22,28,0.55);
}

.admin-page .admin-grid { display:grid; grid-template-columns: 280px 1fr; gap:1.4rem; align-items:start; }
@media (max-width: 1050px){ .admin-page .admin-grid { grid-template-columns: 1fr; } }

.admin-nav { padding:1rem; border:1px solid rgba(255,255,255,0.08); border-radius:18px; background:var(--admin-bg-glass); backdrop-filter:blur(8px) saturate(140%); display:flex; flex-direction:column; gap:.5rem; }
.admin-nav h2 { margin:0 0 .6rem; font:700 15px/1.2 Inter,system-ui,sans-serif; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }
.admin-nav button { all:unset; cursor:pointer; padding:.55rem .75rem; border-radius:10px; font:600 14px/1.2 Inter,system-ui,sans-serif; color:#e6ebf1; display:flex; gap:.55rem; align-items:center; transition:background .18s, color .18s; }
.admin-nav button:hover, .admin-nav button:focus-visible { background:rgba(255,255,255,0.08); outline:none; }
.admin-nav button.is-active { background:rgba(255,255,255,0.14); }

.admin-panel { padding:1.1rem 1.25rem 1.3rem; border:1px solid rgba(255,255,255,0.09); border-radius:20px; background:var(--admin-bg-glass); backdrop-filter:blur(9px) saturate(140%); min-height:360px; position:relative; }
.admin-panel h3 { margin:0 0 .9rem; font:600 20px/1.25 Inter,system-ui,sans-serif; }

.table-wrap { overflow:auto; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); }
.admin-table { width:100%; border-collapse:collapse; font:500 13px/1.35 Inter,system-ui,sans-serif; }
.admin-table th, .admin-table td { padding:.55rem .75rem; text-align:left; }
.admin-table thead th { position:sticky; top:0; background:rgba(30,34,40,0.9); font-weight:600; font-size:12px; letter-spacing:.5px; text-transform:uppercase; }
.admin-table tbody tr { border-top:1px solid rgba(255,255,255,0.08); }
.admin-table tbody tr:hover { background:rgba(255,255,255,0.06); }

.badge-role { display:inline-block; padding:.2rem .45rem; border-radius:8px; font:600 11px/1 Inter,system-ui; letter-spacing:.5px; background:#2b313a; color:#cfd6de; }
.badge-role.admin { background:#1d3d55; color:#8fd3ff; }
.badge-role.user { background:#3a2d2d; color:#ffb4b4; }

/* Role badges (alternative class name) */
.role-badge { display:inline-block; padding:.2rem .45rem; border-radius:8px; font:600 11px/1 Inter,system-ui; letter-spacing:.5px; background:#2b313a; color:#cfd6de; }
.role-badge.role-system_admin { background:#1d3d55; color:#8fd3ff; }
.role-badge.role-org_admin { background:#2d4a1d; color:#98ff8f; }
.role-badge.role-system_mod { background:#4a2d4a; color:#ff8fff; }
.role-badge.role-org_member { background:#2d3a4a; color:#8fb3ff; }
.role-badge.role-visitor { background:#3a2d2d; color:#ffb4b4; }

.inline-actions { display:flex; gap:.4rem; }
.inline-actions button { all:unset; cursor:pointer; font:600 11px/1 Inter; padding:.35rem .55rem; border-radius:8px; background:rgba(255,255,255,0.08); }
.inline-actions button:hover { background:rgba(255,255,255,0.14); }
.inline-actions .danger { background:rgba(229,57,53,0.22); color:#ffb8b5; }
.inline-actions .danger:hover { background:rgba(229,57,53,0.35); }

.btn { all:unset; cursor:pointer; padding:.5rem .75rem; border-radius:8px; font:600 12px/1.2 Inter; background:rgba(255,255,255,0.1); color:#e6ebf1; transition:background .15s; }
.btn:hover { background:rgba(255,255,255,0.18); }
.btn-sm { padding:.35rem .55rem; font-size:11px; }

.notice { margin:0 0 1rem; padding:.75rem 1rem; border:1px solid rgba(255,255,255,0.18); border-radius:12px; background:rgba(255,255,255,0.07); font:500 13px/1.5 Inter; }
.notice.warn { border-color:rgba(255,193,7,0.4); background:rgba(255,193,7,0.08); }

.form-grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.form-grid label { display:flex; flex-direction:column; gap:.25rem; font:600 12px/1 Inter; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }
.form-grid input, .form-grid select { padding:.55rem .65rem; border-radius:8px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); color:#e9eef4; font:500 13px/1.3 Inter; }
.form-grid input:focus, .form-grid select:focus { outline:2px solid rgba(78,163,255,0.6); }

.btn-row { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem; }
.btn-primary { background:#2567ca; color:#f2f7fc; border:none; padding:.6rem 1rem; border-radius:10px; font:600 14px/1 Inter; cursor:pointer; }
.btn-secondary { background:rgba(255,255,255,0.12); color:#f2f7fc; border:none; padding:.6rem 1rem; border-radius:10px; font:600 14px/1 Inter; cursor:pointer; }
.btn-primary:hover { background:#1d59b1; }
.btn-secondary:hover { background:rgba(255,255,255,0.18); }

/* Modal Styles */
.modal { display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); overflow-y:auto; }
.modal-content { 
    background:#1a1e24; 
    margin:2rem auto; 
    padding:1.5rem; 
    border-radius:16px; 
    width:95%; 
    max-width:700px; 
    max-height:90vh; 
    overflow-y:auto;
    border:1px solid rgba(255,255,255,0.12); 
    position:relative; 
    box-sizing:border-box;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-content {
        margin:1rem auto;
        padding:1rem;
        width:98%;
        max-height:95vh;
        border-radius:12px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        margin:0.5rem auto;
        padding:0.75rem;
        width:99%;
        max-height:98vh;
        border-radius:8px;
    }
}

.modal h2 { margin:0 0 1rem; font:600 18px/1.2 Inter; }
@media (max-width: 480px) {
    .modal h2 { font-size:16px; margin-bottom:0.75rem; }
}

.close { 
    position:absolute; 
    top:0.75rem; 
    right:1rem; 
    font-size:24px; 
    font-weight:bold; 
    color:#aaa; 
    cursor:pointer; 
    z-index:1;
    padding:0.25rem;
}
.close:hover { color:#fff; }

@media (max-width: 480px) {
    .close { 
        top:0.5rem; 
        right:0.75rem; 
        font-size:20px; 
    }
}

.form-group { margin-bottom:1rem; }
@media (max-width: 480px) {
    .form-group { margin-bottom:0.75rem; }
}

.form-group label { display:block; margin-bottom:.4rem; font:600 12px/1 Inter; letter-spacing:.5px; text-transform:uppercase; opacity:.8; }
.form-group input, .form-group select, .form-group textarea { 
    width:100%; 
    padding:.6rem; 
    border-radius:8px; 
    border:1px solid rgba(255,255,255,0.18); 
    background:rgba(255,255,255,0.06); 
    color:#e9eef4; 
    font:500 14px/1.3 Inter; 
    box-sizing:border-box;
}

@media (max-width: 480px) {
    .form-group input, .form-group select, .form-group textarea { 
        padding:.5rem; 
        font-size:16px; /* Verhindert Zoom auf iOS */
    }
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:2px solid rgba(78,163,255,0.6); }

.checkbox-group { display:grid; gap:.4rem; max-height:300px; overflow-y:auto; }
@media (max-width: 768px) {
    .checkbox-group { max-height:250px; }
}
@media (max-width: 480px) {
    .checkbox-group { max-height:200px; gap:.3rem; }
}

.permissions-grid { 
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); 
    gap:.6rem; 
}

@media (max-width: 768px) {
    .permissions-grid { 
        grid-template-columns:1fr; 
        gap:.5rem; 
    }
}

.checkbox-group label { 
    display:flex; 
    align-items:flex-start; 
    gap:.4rem; 
    padding:.4rem .5rem; 
    border-radius:6px; 
    background:rgba(255,255,255,0.04); 
    cursor:pointer; 
    text-transform:none; 
    opacity:1; 
    font:500 12px/1.3 Inter; 
}

@media (max-width: 480px) {
    .checkbox-group label { 
        padding:.35rem .4rem; 
        font-size:11px;
        gap:.3rem;
    }
}

.checkbox-group label:hover { background:rgba(255,255,255,0.08); }
.checkbox-group input[type="checkbox"] { width:auto; margin:0; flex-shrink:0; }

.permission-category h4 {
    margin: 0.75rem 0 0.4rem; 
    font-size: 12px; 
    opacity: 0.8; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    padding-left: 0.25rem;
}

@media (max-width: 480px) {
    .permission-category h4 {
        font-size: 11px;
        margin: 0.5rem 0 0.3rem;
    }
}

.form-actions { 
    display:flex; 
    gap:.75rem; 
    justify-content:flex-end; 
    margin-top:1.5rem; 
    padding-top:1rem; 
    border-top:1px solid rgba(255,255,255,0.08); 
    flex-wrap:wrap;
}

@media (max-width: 480px) {
    .form-actions { 
        flex-direction:column; 
        gap:.5rem; 
        margin-top:1rem; 
        padding-top:.75rem; 
    }
    .form-actions .btn { 
        width:100%; 
        text-align:center; 
    }
}

/* Statistik-Karten für Sessions und Logs */
.stat-card {
    padding:0.75rem;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    text-align:center;
}

.stat-value {
    font:700 20px/1 Inter;
    color:#e6ebf1;
    margin-bottom:0.25rem;
}

.stat-label {
    font:500 11px/1 Inter;
    color:#9ca3af;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

/* Session-Status */
.current-session {
    position:relative;
}

.current-session::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:#4ea3ff;
    border-radius:0 2px 2px 0;
}

.empty-state { text-align:center; padding:2.2rem 1rem; opacity:.7; font:500 14px/1.5 Inter; }
.loader { width:38px; height:38px; border:4px solid rgba(255,255,255,.18); border-top-color:#4ea3ff; border-radius:50%; animation:spin .9s linear infinite; margin:2rem auto; }
@keyframes spin { to { transform:rotate(360deg); } }

.fade-in { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

.deny-screen { text-align:center; padding:3.5rem 1.2rem; max-width:560px; margin:6rem auto 4rem; }
.deny-screen h1 { font:700 32px/1.15 Inter; margin:0 0 1rem; }
.deny-screen p { font:500 15px/1.6 Inter; opacity:.82; margin:.5rem 0 1.25rem; }
.deny-screen a { color:#4ea3ff; }