/* Company Theme - Override Tailwind Utility Classes with Maximum Specificity */
/* Primary: #172a45 | Accent Colors: #e6007e, #00b2a9, #f7941d, #ffd100 */

/* ============================================
   HEADER STYLES - Maximum Specificity
   ============================================ */

/* Header container - target multiple class combinations */
div.flex.items-center.justify-between.border-b.border-zinc-200.px-4,
div.flex.items-center.justify-between.border-b.border-zinc-200,
div.flex.items-center.justify-between.border-b,
.flex.items-center.justify-between.border-b.border-zinc-200,
.flex.items-center.justify-between.border-b {
  background-color: #172a45 !important;
  border-bottom-color: #00b2a9 !important;
  border-bottom-width: 3px !important;
}

div.flex.items-center.justify-between.border-b *,
div.flex.items-center.justify-between.border-b.border-zinc-200 *,
.flex.items-center.justify-between.border-b *,
.flex.items-center.justify-between.border-b.border-zinc-200 * {
  color: #ffffff !important;
}

div.flex.items-center.justify-between.border-b a,
div.flex.items-center.justify-between.border-b.border-zinc-200 a,
.flex.items-center.justify-between.border-b a,
.flex.items-center.justify-between.border-b.border-zinc-200 a {
  color: #00b2a9 !important;
}

div.flex.items-center.justify-between.border-b a:hover,
div.flex.items-center.justify-between.border-b.border-zinc-200 a:hover,
.flex.items-center.justify-between.border-b a:hover,
.flex.items-center.justify-between.border-b.border-zinc-200 a:hover {
  color: #ffd100 !important;
  opacity: 1 !important;
}

/* Dashboard Button - very specific */
a.rounded-sm.bg-accent.px-3.py-2,
.bg-accent {
  background-color: #00b2a9 !important;
}

.text-accent-foreground,
a.rounded-sm.bg-accent.px-3.py-2.text-accent-foreground {
  color: #ffffff !important;
}

a.rounded-sm.bg-accent.px-3.py-2:hover,
.bg-accent:hover {
  background-color: #00b2a9 !important;
  opacity: 1 !important;
}

/* Sign out link */
button.text-sm.font-medium.text-zinc-800,
.text-zinc-800,
.text-zinc-700 {
  color: #ffffff !important;
}

button.text-sm.font-medium.text-zinc-800:hover,
.text-zinc-800:hover,
.text-zinc-700:hover {
  color: #ffd100 !important;
}

button.text-sm.font-medium.text-zinc-800.dark\:text-zinc-400,
.dark\:text-zinc-400,
.dark\:text-zinc-300 {
  color: #ffffff !important;
}

button.text-sm.font-medium.text-zinc-800.dark\:text-zinc-400:hover,
.dark\:text-zinc-400:hover,
.dark\:text-zinc-300:hover {
  color: #ffd100 !important;
}

/* ============================================
   STATUS BAR - Maximum Specificity
   ============================================ */

/* Status bar container */
div.rounded-md.p-4.bg-custom-200,
.rounded-md.p-4.bg-custom-200,
.bg-custom-200,
.bg-custom-400\/40,
div[class*="bg-custom-200"],
div[class*="bg-custom-400"] {
  background: linear-gradient(135deg, #172a45 0%, #0f1a2b 100%) !important;
}

/* Status Bar Border - Default (operational) - Green */
.border-custom-400,
div[class*="border-custom-400"],
div.rounded-md.p-4[class*="bg-custom-200"],
div.rounded-md.p-4[class*="bg-custom-400"] {
  border-color: #00b2a9 !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Status Bar Border - Operational (Green) - All systems operational */
div.rounded-md.p-4[data-status="operational"],
div.rounded-md.p-4.bg-custom-200[data-status="operational"],
div.rounded-md.p-4.bg-custom-400[data-status="operational"],
[x-cachet\:status-bar][data-status="operational"],
.status-bar[data-status="operational"],
div.rounded-md.p-4.bg-emerald-200,
div.rounded-md.p-4.bg-green-200,
div.rounded-md.p-4[class*="bg-emerald"],
div.rounded-md.p-4[class*="bg-green"] {
  border-color: #00b2a9 !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Status Bar Border - Partial (Yellow/Orange) */
div.rounded-md.p-4[data-status="partial"],
div.rounded-md.p-4.bg-custom-200[data-status="partial"],
div.rounded-md.p-4.bg-custom-400[data-status="partial"],
[x-cachet\:status-bar][data-status="partial"],
.status-bar[data-status="partial"],
div.rounded-md.p-4.bg-amber-200,
div.rounded-md.p-4.bg-yellow-200,
div.rounded-md.p-4[class*="bg-amber"],
div.rounded-md.p-4[class*="bg-yellow"] {
  border-color: #f7941d !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Status Bar Border - Minor Outage (Yellow/Orange) */
div.rounded-md.p-4[data-status="minor-outage"],
div.rounded-md.p-4.bg-custom-200[data-status="minor-outage"],
div.rounded-md.p-4.bg-custom-400[data-status="minor-outage"],
[x-cachet\:status-bar][data-status="minor-outage"],
.status-bar[data-status="minor-outage"],
div.rounded-md.p-4.bg-orange-200,
div.rounded-md.p-4[class*="bg-orange"] {
  border-color: #ffd100 !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Status Bar Border - Major Outage (Red) */
div.rounded-md.p-4[data-status="major-outage"],
div.rounded-md.p-4.bg-custom-200[data-status="major-outage"],
div.rounded-md.p-4.bg-custom-400[data-status="major-outage"],
[x-cachet\:status-bar][data-status="major-outage"],
.status-bar[data-status="major-outage"],
div.rounded-md.p-4.bg-red-200,
div.rounded-md.p-4.bg-rose-200,
div.rounded-md.p-4[class*="bg-red"],
div.rounded-md.p-4[class*="bg-rose"] {
  border-color: #e6007e !important;
  border-width: 3px !important;
  border-style: solid !important;
}

.text-custom-800,
.text-custom-200,
p.text-sm.text-custom-800,
p.text-base.text-custom-800 {
  color: #ffffff !important;
}

/* Status icon colors */
.text-custom-800 svg,
.text-custom-200 svg,
svg.text-custom-800,
svg.text-custom-200 {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ============================================
   FOOTER STYLES - Maximum Specificity
   ============================================ */

footer.flex.flex-col.items-center.justify-center.gap-2.border-t,
footer.border-t,
footer.flex.flex-col {
  background-color: #172a45 !important;
  border-top-color: #00b2a9 !important;
  border-top-width: 3px !important;
}

footer *,
footer.flex.flex-col * {
  color: #ffffff !important;
}

footer a,
footer.flex.flex-col a {
  color: #00b2a9 !important;
}

footer a:hover,
footer.flex.flex-col a:hover {
  color: #ffd100 !important;
  opacity: 1 !important;
}

footer .text-zinc-500,
.text-zinc-500 {
  color: #ffffff !important;
}

footer .dark\:border-zinc-700,
.dark\:border-zinc-700 {
  border-color: #172a45 !important;
}

/* ============================================
   BODY AND TEXT - Maximum Specificity
   ============================================ */

body.flex.min-h-screen,
body {
  background-color: #f5f7fa !important;
  color: #172a45 !important;
}

html.text-zinc-700,
.text-zinc-700 {
  color: #172a45 !important;
}

.bg-accent-background,
html.bg-accent-background {
  background-color: #f5f7fa !important;
}

.dark\:text-zinc-300,
html.dark\:text-zinc-300 {
  color: #172a45 !important;
}

/* ============================================
   COMPONENT GROUPS - Maximum Specificity
   ============================================ */

/* Component group container */
div.overflow-hidden.rounded-lg.border,
.overflow-hidden.rounded-lg.border,
.rounded-lg.border {
  border-color: #172a45 !important;
  border-width: 2px !important;
}

div.overflow-hidden.rounded-lg.border.dark\:border-zinc-700,
.dark\:border-zinc-700 {
  border-color: #172a45 !important;
}

/* Component group header */
div.flex.items-center.justify-between.bg-white,
.bg-white,
.dark\:bg-white\/5 {
  background-color: #ffffff !important;
}

div.flex.items-center.justify-between.bg-white.dark\:bg-white\/5 {
  background-color: #ffffff !important;
}

/* Main container background */
.container.mx-auto {
  background-color: transparent !important;
}

/* Page wrapper background */
div.container.mx-auto.flex.max-w-5xl {
  background-color: transparent !important;
}

/* Keep container at max-w-5xl - don't override */
div.container.mx-auto.flex.max-w-5xl.flex-col.space-y-6 {
  /* Keep original max-width - don't override */
}

/* Component group title */
button.flex.items-center.gap-2.text-zinc-500,
.text-zinc-500.dark\:text-zinc-300,
h3.text-lg.font-semibold {
  color: #172a45 !important;
}

/* Component group content */
div.flex.flex-col.divide-y.bg-white,
.bg-white.dark\:bg-white\/5,
.dark\:bg-white\/5 {
  background-color: #ffffff !important;
}

.dark\:divide-zinc-700,
ul.divide-y.dark\:divide-zinc-700 {
  border-color: #e0e0e0 !important;
}

/* Component group badges */
span.rounded-sm.border.border-zinc-800,
.border-zinc-800,
.dark\:border-zinc-600 {
  border-color: #172a45 !important;
}

.text-zinc-800,
.dark\:text-zinc-400 {
  color: #172a45 !important;
}

/* ============================================
   ABOUT SECTION - Maximum Specificity
   ============================================ */

h1.text-3xl.font-semibold {
  color: #172a45 !important;
}

/* About section container - fix text width and alignment */
div.prose-sm.prose-zinc,
div.prose-sm.md\:prose.prose-zinc,
.prose-sm.prose-zinc,
.prose-zinc {
  color: #172a45 !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: left !important;
  line-height: 1.75 !important;
}

/* About section wrapper div */
div > h1.text-3xl.font-semibold + div.prose-sm {
  width: 100% !important;
  max-width: 100% !important;
}

div.prose-sm.prose-zinc *,
.prose-sm.prose-zinc *,
.prose-zinc * {
  color: #172a45 !important;
}

/* Ensure paragraphs have proper spacing and width */
div.prose-sm.prose-zinc p,
.prose-sm.prose-zinc p,
.prose-zinc p,
div.prose-sm.md\:prose.prose-zinc p {
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
  max-width: 100% !important;
  width: 100% !important;
  line-height: 1.75 !important;
  text-align: left !important;
  padding-right: 0 !important;
}

/* Remove prose max-width constraints ONLY for the about section text */
div.prose-sm.prose-zinc,
div.prose-sm.md\:prose.prose-zinc,
.prose-sm.prose-zinc.mt-1 {
  max-width: 100% !important;
  width: 100% !important;
}

/* Only target paragraphs within the about section */
div.prose-sm.prose-zinc p,
.prose-sm.prose-zinc.mt-1 p {
  max-width: 100% !important;
  width: 100% !important;
}

.prose-a\:text-accent-content a,
.prose-zinc a {
  color: #00b2a9 !important;
}

.prose-a\:text-accent-content a:hover,
.prose-zinc a:hover {
  color: #00b2a9 !important;
}

/* ============================================
   LINKS - Maximum Specificity
   ============================================ */

a,
a.transition,
a.transition.hover\:opacity-80 {
  color: #00b2a9 !important;
}

a:hover,
a.transition:hover,
a.transition.hover\:opacity-80:hover {
  color: #00b2a9 !important;
  opacity: 1 !important;
}

/* ============================================
   STATUS COLORS - Target inline styles and classes
   ============================================ */

/* Operational status (green) - override inline styles */
div[style*="rgb(34, 197, 94)"],
div[style*="rgb(16, 185, 129)"],
div[style*="--color-200: rgb(34, 197, 94)"],
div[style*="--color-200: rgb(16, 185, 129)"],
div[style*="--color-400: rgb(34, 197, 94)"],
div[style*="--color-400: rgb(16, 185, 129)"] {
  background: linear-gradient(135deg, #00b2a9 0%, #009688 100%) !important;
  background-color: #00b2a9 !important;
  border-color: #00b2a9 !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Partial status (yellow/orange) */
div[style*="rgb(234, 179, 8)"],
div[style*="rgb(251, 191, 36)"],
div[style*="--color-200: rgb(234, 179, 8)"],
div[style*="--color-200: rgb(251, 191, 36)"] {
  background: linear-gradient(135deg, #f7941d 0%, #e68900 100%) !important;
  background-color: #f7941d !important;
  border-color: #f7941d !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Major outage (red) */
div[style*="rgb(239, 68, 68)"],
div[style*="rgb(244, 63, 94)"],
div[style*="--color-200: rgb(239, 68, 68)"],
div[style*="--color-200: rgb(244, 63, 94)"] {
  background: linear-gradient(135deg, #e6007e 0%, #cc0069 100%) !important;
  background-color: #e6007e !important;
  border-color: #e6007e !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* Minor outage (orange) */
div[style*="rgb(249, 115, 22)"],
div[style*="--color-200: rgb(249, 115, 22)"] {
  background: linear-gradient(135deg, #ffd100 0%, #e6c000 100%) !important;
  background-color: #ffd100 !important;
  border-color: #ffd100 !important;
  border-width: 3px !important;
  border-style: solid !important;
}

/* ============================================
   GENERAL OVERRIDES - Maximum Specificity
   ============================================ */

/* Override any primary color usage */
.bg-primary-500,
.bg-primary-600 {
  background-color: #172a45 !important;
}

.text-primary-500,
.text-primary-600 {
  color: #172a45 !important;
}

.border-primary-500,
.border-primary-600 {
  border-color: #172a45 !important;
}

/* Border colors */
.border-zinc-200 {
  border-color: #172a45 !important;
}

/* Container */
.container.mx-auto {
  background-color: transparent !important;
}