/* ===================================================================
   INTERACTIVE SERVICE PAGE STYLES - REFACTORED
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- CSS CUSTOM PROPERTIES (THEME VARIABLES) --- */
:root {
    /* Main Backgrounds */
    --color-bg-body: #f4f7fa;
    --color-bg-card: #ffffff;
    --color-bg-nav: rgba(255, 255, 255, 0.8);
    --color-bg-code: #1e293b;

    /* Text and Lines */
    --color-text-primary: #1a2c42;
    --color-text-secondary: #6b7280;
    --color-border-default: #e2e8f0;
    --color-header-border: #d1d5db;
    --color-link-blue: #0052cc;
    --color-heading-primary: #002d72;
    --color-control-hover: #ede9fe;            /* violet-100, distinct from blue */
    --color-control-hover-text: #1f2937;       /* slate-800 for readable text */
}

.dark {
    /* Main Backgrounds */
    --color-bg-body: #111827;
    --color-bg-card: #1f2937;
    --color-bg-nav: rgba(31, 41, 55, 0.9);
    --color-bg-code: #0f172a;

    /* Text and Lines */
    --color-text-primary: #f3f4f6;
    --color-text-secondary: #9ca3af;
    --color-border-default: #374151;
    --color-header-border: #374151;
    --color-link-blue: #0052cc;
    --color-heading-primary: #bfdbfe;
    --color-control-hover: #4c1d95;            /* violet-900 */
    --color-control-hover-text: #f9fafb;       /* near-white text */
}

/* --- BASE STYLES --- */
html {
    scrollbar-gutter: stable both-edges;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-body);
    color: var(--color-text-primary);
    overflow-y: scroll;
}

/* Layout optimization */
.max-w-6xl.mx-auto {
    contain: layout paint;
}

/* --- HEADER STYLES --- */
header {
    border-bottom-color: var(--color-header-border);
}

/* Logo theme switching */
header img.logo-light { display: inline-block; }
header img.logo-dark { display: none; }
.dark header img.logo-light { display: none; }
.dark header img.logo-dark { display: inline-block; }

header img.logo-light,
header img.logo-dark {
    height: 2.5rem;
    width: 10rem;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    header img.logo-light,
    header img.logo-dark {
        height: 3rem;
        width: 12rem;
    }
}

/* --- NAVIGATION STYLES --- */
nav {
    background-color: var(--color-bg-nav);
    backdrop-filter: blur(8px);
    contain: paint;
}

.nav-item {
    transition: all 0.2s ease-in-out;
}

.nav-item.active {
    background-color: var(--color-link-blue);
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Control action buttons (shared) */
nav .control-btn {
    color: #374151;                 /* slate-700 */
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

nav .control-btn:hover {
    background-color: transparent;
    color: var(--color-link-blue);
}

/* Make icons/labels follow button color */
nav .control-btn i,
nav .control-btn span,
nav .control-btn svg {
    color: inherit;
}

/* Dark mode control buttons */
.dark nav .control-btn {
    color: #e5e7eb;                 /* gray-200 */
    background-color: transparent;
}
.dark nav .control-btn:hover {
    background-color: transparent;
    color: var(--color-link-blue);
}

/* Navigation action buttons - light mode */
nav #download-pdf,
nav #theme-toggle {
    color: #374151;
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
}

nav #download-pdf i,
nav #download-pdf span,
nav #theme-toggle i,
nav #download-pdf svg,
nav #theme-toggle svg {
    color: inherit;
}

nav #download-pdf:hover,
nav #theme-toggle:hover {
    background-color: transparent;
    color: var(--color-link-blue);
}

/* Navigation action buttons - dark mode */
.dark nav #download-pdf,
.dark nav #theme-toggle {
    color: #e5e7eb;
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
}

.dark nav #download-pdf i,
.dark nav #download-pdf span,
.dark nav #theme-toggle i,
.dark nav #download-pdf svg,
.dark nav #theme-toggle svg {
    color: inherit;
}

.dark nav #download-pdf:hover,
.dark nav #theme-toggle:hover {
    background-color: transparent;
    color: var(--color-link-blue);
}

.nav-item:hover:not(.active) {
    color: var(--color-link-blue);
}

nav .control-btn:hover {
    color: var(--color-link-blue);
}

.dark nav .control-btn:hover {
    color: var(--color-link-blue);
}

/* --- CARD AND CONTENT STYLES --- */
.content-card {
    background-color: var(--color-bg-card);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border-default);
}

/* Scope default border color to cards to avoid overriding accent borders elsewhere */
.content-card .border {
    border-color: var(--color-border-default);
}

/* Dark mode card overrides */
.dark .bg-white { background-color: var(--color-bg-card); }
.dark .bg-gray-50 { background-color: #1f2937; }
.dark .bg-slate-50 { background-color: #1f2937; }
.dark .border-gray-200,
.dark .border-slate-200 { border-color: var(--color-border-default); }

/* --- TYPOGRAPHY STYLES --- */
/* Primary headings */
.text-\[\#002d72\] {
    color: var(--color-heading-primary);
}

/* Secondary/descriptive text */
.text-gray-600 {
    color: var(--color-text-secondary);
}

/* Link/icon color */
.text-\[\#0052cc\] {
    color: var(--color-link-blue);
}

/* Dark mode typography overrides - consolidated */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: var(--color-heading-primary);
}

.dark p, .dark li, .dark span, .dark div {
    color: inherit;
}

/* Consolidated dark mode text color overrides */
.dark .text-gray-500,
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-slate-500,
.dark .text-slate-700 {
    color: var(--color-text-secondary);
}

.dark .text-slate-900,
.dark .font-bold.text-slate-900 {
    color: var(--color-text-primary);
}

.dark .text-gray-800,
.dark .text-gray-900 {
    color: var(--color-text-primary);
}

.dark .text-sm.text-slate-500 {
    color: var(--color-text-secondary);
}

/* Status and accent colors */
.dark .text-blue-700, .dark .text-blue-800 { color: #93c5fd; }
.dark .text-green-700, .dark .text-green-800 { color: #86efac; }
.dark .text-yellow-600, .dark .text-yellow-700, .dark .text-yellow-800 { color: #fde68a; }
.dark .text-red-700, .dark .text-red-800 { color: #fca5a5; }
.dark .text-emerald-600 { color: #34d399; }
.dark .text-emerald-700 { color: #86efac; }
.dark .text-purple-700, .dark .text-purple-800 { color: #c084fc; }
.dark .text-sky-700, .dark .text-sky-800 { color: #7dd3fc; }

/* --- TABLE STYLES --- */
.table-cell {
    padding: 1rem;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-default);
}

/* Consolidated table dark mode styles (scoped to content-card tables) */
.dark .content-card table thead {
    background-color: #1f2937;
}
.dark .content-card table thead th {
    color: var(--color-text-secondary);
    text-transform: uppercase;
}
.dark .content-card table tbody tr {
    background-color: var(--color-bg-card);
}
.dark .content-card table tbody tr:nth-child(even) {
    background-color: #1f2937;
}
.dark .content-card table tbody tr:nth-child(odd) {
    background-color: #111827;
}

.dark .content-card table { color: inherit; }
.dark .content-card .table-cell { border-bottom-color: var(--color-border-default); }

.dark tr.bg-white { background-color: var(--color-bg-card); }
.dark tr.bg-slate-50 { background-color: #1f2937; }

/* --- FILTER AND BUTTON STYLES --- */
.dark .filter-btn.bg-slate-200 {
    background-color: #374151;
    color: var(--color-text-primary);
}

.dark .filter-btn.bg-slate-200:hover {
    background-color: #4b5563;
}

/* Chart button specific styles for dark mode */
.dark #viewBeforeBtn.bg-slate-200,
.dark #viewAfterBtn.bg-slate-200 {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark #viewBeforeBtn.bg-blue-600,
.dark #viewAfterBtn.bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* --- CODE SNIPPET STYLES --- */
.code-snippet {
    background-color: #1e293b;
    color: #e2e8f0;
    font-family: monospace;
    padding: 1rem;
    border-radius: 0.5rem;
    white-space: pre-wrap;
    font-size: 0.875rem;
}

.dark .code-snippet {
    background-color: #0f172a;
    color: #e2e8f0;
    border: 1px solid var(--color-border-default);
}

/* --- STATUS AND ACCENT PANELS --- */
.status-complete { color: #10b981; }
.status-minor { color: #f59e0b; }
.status-major { color: #ef4444; }

/* Light mode accent panels */
.metric-box {
    background-color: #DBEAFE;
    border: 1px solid #93C5FD;
    color: var(--color-text-primary);
}

.metric-box-blue {
    background-color: #DBEAFE;
    border: 1px solid #93C5FD;
    color: var(--color-text-primary);
}

.metric-box-green {
    background-color: #D1FAE5;
    border: 1px solid #6EE7B7;
    color: var(--color-text-primary);
}

.metric-box-red {
    background-color: #FEE2E2;
    border: 1px solid #FCA5A5;
    color: var(--color-text-primary);
}

.recommendation-box {
    background-color: #FEF3C7;
    border-left: 5px solid #F59E0B;
}

/* Dark mode accent panels - consolidated */
.dark .metric-box {
    background-color: #1f3d61;
    border-color: #3b82f6;
    color: var(--color-text-primary);
}

.dark .metric-box-blue {
    background-color: #1e3a8a;
    border-color: #3b82f6;
}

.dark .metric-box-green {
    background-color: #064e3b;
    border-color: #34d399;
}

.dark .metric-box-red {
    background-color: #450a0a;
    border-color: #dc2626;
}

.dark .recommendation-box {
    background-color: #452a0a;
    border-left-color: #fbbf24;
    color: var(--color-text-primary);
}

/* Playbook / snippet code blocks */
.code-block {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    background-color: var(--color-bg-code);
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

.token-key { color: #93c5fd; }
.token-string { color: #86efac; }
.token-comment { color: #64748b; font-style: italic; }
.token-cmd { color: #fca5a5; }
.token-var { color: #fde047; }

.dark .code-block {
    background-color: #0f172a;
    color: #e2e8f0;
    border: 1px solid #374151;
}

.dark .token-key { color: #93c5fd; }
.dark .token-string { color: #86efac; }
.dark .token-comment { color: #9ca3af; }
.dark .token-cmd { color: #fca5a5; }
.dark .token-var { color: #fde047; }

.chart-container-roi {
    position: relative;
    width: 100%;
    height: 400px;
}

/* Colored background panels */
.dark .bg-red-50 {
    background-color: #2a1214;
}
.dark .bg-red-50.border-l-4 {
    border-left-color: #ef4444;
}

.dark .bg-blue-50 {
    background-color: #1f3d61;
}
.dark .bg-blue-50.border-l-4 {
    border-left-color: #3b82f6;
}

/* Gray badge/background overrides */
.dark .bg-gray-100 {
    background-color: #374151;
    border: 1px solid var(--color-border-default);
}

/* Indigo panels */
.dark .bg-indigo-50 {
    background-color: #1e1b4b;
}
.dark .bg-indigo-50.border-l-4 {
    border-left-color: #6366f1;
}

/* Explicit total impact card to avoid utility conflicts */
.impact-total {
    background-color: #f3e8ff; /* purple-100: distinct from blue panels */
    border-left-color: #a855f7; /* purple-500 accent for stronger contrast */
}
.dark .impact-total {
    background-color: #2e1065; /* deep purple for dark mode */
    border-left-color: #a855f7;
}

.dark .bg-green-50 {
    background-color: #0b2f23;
}
.dark .bg-emerald-50 {
    background-color: #0b2f23;
}

.dark .bg-yellow-50 {
    background-color: #3b2f05;
}

.dark .bg-purple-50 {
    background-color: #2d1b3d;
}

.dark .bg-sky-50 {
    background-color: #1e3a5f;
}

/* Border colors for accent panels */
.dark .border-red-200 { border-color: #ef4444; }
.dark .border-green-200 { border-color: #10b981; }
.dark .border-emerald-200 { border-color: #10b981; }
.dark .border-yellow-200 { border-color: #fbbf24; }
.dark .border-purple-200 { border-color: #a855f7; }
.dark .border-sky-200 { border-color: #0ea5e9; }

/* Status badge backgrounds */
.dark .bg-red-100 { background-color: #3b0b0c; }
.dark .bg-yellow-100 { background-color: #3a3005; }
.dark .bg-green-100 { background-color: #0b3928; }
.dark .bg-blue-100 { background-color: #1e3a8a; }

.dark #tab-roi input[type="number"],
.dark #tab-roi input[type="text"],
.dark #tab-roi select,
.dark #tab-roi textarea {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: var(--color-border-default);
}

.dark #tab-roi input::placeholder {
    color: #9ca3af;
}

.dark #tab-roi input[type="range"] {
    background-color: transparent;
}

/* Button background overrides for dark mode */
.dark .bg-slate-200 { background-color: #374151; }
.dark .bg-blue-600 { background-color: #2563eb; }

/* --- LIST STYLES --- */
.dark #tab-roadmap ul.list-disc,
.dark #tab-next-steps ul.list-disc {
    color: var(--color-text-secondary);
}

.dark #tab-roadmap ul.list-disc li,
.dark #tab-next-steps ul.list-disc li {
    color: inherit;
}

.dark #tab-roadmap ul.list-disc li strong,
.dark #tab-next-steps ul.list-disc li strong,
.dark #workflow strong {
    color: var(--color-text-primary);
}

.dark #tab-roadmap ul.list-disc ::marker,
.dark #tab-next-steps ul.list-disc ::marker {
    color: var(--color-text-secondary);
    opacity: 0.95;
}

.dark #tab-next-steps .text-gray-900,
.dark #tab-next-steps .text-gray-800 {
    color: var(--color-text-primary);
}

/* --- CHART STYLES --- */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    height: 30vh;
    max-height: 250px;
}

.chart-sm {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 300px;
}

@media (min-width: 768px) {
    .chart-sm { height: 350px; }
}

.chart-md {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 35vh;
    max-height: 350px;
}

.chart-lg {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 40vh;
    max-height: 450px;
}

/* Specific sizing for the radar chart visualization */
.chart-container-radar {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: 450px; 
}
/* Ensure the canvas respects the container’s height */
.chart-container-radar canvas {
    display: block;
    width: 100%;
    height: 450px;
}

/* --- SVG ARCHITECTURE DIAGRAM STYLES --- */
.architecture-diagram {
    width: 100%;
    height: 400px;
    background-color: var(--color-bg-card);
}

.architecture-diagram rect {
    stroke: #374151;
    stroke-width: 2px;
    fill: var(--color-bg-card);
    rx: 8;
}

.architecture-diagram text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    fill: var(--color-text-primary);
}

.architecture-diagram line {
    stroke: #10B981;
    stroke-width: 3px;
}

/* Light mode diagram palette */
.architecture-diagram .diagram-bg { fill: #E5E7EB; }
.architecture-diagram .diagram-text-primary {
    fill: #374151;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
}
.architecture-diagram .diagram-text-secondary {
    fill: #374151;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.architecture-diagram .diagram-text-white {
    fill: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    paint-order: stroke fill;
    stroke: rgba(0, 0, 0, 0.25);
    stroke-width: 1px;
}
.architecture-diagram .diagram-cluster { fill: #1e3a8a; }
.architecture-diagram .diagram-k10 { fill: #3b82f6; }
.architecture-diagram .diagram-app1 { fill: #f59e0b; }
.architecture-diagram .diagram-app2 { fill: #8b5cf6; }
.architecture-diagram .diagram-storage { fill: #065f46; }
.architecture-diagram .diagram-s3 { fill: #0f766e; }
.architecture-diagram .diagram-data-path {
    fill: #10B981;
    font-size: 14px;
    font-weight: 800;
}

/* Dark mode diagram palette */
.dark .architecture-diagram .diagram-bg { fill: #374151; }
.dark .architecture-diagram .diagram-text-primary { fill: #f3f4f6; }
.dark .architecture-diagram .diagram-text-secondary { fill: #d1d5db; }
.dark .architecture-diagram .diagram-text-white {
    stroke: rgba(0, 0, 0, 0.40);
}
.dark .architecture-diagram .diagram-data-path {
    fill: #34d399;
}

/* --- ANIMATIONS --- */
.kpi-value {
    transition: all 0.8s ease-out;
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Currency input prefix styling */
.currency-input { position: relative; }
.currency-input::before { content: '$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: inherit; opacity: 0.8; }
.currency-input .currency-prefix { display: none; }
.currency-input input { padding-left: 1.75rem; }

/* Custom file input styling */
input.file-input {
    appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 0.875rem;
}
input.file-input::file-selector-button {
    background-color: #2563eb;
    color: #ffffff;
    border: 0;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    margin-right: 0.75rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>");
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    background-size: 1rem 1rem;
    padding-left: 2rem;
}
input.file-input::file-selector-button:hover {
    background-color: #1d4ed8;
}
input.file-input:focus { outline: none; }
.dark input.file-input::file-selector-button {
    background-color: #2563eb;
    color: #ffffff;
}
/* removed row borders on pages list */

/* User Profile Dark Mode Overrides */
.dark #user-avatar {
    background-color: #312e81 !important; /* indigo-900 */
    color: #a5b4fc !important; /* indigo-300 */
    border-color: #374151 !important; /* gray-700 */
}
.dark #user-profile {
    border-color: #374151 !important; /* gray-700 */
}