/* Admin panel styles — docked at the bottom of the page, open by default */

/* The page is a column so the dock sits at the bottom of the window on a short page and below
   the content on a long one. It is in the page flow, not fixed, so it never covers the form. */
body.sim-page {
    display: flex;
    flex-direction: column;
}
body.sim-page .main-content { flex: 1; }

.admin-dock {
    background: #1a1a2e;
    border-top: 2px solid #444;
}

/* The one control for the panel: full width, so it cannot be missed, and it says what it does. */
.admin-dock-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-primary, #e0e0e0);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.admin-dock-title {
    font-weight: 600;
    font-size: 1rem;
}
.admin-dock-action {
    color: var(--accent-primary, #00d4ff);
    font-size: 0.9rem;
    padding: 2px 10px;
    border: 1px solid currentColor;
    border-radius: 4px;
}
.admin-dock-bar:hover .admin-dock-action { background: rgba(0, 212, 255, 0.12); }
.admin-dock-bar:focus-visible {
    outline: 2px solid var(--accent-primary, #00d4ff);
    outline-offset: -2px;
}

.admin-panel[hidden] { display: none; }

.admin-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.admin-content h3 {
    margin: 0 0 1rem 0;
    color: #e0e0e0;
    font-size: 1.1rem;
}

.admin-section {
    margin-bottom: 1rem;
}

.admin-section h4 {
    margin: 0 0 0.5rem 0;
    color: #aaa;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.admin-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.admin-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-danger { background: #c62828; color: white; }
.btn-danger:hover:not(:disabled):not(.disabled) { background: #b71c1c; }

.btn-success { background: #2e7d32; color: white; }
.btn-success:hover:not(:disabled):not(.disabled) { background: #1b5e20; }

.btn-warning { background: #e65100; color: white; }
.btn-warning:hover:not(:disabled):not(.disabled) { background: #bf360c; }

.admin-result {
    margin-top: 1rem;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.admin-result.success { background: rgba(76, 175, 80, 0.15); color: #4CAF50; border: 1px solid rgba(76, 175, 80, 0.3); }
.admin-result.error { background: rgba(244, 67, 54, 0.15); color: #F44336; border: 1px solid rgba(244, 67, 54, 0.3); }
.admin-result.info { background: rgba(33, 150, 243, 0.15); color: #2196F3; border: 1px solid rgba(33, 150, 243, 0.3); }
.admin-error { color: #F44336; padding: 1rem; }

/* 066: the panel now explains itself instead of asserting. `.admin-note` carries why a control is
   unavailable and which storage account a Clean button would empty; `.admin-groups` carries the
   per-group breakdown of what a clear actually did — which matters most when the result is mixed,
   because "some of it went" and "none of it went" need different responses from the operator. */
.admin-note {
    color: #9aa4b2;
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.admin-groups {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

.admin-groups li {
    color: #9aa4b2;
}

.admin-btn.disabled,
.admin-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}