/*
 * en-overrides.css — small layout fixes for the English replica.
 * The original login form sizes its label column for 3-character Chinese labels
 * (label-width 5.5rem); longer English labels ("Verification code", "Phone number")
 * overflowed/clipped. Scoped to .screen-login so the rest of the app is untouched.
 */

/* Let login labels size to their text, with a shared min-width so inputs stay aligned. */
.screen-login .el-form-item__label {
  width: auto !important;
  min-width: 7rem !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-align: left !important;
  padding-right: 10px !important;
  overflow: visible !important;
}

/* Keep the account/phone tabs from being clipped by the nav wrapper. */
.screen-login .el-tabs__nav-wrap { overflow: visible !important; }
.screen-login .el-tabs__nav { justify-content: flex-start !important; }
.screen-login .el-tabs__item { padding: 0 12px !important; }

/* Give the form column a touch more room for the wider English labels. */
.screen-login .sideBar-form,
.screen-login .el-tabs,
.screen-login .el-form { width: 380px !important; }

/* =========================================================================
 * App-wide: English labels are wider than the Chinese they replaced, so any
 * component whose label column / cell was sized for 2-4 CJK characters can
 * clip or ellipsis-truncate the English text. The safe, universal fix is to
 * let that text WRAP instead of truncating — no text is lost and column widths
 * are unchanged, so alignment is preserved (the element just grows taller).
 * Scoped to label/header/option text only; chart (ECharts/canvas) is untouched.
 * ========================================================================= */

/* Form-item labels (search/filter bars, dialogs, edit forms — all form types) */
.el-form-item__label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  line-height: 1.25 !important;
  word-break: normal !important;
}

/* Table cells (header AND body): wrap long English values (road names, "Secondary road",
 * fence types…) instead of truncating them mid-word. Rows grow taller as needed. */
.el-table th.el-table__cell > .cell,
.el-table th .cell,
.el-table__header th .cell,
.el-table td .cell,
.el-table .cell {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

/* Custom big-screen "Maintenance Unit Management" dropdown: keep its text inside its box. */
.maintenance-company,
.maintenance-company.el-tooltip__trigger {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  word-break: normal !important;
}

/* Descriptions (label / value grids used on detail pages) */
.el-descriptions__label,
.el-descriptions__content,
.el-descriptions__cell {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
}

/* Option-style labels: radio buttons, radios, checkboxes, segmented controls */
.el-radio-button__inner,
.el-radio__label,
.el-checkbox__label,
.el-segmented__item-label {
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* Custom big-screen panel/module titles (class "title", fixed ~167px, ellipsis-clipped).
 * Let the English title use its full text without truncation. */
.title.el-tooltip__trigger {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
}

/* =========================================================================
 * Big-screen dashboard overflow fixes — the custom (non-Element-Plus) widgets
 * were pixel-sized for short Chinese labels, so longer English clips/spills.
 * ========================================================================= */

/* Road/fence-name buttons in list tables (was nowrap + ellipsis, ~197 on Overview):
 * wrap to as many lines as needed instead of truncating. */
.table-btn {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

/* "Maintenance Unit Management" map control — its box was ~70px (6 CJK chars). */
.left-btns,
.map-left-btns {
  width: auto !important;
  min-width: 150px !important;
  max-width: 230px !important;
}
.maintenance-company,
.maintenance-company.el-tooltip__trigger {
  white-space: normal !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* Custom panel headers (.header-norm): a long English title ("Work order
 * distribution") pushed the right-side link ("Section management") off the panel.
 * Shrink both a touch and stop the header from clipping so they coexist. */
.header-norm,
.header-norm .header { overflow: visible !important; }
/* Only shrink the title when the header also has a right-side link (i.e. .left has a
 * sibling) — simple single-title headers keep their normal size. */
.header-norm .header > .left:not(:only-child),
.header-norm .header > .left:not(:only-child) * { font-size: 12px !important; letter-spacing: 0 !important; }
.header-norm .header > .left:not(:only-child) ~ * {
  font-size: 11px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* Menu / dropdown / select / step / tab labels */
.el-tabs__item,
.el-step__title,
.el-menu-item,
.el-sub-menu__title,
.el-dropdown-menu__item,
.el-select-dropdown__item {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
}