/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
  Soft UI Dashboard resets button/input[submit] background-color to transparent
  outside of any @layer, which overrides Tailwind utilities (inside @layer).
  This rule restores background control to Tailwind by removing the reset.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  background-color: revert-layer;
  background-image: revert-layer;
}

/* Sidenav link colors — un-layered so Soft UI's global a{} reset cannot override */
#sidenav-main ul a { color: #475569; } /* slate-600 */

.turbo-progress-bar { display: none; }

/* VEN code links — same Soft UI a{} override problem as above */
.ven-code-link       { color: #fff; }
.ven-code-link-black { color: #000; }

/* Operation code links (non-VEN) — same Soft UI a{} override problem as above */
.op-code-link-black { color: #000; }

.border-red-400 {
  border-color: #f87171;
}
.border-red-400:focus {
  border-color: #f87171;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.border-black {
  border-color: #000000 !important;
}

.rounded-none {
  border-radius: 0 !important;
}

.border   { border-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }

.border-collapse {
  border-collapse: collapse;
}

.table-bordered td,
.table-bordered th {
  border-top: 1px solid black !important;
  border-right: 1px solid black !important;
  border-bottom: 1px solid black !important;
  border-left: 1px solid black !important;
}

.ac-table.table-bordered tbody tr td {
  border-top: 1px solid black !important;
  border-right: 1px solid black !important;
  border-bottom: 1px solid black !important;
  border-left: 1px solid black !important;
}

.ac-table td {
  font-size: 0.75rem;
  line-height: 1rem;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 8px;
  padding-right: 8px;
}

.ac-table.dev-table td {
  padding-top: 0;
  padding-bottom: 0;
}

/* Flat white UI — no shadows, no gradients */
* {
  box-shadow: none !important;
  text-shadow: none !important;
}

[class*="bg-gradient"] {
  background-image: none !important;
}

/* Workflow accept/confirm buttons — always rendered. The actionable one is
   colored, the other 2 are gray and :disabled (see systemic
   "SIEMPRE DEBEN APARECER TODOS LOS BOTONES..." Basecamp ticket). */
.wf-btn {
  color: white;
  transition: background-color 0.15s ease-in-out;
}
.wf-btn:disabled {
  background-color: #9CA3AF;
  cursor: not-allowed;
  opacity: 0.6;
}
.wf-btn-accept:not(:disabled)  { background-color: #E67E22; }
.wf-btn-confirm:not(:disabled) { background-color: #2ecc71; }
.wf-btn-accept:not(:disabled):hover  { background-color: #cf701d; }
.wf-btn-confirm:not(:disabled):hover { background-color: #27b464; }

/* Hidden until badge_align_controller#align positions it — prevents a visible
   jump from the unaligned to the aligned position on first paint. */
[data-badge-align-target="button"],
[data-badge-align-target="label"] {
  visibility: hidden;
}

/* crud_table_helper#render_cell (shared, used by RES/COM/VEN too — not to be
   modified) wraps every value in a "text-xs" span/link left over from the old
   Soft UI table. That size is set directly on the child, so it wins over the
   new Frontend::Table::CellComponent's text-base on the <td> by inheritance,
   not by specificity — scoped here to only the new frontend table. */
table.table-fixed td.text-table-cell-text .text-xs {
  font-size: inherit;
}

/* Nueva SUS field rows (spec 010) — form_helper.rb's autocomplete_field/numeric_money_field/
   input_css are shared across every form in the app (old Soft UI look: rounded-lg, own border,
   padding) and can't be modified without affecting every other screen. Flatten them only inside
   the new Frontend::Form::FieldRowComponent value cell so the input fills it edge-to-edge —
   the cell itself already draws the border Figma asks for. */
.w-form-value > * {
  width: 100%;
  align-self: stretch;
}
.w-form-value input[type="text"]:not(.border-red-400),
.w-form-value input[type="date"] {
  border: none;
}
.w-form-value input[type="text"],
.w-form-value input[type="date"] {
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  height: 100%;
  /* input_css's dark:text-white/80 (Soft UI dark mode) makes typed text invisible
     against this cell's white background when the OS/browser prefers dark mode —
     the new design has no dark mode, so force light-mode colors unconditionally. */
  color: #000000;
  /* Figma right-aligns every value in this form, real input or static preview alike
     (confirmed pixel-for-pixel: every row's text ends flush at the same right edge,
     including free-text ones like Titular) — inputs default to left, so this
     explicitly matches that for the 4 real fields too. */
  text-align: right;
  /* input_css sets text-sm (14px); every value in this form — static preview or real
     input — is 16px per Basecamp. Without this the 4 real fields render 2px smaller
     than the other 6, most visible once Titular switched to a serif font. */
  font-size: 16px;
  font-weight: 350;
}
.w-form-value input[type="text"]::placeholder {
  color: #6b7280;
}

.w-form-value [data-res-tipo-target="amountWrapper"] {
  display: flex;
}
.w-form-value [data-res-tipo-target="amountWrapper"] > div {
  flex: 1;
}

.w-form-value select {
  border: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  height: 100%;
  color: #000000;
  text-align: right;
  text-align-last: right;
  font-size: 16px;
  font-weight: 350;
}

/* ApplicationFormBuilder (shared by every form in the app, not to be modified) auto-
   appends a <p class="text-xs text-red-500..."> error message after every invalid
   field. Inside this fixed-width value cell that extra flex sibling breaks the row
   (fights the input for width, overflows past the button). The red border it also
   applies (via inject_error_class!, a separate mechanism) already signals the error,
   so the message text itself is simply hidden here — nothing else changes. */
.w-form-value p {
  display: none;
}

/* Basecamp's own typography panel for the Titular value (task 10336131148) reports
   Crimson Text — applied as asked, scoped to just this field via the wrapper div in
   _new_form.html.erb so it doesn't leak into the other 3 real inputs. The wrapper's
   own direct child (autocomplete_field's positioning div) needs an explicit height
   here because percentage heights don't resolve through an auto-height ancestor. */
.font-titular-value > div {
  height: 100%;
}
.font-titular-value input[type="text"] {
  font-family: var(--font-crimson);
}

.border-t-form-label-bg {
  border-top-color: var(--color-form-label-bg);
}

/* Cargar/Confirmar RES (spec 014) — the inline edit controls reuse form_helper.rb's shared
   numeric_money_field markup and Ui::SearchableSelectComponent, both styled for the old Soft UI
   look. Flatten them inside the phase value cell so they sit edge-to-edge like the static rows. */
.w-phase-data-value form {
  width: 100%;
}
.w-phase-data-value input[type="text"] {
  border: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  height: 100%;
  color: #000000;
  text-align: right;
  font-size: 14px;
  box-shadow: none;
}

/* Chrome ignores text-align on input[type="date"]: the editable segments live in a shadow
   element that has to be stretched and right-aligned itself. */
.w-form-value input[type="date"]::-webkit-datetime-edit {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  padding: 0;
}

.border-b-form-label-bg {
  border-bottom-color: var(--color-form-label-bg);
}