/* Settings sub-pages (Property Sub-Type, Room Category, ...) — shared,
   page-scoped layout for the "Create New X" form card + "X List" table
   card pattern every one of these master-data pages follows. */

/* User Roles Create/Edit User: overrides the shared .plx-card's
   overflow:hidden (cards.css — there to clip content to the card's own
   rounded corners) so the Phone Number field's country-picker dropdown
   (.plx-country-dropdown, position:absolute, booking-engine.css) isn't
   clipped/cut off by the card. Same fix booking-engine.css applies to
   its own wizard card for the same reason. Scoped via :has() to just the
   card holding the phone field, not the permissions card below it. */
.plx-card:has(.plx-phone-input-searchable) {
  overflow: visible;
}

/* Matched to Rooms Configuration's own table (#plxRoomsTableJs,
   properties.css) — flush inside the card, no separate boxed wrap; the
   card's own border (.plx-card-muted, already on this card) is the only
   framing, same as Rooms Configuration's card. A prior version boxed this
   wrap in its own border/radius/margin — dropped so the two tables read
   as the same component, not lookalikes. */
.plx-settings-table-wrap {
  overflow-x: auto;
}

.plx-settings-table-wrap thead th {
  background: var(--bg-thead);
}

/* JS-driven counterpart to .plx-table tbody tr:last-child td (tables.css,
   removes 0) — that CSS-only rule can't react to filtering, which hides
   rows via display:none rather than removing them from the DOM, so the
   actual last DOM row keeps :last-child even while hidden. Applied by
   settings-property-sub-type.js on every filter pass. */
.plx-settings-table-wrap tbody tr.plx-row-last-visible td {
  border-bottom: 0;
}

/* A rowspanned Sr. No./Property Type cell (e.g. House Villa's "5") is a DOM
   child of its group's FIRST row, but renders all the way down to the
   bottom of the LAST row it spans — so once that group is the table's last
   visible one, this cell's own border-bottom is the line sitting on top of
   the wrap's outer border, same double-line problem plx-row-last-visible
   solves for ordinary cells. Scoped to td[rowspan] only so the first row's
   OTHER cells keep their real divider against the row below (e.g. Luxury
   Villa/Single Family) — only the merged cell itself skips it. */
.plx-settings-table-wrap tbody tr.plx-row-last-visible-group td[rowspan] {
  border-bottom: 0;
}

/* Row divider matched to the wrap's own border color (--border-default),
   not the table's default --border-subtle, so every horizontal line reads
   at the same weight as the outer box around it. Qualified with
   thead/tbody (not just th/td) to out-specificity .plx-table thead th's
   own border-bottom-color: var(--pm-accent) (components/tables.css),
   which otherwise wins the header row on equal-specificity cascade order. */
.plx-settings-table-wrap thead th,
.plx-settings-table-wrap tbody td {
  border-bottom-color: var(--border-default);
  position: relative;
}

/* Vertical column dividers, per Figma — same inset ::before technique used
   by Manage Bookings' own Room Inventory/Check-in-Check-out/Conversion
   History tables (manage-bookings.css) rather than a real border-right,
   which would run the full cell height instead of reading as a per-row
   segment. Every row gets one (head + body alike), not just the first —
   including a rowspanned Sr. No./Property Type cell, on purpose: an
   earlier version gave those a real full-height border-right instead
   (copying #plxRoomsTableJs's own td[rowspan] rule, properties.css), but
   that rendered as one unbroken line while every other column's divider
   reads as short per-row segments — a real style mismatch, not a
   lookalike difference in a table that otherwise has no rowspan cells to
   compare against. Every column divider here uses the one inset technique
   instead, rowspan included, so the divider style itself stays uniform
   across the whole table regardless of what any given column's data looks
   like. */
.plx-settings-table-wrap th:not(:last-child)::before,
.plx-settings-table-wrap td:not(:last-child)::before {
  bottom: var(--space-2);
  content: '';
  position: absolute;
  right: 0;
  top: var(--space-2);
  width: 1px;
}

/* One color, --border-default, for both head and body dividers, no
   thead-specific override — matches Rooms Configuration's own
   #plxRoomsTableJs divider rule (properties.css) exactly. */
.plx-settings-table-wrap thead th:not(:last-child)::before,
.plx-settings-table-wrap tbody td:not(:last-child)::before {
  /* background: var(--border-default); */
  background: var(--border-medium);
}

.plx-settings-create-header {
  background-color: var(--bg-hover);
}

.plx-settings-create-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.plx-settings-create-row .plx-form-group {
  flex: 1 1 220px;
  margin-bottom: 0;
  min-width: 220px;
}

/* Taxation's create row has 4 fields (Country/Currency/Tax Name/Tax %)
   instead of the 2-3 every other Settings create-row has — the shared
   220px min-width above pushes its own total past a typical desktop
   width and wraps to 2 lines. Narrower min-width keeps it on one line at
   desktop widths; the existing 767.98px breakpoint below already resets
   flex-basis/min-width to auto on every .plx-form-group regardless of
   this modifier, so mobile stacking is untouched. */
.plx-settings-create-row-compact .plx-form-group {
  flex-basis: 160px;
  min-width: 160px;
}

.plx-settings-create-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

/* Other Charges' "Food & Beverage Charge?" field — a checkbox + label,
   but the Figma reference boxes it the same way every other field in this
   row is boxed (border/height matching .plx-input), not a bare checkbox
   floating next to plain text. .plx-checkbox-group already handles the
   checkbox+label flex layout; this just gives that group the surrounding
   box. */
.plx-settings-checkbox-field {
  align-items: center;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  height: var(--space-8);
  padding: 0 var(--space-3);
}

.plx-settings-checkbox-field .plx-checkbox-group {
  gap: var(--space-2);
}

/* .plx-label defaults to semibold for real field labels (Category Name,
   Tax Name, ...) — this is inline text next to a checkbox, not a field
   label of its own, and the Figma reference renders it in the same
   regular weight as ordinary body copy. */
.plx-settings-checkbox-field .plx-label {
  font-weight: var(--weight-regular);
  margin: 0;
}

/* Other Charges' own info banner — a plain informational note below the
   create-row, not a status/severity alert, so it borrows the same pale
   lavender/blue pairing as .plx-pill-type rather than a red/green/amber
   alert token. */
.plx-settings-info-banner {
  align-items: flex-start;
  background: var(--pm-accent-light);
  border-radius: var(--radius-md);
  color: var(--color-booked);
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.plx-settings-info-banner .plx-icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.plx-settings-list-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.plx-settings-list-filters .plx-search-input {
  flex: 0 0 auto;
  width: 240px;
}

.plx-settings-list-filters .plx-select {
  flex: 0 0 auto;
  width: 160px;
}

.plx-settings-table-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-4);
}

.plx-settings-table-footer .plx-pagination {
  padding: 0;
}

.plx-settings-table-footer-info {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Empty-state message shown inside the list card when a settings list has
   no rows. Re-declared here since properties.css/operations.css (which own
   the other copies) are never loaded on settings pages. */
.plx-cards-empty {
  color: var(--text-muted);
  font-size: var(--text-base);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

/* Rows-per-page pilot (see the blade comment above
   #plxPropertySubTypePageLengthJs) — sits in the card header alongside the
   other .plx-settings-list-filters controls (search/status), same spot the
   Rooms Configuration pilot uses next to "Add Room(s)". Narrower than the
   160px every other filter select in this row gets, since "50 / page" is
   much shorter text than "All Statuses". */
.plx-settings-list-filters .plx-page-length-select-js {
  width: 110px;
}

/* Fixed bottom bar, same treatment as OTA Allotments' own
   .plx-ota-back-footer-bar (operations.css) and Properties'
   .plx-property-back-footer-bar (properties.css) — this row used to sit
   in-flow at the bottom of the content, scrolling with the page. */
.plx-settings-back-row {
  align-items: center;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  bottom: 0;
  box-shadow: 0 -4px 12px rgba(17, 24, 39, 0.05);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  left: var(--sidebar-width);
  padding: var(--space-3) var(--space-6);
  position: fixed;
  right: 0;
  z-index: 1015;
}

.plx-page-has-sticky-footer {
  padding-bottom: 96px;
}

/* User Roles' own in-page header (title/desc + Back/Create actions) — this
   page is a drill-down from the Settings hub rather than a standalone
   master-data page, so it keeps the hub's own global header ("Settings")
   unchanged and adds this row below it instead, same relationship
   properties/show.blade.php's .plx-property-header-row has to its own
   global "Manage Properties" header. */
.plx-settings-page-header-row {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.plx-settings-page-header-row .plx-section-title {
  font-size: var(--text-xl);
}

/* Edit User's own header title — "Edit User - {name}" + a role pill inline
   next to it (Create's own header has no pill, just plain text). */
.plx-uac-title-with-pill {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.plx-settings-page-header-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.plx-settings-page-header-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
}

/* Create New User — "Assign Properties to {role}" card (3-column
   type/property/permissions picker). Page-scoped to this one flow, own
   .plx-uac-* prefix (Assign Properties tree isn't used anywhere else). */
.plx-uac-card {
  margin-top: var(--space-6);
}

.plx-uac-hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plx-uac-columns {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}

.plx-uac-col {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.plx-uac-col-header {
  align-items: center;
  background: var(--bg-thead);
  border-bottom: 1px solid var(--border-default);
  color: var(--pm-primary);
  display: flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.plx-uac-col-body {
  max-height: 340px;
  overflow-y: auto;
}

.plx-uac-row {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.plx-uac-row:last-child {
  border-bottom: 0;
}

.plx-uac-row[data-plx-active="true"] {
  background: var(--pm-accent-light);
  border-left-color: var(--pm-primary);
}

.plx-uac-row-label {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

.plx-uac-row-badge {
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Active-property indicator in the Assign Permissions column header — a
   solid-filled pill (every existing .plx-pill-* variant is outline/pale
   fill, none matched this reference's solid navy chip), so this is a
   dedicated, page-scoped style rather than a new shared badge variant. */
.plx-uac-active-property-pill {
  background: var(--pm-primary);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-3);
  white-space: nowrap;
}

.plx-uac-perm-group {
  border-bottom: 1px solid var(--border-subtle);
}

.plx-uac-perm-group:last-child {
  border-bottom: 0;
}

.plx-uac-perm-parent {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.plx-uac-perm-parent-label {
  align-items: center;
  display: flex;
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  margin: 0;
}

.plx-uac-perm-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--text-muted);
  display: flex;
  padding: var(--space-1);
}

.plx-uac-perm-toggle .plx-icon {
  transition: transform 0.15s ease;
}

.plx-uac-perm-toggle[aria-expanded="true"] .plx-icon {
  transform: rotate(180deg);
}

.plx-uac-perm-children {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 24px);
}

/* .plx-label defaults to semibold (forms.css, meant for real field labels)
   — a child permission's own label ("Create Property", ...) is inline
   checkbox text, not a field label, and should read lighter than its own
   parent group's bold heading. Same fix as
   .plx-settings-checkbox-field .plx-label above, different context. */
.plx-uac-perm-children .plx-label {
  font-weight: var(--weight-regular);
}

/* Status field (Create/Edit User) — the switch has no visible box of its
   own, unlike every sibling field's real bordered input, so without this
   it sits flush at the top of its .plx-form-group instead of centered at
   the same baseline height (38px, .plx-input's own fixed height) the rest
   of the row's fields occupy. */
.plx-uac-status-field {
  align-items: center;
  display: flex;
  height: var(--space-8);
}

/* Fixed bottom bar, same treatment as .plx-settings-back-row above — Cancel
   already navigates back to /settings/user-roles (the same destination a
   Back button would), so this is the one Back-equivalent control on
   Create/Edit User rather than a separate redundant one in the page
   header too. */
.plx-uac-footer-actions {
  align-items: center;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  bottom: 0;
  box-shadow: 0 -4px 12px rgba(17, 24, 39, 0.05);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  left: var(--sidebar-width);
  padding: var(--space-3) var(--space-6);
  position: fixed;
  right: 0;
  z-index: 1015;
}

/* Status toggle sitting directly inside a table cell (every other usage of
   .plx-status-switch in the project lives in a card footer, not a <td>) —
   it's already a self-contained inline-flex component, this just keeps its
   label from wrapping onto a second line inside the narrower column. */
.plx-table .plx-status-switch-label {
  white-space: nowrap;
}

/* Edit OTA modal's own "Billing Address" sub-section — per Figma, its
   4 fields sit inside a light gray boxed group, distinct from the
   plain fields above it (OTA Name/Tax ID/Settlement/Currency). Same
   var(--bg-card) tone as .plx-ota-master-list-wrap's own tray, so the
   two "grouped box" treatments in this file read as one consistent
   idiom rather than two different grays. */
.plx-ota-edit-address-box {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  padding: var(--space-4);
}

.plx-ota-edit-address-box .plx-settings-create-row .plx-form-group {
  min-width: 0;
}

/* This card list's own outer wrapper, on top of the shared
   .plx-card-muted-table every other Settings "X List" page uses (a
   white background + darker border-medium frame, right for those
   pages' plain tables) — Finance > Billing's own card list
   (.plx-fin-invoice-list, finance-billing.css) instead sits in a soft
   gray tray (var(--bg-card)) with a plain 1px border-default, which is
   what actually gives its white invoice cards visible depth/contrast.
   Scoped to this one instance rather than changing .plx-card-muted-table
   itself, which every other Settings list page still needs unchanged.
   padding: a single uniform inset applied directly to this outer box
   (overriding .plx-card-flush's padding: 0), matching
   .plx-fin-invoice-list exactly — its header/cards/footer are all plain
   children of the one padded box, not each carrying their own separate
   padding the way every other Settings list page's header-bar-plus-
   flush-body split does. */
.plx-ota-master-list-wrap {
  background: var(--bg-card);
  border-width: 1px;
  border-color: var(--border-default);
  padding: var(--space-4);
}

/* Plain icon+title line, same shape as .plx-fin-invoice-list-header/-icon
   (finance-billing.css) — no card-header bar, no border-bottom, no
   search/status filters inside it. Those now live in their own
   .plx-filter-bar above the tray, matching where Billing's filter bar
   actually sits (a page-level element, not nested inside the list). */
.plx-ota-master-list-header {
  align-items: center;
  color: var(--text-primary);
  display: flex;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.plx-ota-master-list-header-icon {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--pm-primary);
  display: flex;
  flex-shrink: 0;
  height: var(--space-8);
  justify-content: center;
  width: var(--space-8);
}

/* OTA Master list — a stacked list of bordered cards (not a table),
   each showing a 4-field summary row, a Billing Address + Status row,
   and an Edit action column. Same shape as this project's own Finance >
   Billing invoice cards (.plx-fin-invoice-card, finance-billing.css) —
   built to match that recipe exactly (border-default dividers, full-
   height not inset, row divider via border-top + padding rather than a
   separately-boxed section) rather than the inset var(--border-medium)
   technique used elsewhere, since this card list has a closer sibling
   already living in the same app. No padding of its own — sits inside
   .plx-ota-master-list-wrap's single padded box, matching
   .plx-fin-invoice-cards (which likewise carries no padding of its own). */
.plx-ota-master-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plx-ota-master-card {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.plx-ota-master-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.plx-ota-master-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* Per Figma: a divider line between the two field rows, not just gap.
   Bottom padding on every row + border/top-padding only on the second
   (+ .plx-ota-master-card-row) keeps the same visual gap on both sides
   of that line. */
.plx-ota-master-card-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: var(--space-3);
}

.plx-ota-master-card-row:last-child {
  padding-bottom: 0;
}

.plx-ota-master-card-row + .plx-ota-master-card-row {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}

.plx-ota-master-card-field {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-width: 0;
  position: relative;
}

/* Vertical dividers between fields — same inset ::before technique used
   project-wide (Manage Bookings/Manage Leases tables, Lease Summary
   quickfacts, and this exact card shape's own Finance sibling,
   .plx-fin-invoice-field) rather than a real border-right, which would
   run the full row height instead of reading as a per-field segment.
   Positioned off the field's own right edge (not the row's column
   tracks), so it still lands on the right boundary even for the
   Billing Address field, which spans 3 columns instead of 1. */
.plx-ota-master-card-field:not(:last-child)::before {
  background: var(--border-default);
  bottom: 0;
  content: '';
  position: absolute;
  right: calc(var(--space-4) / -2);
  top: 0;
  width: 1px;
}

.plx-ota-master-card-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plx-ota-master-card-name {
  color: var(--color-booked);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.plx-ota-master-card-value {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.plx-ota-master-card-address {
  grid-column: span 3;
}

.plx-ota-master-card-address .plx-ota-master-card-value {
  font-weight: var(--weight-regular);
}

.plx-ota-master-card-status {
  grid-column: span 1;
}

/* Wraps Edit as its own flex child of .plx-ota-master-card, alongside
   .plx-ota-master-card-body — same shape as .plx-fin-invoice-card-actions
   (finance-billing.css). align-self: stretch makes it exactly as tall as
   the card; its own ::before divider then runs that same full height,
   landing inside the card's own padding rather than touching the outer
   border. */
.plx-ota-master-card-actions {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding-left: var(--space-4);
  position: relative;
}

.plx-ota-master-card-actions::before {
  background: var(--border-default);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

/* Dynamic Pricing (settings/dynamic-pricing.blade.php) — three small
   multiplier tables (Occupancy Factor/Booking Window/Pickup Ratio) side
   by side, each row switching between a plain view state and an
   in-place edit state (inputs + Save), plus a full-width Applicable
   Rates table below using the project's usual modal Add/Edit. */
.plx-dp-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(3, 1fr);
}

/* Each grid column is this wrapper, not the card itself — the card's own
   pagination footer is a sibling AFTER it (outside the card's border),
   and stacking both inside one flex column is what keeps them aligned
   under each other within the grid cell instead of the footer becoming
   its own (4th/5th/6th) grid item and breaking the 3-column layout. */
.plx-dp-card-col {
  display: flex;
  flex-direction: column;
}

/* Fixed layout + explicit widths on every column (Label gets whatever's
   left) so toggling a row into/out of edit mode can never resize the
   table itself — column widths are set once, up front, independent of
   which state any given row is in. */
.plx-dp-table {
  table-layout: fixed;
}

.plx-dp-table .plx-dp-cell-multiplier {
  white-space: nowrap;
  width: 82px;
}

.plx-dp-table th:last-child,
.plx-dp-table td:last-child {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  width: 128px;
}

/* Multiplier is always the table's 2nd column (Label/Multiplier/Actions)
   — the header th has no matching class to target directly, so nth-child
   covers both header and cell in one rule. */
.plx-dp-table th:nth-child(2),
.plx-dp-table td.plx-dp-cell-multiplier {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* Booking Window's "Days Before Arrival" header is the widest of the
   three tables' own column labels — at this card's own narrow (1-of-3)
   width it was forcing the table wider than the card, overflowing into
   the next card. Overrides the shared .plx-table thead th's white-space:
   nowrap (tables.css) so it wraps to 2 lines instead of pushing width. */
.plx-dp-table thead th {
  white-space: normal;
}

/* Sized to match the row's own Edit/Delete buttons (24px, .plx-btn-sm)
   rather than the shared .plx-input's default 32px — that 8px difference
   was enough to grow the whole row every time it entered edit mode,
   which then pushed every row below it down too. */
.plx-dp-edit-input {
  display: none;
  font-size: var(--text-sm);
  height: 24px;
}

.plx-dp-cell-multiplier .plx-dp-edit-input {
  padding: 0 var(--space-2);
  width: 100%;
}

/* Edit state: swap the plain value span for its matching input, and
   swap which of the Edit/Save actions is visible — .plx-dp-row-editing
   is the single source of truth JS toggles per row, both mirrored by
   this one selector pair so markup never has to duplicate the flag.
   display:block (not inline-block, the <input> default) — an inline
   element's own line-height/baseline metrics sit taller than the plain
   text span it replaces, which grew the row by a few px every time a
   row entered edit mode; block avoids that inline box entirely. */
.plx-dp-row-editing .plx-dp-view-value {
  display: none;
}

.plx-dp-row-editing .plx-dp-edit-input {
  display: block;
}

/* "Save" (4 letters, wider glyphs) is a couple px wider than "Edit" at
   the same padding — without a matching min-width, Delete (the button
   after it) shifted sideways by that difference every time a row
   toggled. Both already center their own label (.plx-btn), so a shared
   min-width just makes the swap a no-op for anything to their right. */
.plx-dp-edit-btn-js,
.plx-dp-save-btn-js {
  min-width: 48px;
}

.plx-dp-row-editing .plx-dp-edit-btn-js {
  display: none;
}

/* Edit/Save share the same footprint (both inline-flex, both sized by
   .plx-btn-sm) so swapping which one is visible never changes the
   Actions column's own content width either. */
.plx-dp-save-btn-js {
  display: none;
}

.plx-dp-row-editing .plx-dp-save-btn-js {
  display: inline-flex;
}

/* Pagination footer sits OUTSIDE its card (a sibling in .plx-dp-card-col,
   not a child of .plx-card-flush) — same placement as every other
   .plx-settings-table-footer in this file (Room Category, Taxation,
   etc.), just once per mini-card instead of once page-wide. No inset
   padding needed since it's not fighting a flush card's own edges. */
.plx-dp-table-footer {
  margin-top: var(--space-3);
}

/* Corporate Accounts (settings/corporate-accounts.blade.php) — a real
   .plx-table (Room Category / Dynamic Pricing's own convention), not a
   stacked card list — per Figma reference this list is a genuine 8-column
   table (Sr. No./Corporate Account/Contact Person/Rate Plan/Charge
   Routing/Direct Billing/Status/Actions), so it uses the shared table
   shell (.plx-table-wrap/.plx-settings-table-wrap/.plx-table already
   defined above) rather than OTA Master's own card-list recipe. Only the
   two compound cells (Corporate Account, Contact Person — each a bold
   title + one or two muted sub-lines) and the Charge Routing cell (a
   stack of pills) need new page-scoped rules below.

   table-layout: fixed + explicit percentage widths on this table alone
   (scoped by its own #id, not the shared .plx-table) — without this the
   browser sizes every column off its own widest cell content (the
   address sub-line, the routing pills, the phone number), which pushed
   the table past ~1145px and forced .plx-settings-table-wrap's
   horizontal scroll to kick in well before it was actually needed, even
   on common laptop widths (1366/1280px). Percentages were chosen off
   each column's actual content weight (Corporate Account/Charge Routing
   widest, Sr. No./Actions narrowest) so nothing wraps awkwardly at
   1280px+; the table still scrolls below that, same safety net every
   other Settings table already has. */
#plxCorpAccountTableJs {
  table-layout: fixed;
}

#plxCorpAccountTableJs th:nth-child(1),
#plxCorpAccountTableJs td:nth-child(1) {
  width: 6%;
}

#plxCorpAccountTableJs th:nth-child(2),
#plxCorpAccountTableJs td:nth-child(2) {
  width: 20%;
}

#plxCorpAccountTableJs th:nth-child(3),
#plxCorpAccountTableJs td:nth-child(3) {
  width: 14%;
}

#plxCorpAccountTableJs th:nth-child(4),
#plxCorpAccountTableJs td:nth-child(4) {
  width: 12%;
}

#plxCorpAccountTableJs th:nth-child(5),
#plxCorpAccountTableJs td:nth-child(5) {
  width: 20%;
}

#plxCorpAccountTableJs th:nth-child(6),
#plxCorpAccountTableJs td:nth-child(6) {
  width: 10%;
}

#plxCorpAccountTableJs th:nth-child(7),
#plxCorpAccountTableJs td:nth-child(7) {
  width: 11%;
}

#plxCorpAccountTableJs th:nth-child(8),
#plxCorpAccountTableJs td:nth-child(8) {
  width: 7%;
}

.plx-corp-account-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plx-corp-account-cell-title {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.plx-corp-account-cell-sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Billing address line truncates with an ellipsis rather than wrapping —
   matches the Figma reference, where this is consistently the longest
   line in the table and would otherwise force the row much taller than
   every other column needs. No fixed max-width — the fixed table layout
   above already caps this cell's own column width, so the ellipsis just
   needs permission to engage within whatever that column resolves to. */
.plx-corp-account-cell-address {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plx-corp-account-routing-pills {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.plx-corp-account-routing-pills .plx-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Registered Billing Address" sub-section box — used by both the
   Create form and the Edit modal (both share this same markup/class).
   Same var(--bg-card) tray tone as .plx-ota-edit-address-box, reused
   here under its own page-scoped name per this file's own convention of
   not sharing page-scoped selectors across pages even when the recipe
   is identical. No border — per Figma this reads as a soft background
   tint, same borderless idiom as .plx-settings-info-banner, not a
   bordered frame. */
.plx-corp-address-box {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  padding: var(--space-4);
}

/* Default Charge Routing block — per Figma, ONE light gray tray
   (.plx-corp-charge-routing-box) holding the title + hint line, then a
   tight 2-column grid of individually-boxed white rows (Room+Tax |
   Breakfast on row 1, Incidentals alone on row 2, left column only — a
   real CSS grid with auto-placement, not 3 items flowing freely). Each
   row pairs its label (far left) with a .plx-charge-toggle (far right)
   via space-between. Same borderless background-tint idiom as
   .plx-corp-address-box above. */
.plx-corp-charge-routing-box {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.plx-corp-charge-routing-hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: 2px;
}

.plx-corp-charge-routing-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-3);
}

.plx-corp-charge-routing-row {
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.plx-corp-charge-routing-label {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* Company/Guest segmented toggle — new component, no existing equivalent
   in the project (checked: .plx-status-switch is a binary on/off slider,
   .plx-tab is an underlined tab bar, neither is a compact 2-segment
   toggle). Per Figma each segment is its OWN separately-bordered,
   separately-rounded button — not one shared outer border wrapping both
   — with a small gap between the two, and only the active segment's own
   border recolors (green/Company, amber/Guest); the inactive segment
   keeps a plain neutral border. Click either side to select it —
   data-plx-active="true" on the clicked button mirrors .plx-tab's own
   attribute-toggle convention. Colors reuse the exact tokens
   .plx-pill-active (green/Company) and .plx-pill-warning (amber/Guest)
   already use, so this toggle and the resulting list-table pills read
   as one consistent color language. */
.plx-charge-toggle {
  display: inline-flex;
  gap: var(--space-1);
}

.plx-charge-toggle-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.plx-charge-toggle-btn[data-plx-value="company"][data-plx-active="true"] {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.plx-charge-toggle-btn[data-plx-value="guest"][data-plx-active="true"] {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* Billing Number Format — live preview banner. .plx-flash-info's own
   background (--color-info-bg) is near-white, so it reads as unwrapped
   text without an explicit border + slightly stronger tint here. */
.plx-billing-format-preview-alert {
  background: var(--color-booked-bg);
  border: 1px solid var(--color-booked);
  border-radius: var(--radius-md);
}

/* Print Preferences — per-document-type cards of toggleable sections,
   3-up grid matching the reference layout. */
.plx-pp-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-4);
}

.plx-pp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.plx-pp-card-header {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
}

.plx-pp-card-title {
  color: var(--pm-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.plx-pp-count-pill {
  font-size: var(--text-xs);
  white-space: nowrap;
}

.plx-pp-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.plx-pp-row-label {
  color: var(--text-primary);
  font-size: var(--text-sm);
}

/* ==========================================================================
   MEDIA QUERIES — all breakpoints for this file, grouped by tier
   (0–575.98 / 576–767.98 / 768–991.98 / 992–1199.98 / 1200–1399.98 / 1400+),
   consolidated here from their original inline positions so every
   responsive rule for this file lives in one place. Order within each tier
   block matches each rule's original position in the file, since some
   target the same selector and rely on later-wins source order.
   ========================================================================== */

@media (max-width: 575.98px) {
  .plx-settings-back-row {
    left: 0;
  }

  .plx-settings-back-row {
    padding: var(--space-3) var(--space-4);
  }

  .plx-page-has-sticky-footer {
    padding-bottom: 140px;
  }

  .plx-settings-page-header-row {
    flex-direction: column;
  }

  .plx-settings-page-header-actions {
    justify-content: flex-end;
  }

  .plx-uac-footer-actions {
    left: 0;
  }

  .plx-uac-footer-actions {
    padding: var(--space-3) var(--space-4);
  }

  .plx-uac-columns {
    grid-template-columns: 1fr;
  }

  .plx-form-rows .plx-form-row {
    flex-direction: column;
  }

  .plx-settings-create-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* .plx-settings-create-row .plx-form-group's own flex: 1 1 220px/
     min-width: 220px (above) are sized for the row layout, where 220px is
     a target WIDTH — flex-basis/min-width both apply to the cross axis of
     whichever direction is active, so once the row above switches to
     flex-direction: column, that same 220px is read as a minimum HEIGHT
     instead, leaving each field's own empty flex space stretched out
     underneath it. Reset both back to auto here so each field's real
     height (label + input) is all it takes up. */
  .plx-settings-create-row .plx-form-group {
    flex-basis: auto;
    min-width: 0;
  }

  .plx-settings-create-actions {
    justify-content: flex-end;
  }

  .plx-settings-list-filters .plx-search-input,
  .plx-settings-list-filters .plx-select {
    width: 100%;
  }

  .plx-card-header:has(.plx-settings-list-filters) {
    align-items: stretch;
    flex-direction: column;
  }

  .plx-ota-master-card {
    align-items: stretch;
    flex-direction: column;
  }

  .plx-ota-master-card-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ota-master-card-address {
    grid-column: span 1;
  }

  /* .plx-ota-master-card-field's :not(:last-child) divider only knows
     about the true last DOM child — it has no idea the row wraps to 2
     columns at this width, so field 3 of 4 (Currency) still prints a
     trailing divider with nothing beside it to separate from. Suppress
     it by position instead — the row's actual last column at this
     width is always an even nth-child. */
  .plx-ota-master-card-field:nth-child(2n)::before {
    display: none;
  }

  /* Actions becomes a full-width footer once the card itself stacks —
     its divider needs to flip from a vertical left-edge line to a
     horizontal top one to still read as "a separator before this
     section" instead of a stray vertical stub. */
  .plx-ota-master-card-actions {
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .plx-ota-master-card-actions::before {
    bottom: auto;
    height: 1px;
    right: 0;
    top: 0;
    width: auto;
  }

  .plx-dp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-dp-grid {
    grid-template-columns: 1fr;
  }

  .plx-corp-charge-routing-grid {
    grid-template-columns: 1fr;
  }

  .plx-pp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-pp-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .plx-settings-back-row {
    left: 0;
  }

  .plx-uac-footer-actions {
    left: 0;
  }

  .plx-uac-columns {
    grid-template-columns: 1fr;
  }

/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-form-rows .plx-form-row {
    flex-direction: column;
  }

/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-settings-create-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* .plx-settings-create-row .plx-form-group's own flex: 1 1 220px/
     min-width: 220px (above) are sized for the row layout, where 220px is
     a target WIDTH — flex-basis/min-width both apply to the cross axis of
     whichever direction is active, so once the row above switches to
     flex-direction: column, that same 220px is read as a minimum HEIGHT
     instead, leaving each field's own empty flex space stretched out
     underneath it. Reset both back to auto here so each field's real
     height (label + input) is all it takes up. */
  .plx-settings-create-row .plx-form-group {
    flex-basis: auto;
    min-width: 0;
  }

  .plx-settings-create-actions {
    justify-content: flex-end;
  }

  .plx-settings-list-filters .plx-search-input,
  .plx-settings-list-filters .plx-select {
    width: 100%;
  }

  .plx-card-header:has(.plx-settings-list-filters) {
    align-items: stretch;
    flex-direction: column;
  }

/* Split into one block per tier (576-767.98 / 0-575.98) to stay within the
   project's strict 6-tier breakpoint scale instead of a bare max-width
   spanning both tiers. */

  .plx-ota-master-card {
    align-items: stretch;
    flex-direction: column;
  }

  .plx-ota-master-card-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-ota-master-card-address {
    grid-column: span 1;
  }

  /* .plx-ota-master-card-field's :not(:last-child) divider only knows
     about the true last DOM child — it has no idea the row wraps to 2
     columns at this width, so field 3 of 4 (Currency) still prints a
     trailing divider with nothing beside it to separate from. Suppress
     it by position instead — the row's actual last column at this
     width is always an even nth-child. */
  .plx-ota-master-card-field:nth-child(2n)::before {
    display: none;
  }

  /* Actions becomes a full-width footer once the card itself stacks —
     its divider needs to flip from a vertical left-edge line to a
     horizontal top one to still read as "a separator before this
     section" instead of a stray vertical stub. */
  .plx-ota-master-card-actions {
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .plx-ota-master-card-actions::before {
    bottom: auto;
    height: 1px;
    right: 0;
    top: 0;
    width: auto;
  }

  .plx-dp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plx-dp-grid {
    grid-template-columns: 1fr;
  }

  .plx-pp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them. */

  .plx-settings-back-row {
    left: 0;
  }

/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them. */

  .plx-uac-footer-actions {
    left: 0;
  }

/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them. */

  .plx-uac-columns {
    grid-template-columns: 1fr;
  }

  .plx-dp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

/* Split into one block per tier (768-991.98 / 576-767.98 / 0-575.98) to stay
   within the project's strict 6-tier breakpoint scale instead of a bare
   max-width spanning all of them — the block below still overrides this one
   at the narrowest tier via source order. */

  .plx-pp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .plx-settings-back-row {
    min-height: 81px;
  }

  .plx-uac-footer-actions {
    min-height: 81px;
  }

/* Split into one block per tier (992-1199.98 / 768-991.98 / 576-767.98 /
   0-575.98) to stay within the project's strict 6-tier breakpoint scale
   instead of a bare max-width spanning all of them — the block below still
   overrides this one at its narrower tiers via source order. */

  .plx-dp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .plx-settings-back-row {
    min-height: 81px;
  }

  .plx-settings-back-row {
    min-height: 73px;
  }

  .plx-uac-footer-actions {
    min-height: 81px;
  }

  .plx-uac-footer-actions {
    min-height: 73px;
  }
}

@media (min-width: 1400px) {
  .plx-settings-back-row {
    min-height: 81px;
  }

  .plx-uac-footer-actions {
    min-height: 81px;
  }
}

/* Add Rate Type modal: BAR / operator / value row inside a muted box */
.plx-rate-formula-box {
  align-items: center;
  background-color: var(--bg-hover);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr 1.2fr;
  padding: var(--space-3);
}

@media (max-width: 575.98px) {
  .plx-rate-formula-box {
    grid-template-columns: 1fr;
  }
}

/* Bank Detail: grouped sub-section boxes (Bank Address / Bank Transfer
   Details) in the create form + edit modal, and the stacked transfer-code
   lines in the list table. */
.plx-bank-section-label {
  margin-top: var(--space-4);
}

.plx-bank-box {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  padding: var(--space-4);
}

.plx-bank-box .plx-settings-create-row .plx-form-group {
  min-width: 0;
}

.plx-bank-transfer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plx-bank-transfer-item {
  display: block;
}

/* Bank Detail table: cells wrap (Figma) instead of forcing horizontal
   scroll — long addresses/IBANs break across lines. The wrap keeps its own
   overflow-x as a small-screen fallback only. */
#plxBankDetailTableJs {
  width: 100%;
}

#plxBankDetailTableJs td {
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

#plxBankDetailTableJs .plx-pill {
  white-space: nowrap;
}

/* Transfer Details: label on its own line with the code wrapping beneath
   it, per Figma. */
.plx-bank-transfer-item strong {
  display: block;
}

.plx-bank-transfer-item {
  overflow-wrap: anywhere;
  word-break: break-all;
}