/* 
 * PROTEUS CORRELATION TOOLS - CONSOLIDATED STYLES
 * Single source CSS file with Tailwind + Custom Styles
 * Processed by PostCSS: src/styles.css → assets/styles.css
 */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-proteus-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(68 114 196 / var(--tw-border-opacity, 1));
}
.border-proteus-dark-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(0 26 100 / var(--tw-border-opacity, 1));
}
.border-proteus-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(255 99 3 / var(--tw-border-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-proteus-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(68 114 196 / var(--tw-bg-opacity, 1));
}
.bg-proteus-dark-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(0 26 100 / var(--tw-bg-opacity, 1));
}
.bg-proteus-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 99 3 / var(--tw-bg-opacity, 1));
}
.font-inter {
  font-family: Inter, sans-serif;
}
.font-bold {
  font-weight: 700;
}
.font-semibold {
  font-weight: 600;
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-proteus-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(68 114 196 / var(--tw-text-opacity, 1));
}
.text-proteus-dark-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(0 26 100 / var(--tw-text-opacity, 1));
}
.text-proteus-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(255 99 3 / var(--tw-text-opacity, 1));
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
 * BASE STYLES - SCROLLING
 * ======================================== */
/* AppShell-main needs overflow to show scrollbar when content is wider */
/* Using attribute selector because Mantine uses hashed class names */
[class*="AppShell-main"] {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

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

/* ========================================
 * CSS VARIABLES FOR PROTEUS THEME COLORS
 * ======================================== */
:root {
  /* Primary Proteus brand colors */
  --proteus-dark-blue: #001a64;
  --proteus-light-blue: #4472c4;
  --proteus-orange: #ff6303;

  /* Supporting colors */
  --proteus-white: #ffffff;
  --proteus-border: #e9ecef;
  --proteus-bg-light: #f8f9fa;

  /* Semantic colors for correlation analysis */
  --correlation-error-bg: rgba(255, 68, 68, 0.6);
  --correlation-error-border: #ff4444;
  --correlation-red-high: rgba(220, 53, 69, 0.5);
  --correlation-red-medium: rgba(220, 53, 69, 0.35);
  --correlation-red-low: rgba(220, 53, 69, 0.2);
  --correlation-green-high: rgba(25, 135, 84, 0.5);
  --correlation-green-medium: rgba(25, 135, 84, 0.35);
  --correlation-green-low: rgba(25, 135, 84, 0.2);

  /* Grey cell variants for non-editable cells */
  --grey-cell-light-bg: rgba(128, 128, 128, 0.1);
  --grey-cell-dark-bg: rgba(128, 128, 128, 0.5);
  --grey-text-light: #888888;
  --grey-text-dark: #666666;
  --grey-border: #dee2e6;
}

/* ========================================
 * CRITICAL BUSINESS LOGIC STYLING
 * ReactGrid Correlation Matrix Components
 * ======================================== */

/* ERROR HIGHLIGHTING - HIGHEST PRIORITY */
.rg-cell-error-highlight {
  z-index: 1 !important;
  background-color: var(--correlation-error-bg) !important;
  border: 3px solid var(--correlation-error-border) !important;
}

/* PERCENTILE-BASED CORRELATION HIGHLIGHTING */
.percentile-red-dark {
  z-index: 0;
  background-color: var(--correlation-red-high) !important;
  border: 1px solid transparent !important;
}

.percentile-red-medium {
  z-index: 0;
  background-color: var(--correlation-red-medium) !important;
  border: 1px solid transparent !important;
}

.percentile-red-light {
  z-index: 0;
  background-color: var(--correlation-red-low) !important;
  border: 1px solid transparent !important;
}

.percentile-green-dark {
  z-index: 0;
  background-color: var(--correlation-green-high) !important;
  border: 1px solid transparent !important;
}

.percentile-green-medium {
  z-index: 0;
  background-color: var(--correlation-green-medium) !important;
  border: 1px solid transparent !important;
}

.percentile-green-light {
  z-index: 0;
  background-color: var(--correlation-green-low) !important;
  border: 1px solid transparent !important;
}

/* REACTGRID CELL FORMATTING - CRITICAL FOR MATRIX FUNCTIONALITY */

/* 1a. Row headers - non-editable text cells (grey background) */
.rg-cell.rg-text-cell.rg-cell-nonEditable {
  background-color: var(--grey-cell-light-bg) !important;
  font-weight: normal;
  color: #000000;
  border-right: 2px solid var(--grey-border);
}

/* 1b. Row headers - editable text cells (light blue background) */
.rg-cell.rg-text-cell:not(.rg-cell-nonEditable) {
  background-color: rgba(68, 114, 196, 0.12) !important;
  border: 1px solid rgba(68, 114, 196, 0.2);
  font-weight: normal;
  color: #000000;
}

/* 2. Editable data cells (light blue background) */
.rg-cell.rg-customnumber-cell:not(.rg-cell-nonEditable) {
  background-color: rgba(68, 114, 196, 0.12) !important;
  border: 1px solid rgba(68, 114, 196, 0.2);
}

/* 3. Non-editable data cells (white background) */
.rg-cell.rg-customnumber-cell.rg-cell-nonEditable {
  background-color: var(--proteus-white, #ffffff) !important;
  border: 1px solid var(--grey-border);
}

/* 4. Non-editable greyed out cells - unified approach */
.cell-grey {
  background-color: var(--grey-cell-dark-bg) !important;
  color: var(--grey-text-light) !important;
  border: 1px solid var(--grey-border) !important;
}

/* Fixed entry highlighting for healing dashboard */
.fixed-entry-highlight {
  background-color: rgba(68, 114, 196, 0.4) !important;
  z-index: 0 !important;
  border: 1px solid transparent !important;
}

/* Checkbox cell styling for correlation matrices */
.rg-cell.rg-checkbox-cell {
  text-align: center !important;
  background-color: var(--proteus-white, #ffffff) !important;
}

.rg-cell.rg-checkbox-cell:not(.rg-cell-nonEditable) {
  background-color: rgba(68, 114, 196, 0.12) !important;
}

.rg-cell.rg-checkbox-cell.rg-cell-nonEditable {
  background-color: var(--proteus-white, #ffffff) !important;
}

/* ========================================
 * CORE APPLICATION STYLING
 * ======================================== */

/* Base typography and layout */
body {
  font-family: "Inter", sans-serif;
  color: darkslategray;
}

p {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Custom scrollbar for fullscreen components */
.fullscreen::-webkit-scrollbar {
  width: 3px;
}

/* ReactGrid modal fix - critical for functionality */
section[data-modal-content="true"] {
  transform: none !important;
  will-change: auto !important;
}

/* ========================================
 * HOME PAGE INTERACTIONS
 * ======================================== */

/* Home page card hover effects */
.home-option-card {
  border: 1px solid var(--proteus-light-blue) !important;
}

.home-option-card:hover {
  border: 2px solid var(--proteus-orange) !important;
  box-shadow: 0 4px 12px rgba(255, 99, 3, 0.2) !important;
}

/* ========================================
 * LOADING ANIMATIONS
 * For new loading component integration
 * ======================================== */

/* Spin animation for loading component */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
 * RESPONSIVE NAVIGATION SYSTEM
 * Navigation hover, active states, and responsive design
 * ======================================== */

/* Navigation link hover effects */
.responsive-nav-link:hover {
  background-color: var(--proteus-light-blue) !important;
  transition: all 0.2s ease !important;
}

.responsive-nav-link:hover .nav-label-text {
  color: white !important;
}

.responsive-nav-link:hover svg {
  color: white !important;
}

/* Active navigation link styling using Mantine's data-active attribute */
.responsive-nav-link[data-active="true"] {
  background-color: var(--proteus-dark-blue) !important;
  border-radius: 8px !important;
}

.responsive-nav-link[data-active="true"] .nav-label-text {
  color: white !important;
  font-weight: bold !important;
}

.responsive-nav-link[data-active="true"] svg {
  color: white !important;
}

/* RESPONSIVE HEADER & SIDEBAR DESIGN - LABEL HIDING & SIDEBAR RESIZING */
/* Large screens and above - show full header text and full navigation */
@media (min-width: 1200px) {
  /* Header responsive styles */
  .header-full-text {
    display: block !important;
  }

  .header-short-text {
    display: none !important;
  }

  /* Sidebar responsive styles */
  .responsive-nav-link {
    display: flex !important;
  }

  .responsive-navbar {
    width: 150px !important;
  }

  /* Main content area adjustment for large screens */
  .mantine-AppShell-main {
    margin-left: 150px !important;
    /* Width removed - allow content to expand beyond viewport for horizontal scroll */
  }
}

/* Medium screens - show short header text and full navigation */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Header responsive styles */
  .header-full-text {
    display: none !important;
  }

  .header-short-text {
    display: block !important;
  }

  /* Sidebar responsive styles */
  .responsive-nav-link {
    display: flex !important;
  }

  .responsive-navbar {
    width: 150px !important;
  }

  /* Main content area adjustment for medium screens */
  .mantine-AppShell-main {
    margin-left: 150px !important;
    /* Width removed - allow content to expand beyond viewport for horizontal scroll */
  }
}

/* Small screens - hide labels, resize sidebar, show short header */
@media (max-width: 767px) {
  /* Header responsive styles */
  .header-full-text {
    display: none !important;
  }

  .header-short-text {
    display: block !important;
  }

  /* Mobile header adjustments */
  .mantine-AppShell-header .mantine-Group-root {
    padding: 0 8px !important;
  }

  .mantine-AppShell-header img {
    height: 50px !important;
    margin-right: 10px !important;
  }

  .header-short-text {
    font-size: 24px !important;
  }

  /* Sidebar responsive styles - hide labels and resize */
  .responsive-nav-link .nav-label-text {
    display: none !important;
  }

  .responsive-navbar {
    width: 80px !important;
  }

  /* Mobile layout adjustments */
  .mantine-AppShell-main {
    margin-left: 80px !important;
    /* Width removed - allow content to expand beyond viewport for horizontal scroll */
  }

  .mantine-AppShell-main .mantine-Container-root {
    max-width: none !important;
    padding: 8px !important;
  }
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}