/* Layout and interaction enhancements only. Colors come unchanged from the original styles. */
@media screen {
  :root {
    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 18px;
  }
  body { font-family: var(--heading-font); line-height: 1.55; }
  button, input, select, textarea { font-family: inherit; }
  :is(button, a, summary, input, select, textarea):focus-visible {
    outline-offset: 3px;
  }
  :is(button, input, select, textarea):disabled {
    cursor: not-allowed;
  }
  input[type=checkbox], input[type=radio] { width: 17px; height: 17px; flex-shrink: 0; }
  :is(button, a)[aria-busy=true] { cursor: progress; }
  .app-select { position: relative; display: block; min-width: 0; max-width: 100%; }
  .app-select[hidden] { display: none; }
  .app-select-native {
    position: absolute !important; width: 1px !important; height: 1px !important;
    min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
    clip-path: inset(50%); overflow: hidden !important; white-space: nowrap;
  }
  .app-select-trigger { min-width: 0; gap: 12px; }
  .app-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-select.is-open .app-select-trigger > i { transform: rotate(180deg); }
  .ui-dropdown-menu.app-select-menu {
    position: fixed; z-index: 20000; top: auto; bottom: auto; right: auto; display: block;
    opacity: 1; visibility: visible; transform: none; overflow-x: hidden; overflow-y: auto;
    animation: ui-reveal .14s ease-out;
  }
  .app-select-option { display: block; width: 100%; text-align: start; overflow-wrap: anywhere; }
  .app-select-option[aria-selected=true] { font-weight: 700; }
  .app-select-option[aria-selected=true]::after { content: '\2713'; float: inline-end; margin-inline-start: 12px; }
  .app-select-group { padding: 8px 12px; font-size: .75rem; font-weight: 700; }
  .app-select-option { display: flex; align-items: flex-start; gap: 10px; min-width: 0; white-space: normal; }
  body .app-select-option[aria-selected=true] { color: #174a86; background: #edf5ff; }
  .app-select-option[aria-selected=true]::after { float: none; flex: 0 0 auto; margin-inline-start: auto; color: var(--brand-blue); }
  body .passport-agent-filter-menu .app-select-option { white-space: normal !important; overflow-wrap: anywhere !important; overflow: hidden !important; text-overflow: clip !important; }

  .app-header { gap: 16px; }
  .header-user-zone { gap: 12px; }
  .badge-tag { letter-spacing: .05em; }
  .dash-nav-bar { gap: 5px; min-width: 0; flex-wrap: wrap; overflow: visible; }
  .dash-nav-btn { border-radius: 9px; font-weight: 600; transition: background .16s, color .16s, border-color .16s; }
  :is(.page-title-box, .section-tag) { letter-spacing: -.025em; }
  :is(.card-glass, .stat-box, .gateway-card) {
    min-width: 0;
  }
  .card-glass:hover { transform: none; }
  .stat-box { border-radius: var(--radius-lg); }
  .stat-box:hover { transform: translateY(-2px); }
  .stat-box-num { letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .stat-box-lbl { letter-spacing: .015em; }
  .stat-box-icon { border-radius: 14px; }
  .gateway-card { padding: 26px; border-radius: 20px; }
  .gateway-card:hover { transform: translateY(-3px); }
  .hero-banner { padding-top: clamp(24px, 4vw, 52px); padding-bottom: 24px; }
  .gateway-title, .hero-title { letter-spacing: -.035em; }

  .form-group label { font-size: .8rem; font-weight: 600; margin-bottom: 7px; }
  :is(.form-group, .input-icon-wrapper) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea),
  :is(.ui-dropdown-trigger, .duration-picker-trigger, .designer-select-trigger) {
    border-radius: var(--radius-sm); 
    font-weight: 500;
    transition: border-color .16s, box-shadow .16s, background-color .16s;
  }
  .designer-select-trigger {
    box-sizing: border-box; height: var(--standard-button-height);
    min-height: var(--standard-button-height); max-height: var(--standard-button-height);
    border-radius: var(--dropdown-control-radius); font-size: 14px;
  }
  .ui-dropdown-trigger > i, .duration-picker-trigger > i, .designer-select-trigger > i {
    flex: 0 0 auto; margin-inline-start: .75rem;
  }
  .form-group textarea { resize: vertical; }
  :is(.btn-primary, .btn-outline, .btn-sm) {
    border-radius: var(--radius-sm); font-weight: 600;
    transition: background .16s, border-color .16s, box-shadow .16s, color .16s;
  }
  .btn-primary:hover { transform: none; }

  :is(.ui-dropdown-menu, .duration-picker-menu, .action-menu-list, .action-dropdown-menu, .nav-dropdown-menu, .designer-select-menu, .account-menu-options, .stage-status-menu, .courier-name-menu, .insurance-relation-options) {
    border-radius: 12px; 
    padding: 6px;
    overscroll-behavior: contain; max-width: calc(100vw - 24px);
  }
  :is(.ui-dropdown-menu, .duration-picker-menu, .action-menu-list, .action-dropdown-menu, .nav-dropdown-menu) { z-index: 80; }
  .ui-dropdown:has(.ui-dropdown-menu):focus-within, .ui-dropdown.is-open { z-index: 81; }
  :is(.ui-dropdown-option, .duration-picker-option, .designer-select-menu button, .nav-dropdown-menu .dash-nav-btn) {
    border-radius: 7px; font-size: .82rem; font-weight: 500; min-height: 36px;
  }
  :is(.ui-dropdown-option, .duration-picker-option, .designer-select-menu button):is(.is-selected, [aria-selected=true]) {
    font-weight: 700;
  }
  :is(.ui-dropdown-option, .duration-picker-option, .designer-select-menu button):focus-visible {
    outline: 2px solid var(--brand-blue); outline-offset: -2px;
  }
  :is(.ui-dropdown-option, .duration-picker-option, .designer-select-menu button):disabled,
  :is(.ui-dropdown-option, .duration-picker-option, .designer-select-menu button)[aria-disabled=true] {
    color: #94a3b8; background: transparent; cursor: not-allowed;
  }
  body .app-select-option:disabled { color: #94a3b8 !important; background: #fff !important; cursor: not-allowed; }
  [role=option][aria-disabled=true] { cursor: not-allowed; }
  .nav-dropdown[open] > .nav-dropdown-menu, .designer-select-menu { animation: ui-reveal .14s ease-out; }
  .nav-dropdown:not([open]) > .nav-dropdown-menu { visibility: hidden; pointer-events: none; }

  :is(.global-calendar-picker, .embassy-calendar) {
    border-radius: 16px; padding: 14px; 
  }
  .global-calendar-picker { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .global-calendar-picker.is-open { animation: ui-reveal .14s ease-out; }
  :is(.global-calendar-header, .embassy-calendar-header) { font-size: .88rem; }
  :is(.global-calendar-header, .embassy-calendar-header) button {
    border-radius: 9px; min-width: 30px; min-height: 30px;
  }
  :is(.global-calendar-weekdays, .embassy-calendar-weekdays) { font-size: .7rem; font-weight: 500; }
  .global-calendar-day { border-radius: 9px; min-height: 30px; font-size: .8rem; }
  :is(.global-calendar-day, .embassy-calendar-days button) { transition: background .12s, color .12s, box-shadow .12s; font-variant-numeric: tabular-nums; }

  .custom-table-container { border-radius: 13px; }
  .custom-table-container { min-width: 0; max-width: 100%; }
  /* Tables own horizontal scrolling only; their height follows their rows. */
  :is(.candidate-table-container, .custom-table-container) { overflow-x: auto; overflow-y: hidden; height: auto; max-height: none; }
  body.billing-page .billing-page-table-container { overflow-x: hidden; }
  .candidate-table-container { max-width: 100%; min-width: 0; border-radius: 13px; }
  .candidate-toolbar-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  :is(.agent-access-grid, .staff-access-grid) { flex-wrap: wrap; overflow: visible; }
  .ed-layout, .ed-panel, .ed-preview { min-width: 0; }
  .ed-head-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-panel input, .ed-panel select { min-width: 0; max-width: 100%; }
  .ed-columns { overflow-x: auto; overflow-y: hidden; }
  #admin-agency-list .card-glass > div:first-child > div:last-child { flex-wrap: wrap; max-width: 100%; }
  #filter-agency-search { max-width: 100%; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-table { font-variant-numeric: tabular-nums; }
  .custom-table thead th { font-weight: 600; letter-spacing: .025em; }
  .custom-table tbody td { line-height: 1.4; }
  .custom-table tbody tr { transition: background-color .12s; }
  .status-pill { font-weight: 600; letter-spacing: .01em; }

  /* Cards without a page-specific heading style keep a clear title/content gap. */
  .card-glass > :is(h2, h3, h4):first-child { margin-block: 0 1rem; line-height: 1.3; }

  .modal-backdrop { padding: 20px; }
  /* Preserve each dialog's original maximum width; scroll only its body if needed. */
  body:has(.modal-backdrop.active) { overflow: hidden; }
  .modal-box { border-radius: 20px; display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 40px); }
  .modal-box > .modal-header, .modal-box > .form-actions { flex-shrink: 0; }
  .modal-box > .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .modal-header { padding: 20px 24px; }
  .modal-header h3 { letter-spacing: -.025em; font-weight: 700; }
  .modal-close-btn { border-radius: 9px; }
  .modal-body { padding: 24px; }
  .toast-msg { border-radius: 12px; font-weight: 500; }
  :is(.visa-list-loading, .empty-state) { padding: 28px 20px; text-align: center; line-height: 1.65; }
  :is(.passport-field-error, .field-error, .error-message) { font-size: .8rem; line-height: 1.5; margin-top: 5px; }
  :is(.support-chat-panel, .tenant-notification-panel) { border-radius: 16px; }

  @keyframes ui-reveal { from { opacity: 0; } to { opacity: 1; } }
}
@media screen and (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .app-header { flex-wrap: wrap; padding: 12px 18px; }
  .header-logo-image { max-width: min(430px, calc(100vw - 36px)); height: auto; }
  .header-user-zone { flex-wrap: wrap; max-width: 100%; }
  .form-grid { gap: 16px; }
  .gateway-grid { gap: 16px; }
}
@media screen and (max-width: 600px) {
  .app-header { gap: 12px; }
  .header-user-zone { width: 100%; justify-content: space-between; }
  .user-pill { min-width: 0; overflow-wrap: anywhere; }
  .gateway-grid { grid-template-columns: minmax(0, 1fr); }
  .gateway-card { padding: 22px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid > .form-group { min-width: 0; grid-column: 1 / -1 !important; }
  .form-actions { flex-wrap: wrap; gap: 10px; }
  .modal-backdrop { padding: 10px; }
  .modal-box { max-height: calc(100dvh - 20px); border-radius: 16px; }
  .modal-header { padding: 16px; }
  .modal-body { padding: 16px; }
  :is(.ui-dropdown-option, .duration-picker-option, .designer-select-menu button) { min-height: 44px; }
  :is(.btn-primary, .btn-outline):not(.btn-sm) { min-height: 40px; }
  .toast-container { max-width: calc(100vw - 24px); }
}
@media screen and (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Shared action buttons keep their existing classes and handlers while using
   consistent alignment, spacing and interaction states. Specialized controls
   such as calendar days and table dropdown triggers retain their own sizing. */
@media screen {
  body :is(.btn-primary, .btn-outline, .app-dialog-button) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2 !important;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease,
      box-shadow .16s ease, opacity .16s ease;
  }
  body :is(.btn-primary, .btn-outline, .app-dialog-button) > i,
  body :is(.btn-primary, .btn-outline, .app-dialog-button) > svg {
    flex: 0 0 auto;
    line-height: 1;
  }
  body :is(.btn-primary, .btn-outline, .app-dialog-button):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
  body .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
    box-shadow: 0 4px 10px rgba(23, 74, 139, .18);
  }
  body .btn-outline:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--brand-blue);
    color: var(--brand-navy);
  }
  body :is(.btn-primary, .btn-outline, .app-dialog-button):is(:disabled, [aria-disabled="true"]) {
    opacity: .58;
    box-shadow: none;
    transform: none;
  }
  body :is(.btn-primary, .btn-outline, .app-dialog-button)[aria-busy="true"],
  body :is(.btn-primary, .btn-outline, .app-dialog-button).is-loading {
    cursor: progress;
  }
  body :is(.btn-primary, .btn-outline, .app-dialog-button):focus-visible {
    outline: 3px solid var(--search-control-focus);
    outline-offset: 2px;
  }

  /* Small table and list actions stay compact while sharing the same rhythm. */
  body .btn-sm {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 32px;
    max-width: 100%;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 9px !important;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.1 !important;
    white-space: normal;
  }
  body .btn-sm > i,
  body .btn-sm > svg { flex: 0 0 auto; line-height: 1; }
  body .btn-sm:focus-visible { outline: 2px solid var(--search-control-focus); outline-offset: 2px; }
  body .btn-sm:is(:disabled, [aria-disabled="true"]) { opacity: .58; box-shadow: none; }

  body .form-actions > :is(.btn-primary, .btn-outline),
  body .candidate-toolbar-actions > :is(.btn-primary, .btn-outline) { flex: 0 1 auto; }
}
@media screen and (max-width: 600px) {
  body :is(.btn-primary, .btn-outline, .app-dialog-button) { min-height: 40px !important; }
  body .btn-sm { min-height: 32px !important; }
}
/* Native top-layer menus escape overflow clipping on every listing page. */
:is(.action-dropdown-menu, .action-menu-list):popover-open {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 2000 !important;
}

/* Dense data tables keep their intrinsic column widths and scroll in their
   own wrapper. Short tables remain fluid and do not gain an empty scrollbar. */
@media screen {
  :is(.main-shell, .panel-workspace) :is(.custom-table-container, .candidate-table-container, .list-table-scroll-container, .embassy-draft-table-container, #active-ledger-table-container, #archived-ledger-table-container):has(table thead th:nth-child(7)):not(:has(table.permission-list-table)) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #b9c8df #f5f9ff;
  }
  :is(.main-shell, .panel-workspace) :is(.custom-table-container, .candidate-table-container, .list-table-scroll-container, .embassy-draft-table-container, #active-ledger-table-container, #archived-ledger-table-container):has(table thead th:nth-child(7)):not(:has(table.permission-list-table)) > table,
  :is(.main-shell, .panel-workspace) :is(.custom-table-container, .candidate-table-container, .list-table-scroll-container, .embassy-draft-table-container, #active-ledger-table-container, #archived-ledger-table-container):has(table thead th:nth-child(7)):not(:has(table.permission-list-table)) table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }
  :is(.custom-table-container, .candidate-table-container, .list-table-scroll-container, .embassy-draft-table-container)::-webkit-scrollbar {
    height: 8px;
  }
  :is(.custom-table-container, .candidate-table-container, .list-table-scroll-container, .embassy-draft-table-container)::-webkit-scrollbar-track {
    background: #f5f9ff;
    border-radius: 8px;
  }
  :is(.custom-table-container, .candidate-table-container, .list-table-scroll-container, .embassy-draft-table-container)::-webkit-scrollbar-thumb {
    background: #b9c8df;
    border: 2px solid #f5f9ff;
    border-radius: 8px;
  }
}

/* Mobile controls stay readable without changing desktop or printed forms. */
@media screen and (max-width: 600px) {
  .app-header { padding: 10px 14px; gap: 8px; }
  .header-brand { min-width: 0; max-width: 100%; }
  .header-logo-image { width: 280px; max-width: 100%; height: 64px; object-fit: contain; }
  .header-user-zone { gap: 8px; }
  .dash-nav-bar { margin-bottom: 18px; gap: 2px; }
  .dash-nav-bar .dash-nav-btn { padding: 10px 12px; min-height: 44px; box-sizing: border-box; }
  .page-title-box h1,
  .main-shell > .page-title-box > h1 { font-size: clamp(21px, 5.6vw, 26px); line-height: 1.3; overflow-wrap: anywhere; }
  .form-group :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea),
  .search-box input,
  .app-select-trigger { font-size: 16px; min-height: 44px; }
  .form-actions > :is(button, a) { min-height: 44px; }
  /* Keep listing columns readable; their existing containers handle swiping. */
  :is(.custom-table-container, .candidate-table-container, .list-table-scroll-container) > :is(.custom-table, .candidate-list-table) {
    min-width: 640px !important;
    max-width: none !important;
  }
}