/* =====================================================================================================================
   Onboarding portal on phones and small tablets (the sidebar becomes a drawer at 980px, so the app bar starts there).
   Desktop is untouched: every rule is inside a max-width query, except the role labels, which are hidden on desktop.
   ===================================================================================================================== */

/* The role name repeated inside each checkbox cell is only needed when the table is turned into cards */
.role-cell-label { display: none; }

/* Review tab, all screen sizes. Locked fields stay readable (opacity 1), but that also un-hid the invisible file pickers laid over
   the upload cards, so keep those invisible; and the close button had white text on the light banner. */
body.rm-review-mode #mainApp input[type="file"]:disabled { opacity: 0; }
body.rm-review-mode .rm-review-close { color: #4b5120; border-color: #9caf88; background: #ffffff; }

/* "Tap an entity, then tap a box": for people who cannot drag (touch screens and narrow windows) */
.ownership-touch-hint { display: none; }
@media (max-width: 980px), (pointer: coarse) {
  .ownership-touch-hint { display: block; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: #eef2ea; border: 1px solid #d5dfcc; color: #4b5120; font-size: 12.5px; line-height: 1.45; }
}

@media (max-width: 980px) {
  /* The page never scrolls sideways. Saying so on the root as well (the portal does it up to 480px) stops a tablet from widening
     its layout when something is a few pixels too wide, which pushed the fixed language button off the right edge. */
  html { overflow-x: hidden; }

  /* ── App bar: the drawer button on the left, the wordmark in the middle, the language button on the right ──
     Fixed (not sticky): the page sets overflow on html and body, which would stop a sticky bar from sticking. */
  .portal-main-column { padding-top: var(--gb-bar-h); min-height: 100dvh; }
  .portal-main-column::before {
    content: "GRINGOTTS";
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--gb-bar-h);
    background: rgba(250, 251, 248, 0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid #dfe4d8;
    font: 700 13px/1 "Cinzel", Georgia, serif; letter-spacing: 0.36em; text-indent: 0.36em; color: #4b5120;
  }
  .mobile-sidebar-launcher { top: 6px; bottom: auto; left: 8px; width: 40px; height: 40px; border-radius: 10px; }
  .portal-content-body { padding: 14px 14px 56px; }

  /* ── Review tab (opened from the Client Advisor and back-office portals) ──
     The read-only banner sits above the page, so its content starts below the fixed bar and scrolls away under it. */
  body.rm-review-mode .portal-main-column { padding-top: 0; }
  body.rm-review-mode .rm-review-banner { padding: calc(var(--gb-bar-h) + 12px) 14px 14px; gap: 8px 10px; }
  /* rows: [pill] [company, reference, status] [viewing as | close] [rework | finalize] */
  body.rm-review-mode .rm-review-text { flex: 1 1 100%; order: 1; }
  body.rm-review-mode .rm-review-by { flex: 1 1 0; min-width: 0; order: 2; }
  body.rm-review-mode .rm-review-close { flex: 0 0 auto; order: 3; min-height: 44px; padding: 8px 16px; font-size: 13px; }
  body.rm-review-mode .rm-review-actions { display: flex; flex: 1 1 100%; order: 4; gap: 8px; }
  body.rm-review-mode .rm-review-actions button { flex: 1 1 0; min-height: 44px; padding: 8px 10px; font-size: 13px; }
  .rm-review-action-overlay { align-items: flex-end; padding: 0; }
  .rm-review-action-card { width: 100%; max-height: 92dvh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .rm-review-action-buttons { flex-direction: column-reverse; gap: 10px; }
  .rm-review-action-buttons button { width: 100%; min-height: 48px; font-size: 14px; }

  /* The drawer fits the screen and scrolls inside itself */
  .portal-sidebar { width: min(86vw, 320px); max-width: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sidebar-backdrop { background: rgba(28, 31, 17, 0.55); }
}

@media (max-width: 768px) {
  /* ── "Progress saved": a chip in the middle of the app bar, never over the page, never in the way of a tap ── */
  .autosave {
    top: 10px; bottom: auto; left: 50%; right: auto; width: max-content; max-width: calc(100vw - 150px);
    padding: 6px 10px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    z-index: 290; pointer-events: none; transform: translate(-50%, -6px);
  }
  .autosave.visible { transform: translate(-50%, 0); }

  /* ── Sign-in dialog: scrolls on its own on a short screen, and the page behind it stays still ── */
  #loginOverlay { align-items: flex-start; overflow-y: auto; padding: 56px 14px 24px; -webkit-overflow-scrolling: touch; }
  #loginOverlay .login-box { width: 100%; max-width: 440px; margin: 0 auto; }
  body:has(#loginOverlay:not([style*="display: none"]):not(.hidden):not(.closing)) .onboarding-portal-root { max-height: 100dvh; overflow: hidden; }

  /* ── Welcome block and screens ── */
  .welcome-hero { padding: 16px; margin-bottom: 14px; }
  .welcome-hero h1 { font-size: 22px !important; }
  .hero-split { gap: 14px; }
  .screen-body { padding: 0; }
  .banner { padding: 12px 14px; font-size: 13.5px; }
  .upload-card { padding: 16px 14px; }

  /* ── Buttons that finish a section or a step: full width, easy to hit ── */
  .tax-registration-actions { display: flex; }
  .tax-registration-actions .btn, .tax-registration-actions button { flex: 1 1 100%; width: 100%; }

  /* ── People (directors, owners, key persons): name on its own line, badges and actions below it ── */
  .directors-kyc .dk-person-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px; }
  .directors-kyc .dk-person-header .dk-avatar { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; }
  .directors-kyc .dk-person-info { flex: 1 1 calc(100% - 100px); min-width: 0; order: 0; }
  .directors-kyc .dk-toggle { order: 1; flex: 0 0 40px; width: 40px; height: 40px; margin-left: auto; }
  .directors-kyc .dk-status, .directors-kyc .dk-opt-btn, .directors-kyc .dk-delete-btn { order: 2; }
  .directors-kyc .dk-opt-btn, .directors-kyc .dk-delete-btn { padding: 8px 14px; min-height: 36px; }
  .directors-kyc .dk-name-row { display: block; }
  .directors-kyc .dk-name-input { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; }
  .directors-kyc .dk-mismatch-badge { margin-top: 6px; }
  .dk-meta { margin-top: 2px; }
  .dk-header-bar { flex-wrap: wrap; gap: 10px; }
  .dk-add-bar, .dk-actions { flex-wrap: wrap; gap: 10px; }

  /* ── Ownership: the ledger rows stack, the visual chart is driven by taps ── */
  .struct-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; border: 1px solid #e3e8dc; border-radius: 10px; background: #fff; }
  .struct-actions .btn { flex: 1 1 100%; }
  .view-toggle { max-width: 100%; }
  .entity-card { cursor: pointer; }
  .entity-card:hover { transform: none; }
  .entity-card.is-picked { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(75, 81, 32, 0.28); background: #f4f7ef; }
  .drop-zone { width: 100%; min-width: 0; min-height: 96px; box-sizing: border-box; }
  body.ownership-card-picked .drop-zone:not(:has(.entity-card)),
  body.ownership-card-picked #pool { border-color: var(--primary); background: #f4f7ef; animation: dzNudge 1.4s ease-in-out infinite; }
  @keyframes dzNudge { 50% { box-shadow: 0 0 0 4px rgba(75, 81, 32, 0.16); } }
  .dz-share-wrap { flex-wrap: wrap; }
  .dz-share-input { height: 36px; width: 72px; font-size: 16px; }
  .dz-delete-box-btn, .dz-remove { min-width: 36px; min-height: 36px; }

  /* ── Roles tables: one card per person, each role a full-width row with the checkbox on the right ── */
  .table-responsive { overflow: visible !important; margin-bottom: 12px; }
  table.rtable { display: block !important; min-width: 0 !important; width: 100% !important; table-layout: auto; }
  table.rtable thead { display: none; }
  table.rtable tbody { display: block; }
  table.rtable tbody tr { display: block; margin: 0 0 12px; padding: 4px 14px 6px; border: 1px solid #dfe4d8; border-radius: 12px; background: #fff; }
  table.rtable tbody tr:hover td { background: transparent; }
  table.rtable tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto !important;
    padding: 12px 0; min-height: 48px; text-align: left; border: 0; border-top: 1px solid #eef1ea; box-sizing: border-box;
  }
  table.rtable tbody td:first-child { display: block; padding: 12px 0; border-top: 0; white-space: normal; overflow: visible; font-size: 15px; }
  .role-cell-label { display: inline; flex: 1 1 auto; font-weight: 600; font-size: 14px; color: #32361f; }
  table.rtable input[type="checkbox"] { width: 26px; height: 26px; flex: 0 0 26px; }
  .signatory-contact-fields { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
  .signatory-phone-wrap { grid-template-columns: minmax(112px, 0.8fr) 1.2fr; }
  .role-category-footer { padding: 10px 14px; }

  /* ── Review: each section is a row of text with its Edit button underneath on a narrow screen ── */
  .rv-row { gap: 4px; }
}

@media (max-width: 380px) {
  .portal-content-body { padding: 12px 12px 56px; }
  .autosave { max-width: calc(100vw - 134px); font-size: 11px; }
  .signatory-phone-wrap { grid-template-columns: 1fr; }
}