/* CSS Variables for theming */
:root {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f2e;
    --bg-tertiary: #242b3d;
    --bg-hover: #2d3548;
    --text-primary: #f0f2f5;
    --text-secondary: #b8bfc9;
    --text-muted: #8892a0;
    --border-color: #2d3548;
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #06b6d4;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] {
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8fafc;
    --bg-hover: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 15px;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
}

[data-theme="light"] header {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-bottom: 1px solid #cbd5e1;
}

[data-theme="light"] .header-left h1 {
    color: #1e293b;
}

[data-theme="light"] .uptime {
    color: #475569;
    background: rgba(0,0,0,0.08);
}

[data-theme="light"] .header-right button,
[data-theme="light"] .header-center button {
    background: rgba(0,0,0,0.1);
    color: #1e293b;
}

[data-theme="light"] .header-right button:hover,
[data-theme="light"] .header-center button:hover {
    background: rgba(0,0,0,0.15);
}

[data-theme="light"] .header-right button.active {
    background: var(--accent-color);
    color: #fff;
}

[data-theme="light"] .header-center button.active {
    background: var(--warning-color);
    color: #000;
}

[data-theme="light"] .user {
    color: #1e293b;
}

[data-theme="light"] .readonly-badge {
    background: rgba(0,0,0,0.08);
    color: #475569;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-left h1 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

.uptime {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
}

.disconnected-badge {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    background: var(--danger-color);
    border-radius: var(--radius-sm);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.header-center {
    display: flex;
    gap: 10px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Buttons - Improved */
button {
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-right button {
    padding: 10px 18px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.header-right button:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}

.header-right button.active {
    background: var(--accent-color);
}

/* Settings Menu */
.settings-menu-wrapper {
    position: relative;
}

.settings-btn {
    font-size: 18px;
    padding: 8px 14px !important;
}

.settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.settings-section {
    padding: 8px 0;
}

.settings-section-title {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 13px;
    color: var(--text-primary);
}

.settings-item:hover {
    background: var(--bg-hover);
}

.settings-check {
    width: 16px;
    text-align: center;
    color: var(--accent-color);
    font-weight: bold;
}

.settings-icon {
    width: 16px;
    text-align: center;
}

.settings-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

[data-theme="light"] .settings-dropdown {
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.header-center button {
    padding: 10px 20px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.header-center button:hover {
    background: rgba(255,255,255,0.25);
}

.header-center button.active {
    background: var(--warning-color);
    color: #000;
}

.user {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    font-weight: 500;
}

.readonly-badge {
    padding: 8px 14px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-badge {
    padding: 8px 14px;
    background: var(--accent-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="light"] .admin-badge {
    background: var(--accent-color);
    color: #fff;
}

/* Main Layout */
main {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.row {
    display: grid;
    gap: 20px;
}

.top-row {
    grid-template-columns: repeat(4, 1fr);
}

.main-row {
    grid-template-columns: 2fr 1fr;
}

.bottom-row {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1400px) {
    .top-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .main-row {
        grid-template-columns: 1fr;
    }
    .bottom-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .top-row {
        grid-template-columns: 1fr;
    }
}

/* Panels */
.panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.panel-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.panel-content {
    padding: 20px;
}

/* Pause Button */
.pause-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
}

.pause-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.pause-btn.active {
    background: var(--warning-color);
    color: #000;
    border-color: var(--warning-color);
}

/* Bar containers */
.bar-container {
    flex: 1;
    height: 10px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.bar-container.large {
    height: 14px;
}

.bar-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
}

/* CPU Panel */
.cpu-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cpu-model {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.cpu-usage {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-color);
}

.load-avg {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 500;
}

.cores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.core-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.core-label {
    width: 22px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.core-value {
    width: 36px;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    color: var(--text-secondary);
}

.core-temp {
    width: 32px;
    font-size: 11px;
    font-weight: 500;
    color: var(--warning-color);
}

/* Physical core temperatures row */
.temps-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    align-items: center;
}

.temps-label {
    color: var(--text-muted);
    margin-right: 4px;
}

.temp-pkg {
    padding: 2px 6px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    margin-right: 8px;
}

.temp-core {
    min-width: 24px;
    text-align: center;
}

.temp-core.P {
    font-weight: 700;
}

.temp-core.E {
    font-weight: 500;
    opacity: 0.8;
}

/* Memory Panel */
.memory-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.memory-bar .label {
    width: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.memory-bar .value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.memory-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.memory-details .detail {
    color: var(--text-primary);
    font-weight: 500;
}

.memory-details .detail span {
    color: var(--text-muted);
    font-weight: 400;
}

/* GPU Panel */
.gpu-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.gpu-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.gpu-bar .label {
    width: 55px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.gpu-bar .value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.gpu-details {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 12px;
    font-weight: 500;
}

/* Disk Panel */
.disk-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.disk-item {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.disk-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.disk-mount {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.disk-device {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.disk-usage {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 6px;
}

.disk-io {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.disk-io h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.io-item {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 0;
}

.io-device {
    width: 70px;
    color: var(--text-secondary);
}

.io-read {
    color: var(--success-color);
}

.io-write {
    color: var(--warning-color);
}

/* Network Panel */
.net-total {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.net-speed {
    display: flex;
    gap: 30px;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
}

.net-speed .down {
    color: var(--success-color);
}

.net-speed .up {
    color: var(--warning-color);
}

.net-total-bytes {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.interfaces {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iface-item {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.iface-item.down {
    opacity: 0.5;
}

.iface-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.iface-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.iface-status {
    color: var(--success-color);
    font-size: 12px;
}

.iface-item.down .iface-status {
    color: var(--danger-color);
}

.iface-ips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.iface-ips .ip {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.iface-speed {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Process Panel */
.processes-panel {
    min-height: 100px;
}

.process-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.filter-input {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    width: 220px;
    font-weight: 500;
}

.filter-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.filter-input::placeholder {
    color: var(--text-muted);
}

.process-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.process-table th {
    text-align: left;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.process-table th:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.process-table th.sorted {
    color: var(--accent-color);
}

.process-table th.sorted::after {
    content: ' ▼';
    font-size: 10px;
}

.process-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
}

.process-table tr.clickable {
    cursor: pointer;
}

.process-table tr.clickable:hover {
    background: var(--bg-hover);
}

.process-table td.high {
    color: var(--danger-color);
    font-weight: 700;
}

.process-table td.medium {
    color: var(--warning-color);
    font-weight: 600;
}

.process-table td.command {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

/* Sockets Panel */
.socket-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-weight: 600;
}

.socket-stats .listen {
    color: var(--info-color);
}

.socket-stats .established {
    color: var(--success-color);
}

.socket-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.socket-tabs button {
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
}

.socket-tabs button:hover {
    background: var(--bg-hover);
}

.socket-tabs button.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.socket-table, .firewall-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.socket-table th, .firewall-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
}

.socket-table td, .firewall-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
}

.state-listen {
    color: var(--info-color);
    font-weight: 600;
}

.state-established {
    color: var(--success-color);
    font-weight: 600;
}

.state-time_wait, .state-close_wait {
    color: var(--warning-color);
}

/* Firewall Panel */
.fw-backend {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-transform: uppercase;
}

.fw-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--danger-color);
}

.fw-status.active {
    color: var(--success-color);
}

.no-firewall {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
    font-size: 15px;
}

.action-allow, .action-accept {
    color: var(--success-color);
    font-weight: 600;
}

.action-deny, .action-drop, .action-reject {
    color: var(--danger-color);
    font-weight: 600;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 700;
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: var(--radius-sm);
}

.close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

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

/* Process Detail Modal */
.process-detail-modal {
    width: 850px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-section {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.detail-section.full-width {
    grid-column: 1 / -1;
}

.detail-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
}

.detail-row span {
    color: var(--text-muted);
    font-weight: 400;
}

code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 13px;
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.command-line {
    display: block;
    padding: 12px;
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
}

.mini-table {
    width: 100%;
    font-size: 12px;
}

.mini-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
}

.children-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.child-pid {
    padding: 4px 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.child-pid:hover {
    background: var(--accent-color);
    color: #fff;
}

/* Clickable PID, IP, and User links */
.pid-link, .ip-link, .user-link {
    cursor: pointer;
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.pid-link:hover, .ip-link:hover, .user-link:hover {
    color: var(--accent-hover);
    text-decoration-style: solid;
}

.pid-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pid-list .pid-link {
    padding: 4px 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.pid-list .pid-link:hover {
    background: var(--accent-color);
    color: #fff;
}

/* IP Info Modal */
.ip-info-modal {
    max-width: 700px;
}

.ip-info-modal .loading {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.dns-list {
    margin-top: 4px;
    padding-left: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.whois-content {
    background: var(--bg-primary);
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.4;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* User Info Modal */
.user-info-modal {
    max-width: 700px;
}

.user-info-modal .loading {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.groups-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.group-tag {
    padding: 4px 10px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.fd-list {
    max-height: 200px;
    overflow-y: auto;
}

.fd-item {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
}

.fd-num {
    width: 32px;
    font-weight: 600;
    color: var(--text-muted);
}

.fd-type {
    width: 70px;
    font-weight: 500;
    color: var(--text-secondary);
}

.fd-target {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.more {
    padding: 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.more a {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}

.more a:hover {
    text-decoration: underline;
}

.modal-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.renice-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.renice-control label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.renice-control input {
    width: 70px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
}

/* Action Buttons */
.btn-primary {
    padding: 12px 20px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-warning {
    padding: 12px 20px;
    background: var(--warning-color);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.btn-warning:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-danger {
    padding: 12px 20px;
    background: var(--danger-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.btn-danger:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Login Modal */
.login-modal {
    width: 360px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-error {
    color: var(--danger-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

/* Compact Mode */
main.compact {
    padding: 8px;
    gap: 8px;
}

main.compact .row {
    gap: 8px;
}

main.compact .panel {
    border-radius: var(--radius-sm);
}

main.compact .panel-header {
    padding: 6px 10px;
}

main.compact .panel-header h2 {
    font-size: 13px;
}

main.compact .panel-content {
    padding: 8px;
}

main.compact .cores-grid {
    gap: 3px;
}

main.compact .core-bar {
    padding: 2px 4px;
}

main.compact .bar-container {
    height: 6px;
}

main.compact .bar-container.large {
    height: 8px;
}

main.compact .stat-item {
    padding: 6px 8px;
}

main.compact .stat-label {
    margin-bottom: 2px;
}

main.compact .stats-grid {
    gap: 6px;
}

main.compact .process-table th,
main.compact .process-table td {
    padding: 4px 6px;
    font-size: 12px;
}

main.compact .socket-table th,
main.compact .socket-table td,
main.compact .firewall-table th,
main.compact .firewall-table td {
    padding: 4px 6px;
    font-size: 11px;
}

main.compact .docker-table th,
main.compact .docker-table td {
    padding: 4px 8px;
}

main.compact .docker-table .status-icon-cell {
    padding: 4px 4px !important;
}

main.compact .service-table th,
main.compact .service-table td {
    padding: 4px 8px;
    font-size: 12px;
}

main.compact .service-table .status-icon-cell {
    padding: 4px 4px !important;
}

main.compact .service-table .service-desc {
    max-width: 200px;
}

main.compact .sessions-table th,
main.compact .sessions-table td {
    padding: 4px 8px;
    font-size: 12px;
}

main.compact .users-list-table th,
main.compact .users-list-table td {
    padding: 4px 8px;
    font-size: 12px;
}

main.compact .tabs {
    gap: 4px;
    margin-bottom: 8px;
}

main.compact .tab-btn {
    padding: 4px 10px;
}

main.compact .cpu-usage {
    font-size: 20px;
}

main.compact .net-speed {
    font-size: 16px;
}

main.compact .memory-details,
main.compact .disk-list,
main.compact .net-interfaces {
    gap: 6px;
}

main.compact .disk-item,
main.compact .net-interface {
    padding: 6px 8px;
}

main.compact .search-container {
    margin-bottom: 8px;
}

main.compact .search-container input {
    padding: 6px 10px 6px 32px;
}

main.compact .action-btn {
    padding: 3px 8px;
    font-size: 11px;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .header-left h1 {
        font-size: 18px;
    }

    /* Full-screen modals on mobile */
    .modal-overlay {
        padding: 0;
    }

    .modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .modal-header {
        padding: 16px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .modal-header h2 {
        font-size: 16px;
        word-break: break-word;
    }

    .modal-content {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .detail-section {
        padding: 12px;
    }

    .detail-section h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 0;
    }

    .detail-row span:first-child {
        min-width: auto;
    }

    .detail-row code {
        word-break: break-all;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .command-line {
        font-size: 12px;
        word-break: break-all;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    /* Mini tables in modals */
    .mini-table {
        font-size: 12px;
        display: block;
        overflow-x: auto;
    }

    .mini-table td {
        padding: 6px 4px;
        white-space: nowrap;
    }

    /* PID and group lists */
    .pid-list, .groups-list, .children-list {
        gap: 6px;
    }

    .pid-list .pid-link, .child-pid, .group-tag {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* FD list */
    .fd-list {
        max-height: 250px;
    }

    .fd-item {
        font-size: 12px;
        padding: 6px 8px;
    }

    /* Whois content */
    .whois-content {
        font-size: 11px;
        max-height: 200px;
    }

    /* Modal actions */
    .modal-actions {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
    }

    .modal-actions button {
        flex: 1;
        min-width: 100px;
    }

    .renice-control {
        width: 100%;
        flex-wrap: wrap;
    }

    .renice-control input {
        width: 60px;
    }

    .filter-input {
        width: 150px;
    }

    /* IP and User modals */
    .ip-info-modal,
    .user-info-modal {
        max-width: 100%;
    }

    .dns-list {
        font-size: 12px;
    }
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toast-in 0.3s ease-out;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.toast:hover {
    transform: translateX(-5px);
}

.toast.toast-info {
    background: #f0f0f0;
    color: #333;
    border-left: 4px solid #888;
}

.toast.toast-error {
    background: #ef4444;
    color: white;
    border-left: 4px solid #b91c1c;
}

.toast.toast-success {
    background: #22c55e;
    color: white;
    border-left: 4px solid #15803d;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    line-height: 1;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toast-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.removing {
    animation: toast-out 0.3s ease-in forwards;
}

/* Group link styles */
.group-link {
    cursor: pointer;
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.group-link:hover {
    color: var(--accent-hover);
    text-decoration-style: solid;
}

/* Action buttons in tables */
.action-btn {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn.kill {
    background: var(--danger-color);
    color: white;
}

.action-btn.kill:hover {
    background: #dc2626;
}

.action-btn.pause {
    background: var(--warning-color);
    color: white;
}

.action-btn.pause:hover {
    background: #d97706;
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Process info in user detail */
.proc-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.proc-info .proc-name {
    color: var(--text-primary);
    font-weight: 500;
}

.proc-info .proc-pid {
    color: var(--text-muted);
    font-size: 12px;
}

/* Editable fields */
.editable-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editable-field input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 13px;
}

.editable-field button {
    padding: 6px 12px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 20px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Service badge */
.service-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--info-color);
    color: white;
    border-radius: var(--radius-sm);
    margin-left: 6px;
    vertical-align: middle;
}

/* Group modal */
.group-info-modal {
    width: 500px;
}

.group-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.group-member:last-child {
    margin-bottom: 0;
}

.group-member .member-name {
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

.group-member .member-name:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.group-member .remove-btn {
    padding: 4px 10px;
    font-size: 11px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.group-member .remove-btn:hover {
    background: #dc2626;
}

.no-members {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

/* Alert bells */
.alert-bells {
    display: flex;
    gap: 4px;
    margin-left: auto;
    margin-right: 10px;
}

.alert-bell-wrapper {
    position: relative;
}

.alert-bell {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
}

.alert-bell .bell-icon {
    font-size: 12px;
    filter: grayscale(1);
    opacity: 0.5;
}

.alert-bell .bell-label {
    color: var(--text-muted);
    font-weight: 500;
}

.alert-bell:hover {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

/* Active state - enabled alert */
.alert-bell.active .bell-icon {
    filter: none;
    opacity: 1;
}

.alert-bell.active .bell-label {
    color: var(--text-secondary);
}

.alert-bell.active {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
}

/* Fired state - alert has been triggered */
.alert-bell.fired {
    border-color: var(--danger-color);
    background: rgba(239, 68, 68, 0.15);
    animation: alert-pulse 1s ease-in-out infinite;
}

.alert-bell.fired .bell-icon {
    filter: none;
    opacity: 1;
}

.alert-bell.fired .bell-label {
    color: var(--danger-color);
    font-weight: 600;
}

@keyframes alert-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Disabled state */
.alert-bell.disabled {
    opacity: 0.5;
}

/* Alert popover */
.alert-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 180px;
}

.alert-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--border-color);
}

.alert-popover::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--bg-secondary);
}

.popover-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.popover-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.popover-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.popover-threshold {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.popover-threshold input {
    width: 50px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
}

.popover-threshold input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Compact mode alert bells */
main.compact .alert-bells {
    gap: 2px;
}

main.compact .alert-bell {
    padding: 1px 3px;
    font-size: 9px;
}

main.compact .alert-bell .bell-icon {
    font-size: 9px;
}

main.compact .gpu-card {
    padding: 6px 8px;
}

main.compact .gpu-header {
    margin-bottom: 6px;
}

main.compact .gpu-stats {
    gap: 6px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .alert-bells {
        gap: 2px;
    }

    .alert-bell .bell-label {
        display: none;
    }

    .alert-bell {
        padding: 4px 6px;
    }

    .alert-popover {
        position: fixed;
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
    }

    .alert-popover::before,
    .alert-popover::after {
        display: none;
    }
}

/* Global Search */
.global-search {
    position: relative;
    display: flex;
    align-items: center;
}

.global-search-input {
    width: 300px;
    padding: 10px 36px 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
}

.global-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255,255,255,0.12);
    width: 350px;
}

.global-search-input::placeholder {
    color: rgba(255,255,255,0.5);
}

[data-theme="light"] .global-search-input {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.15);
    color: var(--text-primary);
}

[data-theme="light"] .global-search-input::placeholder {
    color: rgba(0,0,0,0.4);
}

.clear-search {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.clear-search:hover {
    color: var(--text-primary);
}

/* Docker Panel */
.docker-panel {
    grid-column: 1 / -1;
}

.docker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.docker-table th,
.docker-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.docker-table th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.docker-table .image-name {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.docker-table .ports {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-muted);
}

.docker-table .status-running {
    color: var(--success-color);
}

.docker-table .status-exited,
.docker-table .status-stopped {
    color: var(--danger-color);
}

.docker-table .status-paused {
    color: var(--warning-color);
}

.docker-table .status-created,
.docker-table .status-restarting {
    color: var(--info-color);
}

/* Docker status icons */
.docker-table .status-icon-col {
    width: 30px;
    padding: 0 !important;
}

.docker-table .status-icon-cell {
    width: 30px;
    text-align: center;
    padding: 10px 8px !important;
}

.status-icon {
    font-size: 18px;
    line-height: 1;
}

.status-icon.running {
    color: var(--success-color);
}

.status-icon.stopped {
    color: var(--danger-color);
}

.status-icon.error {
    color: var(--warning-color);
    font-size: 12px;
}

/* Docker Detail Modal */
.docker-detail-modal {
    max-width: 900px;
}

.ports-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.port-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 12px;
}

.port-item .host-port {
    color: var(--accent-color);
}

.port-item .arrow {
    color: var(--text-muted);
}

.port-item .container-port {
    color: var(--success-color);
}

.mount-type {
    color: var(--info-color);
    font-size: 10px;
    text-transform: uppercase;
    width: 60px;
}

.mount-source,
.mount-dest {
    font-size: 12px;
}

.mount-source code,
.mount-dest code {
    word-break: break-all;
}

.mount-arrow {
    color: var(--text-muted);
    text-align: center;
    width: 30px;
}

.mount-mode {
    color: var(--warning-color);
    font-size: 10px;
    text-transform: uppercase;
    width: 40px;
}

.env-list {
    max-height: 200px;
    overflow-y: auto;
    font-size: 11px;
}

.env-item {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
}

.env-item code {
    word-break: break-all;
}

/* Docker Labels */
.compose-info {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 3px solid var(--accent-color);
}

.compose-info .detail-row {
    margin-bottom: 6px;
}

.compose-info .detail-row:last-child {
    margin-bottom: 0;
}

.compose-info strong {
    color: var(--accent-color);
}

.labels-list {
    max-height: 200px;
    overflow-y: auto;
    font-size: 11px;
}

.label-item {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    align-items: flex-start;
}

.label-key {
    color: var(--text-muted);
    min-width: 200px;
    flex-shrink: 0;
    word-break: break-all;
}

.label-value code {
    word-break: break-all;
    font-size: 11px;
}

.btn-success {
    padding: 12px 20px;
    background: var(--success-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background: #16a34a;
    transform: translateY(-1px);
}

.btn-secondary {
    padding: 12px 20px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.btn-info {
    padding: 12px 20px;
    background: #0ea5e9;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-info:hover {
    background: #0284c7;
    transform: translateY(-1px);
}

.action-btn.success {
    background: var(--success-color);
    color: #fff;
}

.action-btn.success:hover {
    background: #16a34a;
}

.action-btn.warning {
    background: var(--warning-color);
    color: #000;
}

.action-btn.warning:hover {
    background: #d97706;
}

/* Maximize Panel Functionality */
.maximize-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.maximize-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.maximize-btn .icon-svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* SVG Icons */
.icon-svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.icon-svg-sm {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* Dark theme (default) - white icons */
.icon-svg,
.icon-svg-sm {
    filter: invert(1) brightness(2);
}

/* Light theme - dark icons */
[data-theme="light"] .icon-svg,
[data-theme="light"] .icon-svg-sm {
    filter: invert(0) brightness(0.3);
}

/* Settings menu items - icons should match text */
.settings-item .icon-svg-sm {
    width: 16px;
    height: 16px;
}

/* Pause button active state - dark icon on yellow background */
.pause-btn.active .icon-svg-sm {
    filter: invert(0) brightness(0);
}

/* Header pause all button active - keep white */
.header-right button.active .icon-svg {
    filter: invert(1) brightness(2);
}

/* Refresh button icons */
.refresh-btn .icon-svg-sm {
    width: 14px;
    height: 14px;
}

.refresh-btn-sm .icon-svg-sm {
    width: 12px;
    height: 12px;
}

/* Main in maximized mode */
main.maximized {
    padding: 0;
    gap: 0;
}

main.maximized .row {
    display: contents;
}

/* Panel maximized state */
.panel-maximized {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    border-radius: 0;
    max-height: 100vh;
    overflow: auto;
}

.panel-maximized .panel-content {
    max-height: calc(100vh - 60px);
    overflow: auto;
}

/* Ensure tables in maximized panels expand properly */
.panel-maximized .process-table-container,
.panel-maximized .socket-table-container,
.panel-maximized .firewall-rules {
    max-height: calc(100vh - 120px);
}

/* Make the maximize button more visible when panel is maximized */
.panel-maximized .maximize-btn {
    background: var(--warning-color);
    color: #000;
    border-color: var(--warning-color);
}

/* Docker Extended Features */

/* Refresh button inline with h3 */
.refresh-btn {
    display: inline-block;
    padding: 4px 10px;
    margin-left: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
}

.refresh-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Logs info text */
.logs-info {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 8px;
}

/* Logs container */
.logs-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logs-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}

.load-more-btn {
    align-self: center;
    padding: 8px 16px;
    font-size: 13px;
}

/* No data message */
.no-data {
    color: var(--text-muted);
    font-style: italic;
    padding: 10px 0;
}

/* Health check status colors */
.health-healthy {
    color: var(--success-color);
    font-weight: 500;
}

.health-unhealthy {
    color: var(--danger-color);
    font-weight: 500;
}

.health-starting {
    color: var(--warning-color);
    font-weight: 500;
}

.health-none {
    color: var(--text-muted);
}

/* Inspect modal - needs higher z-index to appear above container detail */
.inspect-overlay {
    z-index: 1100;
}

.inspect-modal {
    max-width: 900px;
    max-height: 85vh;
}

.inspect-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.4;
    max-height: 70vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}

/* Inspect button row */
.inspect-btn-row {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
}

/* Container paused state */
.status-paused {
    color: var(--info-color);
}

/* Services Panel */
.services-panel {
    grid-column: 1 / -1;
    flex: 1;
    width: 100%;
}

.services-row {
    display: flex;
    gap: 20px;
}

.service-manager-badge {
    font-size: 11px;
    background: var(--bg-tertiary);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    margin-left: 10px;
}

.service-table {
    width: 100%;
    border-collapse: collapse;
}

.service-table th,
.service-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.service-table th {
    background: var(--bg-tertiary);
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.service-table th:hover {
    background: var(--bg-hover);
}

.service-table th.sorted {
    color: var(--accent-color);
}

.service-table .service-desc {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
}

.service-table .status-active,
.service-table .status-running {
    color: var(--success-color);
}

.service-table .status-inactive,
.service-table .status-stopped {
    color: var(--text-muted);
}

.service-table .status-failed {
    color: var(--danger-color);
}

.filter-input-sm {
    width: 150px;
}

/* Service Detail Modal */
.service-detail-modal {
    max-width: 900px;
}

.service-detail-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Service Header Card */
.service-header-card {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
}

.service-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.service-status-indicator .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 8px currentColor;
}

.service-status-indicator.status-running .status-dot,
.service-status-indicator.status-active .status-dot {
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color);
}

.service-status-indicator.status-stopped .status-dot,
.service-status-indicator.status-inactive .status-dot,
.service-status-indicator.status-dead .status-dot {
    background: var(--text-muted);
    box-shadow: none;
}

.service-status-indicator.status-failed .status-dot {
    background: var(--danger-color);
    box-shadow: 0 0 8px var(--danger-color);
}

.service-status-indicator .status-text {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.service-status-indicator.status-running .status-text,
.service-status-indicator.status-active .status-text {
    color: var(--success-color);
}

.service-status-indicator.status-failed .status-text {
    color: var(--danger-color);
}

.service-status-indicator .status-sub {
    color: var(--text-muted);
    font-size: 13px;
}

.service-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.service-enabled {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

.service-enabled.enabled {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success-color);
}

.service-type {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    background: var(--bg-hover);
    color: var(--text-muted);
}

.service-description {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.service-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.btn-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action .action-icon {
    font-size: 10px;
}

.btn-action.btn-stop {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

.btn-action.btn-stop:hover {
    background: rgba(239, 68, 68, 0.25);
}

.btn-action.btn-start {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success-color);
}

.btn-action.btn-start:hover {
    background: rgba(34, 197, 94, 0.25);
}

.btn-action.btn-restart {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-color);
}

.btn-action.btn-restart:hover {
    background: rgba(59, 130, 246, 0.25);
}

.btn-action.btn-enable,
.btn-action.btn-disable {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.btn-action.btn-enable:hover,
.btn-action.btn-disable:hover {
    background: var(--bg-tertiary);
}

/* Service Cards Grid */
.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.service-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.service-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-color);
}

.service-card .card-header .card-icon {
    font-size: 14px;
    opacity: 0.7;
}

.service-card .card-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.service-card .card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-card .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.service-card .info-item.full {
    flex-direction: column;
    gap: 4px;
}

.service-card .info-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.service-card .info-value {
    font-size: 13px;
    color: var(--text-primary);
    text-align: right;
}

.service-card .info-item.full .info-value {
    text-align: left;
}

.service-card .info-code {
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    background: var(--bg-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    word-break: break-all;
    display: block;
}

/* Service Sections */
.service-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
}

.service-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.service-section .section-icon {
    opacity: 0.6;
}

.service-section .refresh-btn-sm {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.service-section .refresh-btn-sm:hover {
    background: var(--bg-tertiary);
}

.service-section .logs-info {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: normal;
}

/* Dependencies */
.deps-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dep-tag {
    padding: 5px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 12px;
    color: var(--accent-color);
    cursor: pointer;
    transition: all 0.2s;
}

.dep-tag:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Environment Grid */
.env-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.env-grid .env-item {
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    background: var(--bg-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    word-break: break-all;
}

/* Unit File */
.unit-file-path {
    margin-bottom: 10px;
}

.unit-file-path code {
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    color: var(--accent-color);
}

.unit-content pre {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.6;
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
    margin: 0;
}

/* Logs Section */
.logs-placeholder {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.service-logs-section .logs-container {
    position: relative;
}

.service-logs-section .logs-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.5;
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
    margin: 0;
}

.btn-load-more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-load-more:hover {
    background: var(--bg-tertiary);
}

.btn-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Crontab section */
.crontab-content pre {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}

.crontab-error {
    color: var(--warning-color);
    padding: 10px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crontab-error .error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--warning-color);
    color: #000;
    border-radius: 50%;
    font-weight: bold;
    font-size: 12px;
}

/* Sessions panel */
.sessions-panel {
    flex: 1;
}

.sessions-row {
    display: flex;
    gap: 20px;
}

.sessions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sessions-table th,
.sessions-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.sessions-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.sessions-table tr:hover {
    background: var(--bg-hover);
}

.sessions-table td.no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

/* Users List Modal */
.users-list-modal {
    max-width: 1000px;
}

.users-list-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.users-filter-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    margin-right: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    transition: all 0.2s;
}

.toggle-label:hover {
    background: var(--bg-hover);
}

.toggle-label:has(input:checked) {
    background: var(--accent-color);
    color: white;
}

.toggle-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    cursor: pointer;
    margin: 0;
}

.users-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.users-list-table th,
.users-list-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.users-list-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

.users-list-table tbody tr {
    cursor: pointer;
}

.users-list-table tr:hover {
    background: var(--bg-hover);
}

.users-list-table .path-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-list-table .path-cell code {
    font-size: 11px;
}

.users-list-table td.no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

.users-list-modal .modal-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Mobile responsive - horizontal scroll for wide tables */
@media (max-width: 768px) {
    /* Allow horizontal scroll on wide tables */
    .processes-panel .panel-content,
    .services-panel .panel-content,
    .sockets-panel .panel-content,
    .users-list-modal .modal-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure tables don't shrink too much */
    .process-table,
    .service-table,
    .socket-table,
    .users-list-table {
        min-width: 600px;
    }
}