/* Accent color overrides for Docker Dashboard */

/* Running / success accent — emerald */
:root,
:root[data-bs-theme="dark"] {
     --tblr-success: #10b981;
     --tblr-success-rgb: 16, 185, 129;
     --tblr-success-text-emphasis: #0d9468;
     --tblr-success-bg: #10b98120;
     --tblr-success-border: #10b98140;
}

:root[data-bs-theme="light"] {
     --tblr-success: #059669;
     --tblr-success-rgb: 5, 150, 105;
     --tblr-success-text-emphasis: #047857;
     --tblr-success-bg: #10b98115;
     --tblr-success-border: #10b98130;
}

/* Stopped / secondary accent — slate blue */
:root,
:root[data-bs-theme="dark"] {
     --tblr-secondary: #64748b;
     --tblr-secondary-rgb: 100, 116, 139;
     --tblr-secondary-text-emphasis: #475569;
     --tblr-secondary-bg: #64748b20;
     --tblr-secondary-border: #64748b40;
}

:root[data-bs-theme="light"] {
     --tblr-secondary: #475569;
     --tblr-secondary-rgb: 71, 85, 105;
     --tblr-secondary-text-emphasis: #334155;
     --tblr-secondary-bg: #64748b15;
     --tblr-secondary-border: #64748b30;
}

/* Restarting / danger accent — rose */
:root,
:root[data-bs-theme="dark"] {
     --tblr-danger: #f43f5e;
     --tblr-danger-rgb: 244, 63, 94;
     --tblr-danger-text-emphasis: #e11d48;
     --tblr-danger-bg: #f43f5e20;
     --tblr-danger-border: #f43f5e40;
}

:root[data-bs-theme="light"] {
     --tblr-danger: #e11d48;
     --tblr-danger-rgb: 225, 29, 72;
     --tblr-danger-text-emphasis: #be123c;
     --tblr-danger-bg: #f43f5e15;
     --tblr-danger-border: #f43f5e30;
}

/* Total stat card — cyan */
.stat-card.stat-total .stat-icon {
     color: var(--tblr-info);
}
.stat-card.stat-total .stat-value {
     color: var(--tblr-info-text-emphasis);
}

/* Running stat card — emerald */
.stat-card.stat-running .stat-icon {
     color: var(--tblr-success);
}
.stat-card.stat-running .stat-value {
     color: var(--tblr-success-text-emphasis);
}

/* Stopped stat card — slate */
.stat-card.stat-stopped .stat-icon {
     color: var(--tblr-secondary);
}
.stat-card.stat-stopped .stat-value {
     color: var(--tblr-secondary-text-emphasis);
}

/* Restarting stat card — rose */
.stat-card.stat-restarting .stat-icon {
     color: var(--tblr-danger);
}
.stat-card.stat-restarting .stat-value {
     color: var(--tblr-danger-text-emphasis);
}

/* Stat cards layout */
.stat-card {
     border: 1px solid var(--tblr-border-color);
     transition: transform 0.15s ease;
}
.stat-card:hover {
     transform: translateY(-2px);
}

.stat-icon {
     margin-bottom: 4px;
     opacity: 0.7;
}

.stat-value {
     font-size: 1.8rem;
     font-weight: 700;
     line-height: 1.2;
}

.stat-label {
     font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--tblr-muted);
}

/* Navbar logo */
.navbar-logo {
     margin-right: 0.5em;
     vertical-align: middle;
}

/* Status dot indicators */
.status-dot-wrapper {
     display: inline-flex;
     align-items: center;
     gap: 0.5em;
     font-size: 0.85rem;
     font-weight: 500;
}

.status-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
     box-shadow: 0 0 6px currentColor;
}

.status-dot.running {
     background: var(--tblr-success);
     color: var(--tblr-success);
}

.status-dot.restarting {
     background: var(--tblr-danger);
     color: var(--tblr-danger);
     animation: pulse-dot 1.5s ease-in-out infinite;
}

.status-dot.stopped {
     background: var(--tblr-secondary);
     color: var(--tblr-secondary);
}

.status-dot.paused {
     background: var(--tblr-warning);
     color: var(--tblr-warning);
}

.status-dot.unknown {
     background: var(--tblr-muted);
     color: var(--tblr-muted);
}

@keyframes pulse-dot {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.4; }
}

/* Toast notification */
.toast {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1060;
     opacity: 0;
     transition: opacity 0.3s ease;
}
.toast.show {
     opacity: 1;
}

/* Table hover */
.table-vcenter tbody tr {
     transition: background-color 0.1s ease;
}

/* Responsive */
@media (max-width: 768px) {
     .stat-value {
         font-size: 1.4rem;
     }
     .stat-label {
         font-size: 0.65rem;
     }
}

/* --- Expandable container detail panel (Logs / Console / Stats / Inspect) --- */

.chevron-toggle {
     color: var(--tblr-muted);
}
.chevron-icon {
     transition: transform 0.15s ease;
}
.chevron-toggle[aria-expanded="true"] .chevron-icon {
     transform: rotate(90deg);
}

/* Detail row sits visually inside the table without hover striping */
.container-detail > td {
     background: rgba(0, 0, 0, 0.16);
}

.detail-body {
     padding: 0.75rem 1rem 1rem;
}
.detail-body .nav-tabs {
     margin-bottom: 0.75rem;
}
.detail-body .nav-link {
     display: inline-flex;
     align-items: center;
}
.tab-icon {
     opacity: 0.85;
}

.pane-controls {
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
}

/* Logs + Inspect output — terminal-style scrollable block */
.pane-output {
     max-height: 360px;
     overflow: auto;
     margin: 0;
     padding: 0.75rem;
     background: #0d1117;
     color: #c9d1d9;
     border-radius: var(--tblr-border-radius);
     font-size: 0.8rem;
     line-height: 1.45;
     white-space: pre-wrap;
     word-break: break-word;
}

/* Stats pane */
.stat-row {
     margin-bottom: 0.6rem;
}
.stat-row-head {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
}
.stat-row-label {
     font-weight: 600;
     color: var(--tblr-muted);
     text-transform: uppercase;
     letter-spacing: 0.4px;
     font-size: 0.72rem;
}
.stat-row-value {
     font-variant-numeric: tabular-nums;
     font-size: 0.85rem;
}

/* Console (xterm.js) host */
.term-host {
     height: 360px;
     background: #0d1117;
     border-radius: var(--tblr-border-radius);
     padding: 6px 8px;
     overflow: hidden;
}

/* Port badges — one outlined badge per opened port */
.port-badges {
     display: inline-flex;
     flex-wrap: wrap;
     gap: 4px;
}
.port-badges .badge {
     font-variant-numeric: tabular-nums;
     font-weight: 500;
}

/* Row of mini action icon buttons */
.action-btns {
     display: inline-flex;
     flex-wrap: nowrap;
     gap: 2px;
}