/* ============================================================
   Accessibility Risk Monitor — UI Styles (v2.1)
   Updates from v2:
     - Cell selection: light teal bg, keep dark text (no flash)
     - Larger inputs/dropdowns (placeholders no longer clipped)
     - Larger more-visible (i) info icons with proper spacing
     - Modal / confirmation dialog styling
     - Loading spinner styling
   ============================================================ */

:root {
  --bg-page: #F2F9F7;
  --bg-surface: #FFFFFF;
  --bg-subtle: #E0ECE6;
  --ink-strong: #1F1F1F;
  --ink-medium: #5C5C5C;
  --ink-soft: #9CA3AF;
  --border: #E0DCD0;
  --border-strong: #1F1F1F;
  --accent: #0F766E;
  --accent-deep: #134E4A;
  --accent-soft: #CCFBF1;
  --accent-wash: #E6FAF6;   /* very light teal for cell selection */
  --sev-high-bg: #FEF2F2;
  --sev-high-text: #7B3434;
  --sev-high-border: #FCA5A5;
  --sev-med-bg: #FEF3C7;
  --sev-med-text: #96694C;
  --sev-med-border: #FCD34D;
  --sev-low-bg: #F1F5F9;
  --sev-low-text: #475569;
  --sev-low-border: #CBD5E1;
  --success: #166534;
  --success-bg: #ECFDF5;
  --warn: #92400E;
  --warn-bg: #FFFBEB;
  --error: #991B1B;
  --error-bg: #FEF2F2;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-page); color: var(--ink-strong);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a, a:visited { color: inherit; text-decoration: none; }
::selection { background: var(--ink-strong); color: var(--bg-page); }

/* Layout */
.app-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.app-layout.login-mode { display: block; }

.sidebar {
  background: var(--bg-surface); border-right: 1px solid var(--border);
  padding: 40px 24px 32px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-header { margin-bottom: 48px; }
.brand {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-strong);
}
.brand-line2 { color: var(--accent); }
.brand-sub {
  margin-top: 10px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-medium);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-nav .nav-link {
  display: block; padding: 11px 14px;
  font-size: 14px; font-weight: 500; color: var(--ink-medium);
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-nav .nav-link:hover { background: var(--bg-subtle); color: var(--ink-strong); }
.sidebar-footer { padding-top: 20px; border-top: 1px solid var(--border); }
.footer-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); margin-bottom: 4px;
}
.footer-name { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.footer-role { font-size: 12px; color: var(--ink-medium); margin-top: 2px; }
.logout-btn {
  margin-top: 14px; background: none;
  border: 1px solid var(--border); padding: 8px 12px; border-radius: 4px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-medium); cursor: pointer; width: 100%;
}
.logout-btn:hover { color: var(--accent); border-color: var(--accent); }

.main-content { padding: 56px 64px 80px; max-width: 1400px; width: 100%; }

/* Page header */
.page-header { margin-bottom: 40px; }
.page-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.page-title {
  font-family: var(--font-display); font-size: 52px; font-weight: 500;
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink-strong); margin: 0 0 14px 0;
}
.page-sub {
  font-size: 16px; color: var(--ink-medium);
  max-width: 720px; margin: 0; line-height: 1.6;
}

/* Context bar — info chips on left, controls block on right */
.context-bar {
  display: flex; align-items: stretch; gap: 18px;
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px; margin-bottom: 24px; flex-wrap: wrap;
}
.context-info-group {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.context-item { display: flex; flex-direction: column; gap: 4px; }
.context-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.context-value {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--ink-strong);
}
.context-sep { width: 1px; background: var(--border); }
.context-controls {
  margin-left: auto;
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 260px;
}

/* KPI cards */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 40px;
}
.kpi-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 24px; position: relative;
}
.kpi-card-accent { border-top: 3px solid var(--accent); }
.kpi-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-medium); margin-bottom: 14px;
}
/* Larger, more visible info icons */
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  margin-left:6px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-size: 11px; font-weight: 700;
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  cursor: help;
  border: 1px solid var(--accent);
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.info-icon:hover {
  background: var(--accent);
  color: var(--bg-surface);
  transform: scale(1.05);
}
.kpi-value {
  font-family: var(--font-display); font-size: 42px; font-weight: 500;
  line-height: 1; color: var(--ink-strong); letter-spacing: -0.025em;
}
.kpi-value-text {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  line-height: 1.15; color: var(--ink-strong);
  letter-spacing: -0.015em; margin-top: 4px;
}
.kpi-sub { font-size: 12px; color: var(--ink-medium); margin-top: 10px; }

/* Cards */
.card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 32px; margin-bottom: 20px;
}
.card-tight { padding: 24px; }
.section-header { margin-bottom: 22px; }
.section-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  letter-spacing: -0.018em; color: var(--ink-strong); margin: 0 0 6px 0;
  display: flex; align-items: center; gap: 12px;
}
.section-sub { font-size: 14px; color: var(--ink-medium); margin: 0; }

/* Two-column grid for charts */
.split-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 20px; margin-bottom: 20px;
}
.charts-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 20px;
}

/* Plain table instruction (replaces .instructions for non-emphasized hints) */
.table-hint {
  font-size: 13px; color: var(--ink-medium);
  margin: 0 0 14px 0; font-style: italic;
}

/* Accent instructions (use sparingly — only for important callouts) */
.instructions {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px; font-size: 13px;
  color: var(--accent-deep); margin-bottom: 16px;
}
.instructions::before { content: "→"; font-weight: 700; }

/* Methodology accordion */
.methodology-details {
  margin-top: 14px;
  padding: 12px 16px;
  background:#e0ece6;
  border-radius: 4px;
  font-size: 13px;
}
.methodology-details summary {
  cursor: pointer;
  font-weight: 600; color: var(--accent-deep);
  list-style: none;
  font-size: 13px;
}
.methodology-details summary::-webkit-details-marker { display: none; }
.methodology-details summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s;
}
.methodology-details[open] summary::before {
  transform: rotate(90deg);
}
.methodology-details .method-body {
  padding-top: 12px; margin-top: 12px;
  border-top: 1px solid var(--border);
  line-height: 1.7;
  color: var(--ink-medium);
}
.methodology-details code {
  font-family: ui-monospace, monospace;
  background: var(--bg-surface);
  padding: 1px 6px; border-radius: 3px;
  color: var(--ink-strong); font-size: 12px;
}

/* Filters */
.filters-row { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-group { flex: 1; min-width: 220px; }
.filter-group-wide { flex: 2; }
.filter-label, .form-label, .info-label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-medium); margin-bottom: 8px;
}

/* Inputs — larger for better placeholder visibility */
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-input, .form-textarea {
  width: 100%; 
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-surface); font-family: var(--font-body);
  font-size: 14px; color: var(--ink-strong);
  line-height: 1.4;
  transition: border-color 0.12s ease;
}
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}
.form-input:focus, .form-textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
  border-color: var(--accent);
}
.form-textarea {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px; resize: vertical; min-height: 70px;
}

/* Dropdowns — larger to match inputs */
.form-dropdown .Select-control, .filter-dropdown .Select-control {
  border: 1px solid var(--border) !important; border-radius: 4px !important;
  background: var(--bg-surface) !important; min-height: 48px !important;
  height: auto !important;
  font-family: var(--font-body) !important;
}
.form-dropdown .Select-placeholder, .filter-dropdown .Select-placeholder,
.form-dropdown .Select-value-label, .filter-dropdown .Select-value-label {
  font-size: 14px !important; color: var(--ink-strong) !important;
  line-height: 48px !important;
  padding-left: 4px !important;
}
.form-dropdown .Select-input, .filter-dropdown .Select-input {
  height: 46px !important;
}
.form-dropdown .Select-arrow-zone, .filter-dropdown .Select-arrow-zone {
  padding-right: 10px !important;
}

/* Buttons */
.btn {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 12px 22px; border: 1px solid transparent;
  border-radius: 4px; cursor: pointer;
  transition: all 0.12s ease; letter-spacing: 0.01em;
}
.btn-primary { background: var(--ink-strong); color: var(--bg-surface); }
.btn-primary:hover { background: var(--accent); }
.btn-secondary {
  background: var(--bg-surface); color: var(--ink-strong); border-color: var(--ink-strong);
}
.btn-secondary:hover { background: var(--ink-strong); color: var(--bg-surface); }
.btn-danger {
  background: var(--bg-surface); color: var(--sev-high-text);
  border-color: var(--sev-high-border);
}
.btn-danger:hover { background: var(--sev-high-bg); }
.form-actions {
  display: flex; gap: 12px; margin-top: 24px;
  padding-top: 24px; border-top: 1px solid var(--border);
}

/* Status messages */
.status-bar { margin-bottom: 20px; }
.status-bar:empty { display: none; }
.status-success {
  padding: 14px 18px; background: var(--success-bg);
  border-left: 3px solid var(--success); color: var(--success);
  font-size: 14px; font-weight: 500; border-radius: 4px;
}
.status-warn {
  padding: 14px 18px; background: var(--warn-bg);
  border-left: 3px solid var(--warn); color: var(--warn);
  font-size: 14px; font-weight: 500; border-radius: 4px;
}
.status-error {
  padding: 14px 18px; background: var(--error-bg);
  border-left: 3px solid var(--error); color: var(--error);
  font-size: 14px; font-weight: 500; border-radius: 4px;
}
.upload-detail { margin-top: 8px; font-size: 13px; color: var(--ink-medium); font-weight: 400; }

/* Drilldown stats */
.drilldown-stats {
  padding: 14px 18px; background: #e0ece6;
  border-radius: 4px; margin-bottom: 20px; font-size: 14px;
}
.stat-bold { font-weight: 600; color: var(--ink-strong); }
.stat-sep { color: var(--ink-soft); margin: 0 8px; }
.stat { color: var(--ink-medium); }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border); border-radius: 6px;
  padding: 64px 32px; text-align: center; cursor: pointer;
  transition: all 0.15s ease; background: var(--bg-page);
}
.upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-title {
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink-strong); margin-bottom: 8px;
}
.upload-sub { font-size: 14px; color: var(--ink-medium); }
.upload-status { margin-top: 18px; min-height: 24px; }

/* Loading container — semitransparent overlay over a section */
._dash-loading {
  margin: 30px auto;
}
.dash-spinner.dash-default-spinner > div {
  background-color: var(--accent) !important;
}

/* Dataset info */
.dataset-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.info-item {
  padding: 18px 20px; background: var(--bg-page);
  border-radius: 4px; border-left: 3px solid var(--accent);
}
.info-value {
  display: block; font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink-strong);
}
.info-value-small { font-size: 15px; font-family: var(--font-body); font-weight: 500; }

/* Severity badges */
.sev-badge {
  display: inline-block; padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  border-radius: 12px; border: 1px solid transparent;
  text-transform: uppercase;
}
.sev-high { background: var(--sev-high-bg); color: var(--sev-high-text); border-color: var(--sev-high-border); }
.sev-med  { background: var(--sev-med-bg);  color: var(--sev-med-text);  border-color: var(--sev-med-border); }
.sev-low  { background: var(--sev-low-bg);  color: var(--sev-low-text);  border-color: var(--sev-low-border); }

/* Login */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: var(--bg-page);
}
.login-card {
  max-width: 460px; width: 100%;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 48px 44px;
}
.login-header { margin-bottom: 32px; }
.login-eyebrow {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.login-title {
  font-family: var(--font-display); font-size: 34px; font-weight: 500;
  letter-spacing: -0.02em; margin: 0 0 8px 0; color: var(--ink-strong);
}
.login-sub { font-size: 14px; color: var(--ink-medium); margin: 0; }
.login-form-actions { margin-top: 28px; }
.login-form-actions .btn { width: 100%; padding: 14px; }
.login-hint {
  margin-top: 18px; padding: 12px;
  background: var(--bg-subtle); border-radius: 4px;
  font-size: 12px; color: var(--ink-medium);
}
.login-hint code {
  font-family: ui-monospace, monospace;
  background: var(--bg-page); padding: 1px 5px; border-radius: 3px;
  color: var(--ink-strong); font-size: 11px;
}

/* DataTable polish */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  font-family: var(--font-body) !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  text-align: left !important;
}
.dash-table-container .row { --bs-gutter-x: 0 !important; }
.dash-spreadsheet-container .dash-spreadsheet-inner th .column-header-name,
.dash-spreadsheet-container .dash-spreadsheet-inner th .dash-header-cell-value {
  margin-right: 10px;
}
.dash-spreadsheet-container .dash-spreadsheet-inner th span.column-actions {
  float: right; margin-left: 8px;
}

/* ===========================================================
   CELL SELECTION (revised per Mon's feedback)
   Don't change font color. Use a very light teal background.
   =========================================================== */
.dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-cell.focused, .dash-cell.cell--selected {
  background-color: var(--accent-wash) !important;
  color: var(--ink-strong) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Row hover (gentler than before) */
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background-color: var(--bg-subtle) !important;
  cursor: pointer;
}
/* Make sure the hover still respects the selection color */
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td.cell--selected,
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td.focused {
  background-color: var(--accent-wash) !important;
}

/* Toast */
.toast-container {
  position: fixed; top: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  pointer-events: auto; min-width: 320px; max-width: 440px;
  padding: 14px 18px; background: var(--bg-surface);
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 4px; font-size: 14px; color: var(--ink-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  animation: toastSlideIn 0.2s ease-out;
}
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--error); }
.toast-warn { border-left-color: var(--warn); }
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Tooltip — anchored to its trigger element with absolute positioning */
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip-wrap:hover .tooltip-content {
  opacity: 1; visibility: visible;
}
.tooltip-content {
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  padding: 12px 14px;
  width: 280px;
  background: var(--ink-strong);
  color: var(--bg-surface);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
  pointer-events: none;
  white-space: normal;
}
.tooltip-content::before {
  content: "";
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--ink-strong);
}

/* Upload instructions warning panel */
.upload-instructions {
  padding: 14px 18px;
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  border-radius: 4px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--warn);
}
.upload-instructions strong { color: var(--ink-strong); }
.upload-instructions ul {
  margin: 6px 0 0 0; padding-left: 20px;
}
.upload-instructions li { margin-bottom: 4px; }

/* Responsive */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .dataset-info { grid-template-columns: 1fr; }
  .split-grid, .charts-grid { grid-template-columns: 1fr; }
  .context-controls { margin-left: 0; width: 100%; min-width: 0; }
}
@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; flex-direction: column; padding: 24px; }
  .sidebar-header { margin-bottom: 24px; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .main-content { padding: 32px 24px; }
  .page-title { font-size: 36px; }
  .kpi-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Move sort icon to RIGHT side of column label
========================================================= */

.dash-table-container .column-header-name {
    order: 1;
}

.dash-table-container .column-actions {
    order: 2;
    margin-left: 6px;
    color: #0F766E !important;
}

/* make header content inline */
.dash-table-container .column-header--sort {
    display: flex !important;
    align-items: center;
}


/* =========================================================
   Change highlighted sort color from pink to teal
========================================================= */

/* active sort icon */
.dash-table-container .column-header--sort .sort {
    color: #0f766e !important;
}

/* active ascending/descending icon */
.dash-table-container .dash-spreadsheet-container .sort-up,
.dash-table-container .dash-spreadsheet-container .sort-down {
    color: #0f766e !important;
    border-bottom-color: #0f766e !important;
    border-top-color: #0f766e !important;
}

/* optional: hover state */
.dash-table-container .column-header--sort:hover .sort {
    color: #0f766e !important;
}



/* Dash DataTable active / clicked cell */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.cell--selected {
    background-color: #E6F4F1 !important;
    border-color: #0f766e !important;
    box-shadow: inset 0 0 0 1px #0f766e !important;
}

/* Editable cell outline */
.dash-table-container input:focus,
.dash-table-container textarea:focus {
    border-color: #0f766e !important;
    outline-color: #0f766e !important;
}

/* Filter row pink Aa icon */
.dash-table-container .dash-filter input:focus,
.dash-table-container .dash-filter textarea:focus {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 1px #0f766e !important;
}

/* Filter icon hover / active */
.dash-table-container .dash-filter--case,
.dash-table-container .dash-filter--case:hover,
.dash-table-container .dash-filter--case--sensitive {
    color: #0f766e !important;
    border-color: #0f766e !important;
}

/* Sort icons */
.dash-table-container .column-actions,
.dash-table-container .column-actions:hover,
.dash-table-container .column-actions svg,
.dash-table-container .column-actions:hover svg {
    color: #0f766e !important;
    fill: #0f766e !important;
}


/* Dropdown clear x only on hover */
.dash-table-container .Select-clear:hover {
    color: #0f766e !important;
}

/* Dropdown arrow only when hovering the dropdown */
.dash-table-container .Select-control:hover .Select-arrow {
    border-top-color: #0f766e !important;
}

/* Dropdown border only on hover */
.dash-table-container .Select-control:hover {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 1px #0f766e !important;
}

/* Dropdown option hover */
.dash-table-container .VirtualizedSelectOption:hover,
.dash-table-container .VirtualizedSelectFocusedOption {
    background-color: #E6F4F1 !important;
    color: #0f766e !important;
}

.dash-table-container .Select-clear {
    display: none !important;
}

/* Inline DataTable dropdown menu text */
.Select-menu-outer .VirtualizedSelectOption,
.Select-menu-outer .VirtualizedSelectFocusedOption,
.Select-menu-outer .VirtualizedSelectSelectedOption {
    color: #1F1F1F !important;
}

/* Hovered dropdown option */
.Select-menu-outer .VirtualizedSelectFocusedOption {
    background-color: #E6F4F1 !important;
    color: #0f766e !important;
}

/* Selected/active dropdown option */
.Select-menu-outer .VirtualizedSelectSelectedOption {
    background-color: #FFFFFF !important;
    color: #1F1F1F !important;
}

/* Current selected value inside the cell */
.Select .Select-value-label,
.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label {
    color: #1F1F1F !important;
}

/* Search/input text while dropdown is open */
.Select-input > input {
    color: #1F1F1F !important;
}

/* Inline DataTable dropdown option text */
.dash-table-container .Select-option,
.Select-menu-outer .Select-option {
    color: #1F1F1F !important;
}

/* Hovered/focused option */
.dash-table-container .Select-option.is-focused,
.Select-menu-outer .Select-option.is-focused {
    background-color: #E6F4F1 !important;
    color: #0f766e !important;
}

/* Selected option */
.dash-table-container .Select-option.is-selected,
.Select-menu-outer .Select-option.is-selected {
    background-color: #FFFFFF !important;
    color: #1F1F1F !important;
    font-weight: 600;
}

/* Current value shown inside the editable cell */
.dash-table-container .Select-value-label


/* Selected/focused DataTable cell */
.dash-table-container td.cell--selected,
.dash-table-container td.focused {
    border: 1px solid #0f766e !important;
    box-shadow: none !important;
    outline: none !important;
    color: #1F1F1F !important;
}

/* Prevent text from turning white/pink */
.dash-table-container td.cell--selected *,
.dash-table-container td.focused * {
    color: #1F1F1F !important;
}

/* Remove pink active outline */
.dash-table-container .dash-cell.focused {
    box-shadow: none !important;
}