:root {
    /* Blue Theme Colors */
    --bg-primary: #0f172a; /* Slate 900 */
    --bg-secondary: #1e293b; /* Slate 800 */
    --bg-glass: rgba(30, 41, 59, 0.7); /* Translucent Blue/Slate */
    --border-color: rgba(148, 163, 184, 0.2);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    
    --font-main: 'Inter', sans-serif;
    --font-mono: Consolas, "Cascadia Code", "Ubuntu Mono", Menlo, Monaco, "Liberation Mono", monospace;
}

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

body {
    font-family: var(--font-main);
    background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
}

/* Glassmorphism utility */
.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

/* Sidebar */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    overflow: visible;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header h2 {
    font-size: 1.15rem;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.sidebar-nav {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    min-height: 44px;
    font-size: 0.96rem;
    padding: 10px 14px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.nav-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.nav-item:hover::after {
    width: 300px;
    height: 300px;
}

.nav-item:hover {
    color: var(--text-primary);
    transform: none;
}

.nav-item.active {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    transform: none;
}

.sidebar-nav .nav-item i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-size: 1.05rem;
}

.sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-secondary);
    position: relative;
    z-index: 101;
    overflow: visible;
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-indicator.online { background-color: var(--success); box-shadow: 0 0 8px var(--success); }

/* Main Content */
.main-content {
    flex-grow: 1;
    padding: 30px 40px;
    overflow-y: auto;
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.top-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
}

.quick-actions {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.btn:hover::after {
    width: 200px;
    height: 200px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.w-100 { width: 100%; justify-content: center; }

.btn:active { transform: scale(0.95); }

.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn-primary { background: var(--accent-blue); }
.btn-primary:hover { 
    background: var(--accent-blue-hover);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
}
.btn-success { background: var(--success); }
.btn-danger { background: var(--danger); }
.btn-warning { background: var(--warning); color: #0f172a; font-weight: 600; }

.btn-success:hover { box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3); }
.btn-danger:hover { box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3); }
.btn-warning:hover { box-shadow: 0 6px 15px rgba(245, 158, 11, 0.3); }

/* Button system refresh ---------------------------------------------------
   Make the action hierarchy readable at a glance on the dashboard, server
   pages and admin screens.  Colours identify the action; shape and spacing
   make every action easy to hit. */
.btn {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    font-weight: 650;
    letter-spacing: 0.01em;
    justify-content: center;
    background: #334155;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.btn i { font-size: 0.95em; }
.btn::after { display: none; }
.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible,
.dropdown-item:focus-visible,
.nav-item:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.9);
    outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.35);
    transform: none;
    box-shadow: none;
}
.btn-sm { min-height: 34px; padding: 7px 11px; border-radius: 8px; font-size: 0.82rem; }
.btn-primary { background: linear-gradient(135deg, #2563eb, #4f46e5); border-color: #60a5fa; }
.btn-success { background: linear-gradient(135deg, #059669, #10b981); border-color: #6ee7b7; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); border-color: #fde68a; color: #172033; }
.btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); border-color: #fca5a5; }

#server-controls { gap: 10px; }
#server-controls .btn { min-width: 108px; }
#btn-server-kill { background: linear-gradient(135deg, #7f1d1d, #b91c1c) !important; }
.server-actions .btn-manage { min-height: 46px; font-size: 0.95rem; }
.server-card { border: 1px solid rgba(148, 163, 184, 0.18); }
.server-card:hover { border-color: rgba(96, 165, 250, 0.65); }

.dropdown-item {
    min-height: 42px;
    padding: 11px 14px;
    font-weight: 600;
    border-radius: 7px;
    margin: 3px 6px;
    width: calc(100% - 12px);
}
.dropdown-item:hover { background: rgba(96, 165, 250, 0.18); }
.dropdown-item.text-danger:hover { background: rgba(248, 113, 113, 0.16); }

/* Authentication uses the same clear primary/secondary actions as the app. */
.login-card {
    border: 1px solid rgba(96, 165, 250, 0.3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.login-card h2 { font-size: 1.7rem; }
.login-card .form-control { min-height: 46px; }

/* A bot token is a secret, but it is not a website password.  Use visual
   masking without a password input type so browsers do not offer to save it. */
.token-input { -webkit-text-security: disc; }
.token-input:focus { -webkit-text-security: none; }

/* Tabs */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

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

/* Dashboard Grid - Server List */
.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.server-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    animation: cardEntrance 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Add stagger delay for up to 10 cards */
.server-card:nth-child(1) { animation-delay: 0.05s; }
.server-card:nth-child(2) { animation-delay: 0.1s; }
.server-card:nth-child(3) { animation-delay: 0.15s; }
.server-card:nth-child(4) { animation-delay: 0.2s; }
.server-card:nth-child(5) { animation-delay: 0.25s; }
.server-card:nth-child(6) { animation-delay: 0.3s; }
.server-card:nth-child(n+7) { animation-delay: 0.35s; }

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.server-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.2);
}

.server-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.server-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.2); /* Emerald */
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.server-icon.lobby-icon {
    background: rgba(139, 92, 246, 0.2); /* Purple */
    color: #8b5cf6;
}

.server-icon.offline-icon {
    background: rgba(148, 163, 184, 0.2); /* Slate */
    color: #94a3b8;
}

.server-title-area h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
}
.badge.online {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
.badge.offline {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.server-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
    flex-grow: 1;
}

.server-stats.offline-stats {
    opacity: 0.5;
}

.s-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.s-stat i {
    width: 20px;
    text-align: center;
    color: var(--accent-blue);
}

.server-actions {
    margin-top: auto;
}

/* Console */
.console-layout {
    display: flex;
    gap: 20px;
    height: calc(100vh - 160px);
}

.console-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.console-sidebar {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    padding-right: 5px; /* for scrollbar */
}

/* Stat Cards */
.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-blue);
}
.stat-icon.warning { color: var(--warning); }
.stat-icon.danger { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.stat-icon.success { color: var(--success); }

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.stat-value small {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: normal;
}

.console-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    overflow: hidden;
}

.console-output {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e2e8f0;
}

.console-output .log-time { color: var(--text-secondary); }

.console-input-area {
    display: flex;
    padding: 16px;
    background: rgba(15, 23, 42, 0.5);
    border-top: 1px solid var(--border-color);
    align-items: center;
    gap: 12px;
}

.console-input-area .prompt {
    font-family: var(--font-mono);
    color: var(--accent-blue);
    font-weight: bold;
}

#console-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: white;
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
}

/* Players */
.players-wrapper { padding: 20px; }
.players-table {
    width: 100%;
    border-collapse: collapse;
}
.players-table th, .players-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.players-table th {
    color: var(--text-secondary);
    font-weight: 500;
}
.player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}
.ping.good { color: var(--success); }
.ping.ok { color: var(--warning); }

/* Settings */
.settings-wrapper { padding: 30px; max-width: 600px; margin: 0 auto; }
.subtitle { color: var(--text-secondary); margin-bottom: 24px; }
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.form-control {
    width: 100%;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}
.form-control:focus { border-color: var(--accent-blue); }
.check-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.check-group label { margin-bottom: 0; cursor: pointer; }
.mt-4 { margin-top: 24px; }

/* Dynamic Navigation Utility */
.nav-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-left: 8px;
    font-weight: 600;
}
.mb-3 { margin-bottom: 16px; }


/* User Actions (Footer) */
.user-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.action-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.action-icon-wrapper:hover {
    background: rgba(255,255,255,0.1);
}

.action-icon {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.action-icon-wrapper:hover .action-icon {
    color: var(--text-primary);
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--error-red);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.user-actions {
    position: relative; /* dropdowns align to this */
    z-index: 102;
    overflow: visible;
}

/* Dropdown Menus */
.dropdown-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    right: -10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    min-width: 196px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: hidden;
}

#notif-dropdown {
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(10px) scale(0.95);
}
#notif-dropdown.show {
    display: flex;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

#account-dropdown {
    left: auto;
    right: 0;
    /* The standard sidebar is 260px wide. Keep the menu inside it so the
       account actions remain reachable instead of overflowing off-screen. */
    width: min(240px, calc(100vw - 24px));
    min-width: 0;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    transform: translateY(10px) scale(0.95);
}

.server-card-header h3 {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.server-card-header .server-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
    word-break: keep-all;
}

/* The account trigger is narrower than the standard sidebar.  Anchor its
   popup from the sidebar's left padding, not from the trigger, so no menu
   content can be clipped beyond the left edge of the viewport. */
body:not(.theme-pterodactyl) #account-dropdown {
    position: fixed;
    left: 12px;
    right: auto;
    bottom: 72px;
    width: min(196px, calc(100vw - 24px));
    min-width: 0;
}
#account-dropdown.show {
    display: flex;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dropdown-header {
    padding: 12px 16px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}

.dropdown-body {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    gap: 10px;
}

.dropdown-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.dropdown-item.text-danger:hover {
    color: var(--error-red);
}

.notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.notif-item:hover {
    background: rgba(255,255,255,0.05);
}
.notif-item.unread {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid var(--accent-blue);
}
.notif-item .notif-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Mobile Optimization */
.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active {
    display: block;
}

@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block;
    }
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 260px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .sidebar-header {
        padding: 16px 18px;
    }
    .sidebar-nav {
        flex-direction: column;
        padding: 10px;
    }
    .nav-item {
        width: 100%;
        justify-content: flex-start;
        min-height: 44px;
        padding: 10px 14px;
    }
    .sidebar-footer {
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .main-content {
        padding: 15px;
        overflow-x: hidden;
    }
    .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .quick-actions, #server-controls {
        width: 100%;
        flex-wrap: wrap;
    }
    .quick-actions .btn, #server-controls .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .table-container, .glass, .players-wrapper, .settings-wrapper {
        overflow-x: auto;
    }
    .settings-form .form-group {
        width: 100%;
    }
    .modal-content {
        padding: 15px;
        width: 90%;
    }
    .server-grid {
        grid-template-columns: 1fr;
    }
    
    .console-layout {
        flex-direction: column;
        height: auto;
    }
    .console-main {
        height: 50vh;
        flex: none;
    }
    .console-sidebar {
        width: 100%;
        padding-right: 0;
        overflow-y: visible;
    }
}

/* SweetAlert2 Custom Styling for KohaPanel Dark Theme */
.swal2-popup {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    color: var(--text-primary) !important;
    font-family: var(--font-main) !important;
}

div:where(.swal2-container) div:where(.swal2-html-container) {
    color: var(--text-secondary) !important;
    font-family: var(--font-main) !important;
}

.swal2-input, .swal2-textarea {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: white !important;
}
.swal2-input:focus, .swal2-textarea:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.swal2-confirm {
    background-color: var(--accent-blue) !important;
}
.swal2-cancel {
    background-color: #475569 !important;
    color: #f8fafc !important;
}
.swal2-deny {
    background-color: var(--danger) !important;
}

/* =========================================
   Theme: Pterodactyl (Glassmorphism ON)
   ========================================= */
body.theme-pterodactyl {
    /* Solid background base, overriding gradient */
    background: #0f172a;
    --bg-glass: rgba(30, 41, 59, 0.85); /* Slightly darker/more solid glass */
}

/* Sharper corners for panels and buttons */
body.theme-pterodactyl .glass,
body.theme-pterodactyl .modal-content,
body.theme-pterodactyl .server-card,
body.theme-pterodactyl .dashboard-card,
body.theme-pterodactyl .swal2-popup {
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.theme-pterodactyl .btn,
body.theme-pterodactyl .form-control {
    border-radius: 4px !important;
}

body.theme-pterodactyl .badge {
    border-radius: 4px !important;
}

body.theme-pterodactyl .server-actions .btn {
    border-radius: 4px !important;
}

body.theme-pterodactyl .sidebar {
    border-right: 1px solid rgba(255,255,255,0.05);
}

body.theme-pterodactyl .progress-bar {
    border-radius: 4px;
}
/* =========================================
   PTERODACTYL THEME OVERRIDES
   ========================================= */
body.theme-pterodactyl {
    --bg-glass: #2f3640;
    --bg-color: #1e293b;
    background: #1e293b !important;
}

/* App Container - Column layout */
body.theme-pterodactyl .app-container {
    flex-direction: column !important;
}

/* Sidebar to Top Navbar */
body.theme-pterodactyl:not(.admin-page) .sidebar {
    position: relative !important;
    width: 100% !important;
    height: 60px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: 114px !important; padding-right: 20px !important;
    transform: none !important;
    background: #0f172a !important; /* Darker header */
    border-right: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    z-index: 1000;
}

body.theme-pterodactyl:not(.admin-page) .sidebar-header {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Sidebar nav items */
body.theme-pterodactyl:not(.admin-page) .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px;
}
body.theme-pterodactyl:not(.admin-page) .sidebar-nav .nav-item {
    padding: 10px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; /* Hide text */
    border-radius: 6px !important;
}
body.theme-pterodactyl:not(.admin-page) .sidebar-nav .nav-item i {
    font-size: 16px !important;
    margin: 0 !important;
}

/* Hide unneeded elements */
body.theme-pterodactyl #announcements-banner {
    display: none !important;
}
body.theme-pterodactyl .sidebar-footer {
    display: none !important; /* Will add custom user menu if needed or rely on top right */
}

/* Filter bar & footer */
body.theme-pterodactyl .pterodactyl-filter-bar {
    display: flex !important;
}
body.theme-pterodactyl .pterodactyl-footer {
    display: block !important;
}

/* Server List to Horizontal */
body.theme-pterodactyl .server-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 10px !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

body.theme-pterodactyl .server-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 70px !important;
    padding: 0 20px !important;
    cursor: pointer !important;
    transition: transform 0.2s, background 0.2s;
    background: #2a313c !important; /* Slate color matching screenshot */
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 4px !important; /* Sharper edges */
}
body.theme-pterodactyl .server-card:hover {
    transform: scale(1.01) !important;
    background: #323b47 !important;
}

body.theme-pterodactyl .server-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 30% !important;
}

body.theme-pterodactyl .server-status {
    position: absolute; /* Hide status text but keep indicator if wanted, actually Pterodactyl just has a colored dot or bar */
    display: none !important; /* Hide it, or make it a small indicator */
}

/* Show pt-address */
body.theme-pterodactyl .pt-address {
    display: flex !important;
}

body.theme-pterodactyl .server-stats {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    margin: 0 !important;
    flex: 1 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

body.theme-pterodactyl .stat-item {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
}

body.theme-pterodactyl .btn-manage {
    display: none !important; /* Hide the button, clicking card handles it */
}

/* Switch styling for filter */
body.theme-pterodactyl .pt-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
body.theme-pterodactyl .pt-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
body.theme-pterodactyl .pt-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #475569;
  transition: .4s;
}
body.theme-pterodactyl .pt-switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
}
body.theme-pterodactyl .pt-switch input:checked + .slider {
  background-color: #3b82f6;
}
body.theme-pterodactyl .pt-switch input:checked + .slider:before {
  transform: translateX(20px);
}
body.theme-pterodactyl .pt-switch .slider.round {
  border-radius: 20px;
}
body.theme-pterodactyl .pt-switch .slider.round:before {
  border-radius: 50%;
}

/* Server page specific */
body.theme-pterodactyl #nav-server {
    display: flex !important;
}
body.theme-pterodactyl #current-server-name {
    display: none !important;
}

/* --- Pterodactyl Advanced Layout Changes --- */

/* 1. Global Nav and Top Bar layout */
body.theme-pterodactyl:not(.admin-page) .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 1000 !important;
    padding-left: 114px !important; padding-right: 20px !important;
    background: #10151b !important; /* darker top bar */
    backdrop-filter: none !important; /* Remove to prevent containing block for fixed children */
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

/* Sidebar header inside horizontal bar */
body.theme-pterodactyl:not(.admin-page) .sidebar-header {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Hide some elements from sidebar-footer in Pterodactyl mode to only keep user actions */
body.theme-pterodactyl:not(.admin-page) .sidebar-footer {
    display: flex !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
body.theme-pterodactyl:not(.admin-page) .sidebar-footer #btn-back-dashboard,
body.theme-pterodactyl:not(.admin-page) .sidebar-footer #btn-admin-menu,
body.theme-pterodactyl:not(.admin-page) .sidebar-footer p {
    display: none !important; /* Hide dashboard back, admin btn, and status text */
}

/* Make nav-global and user actions align horizontally */
body.theme-pterodactyl #nav-global {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-right: 20px;
}

body.theme-pterodactyl:not(.admin-page) .user-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Ensure sub-nav (Server Nav) is hidden when not managing a server */
body.theme-pterodactyl #nav-server[style*="none"] {
    display: none !important;
}

/* Ensure sub-nav (Server Nav) is a full width bar BELOW the top nav */
body.theme-pterodactyl #nav-server:not([style*="none"]) {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    height: 45px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #1e293b !important; /* lighter gray */
    z-index: 999 !important;
    padding: 0 20px 0 99px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    justify-content: flex-start !important;
    gap: 0px !important;
    margin: 0 !important;
    flex-grow: 0 !important;
    overflow: visible !important;
}
body.theme-pterodactyl #nav-server .nav-section-title {
    display: none !important;
}
body.theme-pterodactyl #nav-server .nav-item {
    font-size: 0.9rem !important;
    padding: 0 15px !important;
    height: 100% !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: #94a3b8 !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}
body.theme-pterodactyl #nav-server .nav-item::after {
    display: none !important; /* Remove the expanding circle hover effect */
}
body.theme-pterodactyl #nav-server .nav-item i {
    display: none !important; /* Hide icons in sub-nav */
}
body.theme-pterodactyl #nav-server .nav-item.active {
    border-bottom: 2px solid #06b6d4 !important; /* cyan underline */
    color: #e2e8f0 !important;
    transform: none !important;
    box-shadow: none !important;
}
body.theme-pterodactyl #nav-server .nav-item:hover {
    color: #f8fafc !important;
    transform: none !important;
}

/* Ensure main content pushes down to avoid fixed bars */
body.theme-pterodactyl .main-content {
    margin-top: 105px !important; /* 60px + 45px */
    padding: 30px 20px 30px 114px !important;
}

/* Restyle top-header for console page */
body.theme-pterodactyl .top-header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
body.theme-pterodactyl #page-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

/* Power Buttons */
body.theme-pterodactyl #server-controls .btn {
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
body.theme-pterodactyl #btn-start {
    background: #3b82f6 !important; /* Blue */
    color: white !important;
    border: none !important;
}
body.theme-pterodactyl #btn-restart {
    background: #64748b !important; /* Slate */
    color: white !important;
    border: none !important;
}
body.theme-pterodactyl #btn-stop {
    background: #ef4444 !important; /* Red */
    color: white !important;
    border: none !important;
}

/* Console layout adjustments */
body.theme-pterodactyl .console-layout {
    gap: 20px !important;
}
body.theme-pterodactyl .console-sidebar .stat-card {
    background: #475569 !important; /* Slate gray */
    border: none !important;
    border-radius: 4px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
}
body.theme-pterodactyl .console-sidebar .stat-card h3 {
    font-size: 0.8rem !important;
    color: #cbd5e1 !important;
    margin-bottom: 5px !important;
}
body.theme-pterodactyl .console-sidebar .stat-card .stat-value {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: white !important;
}
body.theme-pterodactyl .terminal-container {
    border-radius: 4px !important;
    border: none !important;
    background: #111827 !important;
}

body.theme-pterodactyl .user-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    height: 100% !important;
}
body.theme-pterodactyl #nav-global { margin-left: auto !important; gap: 0 !important; }
body.theme-pterodactyl .user-actions { gap: 0 !important; }

/* Hide filter switch */
body.theme-pterodactyl .pterodactyl-filter-bar { display: none !important; }

/* Top nav icons styling */
body.theme-pterodactyl #nav-global .nav-item,
body.theme-pterodactyl .action-icon-wrapper {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    display: block !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #94a3b8 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.theme-pterodactyl #nav-global .nav-item > i,
body.theme-pterodactyl .action-icon-wrapper > i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 1.2rem !important;
    margin: 0 !important;
}
body.theme-pterodactyl #nav-global .nav-item:hover,
body.theme-pterodactyl .action-icon-wrapper:hover {
    background: #1e293b !important;
    color: white !important;
}
body.theme-pterodactyl #nav-global .nav-item.active {
    background: #1e293b !important;
    border-bottom: 2px solid #06b6d4 !important; /* cyan border */
    color: white !important;
}

body.theme-pterodactyl .main-content {
    margin-top: 60px !important; /* Only account for top nav by default */
}
body.theme-pterodactyl:has(#nav-server:not([style*="none"])) .main-content {
    margin-top: 105px !important; /* Account for subnav when visible */
}
body.theme-pterodactyl .dropdown-menu { bottom: auto !important; top: 45px !important; right: 0 !important; left: auto !important; border-radius: 4px !important; }

/* Keep account/notification menus above dashboard cards. The Pterodactyl
   header makes their trigger 60px wide, so the menu needs its own width and
   stacking level instead of inheriting the icon's box. */
body.theme-pterodactyl .user-actions {
    position: relative !important;
    z-index: 5000 !important;
    overflow: visible !important;
}
body.theme-pterodactyl .action-icon-wrapper {
    overflow: visible !important;
}
body.theme-pterodactyl #account-dropdown,
body.theme-pterodactyl #notif-dropdown {
    width: min(280px, calc(100vw - 24px)) !important;
    min-width: 240px !important;
    z-index: 5001 !important;
}
body.theme-pterodactyl #account-dropdown {
    right: 0 !important;
    left: auto !important;
}

/* --- Pterodactyl Admin Page Specific Styles --- */
body.theme-pterodactyl.admin-page .sidebar {
    background: #10151b !important;
    border-right: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-pterodactyl.admin-page .sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

body.theme-pterodactyl.admin-page .sidebar-nav .nav-item {
    color: #94a3b8 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.96rem !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
    background: transparent !important;
}

body.theme-pterodactyl.admin-page .sidebar-nav .nav-item::after {
    display: none !important;
}

/* Hide admin icon in normal theme (rely on the big admin button instead) */
body:not(.theme-pterodactyl) #admin-icon-wrapper {
    display: none !important;
}


body.theme-pterodactyl.admin-page .sidebar-nav .nav-item:hover {
    background: rgba(255,255,255,0.02) !important;
    color: #f8fafc !important;
    transform: none !important;
}

body.theme-pterodactyl.admin-page .sidebar-nav .nav-item.active {
    background: rgba(255,255,255,0.05) !important;
    border: none !important;
    color: #f8fafc !important;
    font-weight: 600 !important;
    transform: none !important;
}

body.theme-pterodactyl.admin-page .admin-nav-section {
    font-size: 0.75rem;
    color: #475569; /* darker gray for section headers */
    text-transform: none; /* Pterodactyl usually doesn't uppercase these or uses minimal styles */
    margin: 15px 20px 5px;
}

body.theme-pterodactyl.admin-page .sidebar {
    display: flex !important;
    flex-direction: column !important;
}

body.theme-pterodactyl.admin-page .sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 20px !important;
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    margin-top: auto !important;
}


/* Admin Sidebar Sections (Normal Theme) */
.admin-nav-section {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    margin: 15px 20px 5px;
    letter-spacing: 0.5px;
}

/* Keep the whole admin sidebar usable on short or narrow viewports. */
body.admin-page .sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
body.admin-page .sidebar-footer {
    flex-shrink: 0;
}
body.admin-page .sidebar-nav .nav-item:hover,
body.admin-page .sidebar-nav .nav-item.active {
    transform: none;
}

/* Compact admin navigation so every control fits without sidebar scrolling. */
body.admin-page .sidebar-header {
    padding: 16px 18px;
}
body.admin-page .sidebar-header h2 {
    font-size: 1.15rem;
}
body.admin-page .sidebar-nav {
    padding: 10px 10px;
    gap: 5px;
}
body.admin-page .admin-nav-section {
    margin: 10px 10px 3px;
    font-size: 0.68rem;
}
body.admin-page .sidebar-nav .nav-item {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.96rem;
}
body.admin-page .sidebar-footer {
    padding: 10px 12px;
    font-size: 0.82rem;
}
body.admin-page .sidebar-footer .mb-3 {
    margin-bottom: 8px;
}
body.admin-page .sidebar-footer .user-actions {
    margin-top: 8px;
    padding: 6px 0;
}
body.admin-page .sidebar-footer .action-icon-wrapper {
    padding: 6px;
}


body.theme-pterodactyl.admin-page .app-container {
    flex-direction: row !important;
}


body.theme-pterodactyl.admin-page .main-content {
    margin-left: 260px !important;
    margin-top: 0 !important;
    padding: 30px 40px !important;
    width: calc(100% - 260px) !important;
}


body.theme-pterodactyl.admin-page .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
}

/* The admin sidebar is fixed, so it must not also take part in the flex
   layout. This prevents its left edge from being clipped on desktop widths. */
body.theme-pterodactyl.admin-page .app-container {
    display: block !important;
    min-width: 0 !important;
}
body.theme-pterodactyl.admin-page .sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    transform: none !important;
}
body.theme-pterodactyl.admin-page .main-content {
    margin-left: 260px !important;
    width: calc(100vw - 260px) !important;
    min-width: 0 !important;
    flex: none !important;
}
@media (max-width: 760px) {
    body.theme-pterodactyl.admin-page .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    body.theme-pterodactyl.admin-page .sidebar:not(.active) {
        transform: translateX(-100%) !important;
    }
}

/* Keep the refreshed action hierarchy when the Pterodactyl theme is active. */
.dropdown-item {
    min-height: 42px;
    padding: 11px 14px;
    font-weight: 600;
    border-radius: 7px;
    margin: 3px 6px;
    width: calc(100% - 12px);
}
.dropdown-item:hover { background: rgba(96, 165, 250, 0.18); }
.dropdown-item.text-danger:hover { background: rgba(248, 113, 113, 0.16); }
body.theme-pterodactyl .btn {
    min-height: 40px;
    border-radius: 8px;
    font-weight: 650;
    letter-spacing: 0.01em;
}
body.theme-pterodactyl .btn-primary { background: #2563eb !important; border-color: #60a5fa !important; }
body.theme-pterodactyl .btn-success { background: #059669 !important; border-color: #6ee7b7 !important; }
body.theme-pterodactyl .btn-warning { background: #f59e0b !important; border-color: #fde68a !important; color: #172033 !important; }
body.theme-pterodactyl .btn-danger { background: #dc2626 !important; border-color: #fca5a5 !important; }
body.theme-pterodactyl .btn:hover { transform: translateY(-1px) !important; filter: brightness(1.08); }
body.theme-pterodactyl #server-controls .btn { min-width: 108px; justify-content: center; }
body.theme-pterodactyl .dropdown-item { min-height: 42px; font-weight: 600; }

@media (max-width: 700px) {
    #server-controls .btn,
    body.theme-pterodactyl #server-controls .btn {
        min-width: 0;
        flex: 1 1 calc(50% - 6px);
    }
    .quick-actions { flex-wrap: wrap; }
}

/* DEBUG ONLY: Remove this banner before creating a release build. */
.debug-build-badge {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 2147483647;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(251, 191, 36, 0.7);
    width: min(780px, calc(100vw - 32px));
    transform: translateX(-50%);
    border-radius: 8px;
    background: rgba(69, 10, 10, 0.96);
    color: #fecaca;
    box-shadow: 0 8px 28px rgba(127, 29, 29, 0.45);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    pointer-events: none;
}
.debug-build-badge i { color: #f87171; font-size: 1.15rem; }
.debug-build-badge strong { color: #fca5a5; }
.manager-search-input { flex:1; min-width:190px; min-height:42px; padding:0 14px; color:var(--text-primary); border:1px solid rgba(119,166,255,.28); border-radius:10px; outline:0; background:rgba(7,16,38,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .2s,box-shadow .2s,background .2s; font:inherit; }
.manager-search-input::placeholder { color:#7f91b0; }.manager-search-input:focus { border-color:#5b9cff; background:rgba(12,28,63,.9); box-shadow:0 0 0 3px rgba(75,141,255,.18),inset 0 1px 0 rgba(255,255,255,.06); }

/* Server pages use a denser navigation rail, matching the compact admin
   menu while leaving the dashboard and the Pterodactyl top navigation alone. */
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) .sidebar {
    width: 260px;
    overflow-x: hidden;
    overflow-y: auto;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) .sidebar-header {
    padding: 16px 18px;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) .sidebar-header h2 {
    font-size: 1.12rem;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) .sidebar-nav {
    padding: 10px;
    gap: 5px;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) #nav-global {
    display: none !important;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) #nav-server .nav-item {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.96rem;
    gap: 10px;
}

.sidebar-footer .action-icon-wrapper {
    min-width: 42px;
    min-height: 42px;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) #nav-server .nav-item:hover,
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) #nav-server .nav-item.active {
    transform: none;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) .sidebar-footer {
    padding: 10px 12px;
    font-size: 0.82rem;
}
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) .sidebar-footer #btn-admin-menu {
    margin-bottom: 8px !important;
}
/* On a server page the rail is intentionally narrow. Keep the account menu
   inside that rail so it never covers the server content to its right. */
body:not(.admin-page):not(.theme-pterodactyl):has(#nav-server:not([style*="none"])) #account-dropdown {
    position: fixed;
    left: 12px;
    right: auto;
    bottom: 72px;
    width: min(196px, calc(100vw - 24px));
    max-height: calc(100vh - 92px);
}

/* Theme-matched action buttons ------------------------------------------
   Keep actions legible without placing saturated blocks on the slate/glass
   surfaces. Semantic colours are used as accents instead. */
.btn {
    color: var(--text-primary);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.9));
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(2, 6, 23, 0.24);
}
.btn:hover {
    filter: none;
    background: linear-gradient(180deg, rgba(71, 85, 105, 0.96), rgba(37, 51, 71, 0.96));
    border-color: rgba(148, 163, 184, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px rgba(2, 6, 23, 0.34);
}
.btn-primary {
    color: #dbeafe;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.34), rgba(30, 64, 175, 0.24));
    border-color: rgba(96, 165, 250, 0.58);
}
.btn-success {
    color: #d1fae5;
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.32), rgba(6, 95, 70, 0.24));
    border-color: rgba(52, 211, 153, 0.52);
}
.btn-warning {
    color: #fef3c7;
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.32), rgba(146, 64, 14, 0.24));
    border-color: rgba(251, 191, 36, 0.54);
}
.btn-danger,
#btn-server-kill {
    color: #fee2e2;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.3), rgba(127, 29, 29, 0.24)) !important;
    border-color: rgba(248, 113, 113, 0.5);
}
.btn-primary:hover { background: linear-gradient(180deg, rgba(37, 99, 235, 0.48), rgba(30, 64, 175, 0.34)); }
.btn-success:hover { background: linear-gradient(180deg, rgba(5, 150, 105, 0.46), rgba(6, 95, 70, 0.34)); }
.btn-warning:hover { background: linear-gradient(180deg, rgba(217, 119, 6, 0.46), rgba(146, 64, 14, 0.34)); }
.btn-danger:hover,
#btn-server-kill:hover { background: linear-gradient(180deg, rgba(220, 38, 38, 0.44), rgba(127, 29, 29, 0.34)) !important; }

body.theme-pterodactyl .btn {
    color: #e2e8f0 !important;
    background: #273241 !important;
    border-color: #3f4c5e !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
body.theme-pterodactyl .btn-primary { color: #cffafe !important; background: #164e63 !important; border-color: #0891b2 !important; }
body.theme-pterodactyl .btn-success { color: #d1fae5 !important; background: #14532d !important; border-color: #16a34a !important; }
body.theme-pterodactyl .btn-warning { color: #fef3c7 !important; background: #713f12 !important; border-color: #d97706 !important; }
body.theme-pterodactyl .btn-danger,
body.theme-pterodactyl #btn-server-kill { color: #fee2e2 !important; background: #7f1d1d !important; border-color: #dc2626 !important; }
body.theme-pterodactyl .btn:hover { filter: brightness(1.14) !important; }
@media (max-width: 600px) {
    .debug-build-badge { top: 8px; width: calc(100vw - 20px); padding: 8px 10px; font-size: 0.76rem; }
}