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

:root {
  --admin-accent: #4ea3ff;
  --admin-success: #10b981;
  --admin-warning: #f59e0b;
  --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-status { display:inline-block; padding:.2rem .45rem; border-radius:8px; font:600 11px/1 Inter,system-ui; letter-spacing:.5px; }
.badge-status.development { background:#7c2d12; color:#fcd34d; }
.badge-status.beta { background:#1e3a8a; color:#93c5fd; }
.badge-status.production { background:#065f46; color:#6ee7b7; }

.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); }
.notice.success { border-color:rgba(16,185,129,0.4); background:rgba(16,185,129,0.08); }

.form-group { margin-bottom:1rem; }
.form-group label { display:block; margin-bottom:.25rem; font:600 12px/1 Inter; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }
.form-group input, .form-group select, .form-group textarea { width:100%; 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; box-sizing:border-box; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:2px solid rgba(78,163,255,0.6); }
.form-group textarea { resize:vertical; min-height:80px; }

.checkbox-group { display:flex; flex-direction:column; gap:.5rem; }
.checkbox-group label { font:500 13px/1.3 Inter; text-transform:none; opacity:1; display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.checkbox-group input[type="checkbox"] { width:auto; }

.form-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem; justify-content:flex-end; }
.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-danger { background:var(--admin-danger); 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); }
.btn-danger:hover { background:#c62828; }

/* 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:800px; 
    max-height:90vh; 
    overflow-y:auto;
    border:1px solid rgba(255,255,255,0.12); 
    position:relative; 
    box-sizing:border-box;
}

.close { 
    position:absolute; 
    top:1rem; 
    right:1.5rem; 
    color:#aaa; 
    font-size:28px; 
    font-weight:bold; 
    cursor:pointer; 
    line-height:1;
}
.close:hover, .close:focus { color:#fff; text-decoration:none; }

/* Hotspot Settings Styling */
.hotspot-settings { background:rgba(255,255,255,0.03); padding:1rem; border-radius:12px; margin:1rem 0; border:1px solid rgba(255,255,255,0.08); }
.hotspot-settings h5 { margin:0 0 .75rem; font:600 14px/1.2 Inter; color:#b8c5d1; text-transform:uppercase; letter-spacing:.5px; }
.hotspot-settings .form-group { display:grid; grid-template-columns:1fr auto 80px; gap:.5rem; align-items:center; }
.hotspot-settings label { margin:0; text-transform:none; }
.hotspot-settings input[type="range"] { width:100px; }
.hotspot-settings span { font:600 11px/1 Inter; color:#8b949e; text-align:center; }

/* Color input styling */
input[type="color"] { 
    width:40px; 
    height:30px; 
    border:none; 
    border-radius:6px; 
    cursor:pointer; 
    background:none;
}

/* Range input styling */
input[type="range"] {
    appearance:none;
    height:4px;
    border-radius:2px;
    background:rgba(255,255,255,0.2);
    outline:none;
}

input[type="range"]::-webkit-slider-thumb {
    appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#4ea3ff;
    cursor:pointer;
}

input[type="range"]::-moz-range-thumb {
    width:16px;
    height:16px;
    border-radius:50%;
    background:#4ea3ff;
    cursor:pointer;
    border:none;
}

/* Message Styles */
.message { 
    padding:.75rem 1rem; 
    margin:.5rem 0; 
    border-radius:8px; 
    font:500 13px/1.4 Inter;
}
.message.info { background:rgba(59,130,246,0.15); color:#93c5fd; border:1px solid rgba(59,130,246,0.3); }
.message.success { background:rgba(16,185,129,0.15); color:#6ee7b7; border:1px solid rgba(16,185,129,0.3); }
.message.warn { background:rgba(245,158,11,0.15); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }
.message.error { background:rgba(239,68,68,0.15); color:#fca5a5; border:1px solid rgba(239,68,68,0.3); }

/* Responsive Design */
@media (max-width: 768px) {
    .modal-content {
        margin:1rem auto;
        padding:1rem;
        width:98%;
        max-height:95vh;
        border-radius:12px;
    }
    
    .hotspot-settings .form-group {
        grid-template-columns:1fr;
        gap:.25rem;
    }
    
    .form-actions {
        flex-direction:column;
    }
    
    .form-actions .btn {
        width:100%;
    }
}

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

/* Fade-in Animation */
.fade-in {
    animation:fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}