/* Dark Theme Styling for ISP Analytics & Service Design Platform */
:root {
    --bg-dark: #0f172a;
    --card-bg: #1e293b;
    --table-bg: #243244;
    --table-header-bg: #1a2536;
    --card-border: #334155;
    --accent-blue: #38bdf8;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;
    --accent-indigo: #818cf8;
    --text-primary: #f8fafc;
    --text-muted: #cbd5e1;
    --text-label-custom: #788495;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    padding-bottom: 3rem;
}

/* Universal Light Text Overrides */
.text-muted {
    color: #cbd5e1 !important;
}

.text-light-custom {
    color: #cbd5e1 !important;
    font-weight: 400 !important;
}

/* Specific Label Color #788495 */
.fup-card-label,
.col-id,
th.col-id,
td.col-id {
    color: var(--text-label-custom) !important;
}

/* Bootstrap Dark Class Override: #212529 -> #1E293B */
.bg-dark,
[class*="bg-dark"] {
    background-color: #1E293B !important;
}

/* Glassmorphism Navbar */
.navbar-custom {
    background-color: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-border);
}

/* Compact Metric Cards for 5-in-one-row layout */
.metric-card {
    background: linear-gradient(145deg, #1e293b, #15202e);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.metric-card .icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* Explicit Bright Colored Icon Containers for Metric Cards */
.icon-box-active { background-color: rgba(56, 189, 248, 0.2); color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.4); }
.icon-box-traffic { background-color: rgba(16, 185, 129, 0.2); color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.4); }
.icon-box-revenue { background-color: rgba(245, 158, 11, 0.2); color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.4); }
.icon-box-avg { background-color: rgba(129, 140, 248, 0.2); color: #818cf8 !important; border: 1px solid rgba(129, 140, 248, 0.4); }
.icon-box-yield { background-color: rgba(244, 63, 94, 0.2); color: #f43f5e !important; border: 1px solid rgba(244, 63, 94, 0.4); }

.metric-card .metric-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric-card .metric-label {
    font-size: 0.78rem;
    color: #e2e8f0 !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dashboard Sections */
.section-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

/* Custom Dark Tables with #243244 Background */
.table-custom {
    color: var(--text-primary);
    background-color: var(--table-bg);
    border-color: var(--card-border);
    border-radius: 8px;
    overflow: hidden;
}

.table-custom th {
    background-color: var(--table-header-bg) !important;
    color: var(--accent-blue);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-bottom: 2px solid var(--card-border);
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.table-custom th:hover {
    background-color: #26364a !important;
    color: #ffffff;
}

.table-custom tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.table-custom td {
    background-color: var(--table-bg) !important;
    border-bottom: 1px solid var(--card-border);
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.table-custom tbody tr:hover td {
    background-color: #2c3e54 !important;
}

/* Persistent Click-to-Highlight Row Styling (Sleek Cyan Accent) */
.table-custom tbody tr.row-highlighted td {
    background-color: #1a4968 !important; /* Rich Cyan-Teal Tint */
    color: #ffffff !important;
    font-weight: 500;
    border-top: 1px solid #38bdf8 !important;
    border-bottom: 1px solid #38bdf8 !important;
}

.table-custom tbody tr.row-highlighted td:first-child {
    border-left: 4px solid #38bdf8 !important; /* Cyan Left Accent Bar */
}

.table-custom tbody tr.row-highlighted td strong {
    color: #ffffff !important;
}

.table-custom tbody tr.row-highlighted td.col-id {
    color: #38bdf8 !important;
    font-weight: bold;
}

.table-custom tbody tr.row-highlighted td .text-info {
    color: #7dd3fc !important; /* Brighter Cyan Accent */
}

/* Sort Indicator Icons */
.sort-icon {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    opacity: 0.6;
}

th:hover .sort-icon {
    opacity: 1.0;
}

/* Badge Styles */
.badge-custom {
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
}

.badge-risk-high { background-color: rgba(244, 63, 94, 0.2); color: var(--accent-rose); border: 1px solid var(--accent-rose); }
.badge-risk-medium { background-color: rgba(245, 158, 11, 0.2); color: var(--accent-amber); border: 1px solid var(--accent-amber); }
.badge-risk-low { background-color: rgba(16, 185, 129, 0.2); color: var(--accent-emerald); border: 1px solid var(--accent-emerald); }

/* Universal Badge Color Fixes */
.badge.bg-secondary {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border: 1px solid #475569;
}

.badge.bg-info,
.badge.text-dark {
    background-color: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.5);
}

.badge.bg-warning {
    background-color: rgba(245, 158, 11, 0.25) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.badge.bg-danger {
    background-color: rgba(244, 63, 94, 0.25) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.5);
}

.badge.bg-success {
    background-color: rgba(16, 185, 129, 0.25) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.5);
}

.badge.bg-primary {
    background-color: rgba(129, 140, 248, 0.25) !important;
    color: #818cf8 !important;
    border: 1px solid rgba(129, 140, 248, 0.5);
}

/* FUP Slider Control (Light Cyan Track & Glowing Cyan Thumb) */
.fup-slider {
    background-color: rgba(56, 189, 248, 0.25) !important;
    border-radius: 6px;
    height: 10px;
    outline: none;
    accent-color: #38bdf8;
}

.fup-slider::-webkit-slider-runnable-track {
    background-color: rgba(56, 189, 248, 0.35) !important;
    height: 10px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.5);
}

.fup-slider::-webkit-slider-thumb {
    background-color: #38bdf8 !important;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
    height: 22px;
    width: 22px;
    border-radius: 50%;
    margin-top: -6px;
    cursor: pointer;
}

.fup-slider::-moz-range-track {
    background-color: rgba(56, 189, 248, 0.35) !important;
    height: 10px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.5);
}

.fup-slider::-moz-range-thumb {
    background-color: #38bdf8 !important;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
    height: 22px;
    width: 22px;
    border-radius: 50%;
    cursor: pointer;
}

.preset-btn {
    border: 1px solid var(--card-border);
    background-color: #1E293B;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.preset-btn:hover, .preset-btn.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #0f172a !important;
    font-weight: 700;
}

/* Recommendation Cards */
.recommendation-card {
    border-left: 4px solid var(--accent-blue);
    background-color: #15202e;
    border-radius: 8px;
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.recommendation-card.priority-High { border-left-color: var(--accent-rose); }
.recommendation-card.priority-Medium { border-left-color: var(--accent-amber); }
.recommendation-card.priority-Low { border-left-color: var(--accent-emerald); }