/*
 * Shared styling for both frappe-gantt charts in the app (the editable
 * per-project stage chart and the read-only per-project-type list chart).
 * Per-row/per-stage colors come from data, not CSS - the JS controllers set
 * a --bar-fill custom property on each bar-wrapper element instead of
 * generating a <style> block with one dynamically-named class per record.
 */

.gantt .bar-label {
  font-weight: bold;
}

/* frappe-gantt's default label fill only follows the light/dark theme, not
   our per-bar --bar-fill color - a light bar in dark mode would otherwise
   render light text on a light bar. --bar-label-color is computed in JS
   (gantt_bar_colors.js) from that bar's actual color. */
.gantt .bar-wrapper .bar-label:not(.big) {
  fill: var(--bar-label-color, var(--g-text-dark, #171717));
}

.gantt .bar-progress {
  fill: rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .gantt .bar-progress {
  fill: rgba(255, 255, 255, 0.25);
}

.gantt .bar-wrapper .bar,
.gantt .bar-wrapper:hover .bar,
.gantt .bar-wrapper.active .bar {
  fill: var(--bar-fill, #6c757d);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  /* Tells the browser which palette to use for controls it renders itself
     (native select popups, date pickers, checkboxes, scrollbars) - without
     this they stay light-chrome even while data-bs-theme is "dark". */
  color-scheme: light;
  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;
  --bs-success: #059669;
  --bs-success-rgb: 5, 150, 105;
  --bs-danger: #DC2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-body-bg: #F8FAFC;
  --bs-body-bg-rgb: 248, 250, 252;
  --bs-body-color: #1E293B;
  --bs-body-color-rgb: 30, 41, 59;
  --bs-border-color: #E2E8F0;
  --bs-tertiary-bg: #E9EFF8;
  --bs-tertiary-bg-rgb: 233, 239, 248;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #1E40AF;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.35rem;
  --bs-border-radius-lg: 0.65rem;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-primary: #3B82F6;
  --bs-primary-rgb: 59, 130, 246;
  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-danger: #EF4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-body-bg: #0F172A;
  --bs-body-bg-rgb: 15, 23, 42;
  --bs-body-color: #F1F5F9;
  --bs-body-color-rgb: 241, 245, 249;
  --bs-border-color: #334155;
  --bs-tertiary-bg: #1E293B;
  --bs-tertiary-bg-rgb: 30, 41, 59;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #93C5FD;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #0F172A;
  --bs-btn-hover-color: #0F172A;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #1E40AF;
  --bs-btn-hover-border-color: #1E40AF;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}

/* Bootstrap hardcodes .btn-outline-* colors from its own build-time SCSS
   variables, not var(--bs-*) - without this override they keep Bootstrap's
   default gray/red, which drops under 4.5:1 against our darker dark-mode
   surfaces. Tie color+border to body-color so it always matches the theme;
   hover inverts to body-bg for the same contrast in both directions. */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
}

/* Bright dark-mode danger red under white hover text falls to ~3.8:1;
   dark text on that same red clears 4.5:1 (mirrors the dark .btn-primary fix below). */
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-hover-color: #0F172A;
  --bs-btn-active-color: #0F172A;
}

/* Bootstrap's navbar-nav hover is opacity-only (.65 -> .8) on already-legible
   text - the state change is real but barely perceptible. Add a visible
   background so hover actually reads as hover. */
.navbar-nav .nav-link:hover {
  background-color: var(--bs-tertiary-bg);
  border-radius: var(--bs-border-radius-sm);
}

.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.avance-input {
  width: 4.5rem;
  text-align: center;
  background-color: var(--bs-tertiary-bg);
  border-radius: 999px;
}

.fecha-input {
  max-width: 130px;
}

.card {
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
  border: 1px solid var(--bs-border-color);
}

.card-header {
  background-color: var(--bs-tertiary-bg);
  font-weight: 600;
}

.nav-tabs .nav-link.active {
  color: var(--bs-primary);
  border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  font-weight: 600;
}

.table {
  --bs-table-border-color: var(--bs-border-color);
}

.table thead th {
  font-weight: 600;
  color: var(--bs-body-color);
}

.badge {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.modal-body h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
}

.modal-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bs-primary);
  margin-top: 1.25rem;
}

.modal-body > :last-child {
  margin-bottom: 0;
}

/* tom-select's bootstrap5 theme hardcodes text color to #343a40 (a fixed
   dark gray) instead of following --bs-body-color, so its dropdown options
   and selected value become nearly invisible on our dark surfaces. */
[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-control input,
[data-bs-theme="dark"] .ts-dropdown {
  color: var(--bs-body-color);
}

/* Trix's toolbar bakes its icons in as black-stroke SVG data-URIs and its
   button text as rgba(0,0,0,...) - neither follows --bs-body-color, so both
   go nearly invisible against our dark surfaces. Invert the icons (flips
   black strokes to white) and flip the text color, dark mode only. */
[data-bs-theme="dark"] trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

[data-bs-theme="dark"] trix-toolbar .trix-button {
  color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] trix-toolbar .trix-button:disabled {
  color: rgba(255, 255, 255, 0.125);
}