/*
 * dimeri.ai Brand Colors Override
 * Place this BEFORE other CSS files in your HTML
 * Overrides all purple colors with dimeri.ai red
 */

:root {
  /* dimeri.ai Brand Colors */
  --dimeri-red: #c41e3a;
  --dimeri-red-dark: #8b1538;
  --dimeri-red-light: #e63946;
  --dimeri-gradient: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%);

  /* Neutral Colors */
  --dimeri-black: #1a1a1a;
  --dimeri-gray: #6c757d;
  --dimeri-bg: #f8f9fa;
  --dimeri-border: #dee2e6;
}

/* ========================================
   PRIMARY BUTTONS & CTAs
   ======================================== */
.primary-btn,
.demo-cta-btn,
.btn-primary,
.cta-button,
.tool-button,
.download-btn,
.export-btn:hover {
  background: var(--dimeri-red) !important;
  border-color: var(--dimeri-red) !important;
  color: white !important;
}

.primary-btn:hover,
.demo-cta-btn:hover,
.btn-primary:hover,
.cta-button:hover,
.tool-button:hover,
.download-btn:hover {
  background: var(--dimeri-red-dark) !important;
  color: white !important;
  box-shadow: 0 6px 16px rgba(196, 30, 58, 0.3) !important;
}

/* ========================================
   HERO SECTIONS & GRADIENTS
   ======================================== */
.hero,
.cta-section,
.cta-box {
  background: var(--dimeri-gradient) !important;
  color: white !important;
}

.hero-title,
.hero-subtitle,
.cta-title,
.cta-subtitle,
.cta-box h3,
.cta-box p {
  color: white !important;
}

/* ========================================
   NAVIGATION & LINKS
   ======================================== */
.back-button,
.back-button:hover {
  color: var(--dimeri-red) !important;
}

.framework-tab.active {
  background: var(--dimeri-red) !important;
  border-color: var(--dimeri-red) !important;
  color: white !important;
}

.framework-tab:hover {
  border-color: var(--dimeri-red) !important;
}

/* ========================================
   INPUTS & FORM ELEMENTS
   ======================================== */
.search-input:focus,
.filter-select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input-section input:focus {
  border-color: var(--dimeri-red) !important;
}

/* ========================================
   CARDS & HOVER STATES
   ======================================== */
.tool-card:hover,
.policy-card:hover,
.overview-card:hover,
.risk-item:hover {
  border-color: var(--dimeri-red) !important;
}

.tool-card:hover {
  box-shadow: 0 12px 32px rgba(196, 30, 58, 0.15) !important;
}

/* ========================================
   PROGRESS BARS & INDICATORS
   ======================================== */
.progress-bar-fill {
  background: var(--dimeri-gradient) !important;
}

.card-value,
.summary-number,
.value-number {
  color: var(--dimeri-red) !important;
}

.calc-score {
  color: var(--dimeri-red) !important;
}

/* ========================================
   SLIDERS
   ======================================== */
.risk-slider::-webkit-slider-thumb {
  border-color: var(--dimeri-red) !important;
}

.risk-slider::-moz-range-thumb {
  border-color: var(--dimeri-red) !important;
}

.risk-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4) !important;
}

/* ========================================
   BADGES & TAGS
   ======================================== */
.badge {
  background: rgb(255, 254, 254) !important;
  color: var(--dimeri-red-dark) !important;
}

.quadrant.dragging-over,
.raci-cell:hover,
.matrix-cell.active {
  border-color: var(--dimeri-red) !important;
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.2) !important;
}

/* ========================================
   STAKEHOLDER MATRIX QUADRANTS
   ======================================== */
.manage-closely-quad {
  background: linear-gradient(
    135deg,
    rgba(196, 30, 58, 0.1) 0%,
    rgba(139, 21, 56, 0.1) 100%
  ) !important;
  border-color: var(--dimeri-red) !important;
}

.legend-color.manage-closely {
  background: var(--dimeri-gradient) !important;
}

/* ========================================
   RACI MATRIX
   ======================================== */
.raci-badge.r-badge,
.raci-cell-value.R {
  background: var(--dimeri-red) !important;
  color: white !important;
}

.raci-option-btn.r-option:hover {
  border-color: var(--dimeri-red) !important;
  background: rgba(196, 30, 58, 0.1) !important;
}

/* ========================================
   COMPLIANCE DASHBOARD
   ======================================== */
.category-header:hover,
.control-item:hover {
  border-color: var(--dimeri-red) !important;
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.1) !important;
}

.status-badge.optimized {
  background: var(--dimeri-red) !important;
  color: white !important;
}

.summary-card.priority {
  border-color: var(--dimeri-red) !important;
}

/* ========================================
   RISK CALCULATOR
   ======================================== */
.calc-score {
  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.2) !important;
}

.score-badge.high,
.level-badge-large.high-level {
  background: var(--dimeri-red) !important;
  color: white !important;
}

/* ========================================
   POLICY LIBRARY
   ======================================== */
.preview-btn {
  color: var(--dimeri-red) !important;
  border-color: var(--dimeri-red) !important;
  background: white !important;
}

.preview-btn:hover {
  background: rgba(196, 30, 58, 0.05) !important;
  color: var(--dimeri-red-dark) !important;
}

.policy-tag.category {
  background: rgba(196, 30, 58, 0.1) !important;
  color: var(--dimeri-red-dark) !important;
}

.policy-btn.download-btn {
  background: var(--dimeri-red) !important;
  color: white !important;
}

/* ========================================
   MISC ACCENTS
   ======================================== */
.summary-card:hover {
  border-color: var(--dimeri-red) !important;
}

a:hover {
  color: var(--dimeri-red) !important;
}

/* ========================================
   FOOTER
   ======================================== */
.footer a:hover {
  color: var(--dimeri-red) !important;
}

/* ========================================
   CTA WHITE BUTTON (on red backgrounds)
   ======================================== */
.cta-button {
  background: white !important;
  color: var(--dimeri-red) !important;
  border: none !important;
}

.cta-button:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--dimeri-red-dark) !important;
}

/* ========================================
   MODAL & FORM SUBMIT BUTTONS
   ======================================== */
form button[type="submit"],
.modal .primary-btn {
  background: var(--dimeri-red) !important;
  color: white !important;
}

form button[type="submit"]:hover,
.modal .primary-btn:hover {
  background: var(--dimeri-red-dark) !important;
  color: white !important;
}

/* Hide all export buttons */
#exportBtn,
.export-section,
button[onclick*="exportReport"],
button[onclick*="exportToCSV"] {
  display: none !important;
}