/* ==========================================================================
   Maverics.ai Dark Theme for Atlassian StatusPage

   IMPORTANT: Set these Brand Colors in StatusPage Admin first:
   Customize > Design > Colors:
   - Body Background: #050B11
   - Font Color: #FFFFFF
   - Light Font Color: #E0E0E0
   - Link Color: #E0E0E0
   - Border Color: #1a202c
   - Graph Color: #2d1f4a
   - No Data: #374151
   - Green: #48bb78
   - Yellow: #ecc94b
   - Orange: #ed8936
   - Red: #f56565
   - Blue: #4299e1
   ========================================================================== */

/* ==========================================================================
   BASE STYLES - Mesh Gradient Background (from maverics.ai)
   ========================================================================== */

body.status {
  background:
    radial-gradient(ellipse at 20% 0%, #0E3952 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, #282948 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, #0D172E 0%, transparent 50%),
    #050B11 !important;
  background-attachment: fixed !important;
}

.layout-content,
.layout-content.status,
.layout-content.status.status-index,
.layout-content.status.status-full-history {
  background: transparent !important;
}

.container {
  max-width: 880px;
}

/* ==========================================================================
   COMPONENTS SECTION
   ========================================================================== */

/* Components container */
.layout-content.status.status-index .components-section .components-container.one-column,
.components-section .components-container {
  background-color: #0D172E;
  border-radius: 6px;
  overflow: hidden;
}

/* Individual component rows - NO hover effect */
.component-container {
  background-color: #0D172E;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.component-container:last-child {
  border-bottom: none;
}

/* Component name - white text */
span.name.component-name {
  color: #ffffff !important;
}

/* Component groups - same navy background, no hover */
.component-group-parent {
  background-color: #0D172E !important;
}

.child-components-container {
  background-color: #0D172E;
}

/* Group name text */
.component-group-parent .component-group-name {
  color: #ffffff !important;
  font-weight: 600;
}

/* Group expand/collapse caret */
.component-group-parent .group-parent-indicator {
  color: #ffffff;
}

/* ==========================================================================
   HELP ICON (Question Mark) - Bright white and visible
   ========================================================================== */

/* Target the question mark tooltip BUTTON only (not spans) */
button.tooltip-base,
button.tool,
button.tooltipstered,
button[data-js-hook="tooltip"] {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  background-color: transparent !important;
  font-size: 12px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  line-height: 16px !important;
  padding: 0 !important;
}

button.tooltip-base:hover,
button.tool:hover,
button.tooltipstered:hover,
button[data-js-hook="tooltip"]:hover {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Component status text (Operational, etc.) */
span.component-status {
  color: #ffffff !important;
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Operational status - teal to match brand */
span.component-status[data-tooltip*="Operational"],
.component-status.tool[data-tooltip*="Operational"] {
  color: #38B2AC !important;
}

/* ==========================================================================
   INCIDENTS
   ========================================================================== */

/* Incident section containers */
.unresolved-incidents,
.incidents-list,
.past-incidents-list {
  margin-top: 2rem;
}

/* Section titles */
.unresolved-incidents .font-large,
.incidents-list .font-large,
.past-incidents-list .font-large {
  color: #ffffff !important;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Individual incident cards - navy background with proper spacing */
.unresolved-incident,
.incident {
  background-color: #0D172E !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* Incident title - white */
.incident-title a,
.unresolved-incident .incident-title a {
  color: #ffffff !important;
  font-weight: 600;
}

/* Incident update text - lighter for readability */
.update-body {
  color: #E0E0E0 !important;
  line-height: 1.6;
}

/* Incident timestamps (but not date vars) */
.update-timestamp {
  color: #9CA3AF !important;
}

/* Date var elements should be white like the rest of the date */
.date var,
var[data-var="date"],
var[data-var="year"] {
  color: #ffffff !important;
  font-style: normal;
}

/* Other var elements (timestamps in updates) */
.incident-update var,
.update var {
  color: #9CA3AF !important;
  font-style: normal;
}

/* Incident status labels */
.incident-update {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid #2d1f4a;
}

/* ==========================================================================
   SCHEDULED MAINTENANCE
   ========================================================================== */

.scheduled-maintenances {
  margin-top: 2rem;
}

.scheduled-maintenance {
  background-color: #0D172E !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid #4299e1;
  border-radius: 6px;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
}

.scheduled-maintenance-name a {
  color: #ffffff !important;
  font-weight: 600;
}

/* ==========================================================================
   SYSTEM METRICS
   ========================================================================== */

.layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
  background-color: #0D172E;
  border-radius: 6px;
}

.metric .metric-meta .metric-name {
  color: #ffffff;
}

.metric .metric-meta .metric-average {
  color: #E0E0E0;
}

/* Timeframe buttons */
.custom-metrics-container .timeframes-container .timeframe {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  color: #E0E0E0;
  padding: 4px 12px;
  transition: all 0.2s ease;
}

.custom-metrics-container .timeframes-container .timeframe.active {
  background-color: #4a3a6e;
  border-color: #4a3a6e;
  color: #ffffff;
}

.custom-metrics-container .timeframes-container .timeframe:hover:not(.active) {
  background-color: rgba(74, 58, 110, 0.4);
}

/* ==========================================================================
   UPTIME BARS
   ========================================================================== */

.availability-time-line-graphic rect {
  rx: 3px;
}

/* Uptime tooltip */
#uptime-tooltip .tooltip-box {
  background-color: rgba(0, 0, 0, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   DATES
   ========================================================================== */

/* Date display in incidents and history */
.day .date,
.incident .date,
var.date {
  color: #ffffff !important;
  font-weight: 500;
}

/* Date range styling */
.date-range,
.scheduled-maintenance-time {
  color: #9CA3AF !important;
}

/* ==========================================================================
   HISTORY PAGE
   ========================================================================== */

/* History navigation */
.layout-content.status.status-full-history .history-nav {
  border: none;
}

.history-nav a {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  color: #E0E0E0;
  padding: 6px 14px;
  transition: all 0.2s ease;
}

.history-nav a.current {
  background-color: #4a3a6e;
  border-color: #4a3a6e;
  color: #ffffff;
}

.history-nav a:hover:not(.current) {
  background-color: rgba(74, 58, 110, 0.4);
}

/* Month containers */
.month {
  background-color: #0D172E;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.month .month-title {
  background-color: #050B11;
  color: #ffffff !important;
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.month .day {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.month .day:last-child {
  border-bottom: none;
}

.day .date {
  color: #ffffff !important;
}

.day .no-incidents {
  color: #9CA3AF;
  font-style: italic;
}

/* ==========================================================================
   SUBSCRIBE BUTTON
   ========================================================================== */

.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
  background-color: #38B2AC !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(56, 178, 172, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 24px;
  text-shadow: none;
  transition: all 0.2s ease;
  transform: translateY(0);
}

.flat-button:hover,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover {
  background-color: #2C9A94 !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 6px 16px rgba(56, 178, 172, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px);
}

/* Subscribe dropdown */
.updates-dropdown-container .updates-dropdown {
  background-color: #0D172E;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.updates-dropdown .updates-dropdown-section {
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.updates-dropdown .updates-dropdown-section:last-child {
  border-bottom: none;
}

.updates-dropdown .updates-dropdown-section:hover {
  background-color: #4a3a6e;
}

.updates-dropdown-section .updates-dropdown-section-description {
  color: #E0E0E0;
}

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal,
.subscribe-modal,
.modal-content {
  background-color: #0D172E !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  color: #ffffff !important;
}

.modal-body {
  color: #E0E0E0;
}

.modal-footer {
  background-color: #050B11;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  background-color: #050B11 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px;
  color: #ffffff !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #2d1f4a !important;
  box-shadow: 0 0 0 3px rgba(45, 31, 74, 0.3);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #9CA3AF !important;
}

label {
  color: #E0E0E0 !important;
}

button[type="submit"],
input[type="submit"] {
  background-color: #38B2AC !important;
  border: none;
  border-radius: 9999px;
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 24px;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: #2C9A94 !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Primary text - white */
.color-primary {
  color: #ffffff !important;
}

/* Secondary text - light gray (more readable) */
.color-secondary {
  color: #E0E0E0 !important;
}

/* Font classes */
.font-largest,
.font-large {
  color: #ffffff !important;
}

.font-regular {
  color: #E0E0E0 !important;
}

.font-small {
  color: #9CA3AF !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

/* Links */
a {
  color: #E0E0E0;
  transition: color 0.15s ease;
}

a:hover {
  color: #ffffff;
}

/* ==========================================================================
   BORDERS
   ========================================================================== */

body.status .layout-content.status .border-color,
hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.page-footer a,
footer a {
  color: #9CA3AF;
}

.page-footer a:hover,
footer a:hover {
  color: #E0E0E0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 650px) {
  .unresolved-incident,
  .incident,
  .scheduled-maintenance {
    padding: 1rem !important;
  }

  .flat-button {
    padding: 8px 20px;
  }
}