/* BIMAS ERP — shared form-control system.
   Keeps labels, fields, help text and responsive form rows consistent across
   every department without changing any module's data or workflow. */

html[data-auth-ready="app"] #app-content {
  --bimas-field-height: 44px;
  --bimas-field-radius: 10px;
  --bimas-field-border: #b8cae0;
  --bimas-field-hover: #8fb0d5;
  --bimas-field-focus: #126ce5;
  --bimas-field-ring: rgba(18, 108, 229, .16);
  --bimas-field-bg: #fff;
  --bimas-field-text: #102746;
  --bimas-field-label: #314b69;
  --bimas-field-help: #627792;
  --bimas-field-placeholder: #7d8da2;
  --bimas-field-disabled: #eef3f8;
}

/* Give every field cell a real shrink boundary. This prevents paired fields
   such as Movement Type and Department from colliding in narrow panels. */
html[data-auth-ready="app"] #app-content :is(
  .form-grid,.form-grid-2,.form-grid-3,.form-grid-4,.bmv3-grid-2,
  [class$="-form-grid"],[class$="-filter-grid"],[class$="-details-grid"]
) > * {
  min-width: 0 !important;
}

/* Labels remain readable and sit on a consistent baseline. Checkbox/radio
   captions retain their module-specific inline layout. */
html[data-auth-ready="app"] #app-content :is(
  .form-label,.field-label,.bmv3-label,
  label:not(:has(input[type="checkbox"],input[type="radio"],input[type="range"])),
  label:not(:has(> input[type="checkbox"],> input[type="radio"],> input[type="range"]))
) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 0 .38rem !important;
  color: var(--bimas-field-label) !important;
  font-family: var(--font-display,"Plus Jakarta Sans",Inter,system-ui,sans-serif) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

html[data-auth-ready="app"] #app-content :is(
  .req,.required-marker,.field-required,.form-required,
  .form-label.required::after
) {
  color: #cf2538 !important;
  font-weight: 900 !important;
}

/* One control language across normal forms, filters and the newer bmv3
   dashboards. Dense controls inside tables are handled separately below. */
html[data-auth-ready="app"] #app-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select:not([multiple]),textarea,.form-input,.form-control,.form-select,.bmv3-input
) {
  box-sizing: border-box !important;
  width: 100%;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: var(--bimas-field-height) !important;
  padding: .65rem .85rem !important;
  border: 1px solid var(--bimas-field-border) !important;
  border-radius: var(--bimas-field-radius) !important;
  background-color: var(--bimas-field-bg) !important;
  color: var(--bimas-field-text) !important;
  -webkit-text-fill-color: var(--bimas-field-text) !important;
  font-family: var(--font-body,Inter,system-ui,sans-serif) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
  box-shadow: 0 1px 2px rgba(7,34,75,.035) !important;
  transition: border-color .16s ease,box-shadow .16s ease,background-color .16s ease !important;
}

html[data-auth-ready="app"] #app-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select:not([multiple]),.form-input,.form-control,.form-select,.bmv3-input
):not(textarea) {
  height: var(--bimas-field-height) !important;
}

html[data-auth-ready="app"] #app-content textarea,
html[data-auth-ready="app"] #app-content textarea.bmv3-input {
  height: auto !important;
  min-height: 96px !important;
  resize: vertical;
}

html[data-auth-ready="app"] #app-content select:not([multiple]) {
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 2.55rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23375070' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .78rem center !important;
  background-size: 1rem 1rem !important;
}

html[data-auth-ready="app"] #app-content :is(input,select,textarea)::placeholder {
  color: var(--bimas-field-placeholder) !important;
  -webkit-text-fill-color: var(--bimas-field-placeholder) !important;
  opacity: 1 !important;
  font-weight: 480 !important;
}

html[data-auth-ready="app"] #app-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,
  .form-input,.form-control,.form-select,.bmv3-input
):hover:not(:disabled):not([readonly]) {
  border-color: var(--bimas-field-hover) !important;
}

html[data-auth-ready="app"] #app-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,
  .form-input,.form-control,.form-select,.bmv3-input
):focus,
html[data-auth-ready="app"] #app-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,
  .form-input,.form-control,.form-select,.bmv3-input
):focus-visible {
  border-color: var(--bimas-field-focus) !important;
  outline: 2px solid transparent !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px var(--bimas-field-ring),0 1px 2px rgba(7,34,75,.05) !important;
}

html[data-auth-ready="app"] #app-content :is(input,select,textarea):is(:disabled,[readonly]) {
  border-color: #cfdae7 !important;
  background-color: var(--bimas-field-disabled) !important;
  color: #63758a !important;
  -webkit-text-fill-color: #63758a !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

html[data-auth-ready="app"] #app-content :is(input,select,textarea)[aria-invalid="true"] {
  border-color: #d72b3f !important;
  box-shadow: 0 0 0 3px rgba(215,43,63,.12) !important;
}

/* Supporting guidance must be readable, but visually secondary. */
html[data-auth-ready="app"] #app-content :is(
  .bmv3-hint,.form-hint,.field-hint,.form-help,.field-help,.help-text,.helper-text,
  .form-description,.field-description
) {
  display: block;
  max-width: 100%;
  margin: .35rem 0 0 !important;
  color: var(--bimas-field-help) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

/* Dashboard forms use a predictable desktop pair and become a single,
   generous touch column on phones and compact tablets. */
html[data-auth-ready="app"] #app-content .bmv3-grid-2 {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  align-items: start !important;
  gap: 1rem !important;
}

/* Keep editable cells compact enough for operational registers. */
html[data-auth-ready="app"] #app-content :is(table,.data-table) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select:not([multiple]),.form-control,.form-select
) {
  min-height: 36px !important;
  height: 36px !important;
  padding-block: .38rem !important;
  font-size: 13px !important;
}

/* Dark mode uses explicit high-contrast field tokens. Native option lists
   inherit the same scheme so selected text remains visible on every device. */
html[data-theme="dark"][data-auth-ready="app"] #app-content {
  --bimas-field-border: #465d7b;
  --bimas-field-hover: #6685aa;
  --bimas-field-focus: #69aaff;
  --bimas-field-ring: rgba(105,170,255,.23);
  --bimas-field-bg: #111d31;
  --bimas-field-text: #f1f6ff;
  --bimas-field-label: #e3ecf8;
  --bimas-field-help: #b2c2d6;
  --bimas-field-placeholder: #9eafc4;
  --bimas-field-disabled: #19263b;
  color-scheme: dark;
}

html[data-theme="dark"][data-auth-ready="app"] #app-content select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23d8e6f8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}

html[data-theme="dark"][data-auth-ready="app"] #app-content select option {
  background: #111d31 !important;
  color: #f1f6ff !important;
}

html[data-theme="dark"][data-auth-ready="app"] #app-content :is(input,select,textarea):is(:disabled,[readonly]) {
  border-color: #344961 !important;
  background-color: var(--bimas-field-disabled) !important;
  color: #aebdd0 !important;
  -webkit-text-fill-color: #aebdd0 !important;
}

/* The dashboard harmony layer is intentionally compact and uses a highly
   specific selector. These compatibility rules keep operational forms at the
   accessible shared size while preserving compact editors inside tables. */
html[data-auth-ready="app"] #app-content#app-content#app-content#app-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select:not([multiple]),.form-input,.form-control,.form-select,.bmv3-input
):not(textarea) {
  min-height: var(--bimas-field-height) !important;
  height: var(--bimas-field-height) !important;
  max-height: none !important;
  padding: .65rem .85rem !important;
  border: 1px solid var(--bimas-field-border) !important;
  border-radius: var(--bimas-field-radius) !important;
  background-color: var(--bimas-field-bg) !important;
  color: var(--bimas-field-text) !important;
  -webkit-text-fill-color: var(--bimas-field-text) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
}

html[data-auth-ready="app"] #app-content#app-content#app-content#app-content :is(
  .form-label,.field-label,.bmv3-label,
  label:not(:has(input[type="checkbox"],input[type="radio"],input[type="range"]))
) {
  margin: 0 0 .38rem !important;
  color: var(--bimas-field-label) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
}

html[data-auth-ready="app"] #app-content#app-content#app-content#app-content :is(
  .bmv3-hint,.form-hint,.field-hint,.form-help,.field-help,.help-text,.helper-text,
  .form-description,.field-description
) {
  color: var(--bimas-field-help) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
  line-height: 1.45 !important;
}

html[data-auth-ready="app"] #app-content#app-content#app-content#app-content select:not([multiple]) {
  padding-right: 2.55rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23375070' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .78rem center !important;
  background-size: 1rem 1rem !important;
}

html[data-auth-ready="app"] #app-content#app-content#app-content#app-content textarea {
  height: auto !important;
  min-height: 96px !important;
  max-height: none !important;
  padding: .65rem .85rem !important;
  border: 1px solid var(--bimas-field-border) !important;
  border-radius: var(--bimas-field-radius) !important;
  background-color: var(--bimas-field-bg) !important;
  color: var(--bimas-field-text) !important;
  -webkit-text-fill-color: var(--bimas-field-text) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html[data-theme="dark"][data-auth-ready="app"] #app-content#app-content#app-content#app-content select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23d8e6f8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}

html[data-auth-ready="app"] #app-content#app-content#app-content#app-content :is(table,.data-table) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select:not([multiple]),.form-control,.form-select
) {
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
  padding-block: .38rem !important;
  font-size: 13px !important;
}

@media (max-width: 760px) {
  html[data-auth-ready="app"] #app-content .bmv3-grid-2,
  html[data-auth-ready="app"] #app-content :is(.form-grid-2,.form-grid-3,.form-grid-4) {
    grid-template-columns: minmax(0,1fr) !important;
  }

  html[data-auth-ready="app"] #app-content :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select:not([multiple]),textarea,.form-input,.form-control,.form-select,.bmv3-input
  ) {
    font-size: 16px !important;
  }

  html[data-auth-ready="app"] #app-content#app-content#app-content#app-content :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select:not([multiple]),.form-input,.form-control,.form-select,.bmv3-input
  ):not(textarea) {
    min-height: 48px !important;
    height: 48px !important;
    max-height: none !important;
    font-size: 16px !important;
  }

  html[data-auth-ready="app"] #app-content :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select:not([multiple]),.form-input,.form-control,.form-select,.bmv3-input
  ):not(textarea) {
    min-height: 48px !important;
    height: 48px !important;
  }

  html[data-auth-ready="app"] #app-content :is(table,.data-table) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select:not([multiple]),.form-control,.form-select
  ) {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }
}

@media print {
  html[data-auth-ready="app"] #app-content :is(input,select,textarea) {
    box-shadow: none !important;
    border-color: #aeb9c6 !important;
    background: #fff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
}