/* AtomGate ACL Server — Dark Theme */
:root {
    --bg: #0d1117;
    --card: #161b22;
    --border: #30363d;
    --text: #c9d1d9;
    --muted: #8b949e;
    --dim: #484f58;
    --accent: #58a6ff;
    --green: #3fb950;
    --red: #f85149;
    --yellow: #d29922;
    --purple: #bc8cff;
    --header: #1c2128;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

/* App Shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px;
    background: var(--card);
    border-right: 1px solid var(--border);
    padding: 16px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* Stays on screen while the rest of the page scrolls. Own scrollbar
       only engages when the menu itself doesn't fit in the viewport. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* Put the sidebar's scrollbar on the LEFT edge so it doesn't sit
       next to the menu items (rtl flips the scrollbar side, and children
       are reverted to ltr so text stays normal). */
    direction: rtl;
}
.sidebar > * { direction: ltr; }

.sidebar .logo {
    padding: 8px 20px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.sidebar .logo h2 { font-size: 16px; color: var(--text); font-weight: 700; }

.content { flex: 1; padding: 24px; overflow-y: auto; }

/* Nav */
.nav-items { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 8px;
    color: var(--muted); text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--header); color: var(--text); }
.nav-item.active { background: var(--header); color: var(--accent); font-weight: 600; }
.nav-item .icon { font-size: 14px; width: 18px; text-align: center; }
.nav-items { flex: 1; }
.nav-footer { margin-top: auto; }

/* Cards */
.card {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 16px;
}
.card-header {
    background: var(--header); padding: 10px 16px; border-radius: 10px 10px 0 0;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border);
}
.card-header h3 { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.card-body { padding: 8px; }
.card-body.scrollable { max-height: 500px; overflow-y: auto; }

/* Count badge */
.count {
    background: var(--border); color: var(--muted); border-radius: 12px;
    padding: 2px 10px; font-size: 11px; font-weight: 600;
}

/* Items */
.item {
    padding: 10px 12px; margin: 4px 0; border-radius: 6px; font-size: 12px;
    display: flex; justify-content: space-between; align-items: center;
    background: #1a2233; border: 1px solid #253040; color: var(--text);
    transition: border-color 0.15s;
}
.item:hover { border-color: var(--accent); }
.item .name { font-weight: 600; }
.item .meta { color: var(--muted); font-size: 10px; margin-top: 2px; }
.item .detail { color: var(--muted); font-size: 11px; margin-top: 2px; font-family: monospace; }

/* Badges */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.badge-green { background: #1a3a1a; color: var(--green); border: 1px solid #254025; }
.badge-red { background: #3d1418; color: var(--red); border: 1px solid #5a2028; }
.badge-yellow { background: #2a2a1a; color: var(--yellow); border: 1px solid #403d25; }
.badge-blue { background: #1a2a3a; color: var(--accent); border: 1px solid #254060; }
.badge-purple { background: #2a1a3a; color: var(--purple); border: 1px solid #402560; }
.badge-dim { background: #2a2a2a; color: var(--dim); border: 1px solid #3a3a3a; }

/* Buttons */
.btn {
    padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; transition: background 0.15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.btn-green { background: #238636; color: #fff; }
.btn-green:hover { background: #2ea043; }
.btn-blue { background: #1f6feb; color: #fff; }
.btn-blue:hover { background: #388bfd; }
.btn-red { background: transparent; color: var(--red); border: 1px solid var(--red); }
.btn-red:hover { background: #3d1418; }
.btn-yellow { background: transparent; color: var(--yellow); border: 1px solid var(--yellow); }
.btn-yellow:hover { background: #3d3418; }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Forms */
.form-group { margin-bottom: 8px; }
.form-group label {
    color: var(--muted); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.5px; display: block; margin-bottom: 4px;
}
.form-control {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    color: var(--text); padding: 6px 10px; font-size: 12px;
    width: 100%;
}
.form-control:focus { outline: none; border-color: var(--accent); }
.form-row { display: flex; gap: 8px; }
.form-row > * { flex: 1; }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th {
    text-align: left; color: var(--muted); font-size: 10px; text-transform: uppercase;
    padding: 8px 12px; border-bottom: 1px solid var(--border); letter-spacing: 0.5px;
}
.table td { padding: 8px 12px; border-bottom: 1px solid #1c2128; color: var(--text); }
.table tr:hover td { background: #1a2233; }

/* Toast */
.toast {
    position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: 8px;
    color: #fff; font-size: 13px; font-weight: 600; z-index: 9999;
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; }
.toast-success { background: #238636; }
.toast-error { background: #da3633; }

/* Page titles */
h1 { color: var(--text); font-size: 20px; margin-bottom: 16px; }

/* Status dots */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green); }
.dot-red { background: var(--red); }
.dot-yellow { background: var(--yellow); }
.dot-dim { background: var(--dim); }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab {
    padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--muted);
    cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
    background: none; border-top: none; border-left: none; border-right: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Modal overlay */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease;
}
.modal {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    width: 520px; max-width: 95vw; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: slideUp 0.2s ease;
}
.modal-lg { width: 680px; }
.modal-header {
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.modal-close {
    background: none; border: none; color: var(--muted); font-size: 18px;
    cursor: pointer; padding: 4px 8px; border-radius: 4px; line-height: 1;
}
.modal-close:hover { color: var(--text); background: var(--header); }
.modal-body { padding: 20px; }
.modal-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
}

/* Confirm dialog */
.confirm-body { text-align: center; padding: 24px 20px; }
.confirm-body .confirm-icon { font-size: 36px; margin-bottom: 12px; }
.confirm-body p { color: var(--text); margin-bottom: 4px; font-weight: 600; }
.confirm-body .confirm-detail { color: var(--muted); font-size: 12px; }
.btn-ghost {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.btn-ghost:hover { color: var(--text); border-color: var(--dim); }

/* Toast notifications */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
    position: relative; padding: 12px 20px; border-radius: 8px;
    color: #fff; font-size: 13px; font-weight: 600;
    opacity: 1; transition: opacity 0.3s; pointer-events: auto;
    min-width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.toast-success { background: #238636; }
.toast-error { background: #da3633; }
.toast-info { background: #1f6feb; }
.toast-warning { background: #9e6a03; }

/* Search / filter bar */
.toolbar {
    display: flex; gap: 8px; align-items: center; margin-bottom: 16px;
    padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px;
}
.toolbar .form-control { max-width: 280px; }
.toolbar .spacer { flex: 1; }

/* Checkbox */
.form-check {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.form-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent);
}
.form-check label { color: var(--text); font-size: 12px; cursor: pointer; }

/* Textarea */
textarea.form-control { min-height: 80px; resize: vertical; font-family: inherit; }

/* Empty state */
.empty-state {
    text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty-state .empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.empty-state p { font-size: 13px; }

/* Pill-style toggle */
.toggle-group { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.toggle-btn {
    padding: 5px 14px; font-size: 11px; font-weight: 600; cursor: pointer;
    background: transparent; color: var(--muted); border: none;
    transition: all 0.15s;
}
.toggle-btn.active { background: var(--accent); color: #fff; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Stat cards */
.stat { text-align: center; padding: 16px; }
.stat .stat-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.2; }
.stat .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .sidebar { width: 60px; }
    .sidebar .logo h2, .nav-item span:not(.icon) { display: none; }
    .modal { width: 95vw; }
}