/* --- Group and Service Logo Styling --- */
.group-logo, .service-logo {
    object-fit: contain;
    border-radius: 4px;
    background-color: #ffffff;
}

/* --- Collapsible Card Styling --- */
.service-card {
    transition: all 0.3s ease;
}

.service-header {
    cursor: pointer;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s ease;
    font-weight: 500;
}

.service-header:hover {
    background-color: rgba(0,0,0,0.03);
}

/* Active service header */
.service-header.active {
    background-color: rgba(0,0,0,0.05);
}

/* Status icons in collapsed mode */
.service-header .bi {
    font-size: 1.2rem;
}

/* Group toggle button */
.toggle-group {
    transition: transform 0.3s ease;
}

.toggle-group.collapsed {
    transform: rotate(-90deg);
}

/* --- History Bar Styling --- */
.status-history-bar {
    height: 30px;
    display: flex;
    overflow: hidden;
    border-radius: 0.25rem;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    cursor: pointer; /* Thêm cursor pointer */
    position: relative; /* Establish positioning context for tooltips */
    z-index: 1; /* Give the bar a z-index */
}
.status-history-bar .bar-segment {
    height: 100%;
    flex-grow: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    transition: filter 0.1s ease-in-out, transform 0.1s ease-in-out; /* Thêm transition */
}
.status-history-bar .bar-segment:first-child { border-left: none; }

/* Colors */
.status-history-bar .bar-up { background-color: #239a56; }
.status-history-bar .bar-degraded-1 { background-color: #5b931c; }
.status-history-bar .bar-degraded-5 { background-color: #ffc107; }
.status-history-bar .bar-degraded-10 { background-color: #fd7e14; }
.status-history-bar .bar-down { background-color: #dc3545; }
.status-history-bar .bar-pending { background-color: #adb5bd; }

/* --- Hover/Focus/Active Highlight --- */
.bar-segment-hover {
    filter: brightness(0.9); /* Làm sáng hơn */
    transform: scaleY(1.08); /* Nhô cao hơn */
    z-index: 1; /* Đảm bảo nó nổi lên trên */
    position: relative; /* Cần cho z-index */
}

/* --- Uptime Indicator Styling --- */
.uptime-indicator { align-items: center; }
.uptime-line { height: 1px; background-color: #dee2e6; margin: 0 0.5rem; flex-grow: 1; }
.uptime-percent { white-space: nowrap; }

/* --- Custom Tooltip Styling (Ví dụ) --- */
.tippy-box[data-theme~='dark'] {
    background-color: #343a40; /* Dark background */
    color: #f8f9fa; /* Light text */
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 0.875rem; /* Slightly smaller font */
}
.tippy-arrow[data-theme~='dark'] {
    color: #343a40;
}
.tippy-content[data-theme~='dark'] {
    padding: 0; /* Reset padding */
}

/* Light theme tooltip styling - new addition */
.tippy-box[data-theme~='light'] {
    background-color: #ffffff;
    color: #212529;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
}
.tippy-arrow[data-theme~='light'] {
    color: #ffffff;
}
.tippy-content[data-theme~='light'] {
    padding: 0;
}

/* Custom content div */
.status-tooltip {
    padding: 0.6rem 0.8rem; /* Add padding to internal div */
}
.status-tooltip .tooltip-header {
    border-bottom: 1px solid #495057; /* Darker border */
    padding-bottom: 0.35rem;
    margin-bottom: 0.45rem !important;
    font-weight: 600; /* Bold date */
}
.status-tooltip .tooltip-status {
    margin-bottom: 0.25rem; /* Space below status */
}

/* Keep dark theme as is */
.tippy-box[data-theme~='dark'] .tooltip-downtime,
.tippy-box[data-theme~='dark'] .tooltip-error {
    margin-top: 0.3rem !important;
    font-size: 0.8rem;
}
.tippy-box[data-theme~='dark'] .tooltip-downtime {
    color: #ced4da; /* Lighter gray for dark theme */
}
.tippy-box[data-theme~='dark'] .tooltip-error {
    color: #f8d7da; /* Light red for dark theme */
}

/* Add specific styles for light theme with better contrast */
.tippy-box[data-theme~='light'] .tooltip-downtime,
.tippy-box[data-theme~='light'] .tooltip-error {
    margin-top: 0.3rem !important;
    font-size: 0.8rem;
}
.tippy-box[data-theme~='light'] .tooltip-downtime {
    color: #495057; /* Darker gray for better contrast on light background */
}
.tippy-box[data-theme~='light'] .tooltip-error {
    color: #842029; /* Darker red for better contrast on light background */
}

.status-tooltip .tooltip-status .bi { /* Icon size */
    font-size: 1.1em;
    vertical-align: text-bottom; /* Align icon better */
}

/* --- System Status Badge Styling --- */
.system-status {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.system-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-weight: 500;
    font-size: 1.2rem;
}

.system-status-badge.operational {
    background-color: rgba(25, 135, 84, 0.15);
    color: #198754;
}

.system-status-badge.partial {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.system-status-badge.critical {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

/* --- Group & Service Accordion Styling --- */
.accordion-group,
.accordion-service {
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* Status-based left borders */
.border-operational {
    border-left: 4px solid #198754;
}

.border-partial {
    border-left: 4px solid #ffc107;
}

.border-critical {
    border-left: 4px solid #dc3545;
}

/* Strengthen left border styling for service accordions */
.accordion-service-item.border-operational {
  border-left: 4px solid #198754 !important; /* Force override */
}

.accordion-service-item.border-partial {
  border-left: 4px solid #ffc107 !important;
}

.accordion-service-item.border-critical {
  border-left: 4px solid #dc3545 !important;
}

/* Improve dark mode styling for accordions */
[data-bs-theme="dark"] .accordion-service-item {
  background-color: #2b3035; /* Slightly lighter than default dark bg */
  border-color: #495057;
}

[data-bs-theme="dark"] .service-detail {
  background-color: rgba(255, 255, 255, 0.05); /* Subtle light bg in dark mode */
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .service-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Accordion button styling - hide default arrow */
.accordion-button::after {
    display: none !important;
}

/* Custom status badges for accordions */
.accordion-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
}

.accordion-status.operational {
    background-color: rgba(25, 135, 84, 0.15);
    color: #198754;
}

.accordion-status.partial {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.accordion-status.critical {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

/* Improved pill-shaped status badges */
.accordion-status,
.service-status {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Solid background colors for badges */
.accordion-status.operational,
.service-status.operational {
    background-color: #198754; /* Bootstrap's success color */
    color: white;
}

.accordion-status.partial,
.service-status.partial {
    background-color: #eeba00; /* Bootstrap's warning color */
    color: #ffffff; /* Dark text for contrast on yellow */
}

.accordion-status.critical,
.service-status.critical {
    background-color: #dc3545; /* Bootstrap's danger color */
    color: white;
}

/* Fix badge icon vertical alignment */
.service-status .bi,
.accordion-status .bi {
    vertical-align: -0.125em;
}

/* Service accordion specific styling */
.service-header .service-title {
    font-size: 1rem;
    transition: font-size 0.3s;
}

.service-header.collapsed .service-title {
    font-size: 1.15rem;
}

.service-status-text {
    display: inline;
}

.service-header.collapsed .service-status-text {
    display: none;
}

/* Fix service title text overflow */
.service-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 80px); /* Adjust based on your status badge width */
    display: block;
}

/* Dynamic font sizing for long service names */
.service-title.long-text {
    font-size: 0.9rem;
}

.service-header.collapsed .service-title.long-text {
    font-size: 1rem;
}

/* Service detail content */
.service-detail {
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.01);
    flex-grow: 1;
    position: relative; /* Ensure proper stacking context */
    overflow: visible !important;
}

/* Remove default Bootstrap accordion focus styling */
.accordion-button:focus,
.accordion-button:active {
    box-shadow: none !important;
    border-color: rgba(0,0,0,.125) !important;
    outline: none !important;
}

.accordion-button:not(.collapsed) {
    color: inherit !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Make alternative focus style more subtle */
.accordion-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.15) !important;
}

/* Improve accordion animations */
.accordion-collapse {
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: height;
    overflow: visible !important; /* Allow content to overflow */
}

/* Add hardware acceleration for smoother animations */
.accordion-item {
    transform: translateZ(0);
    will-change: transform;
}

.accordion-button.collapsed,
.accordion-button:not(.collapsed) {
    transition: all 0.25s ease-out;
}

/* Service grid styling */
.service-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .service-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Make each service card self-contained */
.accordion-service-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    margin-bottom: 0;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.accordion-service-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Ensure consistent heights */
.accordion-service-item .accordion-collapse,
.accordion-service-item .accordion-collapse.show {
    height: auto;
}

/* Ensure tooltips appear above all content */
.tippy-box {
    z-index: 9999 !important;
}

[data-tippy-root] {
    position: fixed !important; /* Force tooltips to be fixed position */
    z-index: 9999 !important;
}

/* Fix tooltip positioning */
.tippy-popper {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9999 !important;
    pointer-events: none;
}

/* Fix tooltip arrow position */
.tippy-arrow {
    position: absolute;
    z-index: 9999;
}

/* Responsive table for admin */
@media (max-width: 768px) { /* Giữ nguyên CSS responsive */ }