/* Styles spécifiques à la page des détails */

/* ===== VARIABLES (au cas où les variables globales ne fonctionnent pas) ===== */
:root {
    --bg-darker: #1a1a1b;
    --bg-card: #2d2d2f;
    --bg-card-hover: #3d3d40;
    --border-color: #444;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --success-color: #00cc66;
    --danger-color: #ff6b6b;
    --info-color: #6ea8fe;
    --primary-color: #0d6efd;
    --primary-light: #8bb9fe;
}

/* ===== FOND DE LA PAGE ===== */
body {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
}

/* ===== CARDS PRINCIPALES ===== */
.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-header {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* ===== TABLEAUX ===== */
.table {
    color: var(--text-primary) !important;
}

.table th,
.table td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.table .text-muted {
    color: var(--text-secondary) !important;
}

.table a {
    color: var(--info-color) !important;
    text-decoration: none;
}

.table a:hover {
    color: var(--primary-light) !important;
    text-decoration: underline;
}

/* ===== BADGES ===== */
.badge.bg-secondary {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

.badge.bg-info {
    background-color: #1a3a4a !important;
    color: var(--text-primary) !important;
}

.badge.bg-success {
    background-color: #198754 !important;
}

/* ===== BG-LIGHT (description) ===== */
.bg-light {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

.bg-light .text-muted {
    color: var(--text-secondary) !important;
}

/* ===== UPTIME CARDS ===== */
.uptime-card {
    background: var(--bg-card) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    padding: 20px !important;
    height: 100% !important;
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

.uptime-card h6 {
    color: var(--text-secondary) !important;
    margin-bottom: 10px !important;
}

.uptime-value {
    color: var(--primary-color) !important;
    font-size: 2.5rem !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

/* Dernier statut garde sa taille réduite */
.uptime-card:nth-child(3) .uptime-value {
    font-size: 1.8rem !important;
}

.uptime-card .text-muted {
    color: var(--text-secondary) !important;
    margin-top: auto !important;
}

.uptime-card .text-success {
    color: var(--success-color) !important;
}

.uptime-card .text-info {
    color: var(--info-color) !important;
}

/* ===== STATUS INDICATOR ===== */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-indicator.bg-success {
    background-color: var(--success-color) !important;
}

.status-indicator.bg-danger {
    background-color: var(--danger-color) !important;
}

/* ===== HISTORY ITEMS ===== */
.history-item {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-left: 3px solid transparent;
    transition: background-color 0.2s;
}

.history-item:hover {
    background-color: var(--bg-card-hover) !important;
}

.history-item .text-muted {
    color: var(--text-secondary) !important;
}

.history-item.up {
    border-left-color: var(--success-color) !important;
}

.history-item.down {
    border-left-color: var(--danger-color) !important;
}

/* ===== CHARTS ===== */
.chart-container {
    margin-bottom: 20px;
}

.chart-card {
    height: 100%;
    background-color: var(--bg-card) !important;
}

.chart-card .card-header {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 8px !important;
}

.chart-card .card-body {
    background-color: var(--bg-card) !important;
    padding: 10px !important;
}

canvas {
    max-height: 150px;
    width: 100% !important;
}

/* ===== ALERT INFO ===== */
.alert-info {
    background-color: #1a3a4a !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
}

/* ===== LINKS ===== */
a {
    color: var(--info-color) !important;
    text-decoration: none;
}

a:hover {
    color: var(--primary-light) !important;
    text-decoration: underline;
}

/* ===== BOUTONS ===== */
.btn-outline-primary {
    color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-light) !important;
    color: #000000 !important;
}

.btn-outline-warning {
    color: #ffda6a !important;
    border-color: #ffda6a !important;
}

.btn-outline-warning:hover {
    background-color: #ffda6a !important;
    color: #000000 !important;
}

.btn-outline-success {
    color: #75b798 !important;
    border-color: #75b798 !important;
}

.btn-outline-success:hover {
    background-color: #75b798 !important;
    color: #000000 !important;
}

.btn-outline-danger {
    color: #ea868f !important;
    border-color: #ea868f !important;
}

.btn-outline-danger:hover {
    background-color: #ea868f !important;
    color: #000000 !important;
}

/* ===== BREADCRUMB ===== */
.breadcrumb-item {
    color: var(--text-secondary) !important;
}

.breadcrumb-item a {
    color: var(--info-color) !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary) !important;
}

/* ===== REFRESH INDICATOR ===== */
.refresh-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 1000;
    border: 1px solid var(--border-color);
}

.refresh-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== FIX POUR LES BADGES ET TABLEAU ===== */

/* Badge de catégorie */
.badge.bg-secondary {
    background-color: #4d4d50 !important;
    color: white !important;
    padding: 5px 10px !important;
    font-size: 0.85rem !important;
}

/* Badge de statut (Active/Paused) */
.badge.bg-success,
.badge.bg-secondary:not(.bg-info) {
    padding: 5px 10px !important;
    font-size: 0.85rem !important;
}

.badge.bg-success {
    background-color: #198754 !important;
    color: white !important;
}

/* Badges des statuts acceptés */
.badge.bg-info {
    background-color: #0d6efd !important;
    color: white !important;
    padding: 4px 8px !important;
    margin-right: 4px !important;
}

/* Tableau d'information */
.table-borderless tr {
    background-color: transparent !important;
}

.table-borderless th {
    color: #b0b0b0 !important;
    font-weight: normal !important;
    width: 150px !important;
}

.table-borderless td {
    color: white !important;
    font-weight: bold !important;
}

.table-borderless td strong {
    color: white !important;
}

/* Ligne de description */
.bg-light.rounded {
    background-color: #3d3d40 !important;
    color: white !important;
    border: 1px solid #444 !important;
}

.bg-light.rounded i {
    color: #b0b0b0 !important;
}

.bg-light.rounded span {
    color: white !important;
}

/* URL link */
.table-borderless a {
    color: #6ea8fe !important;
    text-decoration: none !important;
}

.table-borderless a:hover {
    text-decoration: underline !important;
}

/* ===== CORRECTION RAPIDE POUR LA CARTE D'INFORMATION ===== */

.card.mb-4,
.card.mb-4 .card-header,
.card.mb-4 .card-body,
.card.mb-4 table,
.card.mb-4 table tr,
.card.mb-4 table td,
.card.mb-4 table th {
    background-color: #2d2d2f !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

.card.mb-4 .card-header.bg-primary {
    background-color: #0d6efd !important;
}

.card.mb-4 table th {
    color: #b0b0b0 !important;
}

.card.mb-4 .badge.bg-secondary {
    background-color: #3d3d40 !important;
    color: #ffffff !important;
}

.card.mb-4 .badge.bg-info {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

.card.mb-4 a {
    color: #6ea8fe !important;
}