/* Presentation-only mobile layouts. Cell order remains stable for existing actions. */
.mobile-record-only { display: none; }
.record-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.compact-mobile-label, .compact-mobile-note { display: none; }
@media screen and (max-width: 720px) {
  html[data-theme="dark"] body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > td:is(.compact-slot-balance,.compact-slot-recovery,.compact-slot-difference) { color: var(--warn) !important; }
  html[data-theme="dark"] body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > td.compact-zero { color: var(--ok) !important; }
  html[data-theme="dark"] body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > td:is(.compact-slot-date,.compact-slot-description,.compact-slot-secondary) { color: var(--text-2) !important; }
}

/* Shared mobile presentation; original cells and desktop actions stay intact. */
@media (max-width: 720px) {
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 12px !important;
    padding: 16px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--border, #dce5e4) !important;
    background: var(--bg-surface, #fff) !important;
    box-shadow: 0 3px 12px #173f3508 !important;
  }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > td {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: block !important;
    order: 3;
    overflow-wrap: anywhere;
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--text-1, #20312c) !important;
  }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > td::before { display: none !important; content: none !important; }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > .compact-slot-key {
    grid-row: 1 !important; grid-column: 1 !important; order: 0; font-size: 22px !important; font-weight: 800 !important;
  }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > .compact-slot-badge {
    grid-row: 1 !important; grid-column: 2 !important; order: 0; justify-self: end; align-self: start; max-width: 130px !important;
  }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > .compact-slot-name { order: 1; font-size: 18px !important; font-weight: 700 !important; }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > :is(.compact-slot-description,.compact-slot-date,.compact-slot-secondary) { color: var(--text-2, #64736d) !important; font-weight: 400 !important; }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > .compact-slot-description { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > :is(.compact-slot-amount,.compact-slot-balance,.compact-slot-recovery,.compact-slot-difference,.compact-slot-paid) {
    display: flex !important; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
    font-size: 23px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums;
    color: var(--ok, #17614e) !important; border-top: 1px solid var(--border, #edf0ef) !important; padding-top: 10px !important;
  }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > :is(.compact-slot-balance,.compact-slot-recovery,.compact-slot-difference) { color: var(--warn, #95610b) !important; }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card[data-status="paid"] > .compact-slot-balance { color: var(--ok, #17614e) !important; }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > .compact-slot-paid { font-size: 15px !important; padding-top: 0 !important; border: 0 !important; }
  body.workspace-ui .view .table-wrap > :is(:is(#activitiesTable, #insurancesTable),table) > tbody > tr.compact-mobile-card > .compact-slot-hide { display: none !important; }
  body.workspace-ui .view .table-wrap tr.compact-mobile-card .compact-mobile-label { display: inline; color: var(--text-2, #64736d) !important; font-size: 14px !important; font-weight: 500 !important; }
  body.workspace-ui .view .table-wrap tr.compact-mobile-card .compact-mobile-note { display: block; margin-top: 6px; color: var(--text-2, #64736d) !important; font-size: 14px !important; font-weight: 400 !important; }
  body.workspace-ui .view .table-wrap tr.compact-mobile-card .compact-slot-action button { min-height: 44px; }
}

@media (max-width: 720px) {
  body.workspace-ui .view .table-wrap table:is(#flightsTable, #hotelsTable, #transfersTable, #groupsTable, #clientPaymentsTable, #packagesTable, #cashMovementsTable) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    & > thead { display: none !important; }
    & > tbody { display: grid !important; width: 100% !important; min-width: 0 !important; gap: 12px; }
    & > tbody > tr.mobile-redesign-row {
      --balance-color: var(--warn, #95610b);
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      gap: 10px 12px !important;
      padding: 16px !important;
      margin: 0 !important;
      border: 1px solid var(--border, #dce5e4) !important;
      border-radius: 8px !important;
      background: var(--bg-surface, #fff) !important;
      box-shadow: 0 3px 12px #173f3508 !important;
      overflow: visible !important;
      height: auto !important;
      &[data-status="paid"] { --balance-color: var(--ok, #17614e); }
      &[data-status="overdue"] { --balance-color: var(--warn, #b52e30); }
      &[data-status="cancelled"] { --balance-color: var(--text-2, #687574); }
      & > td {
        display: block !important;
        position: static !important;
        grid-area: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        overflow: visible !important;
        transform: none !important;
        &::before, &::after { display: none !important; content: none !important; }
      }
      & > td.record-key { grid-area: key !important; font-size: 22px !important; font-weight: 800 !important; }
      & > td.record-client { grid-area: client !important; font-size: 18px !important; font-weight: 700 !important; overflow-wrap: anywhere; }
      & > td.record-status { grid-area: status !important; justify-self: end; align-self: start; }
      & > td.record-module { grid-area: module !important; justify-self: end; }
      & > td.record-date { grid-area: date !important; color: var(--muted); }
      & > td.record-amount { grid-area: amount !important; justify-self: end; font-size: 23px !important; font-weight: 800 !important; color: var(--ok, #17614e) !important; }
      & > td.record-description { grid-area: description !important; color: var(--muted); }
      & > td.record-departure { grid-area: departure !important; color: var(--muted); }
      & > td.record-return { grid-area: return !important; color: var(--muted); }
      & > td.record-balance { grid-area: balance !important; color: var(--balance-color) !important; }
      & > td.record-seller { grid-area: seller !important; color: var(--muted); }
      & > td.record-payment { grid-area: payment !important; color: var(--ok, #17614e); font-weight: 700; }
      & > td.record-total { grid-area: total !important; }
      & > td.record-paid { grid-area: paid !important; }
      & > td.record-components { grid-area: components !important; }
      & .mobile-card-value { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
      & .record-key .mobile-card-value { font-size: 22px !important; line-height: 1.3 !important; font-weight: 800 !important; }
      & .record-client .mobile-card-value { font-size: 18px !important; line-height: 1.4 !important; font-weight: 700 !important; }
      & .record-description .mobile-card-value { font-size: 15px !important; line-height: 1.45 !important; font-weight: 400 !important; }
      & .record-description .mobile-card-value { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
      & .mobile-record-only { display: inline; }
      & .record-field-label { color: var(--muted); font-size: 14px; font-weight: 500; }
      & .status, & .purchase-module-pill { display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; min-height: 28px; padding: 4px 10px !important; max-width: 100%; line-height: 1.25; white-space: normal; font-size: 12px; }
      & .purchase-module-pill.group { background: #ffead5; color: #984510; }
      & .purchase-module-pill.flight { background: var(--bg-surface, #efe7fc); color: #6c34ac; }
      & .purchase-module-pill.hotel { background: var(--bg-surface, #e7edf1); color: #3d5667; }
      & .record-inline-icon svg, & .record-component-chip svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
      & .record-inline-icon { display: inline-flex; vertical-align: middle; margin-right: 5px; }
    }
    &#flightsTable > tbody > tr.mobile-redesign-row {
      grid-template-areas: "key status" "client client" "description description" "departure return" "balance balance" !important;
      &.no-return > .record-return { display: none !important; }
      &.no-return > .record-departure { grid-column: 1 / -1 !important; }
      & > .record-balance { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; border-top: 1px solid var(--border, #edf0ef) !important; padding-top: 10px !important; font-size: 22px !important; font-weight: 800 !important; }
    }
    &:is(#hotelsTable, #transfersTable, #groupsTable) > tbody > tr.mobile-redesign-row {
      grid-template-areas: "key status" "client client" "description description" "departure departure" "balance balance" !important;
      & .mobile-original-only, & > .record-return { display: none !important; }
      & > .record-key { overflow-wrap: anywhere; }
      & .stay-mobile-dates { display: flex; flex-wrap: wrap; gap: 6px 20px; }
      & .stay-mobile-dates > span { flex: 1 1 auto; }
      & > .record-balance { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; border-top: 1px solid var(--border, #edf0ef) !important; padding-top: 10px !important; font-size: 22px !important; font-weight: 800 !important; }
      &.no-mobile-balance { grid-template-areas: "key status" "client client" "description description" "departure departure" !important; }
      &.no-mobile-balance > .record-balance { display: none !important; }
    }
    &#groupsTable > tbody > tr.mobile-redesign-row > .record-balance { color: var(--ok, #17614e) !important; }
    &#clientPaymentsTable > tbody > tr.mobile-redesign-row { grid-template-areas: "key module" "client client" "date amount" !important; align-items: baseline; }
    &#clientPaymentsTable > tbody > tr.mobile-redesign-row.large-amounts { grid-template-areas: "key module" "client client" "date date" "amount amount" !important; }
    &#cashMovementsTable > tbody > tr.mobile-redesign-row {
      grid-template-areas: "key status" "seller seller" "client client" "date date" "payment amount" !important;
      & > .record-date { border-top: 1px solid var(--border, #edf0ef) !important; padding-top: 10px !important; }
    }
    &#cashMovementsTable > tbody > tr.mobile-redesign-row.large-amounts { grid-template-areas: "key status" "seller seller" "client client" "date date" "payment payment" "amount amount" !important; }
    &#packagesTable > tbody > tr.mobile-redesign-row {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
      grid-template-areas: "key key key client client client" "components components components components components components" "status status status status status status" "total total paid paid balance balance" !important;
      & > .record-client { justify-self: end; max-width: 100% !important; font-size: 14px !important; }
      & > .record-client .mobile-card-value { white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; font-size: 14px !important; }
      & .cell-subtitle { display: none !important; }
      & .package-mobile-title { display: block; font-size: 15px; font-weight: 500; color: var(--muted); margin: 0 0 10px; white-space: normal; overflow-wrap: anywhere; }
      & > .record-components > .mobile-card-value { display: none !important; }
      & .record-component-chips { display: flex; gap: 8px; flex-wrap: wrap; }
      & .record-component-chip { display: inline-flex; gap: 7px; align-items: center; background: var(--bg-surface, #f0f7f5); border-radius: 6px; padding: 7px 9px; font-weight: 600; }
      & > .record-status { display: flex !important; justify-self: stretch; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--border, #edf0ef) !important; padding-top: 12px !important; }
      & > .amount { display: flex !important; flex-direction: column; gap: 5px; font-size: 18px !important; font-weight: 800 !important; }
      &.large-amounts { grid-template-areas: "key key key client client client" "components components components components components components" "status status status status status status" "total total total total total total" "paid paid paid paid paid paid" "balance balance balance balance balance balance" !important; }
      &.large-amounts > .amount { flex-direction: row !important; flex-wrap: wrap; justify-content: space-between; }
    }
  }
  @media (max-width: 390px) {
    body.workspace-ui .view .table-wrap table#packagesTable > tbody > tr.mobile-redesign-row {
      grid-template-areas: "key key key client client client" "components components components components components components" "status status status status status status" "total total total total total total" "paid paid paid paid paid paid" "balance balance balance balance balance balance" !important;
      & > .amount { flex-direction: row !important; flex-wrap: wrap; justify-content: space-between; }
    }
    body.workspace-ui .view .table-wrap table#clientPaymentsTable > tbody > tr.mobile-redesign-row { grid-template-areas: "key module" "client client" "date date" "amount amount" !important; }
  }
}

/* Shared reservation identity, provider rows and action hierarchy. */
#reservationSidePanel {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  & > .reservation-side-panel-head { grid-row: 1 !important; }
  & > .reservation-side-panel-context { grid-row: 2 !important; }
  & > #reservationSidePanelActions { grid-row: 3 !important; }
  & > .reservation-side-panel-nav { grid-row: 4 !important; }
  & > .reservation-side-panel-body { grid-row: 5 !important; }
  & .reservation-side-panel-head { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px !important; overflow: visible; }
  & .reservation-side-panel-head-controls { display: flex !important; flex: 0 0 auto !important; width: auto !important; align-items: center; gap: 8px; }
  & .reservation-side-panel-head-controls > * { margin: 0; }
  & .reservation-side-panel-close, & .reservation-side-panel-more > summary { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 10px !important; border-radius: 8px; display: grid !important; place-items: center; }
  &.has-reservation-identity #reservationSidePanelTitle { display: none; }
  & .reservation-side-panel-context { max-height: none; overflow: visible; padding: 12px 20px; }
  & .reservation-identity { background: var(--bg-surface, #f0f8f5); border: 1px solid #d1e6df; padding: 16px; border-radius: 8px; }
  & .reservation-identity-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 8px; }
  & .reservation-identity-head h2 { font-size: 23px; line-height: 1.25; margin: 0; }
  & .reservation-identity-head .status { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
  & .reservation-identity-client { display: block; font-size: 18px; margin-top: 8px; line-height: 1.4; overflow-wrap: anywhere; }
  & .reservation-identity-description { margin: 6px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  & .reservation-identity-balance { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid #d1e6df; padding-top: 10px; align-items: baseline; }
  & .reservation-identity-balance strong { font-size: 23px; white-space: nowrap; color: #17614e; }
  & #reservationSidePanelActions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px; padding: 0 20px 14px; width: 100% !important; max-width: none !important; }
  & .reservation-side-panel-action-row-primary { display: grid !important; grid-template-columns: 3fr 2fr !important; gap: 10px !important; width: 100%; }
  & .reservation-side-panel-action-row-primary:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }
  & .reservation-side-panel-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  & #reservationSidePanelActions button, & #reservationSidePanelMenu button {
    position: static !important; transform: none !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 44px !important; padding: 10px 8px !important; border-radius: 8px !important; display: flex !important; align-items: center; justify-content: center; gap: 7px; font-size: 13px !important; line-height: 1.3; white-space: normal !important;
    & span { position: static !important; opacity: 1 !important; max-width: none !important; overflow: visible !important; transform: none !important; white-space: normal !important; font-size: inherit !important; line-height: inherit !important; }
    & svg { flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    &:hover { filter: brightness(.97); }
    &:focus-visible { outline: 3px solid #e96931; outline-offset: 2px; }
  }
  & #reservationSidePanelActions .register-client-payment, & #reservationSidePanelActions .register-package-payment { background: linear-gradient(110deg, #f36a27, #ed501f) !important; border: 1px solid #e95820 !important; color: white !important; }
  & #reservationSidePanelActions :is(.print-flight-confirmation, .print-hotel-voucher, .print-group-voucher) { background: var(--bg-surface, #fff) !important; color: #bc491b !important; border: 1px solid #e95820 !important; }
  & .reservation-side-panel-quick-actions > button { flex-direction: column; background: var(--bg-surface, white) !important; color: #216b59; border: 1px solid #d4e2de; }
  & .reservation-side-panel-quick-actions > .extend-deadline { color: #96600c; border-color: #e8d6ad; }
  & .reservation-side-panel-more { position: relative !important; margin: 0 !important; display: block !important; }
  & .reservation-side-panel-more > summary { background: var(--bg-surface, #eef9fc) !important; color: #18869b; border: 1px solid #bfe4ec; list-style: none; cursor: pointer; }
  & .reservation-side-panel-more > summary:focus-visible { outline: 3px solid #e96931; outline-offset: 2px; }
  & .reservation-side-panel-more > summary::-webkit-details-marker { display: none; }
  & .reservation-side-panel-more:not([open]) > .reservation-side-panel-action-row-secondary { display: none !important; }
  & .reservation-side-panel-more[open] > .reservation-side-panel-action-row-secondary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; position: absolute !important; left: auto !important; right: 0 !important; top: calc(100% + 8px) !important; width: min(260px, calc(100vw - 80px)) !important; padding: 8px; gap: 4px; background: var(--bg-surface, white); border: 1px solid #dce5e4; border-radius: 8px; box-shadow: 0 8px 28px #173f3526; z-index: 50; max-height: calc(100dvh - 110px); overflow-y: auto; }
  & #reservationSidePanelMenu button { justify-content: start; }
  & .reservation-side-panel-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  & .side-panel-nav-chip { white-space: normal; min-height: 44px; }
  & .provider-key-value { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 8px 16px; padding: 9px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #e7eceb !important; border-radius: 0 !important; background: transparent !important; list-style: none; line-height: 1.4; }
  & :is(.reservation-provider-purchase-detail, .reservation-provider-amounts-detail) { background: var(--bg-surface, white); border: 1px solid #dce5e4; border-radius: 8px; padding: 16px; min-width: 0; }
  & .provider-key-value > strong { font-weight: 500; font-size: 15px !important; }
  & .provider-row-value { text-align: right; overflow-wrap: anywhere; font-size: 15px !important; }
  & .reservation-provider-amounts-detail .provider-row-value { white-space: nowrap; }
  & .provider-key-total > strong, & .provider-key-total > .provider-row-value { font-weight: 800; }
  & .provider-key-total:last-child { color: #17614e; }
  & :is(.reservation-provider-purchase-detail, .reservation-provider-amounts-detail) ul { padding: 0; margin: 0; list-style: none; display: block; }
  & .reservation-extra-list.is-empty, & .empty-extra-state { border: 0 !important; padding: 5px 0 !important; min-height: 0 !important; margin: 0 !important; background: transparent !important; }
}
@media (max-width: 720px) {
  #reservationSidePanel { display: block !important; overflow-y: auto !important; overscroll-behavior: contain; max-height: 100dvh; }
  #reservationSidePanel[hidden] { display: none !important; }
  #reservationSidePanel .reservation-side-panel-head { position: relative; z-index: 5; }
  #reservationSidePanel .reservation-side-panel-body { overflow: visible !important; height: auto !important; min-height: 0; }
  #reservationSidePanel .reservation-side-panel-context { padding: 8px 14px 14px; }
  #reservationSidePanel #reservationSidePanelActions { padding-inline: 14px; }
  #reservationSidePanel .reservation-side-panel-nav { position: static; }
  #reservationSidePanel .reservation-side-panel-body { padding: 14px; }
  #reservationSidePanel .provider-payments-detail .nested-table { min-width: 0 !important; width: 100% !important; overflow: visible !important; }
  #reservationSidePanel .provider-payments-detail table { min-width: 0 !important; width: 100% !important; display: block !important; }
  #reservationSidePanel .provider-payments-detail thead { display: none !important; }
  #reservationSidePanel .provider-payments-detail tbody { display: grid !important; gap: 8px; width: 100% !important; }
  #reservationSidePanel .provider-payments-detail tbody tr { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; width: 100% !important; padding: 10px !important; gap: 8px; }
  #reservationSidePanel .provider-payments-detail tbody td { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 6px; grid-column: auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; white-space: normal !important; font-size: 14px !important; }
  #reservationSidePanel .provider-payments-detail tbody td.amount { white-space: nowrap !important; }
}
@media (max-width: 390px) {
  #reservationSidePanel .reservation-side-panel-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #reservationSidePanel .reservation-side-panel-quick-actions > button { flex-direction: row; }
  #reservationSidePanel .reservation-provider-amounts-detail .provider-key-value { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
/* Desktop action density is independent of mobile touch targets. */
#reservationSidePanel [data-action-business-group][hidden] { display: none !important; }
#reservationSidePanel .reservation-side-panel-nav {
  margin: 8px 20px 16px !important;
  padding: 5px !important;
  width: auto !important;
  border: 1px solid #dce5e4 !important;
  border-radius: 8px !important;
  background: var(--bg-surface, #eef3f2) !important;
}
#reservationSidePanel .reservation-side-panel-nav .side-panel-nav-chip {
  border-radius: 5px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}
#reservationSidePanel .reservation-side-panel-nav .side-panel-nav-chip.is-active {
  background: var(--bg-surface, #fff) !important;
  border-color: #e4bca7 !important;
  color: #bf4b1b !important;
  box-shadow: 0 1px 3px #173f3510;
}
#reservationSidePanel .reservation-side-panel-provider-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#reservationSidePanel #reservationSidePanelActions .register-supplier-payment { background: #ed591f !important; color: #fff !important; border-color: #ed591f !important; }
@media (min-width: 721px) {
  #reservationSidePanel #reservationSidePanelActions { gap: 8px !important; padding-bottom: 6px !important; }
  #reservationSidePanel .reservation-side-panel-action-row-primary,
  #reservationSidePanel .reservation-side-panel-quick-actions,
  #reservationSidePanel .reservation-side-panel-provider-actions { display: flex !important; flex-wrap: wrap; gap: 8px !important; justify-content: flex-start !important; }
  #reservationSidePanel #reservationSidePanelActions button {
    flex: 0 1 auto !important; flex-direction: row !important; width: auto !important;
    min-height: 38px !important; padding: 8px 12px !important; font-size: 13px !important; border-radius: 6px !important;
  }
  #reservationSidePanel #reservationSidePanelActions button svg { width: 17px !important; height: 17px !important; flex-basis: 17px !important; }
  #reservationSidePanel .reservation-side-panel-nav .side-panel-nav-chip { min-height: 38px !important; padding: 8px 12px !important; font-size: 13px !important; }
  #reservationSidePanel .reservation-side-panel-close,
  #reservationSidePanel .reservation-side-panel-more > summary { width: 38px !important; height: 38px !important; min-width: 38px !important; padding: 9px !important; }
}