/* Correspondence compose UX — existing Angular app only.
 * Screen-only: print / PDF / barcode geometry is owned elsewhere.
 * Every rule is scoped under .sx-correspondence-form (create/edit forms) or .sx-route-editor (RouteForm directive, also reused on the detail
 * routing form). Angular-managed visibility (.ng-hide / .hidden from ng-show
 * / ng-hide / ng-if) is never overridden: any rule that sets a display value
 * on a potentially conditional element uses a :not(.ng-hide) guard. A narrow icon rule also preserves
 * Angular visibility against tenant RTL styles. No ancestor of a dropdown / ui-select sets an
 * overflow value that would clip its menu. */

@media screen {
  .sx-correspondence-form {
    --sx-compose-ink: var(--sx-ink, var(--sx-text, #19312c));
    --sx-compose-muted: var(--sx-muted, #53675f);
    --sx-compose-border: var(--sx-border, #dce5df);
    --sx-compose-border-strong: var(--sx-border-strong, #bdcbc4);
    --sx-compose-surface: var(--sx-surface, #ffffff);
    --sx-compose-muted-surface: var(--sx-surface-muted, #f8faf8);
    --sx-compose-brand: var(--sx-brand, var(--sx-primary, #176b59));
    --sx-compose-brand-strong: var(--sx-brand-strong, #105446);
    --sx-compose-brand-soft: var(--sx-brand-soft, #e5f1ed);
    --sx-compose-focus: var(--sx-focus, #167555);
    min-width: 0;
    color: var(--sx-compose-ink);
  }

  .sx-route-editor {
    --sx-route-ink: var(--sx-ink, var(--sx-text, #19312c));
    --sx-route-muted: var(--sx-muted, #53675f);
    --sx-route-border: var(--sx-border, #dce5df);
    --sx-route-border-strong: var(--sx-border-strong, #bdcbc4);
    --sx-route-surface: var(--sx-surface, #ffffff);
    --sx-route-muted-surface: var(--sx-surface-muted, #f8faf8);
    --sx-route-brand: var(--sx-brand, var(--sx-primary, #176b59));
    --sx-route-brand-strong: var(--sx-brand-strong, #105446);
    --sx-route-brand-soft: var(--sx-brand-soft, #e5f1ed);
    --sx-route-focus: var(--sx-focus, #167555);
    display: block;
    min-width: 0;
    color: var(--sx-route-ink);
  }

  .sx-correspondence-compose [class*="col-"],
  .sx-correspondence-compose .info-detail,
  .sx-correspondence-compose .info-detail div,
  .sx-correspondence-compose form,
  .sx-route-editor [class*="col-"],
  .sx-route-editor .info-detail,
  .sx-route-editor .info-detail div {
    min-width: 0;
  }

  /* ---------- Compose header ---------- */

  .sx-correspondence-compose .sx-correspondence-compose__header:not(.ng-hide) {
    display: block;
  }

  .sx-correspondence-compose .sx-correspondence-compose__header {
    min-width: 0;
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    border-block-end: 1px solid var(--sx-compose-border);
    background: transparent;
  }

  .sx-correspondence-compose .sx-correspondence-compose__header h1,
  .sx-correspondence-compose .sx-correspondence-compose__header h2 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(19px, 1.2rem + 0.6vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .sx-correspondence-compose .sx-correspondence-compose__header h1 i,
  .sx-correspondence-compose .sx-correspondence-compose__header h2 i {
    margin-inline-end: 8px;
    color: var(--sx-compose-brand);
  }

  .sx-correspondence-compose .sx-correspondence-compose__intro {
    min-width: 0;
    margin-block: 8px 0;
    overflow-wrap: anywhere;
    color: var(--sx-compose-muted);
    font-size: 13px;
    line-height: 1.6;
  }

  /* ---------- Compose body + sections ---------- */

  .sx-correspondence-compose .sx-correspondence-compose__body:not(.ng-hide) {
    display: block;
  }

  .sx-correspondence-compose .sx-correspondence-compose__body {
    min-width: 0;
    padding-block-start: 14px;
  }

  .sx-correspondence-compose .sx-correspondence-compose__section:not(.ng-hide) {
    display: block;
  }

  /* Section cards give the long form its hierarchy. Ancestors keep visible
   * overflow so ui-select / typeahead menus are never clipped. */
  .sx-correspondence-compose .sx-correspondence-compose__section {
    min-width: 0;
    margin-block-end: 14px;
    padding: 14px;
    overflow: visible;
    border: 1px solid var(--sx-compose-border);
    border-radius: var(--sx-radius-lg, 12px);
    background: var(--sx-compose-surface);
  }

  .sx-correspondence-compose .sx-correspondence-compose__section-title {
    min-width: 0;
    margin: 0 0 4px;
    padding-block-end: 8px;
    overflow-wrap: anywhere;
    border-block-end: 1px solid var(--sx-compose-border);
    color: var(--sx-compose-ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
  }

  .sx-correspondence-compose .sx-correspondence-compose__section-description {
    min-width: 0;
    margin-block: 0 10px;
    overflow-wrap: anywhere;
    color: var(--sx-compose-muted);
    font-size: 12.5px;
    line-height: 1.6;
  }

  .sx-correspondence-compose .sx-correspondence-compose__body > .wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .sx-correspondence-compose .sx-correspondence-compose__section .row.wrapper:not(.sx-compose-field-grid):not(.sx-compose-additional),
  .sx-correspondence-compose .sx-correspondence-compose__section .clearfix {
    margin-inline: -10px;
    padding: 0;
  }

  /* Legacy rows use flex; explicit form grids own their field sizing. */
  .sx-correspondence-compose .sx-correspondence-compose__section .row.wrapper:not(.sx-compose-field-grid):not(.sx-compose-additional):not(.ng-hide),
  .sx-correspondence-compose .sx-correspondence-compose__section .clearfix:not(.ng-hide) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .sx-correspondence-compose .sx-correspondence-compose__section .clearfix {
    flex-basis: 100%;
    margin-inline: 0;
  }

  .sx-correspondence-compose .sx-correspondence-compose__section .row.wrapper::before,
  .sx-correspondence-compose .sx-correspondence-compose__section .row.wrapper::after,
  .sx-correspondence-compose .sx-correspondence-compose__section .clearfix::before,
  .sx-correspondence-compose .sx-correspondence-compose__section .clearfix::after {
    display: none;
  }

  .sx-correspondence-compose .sx-correspondence-compose__section [class*="col-md-"] {
    padding-inline: 10px;
  }

  /* These directives retain their original Bootstrap column children. */
  .sx-correspondence-form correspondence-code-input:not(.ng-hide),
  .sx-correspondence-form my_entity-input:not(.ng-hide),
  .sx-correspondence-form entity-input:not(.ng-hide),
  .sx-correspondence-form correspondence-type-input:not(.ng-hide),
  .sx-correspondence-form domain-type-input:not(.ng-hide),
  .sx-correspondence-form privacy-level-input:not(.ng-hide),
  .sx-correspondence-form importance-level-input:not(.ng-hide),
  .sx-correspondence-form category-input:not(.ng-hide),
  .sx-correspondence-form folder-input:not(.ng-hide) {
    display: contents;
  }

  /* The tenant RTL icon rule must not override Angular's hidden spinner. */
  .sx-correspondence-compose .ui-select-refreshing.ng-hide,
  #edit-info-basic .ui-select-refreshing.ng-hide,
  #edit-info-basic .form-control-spin.ng-hide,
  .sx-route-editor .ui-select-refreshing.ng-hide,
  .sx-route-editor .form-control-spin.ng-hide {
    display: none !important;
  }

  /* ---------- Field hierarchy: labels, controls, help ---------- */

  .sx-correspondence-compose .info-detail,
  .sx-route-editor .info-detail {
    min-width: 0;
    margin-block-end: 12px;
    overflow: visible;
  }

  .sx-correspondence-compose .info-detail .title,
  .sx-route-editor .info-detail .title {
    display: block;
    min-width: 0;
    margin-block-end: 6px;
    padding: 2px 0 6px;
    border: 0;
    border-block-end: 0;
    background: transparent;
    color: var(--sx-compose-muted, var(--sx-muted, #53675f));
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.45;
    text-transform: none;
    overflow-wrap: anywhere;
  }

  .sx-correspondence-compose .info-detail .title .btn,
  .sx-correspondence-compose .info-detail .title a,
  .sx-route-editor .info-detail .title .btn,
  .sx-route-editor .info-detail .title a {
    text-transform: none;
    letter-spacing: normal;
  }



  .sx-correspondence-compose .info-detail span:not(.title),
  .sx-route-editor .info-detail span:not(.title) {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.55;
  }

  .sx-correspondence-compose .form-control,
  .sx-route-editor .form-control {
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    touch-action: manipulation;
  }

  .sx-correspondence-compose textarea.form-control,
  .sx-route-editor textarea.form-control {
    min-height: 76px;
    line-height: 1.55;
    resize: vertical;
  }

  .sx-correspondence-compose textarea[ui-tinymce],
  .sx-correspondence-compose textarea[ng-model="correspondence.document_body"] {
    min-height: 180px;
  }

  .sx-correspondence-compose .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 6px 0;
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
  }

  .sx-correspondence-compose .checkbox-label checkbox,
  .sx-correspondence-compose .checkbox-label input[type="checkbox"] {
    flex: 0 0 auto;
  }

  .sx-correspondence-compose .input-group,
  .sx-route-editor .input-group {
    min-width: 0;
    max-width: 100%;
  }

  .sx-correspondence-compose .input-group .form-control,
  .sx-route-editor .input-group .form-control {
    min-width: 0;
  }

  .sx-correspondence-compose .input-group-addon {
    flex: 0 0 auto;
    align-items: center;
  }

  .sx-correspondence-compose .help-block,
  .sx-route-editor .help-block {
    margin-block: 6px 0;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.55;
  }

  /* ---------- Dropdown / choice readability (placement only) ---------- */

  .sx-correspondence-compose .ui-select-bootstrap > .dropdown-menu,
  .sx-correspondence-compose .dropdown-menu,
  .sx-route-editor .ui-select-bootstrap > .dropdown-menu,
  .sx-route-editor .dropdown-menu {
    min-width: 12rem;
    max-width: min(24rem, calc(100vw - 2rem));
    text-align: start;
  }

  .sx-correspondence-compose .ui-select-bootstrap > .dropdown-menu,
  .sx-route-editor .ui-select-bootstrap > .dropdown-menu {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .sx-correspondence-compose .ui-select-bootstrap > .ui-select-match > .btn,
  .sx-route-editor .ui-select-bootstrap > .ui-select-match > .btn {
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    height: auto;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: start;
  }

  .sx-correspondence-compose .ui-select-match-text,
  .sx-route-editor .ui-select-match-text {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .sx-correspondence-compose .ui-select-choices-row > a,
  .sx-route-editor .ui-select-choices-row > a {
    display: block;
    min-height: 36px;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    line-height: 1.5;
  }

  .sx-correspondence-compose .pos-rlt,
  .sx-route-editor .pos-rlt {
    min-width: 0;
  }

  .sx-correspondence-compose .ui-select-bootstrap .ui-select-choices-row > span,
  .sx-route-editor .ui-select-bootstrap .ui-select-choices-row > span {
    padding: 8px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sx-correspondence-compose .ui-select-bootstrap .ui-select-choices-row.active > span,
  .sx-route-editor .ui-select-bootstrap .ui-select-choices-row.active > span {
    background: var(--sx-brand, #176b59);
    color: #fff;
  }

  /* ---------- Segmented yes/no + internal/external groups ---------- */

  .sx-route-editor .btn-group:not(.ng-hide) {
    display: inline-flex;
  }

  .sx-correspondence-compose .btn-group:not(.ng-hide) {
    display: inline-flex;
  }

  .sx-correspondence-compose .btn-group,
  .sx-route-editor .btn-group {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
  }

  .sx-correspondence-compose .btn-group > .btn,
  .sx-route-editor .btn-group > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 36px;
    min-width: 0;
    max-width: 100%;
    float: none;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    touch-action: manipulation;
  }

  .sx-correspondence-compose .btn-group > .btn.active,
  .sx-route-editor .btn-group > .btn.active {
    border-color: var(--sx-compose-brand, var(--sx-brand, #176b59));
    background: var(--sx-compose-brand-soft, var(--sx-brand-soft, #e5f1ed));
    color: var(--sx-compose-brand-strong, var(--sx-brand-strong, #105446));
    box-shadow: inset 0 0 0 1px var(--sx-compose-brand, var(--sx-brand, #176b59));
  }

  /* ---------- Attachment area + file selectors stay fully usable ---------- */

  .sx-correspondence-compose .sx-correspondence-compose__attachment-area:not(.ng-hide) {
    display: block;
  }

  .sx-correspondence-compose .sx-correspondence-compose__attachment-area {
    min-width: 0;
    margin-block-end: 12px;
    padding: 12px;
    overflow: visible;
    border: 1px dashed var(--sx-compose-border-strong);
    border-radius: var(--sx-radius, 8px);
    background: var(--sx-compose-muted-surface);
  }

  .sx-correspondence-compose kad-file-selector,
  .sx-route-editor route-form-attachments {
    display: block;
    min-width: 0;
    max-width: 100%;
  }

  .sx-correspondence-compose kad-file-selector .btn,
  .sx-correspondence-compose kad-file-selector button,
  .sx-correspondence-compose kad-file-selector input,
  .sx-route-editor route-form-attachments .btn,
  .sx-route-editor route-form-attachments button,
  .sx-route-editor route-form-attachments input {
    min-height: 36px;
    max-width: 100%;
    touch-action: manipulation;
  }

  /* ---------- Notices ---------- */

  .sx-correspondence-compose .alert {
    margin-block-end: 12px;
    border-inline-start: 4px solid currentColor;
    overflow-wrap: anywhere;
  }

  .sx-correspondence-compose .no-results {
    padding: 24px 16px;
    color: var(--sx-compose-muted);
    text-align: center;
    line-height: 1.6;
  }

  .sx-correspondence-compose .line,
  .sx-route-editor hr {
    min-width: 0;
    border-color: var(--sx-compose-border, var(--sx-border, #dce5df));
  }

  /* ---------- Compose actions (static, never sticky) ---------- */

  .sx-correspondence-compose .sx-correspondence-compose__actions:not(.ng-hide) {
    display: flex;
  }

  .sx-correspondence-compose .sx-correspondence-compose__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: visible;
  }

  .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear:not(.ng-hide) {
    display: flex;
  }

  /* The legacy submit row keeps its markup; only spacing/wrapping improves.
   * Static positioning keeps actions from covering form content. */
  .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    float: none;
    width: 100%;
    padding-inline: 0;
    overflow: visible;
  }

  .sx-correspondence-compose .sx-correspondence-compose__actions .btn,
  .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    min-width: 0;
    max-width: 100%;
    padding-inline: 18px;
    overflow-wrap: anywhere;
    white-space: normal;
    touch-action: manipulation;
  }

  /* Primary create/save keeps the theme's forest fill; secondary stays quiet. */
  .sx-correspondence-compose .sx-correspondence-compose__actions .btn-info,
  .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear .btn-info {
    border-color: var(--sx-compose-brand);
    background: var(--sx-compose-brand);
    color: #fff;
  }

  .sx-correspondence-compose .sx-correspondence-compose__actions .btn-info:hover,
  .sx-correspondence-compose .sx-correspondence-compose__actions .btn-info:focus,
  .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear .btn-info:hover,
  .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear .btn-info:focus {
    border-color: var(--sx-compose-brand-strong);
    background: var(--sx-compose-brand-strong);
    color: #fff;
  }

  /* ---------- Route editor: recipient cards ---------- */

  .sx-route-editor .sx-route-editor__recipient:not(.ng-hide) {
    display: block;
  }

  .sx-route-editor .sx-route-editor__recipient {
    min-width: 0;
    margin-block-end: 14px;
    padding: 14px;
    overflow: visible;
    border: 1px solid var(--sx-route-border);
    border-radius: var(--sx-radius-lg, 12px);
    background: var(--sx-route-surface);
  }

  .sx-route-editor .sx-route-editor__recipient-header:not(.ng-hide) {
    display: flex;
  }

  .sx-route-editor .sx-route-editor__recipient-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    margin-block-end: 10px;
    padding-block-end: 10px;
    overflow: visible;
    border-block-end: 1px solid var(--sx-route-border);
  }

  .sx-route-editor .sx-route-editor__recipient-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--sx-route-border);
    border-radius: 999px;
    background: var(--sx-route-muted-surface);
    color: var(--sx-route-brand-strong);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
  }

  .sx-route-editor .sx-route-editor__recipient-summary {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--sx-route-muted);
    font-size: 12.5px;
    line-height: 1.55;
  }

  .sx-route-editor .sx-route-editor__fields:not(.ng-hide) {
    display: block;
  }

  .sx-route-editor .sx-route-editor__fields {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 14px;
    min-width: 0;
    overflow: visible;
  }

  .sx-route-editor .sx-route-editor__fields::before,
  .sx-route-editor .sx-route-editor__fields::after {
    display: none;
  }

  /* Existing route rows render inside (or as) the recipient card. */
  .sx-route-editor > div > .row.wrapper:not(.ng-hide),
  .sx-route-editor .row.wrapper:not(.ng-hide) {
    display: flex;
  }

  .sx-route-editor > div > .row.wrapper,
  .sx-route-editor .row.wrapper {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 14px;
    min-width: 0;
    margin-inline: 0;
    margin-block-end: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .sx-route-editor > div > .row.wrapper::before,
  .sx-route-editor > div > .row.wrapper::after,
  .sx-route-editor .row.wrapper::before,
  .sx-route-editor .row.wrapper::after {
    display: none;
  }

  .sx-route-editor .row.wrapper > [class*="col-"] {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
    float: none;
    padding-inline: 0;
  }

  .sx-route-editor .sx-route-editor__fields > [class*="col-"] {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
    float: none;
    padding-inline: 0;
  }

  .sx-route-editor .row.padder:not(.ng-hide) {
    display: flex;
  }

  .sx-route-editor .row.padder {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 10px 0 0;
    overflow: visible;
  }

  .sx-route-editor .row.padder::before,
  .sx-route-editor .row.padder::after {
    display: none;
  }

  .sx-route-editor .row.padder > [class*="col-"] {
    flex: 1 1 auto;
    min-width: 0;
    float: none;
    padding-inline: 0;
  }

  .sx-route-editor .sx-route-editor__actions:not(.ng-hide) {
    display: flex;
  }

  .sx-route-editor .sx-route-editor__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-block-start: 10px;
    overflow: visible;
  }

  .sx-route-editor .row.padder .btn,
  .sx-route-editor .sx-route-editor__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    touch-action: manipulation;
  }

  /* ---------- Touch targets + focus (scoped) ---------- */

  .sx-correspondence-compose .btn,
  .sx-route-editor .btn {
    min-height: 36px;
    touch-action: manipulation;
  }

  .sx-correspondence-compose a,
  .sx-correspondence-compose button,
  .sx-route-editor a,
  .sx-route-editor button {
    touch-action: manipulation;
  }

  .sx-correspondence-compose a:focus-visible,
  .sx-correspondence-compose button:focus-visible,
  .sx-correspondence-compose input:focus-visible,
  .sx-correspondence-compose select:focus-visible,
  .sx-correspondence-compose textarea:focus-visible,
  .sx-correspondence-compose [tabindex]:focus-visible,
  .sx-route-editor a:focus-visible,
  .sx-route-editor button:focus-visible,
  .sx-route-editor input:focus-visible,
  .sx-route-editor select:focus-visible,
  .sx-route-editor textarea:focus-visible,
  .sx-route-editor [tabindex]:focus-visible {
    outline: 2px solid var(--sx-compose-focus, var(--sx-focus, #167555));
    outline-offset: 2px;
  }

  /* ---------- Wide screens ---------- */

  @media (min-width: 1440px) {
    .sx-correspondence-compose .sx-correspondence-compose__body {
      max-width: 1200px;
      margin-inline: auto;
    }

    .sx-correspondence-compose form > .row.wrapper,
    .sx-correspondence-compose form > .clearfix {
      padding: 18px;
    }

    .sx-correspondence-compose .sx-correspondence-compose__section,
    .sx-route-editor .sx-route-editor__recipient {
      padding: 18px;
    }
  }

  /* ---------- <= 1024px ---------- */

  @media (max-width: 1024px) {
    .sx-correspondence-compose form > .row.wrapper > [class*="col-"],
    .sx-correspondence-compose form > .clearfix > [class*="col-"] {
      flex-basis: 16rem;
    }

    .sx-correspondence-compose form > .row.wrapper > .col-md-12,
    .sx-correspondence-compose form > .clearfix > .col-md-12 {
      flex-basis: 100%;
    }

    .sx-route-editor .row.wrapper > [class*="col-"],
    .sx-route-editor .sx-route-editor__fields > [class*="col-"] {
      flex-basis: 16rem;
    }

    .sx-correspondence-compose .sx-correspondence-compose__actions {
      justify-content: flex-start;
    }
  }

  /* ---------- <= 720px: stack fields ---------- */

  @media (max-width: 720px) {
    .sx-correspondence-compose .sx-correspondence-compose__section {
      padding: 12px;
    }

    .sx-correspondence-compose form > .row.wrapper,
    .sx-correspondence-compose form > .clearfix {
      gap: 0;
      padding: 12px;
    }

    .sx-correspondence-compose form > .row.wrapper > [class*="col-"],
    .sx-correspondence-compose form > .clearfix > [class*="col-"],
    .sx-correspondence-compose form > .row.wrapper > .col-md-6,
    .sx-correspondence-compose form > .clearfix > .col-md-6,
    .sx-correspondence-compose form > .row.wrapper > .col-md-4,
    .sx-correspondence-compose form > .clearfix > .col-md-4 {
      flex: 1 1 100%;
      width: 100%;
    }

    .sx-route-editor .sx-route-editor__recipient {
      padding: 12px;
    }

    .sx-route-editor .row.wrapper > [class*="col-"],
    .sx-route-editor .sx-route-editor__fields > [class*="col-"] {
      flex: 1 1 100%;
      width: 100%;
    }

    .sx-correspondence-compose .btn,
    .sx-route-editor .btn {
      min-height: 40px;
    }

    .sx-correspondence-compose .sx-correspondence-compose__actions .btn,
    .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear .btn {
      flex: 1 1 auto;
    }

    .sx-correspondence-compose .ui-select-bootstrap > .dropdown-menu,
    .sx-correspondence-compose .dropdown-menu,
    .sx-route-editor .ui-select-bootstrap > .dropdown-menu,
    .sx-route-editor .dropdown-menu {
      max-width: calc(100vw - 2rem);
    }
  }

  /* ---------- <= 390px ---------- */

  @media (max-width: 390px) {
    .sx-correspondence-compose .sx-correspondence-compose__header h1,
    .sx-correspondence-compose .sx-correspondence-compose__header h2 {
      font-size: 19px;
    }

    .sx-correspondence-compose .sx-correspondence-compose__section {
      padding: 12px 10px;
    }

    .sx-correspondence-compose form > .row.wrapper,
    .sx-correspondence-compose form > .clearfix {
      padding: 12px 10px;
    }

    .sx-correspondence-compose .sx-correspondence-compose__actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }

    .sx-correspondence-compose .sx-correspondence-compose__actions .btn {
      width: 100%;
    }

    .sx-correspondence-compose form > .row.wrapper > .col-md-12.clear .btn {
      flex: 1 1 100%;
      width: 100%;
    }

    .sx-route-editor .sx-route-editor__recipient-header {
      align-items: flex-start;
    }
  }

  /* ---------- <= 320px ---------- */

  @media (max-width: 320px) {
    .sx-correspondence-compose .sx-correspondence-compose__header h1,
    .sx-correspondence-compose .sx-correspondence-compose__header h2 {
      font-size: 18px;
    }

    .sx-correspondence-compose .sx-correspondence-compose__intro,
    .sx-correspondence-compose .sx-correspondence-compose__section-description {
      font-size: 12px;
    }

    .sx-correspondence-compose .sx-correspondence-compose__actions {
      grid-template-columns: minmax(0, 1fr);
    }

    .sx-correspondence-compose .sx-correspondence-compose__section,
    .sx-correspondence-compose form > .row.wrapper,
    .sx-correspondence-compose form > .clearfix,
    .sx-route-editor .sx-route-editor__recipient {
      padding: 10px;
    }

    .sx-correspondence-compose .info-detail .title,
    .sx-route-editor .info-detail .title {
      font-size: 11px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sx-correspondence-compose .btn,
    .sx-correspondence-compose a,
    .sx-correspondence-compose .dropdown-menu,
    .sx-route-editor .btn,
    .sx-route-editor a,
    .sx-route-editor .dropdown-menu {
      transition-duration: 0.01ms;
      transition-delay: 0s;
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      scroll-behavior: auto;
    }
  }

  .sx-correspondence-compose .checkbox-label > button {
    flex: 0 0 22px;
    width: 22px;
    min-height: 22px;
    height: 22px;
  }

  .sx-correspondence-compose .info-detail > .title .text-danger {
    display: inline;
  }

  .sx-correspondence-compose .sx-correspondence-compose__actions {
    margin: 0;
    padding: 12px 0;
    border: 0;
    background: transparent;
  }

  @media (max-width: 991px) {
    .sx-correspondence-compose .sx-correspondence-compose__section [class*="col-md-"] {
      width: 100%;
    }
  }
}

.sx-route-editor__notes { border-top:1px solid #e0e7e1; padding-top:18px; }
.sx-attachment-actions .btn { min-height:36px; border-radius:6px; }
.sx-attachment-actions .btn i, .document-attachment .btn i { width:1.25em; text-align:center; color:inherit; margin-inline-end:5px; }
.sx-attachment-actions .dropdown-menu i { color:#52665b; width:1.25em; }

/* Native form rhythm: two readable columns, shared field geometry and
 * add actions in the control row. Display rules respect Angular visibility. */
@media screen {
  .sx-correspondence-form .sx-correspondence-compose__body > .sx-compose-paper {
    width:100%; max-width:1120px; margin:12px auto 24px; padding:28px 32px;
    border:1px solid var(--sx-compose-border); border-radius:14px;
    background:var(--sx-compose-surface);
  }
  .sx-correspondence-form .sx-correspondence-compose__section {
    margin:0; padding:28px 0 4px; border:0;
    border-block-end:1px solid var(--sx-compose-border); border-radius:0; background:transparent;
  }
  .sx-correspondence-form .sx-correspondence-compose__section-title {
    margin:0 0 22px; padding:0; border:0; font-size:16px; font-weight:700; line-height:1.5;
  }
  .sx-correspondence-form .sx-compose-section-heading {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-block-end:22px;
  }
  .sx-correspondence-form .sx-compose-section-heading .sx-correspondence-compose__section-title {margin:0;}
  .sx-correspondence-form .sx-compose-mode {font-size:13px; font-weight:500;}

  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional):not(.ng-hide) {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; align-items:start;
    margin-inline:0;
  }
  .sx-correspondence-form .sx-compose-registration-grid:not(.ng-hide) {grid-template-columns:2fr 1fr 1fr;}
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) > .clearfix:not(.ng-hide) {display:contents;}
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) > h2,
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) > route-form,
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) .sx-compose-wide {grid-column:1/-1;}
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) > [class*='col-md-'],
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) > .clearfix > [class*='col-md-'],
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) > :is(correspondence-code-input,entity-input,correspondence-type-input,domain-type-input,privacy-level-input,importance-level-input,category-input,folder-input) > [class*='col-md-'] {
    width:auto; float:none; padding:0; min-width:0;
  }
  .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional) > .clearfix > :is(correspondence-code-input,entity-input,correspondence-type-input,domain-type-input,privacy-level-input,importance-level-input,category-input,folder-input) > [class*='col-md-'] {
    width:auto; float:none; padding:0; min-width:0;
  }
  .sx-correspondence-form .sx-compose-additional > .clearfix > .col-md-12 {grid-column:1/-1;}
  .sx-correspondence-form .sx-compose-paper > form > .sx-correspondence-compose__section > .line {display:none;}
  .sx-correspondence-form .info-detail {margin-block-end:24px;}
  .sx-correspondence-form .info-detail > .title,
  .sx-correspondence-form .sx-field-heading > .title {
    display:block; min-height:22px; padding:0; margin:0 0 8px; border:0; background:transparent;
    color:var(--sx-compose-ink) !important; font-size:14px; font-weight:600;
    line-height:1.55; letter-spacing:0; text-transform:none;
  }
  .sx-correspondence-form :is(input,select,textarea).form-control,
  .sx-correspondence-form .ui-select-bootstrap > .ui-select-match > .btn {
    min-height:44px; padding:11px 14px; border:1px solid var(--sx-compose-border-strong);
    border-radius:10px; background:#fff; color:var(--sx-compose-ink);
    box-shadow:none; font:inherit; font-size:14px; font-weight:400; line-height:20px;
  }
  .sx-correspondence-form :is(input,select).form-control {height:44px;}
  .sx-correspondence-form .ui-select-bootstrap > .ui-select-match > .btn {height:auto; padding-inline-end:36px; text-align:start;}
  .sx-correspondence-form .ui-select-bootstrap .ui-select-match > .btn > .ui-select-match-text,
  .sx-correspondence-form .ui-select-bootstrap .ui-select-match > .btn > .ui-select-match-text span {line-height:20px;}
  .sx-correspondence-form .form-control::placeholder {color:#7c8c85; opacity:1;}
  .sx-correspondence-form :is(input,select,textarea).form-control:hover,
  .sx-correspondence-form .ui-select-bootstrap > .ui-select-match > .btn:hover {border-color:#91a79d;}
  .sx-correspondence-form :is(input,select,textarea).form-control:focus,
  .sx-correspondence-form .ui-select-bootstrap > .ui-select-match > .btn:focus {
    border-color:var(--sx-compose-brand); box-shadow:0 0 0 3px rgba(23,107,89,.12);
  }
  .sx-correspondence-form .form-control[disabled] {background:#f2f5f3; color:#6b7d74; cursor:default;}
  .sx-correspondence-form textarea.form-control {height:auto; min-height:100px; line-height:1.65;}
  .sx-correspondence-form select.form-control {
    appearance:none; padding-inline-end:38px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%235b7367' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
  }
  [dir='rtl'] .sx-correspondence-form select.form-control,
  html[lang='ar'] .sx-correspondence-form select.form-control {background-position:left 14px center;}
  .sx-correspondence-form .ui-select-multiple.ui-select-bootstrap {
    height:auto; min-height:44px; padding:6px 12px; border:1px solid var(--sx-compose-border-strong); border-radius:10px; background:#fff;
  }
  .sx-correspondence-form .ui-select-multiple .ui-select-match-item {min-height:28px; padding:3px 8px; border-radius:6px; font-size:13px;}
  .sx-correspondence-form .ui-select-multiple .ui-select-search {min-height:28px; height:28px; padding:3px 0; border:0; box-shadow:none; background:transparent;}

  /* One control surface for dates and other input groups; popups keep visible overflow. */
  .sx-correspondence-form .input-group:not(.ng-hide) {display:flex;}
  .sx-correspondence-form .input-group {
    align-items:stretch; width:100%; border:1px solid var(--sx-compose-border-strong); border-radius:10px; background:#fff;
  }
  .sx-correspondence-form .input-group > .form-control,
  .sx-correspondence-form .input-group > .ui-select-bootstrap {
    flex:1 1 0; min-width:0; width:0; float:none; border:0; border-radius:10px;
  }
  .sx-correspondence-form .input-group > .form-control {min-height:42px; height:42px; background:transparent; box-shadow:none;}
  .sx-correspondence-form .input-group > .input-group-btn,
  .sx-correspondence-form .input-group > .input-group-addon {
    display:flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; padding:0;
    border:0; background:transparent; border-radius:0; vertical-align:middle;
  }
  .sx-correspondence-form .input-group .input-group-btn > .btn {
    width:42px; min-height:42px; height:42px; margin:0; padding:0; border:0; border-radius:9px; color:var(--sx-compose-muted); background:transparent;
  }
  .sx-correspondence-form .input-group .input-group-btn > .btn:hover {background:var(--sx-compose-brand-soft); color:var(--sx-compose-brand);}
  .sx-correspondence-form .input-group:focus-within {border-color:var(--sx-compose-brand); box-shadow:0 0 0 3px rgba(23,107,89,.12);}

  /* Shared native selector + add pattern. These explicit classes also work in edit forms. */
  .sx-field-with-action:not(.ng-hide) {display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:start;}
  .sx-field-with-action > .ui-select-container {min-width:0; width:100%;}
  .sx-field-with-action > .sx-field-add {
    display:inline-flex; align-items:center; justify-content:center; float:none !important;
    width:44px; height:44px; min-height:44px; margin:0; padding:0; border-radius:10px;
    border-color:var(--sx-border-strong,#bdcbc4); background:#fff; color:var(--sx-brand,#176b59);
  }
  .sx-field-with-action > .sx-field-add:hover {background:var(--sx-brand-soft,#e5f1ed); border-color:var(--sx-brand,#176b59);}
  .sx-field-with-action > .sx-field-add:focus-visible {outline:2px solid var(--sx-focus,#167555); outline-offset:2px;}
  .sx-field-with-action > .sx-field-add > i {margin:0; font-size:16px; line-height:1;}
  .sx-correspondence-form .sx-field-heading {display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-block-end:8px;}
  .sx-correspondence-form .sx-field-heading > .title {margin:0;}
  .sx-correspondence-form .sx-field-option {display:inline-flex; align-items:center; gap:6px; margin:0; color:var(--sx-compose-muted); font-size:12px; font-weight:400; cursor:pointer;}
  .sx-correspondence-form .sx-field-option input {width:16px; height:16px; margin:0; accent-color:var(--sx-compose-brand);}
  .sx-correspondence-form .checkbox-label {min-height:44px; padding:10px 12px; border:1px solid var(--sx-compose-border); border-radius:10px; background:var(--sx-compose-muted-surface); font-size:13px; font-weight:400;}
  .sx-correspondence-form .sx-code-value-row:not(.ng-hide) {display:flex; flex-wrap:wrap; gap:8px; margin-block-start:10px;}
  .sx-correspondence-form .sx-code-block {flex:1 1 72px; min-width:0;}
  .sx-correspondence-form .sx-code-block .form-control {padding-inline:10px; text-align:center; font-variant-numeric:tabular-nums;}
  .sx-correspondence-form .sx-correspondence-compose__actions {margin:0; padding:24px 0 4px; border:0; background:transparent;}
  .sx-correspondence-form .sx-correspondence-compose__actions .btn {min-height:44px; padding:11px 20px; border-radius:10px; font-size:14px; font-weight:600;}
  .sx-correspondence-form .ai-registration {border-color:var(--sx-compose-border); border-radius:10px; background:var(--sx-compose-muted-surface);}
  @media (max-width:1100px) {
    .sx-correspondence-form .sx-compose-registration-grid:not(.ng-hide) {grid-template-columns:repeat(2,minmax(0,1fr));}
    .sx-correspondence-form .sx-compose-registration-grid > .clearfix > correspondence-code-input > [class*='col-md-'] {grid-column:1/-1;}
  }
  @media (max-width:767px) {
    .sx-correspondence-form .sx-correspondence-compose__body > .sx-compose-paper {margin-block:12px 20px; padding:20px 16px; border-radius:12px;}
    .sx-correspondence-form :is(.sx-compose-field-grid,.sx-compose-additional):not(.ng-hide) {grid-template-columns:minmax(0,1fr);}
    .sx-correspondence-form .sx-correspondence-compose__section {padding-block:24px 0;}
    .sx-correspondence-form .sx-compose-section-heading {align-items:flex-start;}
    .sx-correspondence-form .info-detail {margin-block-end:20px;}
  }
}

@media screen {
  .sx-correspondence-detail .sx-correspondence-body #edit-info-basic.sx-correspondence-edit {
    max-width:1120px; margin-inline:auto; padding:28px 32px; border-radius:14px;
  }
  .sx-correspondence-edit__title {margin:0; padding:0; color:var(--sx-compose-ink); font-size:18px; font-weight:700; line-height:1.5;}
  .sx-correspondence-edit :is(.sx-compose-field-grid,.sx-compose-additional)::before,
  .sx-correspondence-edit :is(.sx-compose-field-grid,.sx-compose-additional)::after {display:none;}
  .sx-correspondence-form .ui-select-bootstrap > .ui-select-match > .btn > .ui-select-match-text {
    display:block; float:none !important; width:auto; max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sx-correspondence-form .ui-select-bootstrap > .ui-select-match > .btn > .btn-link {
    position:absolute; inset-inline-start:auto; inset-inline-end:26px; top:50%; transform:translateY(-50%); width:20px; min-height:20px; height:20px;
    margin:0 !important; padding:0; border:0; border-radius:4px; line-height:20px;
  }
  @media (max-width:767px) {
    .sx-correspondence-detail .sx-correspondence-body #edit-info-basic.sx-correspondence-edit {padding:20px 16px; border-radius:12px;}
  }
}