/* style.css - Dark Mode Theme for SEOIndicator.com */

:root {
    --bs-body-bg: #1a1a1a; /* Darker background */
    --bs-body-color: #e0e0e0; /* Lighter text for readability */
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #adb5bd;
    --bs-secondary-bg: #2c2c2c;
    --bs-tertiary-color: #999;
    --bs-tertiary-bg: #232323;
    --bs-primary-rgb: 13, 110, 253; /* Bootstrap primary blue */
    --bs-link-color: #4dabf7; /* Brighter blue for links */
    --bs-link-hover-color: #74c0fc;
    --bs-border-color: #444; /* Darker borders */
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: padding-top 0.3s ease-in-out;
}

body.initial-view {
  padding-top: 0;
}
body.results-view {
  padding-top: 5rem; /* Changed from 2rem to 5rem to match index.php */
}

/* Loader Styles */
#loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Darker overlay */
  display: flex; /* Use flexbox for centering */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1050; /* Ensure it's above other content */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}
#loader-overlay.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.spinner-border {
   width: 3rem;
   height: 3rem;
}

.loader-text {
   color: #ffffff;
   font-size: 1.1rem;
   font-weight: 300;
   text-align: center;
   margin-top: 1rem;
}

/* Results Container Animation */
.overall-score-container, 
.result-container {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Changed from 1s to 0.5s */
  margin-bottom: 20px;
}

body.initial-view .overall-score-container,
body.initial-view .result-container {
  display: none !important; 
}

body.initial-view .justify-content-center {
    padding-bottom: 100px;
}

/* When results view is active AND content is loaded/animated in */
body.results-view.content-loaded .overall-score-container,
body.results-view.content-loaded .result-container {
  opacity: 1;
  transform: translateY(0);
  display: block; /* Ensure it takes space for animation */
}
/* To initially hide them in results-view before JS adds content-loaded */
body.results-view .overall-score-container,
body.results-view .result-container {
  display: none; 
}

/* Common table cell styling */
td, th { 
  vertical-align: middle; 
}
/* Ensure this rule is specific enough if other td:nth-child(3) exist or use a class */
.result-container td:nth-child(3) { /* Made more specific to result-container */
  word-break: break-word; 
  max-width: 400px; 
} 

.overall-score-container h2 { 
  font-weight: 300; 
}

/* Customizations from user request */

/* Make the input border color */
.form-control {
  background-color: #2c2c2c;
  color: var(--bs-body-color);
  border: 1px solid #444;
}

.form-control:focus {
  background-color: #303030;
  color: var(--bs-body-color);
  border-color: var(--bs-link-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-control::placeholder {
  color: #777;
}

/* 2) Make the input form 50% smaller in width */
.seo-input-form {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Make the results table border: "1px solid #b7c7d7" */
.result-container .table-bordered {
  border: 1px solid #b7c7d7 !important; /* Ensure override */
}
.result-container .table-bordered th,
.result-container .table-bordered td {
  border-color: #242424 !important; /* Ensure override for all cell borders */
}

/* 4) Make the submit button color "#37475d" and a bit darker on hover */
.btn-primary.custom-submit-btn {
  background-color: #37475d;
  border-color: #37475d;
  color: #fff; /* Added text color for better contrast */
}
.btn-primary.custom-submit-btn:hover {
  background-color: rgb(44, 58, 74); /* Darker shade */
  border-color: #2c3a4a;
  color: #fff; /* Added text color for better contrast */
}

/* 5) Make the title color "#054f9f" */
.main-title {
  color: #9db8e0; /* Lighter color for main title */
}

/* 6) Gradient backgrounds for table rows and header */
.result-container .table thead.table-light tr th {
  background-color: #303030; /* Darker header for the table */
  color: #f0f0f0;
}

.result-container .table tbody tr.table-success td {
  background-color: #1A3A1A; /* Dark green */
  background-image: linear-gradient(to bottom, #173317, #303030, #303030, #303030);
}

.result-container .table tbody tr.table-warning td {
  background-color: #4D3800; /* Dark yellow/orange */
  background-image: linear-gradient(to bottom, #453100, #303030, #303030, #303030);
}

.result-container .table tbody tr.table-danger td {
  background-color: #4A1A1A; /* Dark red */
  background-image: linear-gradient(to bottom, #411717, #303030, #303030, #303030);
}

/* Override Bootstrap default dark theme table colors for more specific styling if needed */
.table {
    --bs-table-bg: #222222;
    --bs-table-striped-bg: #2a2a2a;
    --bs-table-active-bg: #323232;
    --bs-table-hover-bg: #2e2e2e;
    --bs-table-border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--bs-border-color);
}

.table-light th {
    background-color: #303030; /* Darker header for the table */
    color: #f0f0f0;
}

/* Custom row colors for dark mode */
.table-success {
    --bs-table-bg: #1A3A1A; /* Dark green */
    --bs-table-color: #C8E6C9;
    --bs-table-striped-bg: #173317;
    --bs-table-hover-bg: #142B14;
}

.table-warning {
    --bs-table-bg: #4D3800; /* Dark yellow/orange */
    --bs-table-color: #FFECB3;
    --bs-table-striped-bg: #453100;
    --bs-table-hover-bg: #3E2B00;
}

.table-danger {
    --bs-table-bg: #4A1A1A; /* Dark red */
    --bs-table-color: #FFCDD2;
    --bs-table-striped-bg: #411717;
    --bs-table-hover-bg: #3B1414;
}

.btn-primary {
    --bs-btn-bg: #0d6efd; 
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.input-group-text {
    background-color: #303030;
    border: 1px solid #444;
    color: var(--bs-body-color);
}

/* Alert styles for dark mode */
.alert {
    border-width: 1px;
}

.alert-info {
    background-color: #0D2C40; /* Darker info blue */
    color: #BDE0FE;
    border-color: #1A5873;
}

.alert-danger {
    background-color: #4A1A1A;
    color: #FFCDD2;
    border-color: #731A1A;
}

.alert-warning {
    background-color: #4D3800;
    color: #FFECB3;
    border-color: #735100;
}

/* Styles for preformatted text in alerts (raw request/response) */
pre {
    white-space: pre-wrap; 
    word-break: break-all; 
    background-color: #232323; /* Dark background for pre */
    border: 1px solid #444; 
    padding: 10px; 
    border-radius: 4px;
    color: #d0d0d0; /* Light text for pre content */
}

/* Ensure suggestion cell text is readable */
.suggestion-cell {
    word-break: break-word; /* Existing style */
    /* color: var(--bs-body-color); Implicitly inherited, adjust if needed */
}